深蓝色 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 参考
: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 参考
: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 参考
: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 持平 */
}
