60ee38a3c2
feat(protocol): 添加补丁管理和行为指标协议类型 feat(client): 实现补丁管理插件采集功能 feat(server): 添加补丁管理和异常检测API feat(database): 新增补丁状态和异常检测相关表 feat(web): 添加补丁管理和异常检测前端页面 fix(security): 增强输入验证和防注入保护 refactor(auth): 重构认证检查逻辑 perf(service): 优化Windows服务恢复策略 style: 统一健康评分显示样式 docs: 更新知识库文档
71 lines
2.7 KiB
Markdown
71 lines
2.7 KiB
Markdown
# Web Frontend（管理面板）
|
||
|
||
## 设计思想
|
||
|
||
Vue 3 + TypeScript + Vite + Element Plus + Pinia + ECharts 的单页应用。关键决策：
|
||
|
||
1. **SPA 嵌入部署** — 构建产物 `web/dist/` 通过 `include_dir!` 编译进 server 二进制，部署零额外依赖
|
||
2. **JWT 本地存储** — token 存 `localStorage`，路由守卫检查过期，30 秒内即将过期视为无效
|
||
3. **按路由懒加载** — 所有页面组件使用 `() => import(...)` 动态导入
|
||
|
||
## 代码逻辑
|
||
|
||
### 路由结构
|
||
|
||
```
|
||
/login → Login.vue（公开）
|
||
/ → Layout.vue（认证后）
|
||
/dashboard → Dashboard.vue（仪表盘/健康概览）
|
||
/devices → Devices.vue（设备列表）
|
||
/devices/:uid → DeviceDetail.vue（设备详情）
|
||
/usb → UsbPolicy.vue（U盘策略管理）
|
||
/alerts → Alerts.vue（告警管理）
|
||
/settings → Settings.vue（系统设置）
|
||
/plugins/web-filter → WebFilter.vue
|
||
/plugins/usage-timer → UsageTimer.vue
|
||
/plugins/software-blocker → SoftwareBlocker.vue
|
||
/plugins/popup-blocker → PopupBlocker.vue
|
||
/plugins/usb-file-audit → UsbFileAudit.vue
|
||
/plugins/watermark → Watermark.vue
|
||
/plugins/disk-encryption → DiskEncryption.vue
|
||
/plugins/print-audit → PrintAudit.vue
|
||
/plugins/clipboard-control → ClipboardControl.vue
|
||
/plugins/plugin-control → PluginControl.vue
|
||
```
|
||
|
||
### 认证流程
|
||
|
||
1. Login.vue → `POST /api/auth/login` → 获取 access_token + refresh_token
|
||
2. token 存入 localStorage
|
||
3. 路由守卫 `beforeEach` 检查 JWT 过期（解析 payload.exp）
|
||
4. API 调用携带 `Authorization: Bearer <token>` header
|
||
5. token 过期 → 自动跳转 /login
|
||
|
||
### API 通信
|
||
|
||
`web/src/lib/api.ts` — 封装所有 API 调用，统一处理认证和错误。
|
||
|
||
### 状态管理
|
||
|
||
`web/src/stores/devices.ts` — Pinia store 管理设备列表状态。
|
||
|
||
## 关联模块
|
||
|
||
- [[server]] — 消费其 HTTP REST API 和 WebSocket 推送
|
||
- [[plugins]] — 每个插件页面对应 server 端的插件 API
|
||
|
||
## 关键文件
|
||
|
||
| 文件 | 职责 |
|
||
|------|------|
|
||
| `web/src/main.ts` | 应用入口、Vue 实例创建 |
|
||
| `web/src/App.vue` | 根组件 |
|
||
| `web/src/router/index.ts` | 路由定义、JWT 路由守卫 |
|
||
| `web/src/lib/api.ts` | API 通信封装 |
|
||
| `web/src/stores/devices.ts` | Pinia 设备状态管理 |
|
||
| `web/src/views/Layout.vue` | 主布局（侧边栏+内容区） |
|
||
| `web/src/views/Dashboard.vue` | 仪表盘页 |
|
||
| `web/src/views/Devices.vue` | 设备列表页 |
|
||
| `web/src/views/DeviceDetail.vue` | 设备详情页 |
|
||
| `web/src/views/plugins/*.vue` | 各插件管理页面 |
|