优化菜单主题风格

src/assets/styles/sidebar.scss

@@ -74,6 +74,8 @@
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      height: 44px !important;
+      line-height: 44px !important;
     }
 
     .el-menu-item .el-menu-tooltip__trigger {
@@ -109,6 +111,96 @@
         background-color: vars.$base-sub-menu-hover !important;
       }
     }
+
+    // theme-dark 深色主题
+    &.theme-dark {
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
+      border-right: none;
+
+      .el-menu-item.is-active {
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
+          border-right: 3px solid var(--current-color, #409eff);
+          pointer-events: none;
+          z-index: 1;
+        }
+      }
+
+      .el-sub-menu.is-active > .el-sub-menu__title {
+        color: var(--current-color, #409eff) !important;
+      }
+
+      .el-menu-item:not(.is-active),
+      .submenu-title-noDropdown,
+      .el-sub-menu__title {
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: transparent;
+          pointer-events: none;
+          z-index: 1;
+          transition: background-color 0.2s;
+        }
+
+        &:hover::before {
+          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
+        }
+      }
+    }
+    
+    // theme-light 浅色主题
+    &.theme-light {
+      border-right: 1px solid #e8eaf0;
+      box-shadow: none;
+
+      .el-menu-item,
+      .el-sub-menu__title {
+        color: rgba(0, 0, 0, 0.65);
+      }
+
+      .el-menu-item.is-active {
+        color: var(--current-color, #409eff) !important;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: var(--current-color-light, #ecf5ff);
+          border-right: 3px solid var(--current-color, #409eff);
+          pointer-events: none;
+          z-index: 1;
+        }
+      }
+
+      .el-sub-menu.is-active > .el-sub-menu__title {
+        color: var(--current-color, #409eff) !important;
+      }
+
+      .el-menu-item:not(.is-active):hover,
+      .submenu-title-noDropdown:hover,
+      .el-sub-menu__title:hover {
+        background-color: #f5f7fa !important;
+        color: rgba(0, 0, 0, 0.85) !important;
+      }
+
+      .nest-menu .el-sub-menu > .el-sub-menu__title,
+      .el-sub-menu .el-menu-item {
+        background-color: #fafafa !important;
+
+        &:hover {
+          background-color: #f0f5ff !important;
+        }
+      }
+    }
   }
 
   .hideSidebar {

src/assets/styles/variables.module.scss

@@ -11,7 +11,7 @@ $panGreen: #30B08F;
 // 默认主题变量
 $menuText: #bfcbd9;
 $menuActiveText: #409eff;
-$menuBg: #304156;
+$menuBg: #1a1f2e;
 $menuHover: #263445;
 
 // 浅色主题theme-light
@@ -25,11 +25,11 @@ $base-sidebar-width: 200px;
 $sideBarWidth: 200px;
 
 // 菜单暗色变量
-$base-menu-color: #bfcbd9;
+$base-menu-color: rgba(255,255,255,.65);
-$base-menu-color-active: #f4f4f5;
+$base-menu-color-active: #ffffff;
-$base-menu-background: #304156;
+$base-menu-background: #1a1f2e;
-$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-background: #141824;
-$base-sub-menu-hover: #001528;
+$base-sub-menu-hover: rgba(255,255,255,.06);
 
 // 组件变量
 $--color-primary: #409EFF;

src/layout/components/Sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
+  <div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, sideTheme]" class="sidebar-container">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme, '--current-color-light': theme + '1a', '--current-color-dark-bg': theme + '33' }">
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar v-if="!sidebar.hide" class="sidebar-container" />
     <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">