yovision/docs/tasks/T-004.md

---
id: T-004
title: 设计 Sense 与 Bell 交互原型
phase: 0
deps: [T-002]
status: DONE
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
  - docs/raw/09-Sense原型评审-IX草稿.md
  - docs/raw/11-Sense原型-第二轮缺口.md
  - docs/raw/12-Sense原型-待办清单.md
  - docs/raw/14-Bell原型评审.md
  - docs/routes.md
  - docs/08-interaction-checklist.md
  - docs/07-user-stories.md
  - docs/02-requirements.md
  - docs/04-architecture.md
  - docs/raw/02-需求分析.md
  - docs/raw/03-通用场景应用方案.md
  - docs/raw/08-三系统职责划分.md
---

## 问题 / 背景

Sense 与 Bell 尚无可供产品确认的页面结构。生产 UI 开工前，需要用两个零构建依赖的单文件 HTML 原型枚举导航、控件、主要状态与高频工作流，避免直接从实现代码猜交互。Sense 可参考 MiBeeNvr 的监控、摄像头与仪表盘信息架构，但必须补齐 YoVision 的设备健康、分片/期望态、批量开通和区域/警戒线编辑；Bell 必须体现事件与 Alert 分离、ack、升级链、证据、误报和权限边界。

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

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

- 用户故事：Sense 关联 US-001、US-002、US-008、US-009，并为 US-005 提供视频设备空间配置；Bell 关联 US-003～US-006、US-010～US-013，并拥有 US-005 的业务规则工作流及 Tenant/Site/Area/RBAC/配额/全局审计真相。
- 交互清单：Sense 关联 IX-001～IX-004、IX-014～IX-020，并提供 IX-010 所需的区域/警戒线几何；Bell 关联 IX-005～IX-013、IX-016、IX-020～IX-023，负责规则继承/试运行/发布/回滚、联系人/排班/升级策略、站点与 Area 策略、值班交接、验收报表和全局审计。
- 相关页面 / 路由：原型阶段为 `docs/design/sense/index.html` 与 `docs/design/bell/index.html`；同步补充 `docs/routes.md` 的候选页面职责，但不冻结或实现生产 URL。

## 方案

1. 使用统一的 YoVision 深色安防控制台设计系统，Sense 与 Bell 保持品牌、状态色、控件和导航规律一致。
2. Sense 制作为单页可交互工作台：总览、监控墙、设备、接入任务和运维中心，移动端也固定为这 5 个入口；不设置一级“区域规则”或全局管理页。运维中心聚合对账、分片、边缘/隧道、运维告警和系统状态。统一设备台账使用 `modality + capabilities` 决定详情页和操作，M1～M5 完整展示视频设备，非视频设备在 M6 前明确显示 `adapter_not_ready`，不得虚构遥测。
3. 视频设备在“画面与检测区域”页签完成多边形、方向警戒线、显式完成、方向反转、逐点编辑、会话草稿恢复、乐观并发冲突和待校准反馈；Sense 只保存空间几何并只读显示关联规则，不提供业务规则绑定、时段、持续时间、试运行或正式发布。
4. Bell 制作为单页可交互值班台和统一管理端：通道的已发出/已送达/已看到与 Alert ack 分开，Event↔Alert 可双向导航；并发 ack 显示真实处置人，班次交接不暂停升级链；规则编辑必须选择摄像头与检测区域版本，并负责继承、时段、持续时间、试运行、发布和以新版本完成回滚；Bell 同时管理 Site/Area/配额/`capture_policy`，策略与已有成像设备冲突时必须显式迁移或取消。
5. Sense 摄像头详情与 Bell 规则草稿通过可演示的相对深链互相进入，携带摄像头/区域上下文；原型可以跨文件，但生产产品不得要求用户重新查找同一摄像头或丢失未完成草稿。
6. 两个原型均内联 CSS/JS，使用假数据，不加载真实视频、客户信息、生产地址或外部依赖；顶部固定标注原型用途。
7. 添加设备时先选择类型，依据能力渐进展示字段；区域的 `capture_policy` 负责隐私准入，视频设备在“仅非成像设备”区域中的新增或启用必须被阻止，策略不可用时对新写入失败关闭。
8. 全局头部展示租户、站点、账号和角色；只读角色隐藏写操作，深链越权不泄露资源是否存在。Sense 设备日志带租户/站点/设备条件跳到 Bell 全局审计并可返回。
9. 完成桌面、窄屏、横屏、键盘焦点、加载/空态/错误/依赖降级切换和 `prefers-reduced-motion` 检查，提交人工评审；产品确认前不把任务标为 `DONE`。
10. Bell 事件与审计列表必须分页；规则验收报表按规则版本和冻结样本窗显示召回率与每路每天误报数，不提供跨场景统一准确率；移动端底部主导航保持 5 项，通过顶部“管理”入口访问 Site/Area 与审计。
11. Bell 一级“升级链”内部统一设计升级策略、值班与排班、联系人和通道三个二级模块：共享人员/值班组/已验证通道主数据但分对象维护；升级步骤引用人员/组/排班类型化目标，排班支持时区、周轮换、生效日期、临时替班、冲突检查、解析预览、版本发布和审计，投递保留解析快照。

