左列=家长端现状(色值/结构全部扒自 web/app/h5/family/[id]/page.tsx 与
web/app/h5/family/[id]/_components/CollapsibleGroup.tsx,file:line 见各组说明)。
右列=借鉴门店端「视光档案」已拍板口径 D11(方案P转置)/ D12(苹果浅色皮肤),
色值出自长官定稿清单,一字未改。仅出对比图,不改任何代码。
1. 双眼数据排布 → 改成 D11 方案P转置
借的是什么:现状是"行=指标、列=OD/OS"每组表头单独起一行(EyeColHead + EyeValRow); 门店端 D11 是"列=指标、行=右/左",每列只装同一指标数值,位数天然相同,居中自动对齐(长官原话:验光单标准排法)。 为什么:现状每个指标独立成行,4 个指标要占 4 行高度;转置后横向铺开,一屏能看完整组数据,且不需要靠列宽凑对齐。
出处:page.tsx:222(EyeColHead grid-cols-[1fr_96px_96px])+ page.tsx:257(EyeValRow 同宽栅格)+ page.tsx:43-44(OD/OS 色)
出处:长官定稿 D11 方案P转置口径;色值 D12(右 #177A57 / 左 #3A6FC4)
2. 眼轴趋势图 Y 轴刻度 → 改成固定步长(0.1mm)
借的是什么:现状 recharts YAxis domain={["dataMin - 0.25", "dataMax + 0.25"]},
刻度由 recharts 按 (min-0.25, max+0.25) 自动分 5 份,数值间隔不均(如 23.5/23.8/24.1/24.4/24.6);
门店端思路是固定 0.1mm 步长,刻度永远是 .1 的整数倍。
为什么:眼轴数据本身按 0.01mm 记录、医学上关心的是"变化了几个 0.1mm",不均匀刻度会让同样的视觉高度差代表不同的实际变化量,容易看错趋势陡峭程度。
出处:page.tsx:2603-2604 domain={["dataMin - 0.25", "dataMax + 0.25"]};刻度值为按此公式反推的示意值(非真实病例)
固定 0.1 步长示意(刻度间隔均匀)
3. 负号字符 → 改成 U+2212 真减号
借的是什么:现状球镜/柱镜负值走 JS 原生 Number.toFixed(2),产出的负号是 ASCII 连字符 U+002D(键盘那个"-"),
全文件 python3 实测 U+2212(数学减号)命中数 = 0;门店端 D12 拍板用 U+2212 真减号。
为什么:U+002D 是排版连字符,字重/宽度比数字窄,和后面的数字挤在一起视觉上不对齐;U+2212 是数学减号,宽度与数字匹配,专业验光单/报表通用写法。
字符:U+002D(ASCII 连字符)
出处:page.tsx:324 const s = n.toFixed(2);python3 -c 验证 U+2212 计数 = 0(对照组:字符串直接 grep "-3.00" 命中 >0,证明查法有效)
字符:U+2212(数学减号)
出处:长官定稿 D12「负号用 U+2212 真减号」
现状 U+002D(ASCII 连字符)
借鉴后 U+2212(数学减号)
4. 视觉皮肤 → 改成 D12 苹果浅色皮肤
借的是什么:现状页面底色是三层径向渐变(绿/蓝/黄三个光斑叠加 #fbfdfa 底),
卡片 rounded-2xl(16px)带投影 shadow-[0_1px_4px_rgba(15,82,69,.05)];
门店端 D12 是纯色 #F2F2F7 底、白卡圆角 16px、无投影、字色纯黑 #000。
为什么:视光档案是医疗数据页,渐变光斑属于"营销/首页"气质,和检查数据的严肃性不搭;门店端已用真实业务验证过的苹果原生分组列表风格更适合长时间盯着看数字。
检查记录
三层径向渐变底 + 白卡投影
出处:page.tsx:2381-2384(页面背景)+ CollapsibleGroup.tsx:29(卡片样式)
检查记录
纯色底 #F2F2F7 + 白卡无投影
出处:长官定稿 D12(底 #F2F2F7 / 卡片圆角16px无投影 / 字 #000 / 标签 #6E6E73)
5. 单位写法 → 统一成"只在表头出现一次"
借的是什么:现状单位拼在每个值里(dText = `${d2(v)}D`、axisText = `${v}°`),
每一行都重复一次单位字符;D11 转置表把单位写进表头(如"球镜(D)"),下面两行只放纯数字。
为什么:同一列全是同一单位,行行重复等于噪音,还会让数值本身变长挤占对齐空间;单位上提到表头,数值区可以做到真正的纯数字定宽对齐。
出处:page.tsx:327 dText / page.tsx:316 axisText(单位随值重复出现)
单位只在表头出现一次,数值区纯数字
.cap 说明)