# 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` | 各插件管理页面 |