diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 2c7c220..e576912 100644
--- 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 {
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 6930931..1f48fd0 100644
--- 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;
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 9acc406..fbd16cd 100644
--- 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>
diff --git a/src/views/login.vue b/src/views/login.vue
index 893d6be..04a4ab0 100644
--- 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) {