# 深蓝色 UI 规范 · 03 数据展示（§22–§34）

> 《深蓝色 UI 规范》分册之一。基础令牌见 `00-基础-色彩字体间距.md`，可 import 的变量见 `tokens.css`，总目录与 §索引见 `README.md`。`§N` 编号全局唯一。

**本篇目录（§22–§34）**：`22` 卡片 · `23` 折叠面板 · `24` 描述列表 · `25` 列表 · `26` 时间轴(节点型) · `27` 进度条 · `28` 表格 · `29` 标签 · `30` 树形控件 · `31` 时间轴(长文本) · `32` 对话框 · `33` 全局提示 · `34` 气泡确认

---

## 22. 卡片（Card）

> 对应设计稿「卡片」基本形式与组合（分组信息卡片）。覆盖**基础卡片**（标题 + 操作）、**新增占位卡片**、**信息卡片**（头像 + 字段 + 标签 + 统计）三类。容器 / 阴影 / 占位卡片配色直接沿用 §3.1，按钮 / 文本按钮沿用 §5，标签沿用 §15.2.1。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。

### 22.1 基础卡片（标题 + 操作）

```
┌───────────────────────────┐
│ ▎标题16PX        ✏️  ⋯    │  ← 标题栏（左竖条 + 标题 + 右操作）
├───────────────────────────┤
│  卡片内容 …               │
└───────────────────────────┘
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 卡片背景 | `#122347` (ZS-004-08) | §3.1.2 |
| 卡片边框 | `1px solid #1A2F5A` (ZS-004-07) | — |
| 卡片圆角 | `4px` | §4.1 |
| 卡片阴影 | `0 2px 8px rgba(22,119,255,0.12)`（§3.1.4 一级） | §3.1.4 |
| 标题文字 | `16px Bold`，`#C5CFE0` (ZS-004-02) | §3.1.2 |
| 标题左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §1.1.6 |
| 编辑图标 ✏️ | `16px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` | §3.1.2 |
| 更多图标 ⋯ | `16px`，`#6E88B0`，hover `#4096FF` | — |
| 标题栏内边距 | `--spacing-4` (16px) | §7.1 |
| 标题栏底分割线 | `1px solid #1A2F5A` | §6.1 |
| 内容区内边距 | `--spacing-4` (16px) | §7.1 |
| 卡片 hover | 阴影升二级 `0 4px 16px rgba(22,119,255,0.24)` | §3.1.4 |

### 22.2 新增占位卡片

虚线描边的「+ 新增」入口，沿用 §3.1.3。

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 背景 | `#0C1836` (ZS-004-09，与外层同色营造凹陷) | §3.1.3 |
| 虚线边框 | `1px dashed #4096FF` (ZS-002-05) | §3.1.3 |
| 加号图标 `+` | `24px`，`#4096FF`，居中 | §3.1.3 |
| 圆角 | `4px` | §4.1 |
| Hover | 边框 + 加号 `#1677FF` (ZS-002-06)，背景 `rgba(22,119,255,0.08)` | — |
| 尺寸 | 与同行内容卡片等高等宽 | — |

### 22.3 信息卡片（头像 + 字段 + 标签 + 统计）

用于「分组信息卡片」——展示个体 / 媒体 / 人物等档案条目。

```
┌──────────────────────────────────────┐
│ ▎个体                     ✏️ 标签  ✕  │  ← 头部：类型标识 + 操作
│ 👤  姓名（Name-name）      🔖 在线标签 │  ← 头像 + 主名 + 状态标签
│ 基本信息  样下功能▾  线上发声▾          │  ← 字段/操作行
│ 国家/地区：国家恒及                    │
│ 职能：职务职务                         │
│ 关注度排行：#话题二 #话题二 #话题二     │  ← 标签组
└──────────────────────────────────────┘
```

#### 22.3.1 结构与配色

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 卡片容器 | 同 §22.1（背景 `#122347` / 边框 `#1A2F5A` / 圆角 `4px` / 一级阴影） | — |
| 类型标识（个体 / 媒体）左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §22.1 |
| 类型标识文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — |
| 头像占位 | 方/圆 `40px`，底色 `#1A2F5A` (ZS-004-07)，图标 `#6E88B0` | — |
| 主名文字 | `16px Medium`，`#FFFFFF` | — |
| 字段标签（"国家/地区：") | `14px Regular`，`#6E88B0` (ZS-004-04) | — |
| 字段值 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — |
| 行内操作（"线上发声 ▾"） | 沿用 §5.3.1 文字+下拉按钮（默认 Outline） | §5.3.1 |
| 状态标签（"在线"等） | 沿用 §15.2.1 Tag（实心 `#1677FF` + 白字）或成功态 `#13C2C2`（ZS-003-06） | §15.2.1 / §1.1.4 |
| 话题标签（`#话题`） | `12px`，文字 `#4096FF` (ZS-002-05)，背景 `rgba(22,119,255,0.12)`，圆角 `2px` | — |
| 头部操作图标 ✏️ / ✕ | `16px`，`#6E88B0`，hover `#4096FF` | §22.1 |
| 字段行纵向间距 | `--spacing-2` (8px) | §7.1 |
| 区块之间间距 | `--spacing-3` (12px) | §7.1 |

#### 22.3.2 带统计的媒体卡片变体

媒体类卡片在字段区下方追加「平台 + 数值」统计行（如 Facebook 群组数量）：

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 平台图标 | `16px`，原色或 `#4096FF` 单色化 | — |
| 统计标签（"群组数量"） | `14px Regular`，`#6E88B0` (ZS-004-04) | — |
| 统计数值（数字） | `16px Bold`（D-DIN），`#C5CFE0` (ZS-004-02) | §2.1.2 |
| 统计行分隔 | `1px solid #2D4473`（弱化） | §6.1 |

### 22.4 卡片栅格与间距

| 规则 | 取值 | 来源 |
|------|------|------|
| 卡片之间横向间距 | `--spacing-6` (32px) | §7.1 |
| 卡片之间纵向间距 | `--spacing-6` (32px) | §7.1 |
| 卡片内容内边距 | `--spacing-4` (16px) | §7.1 |
| 分组标题（"分组信息卡片"）→ 卡片区 | `--spacing-5` (24px) | §7.1 |

### 22.5 CSS Token 参考

```css
:root {
  /* 卡片容器 */
  --card-bg:            #122347;   /* ZS-004-08 */
  --card-border:        #1A2F5A;   /* ZS-004-07 */
  --card-radius:        4px;
  --card-shadow:        0 2px 8px rgba(22,119,255,0.12);
  --card-shadow-hover:  0 4px 16px rgba(22,119,255,0.24);

  /* 标题 */
  --card-title-text:    #C5CFE0;   /* ZS-004-02 */
  --card-title-bar:     #1677FF;   /* ZS-002-06 左竖条 */
  --card-action-icon:   #6E88B0;   /* ZS-004-04 */
  --card-action-hover:  #4096FF;   /* ZS-002-05 */

  /* 新增占位 */
  --card-add-bg:        #0C1836;   /* ZS-004-09 */
  --card-add-border:    #4096FF;   /* ZS-002-05 虚线 */
  --card-add-hover:     #1677FF;   /* ZS-002-06 */

  /* 信息卡片 */
  --card-avatar-bg:     #1A2F5A;   /* ZS-004-07 */
  --card-name-text:     #FFFFFF;
  --card-field-label:   #6E88B0;   /* ZS-004-04 */
  --card-field-value:   #C5CFE0;   /* ZS-004-02 */
  --card-topic-tag-text:#4096FF;   /* ZS-002-05 */
  --card-topic-tag-bg:  rgba(22,119,255,0.12);
  --card-stat-num:      #C5CFE0;   /* ZS-004-02 */
  --card-stat-divider:  #2D4473;   /* ZS-004-06 */
}
```

---

## 23. 折叠面板（Collapse / 手风琴）

> 对应设计稿「折叠」。覆盖**基础折叠**（标题 + 描述）、**列表概览折叠 + 图标**、**手风琴折叠**（同时仅一项展开）、**列表项折叠**（右侧带计数 + 展开链接）四类。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §8 导航下拉 / §9.2 锚点一致。

### 23.1 基础折叠（标题 + 描述）

```
收起态:                       展开态:
┌────────────────────────┐    ┌────────────────────────┐
│ 标题                 ▾ │    │ 标题                 ▴ │
│ 描述文字说明           │    │ 描述文字说明           │
└────────────────────────┘    ├────────────────────────┤
                              │ 展开后的内容区 …       │
                              └────────────────────────┘
```

