Files
xuetang/app/research/subwindow_reference_audit.md
T
2026-09-08 11:40:15 +08:00

21 KiB
Raw Blame History

诊疗 / 病例 / 订单 / AI 报告子窗口蓝白参考审计

审计日期:2026-08-13
审计性质:只读;未修改业务源码、测试、脚本或既有 PNG。
审计边界:诊疗详情/编辑抽屉、独立病例只读页、诊断上下文中的业务订单详情、诊断 AI 报告。未审计或改动 theme.pywidgets.py、处方编辑/患者页/挂号页;AI 部分只看诊断报告模式,不扩展到处方业务。

1. 结论先行

  1. 用户所指“蓝白参考”最接近的现有实图是 artifacts/pixel_exact_v3/consultations.png1710×9202026-08-13 19:56)。它是当前最新、最完整的蓝白医生工作站视觉:浅蓝壳层、近白内容底、白色卡片、靛蓝主操作、冷灰蓝文字与边框。子窗口应从它取色,不应从旧 Diagnosis 深色图取色。
  2. 子窗口结构不能统一成同一种 modal。 现有正确结构分别是:诊疗编辑/viewOnly 为右侧 60% Drawer;独立病例为无 Tabs 的纵向滚动详情页;订单详情为右侧 80% readonly DrawerAI 报告为 920×760 的居中 Dialog。用户要求的“蓝白”应是视觉统一,不是破坏这些已经有测试与研究规格支撑的容器合同。
  3. artifacts/diagnosis_visual/*.png 的主诊疗图仍是深色旧产物,只能借布局,不能借色。 例如 diagnosis_edit_1440x900.pngdiagnosis_viewonly_1440x900.pngdiagnosis_readonly_1440x900.pngdiagnosis_order_detail_drawer_1440x900.png 均以 #080B14/#101626/#151D31 为主。它们与 19:56 的蓝白主壳不属于同一视觉版本。
  4. 最接近当前浅色订单结构的实图是 .pytest-tmp-ui-redesign-full/test_drawer_and_inline_player_0/order.png1100×7202026-08-13 17:53)。它准确显示了 20% 遮罩 + 80% 白色 Drawer、固定 Header/Body/Footer 和卡片层级,但色谱仍是上一轮灰白+青色(#F5F7FB/#D8DEEA/#CFFAFE/#A5F3FC),因此仅作订单布局参考。
  5. AI Dialog 已有一张新生成的 920×760 蓝白实图:artifacts/subwindow_exact/prescription_ai_report_920x760.png 它直接证明当前 AI 组件的 Header、snapshot、医疗警示、双模型 Tabs、两列报告、滚动区和 Footer 能按蓝白色板渲染;但画面是“AI 处方解释”模式,不是诊断 DIAGNOSIS_AI_KIND 的“AI 报告/完整病历”模式。诊断 AI 使用同一个 Dialog/QSS,故该图可作为外观强参考,仍不能替代诊断模式本身的验收图。dialogs/prescription_ai.py 当前在工作树中仍是未跟踪文件,故它是“当前工作树实现”,不是已有发布基线。
  6. 当前工作树正在变化。 审计期间 dialogs/diagnosis.py 的订单 QSS 已从灰白版本进一步改为蓝白版本(例如遮罩 rgba(30,64,175,.18)、面板 #F6F9FE、边框 #DDE7FF);随后 diagnosis_drawer.py 又加入 _DIAGNOSIS_BLUE_REPLACEMENTS,在不重写成熟选择器的前提下把旧青色/绿灰字面量映射到靛蓝/冷灰蓝。测试中的选中 chip 断言也已从 #CFFAFE 更新为 #F0F2FF。本报告以下约束以审计结束时的最新工作树为准,同时明确区分旧 PNG。

2. 证据优先级与可用方式

优先级 证据 用途 不可误用
1 artifacts/pixel_exact_v3/consultations.png 蓝白总色调、主/次文字、边框、内容底、主按钮 不是子窗口几何图,不能据此改变 Drawer 比例
2 artifacts/subwindow_exact/prescription_ai_report_920x760.png AI Dialog 蓝白实际渲染、阅读密度、滚动与 Footer 是处方解释模式,不是诊断 AI 报告模式
3 src/doctor_workstation/ui/dialogs/prescription_ai.pyPRESCRIPTION_AI_QSS 已落地的蓝白 Dialog 色板、按钮、Tabs、阅读排版 文件未跟踪;不能当作已发布基线
4 .pytest-tmp-ui-redesign-full/test_drawer_and_inline_player_0/order.png 80% 订单 Drawer 的浅色结构和首屏信息密度 青色强调与黑色遮罩不是最终蓝白色值
5 artifacts/diagnosis_visual/diagnosis_edit_*.pngdiagnosis_viewonly_*.png 60% 诊疗 Drawer、Header/Tabs/Body/Footer、滚动与窄宽布局 深色旧主题不能复用
6 artifacts/diagnosis_visual/diagnosis_readonly_*.png 独立病例纵向流、4/3 列病例密度、异常值层级 深色旧主题不能复用
7 artifacts/diagnosis_visual/diagnosis_order_detail_drawer_1440x900.png 与两个 1024×640 状态图 80% 比例、金额五卡、处方/收款首屏、固定 Footer 深色旧主题不能复用;文件名 640x540 实际为 1024×640
8 research/diagnosis_detail_visual_spec.mddiagnosis_final_visual_gate.md 后台结构事实、间距、字段顺序、状态、历史验收 旧门禁“PASS”只证明当时深色截图结构完整,不代表符合本轮蓝白参考

2.1 实图像素色谱

pixel_exact_v3/consultations.png 每 2 px 采样得到的主要实色:

角色 参考实色 说明
页面/内容底 #FCFDFE 最大面积;子窗口滚动内容的首选底色
主卡片/浮层 #FFFFFF 表格、表单、Header、Footer、信息卡
壳层浅蓝 #EEF3FD 适合 overlay 外的壳层或非常浅的背景层,不宜给所有内卡重复使用
次级填充 #F7F9FE#F2F6FE 输入只读态、筛选块、提示块、轻卡底
主边框 #E2E7F4 参考图中卡片与分隔线的高频精确色
主色 #5265F6 参考图主按钮/选中态的高频精确色
主标题 #15224A 参考图高频深靛文字
正文 #3F4E75 正文/表格主内容
次文字 #7481A3 标签、说明、占位与元信息
危险 #F15B67(实图) 取消/危险语义;业务详情可继续用更稳的 #C43E55 文本

AI 报告现有色板与参考图极近:背景 #F7F9FE,主色 #5761F4hover #6871F6pressed/链接 #4D57D8,浅主色 #F0F2FF,边框 #DCE3F2,标题 #17203F,正文 #37415E,次文字 #78849D。两套主色只差 5 个 RGB 量级;若追求实图像素统一,统一到 #5265F6;若追求最小改动,可把 AI 色板整套作为子窗口局部 token,但不得继续混入青色 #0891B2/#0E7490/#CFFAFE/#A5F3FC

3. 全部子窗口共同约束

3.1 色与表面

  • 外层/滚动区:#FCFDFE 或需要轻微分层时 #F7F9FE
  • Header、Footer、卡片、表格主体:#FFFFFF
  • 一般边框/分隔:1px #E2E7F4;强调边框可用 #DCE3F2#DDE7FF,但同一控件不要混用三种。
  • 主操作、选中 Tab、focus#5265F6hover 可用 #6871F6pressed/深色链接 #4D57D8;浅背景 #F0F2FF,浅边框 #D8DCFF
  • 标题/数据主值:#15224A(现有 AI 的 #17203F 可作为近似);正文 #3F4E75label/meta #7481A3
  • 成功/提醒/危险仍保留业务语义色,不要全部染成蓝:成功 #16876C#16A34A;提醒 #9A6813;危险 #C43E55 或异常指标 #DC2626
  • 遮罩只负责层级,不变成黑墙:推荐订单当前工作树的 rgba(30,64,175,.18);诊疗 Drawer 可略深但保持蓝灰透明。旧 rgba(8,11,20,.78) 明显不符合参考。

3.2 字体、圆角、密度

  • 字体栈:Microsoft YaHei UI, PingFang SC, Noto Sans CJK SC, sans-serif。不要为普通正文引入另一套拉丁字体;病例编号/时间可使用等宽数字。
  • 正文/控件 13 px;字段 label、提示与 meta 1112 px;卡片标题 1415 pxDrawer 标题 1819 pxAI 报告标题 20 px。
  • 4 px 间距基线;常用 8/12/16/20/24 px。不要产生 5、13、17、21 等无依据的主布局间距。
  • 控件/普通按钮高 34 px;诊疗 Footer 主按钮高 40 px;紧凑 close 为 32×32;诊疗 Tab 高 42 pxAI Tab 高 36 px。
  • 内控件/按钮圆角 7–8 px;字段卡/分区 910 pxHero 12 px;独立只读大卡 14 px。999 px 只用于真正的状态 pill/选择 chip,不要给所有按钮胶囊化。
  • 表格状态必须使用小型 Tag/pill,不得整格铺色。表头宜 #F7F9FE/#F8FAFF,主体白底,行/列分隔 #E2E7F4;金额右对齐,状态与操作位置保持现有合同。
  • hover、pressed、disabled、focus 必须可辨;focus 使用主色边界/外环,不能因改蓝白而删除键盘焦点。

4. 诊疗编辑 / viewOnly Drawer

4.1 必须保持的几何结构

  • DiagnosisDialog 外层仍覆盖 owner,右侧 panel RTL 贴边;桌面宽度为 owner 的 60%1024×640 时 614 px1440×900 时 864 px。
  • 窗口宽 <=768 时 panel 全宽;当前 Dialog 最小 760×520、默认 1024×640。不要改成固定居中 880×680 modal。
  • 三段分离:Header、可横向滚动 Tabs + 独立滚动 Body、固定 Footer。Footer 不得放到 ScrollArea 尾部。
  • Header 内边距 16px 13px,横向 gap 10;标题行内部 gap 10,副标题与标题垂直 gap 4close 32×32。
  • Tabs:单 Tab 最小高 42,水平 padding 14;横向 overflow 用 4 px 细滚动条,隐藏原生盒状左右箭头;激活条使用主色,建议 2–3 px。
  • Basic Body20px 16px 20px 20px(左/上/右/下)内边距;分区纵向 gap 12;一行两字段时 gap 16;窄模式纵向 gap 12。
  • Footer20px 14px 20px 18px 内边距,按钮 gap 12,白底、上边 #E2E7F4,主按钮 40 px 高。

4.2 应改成的视觉

  • Panel/Header/Footer/Body 从旧深靛或当前青绿色调统一到 §3 色板:白色 Header/Footer、近白蓝 Body,主色 #5265F6
  • diagnosis_drawer.py 的基础 QSS 字面量仍大量是青色 #0891B2/#0E7490/#22D3EE/#CFFAFE/#A5F3FC 与绿灰文字 #134E4A/#2A6B64/#5B7A76,但当前工作树已通过 _DIAGNOSIS_BLUE_REPLACEMENTS 在运行时成组映射为靛蓝/冷灰蓝。这个方向正确;最终检查重点应变为:映射是否覆盖所有 scoped QSS、QPainter 和 inline style,且没有选择器优先级让旧色漏出。
  • 推荐映射:
当前 Diagnosis 色 蓝白目标
#0891B2, #0E7490 #5265F6 / pressed #4D57D8
#22D3EE #6871F6 或 focus #5265F6
#CFFAFE #F0F2FF
#A5F3FC #D8DCFF
#F5F8F7, #F6F6F6 #FCFDFE / #F7F9FE
#D5E5E2, #D9DEDA, #E2EBE8 #E2E7F4 / #DCE3F2
#134E4A, #2A6B64 #15224A / #3F4E75
#5B7A76, #66736D #7481A3
  • mode badge、锁定 warning、成功/失败保存状态保留语义色;不要把 warning 也涂成主蓝。
  • 当前表单代码为中宽两列、字段 label 固定 100 pxcontent_w < 520 才堆叠。研究规格中的后台 label 160 px 与当前 614 px 两列桌面实现存在冲突;本轮蓝白适配不应贸然把 100 改成 160,否则 1024×640 会失去已测试的两列无裁切合同。若未来要追后台 160 px,需单独重做栅格,不属于纯视觉换肤。

5. 独立病例 / 病历只读页

本节“病例”按当前 DiagnosisDialog 的 standalone readonly + CaseGrid 理解;不进入处方历史详情实现。

5.1 必须保持的布局

  • 独立只读页是纵向 ScrollArea没有 Tabs;页面内容四边 16 px、卡片间 gap 16。
  • 顶部 Hero 左右可换行;宽度 <900 时右侧患者摘要落到下一行。Hero 内边距 16px 12px,内部 gap 12,圆角 12。
  • 患者信息大卡内边距 18、纵向 gap 14;内部患者 Hero 内边距 18px 16px、纵向 gap 3。
  • 病例卡 CaseGrid 内边距 18、纵向 gap 14;分组之间 dashed 分隔;网格横向 16、纵向 8。
  • 宽屏病例分组保持既有列数:基本信息/生命体征/主诉 4 列,现病史与其他病史 3 列,既往史与补充意见整行。异常高压/低压/血糖继续用红色、700 字重和上箭头。
  • 病例 label/value 的视觉尺度保持 1212.5 pxlabel #7481A3value #15224A/#1F2937,空值使用更浅的灰蓝。

5.2 蓝白外观

  • 页面底 #FCFDFE;Hero 可使用研究规格已有的浅蓝渐变 #F5F8FF → #EEF3FF,边框 #DDE7FF;不要使用深色整页。
  • 通用只读卡白底、1px #E6EBF2、14 px 圆角;卡片标题 15/700,左侧 3×16 px 主蓝标记。
  • 当前工作树在患者信息卡标题行新增了“AI 报告”按钮。位置应固定在标题行右侧;使用 secondary 样式(字 #4D57D8、底 #F0F2FF、边 #D8DCFF、34 px 高、7 px 圆角),避免与“保存/生成”级主动作争抢。
  • CaseGrid 已有少量蓝灰 inline 色(subtitle #7886AA、divider #D8DEEE),方向正确,但应收敛到统一的 #7481A3/#E2E7F4,避免同一页出现多套近似边框。

6. 业务订单详情 Drawer

6.1 必须保持的结构与尺寸

  • OrderDetailDrawer 覆盖 owner,右侧 panel 固定 80%1024 owner 为约 819 px1440 owner 为 1152 px;左侧 20% 为 scrim。
  • Header/Body/Footer 三段独立;Body 单独纵向滚动,Footer 始终可见。
  • Header 当前内边距 20px 15px 18px 15pxgap 12;标题栈 gap 4;标题 19 pxmeta 12 px;右侧依次是只读 badge、状态 Tag、关闭。
  • Body 当前内边距 18px 16px 18px 22px,区块 gap 14。区块内边距 15px 14px 15px 16px,gap 11;字段/金额卡网格 gap 8。
  • 金额概览首行 5 等分卡;值 18/700。信息字段为 3 列,物流元信息 2 列。收款表最小高 145,按行数增长但最大 280。
  • 内容顺序必须保持:金额概览 → 处方详情 → 收款记录 → 履约与收货 → 物流轨迹 → 操作日志。readonly 隐藏收款方式等敏感/可编辑内容,不能为了“清爽”删掉已规定的只读信息层级。
  • Footer 当前内边距 18px 10px;左侧数据来源说明,右侧关闭。

6.2 应匹配的蓝白细节

  • 当前工作树 _ORDER_DETAIL_QSS 已基本走在正确方向:scrim rgba(30,64,175,.18)、Drawer/Scroll #F6F9FE、Header/Footer 白、强边 #DDE7FF、section #FFFFFF/#E6EBF2、字段底 #F8FAFF、空态 dashed #C9D8F2。这套可保留。
  • 仍需确保从 DIAGNOSIS_QSS 继承的通用按钮/Tag/表格不会把订单局部重新染成青色。订单局部关闭按钮使用 secondary 蓝白;状态 Tag 保留绿/黄/红业务语义。
  • 时间轴左线 #93B4F4 是合理的浅主蓝;标题 #1F2937、meta #64748B 可保留,若做全局像素统一再收敛到 #15224A/#7481A3
  • 旧订单 PNG 中黑色 20% scrim 和深色主画面不能作为目标;浅色测试图的 80% 几何和卡片层级才是目标。

7. AI 报告 Dialog

7.1 当前实现已接近目标

  • 居中 Dialog,默认 920×760,最小 720×560;不要改成右侧 Drawer,除非产品另行决定窗口范式。
  • Root 内边距 22px 18px,纵向 gap 12。
  • 标题 20/700,副标题 13;右侧可有状态 badge。
  • 完整病历 snapshot:白底、1px #DCE3F2、10 px 圆角,内边距 14px 12pxgap 12;左 label 固定 72 px。
  • 医疗提示使用淡黄语义卡 #FFF9EE/#F3DFB5、9 px 圆角;不要为“全蓝白”抹掉警示语义。
  • 两模型 Tabs 高 36、水平 padding 18selected 字 #4D57D8、底 #F0F2FF、2 px 主色下划线;Tab 内容白底、10 px 圆角。
  • 报告 ScrollArea 白底;host 内边距 4px 4px 12px 8pxgap 12。
  • 核心判断 summary#F0F2FF、左 3 px #5761F4,内容内边距 18px 16px;结构化报告四格为 2 列,列 gap 28;编辑框最小高 280。
  • Footer 右对齐;按钮 34 px 高、水平 padding 16、7 px 圆角;生成/保存为 primary,关闭/取消为普通或 secondary。

7.2 已有实图与仍缺的证据

  • artifacts/subwindow_exact/prescription_ai_report_920x760.png 已显示一张质量足够的蓝白 AI Dialog:标题区、药材 snapshot、淡黄医疗警示、两模型状态 Tabs、核心判断浅蓝强调、2×2 报告栅格、垂直滚动和底部“关闭/重新生成”均完整,无深色或青色残留。它能证明共享 Dialog 外观已成立。
  • 该图标题是“AI 处方解释”、snapshot 为“药材组合”,并非诊断模式的“AI 报告/完整病历”。诊断模式虽然复用同一个类和 QSS,仍需自己的实图验证文案高度、完整病历摘要换行和按钮标签。
  • tests/test_prescription_ai_ui.py 只验证权限、文字、双模型数据、生成与编辑,没有截图、尺寸、主色、滚动和窄窗断言。
  • 当前 scripts/render_subwindow_exact.py 的审计结束版本不再包含 AI render 分支,现有 AI PNG 的可重复生成链路不清晰;因此不能仅凭文件存在判可持续门禁。
  • 后续视觉门禁至少需要:920×760 有报告态、720×560 空态/加载态、编辑态(含 280 px editor)、生成失败/旧报告回退态各一张;同时验证 Tabs、snapshot、warning、Footer 和纵向滚动无裁切。

8. 现有 tests / scripts / research 能保护什么

8.1 已有强结构约束

  • tests/test_diagnosis_drawer_visual.py
    • 诊疗 Drawer 60%、右贴边、全高、Footer 固定;1024/1440 两档。
    • 独立 readonly 无 Tabs、内容 gap 16、无横向滚动。
    • Tabs 横向滚动条 4 px,原生工具按钮不可见。
    • 订单 Tab、病例/Notes/Daily 等真实组件可达,窗口 resize/reopen 与 owner 同步。
  • tests/test_diagnosis_order_video_visual.py
    • 订单 Drawer 为 80%,覆盖 ownerreadonly 属性与各信息区存在。
    • 空字段必须显示明确空态,不能伪造 0;操作日志受权限保护。
    • 生成的 order image 只要求 1100×720 且文件大于 10 KB。
  • research/diagnosis_detail_visual_spec.md
    • 明确三种诊疗视图的结构、4 px 间距基线、Header/Tabs/Footer、病例 4/3 列、订单 80% Drawer 和业务字段顺序。
  • research/diagnosis_final_visual_gate.md
    • 证明旧版 60%/80% 几何、fixed Footer、窄窗滚动和所有详情区曾完整入镜。

8.2 当前视觉门禁缺口

  1. Diagnosis tests 原先明确断言选中 chip 为青色 #CFFAFE;审计结束时当前工作树已把三处断言同步为 #F0F2FF。此项已在改动层关闭,但仍需最终测试运行证明未回归。
  2. 订单的截图测试只看尺寸和文件体积,不校验 80% 边界位置、Header/Footer 色、主色、scrim 或卡片色;可能在视觉回退时继续通过。
  3. AI 报告完全没有 PNG/像素门禁。
  4. scripts/render_diagnosis_detail_visual.pyrender_diagnosis_order_video_visual.py 能重建诊疗与订单实图;当前工作树还新增了未跟踪的 scripts/render_subwindow_exact.py,聚焦生成诊疗 Drawer、订单 Drawer 和日常记录编辑器。artifacts/subwindow_exact/prescription_ai_report_920x760.png 虽已存在,但当前脚本版本不再覆盖它,且该图是处方模式;诊断 AI 的可重复 render 门禁仍缺失。artifacts/diagnosis_visual 仍是深色旧产物,蓝白实现完成后必须以新图验收,不可用旧图宣布通过。
  5. 深色 replacement 表仍留在 diagnosis_drawer.py 作为未来暗色材料。当前注释说明默认 light 不执行它;后续实现不应删除未来暗色能力,也不能误把该 replacement 再无条件应用到默认模式。

9. 建议的实现优先级(仅供父任务使用)

  1. 先完成并验证 Diagnosis scoped QSS 色板统一:当前 replacement 表已经落地,下一步应验证青色/绿灰全部映射为蓝白 token,同时保持 60%/80%/窗口结构不动。
  2. 再清理 inline style 漏点:病例 subtitle/divider、banner 文本、订单 toolbar/meta 等应使用 objectName + 同一色板,避免局部仍冒出旧深色或青色。
  3. 保留订单当前工作树的蓝白局部 QSS,检查它与通用 DIAGNOSIS_QSS 的选择器优先级,避免按钮和表格被旧青色覆盖。
  4. 以 AI 报告色板为一致性校准,必要时把其主色从 #5761F4 微调到参考精确色 #5265F6;医疗 warning、成功、错误保留语义色。
  5. 最后重渲并逐窗比较:必须同时看 1024×640 与 1440×900 的诊疗/病例/订单,AI 看 920×760 与 720×560。旧深色 PNG 不再作为通过证据。

10. 最终可验收口径

  • 诊疗:60% 右 Drawer,白 Header/Footer、近白蓝 Body、靛蓝 active/focus/primary,无青色残留;Tabs 与 Footer 不裁切。
  • 病例:无 Tabs 的纵向白卡流,浅蓝 Hero,4/3 列病例仍可读;AI 报告 secondary 按钮位于患者信息卡标题行右侧。
  • 订单:20% 淡蓝 scrim + 80% 白/浅蓝 Drawer;五金额卡、处方、收款、履约、物流、日志顺序完整;Footer 固定。
  • AI 报告:920×760/720×560 都能完整显示标题、snapshot、医疗警示、双模型 Tabs、滚动报告与 Footer;主色与 #5265F6 同色系,无青色。
  • 四窗共同:#FCFDFE/#FFFFFF/#E2E7F4/#5265F6/#15224A/#7481A3 形成稳定层级;34/40 px 控件节奏、7/10/12/14 px 圆角层级和 4 px 间距基线一致;语义色不被“全蓝化”。