fix: 1

src/views/graphic/imageLabel.vue

@@ -6,99 +6,107 @@
     </div>
     <ui-input type="text" width="100%" v-model="keyword">
       <template v-slot:preIcon>
-        <ui-icon type="magnify_g"  color="rgba(255,255,255,0.6)"/>
+        <ui-icon type="magnify_g" color="rgba(255,255,255,0.6)" />
       </template>
     </ui-input>
 
-    <div v-for="typeMenu in typeMenus" :key="typeMenu.title" class="type-menu">
-      <h2 @click="showTypeMenu = showTypeMenu?.title === typeMenu.title ? null : typeMenu">
-        {{typeMenu.title}}
-        <ui-icon :type="showTypeMenu?.title === typeMenu.title ? 'fold' : 'unfold'" />
-      </h2>
-      <div class="menu-list" v-show="showTypeMenu?.title === typeMenu.title">
-        <div
+    <template v-if="typeMenus.length">
+      <div v-for="typeMenu in typeMenus" :key="typeMenu.title" class="type-menu">
+        <h2
+          @click="showTypeMenu = showTypeMenu?.title === typeMenu.title ? null : typeMenu"
+        >
+          {{ typeMenu.title }}
+          <ui-icon :type="showTypeMenu?.title === typeMenu.title ? 'fold' : 'unfold'" />
+        </h2>
+        <div class="menu-list" v-show="showTypeMenu?.title === typeMenu.title">
+          <div
             v-for="menu in typeMenu.children"
             :key="menu.key"
             class="menu"
-            :class="{active: uiType.current === menu.key}"
+            :class="{ active: uiType.current === menu.key }"
             @click="clickHandler(menu.key)"
-        >
-          <ui-icon :type="menu.icon" class="icon" />
-          <p>{{ menu.text }}</p>
+          >
+            <ui-icon :type="menu.icon" class="icon" />
+            <p>{{ menu.text }}</p>
+          </div>
         </div>
       </div>
+    </template>
+    <div v-else class="empty-images">
+      <div>
+        <img src="@/assets/images/empty-label.png" />
+        <p>无结果</p>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
-import { uiType } from '@/hook/useGraphic'
-import icons, {typeKeys} from "@/graphic/CanvasStyle/ImageLabels/SVGIcons"
-import {computed, ref, watch} from "vue";
+import { uiType } from "@/hook/useGraphic";
+import icons, { typeKeys } from "@/graphic/CanvasStyle/ImageLabels/SVGIcons";
+import { computed, ref, watch } from "vue";
 import UiInput from "@/components/base/components/input/index.vue";
-import {uses} from '@/store/SVGLabel'
+import { uses } from "@/store/SVGLabel";
 
-
-const typeMenusRaw = typeKeys.map(({type, children}) => ({
+const typeMenusRaw = typeKeys.map(({ type, children }) => ({
   title: type,
-  children: children.map(key => ({
+  children: children.map((key) => ({
     key: key,
     text: icons[key].text,
-    icon: key.substring(0,key.lastIndexOf("."))
-  }))
-}))
-const keyword = ref("")
+    icon: key.substring(0, key.lastIndexOf(".")),
+  })),
+}));
+const keyword = ref("");
 const typeMenus = computed(() => {
   const raws = typeMenusRaw.map((typeMenu) => ({
     ...typeMenu,
     children: typeMenu.children
-      .filter(item => item.text.includes(keyword.value))
-      .sort((a, b) => a.icon.localeCompare(b.icon))
+      .filter((item) => item.text.includes(keyword.value))
+      .sort((a, b) => a.icon.localeCompare(b.icon)),
   }));
 
-  const items = keyword.value ? raws : [
-    {
-      title: "常用",
-      children: uses.value
-        .sort((item1, item2) => (item2.count || 0) - (item1.count || 0)).slice(0, 10)
-        .map(item => {
-          for (let menu of typeMenusRaw) {
-            const findItem = menu.children.find(menuItem => menuItem.key === item.key);
-            if (findItem) {
-              return findItem
-            }
-          }
-        })
-        .filter(item => !!item)
-    },
-    ...raws
-  ]
-
-
-  return items.filter(item => item.children.length)
-})
-const showTypeMenu = ref()
-watch(
-  typeMenus,
-  () => showTypeMenu.value = typeMenus.value[0],
-  { immediate: true }
-)
+  const items = keyword.value
+    ? raws
+    : [
+        {
+          title: "常用",
+          children: uses.value
+            .sort((item1, item2) => (item2.count || 0) - (item1.count || 0))
+            .slice(0, 10)
+            .map((item) => {
+              for (let menu of typeMenusRaw) {
+                const findItem = menu.children.find(
+                  (menuItem) => menuItem.key === item.key
+                );
+                if (findItem) {
+                  return findItem;
+                }
+              }
+            })
+            .filter((item) => !!item),
+        },
+        ...raws,
+      ];
+
+  return items.filter((item) => item.children.length);
+});
+const showTypeMenu = ref();
+watch(typeMenus, () => (showTypeMenu.value = typeMenus.value[0]), { immediate: true });
 
 const clickHandler = (key) => {
-  const findUse = uses.value.find(use => use.key === key);
-  const lastUpdateTime = new Date().getTime()
+  const findUse = uses.value.find((use) => use.key === key);
+  const lastUpdateTime = new Date().getTime();
   if (findUse) {
-    findUse.count++
-    findUse.lastUpdateTime = lastUpdateTime
+    findUse.count++;
+    findUse.lastUpdateTime = lastUpdateTime;
   } else {
-    uses.value.push({ key, count: 1, lastUpdateTime })
+    uses.value.push({ key, count: 1, lastUpdateTime });
   }
-  uiType.change(key as any)
-}
+  uiType.change(key as any);
+};
 
 defineEmits<{ (e: "quit") }>();
-
 </script>
 
 <style lang="scss" scoped>
@@ -125,7 +133,7 @@ defineEmits<{ (e: "quit") }>();
   flex-direction: column;
   cursor: pointer;
   height: 100px;
-  transition: color .3s ease;
+  transition: color 0.3s ease;
 
   //&:hover,
   &.active {
@@ -173,7 +181,7 @@ defineEmits<{ (e: "quit") }>();
     margin: 16px 0;
     font-size: 16px;
     font-weight: bold;
-    color: rgba(255,255,255,0.6);
+    color: rgba(255, 255, 255, 0.6);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -182,6 +190,22 @@ defineEmits<{ (e: "quit") }>();
       font-size: 16px;
     }
   }
-  border-bottom: 1px solid rgba(255,255,255,0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.empty-images {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: calc(100% - 80px);
+  div img {
+    display: block;
+    width: 128px;
+  }
+  div p {
+    margin-top: 10px;
+    color: rgba(255, 255, 255, 1);
+  }
 }
 </style>