#### 23.1.1 头部规格

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 头部背景 | `#122347` (ZS-004-08) | §3.1.2 |
| 头部边框 | `1px solid #1A2F5A` (ZS-004-07) | — |
| 头部圆角 | `4px`（展开时下两角变直角） | §4.1 |
| 标题文字 | `16px Medium`，`#C5CFE0` (ZS-004-02)；展开时 `#FFFFFF` | — |
| 描述文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | — |
| 展开箭头 `▾ / ▴` | `14px`，`#6E88B0`，hover `#4096FF` (ZS-002-05) | ZS-002-05 |
| 头部高度 | `≥ 48px`（含描述时自适应） | — |
| 头部内边距 | `--spacing-4` (16px) | §7.1 |
| 头部 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 |

#### 23.1.2 内容区

| 属性 | 取值 |
|------|------|
| 背景 | `#0C1836` (ZS-004-09，比头部深一档) |
| 内边距 | `--spacing-4` (16px) |
| 顶部分割线 | `1px solid #1A2F5A` (ZS-004-07) |
| 文字 | `14px Regular`，`#C5CFE0` |

### 23.2 列表概览折叠 + 图标

头部标题前增加一个小图标（业务图标），其余同 §23.1。

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 前缀小图标 | `16px`，`#4096FF` (ZS-002-05) | — |
| 图标 → 标题间距 | `--spacing-2` (8px) | §7.1 |

### 23.3 手风琴折叠（互斥单开）

多个折叠项垂直堆叠，**同一时刻仅允许一项展开**，展开新项时自动收起其它项。

```
┌────────────────────────────────────────┐
│ ▸ 把了 1300 多万元！他们靠卖「口罩」…   收起 │  ← 展开项（高亮）
│   描述正文段落描述正文段落 …            │
├────────────────────────────────────────┤
│ ▸ 某条新闻标题某条新闻标题 …       展开 │
├────────────────────────────────────────┤
│ ▸ 某科学家�证据曝光为何争不下 …    展开 │
└────────────────────────────────────────┘
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 项之间分隔 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 |
| 收起项标题 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — |
| 展开项标题 | `14px Medium`，`#FFFFFF` | — |
| 展开项左强调条 | 可选 `2px solid #1677FF` (ZS-002-06)，贴左缘 | §8.3.2 激活 |
| 右侧「展开 / 收起」文字按钮 | 沿用 §5.2.3 文本按钮，`#4096FF` → hover `#1677FF` | §5.2.3 |
| 行高 | `≥ 40px` | — |

### 23.4 列表项折叠（右侧计数 + 展开）

紧凑列表，每行右侧带一个计数徽标 + 「展开」链接（常用于评论 / 回复折叠）。

```
收起的折叠标题某某某某某        🔺 6405   展开
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 标题文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，过长省略 | — |
| 计数图标 | `12px`，`#F5222D`（热度红，ZS-001-06）或 `#4096FF` | §1.1.2 / §1.1.6 |
| 计数数字 | `14px Regular`（D-DIN），`#6E88B0` (ZS-004-04) | §2.1.2 |
| 「展开 / 收起」 | 沿用 §5.2.3 文本按钮 | §5.2.3 |
| 行高 | `36px` | — |
| 行间分割线 | `1px solid #2D4473`（弱化） | §6.1 |
| 行 Hover 背景 | `rgba(22,119,255,0.08)` | — |

### 23.5 交互与动画

| 行为 | 动效 | 来源 |
|------|------|------|
| 展开 / 收起 | 内容高度 `0 → auto`，`opacity 0 → 1`，`200ms ease-out` | §8.5 |
| 箭头旋转 | `▾ → ▴`（`rotate 180deg`），`200ms ease-out` | §8.5 |
| 手风琴互斥 | 展开新项时旧项同步收起，两者动画并行 | — |
| Hover 背景过渡 | `120ms ease-out` | §8.5 |

### 23.6 三种折叠的选用决策

| 场景 | 选择 |
|------|------|
| 单个区块「展开看详情」 | §23.1 基础折叠 |
| 带分类图标的概览块 | §23.2 列表概览折叠 + 图标 |
| 多块互斥、节省纵向空间 | §23.3 手风琴折叠 |
| 长列表内逐条折叠（评论 / 回复） | §23.4 列表项折叠 |

### 23.7 CSS Token 参考

```css
:root {
  /* 头部 */
  --collapse-head-bg:        #122347;   /* ZS-004-08 */
  --collapse-head-border:    #1A2F5A;   /* ZS-004-07 */
  --collapse-title:          #C5CFE0;   /* ZS-004-02 */
  --collapse-title-open:     #FFFFFF;
  --collapse-desc:           #6E88B0;   /* ZS-004-04 */
  --collapse-arrow:          #6E88B0;
  --collapse-arrow-hover:    #4096FF;   /* ZS-002-05 */
  --collapse-head-hover-bg:  rgba(22,119,255,0.08);
  --collapse-icon:           #4096FF;   /* 前缀图标 */

  /* 内容区 */
  --collapse-body-bg:        #0C1836;   /* ZS-004-09 */
  --collapse-body-divider:   #1A2F5A;   /* ZS-004-07 */

  /* 手风琴 / 列表项 */
  --collapse-item-divider:   #1A2F5A;   /* ZS-004-07 */
  --collapse-item-active-bar:#1677FF;   /* ZS-002-06 */
  --collapse-toggle-text:    #4096FF;   /* ZS-002-05 文本按钮 */
  --collapse-toggle-hover:   #1677FF;   /* ZS-002-06 */
  --collapse-count-icon:     #F5222D;   /* ZS-001-06 热度 */
  --collapse-count-num:      #6E88B0;   /* ZS-004-04 */
  --collapse-row-divider:    #2D4473;   /* ZS-004-06 */
}
```

---

## 24. 描述列表（Descriptions）

> 对应设计稿「6.7 数据展示-描述」。用于档案 / 详情页的**键值对表格**展示（账号名 / 密码等字段）。整体是一张带边框的两列表格：左列字段名、右列字段值，行底色**斑马交替**。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。

### 24.1 区块标题

```
▎资源信息
────────────────────────
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 标题左竖条 | `3px × 16px`，`#1677FF` (ZS-002-06) | §22.1 |
| 标题文字 | `16px Bold`，`#C5CFE0` (ZS-004-02) | §3.1.2 |
| 标题下分隔线 | `1px solid #1A2F5A` (ZS-004-07)，通栏 | §6.1 |
| 标题 → 表格间距 | `--spacing-4` (16px) | §7.1 |

### 24.2 表格容器与单元格

| 属性 | 取值 | 来源 |
|------|------|------|
| 外层容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 |
| 表格边框 | `1px solid #1A2F5A` (ZS-004-07)（外框 + 单元格描边） | §6.1 |
| 单元格行高 | `44px` | — |
| 单元格水平 padding | `--spacing-4` (16px) | §7.1 |
| 标签列（左）宽度 | 固定 `≥ 120px` | — |
| 圆角 | 外层 `4px`，内部单元格直角 | §4.1 |

### 24.3 行配色（斑马交替）

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 标签列文字（"账号名 / 密码"） | `14px Medium`，`#C5CFE0` (ZS-004-02) | — |
| 值列文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — |
| 奇数行背景 | `#122347` (ZS-004-08) | §3.1.2 |
| 偶数行背景 | `#0C1836` (ZS-004-09，略深，形成斑马) | §3.1.1 |
| 行 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 |
| 行间 / 列间分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 |

### 24.4 值内操作（如密码「查看」）

值列可内嵌文本按钮（如密码掩码后的「查看」切换明文）。

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 掩码字符 | `*` / `●`，`#C5CFE0` (ZS-004-02) | — |
| 「查看 / 隐藏」 | 沿用 §5.2.3 文本按钮，`#4096FF` → hover `#1677FF` + 下划线 | §5.2.3 |
| 掩码 → 操作间距 | `--spacing-2` (8px) | §7.1 |

### 24.5 布局变体

| 变体 | 说明 | 来源 |
|------|------|------|
| 单列（一问一答竖排） | 每行一个字段，标签列固定宽，值列撑满（本节默认） | — |
| 双列（一行两组键值） | 宽容器下并排两组「标签+值」，组间分割线 `1px solid #1A2F5A` | §6.2 |
| 纯展示无边框 | 去掉单元格描边，仅保留行间细线 `1px solid #2D4473`，用于轻量详情 | §6.1 |

### 24.6 选用决策

