safesight-control/docs/产品化改进计划.md

7.5 KiB
Raw Blame History

SafeSight Control 产品化改进计划

目标

将后台管理从"工程师界面"改造为"安全管理员界面",让非技术用户能够独立完成:

  1. 添加摄像头并部署检测场景
  2. 日常查看安全违规情况
  3. 处理和跟踪告警事件

优先级说明

  • P0 — 不做就不可交付给普通用户
  • P1 — 严重影响日常体验
  • P2 — 锦上添花,提升满意度

P0必须立即完成交付底线

1. 告警中心重做

现状问题:告警存内存、重启就丢;只读日志无操作;无严重等级

改什么

  • 告警数据迁移到 SQLite alarms 表持久化存储
  • 增加告警状态流转:未处理 → 已确认 → 已关闭,每条操作记录操作人和时间
  • 增加严重等级:info / warning / critical / emergency,用颜色+图标区分
  • 增加类型筛选:设备维度、规则类型维度、时间维度
  • 增加告警详情弹出层,展示完整抓拍图、识别信息、时间线

实现要点

  • 新建 alarms 表(id, device_id, channel, rule, label, confidence, severity, status, snapshot_path, clip_path, created_at, acknowledged_at, acknowledged_by, resolved_at, resolved_by
  • AlarmCollector 收到告警后写入 DB
  • 告警页面改为从 DB 查询,保留现有分页
  • 行内添加操作按钮(确认/关闭),调用 API
  • 表头加严重等级列

2. 仪表盘重做

现状问题4 个数字 + 离线列表,看不到任何安全违规信息

改什么

  • 顶部统计卡片改为:今日告警总数、未处理告警数、在线设备数、运行中检测路数
  • 中部新增"最近告警"实时流SSE 推送),卡片式展示:抓拍图 + 规则名 + 设备名 + 时间
  • 底部新增"设备状态概览":在线/离线/异常卡片网格
  • 点击任意告警卡片跳转到告警中心对应详情

实现要点

  • 新增 SSE 端点 /api/alarms/streamAlarmCollector 收到告警时广播
  • 仪表盘页面 JS 连接 SSE追加告警卡片到 DOM
  • 告警卡片带抓拍缩略图(/ui/hls 代理或 snapshot 直连)

3. 一键配置向导(场景化部署)

现状问题:配置一台摄像头需要跨 5 个页面 9 个步骤

改什么

  • 新增页面 /ui/wizard,标准模式下直接可见
  • 步骤1/3:选择设备 — 列出在线设备,每个设备显示当前已加载的摄像头
  • 步骤2/3:配置检测 — 显示该设备上所有视频源,每个视频源可以:
    • 勾选要启用的检测项(安全帽、工鞋、人脸等)
    • 设置告警灵敏度(高/中/低)
    • 预览视频画面
  • 步骤3/3:确认并下发 — 展示配置摘要,确认后自动生成模板+Profile+识别单元→下发到设备

实现要点

  • 后端新增 /api/wizard/preview/api/wizard/apply 端点
  • 内部调用现有的 AutoConfigService 和任务系统
  • 前端用步骤条stepper展示进度每步一个卡片
  • "检测项"从设备 /v1/capabilities 获取,用直观的图标+描述展示

4. 基础登录鉴权

现状问题:任何人都能访问 18080 端口做任何操作

改什么

  • 内置单管理员账号,密码在 safesightd.json 配置
  • 登录页 /ui/login,成功后设 session cookie
  • 所有 /api//ui/ 路由(除 login 和静态资源)需要鉴权
  • 半小时无操作自动退出

