deerflow-code/frontend-web/docs/ui规范-深蓝/03-数据展示.md

深蓝色 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 参考

: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 多万元！他们靠卖「口罩」…   收起 │  ← 展开项（高亮）
│   描述正文段落描述正文段落 …            │
├────────────────────────────────────────┤
│ ▸ 某条新闻标题某条新闻标题 …       展开 │
├────────────────────────────────────────┤
│ ▸ 某科学家<E5ADA6>证据曝光为何争不下 …    展开 │
└────────────────────────────────────────┘

元素	色值 / 规格	来源
项之间分隔	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 参考

: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 参考

: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 参考

: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 参考

: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 参考

: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 参考

: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 参考

: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 参考

: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 参考

: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
用途	编辑 / 多步流程	确认 / 告知

: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 参考

: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 参考

: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 主按钮 */
}

---