# Silver Pose V1 UI/UX 原型规格

## 目标与边界

本规格定义一个用于客户演示的 Windows 桌面端视觉原型。它展示 V1 单路海康 RTSP 监控的操作闭环：人员姿态可见、正常状态可读、确认摔倒后有红色画面、一次性声音/弹窗提示和截图证据。

- 目标框架：Windows 上的 PyQt5；HTML 仅作离线交互视觉原型，不替代生产 UI。
- 默认窗口：1280 × 800 epx；支持最小 960 × 640、Windows Snap 宽度和 125%/150% 缩放。
- 语言：简体中文；数据均为虚构演示数据，不包含 RTSP 地址、账号、客户图像或真实事件。
- 范围：单路摄像头、实时监控、确认摔倒告警、连接异常提示、最近事件和非敏感设置的交互原型。
- 不在范围：真实 RTSP、模型推理、音频播放、文件系统写入、真实配置持久化、云端通知及历史事件库。

## 信息架构与窗口模型

使用一个主窗口和一个只在首次确认事件出现时显示的警报弹窗。主窗口以顶部水平双 Tab 在实时监控与设置之间切换；默认进入实时监控。当前只有两个固定目的地，顶部 Tab 比左侧导航更节省视频的横向空间。

```text
主窗口
├── 标题与来源栏：产品名、摄像头名称、连接状态、当前时间
├── 顶部 Tab：实时监控 / 设置
├── 实时监控：演示状态切换、视频占位、人员 ID、骨架、事件证据和最近事件
└── 设置：来源就绪状态、模型只读信息、事件参数、重连参数和配置应用状态

确认摔倒弹窗
├── 明确的“确认摔倒”标题和人员 ID
├── 确认时间、确认延迟、截图结果
└── “我已知晓”按钮；不产生新的事件或改变状态机
```

## 布局与响应式行为

大于等于 1008 epx 时，内容采用 8:4 双栏：左侧为固定 16:9 比例的实时画面，右侧为状态和证据卡；最近事件横跨底部。641–1007 epx 时，右栏缩窄并保留画面优先级；小于等于 640 epx 时，右栏移至画面下方，顶部操作换行，保证状态与主操作仍可见。

- 顶部栏高度 56 epx；使用系统标题栏相近的紧凑密度。
- Tab 位于标题栏下方，活动 Tab 同时用底边、文字和 aria-selected 表示；键盘左右方向键可在两个 Tab 间移动。
- 内容间距使用 4 epx 网格，常用间距为 8、12、16、24 epx。
- 状态切换按钮显式带文字，普通鼠标、触摸、键盘均可触发。
- 确认状态在画面上放置红色边框、文字标签和事件编号，不仅改变颜色。
- 连接异常不显示摔倒标签；画面保留最后一帧占位并覆盖“正在重连”的明确文字。

## 控件与命令

| 目的 | 原型控件 | 最终 PyQt5 对应 | 行为 |
| --- | --- | --- | --- |
| 切换展示状态 | 三个有文字的按钮 | `QPushButton` 组 | 鼠标、Enter/Space、数字键 1/2/3 切换。 |
| 启动/停止监控 | 主操作按钮 | `QPushButton` | 原型只变更按钮文案；正式版调用视频源线程。 |
| 查看截图位置 | 普通按钮 | `QPushButton` | 原型显示路径提示；正式版打开事件目录。 |
| 关闭告警弹窗 | “我已知晓” | `QDialogButtonBox` / `QPushButton` | 只关闭视图，不清除事件或停止报警记录。 |
| 最近事件 | 只读列表 | `QListView` 或轻量卡片 | 正式版读取 JSONL 摘要，不作为数据库表格。 |

## Tab 与设置控件

| 目的 | 原型控件 | 最终 PyQt5 对应 | 行为 |
| --- | --- | --- | --- |
| 切换顶层视图 | 两个顶部 Tab | QTabWidget 或 QToolButton 加 QStackedWidget | 实时监控默认显示；设置不抢占视频宽度。 |
| 编辑设置草稿 | 数字输入与只读状态卡 | QDoubleSpinBox、QSpinBox、QLabel | 修改立即标记为编辑中，不影响运行配置。 |
| 保存并用于下次启动 | 主操作按钮 | QPushButton | 校验通过后显示已保存待下次启动；不热改监控中的阈值。 |

## 视觉令牌

