# 深蓝色 UI 规范 · 05 页面范例（§42–§44）

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

**本篇目录**：`42` 表单弹窗范例 · `43` 卡片列表页 · `44` 数据概览仪表盘

---

## 42. 表单弹窗范例（添加 / 编辑标题）

> 对应设计稿「添加/编辑标题」弹窗（截图 ui-25）。这是 §21 弹出式窗口在「专项 / 标题录入」场景下的落地范例：容器 / 遮罩 / 标题栏 / 底部按钮全部沿用 §21，本节补充截图中出现而 §21 未单列的两个原子——**复合输入行**（输入框 + 行内下拉 + 行内按钮）与**行内「添加项」实心按钮**（+ 类别一 / + 类别二），并给出完整表单项清单。配色从 §1.1.2 渐红系（必填星号）、§1.1.3 渐蓝系（ZS-002，主色 / 下拉 / 按钮）、§1.1.5 深蓝系（ZS-004，label / 边框 / 容器）取。

### 42.1 整体布局

```
┌──────────────────────────────────────────────────────────────┐
│                     添加/编辑标题                          ✕    │  ← 标题居中 + 关闭
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │  ← 发光分割线
│                                                                │
│ * 专项名称  [请输入内容         ] [一键导入历史专项模板▾] [预览] │  ← 复合输入行
│ * 专项简介  [请输入内容                                      ]  │
│ * 国家地区  [                                             ▾ ]  │
│ * 涉及类别  [ + 类别一 ]  [ + 类别二 ]                          │  ← 行内添加按钮
│ * 显示指数  [请选择                                       ▾ ]  │
│                                                                │
│                      [ 取消 ]   [ 保存 ]                        │  ← 底部居中
└──────────────────────────────────────────────────────────────┘
```

### 42.2 容器与标题（沿用 §21）

| 元素 | 取值 | 来源 |
|------|------|------|
| 遮罩 / 容器 / 圆角 / 阴影 | 全部沿用 §21.1 | §21.1 |
| 容器宽度 | 大档 `800px`（复合输入行需要横向空间） | §21.1 |
| 标题文字 | `添加/编辑标题`，`20px Bold`，`#FFFFFF`，居中 | §21.2 |
| 标题发光分割线 | `linear-gradient(90deg, transparent, #1677FF, transparent)`，`1px` 高 | §8.2.4 / §21.2 |
| 关闭 `✕` | `16px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` (ZS-002-05) | §21.2 |

### 42.3 表单项（左 label + 右控件，沿用 §21.4）

| 行 | label | 控件 | 复用 |
|----|-------|------|------|
| 1 | `* 专项名称` | 复合输入行（见 §42.4） | §42.4 |
| 2 | `* 专项简介` | 单行输入框，占位「请输入内容」 | §14.1 |
| 3 | `* 国家地区` | 选择器（▾，空态占位） | §15.1 |
| 4 | `* 涉及类别` | 行内「添加项」实心按钮组（见 §42.5） | §42.5 |
| 5 | `* 显示指数` | 选择器（▾，占位「请选择」） | §15.1 |

- label `14px Regular`，`#C5CFE0` (ZS-004-02)，右对齐；必填星号 `*` `#F5222D` (ZS-001-06) 置于 label 前（§21.4）
- 表单项纵向间距 `--spacing-4` (16px)（§7.1）

### 42.4 复合输入行（输入框 + 行内下拉 + 行内按钮）

「专项名称」行把主输入框、「一键导入历史专项模板」下拉、「预览」主按钮拼在同一行。

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 主输入框 | 沿用 §14.1，弹性撑满左侧剩余宽 | §14.1 |
| 行内下拉「一键导入历史专项模板 ▾」 | 沿用 §15.1 选择器触发器，固定宽（约 `200px`），占位文字 `#6E88B0` | §15.1 |
| 行内按钮「预览」 | §5.2.1 主按钮（实心 `#1677FF` + 白字） | §5.2.1 |
| 元素间水平间距 | `--spacing-2` (8px) | §7.1 |
| 三者垂直对齐 | 统一 `32px` 高，基线居中 | §5.1 |

