iven/csm

Files

iven 60ee38a3c2 feat: 新增补丁管理和异常检测插件及相关功能

feat(protocol): 添加补丁管理和行为指标协议类型
feat(client): 实现补丁管理插件采集功能
feat(server): 添加补丁管理和异常检测API
feat(database): 新增补丁状态和异常检测相关表
feat(web): 添加补丁管理和异常检测前端页面
fix(security): 增强输入验证和防注入保护
refactor(auth): 重构认证检查逻辑
perf(service): 优化Windows服务恢复策略
style: 统一健康评分显示样式
docs: 更新知识库文档

2026-04-11 15:59:53 +08:00

2.7 KiB

Raw Blame History

Web Frontend（管理面板）

设计思想

Vue 3 + TypeScript + Vite + Element Plus + Pinia + ECharts 的单页应用。关键决策：

SPA 嵌入部署 — 构建产物 web/dist/ 通过 include_dir! 编译进 server 二进制，部署零额外依赖
JWT 本地存储 — token 存 localStorage，路由守卫检查过期，30 秒内即将过期视为无效
按路由懒加载 — 所有页面组件使用 () => 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

认证流程

Login.vue → POST /api/auth/login → 获取 access_token + refresh_token
token 存入 localStorage
路由守卫 beforeEach 检查 JWT 过期（解析 payload.exp）
API 调用携带 Authorization: Bearer <token> header
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`	各插件管理页面

2.7 KiB Raw Blame History Unescape Escape