## 不可变约束

- 阈值 / 数值边界：默认 16 路视频、单站点视频上限 128 路；非视频设备不占视频路数；单媒体分片初始配置建议 `max_streams=32`、当前示例承载 16、最多 4 个分片，最终以压测为准；静默最长 4 小时；原型不得暗示 128 路同时播放主码流。
- 判定式 / 状态转换：事件事实不可被处置改写；Alert 的首次投递、送达、看到、ack 和升级必须分开展示；检测区域版本与告警规则版本是不同对象；规则正式发布与试运行必须可区分，保存区域不得自动发布规则。
- 安全边界：不得展示摄像头密码、完整 RTSP/ONVIF 地址、token、真实客户/未成年人数据或人脸入口；破坏性动作须确认。
- 既有契约：原型不修改事件 v0.1、API、schema、生产路由实现和生产技术栈；仅补充候选路由职责，不作为生产实现代码。

## 验收要点

- 任务相关验证：两个 HTML 可本地打开、无外部依赖；关键按钮和状态切换可用；Sense 一级导航固定 5 项且无“区域规则”，设备列表可按类型/生命周期筛选与分页，视频详情可编辑检测区域，非视频适配器未交付时不伪装在线；运维中心覆盖对账/分片/边缘/运维告警/系统状态；Bell 可演示投递事实、Event↔Alert、并发 ack、交接班、事件/审计分页、试运行、正式发布、新版本回滚、验收报表、移动端管理入口、Site/Area 策略冲突，以及升级策略/排班/联系人二级模块、动态目标解析、排班发布/替班/冲突和投递快照；Sense↔Bell 规则深链保留 `camera + zone + return_to`，审计深链保留 `tenant + site + device + return_to` 且只按文本渲染参数；运行 HTML 结构检查、`git diff --check` 与 `./init.ps1`。
- 完整门禁：本任务不修改 schema/API 或生产路由实现，因此不触发契约实现门禁；候选路由职责已随 IX 更新。若实现范围变化则另立任务。
- 人工 / 设备验收：必需。项目负责人分别打开 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-04 人工验收通过与任务完成

- 项目负责人确认 Sense 与 Bell 原型均可接受，人工验收门禁通过；确认范围包括最终页面信息架构、控件集合、主要工作流，以及 Bell 最新的“升级策略 / 值班与排班 / 联系人和通道”分对象设计。
- 两份原型的任务相关自动化验证已在前述执行记录中完成：HTML/脚本静态检查、桌面与窄屏浏览器交互、无横向溢出、运行时无异常、`git diff --check` 与 `./init.ps1` 均通过。
- T-004 状态更新为 `DONE`。本次确认冻结原型阶段的产品方向；后续生产实现、API/schema 契约和高级排班能力仍须另立任务，不由本任务隐含扩展。

### 2026-08-04 联系人、排班与升级策略产品裁决

