位置:门店手机端 视光档案记录查看页 → 门店结论 tab → 推送状态区(下方)。
现状代码:web/app/h5/store-refractive/[patientId]/record/[recordId]/page.tsx:800-804——
灰色小字 + 括号,独立一行,视觉权重最弱。本图三方案均按同一手机帧局部对比,其余元素(结论草稿框 / 两个操作按钮 / 已推送时间戳与徽章 / 推送按钮)保持 1:1 真实样式不变,仅推送状态区下方的提示行做变体。
| 视觉权重 | 最弱。11px 灰色小字(#6E6E73),与说明性文字同级,容易被当成普通备注一带而过。 |
| 出现时机 | 仅当 store_conclusion_text !== store_conclusion_pushed_text(草稿与已推送快照不一致)时显示,独立成行。 |
| 优点 | 不新增视觉噪音,页面整体最干净;改动量为零(已是当前上线状态)。 |
| 缺点 | 灰色小字容易被忽略,门店可能改完结论就划走,忘记点「推送给家长」,家长端仍看旧结论。 |
| 视觉权重 | 中等。仍是 11px 单行文字,但去掉括号、换成橙色(#b8641f)+ 警示三角图标,比方案 A 更醒目,但不占独立色块。 |
| 出现时机 | 与方案 A 相同的判断条件,只是渲染方式不同——原地换色换图标,不改变布局占位。 |
| 优点 | 提醒强度提升但不打乱页面节奏,不新增一整块背景色,改动最小。 |
| 缺点 | 仍是小字级别,在长文本结论、手机小屏、注意力分散的场景下依然可能被扫过去。 |
| 视觉权重 | 最强。整块橙底圆角提示条(背景 #fff8ed / 边框 #fde7c7 / 字色 #9a4a00),与本项目「还差 N 项」等既有警示条同款样式,一眼可辨。 |
| 出现时机 | 与方案 A/B 相同判断条件,但渲染成独立色块而非纯文字行,占位比前两者高(多约 8px padding + 边框)。 |
| 优点 | 提醒强度最高,门店基本不可能划过去;与项目里其它警示条视觉语言一致,用户学习成本低。 |
| 缺点 | 占用纵向空间最多,且与上方「家长未读」橙色徽章的橙色系相邻出现,同一屏两处橙色可能造成视觉竞争、削弱各自的警示效果。 |
形态不变(去括号 + 警示图标 + 单行小字),只换文字/图标颜色。候选色值全部 grep 自本项目已用令牌,0 自造;每个变体旁边保留「家长未读」橙徽章,用于直接观察撞色与否(单看色块看不出撞不撞,必须放回同一帧对比)。
#b3402frecord/[recordId]/page.tsx:1124(ANALYSIS_ERROR_TEXT常量),同色值另见 :582、:739(本页 loadError / conclusionError 两处已用)。#000record/[recordId]/page.tsx:592、593、613、654、723、995(标题/正文黑)。比现有 #6E6E73 更深更实。#2563eb 蓝色系确有实际样式用值,但全部出现在平板端(tablet)组件(如 frame5-record-entry.tsx、patient-rail.tsx、parent-readonly-dialog.tsx等),不属于本页所在的 h5 手机端(门店/家长消费侧)皮肤家族。record/[recordId]/page.tsx:5,68——"不跨路由树 import 平板端(蓝系 #2563eb)组件本体"record/new/page.tsx:9——同样禁止整块导入蓝色令牌组件[patientId]/page.tsx:44——"那个组件是蓝色令牌(#2563eb),本页苹果浅色皮是绿系,混用会串色"
附:另检查过 #f59e0b(amber),出处 store-refractive/page.tsx:215,231,但其真实语义是"示范档案区"标记色(非警示色),语义不符,未采纳为候选。
| 元素 | 色值 / 样式 | 出处 file:line |
|---|---|---|
| GREEN(绿色系 · 推送按钮/结论标题竖条) | #2fa37c | record/[recordId]/page.tsx:52 |
| GREY(已推送时间戳 · 方案A灰字) | #6E6E73 | record/[recordId]/page.tsx:53 |
| 「家长未读」徽章底色 | #fdf1e3 | record/[recordId]/page.tsx:55 |
| 「家长未读」徽章字色 / 方案B橙字 | #b8641f | record/[recordId]/page.tsx:56(方案B同色值另见 record/new/page.tsx:73,818 纯文字警示用法) |
| 「家长未读」徽章边框 | rgba(184,100,31,.35) | record/[recordId]/page.tsx:792-796 |
| 结论草稿输入框容器 | border 1px solid #e2e8f0 / radius 12 / padding 12 | record/[recordId]/page.tsx:733-736 |
| 「复制本次分析」/「保存结论」按钮 | 白底 / border #e2e8f0 / 字色 #334155 / radius 999 / height 36 / 12.5px | record/[recordId]/page.tsx:750-761 |
| 「推送给家长」按钮 | 背景 GREEN / radius 999 / height 44 / 14px / 白字 | record/[recordId]/page.tsx:852-857 |
| 方案A 提示文案原句 | (结论已改动,尚未再次推送) | record/[recordId]/page.tsx:802 |
| 方案C 提示条底色 | #fff8ed | record/new/page.tsx:71(ORANGE_BG) |
| 方案C 提示条边框 | #fde7c7 | record/new/page.tsx:72(ORANGE_BORDER) |
| 方案C 提示条字色/图标色 | #9a4a00 | record/new/page.tsx:70(ORANGE_TEXT) |
| 方案C 提示条布局 class | flex items-center gap-1.5 rounded-[10px] px-3 py-2 text-[12.5px] font-bold | record/new/page.tsx:2230-2235(「还差 N 项」提示条,同款复用) |
| 警示三角图标(AlertTriangle) | lucide-react 图标,本图内联同形 SVG(零 CDN) | 导入见 record/new/page.tsx:35;用例见 record/new/page.tsx:737,2233(本页 record/[recordId]/page.tsx 当前未导入此图标,方案B/C 需新增 import) |
| —— 以下为 9-16 增量新增「方案B换色变体」候选色值 —— | ||
| 变体1 错误红 | #b3402f | record/[recordId]/page.tsx:1124(ANALYSIS_ERROR_TEXT常量),同色值另见 :582、:739 |
| 变体2 深灰/近黑 | #000 | record/[recordId]/page.tsx:592,593,613,654,723,995(本页既有标题/正文黑) |
| 变体3 信息蓝 —— 未采用 | #2563eb(发现值,未渲染进图) | 实际样式用值全在平板端(如 frame5-record-entry.tsx);h5 手机端家族反有 3 处显式禁用注释:record/[recordId]/page.tsx:5,68 / record/new/page.tsx:9 / [patientId]/page.tsx:44 |
| 检查过但未采用:amber | #f59e0b | store-refractive/page.tsx:215,231(语义是"示范档案区"标记,非警示色,不适用) |