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;
-      //   }
-      // }
     }
   }
 }