# RUNDA ToC 移动端设计组件系统规范

> 版本 1.6.0 | 基于 RUNDA iOS 应用 UI 截图逆向分析  
> 适用平台：iOS (iPhone)  
> 设计分辨率：390×852pt (3x → 1170×2556px)

---

## 0. 开发规范（必读）

**⚠️ 所有新页面创建和新功能开发必须遵循以下规则：**

1. **优先使用设计系统组件**  
   查阅 `COMPONENTS.md` 确认是否有现成组件，禁止重复造轮。

2. **严格参考 Origin 视觉风格**  
   `design-system/Origin/` 包含 42 张 APP 实际截图，所有 UI 实现必须与截图保持视觉一致性。

3. **遵循设计令牌**  
   所有样式值必须引用 `design-tokens.json` 或本文档定义的令牌，禁止硬编码。

4. **完整开发流程与验收标准**  
   详见 **[`DEVELOPMENT-RULES.md`](./DEVELOPMENT-RULES.md)** — 包含强制性检查清单、视觉验收流程、违规处理。

---

## 1. 设计原则

| 原则 | 说明 | 实践指导 |
|------|------|----------|
| **浅色为主** | 以暖灰为基底，清爽通透，突出内容 | 背景色使用 #FAFAFA/#F4F4F5，卡片用纯白，通过阴影区分层级 |
| **蓝色聚焦** | 单一强调色（品牌青蓝 #2A7F8B）引导注意力 | 仅用于 CTA、链接、进度、关键状态，不滥用 |
| **卡片承载** | 信息以卡片为单元组织，边界清晰 | 卡片间距 12pt，内边距 16pt |
| **呼吸感** | 大量留白，信息密度适中 | 段落间距 ≥ 24pt，列表项间距 ≥ 8pt |
| **渐进展示** | 复杂信息分层呈现，避免一次性过载 | 折叠/展开、步骤指示器、骨架屏 |
| **触觉反馈** | 所有可交互元素有明确的状态变化 | 按压缩放 0.96、高亮背景、haptic |

---

## 2. 色彩系统

### 2.1 调色板

```
┌─────────────────────────────────────────────────────┐
│  品牌色 / 强调色（青蓝）                              │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐     │
│  │ 50   │ │ 300  │ │ 500  │ │ 700  │ │ 900  │     │
│  │EDF6F7│ │5EBCC9│ │2A7F8B│ │15525A│ │07272B│     │
│  └──────┘ └──────┘ └──────┘ └──────┘ └──────┘     │
│                                                     │
│  中性色阶（与B端ink体系统一）                          │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐     │
│  │ White│ │ 50   │ │ 100  │ │ 200  │ │ 900  │     │
│  │FFFFFF│ │FAFAFA│ │F4F4F5│ │E4E4E7│ │18181B│     │
│  └──────┘ └──────┘ └──────┘ └──────┘ └──────┘     │
│                                                     │
│  功能色                                              │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐              │
│  │成功   │ │警告   │ │错误   │ │信息   │              │
│  │288A5C│ │F2AD0C│ │D83226│ │2272C3│              │
│  └──────┘ └──────┘ └──────┘ └──────┘              │
└─────────────────────────────────────────────────────┘
```

> 调色板口径收敛为**四套**：品牌色 / 中性色 / 功能色 / 辅助色（数据展示色，见第 12 章）。图表多系列色与分类色分别见第 13、14 章，只在「图表」页维护，预览页不重复展示。

### 2.2 语义色彩映射（默认 Light 主题）

| 用途 | 色值 | 说明 |
|------|------|------|
| 页面背景 | `#FAFAFA` | 暖灰底色，主屏幕背景 |
| 次级背景 | `#F4F4F5` | 列表底色、分区 |
| 卡片/容器背景 | `#FFFFFF` | 内容承载面（通过阴影/边框区分层级） |
| 暖色面 | `#F3E9D4` | 特殊卡片、品牌区域 |
| 抬升面（弹窗/Sheet） | `#FFFFFF` | 浮层背景 + 阴影 |
| 主文字 | `#18181B` | 标题、正文 |
| 次要文字 | `#52525B` | 描述、时间戳 |
| 占位/禁用文字 | `#A1A1AA` | 输入提示 |
| 分割线 | `#E4E4E7` | 列表分隔 |
| 强调/CTA | `#2A7F8B` | 按钮、链接、进度、选中态 |
| 强调按压态 | `#1D6770` | 按钮按下 |
| 选中背景 | `rgba(42,127,139,0.08)` | Tab 选中、列表高亮 |

