添加菜单图标显示

components.d.ts

@@ -9,6 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SvgIcon: typeof import('./src/components/SvgIcon/src/index.vue')['default']
+    SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
   }
 }

src/components/SvgIcon/index.ts

-import SvgIcon from './src/index.vue'
-
-export { SvgIcon }

src/icons/home.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1698287704571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4022" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><path d="M946.5 505L534.6 93.4c-12.5-12.5-32.7-12.5-45.2 0L77.5 505c-12 12-18.8 28.3-18.8 45.3 0 35.3 28.7 64 64 64h43.4V908c0 17.7 14.3 32 32 32H448V716h112v224h265.9c17.7 0 32-14.3 32-32V614.3h43.4c17 0 33.3-6.7 45.3-18.8 24.9-25 24.9-65.5-0.1-90.5z" p-id="4023"></path></svg>
\ No newline at end of file

src/icons/system.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1698289279223" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7455" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><path d="M410.67 544H133.33A69.33 69.33 0 0 0 64 613.33v277.34A69.33 69.33 0 0 0 133.33 960h277.34A69.33 69.33 0 0 0 480 890.67V613.33A69.33 69.33 0 0 0 410.67 544zM402 842a40 40 0 0 1-40 40H182a40 40 0 0 1-40-40V662a40 40 0 0 1 40-40h180a40 40 0 0 1 40 40zM890.67 544H613.33A69.33 69.33 0 0 0 544 613.33v277.34A69.33 69.33 0 0 0 613.33 960h277.34A69.33 69.33 0 0 0 960 890.67V613.33A69.33 69.33 0 0 0 890.67 544zM882 842a40 40 0 0 1-40 40H662a40 40 0 0 1-40-40V662a40 40 0 0 1 40-40h180a40 40 0 0 1 40 40zM410.67 64H133.33A69.33 69.33 0 0 0 64 133.33v277.34A69.33 69.33 0 0 0 133.33 480h277.34A69.33 69.33 0 0 0 480 410.67V133.33A69.33 69.33 0 0 0 410.67 64zM402 362a40 40 0 0 1-40 40H182a40 40 0 0 1-40-40V182a40 40 0 0 1 40-40h180a40 40 0 0 1 40 40zM694.49 456.18a81.35 81.35 0 0 0 115 0l126.69-126.67a81.35 81.35 0 0 0 0-115L809.51 87.82a81.35 81.35 0 0 0-115 0L567.82 214.49a81.35 81.35 0 0 0 0 115z" fill="currentColor" p-id="7456"></path></svg>
\ No newline at end of file

src/layouts/default/menu/components/BasicItemContent.vue

 <template>
-  <span>
-    <ContainerOutlined v-if="item.meta?.icon" />
-    {{ item.meta.title }}
-  </span>
+  <span>{{ item.meta.title }}</span>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { ContainerOutlined } from '@ant-design/icons-vue'
+import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
+
 export default defineComponent({
   name: 'BasicItemContent',
   components: { ContainerOutlined },
@@ -19,6 +18,4 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

src/layouts/default/menu/components/BasicSubMenuItem.vue

@@ -5,6 +5,9 @@
     :key="`submenu-${item.path}`"
     popupClassName="app-top-menu-popup"
   >
+    <template #icon>
+      <SvgIcon v-if="item.meta?.icon" :name="item.meta.icon" />
+    </template>
     <template #title>
       <MenuItemContent v-bind="$props" :item="item" />
     </template>
@@ -19,11 +22,12 @@
 import { computed, defineComponent } from 'vue'
 import BasicMenuItem from './BasicMenuItem.vue'
 import MenuItemContent from './BasicItemContent.vue'
+import SvgIcon from '@/components/SvgIcon/index.vue'
 import { Menu } from 'ant-design-vue'
 
 export default defineComponent({
   name: 'BasicSubMenuItem',
-  components: { BasicMenuItem, MenuItemContent, SubMenu: Menu.SubMenu },
+  components: { BasicMenuItem, MenuItemContent, SubMenu: Menu.SubMenu,SvgIcon },
   props: {
     item: {
       type: Object,

src/router/routes/index.ts

@@ -11,7 +11,8 @@ export const RootRoute: AppRouteRecordRaw = {
   component: LAYOUT,
   redirect: PageEnum.BASE_HOME,
   meta: {
-    title: '首页'
+    title: '首页',
+    icon: 'home'
   },
   children: [
     {

src/stores/modules/permission.ts

@@ -27,7 +27,8 @@ const filterAsyncRoute = (routes: UserRoute[]): AppRouteRecordRaw[] => {
         hideMenu: !!_route.hidden,
         isLink: _route.internalOrExternal,
         keepAlive: _route.keepAlive,
-        title: _route.permissionName
+        title: _route.permissionName,
+        icon: _route.permissionIcon || ''
       },
       children: _route.childNode !== null ? filterAsyncRoute(_route.childNode) : []
     }

tsconfig.app.json

 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts", "scr/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,