优化

2026-02-04 09:34:50 +08:00 · 2026-02-04 09:34:50 +08:00 · ac5e691134
parent 5eaa9770ce
commit ac5e691134
4 changed files with 219 additions and 97 deletions
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@ -89,25 +89,105 @@
      }
    }

-    & .theme-dark .is-active > .el-sub-menu__title {
-      color: vars.$base-menu-color-active !important;
-      background-color: rgba(255, 255, 255, 0.15) !important;
+    // 暗色主题样式
+    & .theme-dark {
+      .is-active > .el-sub-menu__title {
+        color: vars.$base-menu-color-active !important;
+        background-color: rgba(255, 255, 255, 0.25) !important;
+        font-weight: 600;
+        box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1);
+      }
+
+      .el-menu-item.is-active {
+        background-color: rgba(255, 255, 255, 0.25) !important;
+        color: vars.$base-menu-color-active !important;
+        font-weight: 600;
+        position: relative;
+        box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1);
+        
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 70%;
+          background-color: #ffffff;
+          border-radius: 0 3px 3px 0;
+          box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+        }
+      }
    }

-    & .theme-dark .el-menu-item.is-active {
-      background-color: rgba(255, 255, 255, 0.15) !important;
-      color: vars.$base-menu-color-active !important;
-      position: relative;
-      
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 3px;
-        background-color: #ffffff;
-        border-radius: 0 2px 2px 0;
+    // 亮色主题样式
+    & .theme-light {
+      .el-menu-item {
+        &:hover {
+          background-color: vars.$menuLightHover !important;
+        }
+
+        &.is-active {
+          background-color: vars.$menuLightActiveBg !important;
+          color: vars.$menuLightActiveText !important;
+          font-weight: 700;
+          position: relative;
+          box-shadow: inset 0 0 10px rgba(22, 119, 255, 0.08);
+          
+          &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 4px;
+            height: 70%;
+            background: linear-gradient(180deg, vars.$menuLightActiveText 0%, #4096ff 100%);
+            border-radius: 0 3px 3px 0;
+            box-shadow: 0 0 6px rgba(22, 119, 255, 0.4);
+          }
+        }
+      }
+
+      .el-sub-menu__title {
+        &:hover {
+          background-color: vars.$menuLightHover !important;
+        }
+      }
+
+      .is-active > .el-sub-menu__title {
+        color: vars.$menuLightActiveText !important;
+        background-color: vars.$menuLightActiveBg !important;
+        font-weight: 700;
+        box-shadow: inset 0 0 10px rgba(22, 119, 255, 0.08);
+      }
+
+      // 嵌套菜单项样式
+      .nest-menu .el-sub-menu > .el-sub-menu__title,
+      .el-sub-menu .el-menu-item {
+        &:hover {
+          background-color: vars.$menuLightHover !important;
+        }
+      }
+
+      .nest-menu .el-sub-menu .el-menu-item.is-active {
+        background-color: vars.$menuLightActiveBg !important;
+        color: vars.$menuLightActiveText !important;
+        font-weight: 700;
+        box-shadow: inset 0 0 10px rgba(22, 119, 255, 0.08);
+        
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 70%;
+          background: linear-gradient(180deg, vars.$menuLightActiveText 0%, #4096ff 100%);
+          border-radius: 0 3px 3px 0;
+          box-shadow: 0 0 6px rgba(22, 119, 255, 0.4);
+        }
      }
    }

@ -129,6 +209,26 @@
        background-color: vars.$base-sub-menu-hover !important;
      }
    }