### 42.5 行内「添加项」实心按钮（+ 类别一 / + 类别二）

「涉及类别」用一排实心主色蓝按钮，左侧 `+` 图标，点击进入对应类别的添加 / 编辑流程。

| 状态 | 背景 | 文字 / 图标 | 来源 |
|------|------|-------------|------|
| 默认 | `#1677FF` (ZS-002-06) | `#FFFFFF` | §5.2.1 / §5.3.2 |
| Hover | `#0958D9` (ZS-002-07) | `#FFFFFF` | §5.2.1 |
| Active | `#003EB3` (ZS-002-08) | `#FFFFFF` | §5.2.1 |

- 高度 `32px`，圆角 `2px`（§4.1），内边距 `0 14px`（§5.1）
- `+` 图标与文字同色 `#FFFFFF`，间距 `--spacing-1` (4px)（§5.3.2）
- 按钮之间间距 `--spacing-2` (8px)
- 与 §21.5.1 分段按钮组的区别：分段组是**互斥单选**（选中才高亮）；此处每个按钮都是**独立的添加入口**，常驻主色实心。

### 42.6 底部操作（沿用 §21.6）

| 元素 | 规格 | 来源 |
|------|------|------|
| 对齐 | 居中（跟随截图） | §21.6 |
| 「取消」 | §5.2.2 默认按钮（Outline） | §5.2.2 |
| 「保存」 | §5.2.1 主按钮（实心蓝） | §5.2.1 |
| 顺序 / 间距 | 取消在左、保存在右；间距 `--spacing-2` (8px) | §5.3.4 |

### 42.7 CSS Token 参考

```css
:root {
  /* 复合输入行 */
  --field-row-gap:        8px;        /* --spacing-2 元素间距 */
  --field-addon-select-w: 200px;      /* 行内下拉固定宽 */
  --field-row-h:          32px;       /* 统一高度 */

  /* 行内添加按钮（沿用主按钮） */
  --addbtn-bg:            #1677FF;    /* ZS-002-06 */
  --addbtn-bg-hover:      #0958D9;    /* ZS-002-07 */
  --addbtn-bg-active:     #003EB3;    /* ZS-002-08 */
  --addbtn-text:          #FFFFFF;
}
```

---

## 43. 卡片列表页（监测任务卡片）

> 对应设计稿「监测任务卡片列表」（截图 ui-26）。这是 §22 卡片在「监测任务管理」场景下的整页范例：顶部导航沿用 §8、左侧三级菜单沿用 §8.3、卡片容器沿用 §22，本节补充**页面工具条**（搜索 + 添加 + 排序）与**监测任务卡片**的专用布局（头部 + 总量 KPI + 平台统计矩阵 + 底部操作 + 空态）。配色从 §1.1.3 渐蓝系（ZS-002，主色 / KPI 数字）与 §1.1.5 深蓝系（ZS-004，容器 / 文字）取。

### 43.1 整体布局

```
┌─ Header（§8.2）──────────────────────────────────────────────┐
├──┬────────────────────────────────────────────────────────────┤
│三│ [🔍 搜索关键词/任务名称  ] [+ 添加任务]   排序: 创建时间▾ ↑升序 │  ← 工具条
│级│ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌──────────┐ │
│菜│ │ 莫某某 10247│ │ 冯某某 10247│ │ 钱某艺 10247│ │ 赵磊   12 │ │  ← 卡片网格
│单│ │ 社交媒体(52)│ │ 社交媒体(52)│ │ 社交媒体(52)│ │  ...      │ │
│  │ │ [开始监测] │ │ [开始监测] │ │ [开始监测] │ │           │ │
│  │ └────────────┘ └────────────┘ └────────────┘ └──────────┘ │
└──┴────────────────────────────────────────────────────────────┘
```