### 2.3 色彩使用规则

1. **60-30-10 法则**：60% 暖灰背景 + 30% 白色面/深色文字 + 10% 蓝色强调
2. **对比度要求**：主文字与背景对比度 ≥ 7:1 (AAA)；次要文字 ≥ 4.5:1 (AA)
3. **状态色不做背景大面积填充**，仅用于小标签/图标/进度条
4. **渐变仅用于品牌元素**（启动页、高级功能入口），不用于普通按钮
5. **层级区分**：浅色主题通过阴影（而非背景色差）区分层级
6. **暖色面**：用于品牌相关区域（如任务卡片背景），营造自然温暖感
7. **背景纹理**：全局使用点状纹理（grain），与 B 端产品保持一致的视觉质感

### 2.4 背景纹理（与 B 端共享）

页面背景叠加微弱点状纹理，增加质感层次，避免纯色平面感：

```css
background-image: radial-gradient(rgba(0,0,0,0.018) 1px, transparent 1px);
background-size: 3px 3px;
background-attachment: fixed;
```

- **点色**：`rgba(0,0,0,0.018)` — 极低不透明度，肉眼几乎不可见但增加质感
- **点径**：1px
- **间距**：3px × 3px 网格
- **附着**：fixed（滚动时纹理不动，增加深度感）
- **适用范围**：页面 body 背景层，卡片/弹窗内部不叠加

### 2.5 跨产品设计语言一致性

以下视觉元素与 B 端 RUNDA ToB Design System (v2.6) 保持完全一致：

| 共享元素 | B 端令牌路径 | C 端令牌路径 | 说明 |
|----------|-------------|-------------|------|
| 中性色阶 | `color.ink.50~950` | `color.primitive.neutral` | 11 级灰阶完全一致 |
| 背景纹理 | `effect.grain` | `effect.grain` | 相同参数 |
| 主色 500 | `color.cdx.500` | `color.primitive.primary.500` | 同为 #2A7F8B |

---

## 3. 排版系统

### 3.1 字体栈

| 优先级 | 字体 | 用途 |
|--------|------|------|
| 1 | SF Pro Display | 标题（≥20pt） |
| 2 | SF Pro Text | 正文（<20pt） |
| 3 | SF Mono | 代码/技术内容 |
| 4 | PingFang SC | 中文回退 |
| 5 | **Manrope**（OFL 1.1） | **大数字展示组件**（MetricCard / GroupKPI / PricingCard 数值） |

> Manrope 为可变字体（weight 200–800），通过 Google Fonts CDN 或本地 `fonts/manrope-variable.woff2` 引入。仅用于 `typography.scale.numeric*` 三档 token，不替换正文字体栈。

### 3.2 字号阶梯

| 名称 | 大小 | 行高 | 字重 | 字族 | 用途 |
|------|------|------|------|------|------|
| Hero | 34pt | 41pt | Bold | primary | 启动页大标题 |
| Title 1 | 28pt | 34pt | Bold | primary | 页面主标题 |
| Title 2 | 22pt | 28pt | Bold | primary | 区块标题 |
| Title 3 | 20pt | 25pt | Semibold | primary | 卡片标题 |
| Headline | 17pt | 22pt | Semibold | primary | 列表项标题 |
| Body | 17pt | 22pt | Regular | primary | 正文内容 |
| Callout | 16pt | 21pt | Regular | primary | 辅助正文 |
| Subheadline | 15pt | 20pt | Regular | primary | 次要信息 |
| Footnote | 13pt | 18pt | Regular | primary | 时间戳/标签 |
| Caption 1 | 12pt | 16pt | Regular | primary | 角标/徽章 |
| Caption 2 | 11pt | 13pt | Regular | primary | 最小文字 |
| **Numeric Hero** | **56pt** | **60pt** | **Bold 700** | **display (Manrope)** | **大数字展示（计时器/步数/大 KPI）** |
| **Numeric Large** | **34pt** | **40pt** | **Bold 700** | **display (Manrope)** | **MetricCard 主数值 / PricingCard 金额** |
| **Numeric Medium** | **24pt** | **28pt** | **SemiBold 600** | **display (Manrope)** | **GroupKPI 数值** |