| 场景 | 选择 |
|------|------|
| 档案 / 详情字段（键值对） | §24 描述列表 |
| 多行同结构数据（可排序 / 翻页） | 改用数据表格 Table（另见表格规范） |
| 字段数 ≤ 4 且轻量 | §24.5 纯展示无边框变体 |

### 24.7 CSS Token 参考

```css
:root {
  /* 区块标题 */
  --desc-title-bar:      #1677FF;   /* ZS-002-06 左竖条 */
  --desc-title-text:     #C5CFE0;   /* ZS-004-02 */
  --desc-title-divider:  #1A2F5A;   /* ZS-004-07 */

  /* 表格 */
  --desc-wrap-bg:        #0C1836;   /* ZS-004-09 */
  --desc-border:         #1A2F5A;   /* ZS-004-07 */
  --desc-row-h:          44px;
  --desc-label-text:     #C5CFE0;   /* ZS-004-02 */
  --desc-value-text:     #C5CFE0;   /* ZS-004-02 */
  --desc-row-odd-bg:     #122347;   /* ZS-004-08 斑马奇行 */
  --desc-row-even-bg:    #0C1836;   /* ZS-004-09 斑马偶行 */
  --desc-row-hover-bg:   rgba(22,119,255,0.08);

  /* 值内操作 */
  --desc-action-text:    #4096FF;   /* ZS-002-05 查看 */
  --desc-action-hover:   #1677FF;   /* ZS-002-06 */

  /* 无边框变体 */
  --desc-light-divider:  #2D4473;   /* ZS-004-06 */
}
```

---

## 25. 列表（List）

> 对应设计稿「6.9 数据展示-列表」。用于信息流 / 评论 / 动态等条目列表，每条 = 头像 + 主名 + 来源标识 + 时间 + 正文。整体包在一个卡片容器内，条目之间用细分割线隔开。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。

### 25.1 容器

| 属性 | 取值 | 来源 |
|------|------|------|
| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 |
| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — |
| 容器圆角 | `4px` | §4.1 |
| 容器内边距 | `--spacing-5` (24px) | §7.1 |
| 区块标题「列表」 | `16px Bold`，`#FFFFFF`，置于容器外上方 | §12.2.1 |

### 25.2 列表条目

```
👤ⓕ  Speaker Kevin McCarthy                          2023-12-31 18:00:00
      48923056
      当我们的退伍军人重新进入平民生活时，他们应该得到最好的职业机会……
──────────────────────────────────────────────────────────────────────
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 头像 | `40px` 方/圆，底色 `#1A2F5A` (ZS-004-07) | §22.3.1 |
| 来源角标（如 Ⓕ Facebook） | `14px`，叠在头像右下角，原色或 `#4096FF` 单色化 | — |
| 主名文字 | `16px Bold`，`#FFFFFF` | — |
| 副 ID（如 `48923056`） | `14px Regular`，`#4096FF` (ZS-002-05) | §1.1.6 |
| 时间文字（右上角） | `14px Regular`（D-DIN 数字），`#4096FF` (ZS-002-05) | §2.1.2 |
| 正文文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，行高 `1.6` | — |
| 头像 → 文字间距 | `--spacing-3` (12px) | §7.1 |
| 主名 → 副 ID 间距 | `--spacing-1` (4px) | §7.1 |
| 副 ID → 正文间距 | `--spacing-2` (8px) | §7.1 |
| 条目内边距 | 上下 `--spacing-4` (16px) | §7.1 |
| 条目间分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 |
| 条目 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 |

### 25.3 变体与状态

| 变体 / 状态 | 规则 |
|------------|------|
| 带操作的条目 | 右侧追加文本按钮区（点赞 / 评论 / 更多），沿用 §5.2.3、§5.3.3 |
| 正文折叠 | 超过 N 行用「展开」收起，沿用 §23.4 列表项折叠 |
| 空列表 | 居中提示「暂无数据」，`14px Regular`，`#6E88B0` (ZS-004-04) |
| 加载更多 | 底部「加载更多 »」文本按钮（§5.3.3）或滚动自动加载 |

### 25.4 CSS Token 参考

```css
:root {
  --list-wrap-bg:        #0C1836;   /* ZS-004-09 */
  --list-wrap-border:    #1A2F5A;   /* ZS-004-07 */
  --list-avatar-bg:      #1A2F5A;   /* ZS-004-07 */
  --list-name-text:      #FFFFFF;
  --list-subid-text:     #4096FF;   /* ZS-002-05 */
  --list-time-text:      #4096FF;   /* ZS-002-05 */
  --list-body-text:      #C5CFE0;   /* ZS-004-02 */
  --list-divider:        #1A2F5A;   /* ZS-004-07 */
  --list-row-hover-bg:   rgba(22,119,255,0.08);
  --list-empty-text:     #6E88B0;   /* ZS-004-04 */
}
```

---

## 26. 时间轴（Timeline）

> 对应设计稿「6.11 数据展示」左半与「全局时间轴」。覆盖**基础时间轴点**、**卡片式时间轴**、**全局时间轴**（横向刻度 + 区间滑块）三类。节点圆 / 连接线沿用 §10 步骤条逻辑，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。

### 26.1 基础时间轴点（纵向）

```
●  WirdPress多处绝对路径泄漏
┊  12-03 02:21:47
●  WirdPress多处绝对路径泄漏
┊  12-03 02:21:47
●  WirdPress多处绝对路径泄漏
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 容器背景 | `#122347` (ZS-004-08) | §3.1.2 |
| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — |
| 节点圆点 | 实心圆 `8px`，`#1677FF` (ZS-002-06)；外可加 `2px` 同色半透明光圈 | §10.1 |
| 连接线 | `1px solid #2D4473` (ZS-004-06)，垂直贯穿节点 | §10.1 |
| 标题文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — |
| 时间文字 | `12px Regular`（D-DIN），`#6E88B0` (ZS-004-04) | §2.1.2 |
| 节点圆 → 文字间距 | `--spacing-2` (8px) | §7.1 |
| 节点垂直间距 | `--spacing-5` (24px)，圆心到圆心 | §10.4.2 |
| 当前 / 最新节点 | 圆点加亮 `#4096FF` + 外光圈 | — |

### 26.2 卡片式时间轴

每个时间节点挂一张内容卡片（时间在卡外、内容在卡内）。

```
●  2021-12-03 14:25:44
┊  ┌──────────────────────────┐
┊  │ 零报告上报               │
┊  │ 安全状况： 今日无安全风险 │
┊  └──────────────────────────┘
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 节点圆点 / 连接线 | 同 §26.1 | — |
| 时间标题 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — |
| 卡片背景 | `#0C1836` (ZS-004-09，比容器深一档) | §3.1.3 |
| 卡片边框 | `1px solid #1A2F5A` (ZS-004-07) | — |
| 卡片圆角 | `4px` | §4.1 |
| 卡片内边距 | `--spacing-3` (12px) | §7.1 |
| 卡片标题（"零报告上报"） | `14px Medium`，`#C5CFE0` | — |
| 字段标签（"安全状况："） | `14px Regular`，`#6E88B0` (ZS-004-04) | — |
| 字段值（"今日无安全风险"） | `14px Regular`，`#4096FF` (ZS-002-05) | — |
| 时间 → 卡片间距 | `--spacing-2` (8px) | §7.1 |

### 26.3 全局时间轴（横向刻度 + 区间滑块）

顶部横条，承载连续时间刻度与一个可拖拽的**区间选择滑块**。

```
        ●
├──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┤
04-03 04-04 04-03 04-04 ▓▓▓▓▓▓▓▓ 04-04 04-03 …
                       └─区间滑块（蓝色高亮段）─┘
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 轨道背景 | `#0C1836` (ZS-004-09) | — |
| 刻度基线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 |
| 刻度文字（日期） | `12px Regular`，`#6E88B0` (ZS-004-04) | — |
| 游标点（顶部 ●） | 实心圆 `8px`，`#FFFFFF` + `1px #1677FF` 描边 | — |
| 选中区间段 | `rgba(22,119,255,0.32)` 矩形底 + 上下边 `1px solid #1677FF` | §1.1.6 |
| 区间两端手柄 | `4px × 全高` 实心 `#1677FF` (ZS-002-06) | — |
| 轨道高度 | `≥ 56px`（含刻度文字） | — |
| Hover 刻度 | 文字 `#4096FF` | §1.1.6 |

### 26.4 选用决策

| 场景 | 选择 |
|------|------|
| 纯事件流（标题 + 时间） | §26.1 基础时间轴点 |
| 每个节点带结构化内容 | §26.2 卡片式时间轴 |
| 长跨度时间筛选 / 缩放 | §26.3 全局时间轴（区间滑块） |

