88 lines
6.3 KiB
Markdown
88 lines
6.3 KiB
Markdown
---
|
||
id: T-004
|
||
title: 设计 Sense 与 Bell 交互原型
|
||
phase: 0
|
||
deps: [T-002]
|
||
status: DOING
|
||
created: 2026-08-03
|
||
issue: 6
|
||
context_ref: 32b9859a405a4d64c03b6d3ae765340bc37fdfa0
|
||
claim_branch: claims/T-004
|
||
work_branch: agent/codex/T-004
|
||
write_paths:
|
||
- docs/tasks/T-004.md
|
||
- docs/design/sense/index.html
|
||
- docs/design/bell/index.html
|
||
---
|
||
|
||
## 问题 / 背景
|
||
|
||
Sense 与 Bell 尚无可供产品确认的页面结构。生产 UI 开工前，需要用两个零构建依赖的单文件 HTML 原型枚举导航、控件、主要状态与高频工作流，避免直接从实现代码猜交互。Sense 可参考 MiBeeNvr 的监控、摄像头与仪表盘信息架构，但必须补齐 YoVision 的设备健康、分片/期望态、批量开通和区域/警戒线编辑；Bell 必须体现事件与 Alert 分离、ack、升级链、证据、误报和权限边界。
|
||
|
||
## 关联需求与交互（如适用）
|
||
|
||
- 用户故事：Sense 关联 US-001、US-002、US-005；Bell 关联 US-003～US-006。
|
||
- 交互清单：Sense 关联 IX-001～IX-004、IX-010～IX-011；Bell 关联 IX-005～IX-013。
|
||
- 相关页面 / 路由：原型阶段为 `docs/design/sense/index.html` 与 `docs/design/bell/index.html`，不定义生产路由。
|
||
|
||
## 方案
|
||
|
||
1. 使用统一的 YoVision 深色安防控制台设计系统，Sense 与 Bell 保持品牌、状态色、控件和导航规律一致。
|
||
2. Sense 制作为单页可交互工作台：总览、监控墙、设备、区域规则、接入任务和系统状态；区域编辑器支持多边形、警戒线、撤销、清空、键盘替代和保存反馈。
|
||
3. Bell 制作为单页可交互值班台：预警队列、事件证据、ack/处置、升级时间线、误报反馈、规则和升级链概览。
|
||
4. 两个原型均内联 CSS/JS，使用假数据，不加载真实视频、客户信息、生产地址或外部依赖；顶部固定标注原型用途。
|
||
5. 完成桌面、窄屏、键盘焦点、加载/空态/错误切换和 `prefers-reduced-motion` 检查，提交人工评审；产品确认前不把任务标为 `DONE`。
|
||
|
||
## 不可变约束
|
||
|
||
- 阈值 / 数值边界：默认 16 路、单站点上限 128 路；静默最长 4 小时；原型不得暗示 128 路同时播放主码流。
|
||
- 判定式 / 状态转换：事件事实不可被处置改写；Alert 的首次投递、送达、看到、ack 和升级必须分开展示；区域规则正式发布与试运行必须可区分。
|
||
- 安全边界：不得展示摄像头密码、完整 RTSP/ONVIF 地址、token、真实客户/未成年人数据或人脸入口；破坏性动作须确认。
|
||
- 既有契约：原型不修改事件 v0.1、API、路由和生产技术栈，不作为生产实现代码。
|
||
|
||
## 验收要点
|
||
|
||
- 任务相关验证：两个 HTML 可本地打开、无外部依赖；关键按钮和状态切换可用；运行 HTML 结构检查、`git diff --check` 与 `./init.ps1`。
|
||
- 完整门禁：本任务不修改 schema/API/路由，因此不触发契约与导航实现门禁；若范围变化则先更新任务。
|
||
- 人工 / 设备验收：必需。项目负责人分别打开 Sense 与 Bell 原型，确认页面结构、控件集合和主要工作流；未确认前不得标记 `DONE` 或合并为最终设计。
|
||
- 构建产物：`docs/design/sense/index.html`、`docs/design/bell/index.html`；双击浏览器打开，零构建依赖。
|
||
|
||
## 边界（不改什么）
|
||
|
||
不修改 `Sense/`、`Bell/` 生产代码，不更新已确认的 IX 行为结论，不复制 `_reference/mibeenvr` 代码或资源，不实现真实视频播放、接口请求、持久化与认证。
|
||
|
||
## 协作约束
|
||
|
||
- 责任 Agent：codex。
|
||
- 唯一写入者：codex。
|
||
- 委派：不启用。
|
||
- Gitea：主 Issue 为 #6；`context_ref` 为 `32b9859a405a4d64c03b6d3ae765340bc37fdfa0`，claim 为 `claims/T-004`，工作分支为 `agent/codex/T-004`。
|
||
|
||
任何新增写路径先检查与其他活跃任务是否重叠；同一时刻只有一个 Agent 修改本任务的 `write_paths`。
|
||
|
||
## 执行记录
|
||
|
||
### 2026-08-03 任务定义
|
||
|
||
- 依据用户请求、US-001～US-006、IX-001～IX-013 和 MiBeeNvr 本地只读截图定义两个单文件原型范围。
|
||
- 人工验收为必需门禁；原型完成后先进入评审，不自动视为最终设计。
|
||
|
||
### 2026-08-03 领取与基线
|
||
|
||
- dispatcher `ila` 已将 Issue #6 分配给 `codex`，claim 与工作分支均从精确 `context_ref` 创建并读回一致。
|
||
- 在独立 worktree `D:\OPC\yovision-T-004` 开始工作；写入范围仅限本任务声明的三个路径。
|
||
|
||
### 2026-08-04 原型实现
|
||
|
||
- 使用 `ui-ux-pro-max` 生成并复核统一设计系统：深色专业安防控制台、高信息密度、系统字体、语义状态色、150–300ms 微交互、明确焦点和 reduced-motion；Sense 使用青蓝强调接入/画面，Bell 使用紫色强调处置/状态机。
|
||
- `docs/design/sense/index.html` 已覆盖运行总览、4 路按需监控、摄像头期望态/实际态、批量接入、系统健康，以及多边形/方向警戒线的鼠标绘制、坐标键盘替代、撤销、草稿、试运行和发布确认。
|
||
- `docs/design/bell/index.html` 已覆盖预警队列、事件事实与证据、一次点击 ack、升级倒计时和投递事实、处置结果、误报反馈、规则、升级链、报表和审计；弱网时先显示结构化事实并允许证据后台重试。
|
||
- 两个文件均为单文件内联 CSS/JS，无外部依赖、真实视频、客户数据、连接串或人脸入口；顶部均固定显示原型用途提示。
|
||
|
||
### 2026-08-04 自测结果
|
||
|
||
- 标准库 HTML 结构审计通过：两文件均有 viewport、原型横幅、reduced-motion，无重复 `id`、无未命名按钮、无不可识别表单控件和外部 HTTP 资源；Sense 统计 40 个按钮/21 个控件，Bell 统计 42 个按钮/14 个控件。
|
||
- Playwright 在 1440×900 与 375×812 视口实测：两页页面级 `scrollWidth == clientWidth`，桌面三栏和移动底部导航正常，浏览器控制台 0 error / 0 warning；桌面与移动关键状态截图已人工检查，临时 QA 图片未写入仓库。
|
||
- Sense 实测坐标点添加、草稿状态、保存反馈、设备导航、添加摄像头对话框和 Esc 退出；Bell 实测一键 ack、升级计时停止、弱网状态、误报必填校验、错误焦点和 Esc 退出。
|
||
- 尚待项目负责人分别打开两个 HTML，确认页面结构、控件集合和主要工作流；在收到确认前任务保持 `DOING`。
|