feat(projects): 引入soybean-admin-tab、去除vite-plugin-svg-icons，用unplugin-icons实现自定义svg的iconify写法、代码优化

src/layouts/common/GlobalHeader/components/UserAvatar.vue

@@ -1,7 +1,7 @@
 <template>
   <n-dropdown :options="options" @select="handleDropdown">
     <hover-container class="px-12px">
-      <img :src="avatar" class="w-32px h-32px" />
+      <icon-custom-avatar class="text-32px" />
       <span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
     </hover-container>
   </n-dropdown>
@@ -11,7 +11,6 @@
 import { HoverContainer } from '@/components';
 import { useAuthStore } from '@/store';
 import { iconifyRender } from '@/utils';
-import avatar from '@/assets/svg/common/avatar01.svg';
 
 type DropdownKey = 'user-center' | 'logout';
 

src/layouts/common/GlobalLogo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <router-link :to="routeHomePath" class="flex-center w-full nowrap-hidden">
-    <system-logo class="w-32px h-32px text-primary" />
+    <system-logo class="text-32px text-primary" />
     <h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
       {{ title }}
     </h2>

src/layouts/common/GlobalSearch/components/SearchFooter.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="px-24px h-44px flex-y-center">
     <span class="mr-14px">
-      <icon-ant-design:enter-outlined class="icon text-20px p-2px mr-3px" />
+      <icon-ant-design-enter-outlined class="icon text-20px p-2px mr-3px" />
       确认
     </span>
     <span class="mr-14px">
-      <icon-mdi:arrow-up-thin class="icon text-20px p-2px mr-5px" />
-      <icon-mdi:arrow-down-thin class="icon text-20px p-2px mr-3px" />
+      <icon-mdi-arrow-up-thin class="icon text-20px p-2px mr-5px" />
+      <icon-mdi-arrow-down-thin class="icon text-20px p-2px mr-3px" />
       切换
     </span>
     <span>
-      <icon-mdi:close class="icon text-20px p-2px mr-3px" />
+      <icon-mdi-close class="icon text-20px p-2px mr-3px" />
       关闭
     </span>
   </div>

src/layouts/common/GlobalSearch/components/SearchModal.vue

@@ -10,7 +10,7 @@
   >
     <n-input ref="inputRef" v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
       <template #prefix>
-        <icon-uil:search class="text-15px text-[#c2c2c2]" />
+        <icon-uil-search class="text-15px text-[#c2c2c2]" />
       </template>
     </n-input>
     <div class="mt-20px">
@@ -28,7 +28,7 @@ import { ref, shallowRef, computed, watch, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { useDebounceFn, onKeyStroke } from '@vueuse/core';
 import { useRouteStore } from '@/store';
-import type { RouteList } from './types';
+import type { SearchMenu } from '@/interface';
 import SearchResult from './SearchResult.vue';
 import SearchFooter from './SearchFooter.vue';
 
@@ -41,15 +41,18 @@ interface Emits {
   (e: 'update:value', val: boolean): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {});
+const props = defineProps<Props>();
+
 const emit = defineEmits<Emits>();
 
 const router = useRouter();
 const routeStore = useRouteStore();
+
 const keyword = ref('');
 const activePath = ref('');
-const resultOptions = shallowRef<RouteList[]>([]);
-const inputRef = ref<HTMLInputElement | null>(null);
+const resultOptions = shallowRef<SearchMenu[]>([]);
+const inputRef = ref<HTMLInputElement>();
+
 const handleSearch = useDebounceFn(search, 300);
 
 const show = computed({
@@ -71,7 +74,7 @@ watch(show, async val => {
 
 /** 查询 */
 function search() {
-  resultOptions.value = routeStore.menusList.filter(
+  resultOptions.value = routeStore.searchMenus.filter(
     menu => keyword.value && menu.meta?.title.toLocaleLowerCase().includes(keyword.value.toLocaleLowerCase().trim())
   );
   if (resultOptions.value?.length > 0) {

src/layouts/common/GlobalSearch/components/SearchResult.vue

@@ -13,7 +13,7 @@
         >
           <Icon :icon="item.meta?.icon ?? 'mdi:bookmark-minus-outline'" />
           <span class="flex-1 ml-5px">{{ item.meta?.title }}</span>
-          <icon-ant-design:enter-outlined class="icon text-20px p-2px mr-3px" />
+          <icon-ant-design-enter-outlined class="icon text-20px p-2px mr-3px" />
         </div>
       </template>
     </div>
@@ -24,11 +24,11 @@
 import { computed } from 'vue';
 import { Icon } from '@iconify/vue';
 import { useThemeStore } from '@/store';
-import type { RouteList } from './types';
+import type { SearchMenu } from '@/interface';
 
 interface Props {
   value: string;
-  options: RouteList[];
+  options: SearchMenu[];
 }
 
 interface Emits {
@@ -36,9 +36,12 @@ interface Emits {
   (e: 'enter'): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {});
+const props = defineProps<Props>();
+
 const emit = defineEmits<Emits>();
 
+const theme = useThemeStore();
+
 const active = computed({
   get() {
     return props.value;
@@ -47,10 +50,9 @@ const active = computed({
     emit('update:value', val);
   }
 });
-const theme = useThemeStore();
 
 /** 鼠标移入 */
-async function handleMouse(item: RouteList) {
+async function handleMouse(item: SearchMenu) {
   active.value = item.path;
 }
 

src/layouts/common/GlobalSearch/components/types.ts

@@ -1 +0,0 @@
-export type RouteList = AuthRoute.Route;

src/layouts/common/GlobalSearch/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <hover-container tooltip-content="搜索" class="w-40px h-full" @click="handleSearch">
-      <icon-uil:search class="text-20px text-[#666]" />
+      <icon-uil-search class="text-20px text-[#666]" />
     </hover-container>
     <search-modal v-model:value="show" />
   </div>
@@ -13,6 +13,7 @@ import { useBoolean } from '@/hooks';
 import { SearchModal } from './components';
 
 const { bool: show, toggle } = useBoolean();
+
 function handleSearch() {
   toggle();
 }

src/layouts/common/GlobalTab/components/TabDetail/index.vue

@@ -27,7 +27,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, nextTick, watch } from 'vue';
 import { useEventListener } from '@vueuse/core';
-import { ChromeTab, ButtonTab } from '@/components';
+import { ChromeTab, ButtonTab } from 'soybean-admin-tab';
 import { useThemeStore, useTabStore } from '@/store';
 import { setTabRoutes } from '@/utils';
 import { ContextMenu } from './components';

src/layouts/common/SettingDrawer/components/DrawerButton/index.vue

@@ -5,8 +5,8 @@
     class="fixed top-240px right-14px z-10000 w-42px h-42px !p-0 transition-all duration-300"
     @click="app.toggleSettingdrawerVisible"
   >
-    <icon-ant-design:close-outlined v-if="app.settingDrawerVisible" class="text-24px" />
-    <icon-ant-design:setting-outlined v-else class="text-24px" />
+    <icon-ant-design-close-outlined v-if="app.settingDrawerVisible" class="text-24px" />
+    <icon-ant-design-setting-outlined v-else class="text-24px" />
   </n-button>
 </template>