信云智联工业互联网平台 · UI 规范
基于 Figma 设计文件「信云智联工业互联网平台设计规范-NEW」(Design System v1.0) 自动生成。AI 开发以本规范为准；所有组件截图均来自 Figma 官方渲染接口，与设计原件一一对应。
说明：本文档为自包含单文件 HTML，所有组件截图以 base64 内联，可直接离线打开、归档或嵌入知识库。对应知识中心 Markdown 版本见
规范章程/ui-spec.md。
配色系统
统一配色覆盖品牌主色、语义状态色与中性色，组件与主题通过 --bams-* 变量消费。
主色 / 衍生蓝
#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（Source Han Sans SC 的 Google Fonts 版本）；Inter 用于代码、色值、数据展示。回退链：Source Han Sans SC → Microsoft YaHei。
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 · 辅助说明
间距令牌 Spacing（4px 基准）
基于 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
7 档圆角令牌，组件尺寸严格对齐。
radius/none
0px
radius/sm
4px
radius/md
8px
radius/lg
12px
radius/xl
14px
radius/2xl
16px
radius/full
9999px
阴影令牌 Shadow
5 档阴影令牌，覆盖卡片、弹窗、模态框与输入框聚焦态。
| 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 官方渲染截图（含变体与状态）。截图与设计文件 Components 页一一对应。
Button1 张渲染图
Size: S/M/L × Variant: Primary / Secondary / Danger / Ghost
Input1 张渲染图
Size: S/M/L × State: Default / Focus / Error / Disabled
Select1 张渲染图
Size: S/M/L × State: Default / Open / Disabled
Badge1 张渲染图
Variant: Default / Success / Error / Warning / Info × Size: S/M
Tag1 张渲染图
Variant: Default / Success / Warning / Error / Info
Alert1 张渲染图
Variant: Success / Error / Warning / Info
Notification1 张渲染图
Type: Success / Error / Warning / Info
Card1 张渲染图
标题 + 描述 + 操作区
Table5 张渲染图
Header / Row(Default·Hover·Selected) / Footer
Checkbox1 张渲染图
Default / Checked / Indeterminate / Disabled
Radio1 张渲染图
Default / Selected / Disabled
Switch1 张渲染图
Off / On / Disabled
Tab1 张渲染图
Default / Active / Disabled
Tooltip1 张渲染图
Position: Top / Bottom / Left / Right
Progress1 张渲染图
Default / Success / Warning / Error + ProgressCircle(70%)
Breadcrumb1 张渲染图
首页 / 列表 / 详情
Pagination1 张渲染图
Prev / 1·2·3·…·10 / Next
Avatar1 张渲染图
Size: S/M/L/XL + AvatarGroup(+N)
DropdownMenu1 张渲染图
选项一~四 / 分割线 / 删除
核心变化（相对旧版规范）
- 主色重构：品牌蓝由 #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 类。
核心原则
- 品牌色 #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 原件（需团队权限）。