docs: add settings tab to UI prototype
This commit is contained in:
@@ -7,20 +7,19 @@
|
||||
- 目标框架:Windows 上的 PyQt5;HTML 仅作离线交互视觉原型,不替代生产 UI。
|
||||
- 默认窗口:1280 × 800 epx;支持最小 960 × 640、Windows Snap 宽度和 125%/150% 缩放。
|
||||
- 语言:简体中文;数据均为虚构演示数据,不包含 RTSP 地址、账号、客户图像或真实事件。
|
||||
- 范围:单路摄像头、实时监控、确认摔倒告警、连接异常提示和最近事件。
|
||||
- 不在范围:真实 RTSP、模型推理、音频播放、文件系统写入、设置编辑、云端通知及历史事件库。
|
||||
- 范围:单路摄像头、实时监控、确认摔倒告警、连接异常提示、最近事件和非敏感设置的交互原型。
|
||||
- 不在范围:真实 RTSP、模型推理、音频播放、文件系统写入、真实配置持久化、云端通知及历史事件库。
|
||||
|
||||
## 信息架构与窗口模型
|
||||
|
||||
使用一个主窗口和一个只在首次确认事件出现时显示的警报弹窗。主窗口不使用多级导航:客户演示的主要任务是观看实时画面并理解事件证据,设置与历史管理不是此轮原型的重点。
|
||||
使用一个主窗口和一个只在首次确认事件出现时显示的警报弹窗。主窗口以顶部水平双 Tab 在实时监控与设置之间切换;默认进入实时监控。当前只有两个固定目的地,顶部 Tab 比左侧导航更节省视频的横向空间。
|
||||
|
||||
```text
|
||||
主窗口
|
||||
├── 标题与来源栏:产品名、摄像头名称、连接状态、当前时间
|
||||
├── 演示状态切换:正常监控 / 确认摔倒 / 连接异常
|
||||
├── 实时画面:视频占位、人员 ID、骨架、每人状态与 FPS
|
||||
├── 事件证据栏:状态说明、触发条件、报警副作用、截图路径
|
||||
└── 最近事件:最近一次事件、保存结果和操作入口
|
||||
├── 顶部 Tab:实时监控 / 设置
|
||||
├── 实时监控:演示状态切换、视频占位、人员 ID、骨架、事件证据和最近事件
|
||||
└── 设置:来源就绪状态、模型只读信息、事件参数、重连参数和配置应用状态
|
||||
|
||||
确认摔倒弹窗
|
||||
├── 明确的“确认摔倒”标题和人员 ID
|
||||
@@ -33,6 +32,7 @@
|
||||
大于等于 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。
|
||||
- 状态切换按钮显式带文字,普通鼠标、触摸、键盘均可触发。
|
||||
- 确认状态在画面上放置红色边框、文字标签和事件编号,不仅改变颜色。
|
||||
@@ -48,6 +48,14 @@
|
||||
| 关闭告警弹窗 | “我已知晓” | `QDialogButtonBox` / `QPushButton` | 只关闭视图,不清除事件或停止报警记录。 |
|
||||
| 最近事件 | 只读列表 | `QListView` 或轻量卡片 | 正式版读取 JSONL 摘要,不作为数据库表格。 |
|
||||
|
||||
## Tab 与设置控件
|
||||
|
||||
| 目的 | 原型控件 | 最终 PyQt5 对应 | 行为 |
|
||||
| --- | --- | --- | --- |
|
||||
| 切换顶层视图 | 两个顶部 Tab | QTabWidget 或 QToolButton 加 QStackedWidget | 实时监控默认显示;设置不抢占视频宽度。 |
|
||||
| 编辑设置草稿 | 数字输入与只读状态卡 | QDoubleSpinBox、QSpinBox、QLabel | 修改立即标记为编辑中,不影响运行配置。 |
|
||||
| 保存并用于下次启动 | 主操作按钮 | QPushButton | 校验通过后显示已保存待下次启动;不热改监控中的阈值。 |
|
||||
|
||||
## 视觉令牌
|
||||
|
||||
采用克制的深色控制台主题,以视频画面和告警信息为主。最终 PyQt5 应将这些令牌集中到 QSS/主题资源,不在控件中散落硬编码色值。
|
||||
@@ -79,6 +87,8 @@
|
||||
|
||||
## 无障碍与输入
|
||||
|
||||
- 顶部 Tab 使用标准 tablist、tab 和 tabpanel 语义;左右方向键切换顶部 Tab,切换后焦点停在新 Tab。
|
||||
- Tab 顺序:顶部 Tab → 监控状态切换 → 启动/停止 → 查看截图 → 最近事件;设置 Tab 中按视觉顺序经过来源、模型、事件参数、保存操作。
|
||||
- 所有状态同时包含颜色、图标形状和中文文字;状态文字对比度不低于 4.5:1。
|
||||
- Tab 顺序:状态切换 → 启动/停止 → 查看截图 → 最近事件 → 弹窗确认按钮。
|
||||
- `1`、`2`、`3` 是原型专用演示快捷键;Escape 只关闭可关闭的弹窗。
|
||||
@@ -96,3 +106,4 @@
|
||||
3. 点击“连接异常”或按 `3` 后,仅显示重连状态,且明确说明未触发报警。
|
||||
4. 宽屏、约 900 epx 宽和约 600 epx 宽均不出现横向溢出或无法触达的主操作。
|
||||
5. 仅用键盘可切换三种状态、关闭弹窗并看到可见焦点。
|
||||
6. 点击设置 Tab 或按左右方向键可切换视图;设置页不显示来源地址或密码,编辑参数后显示已修改,保存后显示下次启动生效。
|
||||
|
||||
Reference in New Issue
Block a user