### 3.3 排版规则

- **标题不超过 2 行**，超出截断加省略号
- **正文段落行间距** = 字号 × 1.4（已含在 lineHeight 中）
- **中英混排**时英文使用 SF Pro，中文自动回退 PingFang SC
- **数字/金额**使用等宽数字特性（Tabular Figures），大数字展示组件使用 `typography.scale.numeric*` token（Manrope 字族）
- **代码块**使用 SF Mono 14pt，行高 20pt，背景 `#121212`

---

## 4. 间距系统

### 4.1 基础网格

基于 **4pt 网格**，所有间距为 4 的倍数：

```
4 → 8 → 12 → 16 → 20 → 24 → 32 → 40 → 48 → 64 → 80
```

### 4.2 语义间距

| 场景 | 值 | 说明 |
|------|-----|------|
| 屏幕水平内边距 | 16pt | 左右安全区 |
| 卡片内边距 | 16pt | 上下左右统一 |
| 卡片间距 | 12pt | 垂直方向卡片间 |
| 区块间距 | 24pt | 不同功能区之间 |
| 列表项间距 | 8pt | 同类列表项之间 |
| 图标与文字间距 | — | 水平排列时 |
| 按钮内边距 | 14pt × 24pt | 垂直 × 水平 |
| 输入框内边距 | 12pt × 16pt | 垂直 × 水平 |
| 导航栏高度 | 44pt | 不含状态栏 |
| Tab 栏高度 | 49pt | 不含安全区 |
| 安全区顶部 | 59pt | 刘海屏状态栏 |
| 安全区底部 | 34pt | Home Indicator |

### 4.3 间距使用原则

1. **关联性原则**：相关元素间距小（8pt），无关元素间距大（24pt+）
2. **层级递进**：同级 8pt → 父子 12pt → 区块 24pt → 页面段 32pt+
3. **触摸目标**：最小可点击区域 44×44pt
4. **呼吸感**：列表首尾额外留 16pt 空间

---

## 5. 圆角系统

| 名称 | 值 | 应用场景 |
|------|-----|----------|
| xs | 4pt | 小标签、代码块 |
| sm | 8pt | 小按钮、输入框内嵌元素 |
| md | 12pt | 按钮、输入框、Toast |
| lg | 16pt | 卡片、缩略图 |
| xl | 20pt | 大卡片 |
| 2xl | 24pt | 弹窗、底部 Sheet |
| full | 9999pt | 胶囊按钮、头像、Chip、进度条 |

### 圆角规则

- **卡片统一 16pt**，不混用不同圆角值
- **按钮默认 12pt**，胶囊型用 full
- **嵌套圆角**：内层圆角 = 外层圆角 - 内边距（如卡片 16pt 内的按钮用 12pt）
- **底部 Sheet** 仅顶部两角圆角 24pt
- **头像/状态点**始终 full（正圆）

---

## 6. 阴影系统

浅色主题下阴影是区分层级的主要手段，使用柔和低透明度黑色：

| 层级 | 阴影 | 边框 | 背景 | 场景 |
|------|------|------|------|------|
| 基础层 | 无 | 无 | `#FFFFFF` | 页面背景 |
| 内容层 | sm | `rgba(0,0,0,0.06)` | `#FFFFFF` | 卡片 |
| 浮动层 | md | 无 | `#FFFFFF` | 下拉菜单 |
| 遮罩层 | lg | 无 | `#FFFFFF` | 弹窗/Sheet |
| 最高层 | xl | 无 | `#FFFFFF` | Toast/Tooltip |

### 特殊阴影