### 43.2 页面工具条

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 搜索框 | 沿用 §14.2 基本搜索框，占位「搜索关键词 / 任务名称」 | §14.2 |
| 「+ 添加任务」 | §5.3.2 图标 + 文字主按钮（实心 `#1677FF` + 白字 + `+`） | §5.3.2 |
| 排序标签「排序」 | `14px Regular`，`#6E88B0` (ZS-004-04) | — |
| 排序字段「创建时间 ▾」 | §15.1 选择器触发器（小号） | §15.1 |
| 升 / 降序切换「↑ 升序 / ↓ 降序」 | §5.2.3 文本按钮，激活向 `#4096FF` (ZS-002-05) | §5.2.3 |
| 工具条 → 卡片区间距 | `--spacing-5` (24px) | §7.1 |
| 工具条内元素间距 | `--spacing-3` (12px) | §7.1 |

### 43.3 监测任务卡片

```
┌──────────────────────────────────────┐
│ 👤 莫某某                       10247  │  ← 头部：头像+名称 / 右上总量
│    2023-09-09 09:13:00          总数量 │
│ ────────────────────────────────────  │
│ 社交媒体 (52)                          │  ← 统计区标题
│ 微博  16    推特   8   facebook 16     │  ← 平台统计矩阵
│ 抖音  12    土豆   6   大牛网    9     │
│ ────────────────────────────────────  │
│ url: t.djxqbjhgf9y.cn   也方开夫某利地址│
│              [ 开始监测 ]              │  ← 底部操作
└──────────────────────────────────────┘
```

#### 43.3.1 结构与配色

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 卡片容器 | 同 §22.1（背景 `#122347` / 边框 `#1A2F5A` / 圆角 `4px` / 一级阴影） | §22.1 |
| 头像占位 | 圆 `40px`，底 `#1A2F5A` (ZS-004-07)，图标 `#6E88B0` | §22.3 |
| 任务名（莫某某） | `16px Medium`，`#FFFFFF` | §22.3 |
| 创建时间 | `12px Regular`（D-DIN 数字），`#6E88B0` (ZS-004-04) | §8.2.5 |
| 总量数值（10247） | `26px Bold`（D-DIN），`#4096FF` (ZS-002-05) | §2.1.2 / §1.1.3 |
| 总量标签「总数量」 | `12px Regular`，`#6E88B0` (ZS-004-04) | — |
| 头部底分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 |

#### 43.3.2 平台统计矩阵

统计区为「平台名 + 数值」多列网格（如 社交媒体 (52) 下的 微博 / 推特 / facebook…）。

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 区标题「社交媒体 (52)」 | `14px Medium`，`#C5CFE0` (ZS-004-02)；括号计数 `#6E88B0` | — |
| 平台名 | `14px Regular`，`#6E88B0` (ZS-004-04) | — |
| 平台数值（数字） | `16px Bold`（D-DIN），`#C5CFE0` (ZS-004-02) | §2.1.2 |
| 矩阵列数 | 3 列等分，行间距 `--spacing-2` (8px) | §7.1 |
| 名 / 值间距 | `--spacing-1` (4px) | §7.1 |

#### 43.3.3 底部操作

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 「开始监测」 | §5.2.1 主按钮（实心 `#1677FF`）；运行中切 §5.4.2 加载态 | §5.2.1 / §5.4.2 |
| 次要链接（如 url / 地址） | §5.2.3 文本按钮 `#4096FF` (ZS-002-05) | §5.2.3 |
| 操作区上分割线 | `1px solid #2D4473`（弱化） | §6.1 |

#### 43.3.4 空态卡片变体

部分卡片暂无数据（总量 `0` + 占位）：

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 总量数值 | `0`，`26px Bold`，`#6E88B0` (ZS-004-04，弱化非主色) | — |
| 占位文字「暂无数据」 | `14px Regular`，`#6E88B0` (ZS-004-04)，居中 | §35.9 |
| 占位插画 | 灰度线性图标，`#4A6491` (ZS-004-05) | §35.9 |

### 43.4 卡片栅格（沿用 §22.4）

