docs: define light Windows UI theme
This commit is contained in:
@@ -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.
|
||||
|
||||
## 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.
|
||||
- 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.
|
||||
|
||||
@@ -58,20 +58,21 @@
|
||||
|
||||
## 视觉令牌
|
||||
|
||||
采用克制的深色控制台主题,以视频画面和告警信息为主。最终 PyQt5 应将这些令牌集中到 QSS/主题资源,不在控件中散落硬编码色值。
|
||||
采用浅色 Windows 桌面主题:浅灰蓝色作为页面底色,白色作为卡片、工具栏和设置表面。最终 PyQt5 应将这些令牌集中到 QSS/主题资源,不在控件中散落硬编码色值。红色是确认摔倒的专属语义色,不得用于普通按钮、截图保存失败、设置校验或装饰。
|
||||
|
||||
| 语义 | 值 | 用途 |
|
||||
| --- | --- | --- |
|
||||
| `surface.base` | `#0B1220` | 窗口背景 |
|
||||
| `surface.layer` | `#131F32` | 卡片与工具栏 |
|
||||
| `surface.overlay` | `#19283D` | 弹窗与画面信息层 |
|
||||
| `text.primary` | `#F5F8FC` | 标题与正文 |
|
||||
| `text.secondary` | `#A9B8CC` | 辅助说明 |
|
||||
| `status.success` | `#49D17D` | 在线 / NORMAL |
|
||||
| `status.caution` | `#F4C95D` | SUSPECT |
|
||||
| `status.critical` | `#FF5C6C` | CONFIRMED / 截图失败 |
|
||||
| `status.offline` | `#99A5B6` | 断流 / 不可用 |
|
||||
| `accent.default` | `#70A5FF` | 非危险主操作与键盘焦点 |
|
||||
| `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 图标。
|
||||
|
||||
@@ -79,7 +80,7 @@
|
||||
|
||||
| 状态 | 画面 | 右栏 | 弹窗与声音 | 用户下一步 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 正常监控 | 深色视频占位、绿色骨架、`NORMAL` 标签 | 来源在线、人员 ID、FPS、无待处理事件 | 无 | 持续观察或切换展示状态。 |
|
||||
| 正常监控 | 浅色界面中的视频占位、绿色骨架、`NORMAL` 标签 | 来源在线、人员 ID、FPS、无待处理事件 | 无 | 持续观察或切换展示状态。 |
|
||||
| 确认摔倒 | 红色外框、红色骨架、`CONFIRMED` 与事件 ID | 显示证据、确认延迟、声音已触发、截图已保存 | 首次进入时显示一次弹窗;之后不重复 | 知晓警报、查看截图位置、继续监控。 |
|
||||
| 连接异常 | 灰色画面与“正在重连”说明 | 显示重试计时与“不触发摔倒报警” | 无 | 等待或停止监控;恢复后回到正常。 |
|
||||
|
||||
@@ -90,7 +91,6 @@
|
||||
- 顶部 Tab 使用标准 tablist、tab 和 tabpanel 语义;左右方向键切换顶部 Tab,切换后焦点停在新 Tab。
|
||||
- Tab 顺序:顶部 Tab → 监控状态切换 → 启动/停止 → 查看截图 → 最近事件;设置 Tab 中按视觉顺序经过来源、模型、事件参数、保存操作。
|
||||
- 所有状态同时包含颜色、图标形状和中文文字;状态文字对比度不低于 4.5:1。
|
||||
- Tab 顺序:状态切换 → 启动/停止 → 查看截图 → 最近事件 → 弹窗确认按钮。
|
||||
- `1`、`2`、`3` 是原型专用演示快捷键;Escape 只关闭可关闭的弹窗。
|
||||
- 状态变化通过 `aria-live="polite"` 说明;弹窗打开时焦点置于“我已知晓”,关闭后返回切换按钮。
|
||||
- 按钮最小高度 40 epx;支持 200% 缩放下文字换行与内容垂直滚动。
|
||||
@@ -107,3 +107,4 @@
|
||||
4. 宽屏、约 900 epx 宽和约 600 epx 宽均不出现横向溢出或无法触达的主操作。
|
||||
5. 仅用键盘可切换三种状态、关闭弹窗并看到可见焦点。
|
||||
6. 点击设置 Tab 或按左右方向键可切换视图;设置页不显示来源地址或密码,编辑参数后显示已修改,保存后显示下次启动生效。
|
||||
7. 默认视觉主题为浅灰蓝底和白色卡片;正常、疑似和连接异常均不使用红色,红色只在确认摔倒状态、其事件弹窗和事件证据上出现。
|
||||
|
||||
Reference in New Issue
Block a user