ui规范
This commit is contained in:
董宏凯 committed
1 parent
7ad42ccf16
commit
8e909ef1c1
11 files changed
+7252
-4905
No files matched your search
@@ -0,0 +1 @@
|
||||
{"sessionId":"f9cbb722-59a7-42fb-a7aa-d4923a8c3425","pid":45764,"acquiredAt":1780221904458}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,580 @@
|
||||
# 深蓝色 UI 规范 · 00 基础（色彩 / 字体 / 阴影 / 圆角 / 间距 / 分割线）
|
||||
|
||||
> 本文件是《深蓝色 UI 规范》拆分后的**基础篇（§1–§7）**，是全站设计令牌的唯一来源。
|
||||
> 其余分册见同目录 `README.md`；可直接 import 的变量见 `tokens.css`。
|
||||
> 跨章节 `§N` 编号全局唯一，所属文件见 README 的「§ 索引」。
|
||||
|
||||
**本篇目录（§1–§7）**：`1` 色彩 · `2` 字体 · `3` 阴影 · `4` 圆角 · `5` 按钮 · `6` 分割线 · `7` 间距
|
||||
|
||||
---
|
||||
|
||||
## 1. 色彩
|
||||
|
||||
### 1.1 标准色
|
||||
|
||||
色彩体系由四个色系构成，每个色系分主色与辅色两组，每组按明度从浅到深编号（01 最浅，数字越大越深）。
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.1 色系总览
|
||||
|
||||
| 色系 | 用途定位 | 代码前缀 |
|
||||
|------|----------|----------|
|
||||
| 渐红系 | 警示、错误、强调操作 | ZS-001 |
|
||||
| 渐蓝系 | 信息、链接、次级操作 | ZS-002 |
|
||||
| 渐青系 | 成功、在线状态、数据高亮 | ZS-003 |
|
||||
| 深蓝系 | 页面背景、容器、导航底色 | ZS-004 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.2 渐红系（ZS-001）
|
||||
|
||||
用于错误提示、危险操作、重要告警。
|
||||
|
||||
| 编号 | 色值 | 说明 |
|
||||
|------|------|------|
|
||||
| ZS-001-01 | `#FFF1F0` | 极浅红，错误背景底色 |
|
||||
| ZS-001-02 | `#FFCCC7` | 浅红，输入框错误边框 |
|
||||
| ZS-001-03 | `#FFA39E` | — |
|
||||
| ZS-001-04 | `#FF7875` | — |
|
||||
| ZS-001-05 | `#FF4D4F` | 标准红，Tag / Badge |
|
||||
| ZS-001-06 | `#F5222D` | 主色红，按钮 / 图标 |
|
||||
| ZS-001-07 | `#CF1322` | 深红，Hover 状态 |
|
||||
| ZS-001-08 | `#A8071A` | 深红，Active / Press |
|
||||
| ZS-001-09 | `#820014` | 极深红 |
|
||||
| ZS-001-10 | `#5C0011` | 最深红 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.3 渐蓝系（ZS-002）
|
||||
|
||||
用于信息提示、链接、次级按钮。
|
||||
|
||||
| 编号 | 色值 | 说明 |
|
||||
|------|------|------|
|
||||
| ZS-002-01 | `#E6F4FF` | 极浅蓝，信息背景底色 |
|
||||
| ZS-002-02 | `#BAE0FF` | 浅蓝 |
|
||||
| ZS-002-03 | `#91CAFF` | — |
|
||||
| ZS-002-04 | `#69B1FF` | — |
|
||||
| ZS-002-05 | `#4096FF` | 标准蓝，链接 / 信息 Tag |
|
||||
| ZS-002-06 | `#1677FF` | 主色蓝，主操作按钮 |
|
||||
| ZS-002-07 | `#0958D9` | 深蓝，Hover |
|
||||
| ZS-002-08 | `#003EB3` | 深蓝，Active |
|
||||
| ZS-002-09 | `#002C8C` | 极深蓝 |
|
||||
| ZS-002-10 | `#001D6C` | 最深蓝 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.4 渐青系（ZS-003）
|
||||
|
||||
用于成功状态、在线标识、数据图表高亮。
|
||||
|
||||
| 编号 | 色值 | 说明 |
|
||||
|------|------|------|
|
||||
| ZS-003-01 | `#E6FFFB` | 极浅青，成功背景 |
|
||||
| ZS-003-02 | `#B5F5EC` | 浅青 |
|
||||
| ZS-003-03 | `#87E8DE` | — |
|
||||
| ZS-003-04 | `#5CDBD3` | — |
|
||||
| ZS-003-05 | `#36CFC9` | 标准青，成功 Tag |
|
||||
| ZS-003-06 | `#13C2C2` | 主色青，在线点 / 图标 |
|
||||
| ZS-003-07 | `#08979C` | 深青，Hover |
|
||||
| ZS-003-08 | `#006D75` | 深青，Active |
|
||||
| ZS-003-09 | `#00474F` | 极深青 |
|
||||
| ZS-003-10 | `#002329` | 最深青 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.5 深蓝系（ZS-004）
|
||||
|
||||
用于页面背景、导航栏、侧边栏、卡片容器。这是深蓝主题的核心色系。
|
||||
|
||||
| 编号 | 色值 | 说明 |
|
||||
|------|------|------|
|
||||
| ZS-004-01 | `#E8EDF5` | 极浅，分割线 / 禁用底色 |
|
||||
| ZS-004-02 | `#C5CFE0` | 浅，边框 |
|
||||
| ZS-004-03 | `#9BADC8` | — |
|
||||
| ZS-004-04 | `#6E88B0` | — |
|
||||
| ZS-004-05 | `#4A6491` | 中深蓝，次级文字 |
|
||||
| ZS-004-06 | `#2D4473` | 深蓝，卡片容器背景 |
|
||||
| ZS-004-07 | `#1A2F5A` | 深蓝，侧边栏背景 |
|
||||
| ZS-004-08 | `#122347` | 深蓝，导航栏背景 |
|
||||
| ZS-004-09 | `#0C1836` | 极深蓝，页面背景 |
|
||||
| ZS-004-10 | `#060E24` | 最深，全局底色 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.6 功能色（主色 / 字体色 / 辅色 / 背景色）
|
||||
|
||||
从标准色系中提取，用于具体 UI 角色指定。
|
||||
|
||||
| 角色 | 色值 | 来源 |
|
||||
|------|------|------|
|
||||
| 主色（Primary） | `#1677FF` | ZS-002-06 |
|
||||
| 主色 Hover | `#0958D9` | ZS-002-07 |
|
||||
| 主色 Active | `#003EB3` | ZS-002-08 |
|
||||
| 正常字体色 | `#C5CFE0` | ZS-004-02 |
|
||||
| 次级字体色 | `#6E88B0` | ZS-004-04 |
|
||||
| 禁用字体色 | `#4A6491` | ZS-004-05 |
|
||||
| 辅色（Accent） | `#13C2C2` | ZS-003-06 |
|
||||
| 页面背景色 | `#0C1836` | ZS-004-09 |
|
||||
| 容器背景色 | `#1A2F5A` | ZS-004-07 |
|
||||
| 白色 | `#FFFFFF` | — |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.7 小面积装饰色
|
||||
|
||||
用于图标点缀、徽标、少量强调，不用于大面积背景。
|
||||
|
||||
| 色值 | 说明 |
|
||||
|------|------|
|
||||
| `#6388FF` | 紫蓝，图标装饰 |
|
||||
| `#F5222D` | 红色，危险徽标 |
|
||||
| `#12306C` | 深蓝，品牌点缀 |
|
||||
| `#478880` | 青绿，辅助点缀 |
|
||||
| `#950404` | 深红，重要告警点 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.8 图表配色
|
||||
|
||||
**通用图表色序**（面积较大，如柱状图、折线图、饼图）：
|
||||
|
||||
| 序号 | 色值 |
|
||||
|------|------|
|
||||
| 1 | `#1677FF` |
|
||||
| 2 | `#13C2C2` |
|
||||
| 3 | `#4096FF` |
|
||||
| 4 | `#36CFC9` |
|
||||
| 5 | `#69B1FF` |
|
||||
| 6 | `#5CDBD3` |
|
||||
| 7 | `#91CAFF` |
|
||||
| 8 | `#87E8DE` |
|
||||
|
||||
**小面积图表色序**（面积较小，如散点、小徽章、迷你图）：
|
||||
|
||||
| 序号 | 色值 |
|
||||
|------|------|
|
||||
| 1 | `#4096FF` |
|
||||
| 2 | `#36CFC9` |
|
||||
| 3 | `#FF4D4F` |
|
||||
| 4 | `#FFA39E` |
|
||||
| 5 | `#6388FF` |
|
||||
| 6 | `#478880` |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.9 功能语义色（Functional / Status）
|
||||
|
||||
承载「成功 / 警告 / 错误 / 信息 / 处理中」语义。其中**错误红、信息蓝、处理中青**直接复用标准色；**成功绿、警告橙**为标准色系之外的补充色（深色背景下 ZS-003 青偏冷、且无现成橙），在此正式收录。全站语义场景一律引用本表，不再各处自定义。
|
||||
|
||||
| 语义 | 色值 | 来源 | 典型用途 |
|
||||
|------|------|------|----------|
|
||||
| 成功 / 已完成 | `#52C41A` | 补充色（绿） | 成功提示、完成状态、通过校验 |
|
||||
| 警告 / 进行中 | `#FAAD14` | 补充色（橙） | 警告提示、进行中、需注意 |
|
||||
| 错误 / 失败 | `#F5222D` | ZS-001-06 | 错误提示、删除、失败状态 |
|
||||
| 信息 / 默认 | `#1677FF` | ZS-002-06 | 信息提示、主操作、链接 |
|
||||
| 处理中 / 等待 | `#13C2C2` | ZS-003-06 | 处理中、排队、等待反馈 |
|
||||
|
||||
> 浅底变体（Message / Alert / Tag 底色）：前景色取 16% 透明度，如成功底 `rgba(82,196,26,0.16)`、警告底 `rgba(250,173,20,0.16)`。
|
||||
> CSS Token 见 `tokens.css` 的 `--func-success / --func-warning / --func-error / --func-info / --func-processing`。
|
||||
|
||||
---
|
||||
|
||||
## 2. 字体
|
||||
|
||||
### 2.1 全局样式 - 字体
|
||||
|
||||
---
|
||||
|
||||
#### 2.1.1 大屏页面字体规范
|
||||
|
||||
##### 中文字体：Noto Sans S Chinese
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 24px Bold | 一级标题 |
|
||||
| 24px Medium | 次要一级标题 |
|
||||
| 22px Medium | 二级标题 |
|
||||
| 22px Regular | 正文 |
|
||||
| 20px Regular | 排版空间有限的正文 |
|
||||
|
||||
##### 数字字体：D-DIN
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 32px Bold | 重要数据展示 |
|
||||
| 32px Regular | 普通数据展示 |
|
||||
| 26px Bold | 常规数据展示 |
|
||||
| 26px Regular | 常规数据展示 |
|
||||
|
||||
##### 特殊数字：DS-Digital
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 50px Bold | 大屏主数据展示 |
|
||||
|
||||
##### 表格字体：Arial
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 20px Regular | 表格横纵轴数字 |
|
||||
|
||||
---
|
||||
|
||||
#### 2.1.2 后台系统字体规范
|
||||
|
||||
##### 中文字体：Noto Sans S Chinese
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 18px Bold | 导航、一级标题 |
|
||||
| 18px Medium | 次要一级标题 |
|
||||
| 16px Bold | 二级标题 |
|
||||
| 16px Medium | 次要二级标题 |
|
||||
| 16px Regular | 正文、按钮内部文字等 |
|
||||
| 16px Light | 次要正文 |
|
||||
|
||||
##### 数字字体：D-DIN
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 26px Bold | 重要数据展示 |
|
||||
| 26px Regular | 普通数据展示 |
|
||||
| 24px Bold | 常规数据展示（小） |
|
||||
| 24px Regular | 常规数据展示（小） |
|
||||
|
||||
##### LOGO 字体：DOUYUFont
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 20px 文字样式 | 页面顶部系统名称 |
|
||||
|
||||
##### 表格数字：Arial
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 16px Regular | 表格横纵轴数字 |
|
||||
| 14px Regular | 表格横轴数字（空间有限） |
|
||||
|
||||
---
|
||||
|
||||
## 3. 阴影
|
||||
|
||||
### 3.1 容器与卡片配色
|
||||
|
||||
阴影组通过深浅层级叠加形成空间感：外层容器最深，内层卡片次之，边框与高亮文字使用主色或字体色。
|
||||
|
||||
#### 3.1.1 外层容器
|
||||
|
||||
| 角色 | 色值 | 来源 |
|
||||
|------|------|------|
|
||||
| 页面 / 最外层背景 | `#060E24` | ZS-004-10 |
|
||||
| 分栏容器背景 | `#0C1836` | ZS-004-09 |
|
||||
|
||||
#### 3.1.2 卡片（标题 + 操作）
|
||||
|
||||
| 角色 | 色值 | 来源 |
|
||||
|------|------|------|
|
||||
| 卡片背景 | `#122347` | ZS-004-08 |
|
||||
| 卡片边框 | `#1A2F5A` | ZS-004-07 |
|
||||
| 卡片阴影（外发光） | `rgba(22, 119, 255, 0.12)` | 基于 ZS-002-06 主色蓝 12% 透明度 |
|
||||
| 标题文字（16px Bold） | `#C5CFE0` | ZS-004-02（正常字体色） |
|
||||
| 操作按钮文字 | `#4096FF` | ZS-002-05（标准蓝，链接） |
|
||||
| 次级操作图标（✏️ / ⋯） | `#6E88B0` | ZS-004-04（次级字体色） |
|
||||
|
||||
#### 3.1.3 卡片新增（占位卡片）
|
||||
|
||||
虚线描边的"新增入口"卡片，用于引导用户添加内容。
|
||||
|
||||
| 角色 | 色值 | 来源 |
|
||||
|------|------|------|
|
||||
| 卡片背景 | `#0C1836` | ZS-004-09（与外层同色，营造凹陷感） |
|
||||
| 虚线边框 | `#4096FF` | ZS-002-05 |
|
||||
| 加号图标 | `#4096FF` | ZS-002-05 |
|
||||
|
||||
#### 3.1.4 阴影投影规则
|
||||
|
||||
| 层级 | 阴影值 | 使用场景 |
|
||||
|------|--------|----------|
|
||||
| 一级阴影（卡片悬浮） | `0 2px 8px rgba(22, 119, 255, 0.12)` | 普通卡片 |
|
||||
| 二级阴影（hover / 强调） | `0 4px 16px rgba(22, 119, 255, 0.24)` | 卡片 hover、弹出层 |
|
||||
| 三级阴影（弹窗 / Modal） | `0 8px 32px rgba(6, 14, 36, 0.6)` | Dialog、Drawer |
|
||||
|
||||
---
|
||||
|
||||
## 4. 圆角
|
||||
|
||||
### 4.1 圆角统一规范
|
||||
|
||||
| 元素 | 圆角值 | 说明 |
|
||||
|------|--------|------|
|
||||
| 按钮 | `2px` | 所有按钮（主按钮 / 次按钮 / 文本按钮）统一使用 |
|
||||
| 卡片 | `4px` | 内容卡片、标题+操作卡片、卡片新增占位 |
|
||||
| 页面分栏框 | `4px` | 外层容器、分栏区域 |
|
||||
| 输入框 / 选择器 | `2px` | 与按钮一致，保持表单内对齐 |
|
||||
| Tag / Badge | `2px` | 与按钮一致 |
|
||||
| Modal / Drawer | `4px` | 与卡片一致 |
|
||||
|
||||
### 4.2 按钮配色（圆角 2px）
|
||||
|
||||
#### 4.2.1 主按钮（Primary）
|
||||
|
||||
| 角色 | 色值 | 来源 |
|
||||
|------|------|------|
|
||||
| 背景 | `#1677FF` | ZS-002-06 |
|
||||
| 文字 | `#FFFFFF` | — |
|
||||
| Hover 背景 | `#0958D9` | ZS-002-07 |
|
||||
| Active 背景 | `#003EB3` | ZS-002-08 |
|
||||
| 禁用背景 | `#4A6491` | ZS-004-05 |
|
||||
| 禁用文字 | `#6E88B0` | ZS-004-04 |
|
||||
|
||||
#### 4.2.2 次按钮（Outline / Default）
|
||||
|
||||
| 角色 | 色值 | 来源 |
|
||||
|------|------|------|
|
||||
| 背景 | `transparent` | — |
|
||||
| 边框 | `#6E88B0` | ZS-004-04 |
|
||||
| 文字 | `#C5CFE0` | ZS-004-02 |
|
||||
| Hover 边框 | `#4096FF` | ZS-002-05 |
|
||||
| Hover 文字 | `#4096FF` | ZS-002-05 |
|
||||
| Active 边框 | `#1677FF` | ZS-002-06 |
|
||||
|
||||
### 4.3 卡片与分栏（圆角 4px）
|
||||
|
||||
| 角色 | 色值 | 来源 |
|
||||
|------|------|------|
|
||||
| 卡片背景 | `#122347` | ZS-004-08 |
|
||||
| 卡片边框 | `#1A2F5A` | ZS-004-07 |
|
||||
| 分栏框背景 | `#0C1836` | ZS-004-09 |
|
||||
| 分栏框边框 | `#1A2F5A` | ZS-004-07 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 按钮
|
||||
|
||||
> 全部圆角 `2px`，文字字号 14px（小尺寸）/ 14px（正常尺寸），字体 Noto Sans S Chinese Regular。
|
||||
|
||||
### 5.1 按钮尺寸
|
||||
|
||||
| 规格 | 高度 | 内边距 | 使用场景 |
|
||||
|------|------|--------|----------|
|
||||
| 小 | `28px` | `0 10px` | 空间小的板块内部，如表格中、卡片标题等 |
|
||||
| 正常 | `32px` | `0 14px` | 默认尺寸，所有常用按钮 |
|
||||
|
||||
### 5.2 按钮类型与配色
|
||||
|
||||
#### 5.2.1 主按钮（Primary）
|
||||
|
||||
> 一个操作区域只能有一个主按钮。
|
||||
|
||||
| 状态 | 背景 | 边框 | 文字 |
|
||||
|------|------|------|------|
|
||||
| 默认 | `#1677FF` (ZS-002-06) | — | `#FFFFFF` |
|
||||
| Hover | `#0958D9` (ZS-002-07) | — | `#FFFFFF` |
|
||||
| Active | `#003EB3` (ZS-002-08) | — | `#FFFFFF` |
|
||||
| 失效 | `rgba(22, 119, 255, 0.35)` | — | `#6E88B0` (ZS-004-04) |
|
||||
|
||||
#### 5.2.2 默认按钮（Default / Outline）
|
||||
|
||||
用于"取消 / 返回"等次要操作，与主按钮成对出现时主按钮在右。
|
||||
|
||||
| 状态 | 背景 | 边框 | 文字 |
|
||||
|------|------|------|------|
|
||||
| 默认 | `transparent` | `#6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) |
|
||||
| Hover | `rgba(22, 119, 255, 0.08)` | `#4096FF` (ZS-002-05) | `#4096FF` (ZS-002-05) |
|
||||
| Active | `rgba(22, 119, 255, 0.16)` | `#1677FF` (ZS-002-06) | `#1677FF` (ZS-002-06) |
|
||||
| 失效 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` (ZS-004-05) |
|
||||
|
||||
#### 5.2.3 文本按钮（Text）
|
||||
|
||||
用于表格操作、文件下载等。无背景与边框，靠文字色识别。
|
||||
|
||||
| 状态 | 文字 | 装饰 |
|
||||
|------|------|------|
|
||||
| 默认 | `#4096FF` (ZS-002-05) | 无下划线 |
|
||||
| Hover | `#1677FF` (ZS-002-06) | 显示下划线（与文字同色） |
|
||||
| Active | `#0958D9` (ZS-002-07) | 下划线 |
|
||||
| 失效 | `#4A6491` (ZS-004-05) | 无装饰 |
|
||||
|
||||
#### 5.2.4 图标按钮（Icon-only）
|
||||
|
||||
用于增强辨识度或节省空间。仅图标，无文字。
|
||||
|
||||
| 变体 | 背景 | 图标颜色 |
|
||||
|------|------|----------|
|
||||
| 主色（常用） | `#1677FF` (ZS-002-06) | `#FFFFFF` |
|
||||
| 主色 Hover | `#0958D9` (ZS-002-07) | `#FFFFFF` |
|
||||
| 危险（删除等） | `#F5222D` (ZS-001-06) | `#FFFFFF` |
|
||||
| 危险 Hover | `#CF1322` (ZS-001-07) | `#FFFFFF` |
|
||||
| 透明（仅图标） | `transparent` | `#6E88B0` (ZS-004-04) → hover `#4096FF` (ZS-002-05) |
|
||||
|
||||
### 5.3 按钮组合
|
||||
|
||||
#### 5.3.1 文字 + 下拉按钮（含 ▾）
|
||||
|
||||
两种填充：
|
||||
|
||||
| 形态 | 配色规则 |
|
||||
|------|----------|
|
||||
| 默认（Outline） | 沿用 §5.2.2 默认按钮，箭头 ▾ 与文字同色 `#C5CFE0` |
|
||||
| 主色（Filled） | 沿用 §5.2.1 主按钮，箭头 ▾ 同步白色 `#FFFFFF` |
|
||||
|
||||
#### 5.3.2 图标 + 文字按钮（如 `+ 正常`）
|
||||
|
||||
| 形态 | 配色规则 |
|
||||
|------|----------|
|
||||
| 默认（Outline） | 沿用 §5.2.2，左侧图标颜色与文字一致 `#C5CFE0` |
|
||||
| 主色（Filled） | 沿用 §5.2.1，左侧图标与文字一致 `#FFFFFF` |
|
||||
|
||||
#### 5.3.3 文本按钮 + 图标（"更多 »"、"展开 ⌄"、"下一页 »"、"« 上一页"）
|
||||
|
||||
| 角色 | 色值 |
|
||||
|------|------|
|
||||
| 文字 + 图标（默认） | `#4096FF` (ZS-002-05) |
|
||||
| 文字 + 图标（Hover） | `#1677FF` (ZS-002-06) |
|
||||
| 失效 | `#4A6491` (ZS-004-05) |
|
||||
|
||||
> 图标可在文字前或后；多个文本按钮排成一行时，间距 `16px`，无分隔符。
|
||||
|
||||
#### 5.3.4 主按钮 + 默认按钮组合（如"确定 / 取消 / 返回"）
|
||||
|
||||
- **排列顺序**：默认按钮在左，主按钮在右（最右侧为主操作）
|
||||
- **按钮间距**：`8px`
|
||||
- **示例**：`[ 返回 ] [ 取消 ] [ 确定 ]`
|
||||
- **配色**：主按钮沿用 §5.2.1，其余沿用 §5.2.2
|
||||
|
||||
### 5.4 其他按钮
|
||||
|
||||
#### 5.4.1 悬浮状态（Floating）
|
||||
|
||||
用于 Banner / 登录 / 视觉冲击强等展示场景。配色与主按钮一致，叠加阴影抬升。
|
||||
|
||||
| 状态 | 阴影 |
|
||||
|------|------|
|
||||
| 默认 | `0 2px 8px rgba(22, 119, 255, 0.12)`（§3.1.4 一级阴影） |
|
||||
| Hover | `0 4px 16px rgba(22, 119, 255, 0.24)`（§3.1.4 二级阴影） |
|
||||
| Active | 阴影消失，按下感 |
|
||||
|
||||
#### 5.4.2 加载中（Loading）
|
||||
|
||||
用于异步操作等待反馈。点击瞬间将按钮锁定，文字前显示旋转图标。
|
||||
|
||||
| 角色 | 色值 |
|
||||
|------|------|
|
||||
| 背景 | `#1677FF` (ZS-002-06) |
|
||||
| 文字 | `#FFFFFF` |
|
||||
| 加载图标 | `#FFFFFF`，旋转动画 `1.2s linear infinite` |
|
||||
| 不可点击 | 鼠标 `cursor: not-allowed` |
|
||||
|
||||
> 与失效态的区别：失效是"不可操作"，加载是"操作进行中"——保留品牌主色，只是不可再次触发。
|
||||
|
||||
---
|
||||
|
||||
## 6. 分割线
|
||||
|
||||
> 统一线宽 `1px`，颜色全部从 ZS-004 深蓝系取色，与深色背景保持低对比度但仍可识别。
|
||||
|
||||
### 6.1 水平分割线
|
||||
|
||||
水平分割线常用来对不同元素内容进行分割。
|
||||
|
||||
| 类型 | 色值 | 来源 | 样式 | 使用场景 |
|
||||
|------|------|------|------|----------|
|
||||
| 实线（默认） | `#4A6491` | ZS-004-05 | `border-top: 1px solid` | 模块间、列表项间分割 |
|
||||
| 实线（强调） | `#6E88B0` | ZS-004-04 | `border-top: 1px solid` | 主区块标题下方、卡片头部分割 |
|
||||
| 实线（弱化） | `#2D4473` | ZS-004-06 | `border-top: 1px solid` | 卡片内部、密集列表分隔 |
|
||||
| 虚线 | `#4A6491` | ZS-004-05 | `border-top: 1px dashed` | 次级 / 层级内分割，提示"非主结构" |
|
||||
| 主色实线（高亮） | `#1677FF` | ZS-002-06 | `border-top: 1px solid` | 强调分隔，少量使用（如当前激活区块底边） |
|
||||
|
||||
### 6.2 垂直分割线
|
||||
|
||||
垂直分割线常用来做行内分割（如导航项之间、状态指示之间、表格列头之间）。
|
||||
|
||||
| 类型 | 色值 | 来源 | 样式 | 使用场景 |
|
||||
|------|------|------|------|----------|
|
||||
| 实线（默认） | `#4A6491` | ZS-004-05 | `border-left: 1px solid` | 行内 inline 元素分割（面包屑、操作按钮组） |
|
||||
| 实线（弱化） | `#2D4473` | ZS-004-06 | `border-left: 1px solid` | 表格列分割、紧凑布局 |
|
||||
| 虚线 | `#4A6491` | ZS-004-05 | `border-left: 1px dashed` | 多列对齐辅助、辅助参考线 |
|
||||
|
||||
### 6.3 规格与间距
|
||||
|
||||
| 规则 | 取值 |
|
||||
|------|------|
|
||||
| 线宽 | `1px` |
|
||||
| 水平分割线与上下元素间距 | `≥ 8px`（紧凑布局可用 `4px`） |
|
||||
| 垂直分割线与左右元素间距 | `≥ 8px`（行内紧凑 `4px`） |
|
||||
| 垂直分割线高度 | 与文字行高一致，约 `12–14px`（也可全高跟随容器） |
|
||||
| 透明度 | 必要时叠 `opacity: 0.6` 实现"更弱"层级 |
|
||||
|
||||
### 6.4 CSS 参考
|
||||
|
||||
```css
|
||||
/* 默认水平分割线 */
|
||||
.divider-h { border-top: 1px solid #4A6491; }
|
||||
.divider-h-strong { border-top: 1px solid #6E88B0; }
|
||||
.divider-h-weak { border-top: 1px solid #2D4473; }
|
||||
.divider-h-dashed { border-top: 1px dashed #4A6491; }
|
||||
.divider-h-accent { border-top: 1px solid #1677FF; }
|
||||
|
||||
/* 垂直分割线 */
|
||||
.divider-v { border-left: 1px solid #4A6491; height: 14px; display: inline-block; vertical-align: middle; }
|
||||
.divider-v-weak { border-left: 1px solid #2D4473; height: 14px; display: inline-block; vertical-align: middle; }
|
||||
.divider-v-dashed { border-left: 1px dashed #4A6491; height: 14px; display: inline-block; vertical-align: middle; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 间距
|
||||
|
||||
> 全站以 `8px (0.5rem)` 为对照基准单位，划分"密 / 疏"两个层次。所有间距取值均来自下列阶梯，禁止使用非阶梯值（如 5px、13px）。
|
||||
|
||||
### 7.1 间距阶梯
|
||||
|
||||
| 阶 | px | rem | 分组 | 典型场景 |
|
||||
|----|------|--------|------|----------|
|
||||
| 1 | `4px` | `0.25rem` | 密 | 图标与文字间距、Tag 内边距、紧凑徽标 |
|
||||
| 2 | `8px` | `0.5rem` | 密 | 行内元素相邻、按钮组间距、表单 label 与控件 |
|
||||
| 3 | `12px` | `0.75rem` | 密 | 表单项垂直间距、列表项内边距 |
|
||||
| 4 | `16px` | `1rem` | 密 | 卡片内容内边距、模块内分隔 |
|
||||
| 5 | `24px` | `1.5rem` | 疏 | 模块之间、Section 内边距 |
|
||||
| 6 | `32px` | `2rem` | 疏 | 卡片之间、表单组之间 |
|
||||
| 7 | `40px` | `2.5rem` | 疏 | 主区块之间、页面 Header / Footer 内边距 |
|
||||
| 8 | `56px` | `3.5rem` | 疏 | 页面段落级隔断、Banner 区域 |
|
||||
|
||||
> "密"对应紧凑信息密度（表格、表单、卡片内部）；"疏"对应视觉呼吸（模块之间、页面整体留白）。**16px 是"密"的上限，24px 是"疏"的下限**，两者之间不应再插入自定义值。
|
||||
|
||||
### 7.2 使用原则
|
||||
|
||||
- **同层级一致**：同一布局层级内的间距必须使用同一阶值；多种取值会破坏节奏。
|
||||
- **就近取阶**：相邻区块的间距尽量从相邻阶梯取值（如 `16px → 24px`），跨越过多阶（如 `8px → 56px`）会让视觉断裂。
|
||||
- **密疏不混用**：一个组件内部全部用"密"，外部用"疏"，避免内/外间距颠倒。
|
||||
- **优先 8 的倍数**：除最小阶 `4px` 外，所有阶皆为 8 的倍数，方便 4/8 网格对齐。
|
||||
- **响应式按比例衰减**：移动端可整体降一阶（如 `24px → 16px`），但仍在阶梯内。
|
||||
|
||||
### 7.3 CSS Token 建议
|
||||
|
||||
```css
|
||||
:root {
|
||||
--spacing-1: 4px; /* 0.25rem */
|
||||
--spacing-2: 8px; /* 0.5rem */
|
||||
--spacing-3: 12px; /* 0.75rem */
|
||||
--spacing-4: 16px; /* 1rem */
|
||||
--spacing-5: 24px; /* 1.5rem */
|
||||
--spacing-6: 32px; /* 2rem */
|
||||
--spacing-7: 40px; /* 2.5rem */
|
||||
--spacing-8: 56px; /* 3.5rem */
|
||||
}
|
||||
```
|
||||
|
||||
### 7.4 与已有规范的对齐
|
||||
|
||||
| 已有规则 | 对应阶 |
|
||||
|----------|--------|
|
||||
| §4.x 卡片圆角内边距 | `--spacing-4` (16px) |
|
||||
| §5.3.4 主+默认按钮组合间距 `8px` | `--spacing-2` |
|
||||
| §5.3.3 文本按钮间距 `16px` | `--spacing-4` |
|
||||
| §6.3 分割线与上下元素间距 `≥ 8px` | `--spacing-2` 起 |
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,780 @@
|
||||
# 深蓝色 UI 规范 · 01 导航（§8–§13）
|
||||
|
||||
> 《深蓝色 UI 规范》分册之一。基础令牌见 `00-基础-色彩字体间距.md`，可 import 的变量见 `tokens.css`，总目录与 §索引见 `README.md`。`§N` 编号全局唯一。
|
||||
|
||||
**本篇目录**：`8` 导航组件 · `9` 锚点与页签 · `10` 步骤条 · `11` 面包屑 · `12` 页头 · `13` 分页
|
||||
|
||||
---
|
||||
|
||||
## 8. 导航组件
|
||||
|
||||
> 适用于"大屏后台 / 控制台"类深蓝主题界面。整体结构 = 顶部导航 + 左侧分级菜单 + 多级下拉。所有颜色取自 ZS-002 / ZS-004 两个色系。
|
||||
|
||||
### 8.1 整体结构
|
||||
|
||||
```
|
||||
┌─ 顶部导航（Header）─ 高 56px ──────────────────────────────────────────────┐
|
||||
│ ≡ 二级菜单 二级菜单 二级菜单 〈一级菜单〉〈一级菜单〉 ⟪ XXXX系统 ⟫ 〈一级菜单〉 ⟳ 时间 ⌂ 返回首页 │
|
||||
├──┬──────────────────────────────────────────────────────────────────────────┤
|
||||
│ 三│ ┌─ 四级菜单（下拉面板）──┐ │
|
||||
│ 级│ │ ▾ 四级菜单 │ │
|
||||
│ 菜│ │ ▾ 五级菜单 │ │
|
||||
│ 单│ │ - 六级菜单 (active)│ │
|
||||
│ 三│ │ - 六级菜单 │ │
|
||||
│ 级│ │ ▸ 五级菜单 │ │
|
||||
│ 菜│ │ ▸ 四级菜单 │ │
|
||||
│ 单│ └────────────────────────┘ │
|
||||
│ …│ │
|
||||
└──┴──────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 8.2 顶部导航（Header）
|
||||
|
||||
#### 8.2.1 规格
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 高度 | `56px` |
|
||||
| 左右 padding | `--spacing-4` (16px) |
|
||||
| 背景 | 渐变 `linear-gradient(180deg, #122347 0%, #0C1836 100%)`（ZS-004-08 → ZS-004-09） |
|
||||
| 底边 | `border-bottom: 1px solid #1A2F5A` (ZS-004-07) |
|
||||
| 阴影 | `0 2px 8px rgba(6, 14, 36, 0.6)`（§3.1.4 一级阴影变体） |
|
||||
| 文字基线 | `Noto Sans S Chinese`，垂直居中 |
|
||||
|
||||
#### 8.2.2 二级菜单（左侧 Tabs，小号 14px）
|
||||
|
||||
| 状态 | 文字 | 背景 | 装饰 |
|
||||
|------|------|------|------|
|
||||
| 默认 | `#6E88B0` (ZS-004-04) | `transparent` | — |
|
||||
| Hover | `#C5CFE0` (ZS-004-02) | `rgba(22,119,255,0.08)` | — |
|
||||
| 激活 | `#4096FF` (ZS-002-05) | `transparent` | 底部 `2px solid #4096FF` 高亮线 |
|
||||
|
||||
- 字号 `14px Regular`，间距 `--spacing-3` (12px)
|
||||
- 与最左侧的"折叠菜单 ≡"图标间距 `--spacing-4` (16px)
|
||||
|
||||
#### 8.2.3 一级菜单（中部主导航，16px 带切角装饰）
|
||||
|
||||
| 状态 | 文字 | 装饰 |
|
||||
|------|------|------|
|
||||
| 默认 | `#C5CFE0` (ZS-004-02) | 两端切角斜边，`border: 1px solid #1A2F5A` |
|
||||
| Hover | `#4096FF` (ZS-002-05) | 切角线变 `#4096FF` |
|
||||
| 激活 | `#FFFFFF` | 切角线 `#1677FF` (ZS-002-06)，背景 `rgba(22,119,255,0.16)` |
|
||||
|
||||
- 字号 `16px Medium`
|
||||
- 切角推荐 `clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%)`
|
||||
- 项间距 `--spacing-2` (8px)
|
||||
|
||||
#### 8.2.4 系统标题（XXXX系统）
|
||||
|
||||
- 字号 `20px Bold`，颜色 `#FFFFFF`
|
||||
- 字体 `DOUYUFont` 或 Noto Sans Medium
|
||||
- 左右装饰用主色蓝渐变线条：`linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%)`，线宽 `1px`
|
||||
- 居中相对 Header 几何中心，左右最少留 `--spacing-6` (32px) 间距给一级菜单
|
||||
|
||||
#### 8.2.5 右侧工具区（时间 / 图标 / 返回首页）
|
||||
|
||||
| 元素 | 字号/尺寸 | 颜色 |
|
||||
|------|----------|------|
|
||||
| 更新时间文字 | `12px Regular` | `#6E88B0` (ZS-004-04) |
|
||||
| 时间数值（数字） | `12px D-DIN Regular` | `#C5CFE0` (ZS-004-02) |
|
||||
| 工具图标（刷新/上/家） | `16px` | `#6E88B0`，hover → `#4096FF` |
|
||||
| 返回首页文字 | `14px Regular` | `#C5CFE0`，hover → `#4096FF` |
|
||||
|
||||
- 元素间距 `--spacing-3` (12px)
|
||||
- 整体右 padding `--spacing-4` (16px)
|
||||
|
||||
### 8.3 侧边栏（三级菜单）
|
||||
|
||||
#### 8.3.1 规格
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 宽度 | `64px`（仅图标 / 竖排文字） |
|
||||
| 背景 | `#0C1836` (ZS-004-09) |
|
||||
| 右边界 | `border-right: 1px solid #1A2F5A` (ZS-004-07) |
|
||||
| 项高度 | `64px`（与宽度一致，呈正方形） |
|
||||
| 项内间距 | 上下 `--spacing-3` (12px) |
|
||||
| 字号 | `14px Medium`，竖排（`writing-mode: vertical-rl`）或正常排两行 |
|
||||
|
||||
#### 8.3.2 状态配色
|
||||
|
||||
| 状态 | 背景 | 文字 | 左侧指示条 |
|
||||
|------|------|------|-----------|
|
||||
| 默认 | `transparent` | `#6E88B0` (ZS-004-04) | 无 |
|
||||
| Hover | `rgba(22,119,255,0.08)` | `#C5CFE0` (ZS-004-02) | 无 |
|
||||
| 激活 | `#1A2F5A` (ZS-004-07) | `#FFFFFF` | 左侧 `2px solid #1677FF` (ZS-002-06) |
|
||||
|
||||
### 8.4 下拉菜单面板（四级 / 五级 / 六级）
|
||||
|
||||
#### 8.4.1 面板规格
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 背景 | `#122347` (ZS-004-08) |
|
||||
| 边框 | `1px solid #1A2F5A` (ZS-004-07) |
|
||||
| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影变体） |
|
||||
| 圆角 | `4px` |
|
||||
| 内边距 | 上下 `--spacing-2` (8px) |
|
||||
| 最小宽度 | `150px` |
|
||||
|
||||
#### 8.4.2 菜单项规格
|
||||
|
||||
| 层级 | 缩进（padding-left） | 字号 | 展开图标 | 前缀 |
|
||||
|------|---------------------|------|----------|------|
|
||||
| 四级菜单 | `--spacing-3` (12px) | `14px Medium` | `▾ / ▸` | — |
|
||||
| 五级菜单 | `--spacing-5` (24px) | `14px Regular` | `▾ / ▸` | — |
|
||||
| 六级菜单 | `--spacing-6` (32px) | `14px Regular` | — | `-` 短横线 |
|
||||
|
||||
- 行高 `32px`
|
||||
- 项之间无分割线（靠缩进与图标区分层级）
|
||||
|
||||
#### 8.4.3 菜单项配色
|
||||
|
||||
| 状态 | 背景 | 文字 | 展开图标 |
|
||||
|------|------|------|----------|
|
||||
| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | `#6E88B0` (ZS-004-04) |
|
||||
| Hover | `rgba(22,119,255,0.08)` | `#4096FF` (ZS-002-05) | `#4096FF` |
|
||||
| 激活（当前选中） | `rgba(22,119,255,0.16)` | `#4096FF` (ZS-002-05) | `#1677FF` (ZS-002-06) |
|
||||
| 父级（含激活子项） | `transparent` | `#FFFFFF` | `#1677FF` |
|
||||
| 失效 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` |
|
||||
|
||||
### 8.5 交互与动画
|
||||
|
||||
| 行为 | 动效 |
|
||||
|------|------|
|
||||
| 下拉面板展开 | `transform-origin: top; transform: scaleY(0.95) → scaleY(1); opacity 0 → 1`，`200ms ease-out` |
|
||||
| 展开图标旋转 | `transform: rotate(0 → 90deg)`，`200ms ease-out` |
|
||||
| Hover 背景过渡 | `background-color 120ms ease-out` |
|
||||
| 激活底部高亮线（二级菜单） | `width 0% → 100%`，`240ms ease-out` |
|
||||
|
||||
### 8.6 间距引用
|
||||
|
||||
| 位置 | 取值 |
|
||||
|------|------|
|
||||
| Header 内部元素间距 | `--spacing-2 / --spacing-3` |
|
||||
| Header 与下方内容间距 | `0`（贴合，靠底边线与阴影区分） |
|
||||
| 侧边栏与下拉面板间距 | `--spacing-1` (4px) |
|
||||
| 下拉面板与触发元素间距 | `--spacing-1` (4px) |
|
||||
| 同级菜单项之间 | `0`（紧贴排列，靠 hover/active 背景区分） |
|
||||
|
||||
---
|
||||
|
||||
## 9. 锚点与页签
|
||||
|
||||
> 对应"4.2 导航组件-锚点"。三类组件共用主色蓝指示当前位置：**页签 / 锚点 / 回到顶部**。
|
||||
>
|
||||
> 视觉参考：标签横向 / 标签纵向 / 锚点的三联图见设计稿「选项卡.png」——三种形态在本节均已规范化（§9.1 = 标签横纵向、§9.2 = 锚点）。
|
||||
|
||||
### 9.1 页签（Tabs）
|
||||
|
||||
#### 9.1.1 横向页签（下划线-横向）
|
||||
|
||||
| 状态 | 文字 | 下划线 |
|
||||
|------|------|--------|
|
||||
| 默认 | `#C5CFE0` (ZS-004-02) | 无 |
|
||||
| Hover | `#4096FF` (ZS-002-05) | 无 |
|
||||
| 激活 | `#4096FF` (ZS-002-05) | `2px solid #4096FF`，宽度与文字齐 |
|
||||
| 失效 | `#4A6491` (ZS-004-05) | 无 |
|
||||
|
||||
- 字号 `14px Medium`
|
||||
- 项间距 `--spacing-5` (24px)
|
||||
- 下划线与文字底部间距 `--spacing-2` (8px)
|
||||
- 容器底边可叠一条 `1px solid #1A2F5A` (ZS-004-07) 作为基线，激活态的高亮线压在上面
|
||||
|
||||
#### 9.1.2 纵向页签（下划线-纵向）
|
||||
|
||||
| 状态 | 文字 | 右侧指示线 |
|
||||
|------|------|-----------|
|
||||
| 默认 | `#C5CFE0` (ZS-004-02) | 无 |
|
||||
| Hover | `#4096FF` (ZS-002-05) | 无 |
|
||||
| 激活 | `#4096FF` (ZS-002-05) | 右侧 `2px solid #4096FF`，高度与文字齐 |
|
||||
| 失效 | `#4A6491` (ZS-004-05) | 无 |
|
||||
|
||||
- 字号 `14px Medium`，项高度 `32px`
|
||||
- 项间距 `--spacing-2` (8px)
|
||||
- 容器右边可叠一条 `1px solid #1A2F5A` 基线，激活指示线压在上面
|
||||
|
||||
### 9.2 锚点（Anchor）
|
||||
|
||||
用于长内容页（如详情页、文档页）的章节快速跳转。
|
||||
|
||||
#### 9.2.1 结构
|
||||
|
||||
```
|
||||
│ 一级
|
||||
│ 一级 (active)
|
||||
│ 二级
|
||||
│ 二级
|
||||
│ 一级
|
||||
│ 一级
|
||||
```
|
||||
|
||||
#### 9.2.2 规格
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 容器背景 | `#122347` (ZS-004-08) 或 `transparent`（嵌入页面侧栏时） |
|
||||
| 左侧基线 | `1px solid #1A2F5A` (ZS-004-07) 通栏 |
|
||||
| 项高度 | `32px` |
|
||||
| 一级项左 padding | `--spacing-3` (12px) |
|
||||
| 二级项左 padding | `--spacing-5` (24px) |
|
||||
| 项间距 | `0`（贴合排列） |
|
||||
| 字号 | `14px Regular` |
|
||||
|
||||
#### 9.2.3 状态配色
|
||||
|
||||
| 状态 | 一级文字 | 二级文字 | 左侧指示条 |
|
||||
|------|----------|----------|-----------|
|
||||
| 默认 | `#C5CFE0` (ZS-004-02) | `#6E88B0` (ZS-004-04) | 无 |
|
||||
| Hover | `#4096FF` (ZS-002-05) | `#4096FF` (ZS-002-05) | 无 |
|
||||
| 激活 | `#4096FF` (ZS-002-05) | — | 左侧 `2px solid #4096FF`，覆盖容器基线 |
|
||||
| 父级（含激活子项） | `#FFFFFF` | — | — |
|
||||
|
||||
- 激活态指示条与基线重合，宽 `2px`，色压主色蓝 `#4096FF`
|
||||
- 二级项**不单独支持激活态**：当二级被点中时，其父级一级显示激活态，左侧指示条按父级位置渲染
|
||||
|
||||
#### 9.2.4 滚动同步
|
||||
|
||||
| 行为 | 规则 |
|
||||
|------|------|
|
||||
| 页面滚动 | 监听锚点对应区块进入视口的相对位置，自动切换激活态 |
|
||||
| 点击锚点 | `behavior: smooth` 滚动到目标，激活指示条 `top` 过渡 `200ms ease-out` |
|
||||
| 边界处理 | 滚动到页面顶部 → 第一个锚点激活；到页尾 → 最后一个锚点激活 |
|
||||
|
||||
### 9.3 回到顶部（BackToTop）
|
||||
|
||||
固定在视口右下角的悬浮按钮，向上滚动到页面顶部。
|
||||
|
||||
#### 9.3.1 规格
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 形状 | 圆形 `40px × 40px`（`border-radius: 50%`） |
|
||||
| 图标 | `↑` 上箭头，`16px`，`#FFFFFF` |
|
||||
| 距视口右边 | `--spacing-5` (24px) |
|
||||
| 距视口下边 | `--spacing-6` (32px) |
|
||||
| 出现时机 | 页面 `scrollTop > 200px` 时淡入；回到顶部后淡出 |
|
||||
| 淡入/淡出 | `opacity 0 → 1` / `1 → 0`，`200ms ease-out` |
|
||||
|
||||
#### 9.3.2 状态配色
|
||||
|
||||
| 状态 | 背景 | 阴影 | 图标 |
|
||||
|------|------|------|------|
|
||||
| 正常（默认） | `#1677FF` (ZS-002-06) | `0 2px 8px rgba(22,119,255,0.12)` (§3.1.4 一级阴影) | `#FFFFFF` |
|
||||
| 悬停（Hover） | `#0958D9` (ZS-002-07) | `0 4px 16px rgba(22,119,255,0.24)` (§3.1.4 二级阴影) | `#FFFFFF` |
|
||||
| 点按（Active） | `#003EB3` (ZS-002-08) | 阴影消失，按下感 | `#FFFFFF` |
|
||||
| 失效 / 不显示 | — | — | 整体 `opacity: 0`，`pointer-events: none` |
|
||||
|
||||
#### 9.3.3 悬停 Tooltip
|
||||
|
||||
Hover 状态下方显示 `回到顶部` 提示气泡：
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 文字 | `回到顶部`，`12px Regular` |
|
||||
| 文字颜色 | `#C5CFE0` (ZS-004-02) |
|
||||
| 背景 | `#1677FF` (ZS-002-06) |
|
||||
| 圆角 | `2px` |
|
||||
| 内边距 | 上下 `4px`，左右 `--spacing-2` (8px) |
|
||||
| 与按钮间距 | `--spacing-2` (8px) |
|
||||
| 出现时机 | Hover 进入 `300ms` 后显示，离开立即消失 |
|
||||
|
||||
### 9.4 三者的差异与选用
|
||||
|
||||
| 组件 | 主要用途 | 视觉特征 |
|
||||
|------|----------|---------|
|
||||
| 页签 | 同层级内容切换（多 Tab 互斥） | 文字 + 下划线（横/纵） |
|
||||
| 锚点 | 长页面内章节跳转 | 文字 + 左侧指示条 + 层级缩进 |
|
||||
| 回到顶部 | 长页面快速返回起点 | 圆形悬浮按钮 + 上箭头 |
|
||||
|
||||
---
|
||||
|
||||
## 10. 步骤条
|
||||
|
||||
> 对应「4.7 导航组件-步骤条」。用于多步流程的进度指引，按布局方向分**横向**与**纵向**两类，按使用场景分**弹窗步骤条**、**页面步骤条**、**纵向步骤条**三种。所有颜色取自 ZS-002 主色蓝与 ZS-004 深蓝系。
|
||||
|
||||
### 10.1 步骤节点（公共）
|
||||
|
||||
每个步骤由「指示圆 + 标题（可选描述）」组成。指示圆按状态切换三种形态：
|
||||
|
||||
| 状态 | 圆形外观 | 圆内符号 | 来源 |
|
||||
|------|----------|----------|------|
|
||||
| 已完成（Completed） | 描边圆，`2px solid #1677FF`，背景 `transparent` | `✓`（对勾，`#1677FF`） | ZS-002-06 |
|
||||
| 当前（Current / Active） | 实心圆，背景 `#1677FF` | 步骤数字，`#FFFFFF` | ZS-002-06 / 白 |
|
||||
| 未开始（Upcoming） | 描边圆，`1px solid #4A6491`，背景 `transparent` | 步骤数字，`#6E88B0` | ZS-004-05 / ZS-004-04 |
|
||||
| 失效（Disabled） | 描边圆，`1px solid #2D4473`，背景 `transparent` | 步骤数字，`#4A6491` | ZS-004-06 / ZS-004-05 |
|
||||
|
||||
**指示圆规格**：
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 直径 | `24px` |
|
||||
| 圆内字号 | `12px Bold`（D-DIN 或 Noto Sans Bold） |
|
||||
| 对勾图标 | `12px`，居中 |
|
||||
| 字体水平居中 | 数字 / 对勾 在圆几何中心 |
|
||||
|
||||
**标题与描述文字**：
|
||||
|
||||
| 元素 | 状态 | 字号 / 颜色 | 来源 |
|
||||
|------|------|-------------|------|
|
||||
| 标题 | 已完成 / 当前 | `14px Medium`，`#FFFFFF` | — |
|
||||
| 标题 | 未开始 | `14px Medium`，`#6E88B0` | ZS-004-04 |
|
||||
| 标题 | 失效 | `14px Medium`，`#4A6491` | ZS-004-05 |
|
||||
| 描述 | 已完成 / 当前 | `12px Regular`，`#C5CFE0` | ZS-004-02 |
|
||||
| 描述 | 未开始 / 失效 | `12px Regular`，`#6E88B0` → `#4A6491` | ZS-004-04 → ZS-004-05 |
|
||||
|
||||
**连接线（步骤之间）**：
|
||||
|
||||
| 类型 | 色值 | 来源 | 样式 |
|
||||
|------|------|------|------|
|
||||
| 已完成段（前一节点已完成） | `#1677FF` | ZS-002-06 | `1px dashed`（弹窗）/ `1px solid`（页面） |
|
||||
| 未完成段 | `#4A6491` | ZS-004-05 | `1px dashed` |
|
||||
|
||||
> 连接线在指示圆**两侧水平居中**（横向）或**正下方垂直**（纵向）；线两端与圆外缘留 `--spacing-1` (4px) 间隙，避免线穿圆。
|
||||
|
||||
### 10.2 弹窗步骤条（横向 · 描边圆为主）
|
||||
|
||||
用于 Modal / Drawer 内引导多步操作的紧凑步骤条。指示圆**完成态用描边 + 对勾**而非实心，避免在弹窗背景上过于抢眼。
|
||||
|
||||
#### 10.2.1 布局
|
||||
|
||||
```
|
||||
( ✓ ) ┄┄┄┄┄ (●2) ┄┄┄┄┄ ( 3 ) ┄┄┄┄┄ ( 4 ) ┄┄┄┄┄ ( 5 )
|
||||
标题 标题 标题 标题 标题
|
||||
(描述) (描述) (描述) (描述) (描述)
|
||||
```
|
||||
|
||||
#### 10.2.2 规格
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 容器水平 padding | `--spacing-5` (24px) |
|
||||
| 指示圆 → 标题间距 | `--spacing-2` (8px) |
|
||||
| 标题 → 描述间距 | `--spacing-1` (4px) |
|
||||
| 节点之间水平间距 | 节点间距自适应等分；连接线占用中间空间 |
|
||||
| 连接线 | `1px dashed`，已完成段 `#1677FF`，未完成段 `#4A6491` |
|
||||
| 文字对齐 | 标题、描述居中对齐于指示圆下方 |
|
||||
|
||||
#### 10.2.3 两种变体
|
||||
|
||||
| 变体 | 适用 |
|
||||
|------|------|
|
||||
| **仅标题** | 步骤含义已经清晰（如「填写信息 / 确认 / 完成」），节省垂直空间 |
|
||||
| **标题 + 描述** | 步骤名抽象需要一行小字补充时使用 |
|
||||
|
||||
### 10.3 页面步骤条（横向 · 实心圆 + 自定义首项标题）
|
||||
|
||||
用于页面级流程（如「新建集群」类向导）。和弹窗步骤条相比，**已完成态指示圆改为实心填充 + 白色对勾**，视觉权重更高；首步标题可显示具体名称（如「新建集群」）而非「标题」占位。
|
||||
|
||||
#### 10.3.1 布局
|
||||
|
||||
```
|
||||
(✓) ────── (●2) ┄┄┄┄┄ ( 3 ) ┄┄┄┄┄ ( 4 ) ┄┄┄┄┄ ( 5 )
|
||||
新建集群 标题 标题 标题 标题
|
||||
(描述文本) (描述文本) (描述文本) (描述文本) (描述文本)
|
||||
```
|
||||
|
||||
#### 10.3.2 与 §10.2 弹窗步骤条的差异
|
||||
|
||||
| 维度 | 弹窗步骤条 | 页面步骤条 |
|
||||
|------|-----------|-----------|
|
||||
| 完成态圆形 | 描边圆 + 蓝色对勾 | 实心蓝圆 + 白色对勾 |
|
||||
| 完成段连接线样式 | `1px dashed #1677FF` | `1px solid #1677FF` |
|
||||
| 标题文字号 | `14px Medium` | `14px Medium`（同） |
|
||||
| 第一项 | 通用「标题」占位 | 可显示具体名称（自定义文案） |
|
||||
|
||||
#### 10.3.3 完成态指示圆补充
|
||||
|
||||
| 角色 | 色值 | 来源 |
|
||||
|------|------|------|
|
||||
| 已完成圆背景 | `#1677FF` | ZS-002-06 |
|
||||
| 已完成圆内对勾 | `#FFFFFF` | — |
|
||||
| 已完成圆边框 | 无（实心） | — |
|
||||
|
||||
### 10.4 纵向步骤条
|
||||
|
||||
用于侧栏 / 详情页内的纵向流程指引。两种变体——「仅标题」与「标题 + 描述」。
|
||||
|
||||
#### 10.4.1 布局
|
||||
|
||||
```
|
||||
仅标题: 标题 + 描述:
|
||||
|
||||
(✓) 新建集群 (✓) 新建集群
|
||||
┊ 描述文本描述
|
||||
(●2) 标题 ┊
|
||||
┊ (●2) 标题
|
||||
( 3 ) 标题 描述文本描述
|
||||
┊ ┊
|
||||
( 4 ) 标题 ( 3 ) 标题
|
||||
描述文本描述
|
||||
┊
|
||||
( 4 ) 标题
|
||||
描述文本描述
|
||||
```
|
||||
|
||||
#### 10.4.2 规格
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 指示圆 → 标题水平间距 | `--spacing-2` (8px) |
|
||||
| 节点垂直间距（仅标题） | `--spacing-5` (24px)，圆心到圆心 |
|
||||
| 节点垂直间距（标题 + 描述） | `--spacing-6` (32px)，圆心到圆心 |
|
||||
| 标题 → 描述间距 | `--spacing-1` (4px) |
|
||||
| 连接线位置 | 上下两个指示圆**正下方垂直**，居中于圆心 |
|
||||
| 连接线样式 | `1px dashed`，已完成段 `#1677FF`，未完成段 `#4A6491` |
|
||||
| 文字左对齐 | 标题与描述左对齐，与指示圆右侧对齐基线 |
|
||||
|
||||
#### 10.4.3 与横向步骤条共用规则
|
||||
|
||||
- 指示圆三态规格沿用 §10.1
|
||||
- 已完成态默认用**描边 + 对勾**（与 §10.2 弹窗一致）；若纵向步骤条用于页面级主流程，可切换为 §10.3 的实心圆变体
|
||||
|
||||
### 10.5 交互与动画
|
||||
|
||||
| 行为 | 动效 |
|
||||
|------|------|
|
||||
| 步骤切换（next） | 当前圆 `background: transparent → #1677FF`，`200ms ease-out`；同时上一步圆 `border-color: #4A6491 → #1677FF`，再用 `200ms` 切换为对勾图标淡入 |
|
||||
| 步骤切换（prev / 回退） | 反向，未完成态恢复 `#4A6491` 边框，圆内数字淡入 |
|
||||
| 连接线高亮 | 完成段 `border-color: #4A6491 → #1677FF`，`240ms ease-out` |
|
||||
| Hover 节点（可点击） | 圆边框色暂时变 `#4096FF` (ZS-002-05)，标题文字 `#4096FF`，`120ms ease-out`；不可点击节点（未来步骤）无 hover |
|
||||
| 点击节点 | 节点必须**已完成**才能点（回看），否则视为禁用；点击合法节点触发 `step:change` 事件 |
|
||||
|
||||
### 10.6 状态机与可达性
|
||||
|
||||
| 当前步 = N | 节点 i 的状态 |
|
||||
|-----------|----------------|
|
||||
| `i < N` | Completed（已完成，可点回看） |
|
||||
| `i === N` | Current（当前，不可点） |
|
||||
| `i > N` | Upcoming（未开始，不可点） |
|
||||
| `i.disabled` | Disabled（被显式禁用，例如条件未满足） |
|
||||
|
||||
**键盘导航**：
|
||||
- `Tab` 顺序在「已完成」节点之间流转，跳过 `Current / Upcoming / Disabled`
|
||||
- 焦点节点圆外加 `2px solid #4096FF` 焦点环（`outline`，`offset 2px`）
|
||||
|
||||
**屏幕阅读器**：
|
||||
- 指示圆 `role="img"`，`aria-label="已完成第 N 步"` / `"当前第 N 步"` / `"未开始第 N 步"`
|
||||
- 容器 `role="list"`，节点 `role="listitem"`
|
||||
- 当前节点额外 `aria-current="step"`
|
||||
|
||||
### 10.7 CSS Token 参考
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* 步骤条节点 */
|
||||
--step-circle-size: 24px;
|
||||
--step-circle-current-bg: #1677FF; /* ZS-002-06 */
|
||||
--step-circle-current-text: #FFFFFF;
|
||||
--step-circle-done-border: #1677FF; /* ZS-002-06 */
|
||||
--step-circle-done-icon: #1677FF; /* 弹窗变体 */
|
||||
--step-circle-done-bg-page: #1677FF; /* 页面变体:实心 */
|
||||
--step-circle-done-icon-page: #FFFFFF;
|
||||
--step-circle-upcoming-border: #4A6491; /* ZS-004-05 */
|
||||
--step-circle-upcoming-text: #6E88B0; /* ZS-004-04 */
|
||||
--step-circle-disabled-border: #2D4473; /* ZS-004-06 */
|
||||
--step-circle-disabled-text: #4A6491; /* ZS-004-05 */
|
||||
|
||||
/* 连接线 */
|
||||
--step-line-done: #1677FF; /* 已完成段 */
|
||||
--step-line-upcoming: #4A6491; /* 未完成段:ZS-004-05 */
|
||||
|
||||
/* 文字 */
|
||||
--step-title-active: #FFFFFF;
|
||||
--step-title-inactive: #6E88B0; /* ZS-004-04 */
|
||||
--step-desc-active: #C5CFE0; /* ZS-004-02 */
|
||||
--step-desc-inactive: #6E88B0; /* ZS-004-04 */
|
||||
}
|
||||
```
|
||||
|
||||
### 10.8 三种步骤条的选用决策
|
||||
|
||||
| 场景 | 选择 |
|
||||
|------|------|
|
||||
| Modal / Drawer 内多步表单 | §10.2 弹窗步骤条（描边圆，紧凑） |
|
||||
| 页面级向导（独占大区域） | §10.3 页面步骤条（实心圆，视觉重） |
|
||||
| 侧栏 / 详情页纵向流程 | §10.4 纵向步骤条 |
|
||||
| 步骤数 ≤ 3 且无描述 | 优先「仅标题」变体 |
|
||||
| 步骤名抽象需补充说明 | 用「标题 + 描述」变体 |
|
||||
| 步骤数 > 7 | 不推荐用步骤条，改用「锚点」（§9.2）或分页 |
|
||||
|
||||
---
|
||||
|
||||
## 11. 面包屑
|
||||
|
||||
> 对应「4.3 导航组件-面包屑」。用于显示当前位置在整个站点层级中的路径，配合「← 返回」按钮支持逐级回溯。颜色取自 ZS-002 主色蓝与 ZS-004 深蓝系。
|
||||
|
||||
### 11.1 标准形态
|
||||
|
||||
容器顶部带一个独立的容器 / 边框包裹：
|
||||
|
||||
```
|
||||
🏠 | 概况 / 总概况
|
||||
```
|
||||
|
||||
带「返回」按钮的层级形态（一级到四级）：
|
||||
|
||||
```
|
||||
一级: ← 返回 │ 现在位置
|
||||
二级: ← 返回 │ 上一级位置 / 现在位置
|
||||
三级: ← 返回 │ 上二级位置 / 上一级位置 / 现在位置
|
||||
四级: ← 返回 │ 上三级位置 / 上二级位置 / 上一级位置 / 现在位置
|
||||
```
|
||||
|
||||
### 11.2 规格
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 容器高度 | `40px` |
|
||||
| 容器背景 | `#0C1836` (ZS-004-09) |
|
||||
| 容器底边 | `1px solid #1A2F5A` (ZS-004-07) |
|
||||
| 容器水平 padding | `--spacing-4` (16px) |
|
||||
| 字号 | `14px Regular` |
|
||||
| 元素间距（图标 / 文字 / 分隔符之间） | `--spacing-2` (8px) |
|
||||
| 「返回」与首段路径之间分隔符 `│` | `1px solid #4A6491`，高度 `14px` |
|
||||
|
||||
### 11.3 配色
|
||||
|
||||
| 角色 | 色值 | 来源 | 备注 |
|
||||
|------|------|------|------|
|
||||
| Home 图标 🏠 | `#4096FF` | ZS-002-05 | 默认主色，hover → `#1677FF` (ZS-002-06) |
|
||||
| 「← 返回」图标 + 文字 | `#4096FF` | ZS-002-05 | 链接样式，hover 显示下划线 |
|
||||
| 历史路径文字（可点击） | `#4096FF` | ZS-002-05 | 同链接配色 |
|
||||
| 当前位置文字（最后一段） | `#FFFFFF` | — | 加粗 `14px Medium`，不可点击 |
|
||||
| 分隔符 `/` | `#4A6491` | ZS-004-05 | 静态、不可点 |
|
||||
| 分隔符 `│`（返回按钮与路径之间） | `#4A6491` | ZS-004-05 | 同上 |
|
||||
| Hover 路径项 | `#1677FF` | ZS-002-06 | 文字色 + 下划线 |
|
||||
| 失效路径项（无对应页） | `#4A6491` | ZS-004-05 | `cursor: not-allowed` |
|
||||
|
||||
### 11.4 交互规则
|
||||
|
||||
- **点击「← 返回」**：逐步向上返回一级（等同浏览器 back）
|
||||
- **点击文字路径**：快速跳回到对应任意上级页面
|
||||
- **当前位置**（最后一段）：不响应点击，仅作展示
|
||||
- **层级建议**：尽可能不超过 **4 级**；超过 4 级会让面包屑过长，应改用侧栏 / 锚点辅助
|
||||
|
||||
### 11.5 与导航的关系
|
||||
|
||||
面包屑**不替代**主导航（§8）：
|
||||
|
||||
- 主导航 = 「我能去哪些地方」（站点结构）
|
||||
- 面包屑 = 「我当前在哪里」（路径回溯）
|
||||
|
||||
两者并存时，面包屑紧贴页面主内容区顶部，位于主导航下方、页头（§12）上方。
|
||||
|
||||
### 11.6 CSS 参考
|
||||
|
||||
```css
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 var(--spacing-4);
|
||||
background: #0C1836;
|
||||
border-bottom: 1px solid #1A2F5A;
|
||||
font-size: 14px;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
.breadcrumb-back { color: #4096FF; cursor: pointer; }
|
||||
.breadcrumb-back:hover { color: #1677FF; text-decoration: underline; }
|
||||
.breadcrumb-sep-bar { width: 1px; height: 14px; background: #4A6491; }
|
||||
.breadcrumb-sep { color: #4A6491; }
|
||||
.breadcrumb-link { color: #4096FF; cursor: pointer; }
|
||||
.breadcrumb-link:hover { color: #1677FF; text-decoration: underline; }
|
||||
.breadcrumb-current { color: #FFFFFF; font-weight: 500; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 12. 页头
|
||||
|
||||
> 对应「4.6 导航组件-分页」上半段示意。用于页面主内容区顶部、面包屑下方，承载页面标题与可选的说明 / Tabs。共有 4 种变体。
|
||||
|
||||
### 12.1 通用规格
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 容器高度 | `56px`（仅标题）/ `64px`（含 Tabs） |
|
||||
| 背景 | `#0C1836` (ZS-004-09) |
|
||||
| 底边 | `1px solid #1A2F5A` (ZS-004-07) |
|
||||
| 水平 padding | `--spacing-5` (24px) |
|
||||
| 文字基线 | 垂直居中 |
|
||||
|
||||
### 12.2 四种变体
|
||||
|
||||
#### 12.2.1 基础页头
|
||||
|
||||
只有标题：
|
||||
|
||||
```
|
||||
页头标题
|
||||
```
|
||||
|
||||
| 角色 | 色值 / 字号 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 标题 | `18px Bold`，`#FFFFFF` | — |
|
||||
|
||||
#### 12.2.2 页头 + 说明
|
||||
|
||||
标题后跟一段灰色说明文字：
|
||||
|
||||
```
|
||||
页头标题 （这是一句简要说明）
|
||||
```
|
||||
|
||||
| 角色 | 色值 / 字号 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 标题 | `18px Bold`，`#FFFFFF` | — |
|
||||
| 说明文字 | `14px Regular`，`#6E88B0` | ZS-004-04 |
|
||||
| 标题 → 说明间距 | `--spacing-3` (12px) | — |
|
||||
|
||||
说明用半角圆括号包裹，颜色与括号一致（不要让括号比文字更醒目）。
|
||||
|
||||
#### 12.2.3 页头 + 说明 icon
|
||||
|
||||
标题后跟一个可悬停查看说明的图标：
|
||||
|
||||
```
|
||||
页头标题 ⓘ
|
||||
```
|
||||
|
||||
| 角色 | 色值 / 字号 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 标题 | `18px Bold`，`#FFFFFF` | — |
|
||||
| 说明 icon `ⓘ` 或 `?` | `16px`，`#6E88B0` | ZS-004-04 |
|
||||
| Icon hover | `#4096FF` | ZS-002-05 |
|
||||
| 标题 → 图标间距 | `--spacing-2` (8px) | — |
|
||||
|
||||
Hover 弹出 Tooltip（沿用 §9.3.3 Tooltip 配色），承载完整说明文字。
|
||||
|
||||
#### 12.2.4 分 Tabs 页头
|
||||
|
||||
标题位置直接放横向页签（沿用 §9.1.1 横向页签配色），点击切换右侧主内容区：
|
||||
|
||||
```
|
||||
标题 标题 标题
|
||||
─────
|
||||
```
|
||||
|
||||
| 复用规则 | 说明 |
|
||||
|----------|------|
|
||||
| Tab 配色 | 完全沿用 §9.1.1 横向页签 |
|
||||
| Tab 字号 | `16px Medium`（页头位置比一般 tab 略大） |
|
||||
| Tab 间距 | `--spacing-5` (24px) |
|
||||
| 激活态下划线 | `2px solid #4096FF`，宽与文字齐 |
|
||||
|
||||
### 12.3 与右侧操作区的组合
|
||||
|
||||
页头右侧常承载主操作按钮（「+ 新建」、「导出」等）。规则：
|
||||
|
||||
- 按钮组靠右对齐，右 padding 与左 padding 一致 (`--spacing-5`)
|
||||
- 多按钮排列顺序参照 §5.3.4（默认按钮在左、主按钮在右），按钮间距 `--spacing-2`
|
||||
- Tabs 页头中右侧操作区与 Tabs 同高居中
|
||||
|
||||
---
|
||||
|
||||
## 13. 分页
|
||||
|
||||
> 对应「4.6 导航组件-分页」下半段。三种形态——**正常分页 / 精简分页 / 导航式分页**——按页面信息量与可用空间选用。
|
||||
|
||||
### 13.1 正常分页
|
||||
|
||||
承载大列表，提供页码、跳转、每页条数选择：
|
||||
|
||||
```
|
||||
共 240 项 < ① 2 3 4 5 … 24 > 每页 [10▾] 条 前往 [ ] 页
|
||||
```
|
||||
|
||||
#### 13.1.1 元素配色与规格
|
||||
|
||||
| 元素 | 字号 / 色值 | 来源 / 说明 |
|
||||
|------|-------------|-------------|
|
||||
| 「共 N 项」总数文字 | `14px Regular`，`#6E88B0` | ZS-004-04 |
|
||||
| 页码按钮（默认） | `14px Regular`，`#C5CFE0`，背景 `transparent` | ZS-004-02 |
|
||||
| 页码按钮（hover） | `#4096FF`，背景 `rgba(22,119,255,0.08)` | ZS-002-05 |
|
||||
| 页码按钮（激活/当前页） | `#FFFFFF`，背景 `#1677FF`（实心圆） | ZS-002-06 |
|
||||
| 页码按钮（失效） | `#4A6491`，背景 `transparent` | ZS-004-05 |
|
||||
| 左右翻页箭头 `<` `>` | `14px`，`#6E88B0`，hover → `#4096FF` | ZS-004-04 → ZS-002-05 |
|
||||
| 翻页箭头失效（首/末页） | `#4A6491` | ZS-004-05 |
|
||||
| 省略号 `…` | `#6E88B0` | ZS-004-04，静态展示，不可点 |
|
||||
| 每页条数下拉 `[10▾]` | 沿用 §14.1 输入框规格 | 高度 `28px`，宽 `60px` |
|
||||
| 「前往 N 页」输入框 | 沿用 §14.1 输入框规格 | 高度 `28px`，宽 `48px` |
|
||||
|
||||
#### 13.1.2 页码按钮规格
|
||||
|
||||
| 属性 | 取值 |
|
||||
|------|------|
|
||||
| 形状 | 圆形 `28px × 28px`（`border-radius: 50%`） |
|
||||
| 默认背景 | `transparent` |
|
||||
| 当前页背景 | `#1677FF` (ZS-002-06)，实心圆，白色数字 |
|
||||
| 字号 | `14px Regular`（数字 D-DIN 或 Noto Sans） |
|
||||
| 项间距 | `--spacing-1` (4px) |
|
||||
|
||||
#### 13.1.3 元素间距
|
||||
|
||||
| 区段 | 间距 |
|
||||
|------|------|
|
||||
| 「共 N 项」→ 翻页区 | `--spacing-4` (16px) |
|
||||
| 翻页区内（箭头 / 页码） | `--spacing-1` (4px) |
|
||||
| 翻页区 → 每页下拉 | `--spacing-5` (24px) |
|
||||
| 每页下拉 → 前往输入 | `--spacing-4` (16px) |
|
||||
|
||||
### 13.2 精简分页
|
||||
|
||||
承载弹窗 / 表格紧凑场景，只暴露「当前页 / 总页数」与左右翻页：
|
||||
|
||||
```
|
||||
共 1 项 < [ 1 ] / 10 >
|
||||
```
|
||||
|
||||
#### 13.2.1 规格
|
||||
|
||||
| 元素 | 配色 / 备注 |
|
||||
|------|------------|
|
||||
| 「共 N 项」 | 同 §13.1.1 |
|
||||
| `<` `>` 翻页箭头 | 同 §13.1.1 |
|
||||
| `[ 1 ]` 当前页输入框 | 沿用 §14.1 输入框规格，高 `28px`，宽 `40px`，居中文字 |
|
||||
| `/ N` 总页数 | `14px Regular`，`#6E88B0` (ZS-004-04) |
|
||||
| 元素间距 | `--spacing-2` (8px) |
|
||||
|
||||
#### 13.2.2 与正常分页的差异
|
||||
|
||||
| 维度 | 正常分页 | 精简分页 |
|
||||
|------|----------|----------|
|
||||
| 页码 | 点击式数字列表 | 输入框 + 总页数文字 |
|
||||
| 跳转方式 | 点击数字 / 前往输入 | 直接修改输入框 |
|
||||
| 每页条数 | 暴露下拉 | 不暴露（默认值由调用方决定） |
|
||||
| 适用 | 列表 / 表格主内容区 | 弹窗、抽屉、卡片内嵌列表 |
|
||||
|
||||
### 13.3 导航式分页
|
||||
|
||||
承载长文 / 详情页的「上一篇 / 下一篇」式翻页，只有方向，不暴露页码：
|
||||
|
||||
```
|
||||
下一页 »
|
||||
« 上一页
|
||||
```
|
||||
|
||||
#### 13.3.1 规格
|
||||
|
||||
| 元素 | 配色 / 备注 |
|
||||
|------|------------|
|
||||
| 「下一页」/「上一页」文字 + 箭头 | `14px Regular`，`#4096FF` (ZS-002-05) |
|
||||
| Hover | `#1677FF` (ZS-002-06) + 下划线 |
|
||||
| 失效（首/末篇） | `#4A6491` (ZS-004-05)，`cursor: not-allowed` |
|
||||
| 箭头位置 | `下一页 »`（箭头在后）/ `« 上一页`（箭头在前） |
|
||||
| 文字 → 箭头间距 | `--spacing-2` (8px) |
|
||||
| 两个按钮纵向排列时项间距 | `--spacing-3` (12px) |
|
||||
|
||||
### 13.4 三种分页的选用决策
|
||||
|
||||
| 场景 | 选择 |
|
||||
|------|------|
|
||||
| 后台列表 / 表格 | §13.1 正常分页 |
|
||||
| Modal / Drawer 内嵌列表 | §13.2 精简分页 |
|
||||
| 详情页前后翻 | §13.3 导航式分页 |
|
||||
| 列表少于 1 页（项数 ≤ pageSize） | **不显示**分页 |
|
||||
| 项数明确但页码可能很多（>50 页） | 用正常分页 + 隐藏中间页码（`...` 省略） |
|
||||
|
||||
---
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,573 @@
|
||||
# 深蓝色 UI 规范 · 04 图表（§35–§41）
|
||||
|
||||
> 《深蓝色 UI 规范》分册之一。基础令牌见 `00-基础-色彩字体间距.md`，可 import 的变量见 `tokens.css`，总目录与 §索引见 `README.md`。`§N` 编号全局唯一。
|
||||
|
||||
**本篇目录**：`35` 图表通用规范 · `36` 柱状图 · `37` 折线图 · `38` 甘特图 · `39` 环形图 · `40` 关系图/散点图 · `41` 图表色值
|
||||
|
||||
---
|
||||
|
||||
## 35. 图表通用规范（Chart 基础）
|
||||
|
||||
> 对应设计稿「8. 图表」系列（柱状图 / 折线图 / 甘特图）。本节先约定**所有图表共用**的容器、标题、坐标轴、网格、图例、Tooltip、配色与空状态；§36 起按图表类型补充各自细则。配色一律取自 §1.1.8 图表配色与 §1.1.5 深蓝系，不另造色。
|
||||
|
||||
### 35.1 图表容器
|
||||
|
||||
| 属性 | 取值 | 来源 |
|
||||
|------|------|------|
|
||||
| 背景 | `#0C1836` (ZS-004-09)，嵌入卡片时随 §22 卡片 `#122347` | §3.1 |
|
||||
| 圆角 | `4px` | §4.1 |
|
||||
| 内边距 | `--spacing-5` (24px) | §7.1 |
|
||||
| 多图并排间距 | `--spacing-6` (32px) | §7.1 |
|
||||
| 边框（可选） | `1px solid #1A2F5A` (ZS-004-07) | — |
|
||||
|
||||
### 35.2 图表标题
|
||||
|
||||
设计稿中标题统一为「**主色蓝竖条 ▌ + 文字**」的小标题样式。
|
||||
|
||||
| 元素 | 规格 | 来源 |
|
||||
|------|------|------|
|
||||
| 左侧竖条 | `3px × 14px`，`#1677FF` (ZS-002-06)，圆角 `1px` | §1.1.6 |
|
||||
| 竖条 → 文字间距 | `--spacing-2` (8px) | §7.1 |
|
||||
| 标题文字 | `16px Bold`，`#FFFFFF`（或 `#C5CFE0`） | §2.1.2 |
|
||||
| 标题 → 图表区间距 | `--spacing-4` (16px) | §7.1 |
|
||||
| 副标题 / 单位 | `12px Regular`，`#6E88B0` (ZS-004-04) | — |
|
||||
|
||||
> 部分卡片标题不带竖条（如「标题（BW）」「数据采集XXX」），此时直接用 `16px Bold #C5CFE0`，与 §22 卡片标题一致。
|
||||
|
||||
### 35.3 坐标轴
|
||||
|
||||
| 元素 | 色值 / 规格 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 轴线（X / Y 基线） | `1px solid #2D4473` (ZS-004-06) | §6.1 |
|
||||
| 刻度文字（轴标签） | `12px Regular`，`#6E88B0` (ZS-004-04) | — |
|
||||
| 轴标题 / 类目名（如「类型」「2012」） | `12px Regular`，`#4096FF` (ZS-002-05) 或 `#6E88B0` | — |
|
||||
| 刻度线（tick） | 通常隐藏，仅留网格线 | — |
|
||||
| 轴名称单位 | `12px`，`#6E88B0`，置于轴末端 | — |
|
||||
|
||||
### 35.4 网格线（splitLine）
|
||||
|
||||
| 类型 | 色值 | 样式 | 使用场景 |
|
||||
|------|------|------|----------|
|
||||
| 主网格（默认） | `#2D4473` (ZS-004-06) | `1px dashed` | 柱状 / 折线的 Y 向参考线 |
|
||||
| 弱化网格 | `#1A2F5A` (ZS-004-07) | `1px dashed` | 密集图表、次要参考 |
|
||||
|
||||
> 深色背景下网格一律用**虚线**且低对比，避免抢戏；纵向类目方向通常不画网格。
|
||||
|
||||
### 35.5 图例（Legend）
|
||||
|
||||
| 属性 | 取值 | 来源 |
|
||||
|------|------|------|
|
||||
| 位置 | 右上角（多数）或顶部居中 | — |
|
||||
| 色块（marker） | `10px` 方块 / 圆点，取系列色 | §1.1.8 |
|
||||
| 色块 → 文字间距 | `--spacing-1` (4px) | §7.1 |
|
||||
| 图例文字 | `12px Regular`，`#C5CFE0` (ZS-004-02) | — |
|
||||
| 项间距 | `--spacing-3` (12px) | §7.1 |
|
||||
| 未选中态（点击隐藏系列） | 色块 + 文字置灰 `#4A6491` (ZS-004-05) | §1.1.5 |
|
||||
|
||||
### 35.6 Tooltip（悬浮提示）
|
||||
|
||||
鼠标悬停时跟随的浮层（如折线图「1月10日 异常率12.9%」、「5.32」）。
|
||||
|
||||
| 属性 | 取值 | 来源 |
|
||||
|------|------|------|
|
||||
| 背景 | `rgba(12,24,54,0.92)`（ZS-004-09 92%） | §3.1 |
|
||||
| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — |
|
||||
| 圆角 | `4px` | §4.1 |
|
||||
| 阴影 | `0 4px 16px rgba(6,14,36,0.6)` | §3.1.4 |
|
||||
| 内边距 | 上下 `--spacing-2`，左右 `--spacing-3` | §7.1 |
|
||||
| 标题行（日期 / 类目） | `12px Medium`，`#FFFFFF` | — |
|
||||
| 数值行 | `12px Regular`，色块（系列色）+ 名称 `#6E88B0` + 数值 `#C5CFE0` | — |
|
||||
| 指示线（axisPointer） | `1px dashed #4096FF` (ZS-002-05)，或半透明竖向高亮带 `rgba(22,119,255,0.12)` | §6.1 |
|
||||
|
||||
> 设计稿中数据点 hover 常显示一个**实心小标签**（如圆点 + 数值 `5.32`）：标签背景 `#122347`，文字 `#FFFFFF`，圆点取系列色，圆角 `2px`。
|
||||
|
||||
### 35.7 数据点与标记
|
||||
|
||||
| 元素 | 规格 | 来源 |
|
||||
|------|------|------|
|
||||
| 折线拐点（默认） | 不显示或 `2px` 实心点 | — |
|
||||
| 折线拐点（hover / 强调） | `空心圆`，描边 `2px` 系列色，填充 `#0C1836`，直径 `6px` | — |
|
||||
| 高亮竖带（选中区间） | `rgba(22,119,255,0.12)` 矩形，无边框 | §3.1 |
|
||||
|
||||
### 35.8 图表配色引用
|
||||
|
||||
| 用途 | 色序 | 来源 |
|
||||
|------|------|------|
|
||||
| 多系列（面积大：柱 / 折线 / 饼） | `#1677FF → #13C2C2 → #4096FF → #36CFC9 → #69B1FF → #5CDBD3 → #91CAFF → #87E8DE` | §1.1.8 通用图表色序 |
|
||||
| 小面积（散点 / 迷你图 / 徽标） | `#4096FF → #36CFC9 → #FF4D4F → #FFA39E → #6388FF → #478880` | §1.1.8 小面积色序 |
|
||||
| 语义系列（成功 / 警告 / 错误） | 绿 `--func-success` / 橙 `--func-warning` / 红 `#F5222D` | §27.4 / §1.1.2 |
|
||||
|
||||
> 设计稿柱状图出现的「绿(Paper) / 橙(Project) / 蓝(Book)」三系列，对应**语义化分类**：绿取 §27.4 成功绿、橙取 §27.4 警告橙、蓝取主色 `#1677FF`；若为无语义的并列分类，应改用通用图表色序避免误读。
|
||||
|
||||
### 35.9 空状态 / 加载
|
||||
|
||||
| 状态 | 表现 |
|
||||
|------|------|
|
||||
| 加载中 | 图表区居中显示旋转图标 `#4096FF` + 文字「加载中…」`12px #6E88B0`（沿用 §5.4.2） |
|
||||
| 无数据 | 居中占位插画 / 文字「暂无数据」`14px #6E88B0` |
|
||||
|
||||
---
|
||||
|
||||
## 36. 柱状图（Column / Bar）
|
||||
|
||||
> 对应设计稿「8.1 图表-柱状图」。涵盖**堆叠柱 / 分组柱 / 条形图（横向）/ 排行进度条**四种形态。容器、坐标轴、网格、图例、Tooltip 全部沿用 §35。
|
||||
|
||||
### 36.1 通用规格
|
||||
|
||||
| 属性 | 取值 | 来源 |
|
||||
|------|------|------|
|
||||
| 柱体圆角 | 顶部 `2px`（堆叠柱仅最顶段圆角） | §4.1 |
|
||||
| 柱宽 | 类目宽度的 `40%~60%` | — |
|
||||
| 同组柱间距 | `--spacing-1` (4px) | §7.1 |
|
||||
| 类目（组）间距 | 自适应等分 | — |
|
||||
| 数值标签（可选） | `12px Regular`，`#C5CFE0`，置柱顶上方 `--spacing-1` | — |
|
||||
|
||||
### 36.2 堆叠柱状图（如「标题」Paper/Project/Book）
|
||||
|
||||
| 元素 | 配色 | 来源 |
|
||||
|------|------|------|
|
||||
| 系列 1（Book / 底段） | `#69B1FF` (ZS-002-04) 或主色 `#1677FF` | §1.1.3 |
|
||||
| 系列 2（Project / 中段） | `--func-warning`（橙） | §27.4 |
|
||||
| 系列 3（Paper / 顶段） | `--func-success`（绿） | §27.4 |
|
||||
| 段间分隔 | `1px` 容器底色 `#0C1836` 描边，制造堆叠缝隙 | — |
|
||||
| Y 轴类目标签「类型」 | `12px`，`#4096FF` (ZS-002-05) | §35.3 |
|
||||
|
||||
### 36.3 分组柱状图（如「标题（BW）」「标题」双系列）
|
||||
|
||||
| 元素 | 配色 | 来源 |
|
||||
|------|------|------|
|
||||
| 系列依次取色 | 通用图表色序 `#1677FF / #13C2C2 / #4096FF …` | §1.1.8 |
|
||||
| 设计稿 BW 三色变体 | 蓝 `#69B1FF` / 绿 `--func-success` / 橙 `--func-warning` | §35.8 |
|
||||
| 双系列变体 | 蓝 `#69B1FF`(ZS-002-04) + 橙 `--func-warning` | — |
|
||||
|
||||
### 36.4 条形图（横向，如「标题」x 轴 0–400）
|
||||
|
||||
| 属性 | 取值 | 来源 |
|
||||
|------|------|------|
|
||||
| 方向 | 水平，类目在 Y 轴、数值在 X 轴 | — |
|
||||
| 条体颜色 | `#69B1FF` (ZS-002-04)（单系列）或图表色序 | §1.1.3 |
|
||||
| 条体圆角 | 右端 `2px` | §4.1 |
|
||||
| 类目标签「类型」 | 左对齐，`12px #6E88B0` | §35.3 |
|
||||
| X 轴刻度 | `0 / 100 / 200 / 300 / 400`，`12px #6E88B0` | §35.3 |
|
||||
|
||||
### 36.5 排行进度条（如「数据采集XXX」TOP1–5）
|
||||
|
||||
横向「标签 + 渐变进度条 + 数值」的榜单形态。
|
||||
|
||||
```
|
||||
TOP1 项目任务名称一 15,465
|
||||
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▓▓▓▓▓▓▓▓
|
||||
TOP2 项目任务名称二 15,234
|
||||
■■■■■■■■■■■■■■■■■■■■■■■■■▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 排名 + 名称（TOPn 项目任务名称） | `14px Regular`，`#C5CFE0` (ZS-004-02) | — |
|
||||
| 数值（右对齐） | `16px D-DIN Regular`，`#FFFFFF` | §2.1.2 |
|
||||
| 进度条高度 | `8px`，圆角 `4px` | §4.1 |
|
||||
| 进度填充 | 渐变 `linear-gradient(90deg, #1677FF 0%, #13C2C2 100%)`（主色蓝→主色青） | §1.1.8 |
|
||||
| 进度轨道（底槽） | `#1A2F5A` (ZS-004-07) | §1.1.5 |
|
||||
| 行间距 | `--spacing-4` (16px) | §7.1 |
|
||||
| 名称行 → 进度条间距 | `--spacing-2` (8px) | §7.1 |
|
||||
|
||||
### 36.6 交互
|
||||
|
||||
| 行为 | 动效 |
|
||||
|------|------|
|
||||
| 入场 | 柱体由 `0` 向目标高度 / 长度增长，`scaleY/scaleX 0→1`，`400ms ease-out`，按系列依次 `60ms` 错峰 |
|
||||
| Hover 柱 | 该柱亮度 `+8%`，弹出 §35.6 Tooltip，axisPointer 高亮该类目竖带 |
|
||||
| Hover 进度条 | 数值放大或显示绝对值 Tooltip |
|
||||
|
||||
---
|
||||
|
||||
## 37. 折线图（Line / Area）
|
||||
|
||||
> 对应设计稿「8.2 图表-折线图」与「8.3 多系列折线」。涵盖**迷你面积图 / 单线（含异常点 Tooltip）/ 长时序面积图（带缩略轴）/ 多系列折线**。容器、轴、网格、图例、Tooltip 沿用 §35。
|
||||
|
||||
### 37.1 线条与面积
|
||||
|
||||
| 元素 | 规格 | 来源 |
|
||||
|------|------|------|
|
||||
| 线宽 | `2px` | — |
|
||||
| 线条颜色 | 取图表色序，单线默认 `#1677FF` (ZS-002-06) | §1.1.8 |
|
||||
| 平滑 | `smooth`（曲线）或折线，按数据性质选用 | — |
|
||||
| 面积填充（单线） | 自顶向下渐变 `rgba(22,119,255,0.32) → rgba(22,119,255,0)` | §3.1 |
|
||||
| 拐点 | 默认隐藏，hover 显示空心圆（§35.7） | — |
|
||||
|
||||
### 37.2 迷你面积图（如左上「图表标题」+ 已选/未选 标签）
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 顶部切换标签（已选 / 未选） | §29 标签：选中 `#1677FF` 实心白字 / 未选 `transparent` + `1px #6E88B0` 边、`#6E88B0` 字 | §29 |
|
||||
| 线条 | `2px #4096FF` (ZS-002-05) | — |
|
||||
| 面积渐变 | `rgba(64,150,255,0.32) → 0` | — |
|
||||
| 当前值标签（如 `59.32`） | 实心小牌 `#122347` 背景 / `#FFFFFF` 文字，圆角 `2px`，定位于末端点 | §35.6 |
|
||||
| 轴标签（日期） | `12px #6E88B0` | §35.3 |
|
||||
|
||||
### 37.3 单线异常点图（如中部「5-1…5-12」+「1月10日 异常率12.9%」）
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 主线 | `2px #1677FF` | — |
|
||||
| 面积渐变 | `rgba(22,119,255,0.32) → 0` | — |
|
||||
| 选中竖带 | `rgba(22,119,255,0.12)` 矩形高亮当前 X 区间 | §35.7 |
|
||||
| 异常点标记 | 空心圆 `6px`，描边 `#FAAD14`（警告橙），填充 `#0C1836` | §27.4 |
|
||||
| Tooltip（日期 + 指标） | §35.6；指标行如「异常率 12.9%」用 `--func-warning` 橙强调 | §35.6 |
|
||||
| Y 轴（0–2500） | `12px #6E88B0`，虚线网格 `#2D4473` | §35.3 / §35.4 |
|
||||
|
||||
### 37.4 长时序面积图 + 缩略轴（如底部「图表标题」1986–2024）
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 主线 | `2px #36CFC9`（标准青）或 `#4096FF` | §1.1.4 |
|
||||
| 面积渐变 | `rgba(54,207,201,0.24) → 0` | — |
|
||||
| 数据点标签（如 `2.43`） | 实心小牌（§35.6），定位于选中点上方 | — |
|
||||
| 缩略轴（dataZoom，右下迷你图） | 缩略折线 `#4A6491`；滑窗手柄 `#1677FF`，选中区 `rgba(22,119,255,0.16)` | §1.1.5 / §1.1.6 |
|
||||
| X 轴年份 | `12px #6E88B0`，密集时隔项显示 | §35.3 |
|
||||
|
||||
### 37.5 多系列折线图（如「图表标题」XXX/XXX/都是/无反应）
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 图例（顶部居中） | 方块 marker + 文字，项间距 `--spacing-3` | §35.5 |
|
||||
| 系列 1（XXX） | 红 `#FF4D4F` (ZS-001-05) | §1.1.2 |
|
||||
| 系列 2（XXX） | 蓝 `#1677FF` (ZS-002-06) | §1.1.3 |
|
||||
| 系列 3（都是） | 橙 `--func-warning` | §27.4 |
|
||||
| 系列 4（无反应） | 绿 `--func-success` 或青 `#36CFC9` | §27.4 / §1.1.4 |
|
||||
| 线宽 | `2px`，多系列**不填充面积**（避免互相遮挡） | — |
|
||||
| 拐点 | 全程显示 `4px` 空心圆（描边系列色，填充 `#0C1836`） | §35.7 |
|
||||
| 选中竖带 + Tooltip | hover 竖带 `rgba(22,119,255,0.12)`，Tooltip 列出各系列值（如 `5.32`） | §35.6 |
|
||||
| Y 轴（0–10） / X 轴（年份） | `12px #6E88B0`，横向虚线网格 `#2D4473` | §35.3 / §35.4 |
|
||||
|
||||
### 37.6 交互
|
||||
|
||||
| 行为 | 动效 |
|
||||
|------|------|
|
||||
| 入场 | 线条沿路径绘制 `stroke-dashoffset` 动画，`600ms ease-out`；面积同步淡入 |
|
||||
| Hover | 显示 §35.6 Tooltip + 竖向 axisPointer 高亮带；对应拐点放大为空心圆 |
|
||||
| 图例点击 | 切换系列显隐，隐藏态图例置灰 `#4A6491`（§35.5） |
|
||||
| 缩略轴拖拽 | 主图 X 轴范围实时联动，`100ms` 节流 |
|
||||
|
||||
---
|
||||
|
||||
## 38. 甘特图（Gantt）
|
||||
|
||||
> 对应设计稿「甘特图」。以时间为横轴、任务行为纵轴的进度条排期图。深蓝背景上以**交替行底纹 + 渐变任务条 + 箭头收尾**呈现，配色取 §1.1.8 图表色序与语义色。
|
||||
|
||||
### 38.1 结构
|
||||
|
||||
```
|
||||
1 2 3 … 15 16 17 … 31 ← 时间刻度表头
|
||||
Jan ▐▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▶ ← 任务条（带箭头收尾）
|
||||
Feb ▐▓▓▓▓▓▓▓▓▓▶
|
||||
Mar ▐▓▓▓▓▓▓▓▶
|
||||
…
|
||||
Dec ▐▓▓▓▓▓▓▓▓▓▓▓▶
|
||||
● Lorem ipsum 1 ● Lorem ipsum 2 … ← 底部图例
|
||||
```
|
||||
|
||||
### 38.2 表格框架
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 容器背景 | `#0C1836` (ZS-004-09) | §35.1 |
|
||||
| 时间刻度表头（1–31 / 月） | `12px Regular`，`#C5CFE0` (ZS-004-02) | §35.3 |
|
||||
| 行标签（Jan…Dec） | `14px Regular`，`#C5CFE0` | — |
|
||||
| 行高 | `28px`，行间距 `--spacing-1` (4px) | §7.1 |
|
||||
| 行底纹（轨道） | `#122347` (ZS-004-08)，整行通栏，圆角 `2px` | §1.1.5 |
|
||||
| 行底纹（隔行可选） | 奇偶交替 `#122347` / `#0F1C3D` | — |
|
||||
| 列分隔（可选） | `1px dashed #1A2F5A` (ZS-004-07) | §6.2 |
|
||||
|
||||
### 38.3 任务条
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 条高 | `16px`，垂直居中于行内 | — |
|
||||
| 圆角 | `2px`（左端）；右端收**箭头**三角表示方向 | §4.1 |
|
||||
| 填充 | 沿条向右渐变（系列色 `0%` → 同色 70% 透明 `100%`），叠加斜纹/点纹理增强层次 | §1.1.8 |
|
||||
| 纹理 | `repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 4px, transparent 4px 8px)` | — |
|
||||
| 箭头收尾 | 与条同色实心三角，`6px`，指向时间推进方向 | — |
|
||||
| 进度（可选） | 条内再叠一段高饱和系列色表示完成比例 | — |
|
||||
|
||||
### 38.4 任务分类配色（对应底部图例 Lorem ipsum 1–5）
|
||||
|
||||
| 图例 | 圆点 / 任务条主色 | 来源 |
|
||||
|------|------------------|------|
|
||||
| Lorem ipsum 1 | 橙 `--func-warning` | §27.4 |
|
||||
| Lorem ipsum 2 | 红 `#FF4D4F` (ZS-001-05) | §1.1.2 |
|
||||
| Lorem ipsum 3 | 青绿 `#36CFC9` (ZS-003-05) | §1.1.4 |
|
||||
| Lorem ipsum 4 | 浅蓝 `#91CAFF` (ZS-002-03) | §1.1.3 |
|
||||
| Lorem ipsum 5 | 主色蓝 `#1677FF` (ZS-002-06) | §1.1.3 |
|
||||
|
||||
### 38.5 图例与表头
|
||||
|
||||
| 元素 | 规格 | 来源 |
|
||||
|------|------|------|
|
||||
| 底部图例圆点 | `10px` 圆形，取 §38.4 分类色 | §35.5 |
|
||||
| 图例文字 | `14px Regular`，`#C5CFE0` | — |
|
||||
| 图例项间距 | `--spacing-5` (24px) | §7.1 |
|
||||
| 表头 → 首行间距 | `--spacing-3` (12px) | §7.1 |
|
||||
|
||||
### 38.6 交互
|
||||
|
||||
| 行为 | 动效 |
|
||||
|------|------|
|
||||
| 入场 | 任务条由左端起点向右展开 `scaleX 0→1`（`transform-origin:left`），`400ms ease-out`，按行错峰 `60ms` |
|
||||
| Hover 任务条 | 整条亮度 `+8%`，弹出 §35.6 Tooltip（任务名 / 起止日期 / 进度） |
|
||||
| Hover 行 | 行底纹由 `#122347` → `#1A2F5A` (ZS-004-07) |
|
||||
| 今日线（可选） | 一条 `1px dashed #4096FF` (ZS-002-05) 竖线标注当前日期 | §6.2 |
|
||||
|
||||
### 38.7 CSS Token 参考（§35–§38 共用）
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* 图表容器与标题 */
|
||||
--chart-bg: #0C1836; /* ZS-004-09 */
|
||||
--chart-title-bar: #1677FF; /* ZS-002-06 标题竖条 */
|
||||
--chart-title-text: #FFFFFF;
|
||||
--chart-subtitle: #6E88B0; /* ZS-004-04 */
|
||||
|
||||
/* 坐标轴与网格 */
|
||||
--chart-axis-line: #2D4473; /* ZS-004-06 */
|
||||
--chart-axis-label: #6E88B0; /* ZS-004-04 */
|
||||
--chart-axis-cat: #4096FF; /* ZS-002-05 类目名 */
|
||||
--chart-grid: #2D4473; /* ZS-004-06 虚线网格 */
|
||||
--chart-grid-weak: #1A2F5A; /* ZS-004-07 */
|
||||
|
||||
/* 图例 / Tooltip */
|
||||
--chart-legend-text: #C5CFE0; /* ZS-004-02 */
|
||||
--chart-legend-off: #4A6491; /* ZS-004-05 未选中 */
|
||||
--chart-tooltip-bg: rgba(12,24,54,0.92);
|
||||
--chart-tooltip-border:#1A2F5A; /* ZS-004-07 */
|
||||
--chart-tooltip-title: #FFFFFF;
|
||||
--chart-tooltip-value: #C5CFE0;
|
||||
--chart-axispointer: #4096FF; /* ZS-002-05 */
|
||||
--chart-highlight-band:rgba(22,119,255,0.12);
|
||||
|
||||
/* 通用图表色序（面积大） */
|
||||
--chart-c1: #1677FF; --chart-c2: #13C2C2; --chart-c3: #4096FF; --chart-c4: #36CFC9;
|
||||
--chart-c5: #69B1FF; --chart-c6: #5CDBD3; --chart-c7: #91CAFF; --chart-c8: #87E8DE;
|
||||
|
||||
/* 小面积图表色序 */
|
||||
--chart-s1: #4096FF; --chart-s2: #36CFC9; --chart-s3: #FF4D4F;
|
||||
--chart-s4: #FFA39E; --chart-s5: #6388FF; --chart-s6: #478880;
|
||||
|
||||
/* 排行进度条（§36.5） */
|
||||
--rank-bar-fill: linear-gradient(90deg, #1677FF 0%, #13C2C2 100%);
|
||||
--rank-bar-track: #1A2F5A; /* ZS-004-07 */
|
||||
--rank-value: #FFFFFF;
|
||||
|
||||
/* 甘特图（§38） */
|
||||
--gantt-track: #122347; /* ZS-004-08 行底纹 */
|
||||
--gantt-row-hover: #1A2F5A; /* ZS-004-07 */
|
||||
--gantt-c1: #FAAD14; /* 警告橙 */
|
||||
--gantt-c2: #FF4D4F; /* ZS-001-05 */
|
||||
--gantt-c3: #36CFC9; /* ZS-003-05 */
|
||||
--gantt-c4: #91CAFF; /* ZS-002-03 */
|
||||
--gantt-c5: #1677FF; /* ZS-002-06 */
|
||||
--gantt-today: #4096FF; /* ZS-002-05 今日线 */
|
||||
}
|
||||
```
|
||||
|
||||
> 项目当前未引入图表库；若后续接入 ECharts，可将以上 token 注入主题（`backgroundColor` / `axisLine.lineStyle.color` / `splitLine.lineStyle` / `color[]` 色序 / `tooltip.backgroundColor` 等），保持与本规范一致。
|
||||
>
|
||||
> **关于多系列填充色**：§36–§38 表格中标注的系列色用于说明语义映射；**实际多系列图表的系列填充色一律以 §41 图表色值（设计稿 8.7）为准**——即淡色系 `#FA9196 / #FFCC80 / #97EBCD / #A2E1F9 / #80BCFF …`，按系列数量取对应色序。§1.1.8 的高彩度色序仅用于需要强对比的强调场景（如单色进度条渐变、KPI 高亮）。
|
||||
|
||||
---
|
||||
|
||||
## 39. 环形图（Donut / Ring）
|
||||
|
||||
> 对应设计稿「8.3 图表-环形图」。中心带总量数字的占比环图，按分类数量分**三环 / 四环 / 五环 / 六环 / 七环 / 八环**等变体。环段配色取 §41 图表色值（淡色系列），中心总量与引导标签取深蓝系字体色。
|
||||
|
||||
### 39.1 结构
|
||||
|
||||
```
|
||||
三环 / 四环 …（标题）
|
||||
╭──────────╮
|
||||
Media│ │Social
|
||||
28% │ 34801 │ 36%
|
||||
│ XXX总量 │
|
||||
╰──────────╯
|
||||
News 28%
|
||||
```
|
||||
|
||||
### 39.2 环体规格
|
||||
|
||||
| 属性 | 取值 | 来源 |
|
||||
|------|------|------|
|
||||
| 外径 | 容器短边的 `60%~70%` | — |
|
||||
| 内径（中空比） | 外径的 `62%`（环宽约 `38%`） | — |
|
||||
| 环段间隙 | `2px`（用容器底色 `#0C1836` 描边分隔） | §35.1 |
|
||||
| 环段圆角 | `2px`（段端微圆角，可选） | §4.1 |
|
||||
| 环段配色 | 按分类数取 §41 对应「N 色」色序 | §41 |
|
||||
| 起始角 / 方向 | 顶部 `90°` 起，顺时针 | — |
|
||||
|
||||
### 39.3 中心与标签
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 中心主数值（如 `34801`） | `26px Bold D-DIN`，`#FFFFFF` | §2.1.2 |
|
||||
| 中心说明（如 `XXX总量`） | `12px Regular`，`#6E88B0` (ZS-004-04) | — |
|
||||
| 引导标签名（如 `Social`） | `12px Regular`，`#C5CFE0` (ZS-004-02) | — |
|
||||
| 引导标签占比（如 `36%`） | `12px Regular`，`#FFFFFF` 或对应环段色 | — |
|
||||
| 引导线 | `1px solid #4A6491` (ZS-004-05) 折线，从环段引至外侧标签 | §6.1 |
|
||||
| 变体标题（三环 / 四环…） | `14px Medium`，`#C5CFE0`，居中于图上方 | §35.2 |
|
||||
|
||||
### 39.4 交互
|
||||
|
||||
| 行为 | 动效 |
|
||||
|------|------|
|
||||
| 入场 | 环段沿顺时针扫出 `0°→终值`，`600ms ease-out`，按段错峰 `60ms` |
|
||||
| Hover 环段 | 该段沿半径外扩 `4px`（`offset`），中心数值切换为该段值 + 占比，弹出 §35.6 Tooltip |
|
||||
| 图例点击 | 切换分类显隐，其余环段占比按比例重算 |
|
||||
|
||||
---
|
||||
|
||||
## 40. 关系图 / 散点图（Network / Scatter）
|
||||
|
||||
> 对应设计稿「8.6 图表-散点图」「关系图」。用于展示账号、节点间关系的力导向网络图与散点分布。深蓝背景上以**发光节点 + 渐隐连线 + 平台聚类**呈现，节点配色取主色蓝 / 警告橙 / 危险红做分类，节点尺寸映射权重。
|
||||
|
||||
### 40.1 节点（Node）
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 形状 | 圆形（普通节点）/ 头像圆（账号节点，`2px` 描边）/ 六边形（聚合节点） | — |
|
||||
| 直径 | `8px ~ 40px`，按权重（连接数 / 数值）线性映射 | — |
|
||||
| 分类色 A（本方 / 主） | `#1677FF` (ZS-002-06) | §1.1.3 |
|
||||
| 分类色 B（异常 / 外部） | `--func-warning`（橙） | §27.4 |
|
||||
| 分类色 C（高危 / 标红） | `#FF4D4F` (ZS-001-05) | §1.1.2 |
|
||||
| 节点发光（重点节点） | `0 0 12px` 同色 40% 透明外发光 | §3.1 |
|
||||
| 节点文字（数值 / 名称） | `12px Regular`，`#FFFFFF`（节点内）/ `#C5CFE0`（节点外） | — |
|
||||
| 中心 / 焦点节点 | 加大直径 + 强发光，橙色 `--func-warning` 高亮 | — |
|
||||
|
||||
### 40.2 连线（Edge）
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 线宽 | `1px`（普通）/ `2px`（强关系） | — |
|
||||
| 颜色 | `#4A6491` (ZS-004-05) 半透明，或取**起点节点分类色** 40% 透明 | §1.1.5 |
|
||||
| 渐隐 | 由中心向外渐隐（`opacity 0.6 → 0.15`），弱化边缘视觉噪声 | — |
|
||||
| 方向（有向） | 末端箭头 `4px`，同线色 | — |
|
||||
| 高亮态（hover 节点时） | 关联边升为节点分类色满饱和、`2px`，无关边降至 `opacity 0.08` | — |
|
||||
|
||||
### 40.3 散点图（Scatter，纯坐标分布）
|
||||
|
||||
| 元素 | 规格 / 配色 | 来源 |
|
||||
|------|-------------|------|
|
||||
| 散点 | 实心圆 `6px ~ 16px`（尺寸可映射第三维） | — |
|
||||
| 配色 | 小面积色序（§41 或 §1.1.8 小面积），分类着色 | §41 |
|
||||
| 坐标轴 / 网格 | 沿用 §35.3 / §35.4 | §35 |
|
||||
| 气泡变体 | 半透明填充 `35%` + `1px` 同色描边，避免重叠遮挡 | — |
|
||||
|
||||
### 40.4 平台聚类与图例（如 Facebook / Twitter / 微博 / TikTok）
|
||||
|
||||
| 元素 | 规格 | 来源 |
|
||||
|------|------|------|
|
||||
| 聚类标签 | 平台名 `14px Medium`，对应聚类主色（如蓝 / 橙 / 红） | — |
|
||||
| 聚类辅文 | 数值 `12px Regular`，`#6E88B0` | — |
|
||||
| 图例（XXX / XXX） | 方块 marker + 文字，置右下角 | §35.5 |
|
||||
| 更新提示（如「近30分钟更新数据」） | `12px Regular`，`#6E88B0`，右下角 | — |
|
||||
|
||||
### 40.5 控制区（关系图侧栏）
|
||||
|
||||
设计稿左侧含「选择目标」下拉 + 分类勾选列表（主页发帖 / 群组发帖 / 私信 / 点赞 / 转发 / 帖子评论 / Pages内容 / 目标的主页帖子）+「添加账号 / 全选账号」按钮。
|
||||
|
||||
| 元素 | 规格 | 来源 |
|
||||
|------|------|------|
|
||||
| 「选择目标」下拉 | 沿用 §15 选择器 | §15 |
|
||||
| 分类列表项 | `14px Regular`，前缀分类色圆点 `8px`，沿用 §16 多选 | §16 |
|
||||
| 「添加账号」 | §5.2.2 默认按钮（含 `+` 图标） | §5.3.2 |
|
||||
| 「全选账号」 | §5.2.3 文本按钮 | §5.2.3 |
|
||||
| 刷新图标（右上 ⟳） | `16px`，`#6E88B0`，hover `#4096FF` | §8.2.5 |
|
||||
|
||||
### 40.6 交互
|
||||
|
||||
| 行为 | 动效 |
|
||||
|------|------|
|
||||
| 力导向布局 | 节点入场后力导向收敛，`tick` 动画 `~800ms` 后静止 |
|
||||
| Hover 节点 | 高亮关联边与邻接节点（§40.2），其余降透明；弹出 §35.6 Tooltip（节点名 / 类型 / 指标） |
|
||||
| 点击节点 | 居中聚焦该节点并展开其一度关系；可下钻 |
|
||||
| 缩放 / 平移 | 滚轮缩放 `0.5×~3×`，拖拽平移画布 |
|
||||
| 拖拽节点 | 可手动拖拽固定节点位置 |
|
||||
|
||||
---
|
||||
|
||||
## 41. 图表色值（Chart Palette · 多系列色序）
|
||||
|
||||
> 对应设计稿「8.7 图表-色值」。这是**全站图表多系列填充的权威色序**（淡色系，深蓝背景上柔和、区分度高）。按系列数量从「三色」到「十色」各有固定取色顺序——系列数为 N 时直接取「N 色」整行，**不要自行截取或乱序**。如需超过十色或特殊场景，由 UI 设计师按整体风格补充。
|
||||
|
||||
### 41.1 基础色板
|
||||
|
||||
| 色名 | 色值 | 色相 |
|
||||
|------|------|------|
|
||||
| 粉红 | `#FA9196` | 红 |
|
||||
| 橙红 | `#FCA58F` | 橙红 |
|
||||
| 橙 | `#FDB887` | 橙 |
|
||||
| 浅橙 | `#FFCC80` | 黄橙 |
|
||||
| 黄绿 | `#DCD69A` | 黄绿 |
|
||||
| 浅绿 | `#BAE1B3` | 绿 |
|
||||
| 青绿 | `#97EBCD` | 青绿 |
|
||||
| 浅青 | `#9EE4EA` | 青 |
|
||||
| 浅蓝 | `#A2E1F9` | 天蓝 |
|
||||
| 蓝 | `#80BCFF` | 蓝 |
|
||||
|
||||
### 41.2 按系列数取色序
|
||||
|
||||
| 系列数 | 取色顺序 |
|
||||
|--------|----------|
|
||||
| 三色 | `#FA9196` · `#97EBCD` · `#80BCFF` |
|
||||
| 四色 | `#FA9196` · `#FFCC80` · `#97EBCD` · `#A2E1F9` |
|
||||
| 五色 | `#FA9196` · `#FFCC80` · `#97EBCD` · `#A2E1F9` · `#80BCFF` |
|
||||
| 六色 | `#FA9196` · `#FFCC80` · `#BAE1B3` · `#97EBCD` · `#A2E1F9` · `#80BCFF` |
|
||||
| 七色 | `#FA9196` · `#FCA58F` · `#FFCC80` · `#BAE1B3` · `#97EBCD` · `#A2E1F9` · `#80BCFF` |
|
||||
| 八色 | `#FA9196` · `#FCA58F` · `#FDB887` · `#FFCC80` · `#BAE1B3` · `#97EBCD` · `#A2E1F9` · `#80BCFF` |
|
||||
| 九色 | `#FA9196` · `#FCA58F` · `#FDB887` · `#FFCC80` · `#DCD69A` · `#BAE1B3` · `#97EBCD` · `#A2E1F9` · `#80BCFF` |
|
||||
| 十色 | `#FA9196` · `#FCA58F` · `#FDB887` · `#FFCC80` · `#DCD69A` · `#BAE1B3` · `#97EBCD` · `#9EE4EA` · `#A2E1F9` · `#80BCFF` |
|
||||
|
||||
> 规律：色序整体沿「红 → 橙 → 黄绿 → 绿 → 青 → 蓝」色相环渐变铺开；系列数增加时在中间插入过渡色，**首色恒为 `#FA9196`、末色恒为 `#80BCFF`**，保证冷暖两端锚定不变。
|
||||
|
||||
### 41.3 与既有规范的关系
|
||||
|
||||
| 色序 | 用途 | 来源 |
|
||||
|------|------|------|
|
||||
| §41 淡色系列（本节） | 图表**多系列填充**（柱 / 折线 / 环形 / 散点分类）默认色序 | 设计稿 8.7 |
|
||||
| §1.1.8 通用图表色序（高彩度） | 强对比强调：单色渐变进度条、KPI 高亮、需要醒目的单系列 | §1.1.8 |
|
||||
| §27.4 / §1.1.2 语义色 | 带语义的系列（成功 / 警告 / 错误 / 信息） | §27.4 |
|
||||
|
||||
> 三者优先级：**有语义 → 用语义色；多分类并列 → 用 §41；需强调单值 → 用 §1.1.8 高彩度**。§36–§40 中标注的具体系列色为语义示例，实际并列分类应回落到本节色序。
|
||||
|
||||
### 41.4 CSS Token 参考
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* §41 图表多系列色板（淡色系，设计稿 8.7） */
|
||||
--chart-p-red: #FA9196;
|
||||
--chart-p-redorange:#FCA58F;
|
||||
--chart-p-orange: #FDB887;
|
||||
--chart-p-amber: #FFCC80;
|
||||
--chart-p-olive: #DCD69A;
|
||||
--chart-p-green: #BAE1B3;
|
||||
--chart-p-teal: #97EBCD;
|
||||
--chart-p-cyan: #9EE4EA;
|
||||
--chart-p-skyblue: #A2E1F9;
|
||||
--chart-p-blue: #80BCFF;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// 按系列数取色序（接入 ECharts 时用作 option.color）
|
||||
export const CHART_PALETTES = {
|
||||
3: ['#FA9196', '#97EBCD', '#80BCFF'],
|
||||
4: ['#FA9196', '#FFCC80', '#97EBCD', '#A2E1F9'],
|
||||
5: ['#FA9196', '#FFCC80', '#97EBCD', '#A2E1F9', '#80BCFF'],
|
||||
6: ['#FA9196', '#FFCC80', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'],
|
||||
7: ['#FA9196', '#FCA58F', '#FFCC80', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'],
|
||||
8: ['#FA9196', '#FCA58F', '#FDB887', '#FFCC80', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'],
|
||||
9: ['#FA9196', '#FCA58F', '#FDB887', '#FFCC80', '#DCD69A', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'],
|
||||
10: ['#FA9196', '#FCA58F', '#FDB887', '#FFCC80', '#DCD69A', '#BAE1B3', '#97EBCD', '#9EE4EA', '#A2E1F9', '#80BCFF'],
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,320 @@
|
||||
# 深蓝色 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 持平 */
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,82 @@
|
||||
# 深蓝色 UI 规范（拆分版）
|
||||
|
||||
面向开发的深蓝主题设计规范。原单文件 `../ui修改-深蓝.md`（约 5200 行）已按模块拆分到本目录，便于按需查阅、减少 diff 冲突，也方便配合 AI 只加载相关分册。
|
||||
|
||||
> **颜色唯一来源**：所有色值以 **§1 色彩**（见 [`00-基础-色彩字体间距.md`](./00-基础-色彩字体间距.md)）为准，可执行变量见 [`tokens.css`](./tokens.css)。业务代码 **import `tokens.css` 并用 `var(--token)`**，不要硬编码 HEX。
|
||||
|
||||
## 分册
|
||||
|
||||
| 文件 | 章节 | 内容 |
|
||||
|------|------|------|
|
||||
| [`00-基础-色彩字体间距.md`](./00-基础-色彩字体间距.md) | §1–§7 | 色彩 / 字体 / 阴影 / 圆角 / 按钮 / 分割线 / 间距 |
|
||||
| [`01-导航.md`](./01-导航.md) | §8–§13 | 导航组件 / 锚点页签 / 步骤条 / 面包屑 / 页头 / 分页 |
|
||||
| [`02-表单.md`](./02-表单.md) | §14–§21 | 输入框 / 选择器 / 单复选 / 日期 / 穿梭框 / 树选择 / 上传 / 弹窗 |
|
||||
| [`03-数据展示.md`](./03-数据展示.md) | §22–§34 | 卡片 / 折叠 / 描述列表 / 列表 / 时间轴 / 进度条 / 表格 / 标签 / 树 / 对话框 / 提示 / 气泡确认 |
|
||||
| [`04-图表.md`](./04-图表.md) | §35–§41 | 图表通用 / 柱状 / 折线 / 甘特 / 环形 / 关系散点 / 图表色值 |
|
||||
| [`05-页面范例.md`](./05-页面范例.md) | §42–§44 | 表单弹窗 / 卡片列表页 / 数据概览仪表盘 |
|
||||
| [`tokens.css`](./tokens.css) | — | 全量 CSS 变量（颜色 / 间距 / 圆角 / 阴影 / 字体），可直接 import |
|
||||
|
||||
## § 索引（编号 → 所在文件）
|
||||
|
||||
章节编号 `§N` 全局唯一、跨文件不变；文中 `§N` / `§N.x` 引用按下表定位。
|
||||
|
||||
| § | 标题 | 文件 |
|
||||
|---|------|------|
|
||||
| §1 | 色彩 | 00 |
|
||||
| §2 | 字体 | 00 |
|
||||
| §3 | 阴影 | 00 |
|
||||
| §4 | 圆角 | 00 |
|
||||
| §5 | 按钮 | 00 |
|
||||
| §6 | 分割线 | 00 |
|
||||
| §7 | 间距 | 00 |
|
||||
| §8 | 导航组件 | 01 |
|
||||
| §9 | 锚点与页签 | 01 |
|
||||
| §10 | 步骤条 | 01 |
|
||||
| §11 | 面包屑 | 01 |
|
||||
| §12 | 页头 | 01 |
|
||||
| §13 | 分页 | 01 |
|
||||
| §14 | 输入框（搜索框） | 02 |
|
||||
| §15 | 选择器 | 02 |
|
||||
| §16 | 单选与多选 | 02 |
|
||||
| §17 | 日期选择器 | 02 |
|
||||
| §18 | 穿梭框 | 02 |
|
||||
| §19 | 树选择 | 02 |
|
||||
| §20 | 上传 | 02 |
|
||||
| §21 | 弹出式窗口（Modal） | 02 |
|
||||
| §22 | 卡片 | 03 |
|
||||
| §23 | 折叠面板 | 03 |
|
||||
| §24 | 描述列表 | 03 |
|
||||
| §25 | 列表 | 03 |
|
||||
| §26 | 时间轴（节点型） | 03 |
|
||||
| §27 | 进度条 | 03 |
|
||||
| §28 | 表格 | 03 |
|
||||
| §29 | 标签 | 03 |
|
||||
| §30 | 树形控件 | 03 |
|
||||
| §31 | 时间轴（长文本） | 03 |
|
||||
| §32 | 对话框（确认框） | 03 |
|
||||
| §33 | 全局提示 | 03 |
|
||||
| §34 | 气泡确认 | 03 |
|
||||
| §35 | 图表通用规范 | 04 |
|
||||
| §36 | 柱状图 | 04 |
|
||||
| §37 | 折线图 | 04 |
|
||||
| §38 | 甘特图 | 04 |
|
||||
| §39 | 环形图 | 04 |
|
||||
| §40 | 关系图 / 散点图 | 04 |
|
||||
| §41 | 图表色值 | 04 |
|
||||
| §42 | 表单弹窗范例 | 05 |
|
||||
| §43 | 卡片列表页 | 05 |
|
||||
| §44 | 数据概览仪表盘 | 05 |
|
||||
|
||||
## 约定
|
||||
|
||||
- **颜色**：以 §1 为准，代码用 `tokens.css` 的 `var(--token)`。功能语义色（成功/警告/错误/信息/处理中）见 §1.1.9 / `--func-*`。
|
||||
- **间距**：仅用 §7 的 8px 阶梯（`--spacing-1..8`），禁用 5px / 13px 等非阶梯值。
|
||||
- **圆角**：按钮/输入/标签 `2px`，卡片/分栏/弹窗 `4px`（`--radius-*`）。
|
||||
- **跨节引用**：保留 `§N` 编号，用上方「§ 索引」定位文件。
|
||||
- **名称易混点**：§26 时间轴(节点型) ↔ §31 时间轴(长文本)；§21 弹出式窗口(Modal) ↔ §32 对话框(确认框)。
|
||||
- **图表两套色板**：§1.1.8（高彩度，强调单值）与 §41（淡色系，多分类并列）并存，优先级见 §41.3。
|
||||
|
||||
## 维护
|
||||
|
||||
- 改色 / 改间距 → 先改 **`tokens.css` + §1/§7**，组件分册回落引用，不在分册里另立硬编码。
|
||||
- 新增整页范例 → 进 `05-页面范例.md`，沿用既有组件 § 与 `tokens.css`。
|
||||
@@ -0,0 +1,211 @@
|
||||
/* =============================================================================
|
||||
* 深蓝色 UI 规范 · 设计令牌（tokens.css）
|
||||
* -----------------------------------------------------------------------------
|
||||
* 这是《深蓝色 UI 规范》全站颜色 / 间距 / 圆角 / 阴影 / 字体的唯一可执行来源。
|
||||
* 开发时优先 import 本文件并使用 var(--token)，不要在业务代码里硬编码 HEX。
|
||||
*
|
||||
* 文档对应：
|
||||
* §1 色彩 → 原始色阶 --zs-*、功能语义 --func-*、装饰/图表色板
|
||||
* §2 字体 → --font-* / --fs-*
|
||||
* §3 阴影 → --shadow-*
|
||||
* §4 圆角 → --radius-*
|
||||
* §7 间距 → --spacing-*
|
||||
* 组件级 token（--card-* / --modal-* / --kpi-* 等）保留在各分册的「CSS Token 参考」
|
||||
* 小节中，均回落到本文件的原始/语义 token。
|
||||
* ========================================================================== */
|
||||
|
||||
:root {
|
||||
/* ---------------------------------------------------------------------------
|
||||
* 1. 原始色阶（§1.1.2–§1.1.5）—— 01 最浅 → 10 最深
|
||||
* ------------------------------------------------------------------------ */
|
||||
|
||||
/* 渐红系 ZS-001 —— 警示 / 错误 / 强调 */
|
||||
--zs-001-01: #FFF1F0;
|
||||
--zs-001-02: #FFCCC7;
|
||||
--zs-001-03: #FFA39E;
|
||||
--zs-001-04: #FF7875;
|
||||
--zs-001-05: #FF4D4F;
|
||||
--zs-001-06: #F5222D;
|
||||
--zs-001-07: #CF1322;
|
||||
--zs-001-08: #A8071A;
|
||||
--zs-001-09: #820014;
|
||||
--zs-001-10: #5C0011;
|
||||
|
||||
/* 渐蓝系 ZS-002 —— 信息 / 链接 / 次级操作（含主色） */
|
||||
--zs-002-01: #E6F4FF;
|
||||
--zs-002-02: #BAE0FF;
|
||||
--zs-002-03: #91CAFF;
|
||||
--zs-002-04: #69B1FF;
|
||||
--zs-002-05: #4096FF;
|
||||
--zs-002-06: #1677FF;
|
||||
--zs-002-07: #0958D9;
|
||||
--zs-002-08: #003EB3;
|
||||
--zs-002-09: #002C8C;
|
||||
--zs-002-10: #001D6C;
|
||||
|
||||
/* 渐青系 ZS-003 —— 成功 / 在线 / 数据高亮（含辅色） */
|
||||
--zs-003-01: #E6FFFB;
|
||||
--zs-003-02: #B5F5EC;
|
||||
--zs-003-03: #87E8DE;
|
||||
--zs-003-04: #5CDBD3;
|
||||
--zs-003-05: #36CFC9;
|
||||
--zs-003-06: #13C2C2;
|
||||
--zs-003-07: #08979C;
|
||||
--zs-003-08: #006D75;
|
||||
--zs-003-09: #00474F;
|
||||
--zs-003-10: #002329;
|
||||
|
||||
/* 深蓝系 ZS-004 —— 背景 / 容器 / 导航 / 文字（主题核心） */
|
||||
--zs-004-01: #E8EDF5;
|
||||
--zs-004-02: #C5CFE0;
|
||||
--zs-004-03: #9BADC8;
|
||||
--zs-004-04: #6E88B0;
|
||||
--zs-004-05: #4A6491;
|
||||
--zs-004-06: #2D4473;
|
||||
--zs-004-07: #1A2F5A;
|
||||
--zs-004-08: #122347;
|
||||
--zs-004-09: #0C1836;
|
||||
--zs-004-10: #060E24;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* 2. 功能角色色（§1.1.6）—— 从色阶提取的语义别名
|
||||
* ------------------------------------------------------------------------ */
|
||||
--color-primary: var(--zs-002-06); /* #1677FF 主操作 */
|
||||
--color-primary-hover: var(--zs-002-07); /* #0958D9 */
|
||||
--color-primary-active: var(--zs-002-08); /* #003EB3 */
|
||||
--color-link: var(--zs-002-05); /* #4096FF 链接 / 文本按钮 */
|
||||
--color-accent: var(--zs-003-06); /* #13C2C2 辅色 */
|
||||
|
||||
--color-text: var(--zs-004-02); /* #C5CFE0 正文字体 */
|
||||
--color-text-secondary: var(--zs-004-04); /* #6E88B0 次级字体 */
|
||||
--color-text-disabled: var(--zs-004-05); /* #4A6491 禁用字体 */
|
||||
--color-text-strong: #FFFFFF; /* 标题 / 强调 */
|
||||
|
||||
--color-bg-page: var(--zs-004-09); /* #0C1836 页面背景 */
|
||||
--color-bg-container: var(--zs-004-07); /* #1A2F5A 容器背景 */
|
||||
--color-bg-card: var(--zs-004-08); /* #122347 卡片背景 */
|
||||
--color-bg-deepest: var(--zs-004-10); /* #060E24 全局底色 */
|
||||
--color-border: var(--zs-004-07); /* #1A2F5A 容器边框 */
|
||||
--color-border-strong: var(--zs-004-04); /* #6E88B0 控件边框 */
|
||||
--color-white: #FFFFFF;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* 3. 功能语义色（§1.1.9）—— 成功/警告/错误/信息/处理中
|
||||
* 成功绿、警告橙为标准色系外补充色；其余复用色阶。
|
||||
* ------------------------------------------------------------------------ */
|
||||
--func-success: #52C41A; /* 补充色 · 成功绿 */
|
||||
--func-warning: #FAAD14; /* 补充色 · 警告橙 */
|
||||
--func-error: var(--zs-001-06); /* #F5222D */
|
||||
--func-info: var(--zs-002-06); /* #1677FF */
|
||||
--func-processing: var(--zs-003-06); /* #13C2C2 */
|
||||
|
||||
/* 浅底变体（Message / Alert / Tag 背景，16% 透明度） */
|
||||
--func-success-bg: rgba(82, 196, 26, 0.16);
|
||||
--func-warning-bg: rgba(250, 173, 20, 0.16);
|
||||
--func-error-bg: rgba(245, 34, 45, 0.16);
|
||||
--func-info-bg: rgba(22, 119, 255, 0.16);
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* 4. 小面积装饰色（§1.1.7）—— 仅点缀 / 徽标，勿做大面积背景
|
||||
* ------------------------------------------------------------------------ */
|
||||
--deco-violet: #6388FF;
|
||||
--deco-danger: #F5222D;
|
||||
--deco-brand-blue: #12306C;
|
||||
--deco-teal: #478880;
|
||||
--deco-alert: #950404;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* 5. 字体（§2）
|
||||
* ------------------------------------------------------------------------ */
|
||||
--font-zh: 'Noto Sans S Chinese', 'Noto Sans SC', system-ui, sans-serif;
|
||||
--font-num: 'D-DIN', 'Noto Sans S Chinese', sans-serif; /* 数据数字 */
|
||||
--font-digital:'DS-Digital', 'D-DIN', sans-serif; /* 大屏特殊数字 */
|
||||
--font-logo: 'DOUYUFont', 'Noto Sans S Chinese', sans-serif;
|
||||
--font-table: 'Arial', 'Noto Sans S Chinese', sans-serif; /* 表格数字 */
|
||||
|
||||
/* 常用字号（后台系统，§2.1.2） */
|
||||
--fs-12: 12px;
|
||||
--fs-14: 14px;
|
||||
--fs-16: 16px;
|
||||
--fs-18: 18px;
|
||||
--fs-20: 20px;
|
||||
--fs-24: 24px;
|
||||
--fs-26: 26px;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* 6. 间距（§7）—— 8px 基准，密(≤16) / 疏(≥24)，禁用非阶梯值
|
||||
* ------------------------------------------------------------------------ */
|
||||
--spacing-1: 4px;
|
||||
--spacing-2: 8px;
|
||||
--spacing-3: 12px;
|
||||
--spacing-4: 16px;
|
||||
--spacing-5: 24px;
|
||||
--spacing-6: 32px;
|
||||
--spacing-7: 40px;
|
||||
--spacing-8: 56px;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* 7. 圆角（§4）
|
||||
* ------------------------------------------------------------------------ */
|
||||
--radius-button: 2px;
|
||||
--radius-input: 2px;
|
||||
--radius-tag: 2px;
|
||||
--radius-card: 4px;
|
||||
--radius-panel: 4px;
|
||||
--radius-modal: 4px;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* 8. 阴影（§3.1.4）
|
||||
* ------------------------------------------------------------------------ */
|
||||
--shadow-1: 0 2px 8px rgba(22, 119, 255, 0.12); /* 卡片悬浮 */
|
||||
--shadow-2: 0 4px 16px rgba(22, 119, 255, 0.24); /* hover / 弹出层 */
|
||||
--shadow-3: 0 8px 32px rgba(6, 14, 36, 0.6); /* Dialog / Drawer */
|
||||
--shadow-modal-mask: rgba(6, 14, 36, 0.6); /* 遮罩 */
|
||||
|
||||
/* 常用渐变 */
|
||||
--gradient-header: linear-gradient(180deg, #122347 0%, #0C1836 100%); /* 顶栏 §8.2.1 */
|
||||
--gradient-title-line: linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%); /* 标题发光线 §8.2.4 */
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
* 图表多系列色板
|
||||
* ========================================================================== */
|
||||
:root {
|
||||
/* 通用图表色序（§1.1.8，面积大：柱/折线/饼，高彩度） */
|
||||
--chart-g-1: #1677FF;
|
||||
--chart-g-2: #13C2C2;
|
||||
--chart-g-3: #4096FF;
|
||||
--chart-g-4: #36CFC9;
|
||||
--chart-g-5: #69B1FF;
|
||||
--chart-g-6: #5CDBD3;
|
||||
--chart-g-7: #91CAFF;
|
||||
--chart-g-8: #87E8DE;
|
||||
|
||||
/* 小面积图表色序（§1.1.8，散点/迷你图/徽标） */
|
||||
--chart-s-1: #4096FF;
|
||||
--chart-s-2: #36CFC9;
|
||||
--chart-s-3: #FF4D4F;
|
||||
--chart-s-4: #FFA39E;
|
||||
--chart-s-5: #6388FF;
|
||||
--chart-s-6: #478880;
|
||||
|
||||
/* 多系列填充色板（§41，淡色系，分类并列默认色序） */
|
||||
--chart-p-red: #FA9196;
|
||||
--chart-p-redorange: #FCA58F;
|
||||
--chart-p-orange: #FDB887;
|
||||
--chart-p-amber: #FFCC80;
|
||||
--chart-p-olive: #DCD69A;
|
||||
--chart-p-green: #BAE1B3;
|
||||
--chart-p-teal: #97EBCD;
|
||||
--chart-p-cyan: #9EE4EA;
|
||||
--chart-p-skyblue: #A2E1F9;
|
||||
--chart-p-blue: #80BCFF;
|
||||
}
|
||||
|
||||
/*
|
||||
* 图表配色优先级（§41.3）：
|
||||
* 有语义 → 用 --func-*；多分类并列 → 用 --chart-p-*（§41 色板）；
|
||||
* 需强调单值 → 用 --chart-g-* / --chart-s-*（§1.1.8 高彩度）。
|
||||
*
|
||||
* 接入 ECharts 时按系列数取 option.color，见 §41.4 的 CHART_PALETTES。
|
||||
*/
|
||||
+1707
-231
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user