Web 前端新增暗夜模式切换

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

web/frontend/src/App.vue

@@ -2,8 +2,10 @@
 import { computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
 
 const auth = useAuthStore()
+const theme = useThemeStore()
 const router = useRouter()
 const route = useRoute()
 
@@ -39,7 +41,16 @@ function logout() {
             {{ auth.isAdmin ? '管理员' : '普通用户' }}
           </el-tag>
         </div>
-        <el-button type="primary" link @click="logout">退出登录</el-button>
+        <div class="right">
+          <el-switch
+            v-model="theme.isDark"
+            inline-prompt
+            active-text="暗"
+            inactive-text="亮"
+            style="--el-switch-on-color: #2c3e50"
+          />
+          <el-button type="primary" link @click="logout">退出登录</el-button>
+        </div>
       </el-header>
       <el-main>
         <router-view />
@@ -57,6 +68,10 @@ body,
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
+body {
+  background-color: var(--el-bg-color-page);
+  color: var(--el-text-color-primary);
+}
 .app {
   height: 100%;
 }
@@ -77,14 +92,19 @@ body,
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
-  border-bottom: 1px solid #ebeef5;
+  background: var(--el-bg-color);
+  border-bottom: 1px solid var(--el-border-color-light);
 }
 .user {
   display: flex;
   align-items: center;
   gap: 10px;
 }
+.right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
 .el-menu {
   border-right: none !important;
 }