+
+    & .theme-dark .nest-menu .el-sub-menu .el-menu-item.is-active {
+      background-color: rgba(255, 255, 255, 0.25) !important;
+      color: vars.$base-menu-color-active !important;
+      font-weight: 600;
+      box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1);
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 70%;
+        background-color: #ffffff;
+        border-radius: 0 3px 3px 0;
+        box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+      }
+    }
  }

  .hideSidebar {
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@ -16,7 +16,8 @@ $menuHover: #0958d9;

 // 浅色主题theme-light
 $menuLightBg: #ffffff;
-$menuLightHover: #f0f7ff;
+$menuLightHover: #e6f4ff;
+$menuLightActiveBg: #d6e4ff;
 $menuLightText: #303133;
 $menuLightActiveText: #1677ff;

@ -45,6 +46,7 @@ $--color-info: #909399;
  menuHover: $menuHover;
  menuLightBg: $menuLightBg;
  menuLightHover: $menuLightHover;
+  menuLightActiveBg: $menuLightActiveBg;
  menuLightText: $menuLightText;
  menuLightActiveText: $menuLightActiveText;
  sideBarWidth: $sideBarWidth;
@ -67,11 +69,19 @@ $--color-info: #909399;

 // CSS变量定义
 :root {
-  /* 亮色模式变量 - 现代化蓝色主题 */
+  /* 暗色主题（theme-dark）变量 - 现代化蓝色主题 */
  --sidebar-bg: #{$menuBg};
  --sidebar-text: #{$menuText};
  --menu-hover: #{$menuHover};
-  --menu-active-bg: rgba(255, 255, 255, 0.15);
+  --menu-active-bg: rgba(255, 255, 255, 0.2);
+  --menu-active-text: #{$menuActiveText};
+  --menu-active-indicator: #ffffff;
+  
+  /* 亮色主题（theme-light）变量 */
+  --menu-light-hover: #{$menuLightHover};
+  --menu-light-active-bg: #{$menuLightHover};
+  --menu-light-active-text: #{$menuLightActiveText};
+  --menu-light-active-indicator: #{$menuLightActiveText};
  
  --navbar-bg: #ffffff;
  --navbar-text: #303133;
@ -108,7 +118,9 @@ html.dark {
  --sidebar-bg: #141414;
  --sidebar-text: #ffffff;
  --menu-hover: #2d2d2d;
+  --menu-active-bg: rgba(22, 119, 255, 0.3);
  --menu-active-text: #{$menuActiveText};
+  --menu-active-indicator: #1677ff;

  /* 顶部导航栏 */
  --navbar-bg: #141414;
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@ -1,27 +1,27 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
-    <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="getMenuBackground"
-        :text-color="getMenuTextColor"
-        :unique-opened="true"
-        :active-text-color="theme"
-        :collapse-transition="false"
-        mode="vertical"
-        :class="sideTheme"
-      >
-        <sidebar-item
-          v-for="(route, index) in sidebarRouters"
-          :key="route.path + index"
-          :item="route"
-          :base-path="route.path"
-        />
-      </el-menu>
-    </el-scrollbar>
-  </div>
+    <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
+        <logo v-if="showLogo" :collapse="isCollapse" />
+        <el-scrollbar wrap-class="scrollbar-wrapper">
+            <el-menu
+                :default-active="activeMenu"
+                :collapse="isCollapse"
+                :background-color="getMenuBackground"
+                :text-color="getMenuTextColor"
+                :unique-opened="true"
+                :active-text-color="theme"
+                :collapse-transition="false"
+                mode="vertical"
+                :class="sideTheme"
+            >
+                <sidebar-item
+                    v-for="(route, index) in sidebarRouters"
+                    :key="route.path + index"
+                    :item="route"
+                    :base-path="route.path"
+                />
+            </el-menu>
+        </el-scrollbar>
+    </div>
 </template>

 <script setup>
@ -45,60 +45,61 @@ const isCollapse = computed(() => !appStore.sidebar.opened)

 // 获取菜单背景色
 const getMenuBackground = computed(() => {
-  if (settingsStore.isDark) {
-    return 'var(--sidebar-bg)'
-  }
-  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
+    if (settingsStore.isDark) {
+        return 'var(--sidebar-bg)'
+    }
+    return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
 })

 // 获取菜单文字颜色
 const getMenuTextColor = computed(() => {
-  if (settingsStore.isDark) {
-    return 'var(--sidebar-text)'
-  }
-  return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
+    if (settingsStore.isDark) {
+        return 'var(--sidebar-text)'
+    }
+    return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
 })

 const activeMenu = computed(() => {
-  const { meta, path } = route
-  if (meta.activeMenu) {
-    return meta.activeMenu
-  }
-  return path
+    const { meta, path } = route
+    if (meta.activeMenu) {
+        return meta.activeMenu
+    }
+    return path
 })
 </script>

 <style lang="scss" scoped>
 .sidebar-container {
-  background-color: v-bind(getMenuBackground);
-  
-  .scrollbar-wrapper {
    background-color: v-bind(getMenuBackground);
-  }

-  .el-menu {
-    border: none;
-    height: 100%;
-    width: 100% !important;
-    
-    .el-menu-item, .el-sub-menu__title {
-      &:hover {
-        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
-      }
+    .scrollbar-wrapper {
+        background-color: v-bind(getMenuBackground);
    }

-    .el-menu-item {
-      color: v-bind(getMenuTextColor);
-      
-      &.is-active {
-        color: var(--menu-active-text, #409eff);
-        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
-      }
-    }
+    .el-menu {
+        border: none;
+        height: 100%;
+        width: 100% !important;

-    .el-sub-menu__title {
-      color: v-bind(getMenuTextColor);
+        // 基础 hover 样式（会被主题特定样式覆盖）
+        .el-menu-item,
+        .el-sub-menu__title {
+            transition: all 0.3s ease;
+        }
+
+        .el-menu-item {
+            color: v-bind(getMenuTextColor);
+            position: relative;
+
+            // 基础选中样式（会被主题特定样式覆盖）
+            &.is-active {
+                font-weight: 500;
+            }
+        }
+
+        .el-sub-menu__title {
+            color: v-bind(getMenuTextColor);
+        }
    }
-  }
 }
 </style>
--- a/src/views/login.vue
+++ b/src/views/login.vue
@ -27,7 +27,16 @@
                            <rect x="48" y="20" width="8" height="8" rx="2" fill="#4A90E2" />
                            <!-- 红色L徽章 -->
                            <circle cx="52" cy="18" r="6" fill="#FF6B6B" />
-                            <text x="52" y="22" font-size="8" font-weight="bold" fill="white" text-anchor="middle">L</text>
+                            <text
+                                x="52"
+                                y="22"
+                                font-size="8"
+                                font-weight="bold"
+                                fill="white"
+                                text-anchor="middle"
+                            >
+                                L
+                            </text>
                        </svg>
                    </div>
                </div>
@ -139,8 +148,8 @@ const router = useRouter()
 const { proxy } = getCurrentInstance()

 const loginForm = ref({
-    username: 'admin',
-    password: 'admin123',
+    username: '',
+    password: '',
    rememberMe: false,
    code: '',
    uuid: '',
@ -244,7 +253,7 @@ getCookie()
    align-items: center;
    height: 100vh;
    overflow: hidden;
-    background: #4A90E2; // 明亮的蓝色背景
+    background: #4a90e2; // 明亮的蓝色背景
 }

 // 背景装饰
@ -264,7 +273,7 @@ getCookie()
    left: 0;
    width: 100%;
    height: 40%;
-    background: #2E5C8A; // 深蓝色城市剪影
+    background: #2e5c8a; // 深蓝色城市剪影
    clip-path: polygon(
        0% 100%,
        5% 85%,
@ -391,11 +400,11 @@ getCookie()
        }

        &:hover input {
-            border-color: #4A90E2;
+            border-color: #4a90e2;
        }

        &.is-focus input {
-            border-color: #4A90E2;
+            border-color: #4a90e2;
        }
    }

@ -408,7 +417,7 @@ getCookie()
    }

    .el-input:hover .input-icon {
-        color: #4A90E2;
+        color: #4a90e2;
    }
 }

@ -440,7 +449,7 @@ getCookie()
 .title {
    margin: 0px auto 35px auto;
    text-align: center;
-    color: #4A90E2;
+    color: #4a90e2;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
@ -480,7 +489,7 @@ getCookie()
    justify-content: center;

    &:hover {
-        border-color: #4A90E2;
+        border-color: #4a90e2;
    }

    img {
@ -512,19 +521,19 @@ getCookie()
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
-        background-color: #4A90E2;
-        border-color: #4A90E2;
+        background-color: #4a90e2;
+        border-color: #4a90e2;
    }
 }

 .forgot-password {
-    color: #4A90E2;
+    color: #4a90e2;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
-        color: #2E5C8A;
+        color: #2e5c8a;
        text-decoration: underline;
    }
 }
@ -536,16 +545,16 @@ getCookie()
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
-    background: #4A90E2;
+    background: #4a90e2;
    border: none;
    transition: all 0.3s ease;

    &:hover {
-        background: #3A7BC8;
+        background: #3a7bc8;
    }

    &:active {
-        background: #2E5C8A;
+        background: #2e5c8a;
    }

    :deep(.el-loading-spinner) {