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>