- **强调按钮发光**：`0 4px 16px rgba(255,149,0,0.30)` — 仅用于主 CTA
- **卡片悬浮态**：`0 4px 12px rgba(0,0,0,0.08)`

---

## 7. 动效系统

### 7.1 时长规则

| 类型 | 时长 | 场景 |
|------|------|------|
| 即时 | 100ms | 按钮按压、开关切换 |
| 快速 | 200ms | 淡入淡出、颜色变化 |
| 标准 | 300ms | 页面转场、弹窗出现 |
| 慢速 | 450ms | 复杂动画、列表重排 |
| 延展 | 600ms | 骨架屏脉冲、进度填充 |

### 7.2 缓动曲线

| 名称 | 曲线 | 用途 |
|------|------|------|
| 默认 | `ease` | 通用过渡 |
| 弹性 | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Sheet 弹出、Toast 滑入 |
| 减速 | `ease-out` | 元素进入视口 |
| 加速 | `ease-in` | 元素离开视口 |

### 7.3 动效模式

| 模式 | 描述 | 参数 |
|------|------|------|
| 页面推入 | 从右向左滑入，前页缩小 | 300ms, easeInOut |
| Sheet 上滑 | 从底部弹出，带弹性 | 350ms, spring |
| 列表项出现 | 逐项淡入+上移 | 300ms, stagger 50ms |
| 骨架屏脉冲 | 明暗交替闪烁 | 1500ms, easeInOut, infinite |
| 进度条填充 | 从左到右平滑增长 | 600ms, easeOut |
| 按钮按压 | 缩放至 0.96 | 100ms, easeOut |
| Toast 通知 | 从顶部滑入 | 250ms, spring |
| Loading 加载 | 三星脉冲（大/中/小错峰缩放+透明度） | 大星 1733ms / 中星 1733ms 延迟 -240ms / 小星 1067ms, linear, infinite |

### 7.4 减弱动效

当系统开启「减弱动态效果」时：
- 所有过渡改为 **淡入淡出**（无位移）
- 时长减半
- 禁用弹性曲线
- 骨架屏改为静态占位

---

## 8. 图标系统

### 8.1 规格

| 属性 | 值 |
|------|-----|
| 风格 | 线性（Outlined） |
| 描边宽度 | 1.5pt |
| 端点 | 圆角（Round cap） |
| 拐角 | 圆角（Round join） |
| 光学尺寸 | 20×20pt 画布，16×16pt 安全区 |

### 8.2 尺寸

| 名称 | 大小 | 场景 |
|------|------|------|
| xs | 12pt | 角标内图标 |
| sm | 16pt | 行内图标、标签前缀 |
| md | 20pt | 列表项图标、按钮内图标 |
| lg | 24pt | Tab 栏图标、导航图标 |
| xl | 32pt | 空状态插图辅助 |
| 2xl | 40pt | 功能入口图标 |
| 3xl | 48pt | 空状态主图标 |

### 8.3 图标颜色

- 默认：`rgba(255,255,255,0.6)`（次要）
- 选中/激活：`#2A7F8B`（强调）
- 禁用：`rgba(255,255,255,0.25)`

---

## 9. 布局系统

### 9.1 页面结构

```
┌─────────────────────────────────┐
│         Status Bar (59pt)        │
├─────────────────────────────────┤
│         Navigation Bar (44pt)    │
│  [Back]     Title      [Action]  │
├─────────────────────────────────┤
│                                  │
│         Content Area             │
│         (Scrollable)             │
│                                  │
│    ┌─────────────────────┐      │
│    │      Card           │      │
│    └─────────────────────┘      │
│           12pt gap               │
│    ┌─────────────────────┐      │
│    │      Card           │      │
│    └─────────────────────┘      │
│                                  │
├─────────────────────────────────┤
│         Tab Bar (49pt)           │
├─────────────────────────────────┤
│      Home Indicator (34pt)       │
└─────────────────────────────────┘
```

### 9.2 网格

- **列数**：4 列（紧凑宽度）
- **列间距**：16pt
- **外边距**：16pt
- **内容最大宽度**：358pt（390 - 16×2）

### 9.3 Z 轴层级

