feat: 管理中心菜单栏调整

src/layouts/components/siderBar/index.vue

@@ -70,10 +70,18 @@ export default defineComponent({
       }
       router.push({ name: targetRoute });
     };
-    const renderMenuItem = (item: typeMenuItem, hideLabel = false) => {
+    const renderMenuItem = ({
+      item,
+      hideLabel = false,
+      menuItemClass = '',
+    }: {
+      item: typeMenuItem;
+      hideLabel?: boolean;
+      menuItemClass?: string;
+    }) => {
       const getMenuItemClass = () => {
         const hasChildren = item.children?.length;
-        let target = !hasChildren ? 'sub-menu-item ' : '';
+        let target = '';
         if (hasChildren) {
           target += getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
         } else {
@@ -83,9 +91,9 @@ export default defineComponent({
       };
 
       return (
-        <Menu.Item class={`menu-item ${getMenuItemClass()}`} onClick={() => onClickItem(item)}>
+        <Menu.Item class={`menu-item ${getMenuItemClass()} ${menuItemClass}`} onClick={() => onClickItem(item)}>
           {(() => {
-            const isActive = getMenuItemClass() === 'active';
+            const isActive = getMenuItemClass().includes('active');
             const iconName = Array.isArray(item.icon)
               ? isActive
                 ? item.icon[1] ?? item.icon[0]
@@ -100,7 +108,7 @@ export default defineComponent({
     const renderMenuList = () => {
       return currentMenuList.value.map((item) => {
         if (!item.children) {
-          return renderMenuItem(item, collapsed.value);
+          return renderMenuItem({ item, hideLabel: collapsed.value });
         }
         return (
           <Dropdown
@@ -112,14 +120,14 @@ export default defineComponent({
                 return (
                   <div class="p-8px bg-#fff container w-139px">
                     {item.children.map((child) => {
-                      return renderMenuItem(child);
+                      return renderMenuItem({ item: child, menuItemClass: 'sub-menu-item' });
                     })}
                   </div>
                 );
               },
             }}
           >
-            {renderMenuItem(item, collapsed.value)}
+            {renderMenuItem({ item, hideLabel: collapsed.value })}
           </Dropdown>
         );
       });
@@ -224,14 +232,6 @@ export default defineComponent({
           color: #6d4cfe !important;
         }
       }
-      // &.active {
-      //   background-color: rgba(109, 76, 254, 0.08);
-      //   color: #6d4cfe;
-      //   .label,
-      //   .svg-icon {
-      //     color: #6d4cfe;
-      //   }
-      // }
     }
   }
 }

src/layouts/components/siderBar/menu-list.ts

@@ -139,39 +139,34 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
       ],
     },
   ],
-  [GROUP_MANAGEMENT_NAME]:[ 
+  [GROUP_MANAGEMENT_NAME]:[
     {
-      key: 'ModManagement',
-      label: '管理中心',
-      icon: ['svg-management', 'svg-management-active'],
-      children: [
-        {
-          key: 'ModManagementPerson',
-          icon: 'svg-managementPerson',
-          label: '个人信息',
-          routeName: 'ManagementPerson',
-          requireLogin: true,
-          activeMatch: [
-            'ManagementPerson',
-          ],
-        },
-        {
-          key: 'ModManagementEnterprise',
-          icon: 'svg-managementEnterprise',
-          label: '企业信息',
-          routeName: 'ManagementEnterprise',
-          requireLogin: true,
-          activeMatch: ['ManagementEnterprise'],
-        },
-        {
-          key: 'ModManagementAccount',
-          icon: 'svg-managementAccount',
-          label: '账号管理',
-          routeName: 'ManagementAccount',
-          requireLogin: true,
-          activeMatch: ['ManagementAccount'],
-        },
+      key: 'ModManagementPerson',
+      icon: ['svg-managementPerson', 'svg-managementPerson-active'],
+      label: '个人信息',
+      routeName: 'ManagementPerson',
+      requireLogin: true,
+      activeMatch: [
+        'ManagementPerson',
       ],
-    }
+    },
+    {
+      key: 'ModManagementEnterprise',
+      icon: ['svg-managementEnterprise', 'svg-managementEnterprise-active'],
+      label: '企业信息',
+      routeName: 'ManagementEnterprise',
+      requireLogin: true,
+      activeMatch: [
+        'ManagementEnterprise',
+      ],
+    },
+    {
+      key: 'ModManagementAccount',
+      icon: ['svg-managementAccount', 'svg-managementAccount-active'],
+      label: '账号管理',
+      routeName: 'ManagementAccount',
+      requireLogin: true,
+      activeMatch: ['ManagementAccount'],
+    },
   ]
 };