wsk/deerflow-code

0 Fork 0

Files

T

董宏凯 8e909ef1c1 ui规范

2026-05-31 18:11:17 +08:00

18 KiB

Raw Blame History

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

18 KiB Raw Blame History Unescape Escape