| 层级 | z-index | 元素 |
|------|---------|------|
| 基础 | 0 | 页面内容 |
| 卡片 | 1 | 浮动卡片 |
| 粘性 | 10 | 吸顶导航/筛选栏 |
| 下拉 | 100 | 下拉菜单 |
| 遮罩 | 200 | 半透明遮罩层 |
| 弹窗 | 300 | Modal/Alert |
| Sheet | 400 | 底部 Sheet |
| Toast | 500 | 通知提示 |

---

## 10. 无障碍规范

| 维度 | 要求 |
|------|------|
| 最小触摸目标 | 44×44pt |
| 文字对比度 | 主文字 ≥ 7:1，次要 ≥ 4.5:1 |
| 焦点指示器 | 2pt 蓝色描边 + 4pt 偏移 |
| 动态字体 | 支持 iOS Dynamic Type（最大 ×1.5） |
| VoiceOver | 所有交互元素提供 accessibilityLabel |
| 减弱动效 | 尊重 `prefers-reduced-motion` |
| 色盲友好 | 状态不仅靠颜色区分，辅以图标/文字 |

---

## 文件清单

| 文件 | 说明 |
|------|------|
| `DESIGN.md` | 本文档 — 设计原则、色彩、排版、间距、圆角、阴影、动效、无障碍规范 |
| `COMPONENTS.md` | 组件库规范 — 所有可复用组件的视觉、状态、尺寸、交互行为 |
| `design-tokens.json` | 机器可读的设计令牌（本文档的数据源） |
| `design-preview.html` | 交互式预览页 — 组件实时预览、CSS 参考代码 |
| `DEVELOPMENT-RULES.md` | **开发规范（强制）** — 组件使用规则、Origin 视觉对齐标准、验收流程 |
| `Origin/*.png` | **视觉参考库（42 张）** — APP 实际截图，视觉对齐基准 |

---

*下一轮将输出：组件库分类、视觉样式、交互行为、状态定义等完整组件规范。*

---

## 12. v1.2.0 信息展示色板（健康/数据类 APP 专用）

基于 21 张实际 APP 组件截图逆向提取的鲜艳色板，专用于信息展示组件（MetricCard / GroupKPI / StatusBadge 等）。这些色彩**仅在数据展示组件内部使用**，不替代主色 `#2A7F8B`。

### 12.1 鲜艳色板（Vivid Palette）

| 用途 | 色值 | 背景透明度版本 | 来源 |
|------|------|---------------|------|
| 数据强调蓝 | `#4388FF` | `rgba(67,136,255,0.08)` | Frame 1321319913/523/996-1 大量蓝 |
| 数据橙 | `#FF9946` | `rgba(255,153,70,0.10)` | Frame 1321320044 趋势色 |
| 数据黄/琥珀 | `#FEBC41` | `rgba(254,188,65,0.12)` | Frame 1321320044 |
| 健康绿（成功） | `#02C456` | `rgba(2,196,86,0.10)` | Frame 120/1321319865/1321319996 大量绿 |
| 浅蓝面 | `#F5FAFF` | — | 多张图共有的浅蓝信息底 |
| 浅绿面 | `#EEFFF5` | — | Frame 1321320161 提示带底色 |

### 12.2 趋势色规则

| 趋势 | 色值 | 用途 |
|------|------|------|
| 上升 | `#02C456` | 数值变好、达标 |
| 下降 | `#D83226` | 数值变差、超标 |
| 持平 | `#71717A` | 无明显变化 |

> **注意**：「上升 = 绿」仅在「数值越大越好」的指标（步数/睡眠时长/达标率）成立。当指标方向相反（如血糖、血压超标）时，**上升应配红色**，遵循「好为绿、坏为红」的语义优先原则。

### 12.3 信息展示组件色彩使用规则

1. **色彩职能分离**
   - **主色 `#2A7F8B`**：CTA / 装饰条 / 选中态 / 链接
   - **鲜艳数据色**：仅用于 KPI 数值、状态徽章、数据胶囊
   - 二者不在同一组件内同时强调
