Your Name
0d056a45e9
Vue 3 + Vuetify 4 + TypeScript + Vue Router 4 + Pinia frontend, replacing the old Tailwind+Alpine.js static pages. Infrastructure (8 new files): - composables/useSnackbar.ts — centralized notifications - composables/useServerList.ts — server dropdown data - composables/useServerPagination.ts — paginated server table - types/api.ts — 14 typed API response interfaces - types/global.d.ts — Window augmentation - utils/status.ts — server status display helpers - utils/validation.ts — 8 form validation rules - components/MonacoEditor.vue — fullscreen code editor 14 pages rebuilt: - LoginPage, DashboardPage, ServersPage, TerminalPage - FilesPage, PushPage, ScriptsPage, CredentialsPage - SchedulesPage, RetriesPage, CommandsPage - AlertsPage, AuditPage, SettingsPage Critical fixes (from audit): - Files upload JWT auth (was missing Authorization header) - API Key reveal password verification dialog - 6 silent catch blocks → snackbar error feedback - 33 as any → 0 (typed interfaces + global.d.ts) - Dashboard: alerts/summary/categories/audit data loading - WebSocket reconnect timer cleanup + auth failure handling - Terminal ResizeObserver leak fix - PushPage timer cleanup on unmount - FilesPage path double-slash fix (joinPath helper) - Filter changes reset pagination to page 1 Features added: - Servers: batch operations, CSV export/import, detail panel - Push: sync modes, ZIP upload, WebSocket real-time progress, cancel - Scripts: quick execute panel, execution status tracking - Files: Monaco editor, context menu, batch delete, rename, chmod - Terminal: right-click menu, server sidebar, tab persistence - Settings: batch save, TOTP manual key, password TOTP verification - Dashboard: category distribution, recent audit, WS refresh Quality: - vue-tsc --noEmit zero errors - vite build passes (1613 modules) - Formal 8-step security audit passed (0 FINDING) - .gitignore: dist/ → **/dist/ to cover web/app/dist/ Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2.5 KiB
2.5 KiB
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 borderfrontend/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.vipfrontend/src/api/index.ts— 新增 202(TotpRequiredError) + 429 处理frontend/src/stores/auth.ts— login() 处理 access_token+admin 响应, fetchProfile 仅在 401 时 forceLogoutfrontend/src/router/index.ts— 路由守卫恢复frontend/src/composables/useWebSocket.ts— 新建：ws://alerts?token=JWT, ping/pong, 断线重连, alert→snackbarfrontend/src/App.vue— watch isLoggedIn 自动 connect/disconnect WebSocket
是否需迁移/重启
- 需要重新
npm run dev或npm run build - 后端 CORS 需包含
http://localhost:3000（开发环境） - 部署时需将 dist/ 放到 web/app/dist/
验证方式
npm run build成功npm run dev→ 自动跳转 /login（路由守卫生效）- 登录后 Dashboard 显示真实服务器数据
- WebSocket 连接后告警推送到浏览器
- 所有卡片为 elevation=0 border（无阴影，有边框）
- 统计卡片为 v-list--border two-line（不是 v-card）
- 颜色使用语义类（blue/green/orange/red）