长官反馈 E/F/G 三版「变化不太大」——那三版只是同一张三列表格(标签|OD|OS)改
grid-template-columns 的描边/留白/底色微调,数据的组织结构从头到尾没变过。
本页不再动描边,改为调研市面上双眼/成对医疗数据的常见处理方式,并对照本项目已经上线过的真实写法,
给出 5 个结构真正不同的方案(H/I/J/K/L)。
卡片视觉(圆角22/白底/双层柔阴影/内边距20/字阶/颜色)与上一版方案完全一致、原样照抄
store-mobile-refractive-archive-mockup-clean.html,唯一自变量是数据排法。手机帧宽度 375px。
#2fa37c)/OS 蓝(#6d8fd0)配色方向一致,
本次不新增任何色值,全部复用现有令牌。(来源:ui-ux-pro-max 技能 · product 域 ·
"Patient Portal / Health Records":Color Palette Focus = "Clinical blue + health green + alert red +
calm white + accessible contrast")frame3-patient-profile.tsx)已经真实上线过"转置"写法——
列头是指标名、行首是眼别,但那是在平板宽屏下用的,从未在 375px 手机窄屏验证过是否装得下。
本页方案I就是把这个真实写法搬到手机帧下做实测(见下方自检结果)。web/app/h5/family/[id]/exam/new/page.tsx 的
OdOs() 组件:grid-cols-[76px_1fr_1fr],标签|右眼OD|左眼OS,
录入表单用(第276-286行)。web/app/h5/family/[id]/page.tsx 的
EyeColHead:grid-cols-[1fr_96px_96px],家长端只读详情用(第209-222行)。frame4-record-view.tsx 的 RowA,
列头 OD/OS 前各带绿/蓝圆点(第715-716行),门店端只读记录卡用。frame3-patient-profile.tsx 时间线卡:
列头「裸眼视力/球镜(D)/眼轴(mm)/眼压(mmHg)」,行首「OD」「OS」各一行四个数值
(第373-412行),这是本页方案I的真实出处,但该实现只在平板宽屏跑过,未在手机 375px 验证过。trend-chart-dialog.tsx 的历史数据表:
<table> 四列「检查日期/OD 右眼/OS 左眼/方法」,横向不分眼别拆行
(第849-866行),用于弹层里的完整历史列表,不是单条记录卡。app/services/refractive_record_service.py 第1547-1551行,给 AI 分析拼 prompt 时把双眼合并成
"23.57/23.52mm" 这种斜杠字符串。这说明业务本身接受"两眼合成一个值"的表达方式,
是方案H斜杠合并的直接依据——但这是给模型读的文本,不是给家长看的 UI,UI 上还要不要接受合并需要长官拍板。小结:本项目至今出现过的双眼排法只有「三列并排」「转置」「标准表格」「文本斜杠合并」四种, 从没出现过「一眼一卡」「主值+差值」「迷你条对比」——H/I/K/L/J 里,H 复刻的是本项目已有的文本合并习惯, I 复刻的是本项目已有的转置写法,J/K/L 三个才是本项目从未用过的全新结构。
E/F/G 三版共用同一个 .ap-eye-head/.ap-eye-row 三列 grid,
三次只改了 grid-template-columns(88px 1fr 1fr)和分隔线/底色,
数据结构从头到尾是"标签|OD数值|OS数值"三列。本页 H/I/J/K/L 五个方案,
每一个的数据结构都不同:H 是两列(标签+合并值),I 是转置(行=眼别,列=指标),
J 是两个独立子分区,K 是主值+差值,L 是数值+比例条。没有一个是"三列 grid 改列宽"。