321 lines
18 KiB
Markdown
321 lines
18 KiB
Markdown
# 深蓝色 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 持平 */
|
||
}
|
||
```
|