- 采纳“一次设计到位”的方向，并将“同源”修正为“共享主数据、分对象建模”：Contact/Team 管身份和已验证通道，OnCallSchedule/Version/Exception 管时区、轮换和替班，EscalationStep 使用人员/组/排班类型化目标；DeliveryAttempt 固化实际收件人、通道与排班版本快照。
- 正式需求、架构、US-005/US-013、IX-012/IX-023、候选路由和 `raw/14` 已同步。交接班继续只转移进行中 Alert，未来替班必须形成排班草稿并发布新版本；高级自动排班、外部日历、工时合规和自助换班后置。
- Bell 保留一级“升级链”，内部新增“升级策略 / 值班与排班 / 联系人和通道”三个二级模块。策略可切换 `person / team / on_call_schedule` 并预览解析结果；排班覆盖 Site 时区、周轮换、覆盖率、空档/重叠阻断、临时替班、v13 发布与版本审计；联系人表单不含班次/轮换字段，通道需要验证且被引用时不可直接删除。
- Node.js 内联脚本、167 个唯一 ID、114 个按钮可访问名、全部表单标签、外部依赖和危险 DOM API 检查通过。Edge/CDP 在 1440×900、375×812、812×375 验证动态目标、解析快照、排班冲突、替班草稿、版本发布、联系人边界、交接边界和二级模块深链：页面级无横向溢出，移动端二级按钮不小于 44px，运行时 0 exception；临时 QA 脚本未写入仓库。
- 自动化验收完成后 T-004 仍保持 `DOING`；需项目负责人打开 Bell 原型人工确认升级链信息架构和排班边界，确认前不合并 PR、不标记 `DONE`。

### 2026-08-04 Bell 原型评审复核与修复

- 将 Claude 评审复核为最终裁决并保存到 `raw/14`：采纳投递状态、Event↔Alert、交接班、分页、回滚和验收报表；纠正 Area 归属、A-2、并发 ack 现状、弱网失败态和重启 UI 建议；额外识别移动端管理入口与审计深链 DOM 注入。
- Bell 桌面侧栏分为“值班与业务”和“管理”，移动端底部导航继续固定 5 项并增加顶部“管理”菜单。投递时间线分开展示已发出、已送达、已看到、无回执、通道不支持、可重试与最终失败，Alert ack 继续独立。
- Alert 详情与 Event 详情支持双向打开并展示聚合/未触发原因；补齐服务端首个成功者语义的并发 ack 演示、值班交接、事件/审计分页、会话过期、规则版本冲突、不可变新版本回滚和按规则版本的验收效果表。
- 审计深链不再把 `device` 查询参数拼入 HTML，改为 `textContent` 与 DOM 节点构造；恶意 `<img onerror>` 参数专项验证未创建节点、未执行脚本且保持安全文本显示。本轮不采纳 A-2 数据库视图，不修改 API/schema，也不在正常值班时间线展示内部服务重启。
- Node.js 内联脚本语法、124 个唯一 ID、按钮可访问名、外部依赖和危险 DOM API 静态检查通过。Edge/CDP 在 1440×900、375×812、812×375 验证投递事实、双向关系、并发 ack、交接、分页、规则冲突/回滚、验收报表、会话过期、移动管理与深链注入：页面级无横向溢出，移动导航与管理入口不小于 44px，运行时 0 exception；桌面值班台和窄屏管理页已目检，临时 QA 脚本未写入仓库。
- 自动化验收完成后任务仍保持 `DOING`；项目负责人必须打开 Bell 原型确认信息架构、投递语义和交接/回滚流程，确认前不合并 PR、不标记 `DONE`。

### 2026-08-04 第二轮缺口复核与最终实现

