UI 规范¶
📄 创建: 未记录
来源：Figma 设计文件「信云智联工业互联网平台设计规范-NEW」（Design System v1.0，北新建材生产管理系统）。AI 开发时以本文档为准。配色/字体用 HTML 原生渲染，组件附 Figma 官方渲染截图。
设计文件：Figma 原件（需团队权限）· 完整自包含 HTML 版见本仓库
ui-spec.html。
核心变化（相对旧版规范）
- 主色重构：品牌蓝由
#255894调整为#0D6CBD，并新增 Primary Dark#0B5EA8、Primary Navy#0F4A7C、Active Link#1873C0三级衍生色。 - 状态色体系重写：成功
#2DB52C保留；错误#D64A4E；新增独立的 Danger 危险色#FF4D4F；警告改为#FAAD14；信息提示复用主色蓝#0D6CBD。 - 中性色重排：正文
#1A2027、辅助文字#7F94A7、页面背景#F5F7FA、分割线#E7EBEE。 - 字体切换：中文字体由 Source Han Sans SC 切换为 Noto Sans SC；移除 YouSheBiaoTiHei；等宽字体沿用 Inter。
- 新增令牌体系：补齐 4px 基准的 间距 / 圆角 / 阴影 三套设计令牌。
- 组件库扩容：由 5 类基础组件扩展为 19 类。
配色系统¶
主色 Primary
品牌蓝 #0D6CBD — 主按钮、链接、激活态、信息提示。
主色 / 衍生蓝¶
#0D6CBD
Primary · 主色
#0B5EA8
Primary Dark · 悬停/按下
#0F4A7C
Primary Navy · 顶部导航装饰
#1873C0
Active Link · 侧栏激活文字
语义色 Semantic¶
#2DB52C
Success · 成功状态
#D64A4E
Error · 错误状态
#FF4D4F
Danger · 删除/强警告
#FAAD14
Warning · 警告提示
#0D6CBD
Info · 信息提示(复用主色)
中性色 Neutral¶
#1A2027
Text Primary · 正文色
#7F94A7
Text Muted · 辅助文字
#F5F7FA
Page BG · 页面背景
#E7EBEE
Divider · 分割线
#FFFFFF
White · 背景白/卡片
字体规范¶
字体家族
- Noto Sans SC — 中文主字体。字重：Regular · Medium · Bold。
- Inter — 等宽字体，用于代码、色值、数据展示。字重：Regular · Semi Bold。
Display / LargeNoto Sans SC · 30px Bold · 行高120% · 字距-0.5px
Heading / H1Noto Sans SC · 24px Bold · 行高130% · 字距-0.5px
Heading / H2Noto Sans SC · 20px Bold · 行高150% · 字距-0.5px
Heading / H3Noto Sans SC · 16px Medium · 行高150% · 字距0
Body / LargeNoto Sans SC · 14px Regular · 正文大字
Body / DefaultNoto Sans SC · 13px Regular · 正文基准
Body / SmallNoto Sans SC · 12px Regular · 次要正文
Label / DefaultNoto Sans SC · 12px Medium · 标签
Label / SmallNoto Sans SC · 10px Medium · 极小标签
Caption / DefaultNoto Sans SC · 10px Regular · 辅助说明
字体回退
若终端未装 Noto Sans SC，按 Source Han Sans SC → Microsoft YaHei 回退；Inter 缺失时按 ui-monospace, Menlo, monospace 回退。
间距令牌 Spacing（4px 基准）¶
| Token | 值 |
|---|---|
spacing/0 | 0px |
spacing/1 | 4px |
spacing/2 | 8px |
spacing/3 | 12px |
spacing/4 | 16px |
spacing/5 | 20px |
spacing/6 | 24px |
spacing/8 | 32px |
spacing/10 | 40px |
spacing/12 | 48px |
spacing/16 | 64px |
spacing/20 | 80px |
圆角令牌 Radius¶
| Token | 值 |
|---|---|
radius/none | 0px |
radius/sm | 4px |
radius/md | 8px |
radius/lg | 12px |
radius/xl | 14px |
radius/2xl | 16px |
radius/full | 9999px |
阴影令牌 Shadow¶
| Token | 值 | 用途 |
|---|---|---|
Shadow/Sm | 0 1px 3px rgba(0,0,0,0.06) | 小阴影 · 卡片默认 |
Shadow/Md | 0 4px 12px rgba(0,0,0,0.12) | 中阴影 · 弹窗/下拉 |
Shadow/Lg | 0 8px 24px rgba(0,0,0,0.15) | 大阴影 · 模态框 |
Shadow/Xl | 0 8px 24px + 0 20px 48px | 超大阴影 · 全屏弹层 |
Shadow/Inner | inset 0 0 0 2px rgba(13,108,189,0.2) | 内阴影 · 输入框聚焦 |
组件规范¶
共 19 类组件。下表为组件、变体与状态清单；其后的「组件视觉参考」附 Figma 官方渲染截图。
| 组件 | 变体 / 状态 | 说明 |
|---|---|---|
| Button | Size: S/M/L | Variant: Primary / Secondary / Danger / Ghost |
| Input | Size: S/M/L | State: Default / Focus / Error / Disabled |
| Select | Size: S/M/L | State: Default / Open / Disabled |
| Badge | Variant: Default / Success / Error / Warning / Info | Size: S/M |
| Tag | Variant: Default / Success / Warning / Error / Info | Variant: Default / Success / Warning / Error / Info |
| Alert | Variant: Success / Error / Warning / Info | Variant: Success / Error / Warning / Info |
| Notification | Type: Success / Error / Warning / Info | Type: Success / Error / Warning / Info |
| Card | 标题 + 描述 + 操作区 | 标题 + 描述 + 操作区 |
| Table | Header / Row(Default·Hover·Selected) / Footer(共 N 条) | Header / Row(Default·Hover·Selected) / Footer(共 N 条) |
| Checkbox | Default / Checked / Indeterminate / Disabled | Default / Checked / Indeterminate / Disabled |
| Radio | Default / Selected / Disabled | Default / Selected / Disabled |
| Switch | Off / On / Disabled | Off / On / Disabled |
| Tab | Default / Active / Disabled | Default / Active / Disabled |
| Tooltip | Position: Top / Bottom / Left / Right | Position: Top / Bottom / Left / Right |
| Progress | Default / Success / Warning / Error + ProgressCircle(70%) | Default / Success / Warning / Error + ProgressCircle(70%) |
| Breadcrumb | 首页 / 列表 / 详情 | 首页 / 列表 / 详情 |
| Pagination | Prev / 1·2·3·…·10 / Next | Prev / 1·2·3·…·10 / Next |
| Avatar | Size: S/M/L/XL + AvatarGroup(+N) | Size: S/M/L/XL + AvatarGroup(+N) |
| DropdownMenu | 选项一~四 / 分割线 / 删除 | 选项一~四 / 分割线 / 删除 |
组件视觉参考（Figma 渲染截图）¶
以下截图均由 Figma 官方 images 接口按 2x 渲染，与设计文件 Components 页一一对应，在文档中直接展示（图源托管于 CloudStudio 静态资源）。
Button¶
Button1 张
Size: S/M/L × Variant: Primary / Secondary / Danger / Ghost
Input¶
Input1 张
Size: S/M/L × State: Default / Focus / Error / Disabled
Select¶
Select1 张
Size: S/M/L × State: Default / Open / Disabled
Badge¶
Badge1 张
Variant: Default / Success / Error / Warning / Info × Size: S/M
Tag¶
Tag1 张
Variant: Default / Success / Warning / Error / Info
Alert¶
Alert1 张
Variant: Success / Error / Warning / Info
Notification¶
Notification1 张
Type: Success / Error / Warning / Info
Card¶
Card1 张
标题 + 描述 + 操作区
Table¶
Checkbox¶
Checkbox1 张
Default / Checked / Indeterminate / Disabled
Radio¶
Radio1 张
Default / Selected / Disabled
Switch¶
Switch1 张
Off / On / Disabled
Tab¶
Tab1 张
Default / Active / Disabled
Tooltip¶
Tooltip1 张
Position: Top / Bottom / Left / Right
Progress¶
Progress1 张
Default / Success / Warning / Error + ProgressCircle(70%)
Breadcrumb¶
Breadcrumb1 张
首页 / 列表 / 详情
Pagination¶
Pagination1 张
Prev / 1·2·3·…·10 / Next
Avatar¶
Avatar1 张
Size: S/M/L/XL + AvatarGroup(+N)
DropdownMenu¶
DropdownMenu1 张
选项一~四 / 分割线 / 删除
在代码中使用令牌
组件与主题模块（@bams-app/theme）的 --bams-* 变量对应：主色 #0D6CBD → --bams-primary、页面背景 #F5F7FA → --bams-page-bg、正文 #1A2027 → --bams-text-color、分割线 #E7EBEE → --bams-divider-color。
核心原则¶
- 品牌色
#0D6CBD用于主按钮、链接、激活态；衍生Primary Dark #0B5EA8（悬停/按下）、Primary Navy #0F4A7C（顶部导航）、Active Link #1873C0（侧栏激活文字）。 - 字体 Noto Sans SC（中文主字体）；Inter 用于代码/色值/数据；品牌标题不再单独使用 YouSheBiaoTiHei。
- 状态色 成功绿
#2DB52C、错误红#D64A4E、危险红#FF4D4F、警告琥珀#FAAD14、信息蓝#0D6CBD。 - 中性色 正文
#1A2027、辅助#7F94A7、页面背景#F5F7FA、分割线#E7EBEE。 - 间距/圆角/阴影 以 4px 间距基准 + 7 档圆角 + 5 档阴影令牌为准。
- 设计文件 Figma 原件（需团队权限）。