1380 lines
59 KiB
Markdown
1380 lines
59 KiB
Markdown
# 深蓝色 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 多万元！他们靠卖「口罩」… 收起 │ ← 展开项（高亮）
|
||
│ 描述正文段落描述正文段落 … │
|
||
├────────────────────────────────────────┤
|
||
│ ▸ 某条新闻标题某条新闻标题 … 展开 │
|
||
├────────────────────────────────────────┤
|
||
│ ▸ 某科学家<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 参考
|
||
|
||
```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 主按钮 */
|
||
}
|
||
```
|
||
|
||
---
|
||
|