- 复核 `raw/11`、`raw/12` 后保留对账、能力探测、设备生命周期、RBAC、写入降级、边缘隧道与运维告警等真实缺口；纠正“原型无分页”“分片 8 / 32”“雷达已有真实能力”“T-004 只允许 3 个写路径”等过期事实，并把 M4/M6 能力标为后续阶段而非本轮失败。
- 产品 IA 冻结为 Sense 5 个一级入口：运行总览、实时监控、设备、接入任务、运维中心。Tenant/Site/Area/RBAC/配额/全局审计归 Bell；Sense 仅呈现当前管理上下文并消费版本化配额/Area 策略投影。该决定已同步 US-009/US-010、IX-019/IX-020、正式需求、架构及三份原始分析文档。
- Sense 按显著改版规则整页重新生成：补齐待激活、认证失败、写入型凭据更新、能力探测来源/时间/生效差异、`adapter_not_ready`、逐项任务结果、暂停推理 reader/upstream 结果、对账差异/退避/孤儿安全闸、16/32 分片注释、边缘隧道/补传、独立运维告警、配额/策略不可用时只禁用相关写入，以及只读/越权状态。
- Bell 增加 Site/Area 管理、配额/策略投影状态与策略冲突显式迁移/取消；审计页能消费 Sense 的 `tenant + site + device + return_to` 上下文并返回设备详情。跨系统审计实现约定为 Sense 本地事务 outbox + 幂等 relay，但具体 API/签名/重放/留存仍需独立契约任务，本任务不修改 `docs/api/`。
- Node.js 内联脚本语法、唯一 ID、表单标签、按钮可访问名、Tab 契约和外部资源静态检查通过。Edge Headless/CDP 在 1440×900、375×812、812×375 验证上述关键流程：两页页面级无横向溢出，移动端可见主要控件不小于 44×44px，控制台与运行时均 0 exception；运维中心与 Bell Site/Area 页面截图已人工目检，临时 QA 文件未写入仓库。
- `./init.ps1` 通过：上下文/治理检查、16 个治理单测全部成功；`git diff --check` 通过。自动化验收已完成，任务继续保持 `DOING`，等待项目负责人打开原型进行必需人工确认；确认前不合并 PR。

### 2026-08-04 Claude 评审续修立项

- 项目负责人提供 `docs/raw/09-Sense原型评审-IX草稿.md` 并确认按复核后的最终建议继续修改。复核结论为：设备模态、停用收敛、隐私准入、几何编辑、草稿恢复与无障碍问题方向成立，但分片容量来源、页内草稿丢失和双向深链现状等证据需纠正。
- T-004 继续保持唯一活跃任务；dispatcher 已在 Issue #6 发布 `CLAIM RENEWAL`，将本轮涉及的评审稿、US/IX、需求/架构与 Sense/Bell 原型加入 `write_paths`。当前没有其他活跃任务占用这些路径。
- 本轮按 `docs/design/README.md` 的显著改版规则重新生成 Sense 页面结构，不恢复一级“区域规则”；一级入口改为“设备”，详情按 `modality + capabilities` 渐进展示，视频设备仍在详情中维护画面检测区域，Bell 继续独占业务规则与发布。

### 2026-08-04 Claude 评审续修实现与自测

- 将评审结论回写到需求、架构、用户故事和 IX：设备以 `modality + capabilities` 建模，隐私策略归属 Area；M2 冻结通用信息架构与视频准入，M6 再实现非视频适配器。明确幂等只消除重复副作用，每次请求仍写审计；暂停推理、停用接入和断开会话为三个不同动作。
- Sense 已重构为通用设备台账：17 台示例设备、5 条/页、类型/状态/搜索筛选，视频配额单独显示为 16 / 128；雷达详情展示遥测能力和通用健康且隐藏视频区域页签。添加设备对话框按能力切换字段，并验证视频设备会被“仅非成像设备”区域阻止、雷达仍可接入。
- 区域编辑补齐显式完成、警戒线箭头与方向反转、逐点键盘编辑/删除、双击防重复顶点、`sessionStorage` 会话草稿恢复、版本冲突阻止覆盖；工具切换会先确认，页内导航不清除草稿。Sense 与 Bell 双向链接统一携带 `camera + zone + return_to`，Bell 会读入并保留区域上下文。
- Node.js 内联脚本编译、唯一 ID/标签目标/外部资源静态审计均通过；关键前景/背景组合对比度为 5.93～16.43:1。Edge Headless/CDP 在 1440×900、375×812 与 812×375 实测设备筛选、雷达详情、隐私准入、区域方向与冲突、Tab 方向键、停止操作收敛和双向深链；页面级无横向溢出、移动端无低于 44px 的可见主要控件、运行时 0 exception。截图已人工检查且未写入仓库。
- 任务仍保持 `DOING`：需项目负责人打开两份原型确认最终信息架构与主要工作流，确认前不合并 PR、不标记 `DONE`。

### 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`，等待项目负责人确认修订后的信息架构与工作流。