### 26.5 CSS Token 参考

```css
:root {
  --timeline-wrap-bg:      #122347;   /* ZS-004-08 */
  --timeline-wrap-border:  #1A2F5A;   /* ZS-004-07 */
  --timeline-dot:          #1677FF;   /* ZS-002-06 */
  --timeline-dot-active:   #4096FF;   /* ZS-002-05 */
  --timeline-line:         #2D4473;   /* ZS-004-06 */
  --timeline-title:        #C5CFE0;   /* ZS-004-02 */
  --timeline-time:         #6E88B0;   /* ZS-004-04 */

  /* 卡片式 */
  --timeline-card-bg:      #0C1836;   /* ZS-004-09 */
  --timeline-card-border:  #1A2F5A;   /* ZS-004-07 */
  --timeline-field-label:  #6E88B0;   /* ZS-004-04 */
  --timeline-field-value:  #4096FF;   /* ZS-002-05 */

  /* 全局时间轴 */
  --gtimeline-track-bg:    #0C1836;   /* ZS-004-09 */
  --gtimeline-baseline:    #1A2F5A;   /* ZS-004-07 */
  --gtimeline-tick:        #6E88B0;   /* ZS-004-04 */
  --gtimeline-range-fill:  rgba(22,119,255,0.32);
  --gtimeline-range-edge:  #1677FF;   /* ZS-002-06 */
  --gtimeline-cursor:      #FFFFFF;
}
```

---

## 27. 进度条（Progress）

> 对应设计稿「6.11 数据展示-进度条」右半。覆盖**标准线性进度条**、**小型进度条**、**环形进度条**三类。进度色按语义分**成功 / 进行中 / 失败**三态。
>
> ℹ️ **语义色说明**：成功绿 / 警告橙已正式收录 §1.1.9 功能语义色，本节进度色统一引用之（见 §27.4 与 `tokens.css` 的 `--func-*`）。

### 27.1 标准线性进度条

```
████████████████████████  100%  ✓   ← 成功（绿）
██████████████░░░░░░░░░░   80%  ✗   ← 失败（红）
██████████████░░░░░░░░░░   80%       ← 进行中（橙）
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 轨道（未完成段） | `#1A2F5A` (ZS-004-07) | §6.1 |
| 已完成段-成功 | `#52C41A`（成功绿，§1.1.9） / 近似 `#13C2C2`(ZS-003-06) | §27.4 |
| 已完成段-失败 | `#F5222D` (ZS-001-06) | §1.1.2 |
| 已完成段-进行中 | `#FAAD14`（警告橙，§1.1.9） | §27.4 |
| 条高 | `8px`，圆角 `4px`（两端半圆） | §4.1 |
| 百分比文字 | `14px Regular`（D-DIN），`#C5CFE0` (ZS-004-02) | §2.1.2 |
| 尾部状态图标 | 成功 ✓（绿圆）/ 失败 ✗（红圆），`16px` | §20.3.2 |
| 条 → 百分比间距 | `--spacing-2` (8px) | §7.1 |

### 27.2 小型进度条

用于较窄区域（如表格单元格内）。规格同 §27.1，仅尺寸收缩：

| 属性 | 取值 |
|------|------|
| 条高 | `4px` |
| 百分比文字 | `12px Regular` |
| 尾部状态图标 | `12px` |
| 条宽 | 自适应容器（最小 `48px`） |

### 27.3 环形进度条

```
   ╭───╮     ╭───╮     ╭───╮
  │22.4%│   │47.8%│   │82.0%│
  │ 名称│   │ 名称│   │ 名称│
   ╰───╯     ╰───╯     ╰───╯
   (蓝)      (橙)      (红/混)
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 环轨道（底） | `#1A2F5A` (ZS-004-07) | — |
| 环进度段 | 按语义取 成功绿 / 进行中橙 / 失败红 / 主色蓝 `#1677FF` | §27.4 |
| 环宽 | `6px`，端点圆头（`stroke-linecap: round`） | — |
| 中心百分比 | `16px Bold`（D-DIN），`#FFFFFF` | §2.1.2 |
| 中心名称 | `12px Regular`，`#6E88B0` (ZS-004-04) | — |
| 直径 | `72px`（默认） | — |
| 起始角 | 顶部 12 点钟，顺时针填充 | — |

### 27.4 状态语义色（引用 §1.1.9）

> 进度条 / §29 状态标签的语义色统一引用 §1.1.9 功能语义色，CSS 用 `tokens.css` 的 `--func-*`；下表保留来源对照。

| 语义 | 色值 | §1.1.9 来源 | Token |
|------|-----------|--------------|------|
| 成功 / 已完成 | `#52C41A` | 补充色绿 | `--func-success` |
| 进行中 / 警告 | `#FAAD14` | 补充色橙 | `--func-warning` |
| 失败 / 错误 | `#F5222D` | ZS-001-06 | `--func-error` |
| 信息 / 默认 | `#1677FF` / `#4096FF` | ZS-002-06 / ZS-002-05 | `--func-info` |
| 处理中 / 等待 | `#13C2C2` | ZS-003-06 | `--func-processing` |

> 历史说明：成功绿 / 警告橙此前未进标准色，现已正式收录 §1.1.9，本节与 §29 状态标签均引用之。

### 27.5 CSS Token 参考

```css
:root {
  /* 功能语义色（定义见 §1.1.9 / tokens.css；此处为分册自包含副本） */
  --func-success:        #52C41A;   /* 成功绿 §1.1.9 */
  --func-warning:        #FAAD14;   /* 警告橙 §1.1.9 */
  --func-error:          #F5222D;   /* ZS-001-06 */
  --func-info:           #1677FF;   /* ZS-002-06 */
  --func-processing:     #13C2C2;   /* ZS-003-06 */

  /* 进度条 */
  --progress-track:      #1A2F5A;   /* ZS-004-07 */
  --progress-success:    var(--func-success);
  --progress-error:      var(--func-error);
  --progress-active:     var(--func-warning);
  --progress-num:        #C5CFE0;   /* ZS-004-02 */

  /* 环形 */
  --circle-track:        #1A2F5A;   /* ZS-004-07 */
  --circle-num:          #FFFFFF;
  --circle-label:        #6E88B0;   /* ZS-004-04 */
}
```

---

## 28. 表格（Table）

> 对应设计稿「6.13 数据展示-表格」。后台列表主力组件：表头 + 数据行（斑马 / hover / 选中）+ 勾选列 + 内联编辑 + 状态列（复用 §29 标签）+ 操作列（复用 §5.2.3 文本按钮）。表头 / 边框 / 斑马沿用 §24 描述列表与 §6 分割线规则。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。

### 28.1 表格容器

| 属性 | 取值 | 来源 |
|------|------|------|
| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 |
| 外边框 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 |
| 圆角 | `4px` | §4.1 |

### 28.2 表头（Header）

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 表头背景 | `#122347` (ZS-004-08) | §3.1.2 |
| 表头文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — |
| 表头行高 | `44px` | — |
| 列水平 padding | `--spacing-4` (16px) | §7.1 |
| 表头底分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 |
| 排序图标 `▲▼` | `12px`，默认 `#4A6491`，激活 `#4096FF` | §1.1.6 |
| 列分割线（可选） | `1px solid #2D4473`（弱化） | §6.2 |

### 28.3 数据行（Body）

| 状态 | 背景 | 来源 |
|------|------|------|
| 奇数行 | `#0C1836` (ZS-004-09) | §24.3 |
| 偶数行 | `#122347` (ZS-004-08) | §24.3 |
| Hover | `rgba(22,119,255,0.08)` | §8.4.3 |
| 选中行 | `rgba(22,119,255,0.16)` + 左 `2px solid #1677FF` | §8.3.2 |

| 元素 | 色值 / 规格 |
|------|-------------|
| 单元格文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) |
| 行高 | `44px` |
| 数字列（手机号 / 卡号等） | D-DIN / Arial，`#C5CFE0`，可右对齐 |
| 行间分割线 | `1px solid #1A2F5A` (ZS-004-07) |

### 28.4 勾选列（Selection）

| 元素 | 规格 | 来源 |
|------|------|------|
| 复选框 | 沿用 §16.3（面板内灰描边变体 §16.5） | §16 |
| 表头全选框 | 支持半选（部分行选中） | §15.2.3 |
| 列宽 | `48px`，居中 | — |
| 选中行联动 | 勾选 → 行底色切换为「选中行」态 | §28.3 |

### 28.5 内联编辑单元格

单元格可切换为输入态（如「卡池地址 100 M」可编辑），校验失败显示红框 + 气泡。

