feat(web): 深度定制 Element Plus 主题 — 靛蓝主色/暗色模式/侧栏折叠/面包屑/登录页重绘

- 新增 styles/theme.css：CSS 变量覆盖默认主题（主色 #4F46E5、圆角、阴影、页面背景），html.dark 暗色变量
- 新增 stores/theme.ts：暗色/亮色切换，localStorage 持久化
- main.ts 引入 element-plus 暗色 css-vars 与主题文件，挂载前初始化主题
- index.html 加 SVG favicon 与防暗色闪烁内联脚本
- AdminLayout：深色可折叠侧栏、header 面包屑 + 暗色切换按钮、页面切换过渡
- UserLayout：header 打磨 + 暗色切换按钮
- LoginView/ApplyView：统一品牌渐变背景与卡片，登录页 OTP 输入行内联发送按钮、登录按钮唯一通栏主按钮（修复按钮错位）

web/src/layouts/UserLayout.vue

@@ -2,10 +2,12 @@
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
 
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
+const theme = useThemeStore()
 
 const activeMenu = computed(() => route.path)
 const username = computed(() => auth.me?.username ?? '')
@@ -20,29 +22,42 @@ async function onLogout() {
   <el-container class="user-layout">
     <el-header class="header">
       <span class="logo">
-        <el-icon><Monitor /></el-icon>
-        <span>服务器用户管理</span>
+        <span class="logo-icon">
+          <el-icon :size="18"><Monitor /></el-icon>
+        </span>
+        <span class="logo-text">服务器用户管理</span>
       </span>
       <el-menu :default-active="activeMenu" router mode="horizontal" :ellipsis="false" class="nav">
         <el-menu-item index="/me/profile">账号信息</el-menu-item>
         <el-menu-item index="/me/keys">我的密钥</el-menu-item>
         <el-menu-item index="/me/audit">我的审计</el-menu-item>
       </el-menu>
-      <el-dropdown @command="onLogout">
-        <span class="user-chip">
-          <el-avatar :size="26" class="avatar">{{ username.slice(0, 1).toUpperCase() }}</el-avatar>
-          <span>{{ username }}</span>
-          <el-icon><ArrowDown /></el-icon>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
+      <div class="header-right">
+        <el-tooltip :content="theme.isDark ? '切换到亮色' : '切换到暗色'">
+          <el-button link class="icon-btn" @click="theme.toggle()">
+            <el-icon :size="17"><Sunny v-if="theme.isDark" /><Moon v-else /></el-icon>
+          </el-button>
+        </el-tooltip>
+        <el-dropdown @command="onLogout">
+          <span class="user-chip">
+            <el-avatar :size="26" class="avatar">{{ username.slice(0, 1).toUpperCase() }}</el-avatar>
+            <span>{{ username }}</span>
+            <el-icon><ArrowDown /></el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
     </el-header>
     <el-main class="main">
-      <router-view />
+      <router-view v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </router-view>
     </el-main>
   </el-container>
 </template>
@@ -52,23 +67,49 @@ async function onLogout() {
   min-height: 100vh;
 }
 .header {
+  height: var(--app-header-height);
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: 20px;
   background: var(--el-bg-color);
   border-bottom: 1px solid var(--el-border-color-light);
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
 }
 .logo {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-weight: 600;
+  gap: 10px;
+  flex-shrink: 0;
+}
+.logo-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+}
+.logo-text {
+  font-weight: 650;
   font-size: 15px;
 }
 .nav {
   flex: 1;
   border-bottom: none;
 }
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+.icon-btn {
+  color: var(--el-text-color-regular);
+  padding: 4px;
+}
 .user-chip {
   display: flex;
   align-items: center;
@@ -77,10 +118,11 @@ async function onLogout() {
   outline: none;
 }
 .avatar {
-  background: var(--el-color-primary);
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
   color: #fff;
 }
 .main {
   padding: 20px;
+  background: var(--el-bg-color-page);
 }
 </style>