「结论已改动,尚未再次推送」提示样式 · 三方案对比

位置:门店手机端 视光档案记录查看页 → 门店结论 tab → 推送状态区(下方)。
现状代码:web/app/h5/store-refractive/[patientId]/record/[recordId]/page.tsx:800-804—— 灰色小字 + 括号,独立一行,视觉权重最弱。本图三方案均按同一手机帧局部对比,其余元素(结论草稿框 / 两个操作按钮 / 已推送时间戳与徽章 / 推送按钮)保持 1:1 真实样式不变,仅推送状态区下方的提示行做变体。

门店结论
近期检查结果显示裸眼视力较上次下降,建议每 3 个月复查一次,注意用眼卫生与户外活动时长。
已推送 · 09-06 15:39 家长未读
(结论已改动,尚未再次推送)
方案 A · 保持现状现状
视觉权重最弱。11px 灰色小字(#6E6E73),与说明性文字同级,容易被当成普通备注一带而过。
出现时机仅当 store_conclusion_text !== store_conclusion_pushed_text(草稿与已推送快照不一致)时显示,独立成行。
优点不新增视觉噪音,页面整体最干净;改动量为零(已是当前上线状态)。
缺点灰色小字容易被忽略,门店可能改完结论就划走,忘记点「推送给家长」,家长端仍看旧结论。
门店结论
近期检查结果显示裸眼视力较上次下降,建议每 3 个月复查一次,注意用眼卫生与户外活动时长。
已推送 · 09-06 15:39 家长未读
结论已改动,尚未再次推送
方案 B · 橙色小字一行改动
视觉权重中等。仍是 11px 单行文字,但去掉括号、换成橙色(#b8641f)+ 警示三角图标,比方案 A 更醒目,但不占独立色块。
出现时机与方案 A 相同的判断条件,只是渲染方式不同——原地换色换图标,不改变布局占位。
优点提醒强度提升但不打乱页面节奏,不新增一整块背景色,改动最小。
缺点仍是小字级别,在长文本结论、手机小屏、注意力分散的场景下依然可能被扫过去。
门店结论
近期检查结果显示裸眼视力较上次下降,建议每 3 个月复查一次,注意用眼卫生与户外活动时长。
已推送 · 09-06 15:39 家长未读
结论已改动,尚未再次推送
方案 C · 橙色提示条改动最大
视觉权重最强。整块橙底圆角提示条(背景 #fff8ed / 边框 #fde7c7 / 字色 #9a4a00),与本项目「还差 N 项」等既有警示条同款样式,一眼可辨。
出现时机与方案 A/B 相同判断条件,但渲染成独立色块而非纯文字行,占位比前两者高(多约 8px padding + 边框)。
优点提醒强度最高,门店基本不可能划过去;与项目里其它警示条视觉语言一致,用户学习成本低。
缺点占用纵向空间最多,且与上方「家长未读」橙色徽章的橙色系相邻出现,同一屏两处橙色可能造成视觉竞争、削弱各自的警示效果。

方案 B 换色变体 —— 橙色与旁边「家长未读」徽章撞色,换个颜色对比

形态不变(去括号 + 警示图标 + 单行小字),只换文字/图标颜色。候选色值全部 grep 自本项目已用令牌,0 自造;每个变体旁边保留「家长未读」橙徽章,用于直接观察撞色与否(单看色块看不出撞不撞,必须放回同一帧对比)。

门店结论
近期检查结果显示裸眼视力较上次下降,建议每 3 个月复查一次,注意用眼卫生与户外活动时长。
已推送 · 09-06 15:39 家长未读
结论已改动,尚未再次推送
变体1 · 错误红 #b3402f
出处:record/[recordId]/page.tsx:1124(ANALYSIS_ERROR_TEXT常量),同色值另见 :582、:739(本页 loadError / conclusionError 两处已用)。
是否撞色:与「家长未读」橙徽章(#b8641f)色相不同(红 vs 橙),并排不撞色。
视觉强度:略高于原橙色小字方案B,红色在中文语境里通常关联"错误/失败",用在"尚未推送"这种提醒性场景语义偏重,可能让门店误以为操作失败了。
门店结论
近期检查结果显示裸眼视力较上次下降,建议每 3 个月复查一次,注意用眼卫生与户外活动时长。
已推送 · 09-06 15:39 家长未读
结论已改动,尚未再次推送
变体2 · 深灰/近黑 #000
出处:本页已大量用作主文字色,如 record/[recordId]/page.tsx:592、593、613、654、723、995(标题/正文黑)。比现有 #6E6E73 更深更实。
是否撞色:与橙徽章色相完全不同,不撞色;但因为是本页最常用的"普通正文黑",警示辨识度可能不如彩色方案,容易被当成普通说明文字。
视觉强度:比方案A原灰色(#6E6E73)更重,但语义中性,不天然带"警示"含义,需要靠图标承担全部警示信号。
变体3 · 信息蓝 —— 未渲染(本项目此处无可用令牌,如实说明,不自造)
grep 全项目发现 #2563eb 蓝色系确有实际样式用值,但全部出现在平板端(tablet)组件(如 frame5-record-entry.tsx、patient-rail.tsx、parent-readonly-dialog.tsx等),不属于本页所在的 h5 手机端(门店/家长消费侧)皮肤家族。
本页所在的 h5 手机端家族里,反而有 3 处显式代码注释明确禁止引入蓝色:
· record/[recordId]/page.tsx:5,68——"不跨路由树 import 平板端(蓝系 #2563eb)组件本体"
· record/new/page.tsx:9——同样禁止整块导入蓝色令牌组件
· [patientId]/page.tsx:44——"那个组件是蓝色令牌(#2563eb),本页苹果浅色皮是绿系,混用会串色"
结论:蓝色是平板端专属色系,h5 手机端本身用绿色系为主色,引入蓝色会重演"PC 色画手机端"同类跨皮肤混色问题,故本方案不渲染蓝色变体,仅如实报告发现。

附:另检查过 #f59e0b(amber),出处 store-refractive/page.tsx:215,231,但其真实语义是"示范档案区"标记色(非警示色),语义不符,未采纳为候选。

色值 / 样式出处清单(0 自造,全部 grep 自本项目代码)

元素色值 / 样式出处 file:line
GREEN(绿色系 · 推送按钮/结论标题竖条)#2fa37crecord/[recordId]/page.tsx:52
GREY(已推送时间戳 · 方案A灰字)#6E6E73record/[recordId]/page.tsx:53
「家长未读」徽章底色#fdf1e3record/[recordId]/page.tsx:55
「家长未读」徽章字色 / 方案B橙字#b8641frecord/[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 12record/[recordId]/page.tsx:733-736
「复制本次分析」/「保存结论」按钮白底 / border #e2e8f0 / 字色 #334155 / radius 999 / height 36 / 12.5pxrecord/[recordId]/page.tsx:750-761
「推送给家长」按钮背景 GREEN / radius 999 / height 44 / 14px / 白字record/[recordId]/page.tsx:852-857
方案A 提示文案原句(结论已改动,尚未再次推送)record/[recordId]/page.tsx:802
方案C 提示条底色#fff8edrecord/new/page.tsx:71(ORANGE_BG)
方案C 提示条边框#fde7c7record/new/page.tsx:72(ORANGE_BORDER)
方案C 提示条字色/图标色#9a4a00record/new/page.tsx:70(ORANGE_TEXT)
方案C 提示条布局 classflex items-center gap-1.5 rounded-[10px] px-3 py-2 text-[12.5px] font-boldrecord/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 错误红#b3402frecord/[recordId]/page.tsx:1124(ANALYSIS_ERROR_TEXT常量),同色值另见 :582、:739
变体2 深灰/近黑#000record/[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#f59e0bstore-refractive/page.tsx:215,231(语义是"示范档案区"标记,非警示色,不适用)