| 状态 | 规格 | 来源 |
|------|------|------|
| 可编辑态 | 单元格内嵌 §14.1 小号输入框（高 `28px`） | §14.1 |
| 带单位 | 数字 + 单位块（§21.5.5），单位 `M` 实心蓝 | §21.5.5 |
| 错误态 | `1px solid #F5222D` + 外发光，下方 / 悬浮气泡提示「Table约束输入提示」`#F5222D` | §14.1.1 / §21.4.1 |
| 气泡背景 | `#F5222D` 或暗底 `#122347` + 红字 | §1.1.2 |

### 28.6 状态列与操作列

| 列 | 规格 | 来源 |
|------|------|------|
| 状态（`● 普通` / `● 特殊`） | 圆点 + 文字标签，沿用 §29.3 圆点标签 | §29.3 |
| 整体状态（`已完成` / `已失败`） | 实心 / 描边状态标签，沿用 §29.4 | §29.4 |
| 操作（`查看 / 编辑 / 重置`） | §5.2.3 文本按钮，间距 `--spacing-3` (12px)，无分隔符 | §5.3.3 |
| 操作列对齐 | 通常右对齐或固定列 | — |

### 28.7 固定列 / 滚动 / 空态

| 行为 | 规则 |
|------|------|
| 横向滚动 | 列总宽超容器时横向滚动；首列（勾选）/ 末列（操作）可 `position: sticky` 固定 |
| 固定列阴影 | 固定列边缘加 `4px` 渐变阴影 `rgba(6,14,36,0.6)` 提示可滚动 | 
| 空数据 | 表体居中「暂无数据」，`#6E88B0` (ZS-004-04) |
| 加载中 | 表体覆盖半透明遮罩 `rgba(6,14,36,0.4)` + 居中旋转图标 `#1677FF` |
| 分页 | 表格下方接 §13 分页 |

### 28.8 CSS Token 参考

```css
:root {
  --table-wrap-bg:        #0C1836;   /* ZS-004-09 */
  --table-border:         #1A2F5A;   /* ZS-004-07 */

  /* 表头 */
  --table-head-bg:        #122347;   /* ZS-004-08 */
  --table-head-text:      #C5CFE0;   /* ZS-004-02 */
  --table-sort-idle:      #4A6491;   /* ZS-004-05 */
  --table-sort-active:    #4096FF;   /* ZS-002-05 */

  /* 数据行 */
  --table-row-odd:        #0C1836;   /* ZS-004-09 */
  --table-row-even:       #122347;   /* ZS-004-08 */
  --table-row-hover:      rgba(22,119,255,0.08);
  --table-row-selected:   rgba(22,119,255,0.16);
  --table-row-selected-bar:#1677FF;  /* ZS-002-06 */
  --table-cell-text:      #C5CFE0;   /* ZS-004-02 */
  --table-row-divider:    #1A2F5A;   /* ZS-004-07 */

  /* 内联编辑错误 */
  --table-edit-error:     #F5222D;   /* ZS-001-06 */

  /* 操作列 */
  --table-action-text:    #4096FF;   /* ZS-002-05 */
  --table-action-hover:   #1677FF;   /* ZS-002-06 */

  /* 空 / 加载 */
  --table-empty-text:     #6E88B0;   /* ZS-004-04 */
  --table-loading-mask:   rgba(6,14,36,0.4);
}
```

---

## 29. 标签（Tag）

> 对应设计稿「6.14 数据展示-标签」。分两大类：**标签形式**（文字按钮标签 / 图标+文字标签 / 圆点+文字标签 / 动态标签）与**状态标签**（描边 / 实心 / 图标三种风格，覆盖 未开始·等待中·进行中·已完成·已失败·待更新 六语义）。功能语义色见 §1.1.9 / §27.4。

### 29.1 文字按钮标签

可点击的属性标签，用于重点突出标记。

| 状态 | 背景 | 文字 | 来源 |
|------|------|------|------|
| 默认 | `rgba(22,119,255,0.12)` | `#4096FF` (ZS-002-05) | — |
| 禁用 | `rgba(22,119,255,0.06)` | `#4A6491` (ZS-004-05) | — |
| 激活 / 选中 | `#1677FF` (ZS-002-06) | `#FFFFFF` | §1.1.6 |

| 属性 | 取值 |
|------|------|
| 高度 | `24px` |
| 圆角 | `2px`（§4.1） |
| 内边距 | `2px 8px` |
| 字号 | `12px Regular` |

### 29.2 图标 + 文字标签

前缀业务图标增强辨识（如 Ⓣ Twitter、✓ 完成）。

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 默认（描边） | 背景 `rgba(22,119,255,0.12)`，图标+文字 `#4096FF` | §29.1 |
| 选中（实心） | 背景 `#1677FF` (ZS-002-06)，图标+文字 `#FFFFFF` | — |
| 图标 → 文字间距 | `--spacing-1` (4px) | §7.1 |
| 图标尺寸 | `14px` | — |

### 29.3 圆点 + 文字标签

无底色，靠前缀圆点区分语义（属性多 / 复杂、又不需突出时用）。

| 语义 | 圆点色 | 文字 | 来源 |
|------|--------|------|------|
| 普通 | `#13C2C2` (ZS-003-06) | `#C5CFE0` (ZS-004-02) | §1.1.4 |
| 特殊 | `#FAAD14`（警告橙，§27.4） | `#C5CFE0` | §27.4 |
| 异常 | `#F5222D` (ZS-001-06) | `#C5CFE0` | §1.1.2 |

| 属性 | 取值 |
|------|------|
| 圆点尺寸 | `6px`，正圆 |
| 圆点 → 文字间距 | `--spacing-2` (8px) |
| 字号 | `14px Regular` |

### 29.4 动态标签（可增删）

可动态添加 / 删除的标签集合（如筛选列表、关键词）。

```
[ people.com.cn × ]  [ +1 × ]  [ + 标签 ]
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 标签底 | `rgba(22,119,255,0.12)`，文字 `#C5CFE0` (ZS-004-02) | — |
| 关闭 `×` | `12px`，`#6E88B0`，hover `#FFFFFF` | §15.2.1 |
| 折叠 `+N ×` | 溢出折叠（同 §15.2.1） | §15.2.1 |
| 「+ 标签」新增钮 | `1px dashed #4096FF` (ZS-002-05) + 透明底 + `+ 标签` 蓝字 | §3.1.3 |
| 新增钮 hover | 边框 + 文字 `#1677FF` (ZS-002-06) | — |
| 标签间距 | `--spacing-1` (4px) | §7.1 |

### 29.5 状态标签（三风格 × 六语义）

六个语义统一映射到功能语义色（§27.4）：

| 语义 | 主色 | 来源 |
|------|------|------|
| 未开始 | `#4096FF` (ZS-002-05) 或中性灰 `#6E88B0` | §1.1.6 / ZS-004-04 |
| 等待中 | `#13C2C2` (ZS-003-06) | §1.1.4 |
| 进行中 | `#FAAD14`（警告橙，§27.4） | §27.4 |
| 已完成 | `#52C41A`（成功绿，§27.4） | §27.4 |
| 已失败 | `#F5222D` (ZS-001-06) | §1.1.2 |
| 待更新 | `#1677FF` (ZS-002-06) | §1.1.6 |

#### 29.5.1 风格 A — 描边（Outline）

| 元素 | 规格 |
|------|------|
| 背景 | `transparent` 或语义色 `12%` 透明底 |
| 边框 | `1px solid` 语义色 |
| 文字 | 语义色 |
| 高度 / 圆角 | `24px` / `2px` |

#### 29.5.2 风格 B — 实心（Filled）

| 元素 | 规格 |
|------|------|
| 背景 | 语义色 `24%`~`100%`（截图为浅色实心底） |
| 文字 | 深色语义场用 `#FFFFFF`；浅底场用语义深色 |
| 高度 / 圆角 | `24px` / `2px` |

#### 29.5.3 风格 C — 图标 + 文字

前缀语义图标（⊖ 就绪 / ◷ 等待 / ◐ 进行 / ✓ 成功 / ✗ 失败 / ◷ 待更）：

| 元素 | 规格 | 来源 |
|------|------|------|
| 图标色 | 同语义色 | §27.4 |
| 文字色 | 语义色或 `#C5CFE0` | — |
| 图标尺寸 | `14px` | — |
| 图标 → 文字间距 | `--spacing-1` (4px) | §7.1 |

### 29.6 CSS Token 参考

