页面:web/app/h5/store-refractive/[patientId]/record/[recordId]/page.tsx(门店结论 tab · 推送状态区 :765-802)。
样式全部 grep 自该文件真实代码,见下方「零、真实样式来源」。所有帧均按 375px / 393px 真实容器宽度渲染
(外层 px-4 16px 两侧 + 卡片 padding:20px 两侧,375px 下卡内可用宽度 303px,与长官给出的实测事实一致)。
每帧下方的量化结果由页面内嵌 JS 在真实浏览器布局后自动计算并写入(非人工估算)。
| 元素 | 样式 | 出处 |
|---|---|---|
| 时间戳文字 | fontSize:11 fontWeight:500 color:#6E6E73 | page.tsx:52-53,779-781 |
| 时间戳格式(带年) | fmtFull(iso) = iso.slice(0,16).replace("T"," ") → 2026-09-06 15:39 | page.tsx:119-121 |
| 已读时间格式(短) | fmtShort(iso) = iso.slice(5,16).replace("T"," ") → 09-06 15:45 | page.tsx:122-124 |
| 已读徽章 | bg:rgba(47,163,124,.12) color:#2fa37c fontSize:12 fontWeight:700 padding:4px 10px radius:999 border:1px solid rgba(47,163,124,.35) | page.tsx:786 |
| 未读徽章 | bg:#fdf1e3 color:#b8641f 其余同上 | page.tsx:55-56,792 |
| 状态行容器 | display:flex flex-wrap:wrap gap:6 alignItems:flex-start | page.tsx:778 |
| "结论已改动"提示 | fontSize:11 fontWeight:500 color:#6E6E73 marginTop:4 | page.tsx:799-802 |
| 门店结论卡片 | background:#fff borderRadius:16 padding:20 | page.tsx:57,721 |
| 外层水平内边距 | className="... px-4 py-4"(16px 两侧) | page.tsx:577 |
| 描边子容器(方案3/5复用) | border:1px solid #e2e8f0 borderRadius:12 padding:12 | page.tsx:735,823 |
| 标签字样(方案3复用) | fontSize:11 fontWeight:600 color:#6E6E73("已推送内容"标签同款) | page.tsx:824 |
| 小号灰字(方案4复用) | fontSize:10 fontWeight:500 color:#6E6E73(单位小字同款) | page.tsx:137 |
| 间距单位 6(方案5圆点复用) | 状态行 gap:6 同一间距值 | page.tsx:778 |
对照组自证:上表 12 条全部能在 page.tsx 中 grep 到对应行(已逐条核对);本对比图**零自造色值/字号**。样例数据:推送时间 2026-09-06T15:39:00,已读时间 2026-09-06T15:45:00(与长官示例一致)。
这就是长官反馈的"徽章被挤到下一行"的问题现场——375px 已读态里徽章不是被设计成独立一行,而是因为一行放不下才被动换行,右侧留白不均匀,视觉上像"挤掉了"。393px 起同样的代码不会触发这个问题(见第三帧)。以下是 5 个改排版方案。
与现状的区别:不是"宽度不够被挤下去",而是无论宽度多少都固定两行(flex-direction:column),徽章行左对齐、不留大片空白,是设计好的结果。
优点:两态视觉完全一致,不会因数据长度不同而"有时一行有时两行"造成的观感差异。缺点:未读态本来一行能放下,却也被强制拆成两行,占用了更多纵向空间。信息完整性:年份 ✅ · 已读时间 ✅ · 改动提示 ✅。
把徽章挪到时间戳前面:[家长未读] 已推送 · 2026-09-06 15:39。总内容宽度不变,但换行发生时是"时间戳被挤下一行"而不是"徽章被挤下一行"——由于时间戳是纯文本、没有色块/边框,即使独占一行也不会显得像"孤立药丸被撞飞",视觉突兀感更低。这是唯一一个"够放就一行,不够放才两行"的自适应方案。
优点:总宽度需求与现状完全一样(只换了顺序),但换行后视觉更自然——时间戳独占一行不刺眼,徽章始终在最显眼的第一位置。缺点:已读态在 375px 下本质上仍会换行(总宽度没变),只是换行位置从"徽章掉下去"变成"时间戳掉下去",没有真正解决"信息量超过一行"的问题,只是让换行看起来更顺眼。信息完整性:年份 ✅ · 已读时间 ✅ · 改动提示 ✅。
做成一个小的信息块,两行各自对齐:第一行"推送"+时间,第二行"状态"+徽章,标签列固定宽度对齐成列。标签样式复用 page.tsx:824 "已推送内容"同款(fontSize:11 fontWeight:600 color:#6E6E73),外框复用 page.tsx:735/823 描边容器(border:1px solid #e2e8f0 radius:12 padding:12)。
优点:结构最规整,标签对齐成列,像一个独立的"状态卡片",与"门店结论"正文视觉区隔清楚,不会有换行歧义。缺点:视觉分量最重(多了一个描边框+两行固定结构),在信息量不大的场景下略显"小题大做";纵向占用空间在四个方案里最多。信息完整性:年份 ✅ · 已读时间 ✅ · 改动提示 ✅。
已读徽章只保留状态词"家长已读"(与未读徽章"家长未读"同等长度),原来挤在徽章里的"已读于 09-06 15:45"挪到徽章外面,作为一行小字放在下面——信息一个不少,只是"已读徽章"和"已读时间"从合并显示改成分开显示,徽章本身宽度从两态不一致变成两态一致。小字复用 page.tsx:137 同款(fontSize:10 fontWeight:500 color:#6E6E73)。
优点:唯一让"未读态"和"已读态"徽章宽度完全相等的方案——第一行(时间戳+徽章)在两种状态下需要的宽度完全一样,375px 下必然同时都放得下(未读已验证放得下,已读徽章现在与未读等宽,同理放得下)。已读的具体时间仍完整显示,只是挪到了徽章下方一行小字。缺点:已读时间从"一眼看到"变成"多看一行才看到",信息层级上把"精确到分钟"降为次要信息。信息完整性:年份 ✅ · 已读时间 ✅(挪位置,未删除) · 改动提示 ✅。
思路与前 4 个方案都不同:不再用"药丸徽章"这种独立色块,改成一句连续的灰色小字,只用一个色点 + 关键词变色做状态强调:● 已推送 · 2026-09-06 15:39 · 家长已读于 09-06 15:45。因为整行是普通文本(不是不可拆分的色块),即使宽度不够,也会按中文正常规则自然换行,不会出现"孤立徽章被挤下一行、右边一大片空白"的观感问题。色点使用与徽章相同的语义色(绿/橙),关键词加粗同色,弱化色块但不弱化辨识度。
优点:即使超过一行宽度也不会有"药丸被撞飞"的生硬观感,自然文本换行永远不难看,且这是纵向占用空间最省的方案(不需要为徽章预留独立行高/内边距)。缺点:去掉了色块背景和描边,状态的视觉强调力度比"徽章"弱,家长/门店在弱光或快速扫视时更容易看漏"已读/未读"三个字;这是唯一一个改变了"徽章"这个既有视觉语言的方案,需要长官确认是否接受。信息完整性:年份 ✅ · 已读时间 ✅ · 改动提示 ✅。
| 方案 | 375px 未读(需要px/可用303) | 375px 已读(需要px/可用303) | 393px 已读(需要px/可用321) | 纵向占用 | 是否改变徽章视觉语言 |
|---|---|---|---|---|---|
| 现状(基线) | ✅ 218.6/303 | ⚠️ 315.6/303(超12.6px·问题现场) | ✅ 315.6/321 | 1-2行(不定) | 否 |
| 方案1 有意两行 | 固定两行(与宽度无关) | 固定两行(与宽度无关) | 固定两行(与宽度无关) | 固定2行 | 否 |
| 方案2 徽章前置 | ✅ 218.6/303 | ⚠️ 315.6/303(超12.6px·总宽度未变,仍换行) | ✅ 315.6/321 | 1-2行(不定) | 否 |
| 方案3 状态块 | 2行(结构固定,单行内容<180px) | 2行(结构固定,单行内容<180px) | 2行(结构固定) | 固定2行+外框 | 否 |
| 方案4 徽章瘦身 | ✅ 218.6/303 | ✅ 218.6/303(徽章瘦身后与未读等宽,详情另起一行) | ✅ 218.6/321 | 2行(时间详情另起) | 否(仅缩短徽章文案) |
| 方案5 极简文字流 | ✅ 209.1/303 | ✅ 298.0/303(仅余5px余量,但即使超宽也是自然换行不生硬) | ✅ 298.0/321 | 最省 | 是(去掉色块/描边) |
数值来自页面内嵌 JS 在真实浏览器 headless Chromium 渲染后自动量化(每帧下方 .measure-result 同步展示),非人工估算。基线 375px 已读态实测 315.6/303(超 12.6px)与长官给出的实测事实完全吻合,验证本对比图测量方法有效。方案2 只是重排元素顺序,总宽度需求不变,375px 已读态实测仍会溢出换行(与基线数值完全一致),只是换行后的元素不同——如实标注,不算"解决了"问题,只是换行观感更自然。