采用浅色 Windows 桌面主题：浅灰蓝色作为页面底色，白色作为卡片、工具栏和设置表面。最终 PyQt5 应将这些令牌集中到 QSS/主题资源，不在控件中散落硬编码色值。红色是确认摔倒的专属语义色，不得用于普通按钮、截图保存失败、设置校验或装饰。

| 语义 | 值 | 用途 |
| --- | --- | --- |
| `surface.base` | `#EAF1F8` | 浅灰蓝页面背景 |
| `surface.layer` | `#FFFFFF` | 白色卡片、工具栏和设置表面 |
| `surface.overlay` | `#F6F9FC` | 轻量浮层与视频信息层 |
| `text.primary` | `#1E293B` | 标题与正文 |
| `text.secondary` | `#52657C` | 辅助说明 |
| `stroke.control` | `#C8D4E3` | 控件、卡片和分隔线 |
| `status.success` | `#15803D` | 在线 / NORMAL |
| `status.caution` | `#B45309` | SUSPECT / 需要操作员注意 |
| `status.critical` | `#C62828` | 仅 CONFIRMED 摔倒事件 |
| `status.offline` | `#64748B` | 断流 / 不可用 |
| `accent.default` | `#2563EB` | 非危险主操作与键盘焦点 |

字体采用 `Segoe UI Variable`、`Microsoft YaHei UI`、sans-serif 回退；数字采用等宽特性。圆角为 8 epx，焦点描边为 2 epx 蓝色，不使用装饰性动效或 emoji 图标。

## 状态与交互矩阵

| 状态 | 画面 | 右栏 | 弹窗与声音 | 用户下一步 |
| --- | --- | --- | --- | --- |
| 正常监控 | 浅色界面中的视频占位、绿色骨架、`NORMAL` 标签 | 来源在线、人员 ID、FPS、无待处理事件 | 无 | 持续观察或切换展示状态。 |
| 确认摔倒 | 红色外框、红色骨架、`CONFIRMED` 与事件 ID | 显示证据、确认延迟、声音已触发、截图已保存 | 首次进入时显示一次弹窗；之后不重复 | 知晓警报、查看截图位置、继续监控。 |
| 连接异常 | 灰色画面与“正在重连”说明 | 显示重试计时与“不触发摔倒报警” | 无 | 等待或停止监控；恢复后回到正常。 |

切换展示状态不代表真正的算法判定；原型的页内说明必须明确“演示数据”。确认状态下关闭弹窗后，红色状态和事件证据仍保留，模拟事件状态的可追溯性。

## 无障碍与输入

- 顶部 Tab 使用标准 tablist、tab 和 tabpanel 语义；左右方向键切换顶部 Tab，切换后焦点停在新 Tab。
- Tab 顺序：顶部 Tab → 监控状态切换 → 启动/停止 → 查看截图 → 最近事件；设置 Tab 中按视觉顺序经过来源、模型、事件参数、保存操作。
- 所有状态同时包含颜色、图标形状和中文文字；状态文字对比度不低于 4.5:1。
- `1`、`2`、`3` 是原型专用演示快捷键；Escape 只关闭可关闭的弹窗。
- 状态变化通过 `aria-live="polite"` 说明；弹窗打开时焦点置于“我已知晓”，关闭后返回切换按钮。
- 按钮最小高度 40 epx；支持 200% 缩放下文字换行与内容垂直滚动。

## 实现与验收

原型输出为 `docs/ui/silver-pose-v1-prototype.html`，单文件、无网络依赖。CSS 令牌、示意画面 SVG 和 JavaScript 状态数据均内联；JavaScript 只负责状态切换、弹窗和快捷键，不能伪装成视频或模型推理。

验收条件：

1. 双击 HTML 可离线打开；默认显示正常监控。
2. 点击“确认摔倒”或按 `2` 后，显示红色画面、告警证据和一次弹窗；关闭弹窗后不丢失事件证据。
3. 点击“连接异常”或按 `3` 后，仅显示重连状态，且明确说明未触发报警。
4. 宽屏、约 900 epx 宽和约 600 epx 宽均不出现横向溢出或无法触达的主操作。
5. 仅用键盘可切换三种状态、关闭弹窗并看到可见焦点。
6. 点击设置 Tab 或按左右方向键可切换视图；设置页不显示来源地址或密码，编辑参数后显示已修改，保存后显示下次启动生效。
7. 默认视觉主题为浅灰蓝底和白色卡片；正常、疑似和连接异常均不使用红色，红色只在确认摔倒状态、其事件弹窗和事件证据上出现。