docs: define light Windows UI theme

This commit is contained in:
ila
2026-07-20 22:57:37 +08:00
parent 46d021eba3
commit 4754ce740d
6 changed files with 40 additions and 14 deletions
+6
View File
@@ -26,6 +26,12 @@
- 只提交 `config.example.json`;`config.local.json`、事件截图、ONNX/模型导出物和客户录像须由 `.gitignore` 排除。 - 只提交 `config.example.json`;`config.local.json`、事件截图、ONNX/模型导出物和客户录像须由 `.gitignore` 排除。
- 保存截图前只保留演示所需的时间、ID、状态和画面,不在文件名中写个人身份信息。 - 保存截图前只保留演示所需的时间、ID、状态和画面,不在文件名中写个人身份信息。
## UI 视觉规则
- V1 默认使用浅色 Windows 风格:浅灰蓝页面背景、白色卡片和语义化边框;不得沿用深色控制台作为默认主题。
- 红色只表示 CONFIRMED 摔倒事件及其关联弹窗和事件证据。普通操作、保存成功、设置校验、截图错误和连接异常不得使用红色。
- UI 颜色必须通过集中 QSS 主题令牌定义,并同时提供文字、图标或形状语义;不得以颜色作为唯一状态信息。
## V1 / V2 迁移规则 ## V1 / V2 迁移规则
- V2 开始前,V1 必须有通过的正反例录像回归与现场 RTSP 验收记录。 - V2 开始前,V1 必须有通过的正反例录像回归与现场 RTSP 验收记录。
+1 -1
View File
@@ -10,7 +10,7 @@
- 旧生产基线:`demo/main.py`、`demo/fall_detection_gui.py`、`demo/detect_fall.py`、`demo/best.pt`。 - 旧生产基线:`demo/main.py`、`demo/fall_detection_gui.py`、`demo/detect_fall.py`、`demo/best.pt`。
- V1 代码:`v1/` 目录存在但尚无实现。 - V1 代码:`v1/` 目录存在但尚无实现。
- V2 代码:`v2/` 目录存在但尚无实现。 - V2 代码:`v2/` 目录存在但尚无实现。
- 非代码设计工件:docs/ui/silver-pose-ui-ux-spec.md、docs/ui/2026-07-20-html-prototype-plan.md 与 docs/ui/silver-pose-v1-prototype.html 已建立。HTML 使用顶部双 Tab:实时监控演示正常、确认摔倒和连接异常三种状态;设置页演示安全来源状态、模型只读信息和下次启动生效的配置草稿。画面、事件和时间均为模拟数据,不连接真实摄像头、模型或网络,也不改变 Phase 1 任务顺序。 - 非代码设计工件:docs/ui/silver-pose-ui-ux-spec.md、docs/ui/2026-07-20-html-prototype-plan.md 与 docs/ui/silver-pose-v1-prototype.html 已建立。UI 文档已将正式默认主题定为浅灰蓝底、白色卡片,红色只表示确认摔倒。当前 HTML 仍为历史深色版本,等待单独授权后再按文档重绘;其顶部双 Tab、设置草稿与状态交互仍可作为结构参考。画面、事件和时间均为模拟数据,不连接真实摄像头、模型或网络,也不改变 Phase 1 任务顺序。
- 测试:暂无 pytest 测试;`python -m compileall -q demo` 已通过。 - 测试:暂无 pytest 测试;`python -m compileall -q demo` 已通过。
- 模型:`demo/best.pt` 可加载为 YOLO Pose,类别 `person`,`kpt_shape=[17, 3]`;与 `D:\PythonP\fall_detection\best.pt` 哈希一致。 - 模型:`demo/best.pt` 可加载为 YOLO Pose,类别 `person`,`kpt_shape=[17, 3]`;与 `D:\PythonP\fall_detection\best.pt` 哈希一致。
- 当前标准启动:`./init.ps1`。 - 当前标准启动:`./init.ps1`。
+6
View File
@@ -27,6 +27,12 @@
- 配置编辑分为编辑中、已保存待下次启动、正在监控已生效三种文字状态,不能只靠颜色区分。 - 配置编辑分为编辑中、已保存待下次启动、正在监控已生效三种文字状态,不能只靠颜色区分。
- 保存与应用操作只写入未跟踪的本地配置;当前运行的事件引擎继续使用开始监控时冻结的配置版本。 - 保存与应用操作只写入未跟踪的本地配置;当前运行的事件引擎继续使用开始监控时冻结的配置版本。
## 视觉主题
- V1 默认使用浅色 Windows 桌面主题:浅灰蓝底、白色卡片和低对比度分隔线;视频画面本身按真实内容显示,不强制深色遮罩。
- 红色只表示已确认的摔倒事件及其对应弹窗和证据,不用于普通主按钮、设置保存、连接异常或常规校验。
- NORMAL 使用绿色,SUSPECT 使用琥珀色,连接异常使用中性灰蓝;每种状态必须同时有文字和图标或形状提示。
## 实时监控视图 ## 实时监控视图
- 绿色:`NORMAL`。 - 绿色:`NORMAL`。
@@ -100,6 +100,10 @@ Expected: no whitespace errors and a commit containing only the prototype docume
The revised prototype has a horizontal tablist with monitoring and settings tabs. The settings panel shows only an environment-variable readiness state for the source, read-only model metadata, editable non-sensitive event and reconnect fields, a current running configuration version, a saved draft version, and save/reset controls. Editing marks the draft dirty; saving says the draft takes effect on the next monitoring start and cannot change the monitoring panel's running configuration version. The revised prototype has a horizontal tablist with monitoring and settings tabs. The settings panel shows only an environment-variable readiness state for the source, read-only model metadata, editable non-sensitive event and reconnect fields, a current running configuration version, a saved draft version, and save/reset controls. Editing marks the draft dirty; saving says the draft takes effect on the next monitoring start and cannot change the monitoring panel's running configuration version.
## Light theme revision
Use the approved light Windows palette from the UI specification: a pale blue-gray page background, white cards and toolbars, and semantic borders. Red is reserved exclusively for a confirmed fall and the associated dialog or event evidence. The existing dark HTML prototype must be recolored in a separate approved implementation task; it is not the visual source of truth after this revision.
- Spec coverage: Task 1 implements all specified views, dialog behavior, responsive breakpoints, keyboard paths, state text, offline limitation, and validation conditions. - Spec coverage: Task 1 implements all specified views, dialog behavior, responsive breakpoints, keyboard paths, state text, offline limitation, and validation conditions.
- Placeholder scan: no unresolved placeholder markers or file paths appear in this plan. - Placeholder scan: no unresolved placeholder markers or file paths appear in this plan.
- Consistency: the three controller state names are consistently `normal`, `confirmed`, and `offline`; the dialog and acknowledgement element IDs are fixed across layout and behavior. - Consistency: the three controller state names are consistently `normal`, `confirmed`, and `offline`; the dialog and acknowledgement element IDs are fixed across layout and behavior.
+14 -13
View File
@@ -58,20 +58,21 @@
## 视觉令牌 ## 视觉令牌
采用克制的深色控制台主题,以视频画面和告警信息为主。最终 PyQt5 应将这些令牌集中到 QSS/主题资源,不在控件中散落硬编码色值。 采用浅色 Windows 桌面主题:浅灰蓝色作为页面底色,白色作为卡片、工具栏和设置表面。最终 PyQt5 应将这些令牌集中到 QSS/主题资源,不在控件中散落硬编码色值。红色是确认摔倒的专属语义色,不得用于普通按钮、截图保存失败、设置校验或装饰。
| 语义 | 值 | 用途 | | 语义 | 值 | 用途 |
| --- | --- | --- | | --- | --- | --- |
| `surface.base` | `#0B1220` | 窗口背景 | | `surface.base` | `#EAF1F8` | 浅灰蓝页面背景 |
| `surface.layer` | `#131F32` | 卡片与工具栏 | | `surface.layer` | `#FFFFFF` | 白色卡片、工具栏和设置表面 |
| `surface.overlay` | `#19283D` | 弹窗与画面信息层 | | `surface.overlay` | `#F6F9FC` | 轻量浮层与视频信息层 |
| `text.primary` | `#F5F8FC` | 标题与正文 | | `text.primary` | `#1E293B` | 标题与正文 |
| `text.secondary` | `#A9B8CC` | 辅助说明 | | `text.secondary` | `#52657C` | 辅助说明 |
| `status.success` | `#49D17D` | 在线 / NORMAL | | `stroke.control` | `#C8D4E3` | 控件、卡片和分隔线 |
| `status.caution` | `#F4C95D` | SUSPECT | | `status.success` | `#15803D` | 在线 / NORMAL |
| `status.critical` | `#FF5C6C` | CONFIRMED / 截图失败 | | `status.caution` | `#B45309` | SUSPECT / 需要操作员注意 |
| `status.offline` | `#99A5B6` | 断流 / 不可用 | | `status.critical` | `#C62828` | 仅 CONFIRMED 摔倒事件 |
| `accent.default` | `#70A5FF` | 非危险主操作与键盘焦点 | | `status.offline` | `#64748B` | 断流 / 不可用 |
| `accent.default` | `#2563EB` | 非危险主操作与键盘焦点 |
字体采用 `Segoe UI Variable`、`Microsoft YaHei UI`、sans-serif 回退;数字采用等宽特性。圆角为 8 epx,焦点描边为 2 epx 蓝色,不使用装饰性动效或 emoji 图标。 字体采用 `Segoe UI Variable`、`Microsoft YaHei UI`、sans-serif 回退;数字采用等宽特性。圆角为 8 epx,焦点描边为 2 epx 蓝色,不使用装饰性动效或 emoji 图标。
@@ -79,7 +80,7 @@
| 状态 | 画面 | 右栏 | 弹窗与声音 | 用户下一步 | | 状态 | 画面 | 右栏 | 弹窗与声音 | 用户下一步 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| 正常监控 | 深色视频占位、绿色骨架、`NORMAL` 标签 | 来源在线、人员 ID、FPS、无待处理事件 | 无 | 持续观察或切换展示状态。 | | 正常监控 | 浅色界面中的视频占位、绿色骨架、`NORMAL` 标签 | 来源在线、人员 ID、FPS、无待处理事件 | 无 | 持续观察或切换展示状态。 |
| 确认摔倒 | 红色外框、红色骨架、`CONFIRMED` 与事件 ID | 显示证据、确认延迟、声音已触发、截图已保存 | 首次进入时显示一次弹窗;之后不重复 | 知晓警报、查看截图位置、继续监控。 | | 确认摔倒 | 红色外框、红色骨架、`CONFIRMED` 与事件 ID | 显示证据、确认延迟、声音已触发、截图已保存 | 首次进入时显示一次弹窗;之后不重复 | 知晓警报、查看截图位置、继续监控。 |
| 连接异常 | 灰色画面与“正在重连”说明 | 显示重试计时与“不触发摔倒报警” | 无 | 等待或停止监控;恢复后回到正常。 | | 连接异常 | 灰色画面与“正在重连”说明 | 显示重试计时与“不触发摔倒报警” | 无 | 等待或停止监控;恢复后回到正常。 |
@@ -90,7 +91,6 @@
- 顶部 Tab 使用标准 tablist、tab 和 tabpanel 语义;左右方向键切换顶部 Tab,切换后焦点停在新 Tab。 - 顶部 Tab 使用标准 tablist、tab 和 tabpanel 语义;左右方向键切换顶部 Tab,切换后焦点停在新 Tab。
- Tab 顺序:顶部 Tab → 监控状态切换 → 启动/停止 → 查看截图 → 最近事件;设置 Tab 中按视觉顺序经过来源、模型、事件参数、保存操作。 - Tab 顺序:顶部 Tab → 监控状态切换 → 启动/停止 → 查看截图 → 最近事件;设置 Tab 中按视觉顺序经过来源、模型、事件参数、保存操作。
- 所有状态同时包含颜色、图标形状和中文文字;状态文字对比度不低于 4.5:1。 - 所有状态同时包含颜色、图标形状和中文文字;状态文字对比度不低于 4.5:1。
- Tab 顺序:状态切换 → 启动/停止 → 查看截图 → 最近事件 → 弹窗确认按钮。
- `1`、`2`、`3` 是原型专用演示快捷键;Escape 只关闭可关闭的弹窗。 - `1`、`2`、`3` 是原型专用演示快捷键;Escape 只关闭可关闭的弹窗。
- 状态变化通过 `aria-live="polite"` 说明;弹窗打开时焦点置于“我已知晓”,关闭后返回切换按钮。 - 状态变化通过 `aria-live="polite"` 说明;弹窗打开时焦点置于“我已知晓”,关闭后返回切换按钮。
- 按钮最小高度 40 epx;支持 200% 缩放下文字换行与内容垂直滚动。 - 按钮最小高度 40 epx;支持 200% 缩放下文字换行与内容垂直滚动。
@@ -107,3 +107,4 @@
4. 宽屏、约 900 epx 宽和约 600 epx 宽均不出现横向溢出或无法触达的主操作。 4. 宽屏、约 900 epx 宽和约 600 epx 宽均不出现横向溢出或无法触达的主操作。
5. 仅用键盘可切换三种状态、关闭弹窗并看到可见焦点。 5. 仅用键盘可切换三种状态、关闭弹窗并看到可见焦点。
6. 点击设置 Tab 或按左右方向键可切换视图;设置页不显示来源地址或密码,编辑参数后显示已修改,保存后显示下次启动生效。 6. 点击设置 Tab 或按左右方向键可切换视图;设置页不显示来源地址或密码,编辑参数后显示已修改,保存后显示下次启动生效。
7. 默认视觉主题为浅灰蓝底和白色卡片;正常、疑似和连接异常均不使用红色,红色只在确认摔倒状态、其事件弹窗和事件证据上出现。
+9
View File
@@ -53,3 +53,12 @@
- 阻塞:无。设置页只模拟草稿编辑和保存反馈,不会写入本地配置,也不会热改监控中的运行配置。 - 阻塞:无。设置页只模拟草稿编辑和保存反馈,不会写入本地配置,也不会热改监控中的运行配置。
- 决策:V1 固定采用顶部双 Tab,而非左侧导航;两个静态目的地不会挤压实时视频。设置草稿在下一次开始监控时才成为新的运行配置,事件工件继续追溯实际运行版本。 - 决策:V1 固定采用顶部双 Tab,而非左侧导航;两个静态目的地不会挤压实时视频。设置草稿在下一次开始监控时才成为新的运行配置,事件工件继续追溯实际运行版本。
- 下一步:T-101;后续 T-201 按此交互和配置快照边界实现 PyQt 界面。 - 下一步:T-101;后续 T-201 按此交互和配置快照边界实现 PyQt 界面。
## 【2026-07-20】DESIGN 浅色 Windows 主题规范
- 状态:DONE
- 变更:更新 UI 规格、页面规则、编码规则和原型实施计划。正式默认主题设为浅灰蓝页面背景与白色卡片;红色只表示确认摔倒事件、对应弹窗和事件证据。正常、疑似、连接异常、保存与校验改用绿色、琥珀色、灰蓝或标准主色,并保留文字和图标提示。
- 验证:./init.ps1 通过;已核对 UI 规格、页面规则和编码规则中的主题语义一致。
- 阻塞:按本轮用户范围未修改 HTML。现有 HTML 为深色历史原型,不能作为正式色彩实现来源,需在后续单独重绘。
- 决策:后续 PyQt T-201 与任何新的 HTML 原型必须以浅色 Windows 主题规范为准,不得将红色用于非确认摔倒场景。
- 下一步:等待用户授权,将 docs/ui/silver-pose-v1-prototype.html 重绘为浅色主题。