5.3 KiB
5.3 KiB
医生工作站客户端设计规范
本轮覆盖现有 PySide6 客户端与 Vue 视频伴随窗口。按 redesign-existing-projects 审查现有页面,结合 minimalist-ui 的扁平化原则实施;医疗工作台保留信息密度,不套用营销页面的大留白、装饰动效或布局模板。
审查结论
- 主框架与业务页面原先并存科技蓝、紫蓝及多套中性色;登录、AI、诊单的控件也各自定义配色。
- 页面内圆角、边框和层级不统一,部分阴影、悬浮位移和过渡使操作显得跳动。
- 小窗口的表格、诊单与视频操作需要分别验证,不能依靠整体缩小解决。
- 键盘焦点、禁用与选择状态应始终可识别,不通过改变控件几何位置表达状态。
视觉系统
设计变量以 src/doctor_workstation/ui/design_system.py 为准。旧页面通过 clinical_stylesheet 迁移已知的浅色主题颜色,新样式使用命名变量。医学数据曲线、模型标识色和深色主题不进行全局替色。
| 角色 | 值 | 使用场景 |
|---|---|---|
| 主色 | #4267B2 |
主操作、选中项、重要链接 |
| 主色浅底 | #EAF0FB |
选中背景、轻量状态 |
| 画布 | #F5F7FA |
主窗口背景 |
| 表面 | #FFFFFF |
内容区、对话框 |
| 次级表面 | #F7F9FC |
筛选栏、分组、只读区域 |
| 侧栏 | #F0F3F8 |
导航区域 |
| 标题 / 正文 | #223047 / #344258 |
文字层级 |
| 次级文字 | #647287 |
说明、辅助信息 |
| 边框 / 强边框 | #E6EAF0 / #D4DCE8 |
低对比结构线、输入边界 |
| 成功 / 警示 / 危险 | #287B65 / #96601D / #B54A59 |
保留明确语义,不只依赖颜色 |
- 圆角:标签 6 px、输入与按钮 10 px、内容面板 16 px、独立窗口 20 px。
- 间距:8 / 12 / 16 / 24 px,根据现有表格密度调整,不整体放大行高。
- 字体:继续使用打包的中文字体与现有可读字号;标题层级通过字重、字号和间距体现。
- 表面:纯色为主,轻边框划分区域,减少嵌套卡片与装饰阴影。
- 按钮:每个操作组主次清晰;次要操作使用浅底或边框;终止、删除等危险操作保留语义色。
交互规范
- 悬浮、按下和焦点反馈不移动布局、不改变控件尺寸。
- 动画短而克制;滚动可被键盘、拖动、程序定位与反向滚动即时打断;尊重减少动画设置。
- 切换页面保留原有路由、权限和数据加载机制。
- 登录表单保留密码存储、服务器设置与提交保护;组合密码框使用实际 Qt 焦点状态。
- 大小窗口都必须能找到主要操作,优先局部滚动而非把全部内容压小。
- 视频保留原有截图捕获、确认上传、大预览和小窗关闭返回大窗逻辑;视觉样式不改变媒体内容或尺寸计算。
覆盖范围
- 登录与品牌区:扁平品牌面板、简洁功能说明、清晰表单与焦点。
- 主框架:导航、顶部搜索、工具按钮、标签与 AI 入口。
- 列表:挂号、接诊记录、患者、处方库、已开处方、业务订单及患者进度。
- 诊疗:接诊台、预约抽屉、诊单编辑与只读、指标和保存状态。
- 辅助窗口:AI 问诊、处方编辑、处方解读与报告控制台。
- 视频:通话控制、聊天、录制提示与截图确认。
验收方式
scripts/render_client_design.py 使用演示仓库生成 1440 × 900、1024 × 640 的真实页面,以及 1280 × 800、860 × 640 的登录页;输出 artifacts/client-design/index.html 与原尺寸 PNG。诊疗和 AI 弹窗使用现有专用渲染脚本验证。
检查重点:小窗操作可达、中文可读、表格信息密度、长文本换行、键盘焦点、布局稳定、登录与页面路由契约、视频截图与窗口状态回归。生产服务与真实患者资料不用于视觉验收。
本轮共享组件还覆盖筛选展开按钮、列表加载状态、聊天通知、更新提示、本机录音队列、媒体预览和上传进度。860 × 640 登录表单完整显示,不需要为纯留白滚动。
验证记录与边界
- 主框架、登录、遮罩与动效首轮 100 项通过;新增组合密码框键盘焦点检查通过。
- 小窗登录与焦点补测 2 项、最终登录及主框架复查 68 项通过。
- 筛选、无限列表、通知、更新窗口与本机录音队列 37 项通过。
- 原生视频截图、截图预览尺寸、小窗关闭与视频契约 199 项通过。
- 视频前端 26 项检查通过,生产 dist 已重新构建。
- 当前视频 dist 在 1120 × 760、540 × 356、440 × 300 的合成画面中完成 27 项布局检查,截图与关闭事件正常,未访问外部服务。
- 临床页面、AI、处方及图表分别完成专项测试和真实控件渲染,详细记录位于
artifacts/client-design/*-report.md。 - 最终修改文件的 Ruff 与
git diff --check均通过;AI 工作区及快捷操作权限最后复查 24 项通过。
此记录不表示整仓所有历史测试全部通过。扩展测试中存在已用原始 HEAD 复现的 AI 流式/延迟生命周期失败、共享 QApplication 样式引发的图表测试顺序依赖,以及 Windows Qt 网络模块异常;本轮没有改变相关业务行为。未连接真实面诊服务,也未重新打包或安装 Windows 客户端。