From 9ba6d71780a2b95852c86fd46f8f2f964c6c4ef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Thu, 21 Apr 2022 22:35:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/icon.ts                           |   7 +-
 src/styles/common/format.scss                 |   3 +
 src/styles/common/style.scss                  |   8 +
 .../components/ChartsItemBox/index.ts         |   3 +
 .../{ItemBox => ChartsItemBox}/index.vue      |   0
 .../components/ChartsOptionContent/index.ts   |   3 +
 .../index.vue                                 |   6 +-
 .../components/ChartsSearch/index.ts          |   3 +
 .../components/ChartsSearch/index.vue         | 139 ++++++++++++++++++
 .../ContentCharts/components/ItemBox/index.ts |   3 -
 .../components/OptionContent/index.ts         |   3 -
 .../ContentCharts/hooks/useAside.hook.ts      |   9 +-
 src/views/chart/ContentCharts/index.vue       |  19 ++-
 13 files changed, 185 insertions(+), 21 deletions(-)
 create mode 100644 src/views/chart/ContentCharts/components/ChartsItemBox/index.ts
 rename src/views/chart/ContentCharts/components/{ItemBox => ChartsItemBox}/index.vue (100%)
 create mode 100644 src/views/chart/ContentCharts/components/ChartsOptionContent/index.ts
 rename src/views/chart/ContentCharts/components/{OptionContent => ChartsOptionContent}/index.vue (95%)
 create mode 100644 src/views/chart/ContentCharts/components/ChartsSearch/index.ts
 create mode 100644 src/views/chart/ContentCharts/components/ChartsSearch/index.vue
 delete mode 100644 src/views/chart/ContentCharts/components/ItemBox/index.ts
 delete mode 100644 src/views/chart/ContentCharts/components/OptionContent/index.ts

diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index fac68f4d..03bdfa43 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -51,7 +51,8 @@ import {
   ColorWand as ColorWandIcon,
   ArrowBack as ArrowBackIcon,
   ArrowForward as ArrowForwardIcon,
-  Planet as PawIcon
+  Planet as PawIcon,
+  Search as SearchIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -183,7 +184,9 @@ const ionicons5 = {
   // 前进
   ArrowForwardIcon,
   // 狗爪
-  PawIcon
+  PawIcon,
+  // 搜索（放大镜）
+  SearchIcon
 }
 
 const carbon = {
diff --git a/src/styles/common/format.scss b/src/styles/common/format.scss
index 93559397..30163c51 100644
--- a/src/styles/common/format.scss
+++ b/src/styles/common/format.scss
@@ -2,6 +2,9 @@ body {
   overflow: hidden;
 }
 
+* {
+  list-style: none;
+}
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
   width: 8px;
diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss
index 72f1b9c2..a57d9e60 100644
--- a/src/styles/common/style.scss
+++ b/src/styles/common/style.scss
@@ -72,6 +72,14 @@
   background-size: 15px 15px, 15px 15px;
 }
 
+// 省略号
+.ellipsis-1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+
 // todo 使用 scss 循环写一套完整的
 // margin
 .go-mt-0 {
diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.ts b/src/views/chart/ContentCharts/components/ChartsItemBox/index.ts
new file mode 100644
index 00000000..e9fe1d41
--- /dev/null
+++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.ts
@@ -0,0 +1,3 @@
+import ChartsItemBox from './index.vue'
+
+export { ChartsItemBox }
diff --git a/src/views/chart/ContentCharts/components/ItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
similarity index 100%
rename from src/views/chart/ContentCharts/components/ItemBox/index.vue
rename to src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
diff --git a/src/views/chart/ContentCharts/components/ChartsOptionContent/index.ts b/src/views/chart/ContentCharts/components/ChartsOptionContent/index.ts
new file mode 100644
index 00000000..8fffb84d
--- /dev/null
+++ b/src/views/chart/ContentCharts/components/ChartsOptionContent/index.ts
@@ -0,0 +1,3 @@
+import ChartsOptionContent from './index.vue'
+
+export { ChartsOptionContent }
diff --git a/src/views/chart/ContentCharts/components/OptionContent/index.vue b/src/views/chart/ContentCharts/components/ChartsOptionContent/index.vue
similarity index 95%
rename from src/views/chart/ContentCharts/components/OptionContent/index.vue
rename to src/views/chart/ContentCharts/components/ChartsOptionContent/index.vue
index e673acd0..ec123885 100644
--- a/src/views/chart/ContentCharts/components/OptionContent/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsOptionContent/index.vue
@@ -12,7 +12,7 @@
    ></n-menu>
     <div class="chart-content-list">
       <n-scrollbar>
-        <item-box :menuOptions="packages.selectOptions"></item-box>
+        <charts-item-box :menuOptions="packages.selectOptions"></charts-item-box>
       </n-scrollbar>
     </div>
   </div>
@@ -24,8 +24,8 @@ import { ConfigType } from '@/packages/index.d'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { loadAsyncComponent } from '@/utils'
 
-const ItemBox = loadAsyncComponent(() =>
-  import('../ItemBox/index.vue')
+const ChartsItemBox = loadAsyncComponent(() =>
+  import('../ChartsItemBox/index.vue')
 )
 
 const props = defineProps({
diff --git a/src/views/chart/ContentCharts/components/ChartsSearch/index.ts b/src/views/chart/ContentCharts/components/ChartsSearch/index.ts
new file mode 100644
index 00000000..119c9989
--- /dev/null
+++ b/src/views/chart/ContentCharts/components/ChartsSearch/index.ts
@@ -0,0 +1,3 @@
+import ChartsSearch from './index.vue'
+
+export { ChartsSearch }
diff --git a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
new file mode 100644
index 00000000..945b3d8f
--- /dev/null
+++ b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="go-chart-search">
+    <n-popover
+      class="chart-search-popover"
+      :show-arrow="false"
+      :show="showPopover"
+      :to="false"
+      trigger="hover"
+      placement="bottom-start"
+    >
+      <template #trigger>
+        <n-input-group>
+          <n-input
+            v-model:value.trim="search"
+            size="small"
+            :loading="loading"
+            clearable
+            placeholder="请输入组件名称"
+            @update:value="searchHandle"
+          >
+            <template #suffix>
+              <n-icon :component="SearchIcon" />
+            </template>
+          </n-input>
+        </n-input-group>
+      </template>
+
+      <div class="search-list-box">
+        <n-scrollbar style="max-height: 500px">
+          <n-text v-show="!searchRes.length">没有找到组件~</n-text>
+          <div
+            class="list-item ellipsis-1"
+            v-for="item in searchRes"
+            :key="item.key"
+            :title="item.title"
+          >
+            {{ item.title }}
+          </div>
+        </n-scrollbar>
+        <div class="popover-modal"></div>
+      </div>
+    </n-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+import { icon } from '@/plugins'
+import { themeColor, MenuOptionsType } from '../../hooks/useAside.hook'
+import { ConfigType } from '@/packages/index.d'
+import { isString, addEventListener, removeEventListener } from '@/utils'
+
+const props = defineProps({
+  menuOptions: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const { SearchIcon } = icon.ionicons5
+const showPopover = ref<boolean>(false)
+const loading = ref<boolean | undefined>(undefined)
+const search = ref<string | null>(null)
+const searchRes = ref<ConfigType[]>([])
+
+// 组件数组提取
+const listFormatHandle = (options: any[]) => {
+  const arr = []
+  for (const item of options) {
+    arr.push(...item.list)
+  }
+  return arr
+}
+
+// 组件列表
+const List = listFormatHandle(props.menuOptions as unknown as ConfigType[])
+
+// 搜索处理
+const searchHandle = (key: string | null) => {
+  if (!isString(key) || !key.length) {
+    showPopover.value = false
+    searchRes.value = []
+    return
+  }
+  showPopover.value = true
+  searchRes.value = List.filter(
+    (e: ConfigType) => !key || e.title.toLowerCase().includes(key.toLowerCase())
+  )
+}
+
+// 关闭处理
+const closeHandle = (e: Event) => {
+  if (!showPopover.value) return
+  if (!e.target) return
+  if (!(e.target as any).closest('.go-chart-search')) {
+    showPopover.value = false
+  }
+}
+
+addEventListener(document, 'click', (e: Event) => {
+  closeHandle(e)
+})
+
+onUnmounted(() => {
+  removeEventListener(document, 'click', closeHandle)
+})
+</script>
+
+<style lang="scss" scoped>
+$width: 146px;
+@include go('chart-search') {
+  width: $width;
+  margin-right: -10px;
+  .chart-search-popover {
+    .search-list-box {
+      width: $width;
+      .list-item {
+        z-index: 2;
+        position: relative;
+        cursor: pointer;
+        padding: 2px 0 2px 10px;
+        margin-bottom: 5px;
+        &:hover {
+          &::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            opacity: 0.1;
+            left: 0;
+            top: 0;
+            border-radius: 5px;
+            background-color: v-bind('themeColor');
+          }
+        }
+      }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/chart/ContentCharts/components/ItemBox/index.ts b/src/views/chart/ContentCharts/components/ItemBox/index.ts
deleted file mode 100644
index 8ec7f82e..00000000
--- a/src/views/chart/ContentCharts/components/ItemBox/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ItemBox from './index.vue'
-
-export { ItemBox }
diff --git a/src/views/chart/ContentCharts/components/OptionContent/index.ts b/src/views/chart/ContentCharts/components/OptionContent/index.ts
deleted file mode 100644
index 5bfd99ec..00000000
--- a/src/views/chart/ContentCharts/components/OptionContent/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import OptionContent from './index.vue'
-
-export { OptionContent }
diff --git a/src/views/chart/ContentCharts/hooks/useAside.hook.ts b/src/views/chart/ContentCharts/hooks/useAside.hook.ts
index 0bc6a259..eb69d0c1 100644
--- a/src/views/chart/ContentCharts/hooks/useAside.hook.ts
+++ b/src/views/chart/ContentCharts/hooks/useAside.hook.ts
@@ -15,14 +15,17 @@ const {
   GraphicalDataFlowIcon,
 } = icon.carbon
 
+
 // 图表
-const { getPackagesList } = usePackagesStore()
-const menuOptions:{
+export type MenuOptionsType = {
   key: string
   icon: ReturnType<typeof renderIcon>
   label: ReturnType<typeof renderLang>
   list: PackagesType
-}[] = []
+}
+
+const { getPackagesList } = usePackagesStore()
+const menuOptions: MenuOptionsType[] = []
 
 const packagesListObj = {
   [PackagesCategoryEnum.CHARTS]: {
diff --git a/src/views/chart/ContentCharts/index.vue b/src/views/chart/ContentCharts/index.vue
index 75a6cda3..cc3b00d7 100644
--- a/src/views/chart/ContentCharts/index.vue
+++ b/src/views/chart/ContentCharts/index.vue
@@ -12,6 +12,10 @@
         <bar-chart-icon></bar-chart-icon>
       </n-icon>
     </template>
+
+    <template #top-right>
+      <charts-search v-show="getCharts" :menuOptions="menuOptions"></charts-search>
+    </template>
     <!-- 图表 -->
     <aside>
       <div class="menu-width-box">
@@ -22,20 +26,20 @@
           :icon-size="16"
           :indent="18"
           @update:value="clickItemHandle"
-       ></n-menu>
+        ></n-menu>
         <div class="menu-component-box">
           <go-skeleton
             :load="!selectOptions"
             round
             text
             :repeat="2"
-            style="width: 90%;"
-         ></go-skeleton>
-          <option-content
+            style="width: 90%"
+          ></go-skeleton>
+          <charts-option-content
             v-if="selectOptions"
             :selectOptions="selectOptions"
             :key="selectValue"
-         ></option-content>
+          ></charts-option-content>
         </div>
       </div>
     </aside>
@@ -44,7 +48,8 @@
 
 <script setup lang="ts">
 import { ContentBox } from '../contentBox/index'
-import { OptionContent } from './components/OptionContent'
+import { ChartsOptionContent } from './components/ChartsOptionContent'
+import { ChartsSearch } from './components/ChartsSearch'
 import {
   getCharts,
   BarChartIcon,
@@ -52,7 +57,7 @@ import {
   selectOptions,
   selectValue,
   clickItemHandle,
-  menuOptions
+  menuOptions,
 } from './hooks/useAside.hook'
 </script>