| 规则 | 取值 | 来源 |
|------|------|------|
| 列数 | 自适应，常用 3~4 列 | — |
| 卡片横 / 纵间距 | `--spacing-6` (32px) | §22.4 |
| 卡片内边距 | `--spacing-4` (16px) | §22.4 |

### 43.5 CSS Token 参考

```css
:root {
  /* 监测任务卡片 */
  --task-card-name:     #FFFFFF;
  --task-card-time:     #6E88B0;   /* ZS-004-04 */
  --task-kpi-num:       #4096FF;   /* ZS-002-05 总量数字 */
  --task-kpi-label:     #6E88B0;   /* ZS-004-04 */
  --task-stat-name:     #6E88B0;   /* ZS-004-04 平台名 */
  --task-stat-num:      #C5CFE0;   /* ZS-004-02 平台数值 */
  --task-divider:       #1A2F5A;   /* ZS-004-07 头部分割 */
  --task-divider-weak:  #2D4473;   /* ZS-004-06 操作区分割 */
  --task-empty-text:    #6E88B0;   /* ZS-004-04 空态 */
}
```

---

## 44. 数据概览仪表盘（KPI 指标条 + 综合图表）

> 对应设计稿「资源使用率概览大屏」（截图 ui-27）。这是一张把 §35–§41 各图表与 §28 表格、§9.1 页签组合在一起的概览页。本节补充截图顶部出现而前文未单列的新原子——**KPI 指标卡条**（图标 + 标签 + 大数值 + 已用 + 迷你环 + 同比 / 环比箭头徽标），其余区块均引用既有章节。配色从 §1.1.3 渐蓝系（ZS-002，主色 / 数值）、§1.1.4 渐青系（ZS-003，辅色）、§1.1.5 深蓝系（ZS-004，容器 / 文字）取；涨跌语义色见 §44.2。

### 44.1 整体布局

```
┌──┬────────────────────────────────────────────────────────────┐
│三│ ▓ KPI 指标条（账号/设备/浏览器/代理IP/VPS/邮箱/手机卡/链卡服 使用率）▓│
│级│ ┌─ ▌XXX标题 ───────────────┐ ┌─ ▌XXX标题（资源列表）────────┐│
│菜│ │ [全部|账号资源|设备指标…]  │ │ 🔍搜索   排序                ││
│单│ │  ◐异常率40%  ╱╲折线异常点 │ │ 资源资料  关联设备  2024-…   ││
│  │ │  总量300 正常270 异常30   │ │ …（§28 表格行）              ││
│  │ └───────────────────────────┘ └──────────────────────────────┘│
│  │ ┌─ ▌XXX标题 ───────────────────────┐ ┌─ ▌XXX标题 ──────────┐│
│  │ │ 异常分析 饼 + 折线（§37 / §39）    │ │ ◐300/270 + 趋势饼    ││
│  │ └────────────────────────────────────┘ └─────────────────────┘│
└──┴────────────────────────────────────────────────────────────┘
```

### 44.2 涨跌语义色

| 语义 | 色值 | 来源 |
|------|------|------|
| 上升 / 正向（▲） | `#13C2C2` (ZS-003-06，辅色青) | §1.1.4 |
| 下降 / 负向（▼） | `#F5222D` (ZS-001-06，主色红) | §1.1.2 |
| 持平 | `#6E88B0` (ZS-004-04) | §1.1.5 |

> 涨跌仅用语义色，不混入图表多系列色；正向用辅色青（ZS-003）而非主色蓝，避免与 KPI 数值蓝撞色。

### 44.3 KPI 指标卡条

横向一排等宽指标卡，每张承载一个使用率指标（如「账号使用率 139 已用」+ 迷你环 + 同比箭头）。

```
┌────────────────────────┐
│ 🅰  账号使用率           │  ← 图标 + 标签
│ 139       ◐ 45% ▲       │  ← 大数值 + 迷你环 + 同比
│ 已用              同比   │
└────────────────────────┘
```