2. **背景使用弱化**：所有数据色作为背景必须使用 alpha=0.08~0.14 的透明度，不大面积填实色
3. **深浅成对**：实色用于文字/图标，弱透明背景与之配对（如 `#4388FF` 文字 + `rgba(67,136,255,0.08)` 背景）
4. **图标遵循面性 / 线性图标规范**，禁止 emoji
5. **数值字体**：使用 `tabular-nums`（等宽数字）保证多行对齐

### 12.4 v1.2.0 新增组件清单

| 组件 | 类别 | 主要使用色 |
|------|------|-----------|
| MetricCard | 信息展示 | 中性色 + 趋势色 |
| GroupKPI | 信息展示 | Blue + Orange + Amber 三色组 |
| StatusBadge | 信息展示 | 4 种状态色（绿/蓝/黄/红）|
| InfoTable | 信息展示 | Blue 强调列 + 行交替灰 |
| AdviceTip | 信息展示 | 浅绿背景 + 绿勾图标 |
| InfoCapsule | 信息展示 | 浅蓝背景 + 蓝色数值 |
| ShareCard | 业务功能 | 黑色图标容器 + 主色动作 |
| SectionTitle | 布局 | 主色装饰条 |

---

## 13. v1.4.0 图表色板（数据可视化专用）

### 13.1 系列色板（10 色，按推荐顺序）

设计原则：从主色出发，按色相环偏移取色，确保任意 2 色的色差 ΔE ≥ 30，色盲友好。**所有系列色均为纯色，禁止使用渐变。**

| 序号 | 名称 | HEX | 用途 |
|------|------|-----|------|
| 1 | Primary | `#2A7F8B` | 主系列、单线图 |
| 2 | Blue | `#4388FF` | 第二系列（数据强调） |
| 3 | Amber | `#FEBC41` | 第三系列（黄色对比） |
| 4 | Orange | `#FF9946` | 警示/趋势 |
| 5 | Green | `#02C456` | 达成/上涨 |
| 6 | Purple | `#A855F7` | 多系列扩展 |
| 7 | Pink | `#EC4899` | 多系列扩展 |
| 8 | Teal | `#14B8A6` | 多系列扩展 |
| 9 | Rose | `#F43F5E` | 多系列扩展 |
| 10 | Indigo | `#6366F1` | 多系列扩展 |

### 13.2 面积填充色板（纯色低透明度，替代渐变）

面积图填充使用 `chart.seriesAlpha.*`，16% 透明度的纯色叠加，**不使用线性渐变**：

| 系列 | 填充色值 |
|------|---------|
| Primary | `rgba(42, 127, 139, 0.16)` |
| Blue | `rgba(67, 136, 255, 0.16)` |
| Amber | `rgba(254, 188, 65, 0.20)` |
| Green | `rgba(2, 196, 86, 0.16)` |

环形进度轨道 / 空状态背景使用 `chart.seriesSoft.*`（低饱和纯色）：

| 名称 | 色值 | 用途 |
|------|------|------|
| track | `#F0F0F2` | 环形进度轨道 |
| primary | `#E6F1F3` | 主色空状态背景 |
| blue | `#E8F0FF` | 蓝色空状态背景 |
| green | `#E1F8EB` | 绿色空状态背景 |

### 13.3 图表轴/网格色

| 元素 | 色值 | 备注 |
|------|------|------|
| 坐标轴线 | `#E4E4E7` (ink-200) | 1pt 实线 |
| 网格分割线 | `#F4F4F5` (ink-100) | 1pt 虚线 |
| 主轴标签 | `#71717A` (ink-500) | **10px**（移动端） |
| 次轴标签 | `#A1A1AA` (ink-400) | 10px |
| Tooltip 背景 | `rgba(24,24,27,0.92)` | 圆角 8pt，`confine:true` |
| Tooltip 文字 | `#FFFFFF` | **11px**（移动端） |

### 13.4 图表组件清单

| 组件 | 类型 | 实现 | 用途 |
|------|------|------|------|
| LineChart | 折线图 | ECharts | 趋势数据 |
| AreaChart | 面积图 | ECharts | 连续数据 + 累积感 |
| BarChart | 柱状图 | ECharts | 分类对比 |
| RingProgress | 环形进度 | ECharts pie | 完成率展示 |
| StackedBar | 叠加进度 | 纯 CSS | 构成占比 |
| MultiLine | 多系列折线 | ECharts | 多指标对比（≤4 条）|