```css
:root {
  /* 语义色复用 §27.4 */
  /* --func-success / --func-warning / --func-error / --func-info / --func-processing */

  /* 文字 / 图标 / 圆点标签 */
  --tag-soft-bg:         rgba(22,119,255,0.12);
  --tag-soft-text:       #4096FF;   /* ZS-002-05 */
  --tag-active-bg:       #1677FF;   /* ZS-002-06 */
  --tag-active-text:     #FFFFFF;
  --tag-disabled-text:   #4A6491;   /* ZS-004-05 */
  --tag-dot-normal:      #13C2C2;   /* ZS-003-06 普通 */
  --tag-dot-special:     var(--func-warning);  /* 特殊 */
  --tag-dot-error:       #F5222D;   /* ZS-001-06 异常 */

  /* 动态标签 */
  --tag-close:           #6E88B0;   /* ZS-004-04 */
  --tag-close-hover:     #FFFFFF;
  --tag-add-border:      #4096FF;   /* ZS-002-05 虚线 */
  --tag-add-hover:       #1677FF;   /* ZS-002-06 */

  /* 状态标签语义 */
  --status-pending:      #4096FF;   /* 未开始 ZS-002-05 */
  --status-waiting:      #13C2C2;   /* 等待中 ZS-003-06 */
  --status-running:      var(--func-warning);  /* 进行中 */
  --status-done:         var(--func-success);  /* 已完成 */
  --status-failed:       #F5222D;   /* 已失败 ZS-001-06 */
  --status-update:       #1677FF;   /* 待更新 ZS-002-06 */
}
```

---

## 30. 树形控件（Tree · 展示型）

> 对应设计稿「6.16 数据展示-树形控件」。区别于 §19 树选择（下拉触发器形态），本节是**直接平铺在页面中的树**：带**虚线连接线**、`[+] / [-]` 方框展开器、节点复选框，且节点可**内联挂表单控件**（单选 / 日期 / 数字+单位）。节点状态与复选框沿用 §19 / §16，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。

### 30.1 容器

| 属性 | 取值 | 来源 |
|------|------|------|
| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 |
| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — |
| 容器圆角 | `4px` | §4.1 |
| 容器内边距 | `--spacing-5` (24px) | §7.1 |

### 30.2 节点与连接线

```
☐ 一级
├╌ ☐ 主账号贴文   ● 按照发文起始时间 [2021-12-09 📅]  ○ 按照条数 前[最多24]条
│   ├╌ ☐ 贴文评论      前 [最多24] 条
│   ├╌ ☐ 评论账号列表  前 [最多24] 条
│   └╌ ☐ 转发账号列表  前 [最多24] 条
│        ├╌ ☐ 粉丝列表  前 [最多24] 条
│        └╌ ☐ 好友列表  前 [最多24] 条
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 连接线 | `1px dashed #4A6491` (ZS-004-05)，L 形连父子 | §6.1 虚线 |
| 每级缩进 | `--spacing-5` (24px) | §7.1 |
| 节点复选框 | 沿用 §16.3（面板内灰描边 §16.5） | §16 |
| 节点文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | §19.3.2 |
| 节点行高 | `≥ 40px`（含内联控件时自适应） | — |
| 复选框 → 文字间距 | `--spacing-2` (8px) | §7.1 |

### 30.3 方框展开器（`[+] / [-]`）

带子树的节点用方框图标，区别于 §19 的纯三角箭头。

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 方框尺寸 | `14px × 14px`，`1px solid #6E88B0` (ZS-004-04) | §19.3.1 |
| 方框背景 | `transparent` | — |
| 符号 `+` / `-` | `#6E88B0`，居中 | — |
| Hover | 边框 + 符号 `#4096FF` (ZS-002-05) | §1.1.6 |
| 折叠态 `+` / 展开态 `-` | 点击切换子树显隐 | — |
| 方框 → 连接线 | 方框压在虚线连接点上 | — |

### 30.4 节点内联表单控件

节点右侧可挂载与该节点关联的配置控件，全部复用既有规范：

| 控件 | 复用 | 备注 |
|------|------|------|
| 单选（`● 按照发文起始时间` / `○ 按照条数`） | §16.2 Radio | 未选 `#4096FF` 描边，已选实心 `#1677FF` |
| 日期（`2021-12-09 📅`） | §17.1 日期触发器 | 高 `28px` 小号 |
| 数字 + 单位（`前 [最多24] 条`） | §14.1 输入 + §21.5.5 单位 | 前后缀文字「前」「条」`#6E88B0` |
| 前后缀文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | — |
| 控件与节点文字横向间距 | `--spacing-3` (12px) | §7.1 |
| 多控件之间间距 | `--spacing-4` (16px) | §7.1 |

### 30.5 复选父子联动

| 行为 | 规则 | 来源 |
|------|------|------|
| 勾父节点 | 勾选其全部子孙 | §18.4.2 |
| 子项部分选中 | 父节点显示**半选**（中央 `8px×2px` 白横线） | §16.3 |
| 全选 / 全不选 | 顶层「一级」节点等价全选开关 | §15.2.3 |

### 30.6 纯展示树变体（右图）

无内联控件、仅 `[+]/[-]` + 复选框 + 「一级 / 二级」层级的精简树：

| 元素 | 规格 |
|------|------|
| 节点 | 复选框 + 文字（`一级` / `二级`） |
| 展开器 | `[+] / [-]` 方框（同 §30.3） |
| 连接线 | `1px dashed #4A6491` |
| 选中 | 复选框实心 `#1677FF` + 白勾；行可叠 `rgba(22,119,255,0.08)` hover |
| 节点行高 | `36px` |

### 30.7 与 §19 树选择的差异

| 维度 | §19 树选择（TreeSelect） | §30 树形控件（Tree） |
|------|--------------------------|----------------------|
| 形态 | 触发器 + 下拉面板 | 直接平铺页面 |
| 展开器 | 三角 `▸ / ▾` | 方框 `[+] / [-]` |
| 连接线 | 无（靠缩进） | 有，`1px dashed` |
| 选中表现 | 整行蓝底高亮 | 复选框示态为主 |
| 内联控件 | 无 | 支持（单选 / 日期 / 数字+单位） |
| 用途 | 表单取值 | 数据展示 / 多维配置 |

### 30.8 CSS Token 参考

```css
:root {
  --tree2-wrap-bg:        #0C1836;   /* ZS-004-09 */
  --tree2-wrap-border:    #1A2F5A;   /* ZS-004-07 */
  --tree2-line:           #4A6491;   /* ZS-004-05 虚线连接 */
  --tree2-indent:         24px;
  --tree2-node-text:      #C5CFE0;   /* ZS-004-02 */
  --tree2-row-hover:      rgba(22,119,255,0.08);

  /* 方框展开器 */
  --tree2-toggle-border:  #6E88B0;   /* ZS-004-04 */
  --tree2-toggle-symbol:  #6E88B0;
  --tree2-toggle-hover:   #4096FF;   /* ZS-002-05 */

  /* 复选框（复用 §16） */
  --tree2-check-border:   #6E88B0;   /* ZS-004-04 */
  --tree2-check-fill:     #1677FF;   /* ZS-002-06 */
  --tree2-check-mark:     #FFFFFF;

  /* 内联控件前后缀文字 */
  --tree2-affix-text:     #6E88B0;   /* ZS-004-04 */
}
```

---

## 31. 时间轴（长文本：横向 / 纵向）

> 对应设计稿「6.19 数据展示-时间轴（上）/（下）」。在 §26 时间轴基础上扩展两种**承载长文本**的形态：**横向时间轴**（节点沿水平轴上下交替展开长文本）与**纵向长文本时间轴**（日期 + 富内容卡片）。节点圆 / 连接线 / 全局时间轴沿用 §26，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，年份强调点引入 §1.1.2 渐红系。

### 31.1 横向时间轴（横向长文本）

节点挂在一条水平主轴上，文本块**上下交替**分布，避免拥挤；轴上按时间标注年份 / 日期锚点。

