# 2026-05-31 Vuetify Gallery 重设计 + 后端对接

## 变更摘要
前端从自创配色/布局全面迁移到 Vuetify 官方 Component Gallery 设计模式，同时打通后端 API 链路。

## 动机
- 原有设计使用自定义色值（#0F1117, #1A1D27, #60A5FA 等）和 Rail 侧边栏，与 Vuetify 官方 Gallery 风格不一致
- Dashboard 使用静态 mock 数据，无法展示真实服务器状态
- 缺少 Vite proxy，开发时无法对接后端
- 路由守卫被注释，WebSocket 未集成

## 涉及文件

### 主题
- `frontend/src/plugins/vuetify.ts` — 删除所有自定义色值，使用 Vuetify 默认 light/dark 主题

### 布局
- `frontend/src/App.vue` — 全宽侧边栏 250px bg-surface + App Bar bg-primary + 用户菜单(v-menu) + 主题切换 + 登出

### 页面 (全部 13 个)
- `frontend/src/pages/DashboardPage.vue` — 完全重写：v-list--border 统计卡片 + v-card--border 表格 + 告警列表 + 摘要进度条，对接 /api/servers/stats 和 /api/servers/
- `frontend/src/pages/ServersPage.vue` — 统计改 v-list--border, 表格改 v-card--border, chip 改 x-small label tonal border
- `frontend/src/pages/AlertsPage.vue` — 统计改 v-list--border + blue/green/orange/red 配色
- 其余 9 页：v-card→elevation=0 border, dialog→border, chip→size=x-small label tonal border=current sm
- `frontend/src/pages/LoginPage.vue` — rounded=lg + border

### 基础设施
- `frontend/vite.config.mts` — proxy /api→api.synaglobal.vip, /ws→wss://api.synaglobal.vip
- `frontend/src/api/index.ts` — 新增 202(TotpRequiredError) + 429 处理
- `frontend/src/stores/auth.ts` — login() 处理 access_token+admin 响应, fetchProfile 仅在 401 时 forceLogout
- `frontend/src/router/index.ts` — 路由守卫恢复
- `frontend/src/composables/useWebSocket.ts` — 新建：ws://alerts?token=JWT, ping/pong, 断线重连, alert→snackbar
- `frontend/src/App.vue` — watch isLoggedIn 自动 connect/disconnect WebSocket

## 是否需迁移/重启
- 需要重新 `npm run dev` 或 `npm run build`
- 后端 CORS 需包含 `http://localhost:3000`（开发环境）
- 部署时需将 dist/ 放到 web/app/dist/

## 验证方式
1. `npm run build` 成功
2. `npm run dev` → 自动跳转 /login（路由守卫生效）
3. 登录后 Dashboard 显示真实服务器数据
4. WebSocket 连接后告警推送到浏览器
5. 所有卡片为 elevation=0 border（无阴影，有边框）
6. 统计卡片为 v-list--border two-line（不是 v-card）
7. 颜色使用语义类（blue/green/orange/red）