### 13.5 图表使用原则

1. **禁用渐变**：所有图表 series/area/ring/bar 使用纯色。需要层次感时用透明度（`seriesAlpha`），不用 `LinearGradient`/`RadialGradient`
2. **主色优先**：单系列图表强制使用 `#2A7F8B`，体现品牌一致性
3. **色彩有意义**：上涨用绿、下跌用红，仅在「数值越大越好」语义下成立
4. **不滥用 3D**：禁用 ECharts 的 3D 效果（违反扁平化原则）
5. **空状态降级**：无数据时显示 EmptyState 组件，不显示空图表骨架

---

## 14. v1.5.0 分类色板（多分类饼/环图专用）

从 APP 截图逆向提取，经 ΔE76 相似度筛查（阈值 ΔE < 10 视为重复），最终新增 6 色，主色 `#2A7F8B` 不变。

### 14.1 chart.categorical 色板

| Token | HEX | 色相 | 用途 |
|-------|-----|------|------|
| `chart.categorical.ochre` | `#BC932F` | 赭石金 | 分类 1 |
| `chart.categorical.coral` | `#FD7548` | 鲜橙珊瑚 | 分类 2 |
| `chart.categorical.olive` | `#2A5B00` | 深橄榄绿 | 分类 3 |
| `chart.categorical.sky` | `#88CDFE` | 浅天蓝 | 分类 4 |
| `chart.categorical.amberLight` | `#F9B868` | 浅琥珀 | 分类 5 |
| `chart.categorical.violet` | `#847DFF` | 紫罗兰 | 分类 6 |

### 14.2 使用规则

1. **仅用于多分类饼图/环图**，不替代 `chart.series`（趋势/折线/柱状图仍用 series）
2. **顺序固定**：按表格顺序依次分配，不随意调换
3. **禁用渐变**：与 series 一致，纯色填充
4. **跳过颜色说明**：navy `#015890`（ΔE=5.8 ≈ info.600）、brick `#AF5234`（ΔE=6.2 ≈ coral.600）、teal `#007494`（ΔE=13 ≈ primary.500）、deepTeal `#00635E`（ΔE=10.3 ≈ primary.600）均因与现有色板过近而跳过

---

## 文件变更日志

| 版本 | 日期 | 变更 |
|------|------|------|
| v1.0 | 2026-05-27 | 初始版本：基础令牌 + 6 大组件分类 |
| v1.1 | 2026-05-27 | 切换主色为 #2A7F8B；中性色与 B 端 ink 体系统一 |
| v1.2 | 2026-05-28 | 新增 8 个信息展示组件（MetricCard/GroupKPI 等） |
| v1.3 | 2026-05-28 | 新增图表色板 + 6 个 ECharts 图表组件 |
| v1.4 | 2026-05-28 | 图表全面适配移动端 app 视觉；移除所有渐变，series/area/ring/bar 改为纯色（`seriesAlpha` 16% 纯色叠加替代 `areaGradient`；新增 `seriesSoft` 轨道色） |
| v1.5 | 2026-05-28 | 新增 `chart.categorical` 分类色板（6 色）；来源：APP 截图逆向提取，ΔE76 去重，主色不变 |
| v1.6 | 2026-05-28 | 嵌入 Manrope 可变字体（OFL 1.1）；新增 `fontFamily.display` token；新增 `numericHero`（56pt）/ `numericLarge`（34pt）/ `numericMedium`（24pt）三档大数字展示 scale |
| v1.6 | 2026-05-28 | 系统性审查后补充 14 个组件（Tooltip/Accordion/Stepper/Rate/Breadcrumb/KeyValuePair/Callout/AvatarGroup/SegmentedProgress/SwipeActions/NotificationBanner/ContextMenu/FilterBar/StepsHorizontal）；按既有分类（表单/数据展示/导航/反馈/基础）合并到对应组件章节，不再独立分组 |