浅色模式导航面板使用浅色背景

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/frontend/src/App.vue

@@ -11,6 +11,12 @@ const route = useRoute()
 
 const showLayout = computed(() => route.meta.layout !== 'blank' && !!auth.token)
 
+const menuColors = computed(() =>
+  theme.isDark
+    ? { bg: '#282828', text: '#cfd8e3', active: '#ffffff' }
+    : { bg: '#f9fafb', text: '#1f2937', active: '#0f172a' },
+)
+
 function logout() {
   auth.logout()
   router.replace('/login')
@@ -19,14 +25,14 @@ function logout() {
 
 <template>
   <el-container v-if="showLayout" class="app">
-    <el-aside width="220px" class="aside">
+    <el-aside width="220px" class="aside" :class="{ 'aside-light': !theme.isDark }">
       <div class="brand">期货报告</div>
       <el-menu
         :default-active="route.path"
         router
-        background-color="#282828"
+        :background-color="menuColors.bg"
-        text-color="#cfd8e3"
+        :text-color="menuColors.text"
-        active-text-color="#ffffff"
+        :active-text-color="menuColors.active"
       >
         <el-menu-item index="/scores">打分列表</el-menu-item>
         <el-menu-item index="/chart">K 线 / 持仓</el-menu-item>
@@ -79,6 +85,11 @@ body {
   background: #282828;
   color: #cfd8e3;
 }
+.aside-light {
+  background: #f9fafb;
+  color: #1f2937;
+  border-right: 1px solid var(--el-border-color-light);
+}
 .brand {
   height: 60px;
   display: flex;
@@ -88,6 +99,9 @@ body {
   letter-spacing: 2px;
   border-bottom: 1px solid #3a3a3a;
 }
+.aside-light .brand {
+  border-bottom: 1px solid #e5e7eb;
+}
 .header {
   display: flex;
   justify-content: space-between;