feat: 单个菜单时替换父菜单处理

src/components/AppIcons/index.js

@@ -13,5 +13,6 @@ export { default as IconClose } from '~icons/mdi/close'
 export { default as IconExpand } from '~icons/mdi/arrow-expand-horizontal'
 export { default as IconExpandLeft } from '~icons/mdi/arrow-expand-left'
 export { default as IconExpandRight } from '~icons/mdi/arrow-expand-right'
+export { default as IconMenuTable } from '~icons/mdi/table'
 
 export { default as IconLogo } from './IconLogo.vue'

src/layout/components/sidebar/SideMenu.vue

@@ -15,7 +15,7 @@ import { useRouter } from 'vue-router'
 import { computed } from 'vue'
 import { usePermissionStore } from '@/store/modules/permission'
 
-import { IconCircle, IconMenu } from '@/components/AppIcons'
+import { IconCircle } from '@/components/AppIcons'
 
 import { isExternal } from '@/utils/is'
 import { useAppStore } from '@/store/modules/app'
@@ -27,7 +27,7 @@ const appStore = useAppStore()
 const { currentRoute } = router
 
 const menuOptions = computed(() => {
-  return generateOptions(permissionStore.routes, '')
+  return permissionStore.menus.map((item) => getMenuItem(item))
 })
 
 function resolvePath(basePath, path) {
@@ -41,40 +41,37 @@ function resolvePath(basePath, path) {
   )
 }
 
-function isSingleRoute(route) {
+function getMenuItem(route, basePath = '') {
-  let isSingle = true
+  let menuItem = {
-  let curRoute = route
+    label: (route.meta && route.meta.title) || route.name,
-  while (curRoute.children && curRoute.children.length) {
+    key: route.name,
-    if (curRoute.children.length > 1) {
+    path: resolvePath(basePath, route.path),
-      isSingle = false
+    icon: route.meta?.icon ? renderIcon(route.meta?.icon, { size: 16 }) : renderIcon(IconCircle, { size: 8 }),
-      break
-    }
-    if (curRoute.children.length === 1) {
-      curRoute = curRoute.children[0]
-    }
   }
-  return isSingle
-}
 
-function generateOptions(routes, basePath) {
+  if (!route.children || !route.children.length) {
-  let options = []
+    return menuItem
-  routes.forEach((route) => {
+  }
-    if (route.name && !route.isHidden) {
+
-      let curOption = {
+  if (route.children && route.children.length === 1) {
-        label: (route.meta && route.meta.title) || route.name,
+    // 单个子路由处理
-        key: route.name,
+    const singleRoute = route.children[0]
-        path: resolvePath(basePath, route.path),
+    menuItem = {
-      }
+      label: singleRoute.meta?.title || singleRoute.name,
-      if (route.children && route.children.length) {
+      key: singleRoute.name,
-        curOption.icon = renderIcon(route.meta?.icon || IconMenu, { size: 16 })
+      path: resolvePath(menuItem.path, singleRoute.path),
-        curOption.children = generateOptions(route.children, resolvePath(basePath, route.path))
+      icon: singleRoute.meta?.icon
-      } else {
+        ? renderIcon(singleRoute.meta?.icon, { size: 16 })
-        curOption.icon = (route.meta?.icon && renderIcon(route.meta?.icon)) || renderIcon(IconCircle, { size: 8 })
+        : renderIcon(IconCircle, { size: 8 }),
-      }
-      options.push(curOption)
     }
-  })
+    if (singleRoute.children && singleRoute.children.length) {
-  return options
+      menuItem.children = singleRoute.children.map((item) => getMenuItem(item, menuItem.path))
+    }
+  } else {
+    menuItem.children = route.children.map((item) => getMenuItem(item, menuItem.path))
+  }
+
+  return menuItem
 }
 
 function handleMenuSelect(key, item) {

src/router/routes/index.js

@@ -1,7 +1,16 @@
 import Layout from '@/layout/index.vue'
 import Home from '@/views/dashboard/index.vue'
 
-import { IconAlert, IconChart, IconGitee, IconGithub, IconHome, IconLink, IconVue } from '@/components/AppIcons'
+import {
+  IconAlert,
+  IconChart,
+  IconGitee,
+  IconGithub,
+  IconHome,
+  IconLink,
+  IconMenu,
+  IconVue,
+} from '@/components/AppIcons'
 
 export const basicRoutes = [
   {
@@ -55,6 +64,28 @@ export const basicRoutes = [
     ],
   },
 
+  {
+    name: 'ErrorPage',
+    path: '/error-page',
+    component: Layout,
+    redirect: '/error-page/404',
+    meta: {
+      title: '错误页',
+      icon: IconAlert,
+    },
+    children: [
+      {
+        name: 'ERROR-404',
+        path: '404',
+        component: () => import('@/views/error-page/404.vue'),
+        meta: {
+          title: '404',
+          icon: IconAlert,
+        },
+      },
+    ],
+  },
+
   {
     name: 'Test',
     path: '/test',
@@ -62,6 +93,7 @@ export const basicRoutes = [
     redirect: '/test/unocss',
     meta: {
       title: '基础功能测试',
+      icon: IconMenu,
     },
     children: [
       {
@@ -100,27 +132,6 @@ export const basicRoutes = [
     ],
   },
 
-  {
-    name: 'ErrorPage',
-    path: '/error-page',
-    component: Layout,
-    redirect: '/error-page/404',
-    meta: {
-      title: '错误页',
-      icon: IconAlert,
-    },
-    children: [
-      {
-        name: 'ERROR-404',
-        path: '404',
-        component: () => import('@/views/error-page/404.vue'),
-        meta: {
-          title: '404',
-        },
-      },
-    ],
-  },
-
   {
     name: 'ExternalLink',
     path: '/external-link',

src/router/routes/modules/example.js

@@ -1,4 +1,6 @@
+import { IconMenuTable } from '@/components/AppIcons'
 import Layout from '@/layout/index.vue'
+import { markRaw } from 'vue'
 
 export default [
   {
@@ -19,6 +21,7 @@ export default [
         meta: {
           title: '表格',
           role: ['admin'],
+          icon: markRaw(IconMenuTable),
         },
         children: [
           {

src/store/modules/permission.js

@@ -38,6 +38,9 @@ export const usePermissionStore = defineStore('permission', {
     routes() {
       return basicRoutes.concat(this.accessRoutes)
     },
+    menus() {
+      return this.routes.filter((route) => route.name && !route.isHidden)
+    },
   },
   actions: {
     generateRoutes(role = []) {