fix: 新增组件搜索功能

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 = {

src/styles/common/format.scss

@@ -2,6 +2,9 @@ body {
   overflow: hidden;
 }
 
+* {
+  list-style: none;
+}
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
   width: 8px;

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 {

src/views/chart/ContentCharts/components/ChartsItemBox/index.ts

@@ -0,0 +1,3 @@
+import ChartsItemBox from './index.vue'
+
+export { ChartsItemBox }

src/views/chart/ContentCharts/components/ChartsOptionContent/index.ts

@@ -0,0 +1,3 @@
+import ChartsOptionContent from './index.vue'
+
+export { ChartsOptionContent }

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({

src/views/chart/ContentCharts/components/ChartsSearch/index.ts

@@ -0,0 +1,3 @@
+import ChartsSearch from './index.vue'
+
+export { ChartsSearch }

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>

src/views/chart/ContentCharts/components/ItemBox/index.ts

@@ -1,3 +0,0 @@
-import ItemBox from './index.vue'
-
-export { ItemBox }

src/views/chart/ContentCharts/components/OptionContent/index.ts

@@ -1,3 +0,0 @@
-import OptionContent from './index.vue'
-
-export { OptionContent }

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]: {

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>