实现要点

  • 新建 internal/auth/ 包,提供 Login(password) bool + SessionMiddleware
  • crypto/bcrypt 存密码哈希(配置中存 password_hash
  • 用随机 token + 内存 map 做 session不需要 Redis

5. 监控页 HLS.js 本地化

现状问题monitor.html 从 CDN 加载 hls.js断网部署下无法使用

改什么

  • 将 hls.js 引用改为本地 /ui/assets/vendor/hls.min.js
  • 与管控台页面保持一致

实现要点

  • 1 行 templat 修改

P1短期必须完成严重影响体验

6. 告警浏览器通知

现状问题:告警要手动刷新页面才能看到

改什么

  • 告警产生时,浏览器标签页标题闪烁 [N] SafeSightN 为新告警数)
  • 有未处理告警时,顶栏通知铃图标显示红点+数量
  • 可选:支持桌面通知(Notification API),用户授权后弹窗

实现要点

  • 复用 P0 的 SSE 端点 /api/alarms/stream
  • JS 监听 SSE 事件,更新顶栏通知铃和页面标题

7. 设备列表服务健康指示

现状问题:设备列表只显示在线/离线,看不到内部服务状态

改什么

  • 设备列表每行增加媒体服务状态指示灯(运行中/已停止/异常)
  • 在线但媒体服务异常的设备,行背景变淡橙色警告
  • 悬停显示详细状态CPU 使用率、内存、最后心跳时间

实现要点

  • 后端在设备列表查询时附带最近一次 metrics 摘要
  • CSS 新增 .device-row.warn 样式

8. 操作结果提示优化

现状问题:成功/失败用 URL 参数传递消息,粗暴且易丢失

改什么

  • 改用 session flash message操作完成后在 HTTP header 设 cookie下次页面渲染时展示
  • 页面顶部显示 toast 式消息条3 秒自动消失,绿色成功/红色失败
  • 替代现有的 URL query 参数消息机制

实现要点

  • middleware 层面处理 flash cookie
  • 模板 layout.html 顶部增加 toast 组件

9. 术语统一

现状问题:同一概念在多个页面叫法不同

改什么

  • 全局统一:
    • "视频通道" → "检测通道"(与视频源区分)
    • "场景模板" → "检测模板"(与场景管理区分)
    • "识别单元" → "检测通道"(与设备赋值对齐)
  • 菜单项和页面标题同步修改

实现要点

  • 批量替换模板中的中文标签
  • 路由不变,只改显示文本

P2长期优化提升满意度

10. 时序图表

  • 告警趋势图(按天/周/月,按规则类型分组)
  • 设备资源使用趋势图CPU/内存/NPU
  • 检测统计图(今日/本周识别次数、各设备负载)

实现:使用轻量 Canvas 图表库(如 Chart.js 或 uPlot数据从聚合查询获取

11. 设备分组与标签

  • 支持按车间/区域分组设备
  • 设备列表增加分组筛选
  • 批量操作支持按组选择

12. 配置版本对比

  • 查看历史配置版本列表
  • 选择两个版本做 diff 对比JSON diff
  • 回滚前预览变更内容

13. 报告导出

  • 告警报告导出为 PDF/CSV
  • 设备状态报告
  • 支持选择时间范围和过滤条件

14. 模型管理简化

  • 模型上传后自动分发到所有兼容设备
  • 增加模型版本管理和兼容性检查
  • 一键"更新全部设备模型"

15. 人脸库优化

  • 支持搜索和过滤
  • 人脸质量评分反馈
  • 同步状态可视化

实施时序

第 1-2 周P0-4登录 + P0-5HLS 修复)
          ↓
第 2-4 周P0-1告警重做 + P0-2仪表盘重做
          ↓
第 4-6 周P0-3配置向导
          ↓
第 6-8 周P1-6告警通知 + P1-7服务健康 + P1-8结果提示
          ↓
第 8-10 周P1-9术语统一 + P2-10时序图表 + P2-13报告导出
          ↓
后续迭代P2 其余项

技术债务同步处理

在实现上述功能时,顺手清理:

  • 提取模板函数到独立文件(当前约 300 行挤在一个函数里)
  • 统一设备健康检查的 timeout 策略
  • 为所有新增 API 建立测试用例
  • .gitignore 覆盖所有构建产物