feat：菜单栏添加icon支持

src/layout/components/sidebar/SideMenu.vue

@@ -1,13 +1,15 @@
 <script setup>
 import { useRouter } from 'vue-router'
-import { computed } from 'vue'
+import { computed, h } from 'vue'
 import { usePermissionStore } from '@/store/modules/permission'
 
+import { NIcon } from 'naive-ui'
+import { ListAlt, CircleRegular } from '@vicons/fa'
+
 import { isExternal } from '@/utils/is'
 
 const router = useRouter()
 const permissionStore = usePermissionStore()
-
 const { currentRoute } = router
 
 const menuOptions = computed(() => {
@@ -25,6 +27,25 @@ function resolvePath(basePath, path) {
   )
 }
 
+function renderIcon(icon, props = { size: 8 }) {
+  return () => h(NIcon, { ...props }, { default: () => h(icon) })
+}
+
+function isSingleRoute(route) {
+  let isSingle = true
+  let curRoute = route
+  while (curRoute.children && curRoute.children.length) {
+    if (curRoute.children.length > 1) {
+      isSingle = false
+      break
+    }
+    if (curRoute.children.length === 1) {
+      curRoute = curRoute.children[0]
+    }
+  }
+  return isSingle
+}
+
 function generateOptions(routes, basePath) {
   let options = []
   routes.forEach((route) => {
@@ -35,13 +56,10 @@ function generateOptions(routes, basePath) {
         path: resolvePath(basePath, route.path),
       }
       if (route.children && route.children.length) {
+        curOption.icon = renderIcon(route.meta?.icon || ListAlt, { size: 16 })
         curOption.children = generateOptions(route.children, resolvePath(basePath, route.path))
-      }
-      if (curOption.children && curOption.children.length <= 1) {
-        if (curOption.children.length === 1) {
-          curOption = { ...curOption.children[0] }
-        }
-        delete curOption.children
+      } else {
+        curOption.icon = renderIcon(route.meta?.icon || CircleRegular)
       }
       options.push(curOption)
     }
@@ -67,7 +85,9 @@ function handleMenuSelect(key, item) {
 <template>
   <n-menu
     class="side-menu"
-    :root-indent="20"
+    accordion
+    :indent="12"
+    :root-indent="12"
     :options="menuOptions"
     :value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
     @update:value="handleMenuSelect"
@@ -111,55 +131,7 @@ function handleMenuSelect(key, item) {
       font-weight: normal;
       position: relative;
       overflow: visible !important;
-      &::before {
-        content: '';
-        position: absolute;
-        left: -15px;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        width: 5px;
-        height: 5px;
-        border-radius: 50%;
-        border: 1px solid #333;
-      }
     }
   }
 }
-// .side-menu {
-//   // padding-left: 15px;
-//   .n-menu-item-content-header {
-//     color: #fff !important;
-//     font-weight: bold;
-//     font-size: 14px;
-//   }
-
-//   .n-submenu {
-//     .n-menu-item-content-header {
-//       color: #fff !important;
-//       font-weight: bold;
-//       font-size: 14px;
-//     }
-//   }
-//   .n-submenu-children {
-//     .n-menu-item-content-header {
-//       color: #fff !important;
-//       font-weight: normal;
-//       font-size: 12px;
-//     }
-//   }
-//   .n-menu-item {
-//     border-top-left-radius: 5px;
-//     border-bottom-left-radius: 5px;
-//     &:hover,
-//     &.n-menu-item--selected::before {
-//       background-color: #16243a;
-//       right: 0;
-//       left: 0;
-// border-right: 3px solid $primaryColor;
-// background-color: unset !important;
-// background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba($primaryColor, 0.3) 100%);
-//     }
-//   }
-// }
 </style>

src/router/routes/index.js

@@ -1,5 +1,6 @@
 import Layout from '@/layout/index.vue'
 import Dashboard from '@/views/dashboard/index.vue'
+import { Dove, Github, HouseDamage, Link } from '@vicons/fa'
 
 export const basicRoutes = [
   {
@@ -38,6 +39,7 @@ export const basicRoutes = [
     redirect: '/dashboard',
     meta: {
       title: '首页',
+      icon: HouseDamage,
     },
     children: [
       {
@@ -51,33 +53,13 @@ export const basicRoutes = [
     ],
   },
 
-  {
-    name: 'ERROR-PAGE',
-    path: '/error-page',
-    component: Layout,
-    redirect: '/error-page/404',
-    meta: {
-      title: '错误页',
-    },
-    children: [
-      {
-        name: 'ERROR-404',
-        path: '404',
-        component: () => import('@/views/error-page/404.vue'),
-        meta: {
-          title: '404',
-        },
-      },
-    ],
-  },
-
   {
     name: 'TEST',
     path: '/test',
     component: Layout,
     redirect: '/test/unocss',
     meta: {
-      title: '测试',
+      title: '基础功能测试',
     },
     children: [
       {
@@ -116,12 +98,33 @@ export const basicRoutes = [
     ],
   },
 
+  {
+    name: 'ERROR-PAGE',
+    path: '/error-page',
+    component: Layout,
+    redirect: '/error-page/404',
+    meta: {
+      title: '错误页',
+    },
+    children: [
+      {
+        name: 'ERROR-404',
+        path: '404',
+        component: () => import('@/views/error-page/404.vue'),
+        meta: {
+          title: '404',
+        },
+      },
+    ],
+  },
+
   {
     name: 'EXTERNAL-LINK',
     path: '/external-link',
     component: Layout,
     meta: {
       title: '外部链接',
+      icon: Link,
     },
     children: [
       {
@@ -129,6 +132,7 @@ export const basicRoutes = [
         path: 'https://github.com/zclzone/vue-naive-admin',
         meta: {
           title: '源码 - github',
+          icon: Github,
         },
       },
       {
@@ -143,6 +147,7 @@ export const basicRoutes = [
         path: 'https://www.yuque.com/qszone/vue-naive-admin',
         meta: {
           title: '文档 - 语雀',
+          icon: Dove,
         },
       },
     ],