交付出件箱

← 返回出件箱

赵阳智脑 · UI 设计规范(dev2 版)

2026-08-24 · dev2 · 本规范全部令牌从现网代码统计得出,非设计稿臆造、非个人偏好。
统计口径:web/app/h5/ 全量 grep 频次排序 —— 用得最多的就是标准。
适用:H5 家长端 / 门店端(手机 + 平板)、后台管理页、所有效果图与原型图。

〇、为什么要重写(先说清楚,否则会被当成又一份没人用的文档)

仓库根已有一份 DESIGN.md(2026-04-12 最后改动),它规定:

"Blue is the new Green:完全弃用绿色 #16a34a,改用临床蓝 #3b82f6"

这份文档已与现网严重脱节,照它做会做出错的页面。物理证据:

⇒ 本规范取代 DESIGN.md。建议 root 将 DESIGN.md 标注「已作废 · 见本规范」,
否则后续仍会有人照它产出蓝色页面(Phase 74 家长端差点就是)。

一、色彩系统(频次即权威)

1.1 主色 · 医疗绿(全站唯一主色)

1.2 中性色(文字与线)

1.3 状态色

1.4 🔵 蓝系的唯一合法用途(不是全站禁用,但有边界)

现网确有蓝系(#2563eb 37 次 / #173a54 26 / #43617a 28 / #8aa0b3 36),
物理定位后发现它集中在两个专业模块:

app/h5/tablet/pane/panes/refractive-record/*   ← Phase 63 屈光检查记录(平板专业录入 · **10 文件**)
app/h5/eye-nav/components/*                    ← 护眼领航(2 文件)

另有第三处(自检 2026-08-24 补录,不是模块主色):

app/h5/chat/components/four-l-detail-sheet.tsx   ← 报告秒读详情 · 语音播放图标 text-[#2563eb]

这属功能性图标色(播放/朗读),1 个文件 2 处,不构成模块配色。

规则:
- ✅ 屈光记录(10 文件)与护眼领航(2 文件)沿用蓝系 —— 专业/临床语境,既定风格,不要去改
- ✅ 语音播放类功能图标可用 #2563eb(既有先例)
- ❌ 其余一切页面禁止引入蓝色作主色 —— 尤其家长端、门店首页、设置页、名片
- ⚠️ 图表里的"左眼 OS"用蓝 #6d8fd0 属数据区分色,不算主色,允许

复核命令(得 13 个文件:refractive-record 10 + eye-nav 2 + four-l-detail-sheet 1):
grep -rl "2563eb\|173a54\|43617a\|8aa0b3" web/app/h5/

二、圆角(频次即权威)

默认规则:卡片 16 → 输入/记录卡 12 → 提示条 10 → 药丸/按钮全圆角。
❌ 不要出现 rounded-3xl 以上(现网仅 6 次,属特例)。

三、字号与字重(频次即权威)

字重:
- 800(extrabold)= 数值、分组标题、强调
- 700(bold)= 按钮、label、tab、标签
- 600(semibold)= 次级说明
- 500/400 = 正文、占位

四、间距与尺寸

五、组件规格(可直接抄的完整 class)

5.1 主按钮(绿 · 全圆角)

w-full h-[33px] rounded-full bg-[#2fa37c] text-white text-[12.5px] font-bold
active:opacity-90 transition

提交类加大:h-[46px] rounded-[14px] text-[15px] font-bold

5.2 次按钮(白底描边)

rounded-full border border-[#e3eee7] bg-white px-3 h-[33px]
text-[12.5px] font-semibold text-[#4a6a5b] active:bg-[#f3faf6] transition

5.3 卡片

bg-white border border-[#e3eee7] rounded-2xl p-3.5 mt-2.5

5.4 输入框 / 只读回填框

/* 可输入 */
w-full bg-white border border-[#dbece3] rounded-xl px-3 py-2.5
text-[13px] font-medium text-[#1f2a24] placeholder:text-[#9fb3a8] min-h-[42px] outline-none

/* 只读派生值(系统自动算/识别回填)—— 必须绿底,让用户一眼看出"这不是我填的" */
w-full bg-[#eaf7f0] border border-[#9bdcc8] rounded-xl px-3 py-2.5
text-[13px] font-bold text-[#157c67] min-h-[42px]

5.5 药丸(多选/单选)

/* 未选 */ rounded-full px-3 py-1.5 text-[12px] leading-[18px]
           border border-[#e3eee7] bg-white text-[#4a6a5b] font-semibold
/* 选中 */ border-[#2fa37c] text-white font-bold
           style={{background:"linear-gradient(100deg,#1f3a32,#2fa37c)"}}

5.6 Tab 切换

/* 容器 */ flex bg-[#eef4f1] rounded-xl p-[3px]
/* 项   */ flex-1 text-center rounded-[9px] py-[7px] text-[12.5px] font-bold text-[#5a7a6e]
/* 选中 */ bg-white text-[#157c67] shadow-[0_1px_3px_rgba(15,82,69,.10)]

5.7 状态标签

/* 成功/AI */ rounded-full px-2 py-0.5 text-[10.5px] font-bold text-[#157c67] bg-[#e7f5ee]
/* 警告/手动 */ 同上,色改 text-[#9a4a00] bg-[#fff3dc]

5.8 顶栏

sticky top-0 z-10 bg-white border-b border-[#e3eee7]
  返回钮:w-9 h-9 rounded-full bg-[#f3faf6] + ChevronLeft w-5 h-5 text-[#1f3a30]
  标题:  text-[17px] font-bold text-[#0f172a]

5.9 页面背景(手机端 · 三层径向渐变)

radial-gradient(circle at 0% 0%,#d6f0e3 0%,rgba(0,0,0,0) 45%),
radial-gradient(circle at 100% 15%,#e0ecff 0%,rgba(0,0,0,0) 50%),
radial-gradient(circle at 50% 100%,#fff3d9 0%,rgba(0,0,0,0) 45%),#fbfdfa

配 backgroundAttachment: "fixed",长页滚动时不跟着跑。

六、图标

• 库:lucide-react@^0.344.0(与出图用的 lucide-static@0.344.0 必须同版)
• ⚠️ 0.344 与 latest 的 eye/file-text 路径不同,版本错=画成另一个图标
• 尺寸:正文内联 w-3.5 h-3.5 · 列表项 w-[14px] · 顶栏 w-5 h-5 · 缩略图 w-5 h-5
• ❌ 禁止自己画 SVG 灰块占位 —— 从真页面读 class="lucide lucide-xxx" 拿准确名字

七、图表(硬约束 · 违反会被打回)

• ❌ 非大屏目录禁止 import echarts
• 双眼数据配色:右眼 OD #2fa37c / 左眼 OS #6d8fd0(已成既定,不要改)
• 曲线规格:strokeWidth=2 · 点 r=3.5 白心描边 · 网格 #eef4f1 仅横线 ·
  轴文字 10px #94a3b8 · 线下区域渐变 主色 0.20 → 0
• 末点数值药丸:rx=8 圆角矩形 + 白字 800(OD 底 #0f5d47 / OS 底 #5f79b5)

八、视口与响应式

🔴 响应式铁律:
- 网格 ≤900 一行 2 个,1024 才 3 个 —— 视口定错整张图全错
- 手机端四格统计区是 2 列不是 4 列(4 列必横向溢出)
- 手机端页面大标题隐藏(顶栏已有,不重复);副标题 12px/行高 18
- 平板二级页:左菜单固定 240;抽屉在右侧内容区内,展开落 x=240(不盖菜单)

九、交付前必做(无证据 = 没做)

1. 色值全部扒自现网或效果图源码,一个都不自造
2. 量化对比:Playwright 分别量效果图与真页面 getComputedStyle,
   逐项比 fontSize/fontWeight/color,打印一致率 —— 不到 100% 不算完
3. 截图眼检:量得对 ≠ 看着对(文案语义、缺件、英文枚举漏翻译,只有肉眼能发现)
4. 溢出体检:判据 documentElement.scrollWidth > window.innerWidth
   ⚠️ 不要用「子元素 vs 父元素右缘」—— 父元素被撑大时该判据失效(实测报 0 而页面真溢出)
5. 豆腐块体检:非 ASCII 字符与私用区  比宽高;🔴🟢ⓘ 抓得到,全角抓不到 →
   拿不准 4× 放大 Read 眼看
6. 零外网 CDN(云机白名单挡 CDN,用了渲染不出=等于没验)
7. DOM 闭合标签差值改动前后一致

十、禁止清单

附:本规范的令牌来源(可复核)

# 色值频次(权威排序)
grep -rhoE "#[0-9a-fA-F]{6}" web/app/h5/ | tr 'A-F' 'a-f' | sort | uniq -c | sort -rn | head -20
# 圆角 / 字号 / 间距频次
grep -rhoE "rounded-\[?[0-9a-z]+\]?" web/app/h5/ | sort | uniq -c | sort -rn
grep -rhoE "text-\[[0-9.]+px\]"      web/app/h5/ | sort | uniq -c | sort -rn
grep -rhoE "gap-[0-9.]+|px-[0-9.]+|py-[0-9.]+" web/app/h5/ | sort | uniq -c | sort -rn
# 蓝系边界(证明它只在两个模块)
grep -rl "2563eb\|173a54\|43617a" web/app/h5/
# 图标与图表库版本
grep -E '"lucide-react"|"recharts"|"echarts"' web/package.json

云机环境 · 本规范所有数字均为上述命令的真实输出,未经修饰。