```
 2023年1月7日        2021年7月18日         2002年1月
 长文本说明…          长文本说明…           长文本说明…
   ▲                    ▲                    ▲
───┼──────────┼─────────┼──────────┼─────────┼────  ← 水平主轴
   │          ▼         │          ▼         │
            长文本…              长文本…
            2021年               2016年8月
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 水平主轴 | `1px solid #2D4473` (ZS-004-06) | §6.1 |
| 节点三角 / 圆点 | `8px`，`#1677FF` (ZS-002-06)；指向轴的小三角 | §26.1 |
| 年份 / 日期锚点（强调） | `14px Bold`，`#F5222D`（红，ZS-001-06）或 `#4096FF`（蓝） | §1.1.2 / §1.1.6 |
| 普通时间标题 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — |
| 长文本正文 | `14px Regular`，`#6E88B0` (ZS-004-04)，行高 `1.6` | — |
| 文本块背景（可选卡片） | `#122347` (ZS-004-08) + `1px solid #1A2F5A` + 圆角 `4px` | §3.1.2 |
| 节点水平间距 | 自适应等分，最小 `--spacing-7` (40px) | §7.1 |
| 文本块 → 轴间距 | `--spacing-3` (12px) | §7.1 |
| 横向滚动 | 节点超容器宽时横向滚动，可配 §26.3 全局时间轴联动缩放 | §26.3 |

### 31.2 纵向长文本时间轴

左侧时间轴线，每个节点对应一张**富内容卡片**（缩略图 / 头像 + 标签 + 长正文）。

```
●  2023-09-09
┊  ┌──────────────────────────────────────────┐
┊  │ 👤 人物名   [标签]                         │
┊  │ 长正文长正文长正文长正文长正文长正文…      │
┊  └──────────────────────────────────────────┘
●  2023-09-09
┊  ┌──────────────────────────────────────────┐
┊  │ 🖼 缩略图   [标签]                         │
┊  │ 长正文…                                    │
┊  └──────────────────────────────────────────┘
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 轴线 | `1px solid #2D4473` (ZS-004-06)，纵向贯穿 | §26.1 |
| 节点圆点 | 实心 `8px`，`#1677FF` (ZS-002-06) | §26.1 |
| 日期标题 | `14px Medium`，`#4096FF` (ZS-002-05) | §1.1.6 |
| 卡片容器 | `#122347` (ZS-004-08) + `1px solid #1A2F5A` + 圆角 `4px` | §3.1.2 |
| 卡片内边距 | `--spacing-3` (12px) | §7.1 |
| 头像 / 缩略图 | `40px`（头像圆 / 缩略方），底 `#1A2F5A` | §22.3.1 |
| 主名 / 来源 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — |
| 状态标签 | 沿用 §29 标签（语义色见 §27.4） | §29 |
| 长正文 | `14px Regular`，`#6E88B0` (ZS-004-04)，行高 `1.6`，可「展开」折叠（§23.4） | §23.4 |
| 日期 → 卡片间距 | `--spacing-2` (8px) | §7.1 |
| 节点垂直间距 | `--spacing-6` (32px) | §7.1 |

### 31.3 选用决策

| 场景 | 选择 |
|------|------|
| 短事件流（标题 + 时间） | §26.1 基础时间轴点 |
| 节点带结构化小卡 | §26.2 卡片式时间轴 |
| 跨度大、按时间轴铺陈长文本 | §31.1 横向时间轴 |
| 每节点是图文长内容（资讯 / 档案） | §31.2 纵向长文本时间轴 |
| 需缩放 / 区间筛选 | 叠加 §26.3 全局时间轴 |

### 31.4 CSS Token 参考

```css
:root {
  /* 横向长文本 */
  --htl-axis:            #2D4473;   /* ZS-004-06 主轴 */
  --htl-node:            #1677FF;   /* ZS-002-06 */
  --htl-anchor-emph:     #F5222D;   /* ZS-001-06 年份强调 */
  --htl-anchor-blue:     #4096FF;   /* ZS-002-05 */
  --htl-title:           #C5CFE0;   /* ZS-004-02 */
  --htl-body:            #6E88B0;   /* ZS-004-04 */
  --htl-card-bg:         #122347;   /* ZS-004-08 */
  --htl-card-border:     #1A2F5A;   /* ZS-004-07 */

  /* 纵向长文本 */
  --vtl-line:            #2D4473;   /* ZS-004-06 */
  --vtl-node:            #1677FF;   /* ZS-002-06 */
  --vtl-date:            #4096FF;   /* ZS-002-05 */
  --vtl-card-bg:         #122347;   /* ZS-004-08 */
  --vtl-card-border:     #1A2F5A;   /* ZS-004-07 */
  --vtl-avatar-bg:       #1A2F5A;   /* ZS-004-07 */
  --vtl-name:            #C5CFE0;   /* ZS-004-02 */
  --vtl-body:            #6E88B0;   /* ZS-004-04 */
}
```

---

## 32. 对话框（Dialog / 确认框）

> 对应设计稿「7.1 消息提醒-对话框」。轻量确认弹窗，承载一句提示 + 「取消 / 确定」。是 §21 弹出式窗口的**精简变体**：标题用**左竖条**而非居中、主体仅一行信息、无 Tabs / 步骤条 / 表单。遮罩 / 容器 / 底部按钮沿用 §21，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。

### 32.1 容器与遮罩

| 属性 | 取值 | 来源 |
|------|------|------|
| 遮罩 | `rgba(6,14,36,0.6)` | §21.1 |
| 容器背景 | `#0C1836` (ZS-004-09)（也可用 §21 渐变） | §21.1 |
| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — |
| 圆角 | `4px` | §4.1 |
| 阴影 | `0 8px 32px rgba(6,14,36,0.6)`（三级） | §3.1.4 |
| 宽度 | `400px`（小） | — |
| 内边距 | `0`（标题栏 / 主体 / 底部各自带 padding） | — |

### 32.2 标题栏

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 标题栏背景 | `#122347` (ZS-004-08) | §3.1.2 |
| 标题左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §22.1 |
| 标题文字（"提示"） | `16px Medium`，`#FFFFFF` | — |
| 关闭 `×` | `16px`，`#6E88B0`，hover `#4096FF` | §5.2.4 |
| 标题栏高度 | `48px` | — |
| 标题栏底分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 |
| 水平 padding | `--spacing-4` (16px) | §7.1 |

### 32.3 主体与底部

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 主体文字（"这是一段信息"） | `14px Regular`，`#C5CFE0` (ZS-004-02) | — |
| 主体内边距 | `--spacing-4` (16px) | §7.1 |
| 主体最小高度 | `80px` | — |
| 底部按钮区 | 右对齐，右内 padding `--spacing-4` (16px)，下内 padding `--spacing-4` | §7.1 |
| 「取消」 | §5.2.2 默认按钮，小号 `28px` | §5.2.2 |
| 「确定」 | §5.2.1 主按钮，小号 `28px` | §5.2.1 |
| 按钮间距 | `--spacing-2` (8px) | §7.1 |

### 32.4 类型变体

对话框可携带语义图标（同 §27.4 / §33 语义色）置于主体文字前：

| 类型 | 图标 | 主色 |
|------|------|------|
| 信息（默认） | ⓘ `#1677FF` (ZS-002-06) | 蓝 |
| 成功 | ✓ `--func-success` | 绿 |
| 警告 | ! `--func-warning` | 橙 |
| 错误 | ✗ `#F5222D` (ZS-001-06) | 红 |

### 32.5 与 §21 的差异 / CSS Token

| 维度 | §21 弹出式窗口 | §32 对话框 |
|------|---------------|-----------|
| 标题 | 居中 + 渐变下划线 | 左竖条 + 左对齐 |
| 内容 | Tabs / 步骤条 / 多字段表单 | 一句提示（可带语义图标） |
| 宽度 | `480~800px` | `400px` |
| 用途 | 编辑 / 多步流程 | 确认 / 告知 |

```css
:root {
  --dialog-bg:          #0C1836;   /* ZS-004-09 */
  --dialog-border:      #1A2F5A;   /* ZS-004-07 */
  --dialog-head-bg:     #122347;   /* ZS-004-08 */
  --dialog-title-bar:   #1677FF;   /* ZS-002-06 左竖条 */
  --dialog-title-text:  #FFFFFF;
  --dialog-close:       #6E88B0;   /* ZS-004-04 */
  --dialog-close-hover: #4096FF;   /* ZS-002-05 */
  --dialog-body-text:   #C5CFE0;   /* ZS-004-02 */
  --dialog-divider:     #1A2F5A;   /* ZS-004-07 */
}
```

---

## 33. 全局提示（Message / Alert）

> 对应设计稿「7.3 消息提醒-全局提示」。顶部居中、自动消失、不打断操作的轻量级反馈。覆盖**信息 / 成功 / 警告 / 错误**四语义，每条分**带关闭 ×** 与 **带「查看详情」操作** 两变体。语义色统一引用 §1.1.9 / §27.4 功能语义色。

### 33.1 触发按钮（语义实心钮）

页面侧触发演示用的四颗实心语义按钮：

