style: 修改菜单选中样式

src/layouts/components/SideMenu.vue

@@ -59,14 +59,19 @@ function handleMenuSelect(key, item) {
 </script>
 
 <style lang="scss">
-.side-menu:not(.n-menu--collapsed) {
-  .n-menu-item-content {
-    &::before {
-      left: 8px;
-      right: 8px;
-    }
-    &.n-menu-item-content--selected::before {
-      border-left: 4px solid var(--primary-color);
+.side-menu {
+  .n-menu-item-content__icon {
+    border: 1px solid rgb(229, 231, 235);
+    border-radius: 4px;
+  }
+  .n-menu-item-content--child-active,
+  .n-menu-item-content--selected {
+    .n-menu-item-content__icon {
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
+      i {
+        color: #fff;
+      }
     }
   }
 }

src/settings.js

@@ -63,7 +63,6 @@ export const basePermissions = [
         type: 'MENU',
         path: 'https://apifox.com/apidoc/shared-ff4a4d32-c0d1-4caf-b0ee-6abc130f734a',
         icon: 'i-me:apifox',
-        iconMode: 'bg',
         order: 2,
         enable: true,
         show: true,
@@ -74,7 +73,6 @@ export const basePermissions = [
         type: 'MENU',
         path: 'https://www.naiveui.com/zh-CN/os-theme',
         icon: 'i-me:naiveui',
-        iconMode: 'bg',
         order: 3,
         enable: true,
         show: true,

src/store/modules/permission.js

@@ -34,7 +34,7 @@ export const usePermissionStore = defineStore('permission', {
         key: route.name,
         path: route.path,
         originPath: route.meta.originPath,
-        icon: () => h('i', { class: `${route.meta.icon} text-16` }),
+        icon: () => h('i', { class: `${route.meta.icon} text-14` }),
         order: item.order ?? 0,
       }
       const children = item.children?.filter((item) => item.type === 'MENU') || []
@@ -61,7 +61,7 @@ export const usePermissionStore = defineStore('permission', {
         component: item.component,
         meta: {
           originPath,
-          icon: item.icon + ({ bg: '', mask: '?mask' }[item.iconMode] ?? '?mask'),
+          icon: item.icon + '?mask',
           title: item.name,
           layout: item.layout,
           keepAlive: !!item.keepAlive,