feat: 新增菜单管理

src/layout/LayoutMix.vue

@@ -23,14 +23,7 @@
         >
           <a-menu-item v-for="item in topMenus" :key="item.path">
             <template #icon>
-              <GiSvgIcon
-                v-if="getMenuIcon(item, 'svgIcon')"
-                :name="getMenuIcon(item, 'svgIcon')"
-                :size="24"
-              ></GiSvgIcon>
-              <template v-else>
-                <component v-if="getMenuIcon(item, 'svgIcon')" :is="getMenuIcon(item, 'icon')"></component>
-              </template>
+              <GiSvgIcon :name="getMenuIcon(item)" :size="24" />
             </template>
             <span>{{ item.meta?.title || item.children?.[0]?.meta?.title || '' }}</span>
           </a-menu-item>
@@ -72,8 +65,8 @@ const topMenus = ref<RouteRecordRaw[]>([])
 topMenus.value = JSON.parse(JSON.stringify(menuRoutes))
 console.log('topMenus', toRaw(topMenus.value))
 
-const getMenuIcon = (item: RouteRecordRaw, key: 'svgIcon' | 'icon') => {
-  return item.meta?.[key] || item.children?.[0].meta?.[key]
+const getMenuIcon = (item: RouteRecordRaw) => {
+  return item.meta?.icon || item.children?.[0].meta?.icon
 }
 
 const onMenuItemClick = (key: string) => {

src/layout/components/Menu/MenuIcon.vue

@@ -1,11 +1,9 @@
 <template>
-  <GiSvgIcon v-if="props.svgIcon" :name="props.svgIcon" :size="18"></GiSvgIcon>
-  <component v-else-if="props.icon" :is="props.icon" style="height: 18px; width: 18px"></component>
+  <GiSvgIcon :name="props.icon" :size="18" />
 </template>
 
 <script lang="ts" setup>
 interface Props {
-  svgIcon?: string
   icon?: string
 }
 

src/layout/components/Menu/MenuItem.vue

@@ -13,14 +13,14 @@
         <MenuIcon
           :svg-icon="onlyOneChild?.meta?.svgIcon || item?.meta?.svgIcon"
           :icon="onlyOneChild?.meta?.icon || item?.meta?.icon"
-        ></MenuIcon>
+        />
       </template>
       <span>{{ onlyOneChild?.meta?.title }}</span>
     </a-menu-item>
 
     <a-sub-menu v-else v-bind="attrs" :key="item.path" :title="item?.meta?.title">
       <template #icon>
-        <MenuIcon :svg-icon="item?.meta?.svgIcon" :icon="item?.meta?.icon"></MenuIcon>
+        <MenuIcon :icon="item?.meta?.icon" />
       </template>
       <MenuItem v-for="child in item.children" :key="child.path" :item="child"></MenuItem>
     </a-sub-menu>