| 类型 | 背景 | 图标 + 文字 | 来源 |
|------|------|------------|------|
| 信息提示 | `#1677FF` (ZS-002-06) | ⓘ + 白字 | §1.1.6 |
| 成功提示 | `--func-success`（绿） | ✓ + 白字 | §27.4 |
| 警告提示 | `--func-warning`（橙） | ! + 白字 | §27.4 |
| 错误提示 | `#F5222D` (ZS-001-06) | ✗ + 白字 | §1.1.2 |

按钮规格沿用 §5.2.1（高 `32px`，圆角 `2px`，前缀图标 `--spacing-1` 间距）。

### 33.2 提示条（Message 单条）

```
┌────────────────────────────────────────────────┐
│ ✓ 恭喜！你所提交的信息已经审核通过。        ×  │  ← 变体 A：带关闭
└────────────────────────────────────────────────┘
┌────────────────────────────────────────────────┐
│ ✓ 恭喜！你所提交的信息已经审核通过。    查看详情 │  ← 变体 B：带操作
└────────────────────────────────────────────────┘
```

#### 33.2.1 通用规格

| 属性 | 取值 | 来源 |
|------|------|------|
| 高度 | `40px`（单行） | — |
| 圆角 | `2px` | §4.1 |
| 水平 padding | `--spacing-4` (16px) | §7.1 |
| 语义图标 | `16px`，置于最左，语义色 | §27.4 |
| 图标 → 文字间距 | `--spacing-2` (8px) | §7.1 |
| 正文文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — |
| 左侧强调边 | `3px solid` 语义色（可选，增强辨识） | §6.1 |
| 顶部弹出动画 | 顶部居中 `translateY(-100%) → 0` + `opacity`，`200ms ease-out` | §8.5 |
| 自动消失 | 默认 `3s` 后淡出（错误类可设不自动消失） | — |

#### 33.2.2 四语义底色

| 语义 | 背景（约 12~16% 透明语义底） | 图标 / 强调色 | 来源 |
|------|------------------------------|--------------|------|
| 成功 | `rgba(82,196,26,0.16)` | `--func-success` ✓ | §27.4 |
| 错误 | `rgba(245,34,45,0.16)` | `#F5222D` ✗ (ZS-001-06) | §1.1.2 |
| 信息 | `rgba(22,119,255,0.16)` | `#1677FF` ⓘ (ZS-002-06) | §1.1.6 |
| 警告 | `rgba(250,173,20,0.16)` | `--func-warning` ! | §27.4 |

> 底色叠在页面深蓝背景上呈低饱和语义色块；文字保持 `#C5CFE0` 高可读，仅图标与边用满饱和语义色。

#### 33.2.3 右侧元素（二选一）

| 变体 | 元素 | 规格 | 来源 |
|------|------|------|------|
| A 带关闭 | `×` | `14px`，`#6E88B0`，hover `#FFFFFF` | §15.2.1 |
| B 带操作 | 「查看详情」 | §5.2.3 文本按钮，**颜色取所在语义色**（成功=绿 / 错误=红 / 信息=蓝 / 警告=橙），hover 加深 | §5.2.3 |

### 33.3 多条堆叠

| 规则 | 取值 |
|------|------|
| 堆叠方向 | 顶部居中，新消息在下 / 旧消息上推（或反之，跟随实现） |
| 条间距 | `--spacing-2` (8px) |
| 最大同时显示 | 建议 `≤ 5` 条，超出排队 |

### 33.4 与 §32 对话框的区别

| 维度 | §33 全局提示 | §32 对话框 |
|------|-------------|-----------|
| 打断性 | 不打断（自动消失） | 打断（需用户确认） |
| 位置 | 顶部居中悬浮 | 屏幕居中 + 遮罩 |
| 操作 | 至多一个「查看详情」 | 取消 / 确定 |
| 用途 | 操作结果即时反馈 | 二次确认 / 重要告知 |

### 33.5 CSS Token 参考

```css
:root {
  /* 语义色复用 §27.4：--func-success / --func-warning / --func-error / --func-info */

  /* 提示条通用 */
  --msg-text:           #C5CFE0;   /* ZS-004-02 */
  --msg-close:          #6E88B0;   /* ZS-004-04 */
  --msg-close-hover:    #FFFFFF;

  /* 四语义底色 */
  --msg-success-bg:     rgba(82,196,26,0.16);
  --msg-success-fg:     #52C41A;   /* --func-success */
  --msg-error-bg:       rgba(245,34,45,0.16);
  --msg-error-fg:       #F5222D;   /* ZS-001-06 */
  --msg-info-bg:        rgba(22,119,255,0.16);
  --msg-info-fg:        #1677FF;   /* ZS-002-06 */
  --msg-warning-bg:     rgba(250,173,20,0.16);
  --msg-warning-fg:     #FAAD14;   /* --func-warning */
}
```

---

## 34. 气泡确认（Popconfirm）

> 对应设计稿「7.4 消息提醒-气泡确认」。锚定在触发元素（如「删除」按钮）上的小型确认气泡，带指向箭头 + 问号图标 + 一句确认语 + 「取消 / 确定」。比 §32 对话框更轻、无遮罩、就地确认。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，问号图标用 §27.4 警告橙。

### 34.1 结构

```
   [ 删除 ]            ← 触发按钮
      ▲                ← 指向箭头
┌─────────────────────┐
│ ❓ 这是一段内容确定删除吗？│
│            取消  [确定] │
└─────────────────────┘
```

### 34.2 气泡容器

| 属性 | 取值 | 来源 |
|------|------|------|
| 背景 | `#0C1836` (ZS-004-09)（或 `#122347`） | §3.1 |
| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — |
| 圆角 | `4px` | §4.1 |
| 阴影 | `0 4px 16px rgba(6,14,36,0.6)`（三级阴影变体） | §3.1.4 |
| 内边距 | `--spacing-3` (12px) | §7.1 |
| 最小宽度 | `200px` | — |
| 指向箭头 | `8px` 三角，与容器同底色 + 同边框，指向触发元素 | — |
| 与触发元素间距 | `--spacing-2` (8px) | §7.1 |

### 34.3 内容与按钮

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 问号图标 ❓ | `16px`，圆形实心 `--func-warning`（橙），白色 `?` | §27.4 |
| 图标 → 文字间距 | `--spacing-2` (8px) | §7.1 |
| 确认文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — |
| 文字 → 按钮区纵向间距 | `--spacing-3` (12px) | §7.1 |
| 按钮区对齐 | 右对齐 | — |
| 「取消」 | §5.2.3 文本按钮（`#4096FF`，hover `#1677FF`）或 §5.2.2 默认按钮小号 | §5.2.3 |
| 「确定」 | §5.2.1 主按钮，小号 `28px` | §5.2.1 |
| 按钮间距 | `--spacing-2` (8px) | §7.1 |

### 34.4 弹出方位与交互

| 行为 | 规则 |
|------|------|
| 方位 | 默认在触发元素**正下方**（`top` 箭头）；空间不足时自动翻转到上 / 左 / 右 |
| 打开 | `scale(0.95)→1` + `opacity 0→1`，`transform-origin` 指向箭头，`200ms ease-out` |
| 关闭 | 点「取消」/「确定」/ 点击气泡外部 / `Esc` |
| 「确定」 | 执行危险操作（如删除）后关闭；可在确认按钮上叠 §5.4.2 Loading |
| 无遮罩 | 不阻塞背景，仅就地确认 |

### 34.5 与 §32 对话框的区别

| 维度 | §34 气泡确认 | §32 对话框 |
|------|-------------|-----------|
| 锚定 | 贴触发元素（带箭头） | 屏幕居中 |
| 遮罩 | 无 | 有 |
| 体量 | 极小（一句话 + 两钮） | 小弹窗（标题栏 + 主体 + 底部） |
| 用途 | 行内危险操作就地确认（删除 / 重置） | 较正式的确认 / 告知 |

### 34.6 CSS Token 参考

```css
:root {
  --popconfirm-bg:        #0C1836;   /* ZS-004-09 */
  --popconfirm-border:    #1A2F5A;   /* ZS-004-07 */
  --popconfirm-shadow:    0 4px 16px rgba(6,14,36,0.6);
  --popconfirm-icon:      #FAAD14;   /* --func-warning 问号 */
  --popconfirm-text:      #C5CFE0;   /* ZS-004-02 */
  --popconfirm-cancel:    #4096FF;   /* ZS-002-05 文本按钮 */
  --popconfirm-cancel-hover: #1677FF;/* ZS-002-06 */
  --popconfirm-ok-bg:     #1677FF;   /* ZS-002-06 主按钮 */
}
```

---