yovision/docs/tasks/T-004.md

---
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、升级链、证据、误报和权限边界。

产品评审进一步区分“检测区域”和“告警规则”：前者依附具体摄像头画面、分辨率与坐标系，应在摄像头详情中编辑；后者包含场景、继承、时段、持续时间、试运行、发布与升级链，应由 Bell 管理。后端系统边界不得迫使用户丢失当前摄像头或规则草稿上下文。

## 关联需求与交互（如适用）

- 用户故事：Sense 关联 US-001、US-002，并为 US-005 提供摄像头空间配置；Bell 关联 US-003～US-006，并拥有 US-005 的业务规则工作流。
- 交互清单：Sense 关联 IX-001～IX-004，并提供 IX-010 所需的区域/警戒线几何；Bell 关联 IX-005～IX-013，负责 IX-010～IX-011 的规则继承、试运行和发布。
- 相关页面 / 路由：原型阶段为 `docs/design/sense/index.html` 与 `docs/design/bell/index.html`，不定义生产路由。

## 方案

1. 使用统一的 YoVision 深色安防控制台设计系统，Sense 与 Bell 保持品牌、状态色、控件和导航规律一致。
2. Sense 制作为单页可交互工作台：总览、监控墙、摄像头、接入任务和系统状态；不设置一级“区域规则”。从摄像头列表进入详情，在“画面与检测区域”页签完成多边形、警戒线、撤销、清空、键盘替代、区域版本和待校准反馈。
3. Sense 只保存摄像头空间几何并只读显示关联规则，不提供业务规则绑定、时段、持续时间、试运行或正式发布；摄像头画面参数变化时将区域标记为待校准。
4. Bell 制作为单页可交互值班台：除预警队列、事件证据、ack/处置、升级时间线、误报反馈和升级链外，规则编辑必须选择摄像头与检测区域版本，并负责继承、时段、持续时间、试运行、发布和回滚。
5. Sense 摄像头详情与 Bell 规则草稿通过可演示的相对深链互相进入，携带摄像头/区域上下文；原型可以跨文件，但生产产品不得要求用户重新查找同一摄像头或丢失未完成草稿。
6. 两个原型均内联 CSS/JS，使用假数据，不加载真实视频、客户信息、生产地址或外部依赖；顶部固定标注原型用途。
7. 完成桌面、窄屏、键盘焦点、加载/空态/错误切换和 `prefers-reduced-motion` 检查，提交人工评审；产品确认前不把任务标为 `DONE`。

## 不可变约束

- 阈值 / 数值边界：默认 16 路、单站点上限 128 路；静默最长 4 小时；原型不得暗示 128 路同时播放主码流。
- 判定式 / 状态转换：事件事实不可被处置改写；Alert 的首次投递、送达、看到、ack 和升级必须分开展示；检测区域版本与告警规则版本是不同对象；规则正式发布与试运行必须可区分，保存区域不得自动发布规则。
- 安全边界：不得展示摄像头密码、完整 RTSP/ONVIF 地址、token、真实客户/未成年人数据或人脸入口；破坏性动作须确认。
- 既有契约：原型不修改事件 v0.1、API、路由和生产技术栈，不作为生产实现代码。

## 验收要点

- 任务相关验证：两个 HTML 可本地打开、无外部依赖；关键按钮和状态切换可用；Sense 一级导航无“区域规则”，摄像头详情可编辑检测区域；Bell 可选择摄像头/区域并演示试运行与正式发布；双向深链保留上下文；运行 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`。

### 2026-08-04 产品评审修订

- 项目负责人指出 Sense 的区域规则没有融合到摄像头模块。复核 US-001/US-002 与 US-005 的角色和任务后，确认原型把“摄像头空间几何”和“业务告警规则”混为同一一级模块，且让微服务边界影响了用户操作路径。
- 采纳“领域分离、体验连续”的产品方案：Sense 摄像头详情维护检测区域与校准状态；Bell 维护业务规则、试运行和正式发布；通过携带摄像头/区域上下文的深链连接两个原型。
- `ui-ux-pro-max` 的导航层级、渐进披露、深链与状态保持原则用于本轮修订；默认 16 路从摄像头详情进入，128 路仍通过设备列表的筛选、分页与区域状态列治理，不恢复独立的一级区域编辑入口。

### 2026-08-04 修订后自测

- 标准库 HTML 审计通过：Sense 69 个唯一 `id`、40 个有名称按钮、16 个有标签控件；Bell 67 个唯一 `id`、50 个有名称按钮、21 个有标签控件；两页均无外部 HTTP 资源。专项断言确认 Sense 不再存在一级 `zones` 页面、规则发布按钮或试运行开关。
- Node.js 对两个内联脚本执行语法编译检查通过。Edge Headless/CDP 在 1440×900 与 375×812 验证摄像头详情、坐标绘制、区域保存、画面参数变化后待校准、Sense→Bell 深链、Bell 规则草稿、Bell→Sense 返回链和正式发布确认；页面无横向溢出，控制台 0 error，运行时 0 exception。
- 浏览器测试首次发现 Sense 移动端区域画布受 `min-height + aspect-ratio` 影响发生横向溢出，并发现条件上下文条的 `hidden` 被组件 `display` 覆盖；两项均已修复并重新通过桌面/移动截图人工检查。临时 QA 截图未写入仓库。
- `./init.ps1` 通过：上下文校验、16 个治理单测与完整治理检查均成功；`git diff --check` 通过。任务继续保持 `DOING`，等待项目负责人确认修订后的信息架构与工作流。