| 元素 | 色值 / 规格 | 来源 |
|------|-------------|------|
| 卡片容器 | 背景 `#122347` (ZS-004-08)，边框 `1px solid #1A2F5A`，圆角 `4px`，一级阴影 | §22.1 |
| 指标图标 | `20px`，主色 `#4096FF` (ZS-002-05) 单色化 | §1.1.6 |
| 指标标签（账号使用率） | `14px Regular`，`#C5CFE0` (ZS-004-02) | — |
| 大数值（139） | `26px Bold`（D-DIN），`#FFFFFF` | §2.1.2 |
| 单位 / 说明「已用」 | `12px Regular`，`#6E88B0` (ZS-004-04) | — |
| 迷你环（mini-donut） | 直径 `32px`，环宽 `4px`，已用段 `#1677FF` (ZS-002-06)，底环 `#2D4473` (ZS-004-06) | §39.2 |
| 环内百分比 | `12px Bold`（D-DIN），`#FFFFFF` | §39.3 |
| 同比 / 环比箭头徽标 | `12px`，▲ 用 `#13C2C2`、▼ 用 `#F5222D`（见 §44.2） | §44.2 |
| 卡片宽度 | 等分横排（8 张则各占 1/8），最小宽 `160px` | — |
| 卡片间距 | `--spacing-4` (16px) | §7.1 |
| 卡片内边距 | `--spacing-4` (16px) | §7.1 |

### 44.4 区块组合引用

| 区块 | 复用 | 备注 |
|------|------|------|
| 区块标题（▌XXX标题） | §35.2 图表标题（主色蓝竖条 + 文字） | — |
| 分类页签（全部 / 账号资源 / …） | §9.1.1 横向页签 | 激活 `#4096FF` + `2px` 下划线 |
| 日期筛选（右上 `2023-02`） | §17.1 日期触发器 | — |
| 异常率环形图（40% / 总量300 / 正常270 / 异常30） | §39 环形图 | 正常段主色蓝、异常段 `#F5222D`（§44.2） |
| 折线异常点图（1月10日 异常率12.9%） | §37.3 单线异常点图 + §35.6 Tooltip | 异常点用红 `#F5222D` 强调 |
| 资源列表表格 | §28 表格 + §14.2 搜索 + §13 分页 | — |
| 异常分析饼 / 趋势饼 | §39 环形图 | 多系列回落 §41 色序 |
| 容器 / 内边距 / 多图间距 | §35.1 图表容器 | `--spacing-5` / `--spacing-6` |

### 44.5 交互

| 行为 | 规则 |
|------|------|
| KPI 卡 hover | 卡片阴影升二级（§3.1.4），迷你环高亮，弹出 §35.6 Tooltip（已用 / 总量 / 同比明细） |
| 页签切换 | 切换分类后下方图表与表格联动刷新（§9.1.1） |
| 图表 hover | 沿用各图表节交互（§37.6 / §39.4 等） |
| 日期筛选变更 | 重新拉取区块数据，图表入场动画重放 |

### 44.6 CSS Token 参考

```css
:root {
  /* KPI 指标卡 */
  --kpi-card-bg:     #122347;   /* ZS-004-08 */
  --kpi-card-border: #1A2F5A;   /* ZS-004-07 */
  --kpi-icon:        #4096FF;   /* ZS-002-05 */
  --kpi-label:       #C5CFE0;   /* ZS-004-02 */
  --kpi-value:       #FFFFFF;
  --kpi-sub:         #6E88B0;   /* ZS-004-04 已用 */
  --kpi-ring-used:   #1677FF;   /* ZS-002-06 迷你环已用段 */
  --kpi-ring-track:  #2D4473;   /* ZS-004-06 迷你环底 */

  /* 涨跌语义 */
  --trend-up:        #13C2C2;   /* ZS-003-06 上升（辅色青） */
  --trend-down:      #F5222D;   /* ZS-001-06 下降（红） */
  --trend-flat:      #6E88B0;   /* ZS-004-04 持平 */
}
```