wsk/deerflow-code
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
gozeros committed 2026-09-07 18:24:55 +08:00
1 parent 34474bd5fc
commit b638b541d0
3008 files changed
+837699
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend-web/docs/浅红色UI规范/01-基础样式.md
+514
View File
@@ -0,0 +1,514 @@
# 浅红色 UI 规范 · 一、基础样式
> 返回 [规范目录](README.md)　|　本篇：色彩 · 字体 · 阴影 · 圆角 · 间距 · 语义状态色
---
## 1. 色彩
### 1.1 标准色
色彩体系分为**主色**与**辅色**两大类。
- **主色**：渐红系（ZS-001）、渐蓝系（ZS-002），用于品牌表达与核心交互。
- **辅色**：渐橙系（FS-001）、渐绿系（FS-002）、渐青系（FS-003）、中性灰系（FS-004），用于状态提示、数据可视化与文字 / 背景 / 分割线。
每个色系按明度从浅到深编号（`-01` 最浅，数字越大越深），并附两种渐变色（`-14` 线性渐变、`-15` 径向渐变）。本主题为**浅色主题**：以白 / 浅灰作大面积背景，以深色作正文，红色为品牌强调主色。
---
#### 1.1.1 色系总览
| 类别 | 色系 | 用途定位 | 代码前缀 |
|------|------|----------|----------|
| 主色 | 渐红系 | 品牌主色、强调操作、警示与错误 | ZS-001 |
| 主色 | 渐蓝系 | 信息、链接、次级操作 | ZS-002 |
| 辅色 | 渐橙系 | 警告、进行中、提示标签 | FS-001 |
| 辅色 | 渐绿系 | 成功、在线、通过状态 | FS-002 |
| 辅色 | 渐青系 | 数据高亮、图表、辅助信息 | FS-003 |
| 辅色 | 中性灰系 | 背景、文字、图标、分割线 | FS-004 |
> 每个色系内：`-01 ~ -03` 为**浅色**（用于大面积底色）；`-04 ~ -09` 为**中亮色**（用于标签、图表、提示等）；`-10` 及以后为**深色**（用于小面积按钮、图标等）；`-14 / -15` 为渐变色（用于特殊装饰性小面积底色）。
---
#### 1.1.2 主色 · 渐红系（ZS-001）
品牌主色系。用于主操作按钮、重要强调、错误与危险告警。
| 编号 | 色值 | 明度分组 | 说明 |
|------|------|----------|------|
| ZS-001 | `#CF1322` | 深色 | 品牌代表红（默认主色基准） |
| ZS-001-01 | `#FEFAFA` | 浅色 | 极浅红，大面积底色 |
| ZS-001-02 | `#FEF6F6` | 浅色 | 浅红底色 |
| ZS-001-03 | `#FEEDED` | 浅色 | 浅红底色 / 错误背景 |
| ZS-001-04 | `#FDDADC` | 中亮色 | — |
| ZS-001-05 | `#FCB5B9` | 中亮色 | — |
| ZS-001-06 | `#FA9196` | 中亮色 | — |
| ZS-001-07 | `#F86C73` | 中亮色 | 浅红 Tag / 图表 |
| ZS-001-08 | `#F74750` | 中亮色 | — |
| ZS-001-09 | `#F5222D` | 中亮色 | **标准红**，主按钮 / 图标 |
| ZS-001-10 | `#BC0D1E` | 深色 | 深红，Hover |
| ZS-001-11 | `#A8071A` | 深色 | 深红，Active / Press |
| ZS-001-12 | `#820014` | 深色 | 极深红 |
| ZS-001-13 | `#5C0011` | 深色 | 最深红 |
| ZS-001-14 | `#F5222D → #A8071A` | 线性渐变 | 装饰底色 |
| ZS-001-15 | `#F86C73 → #F5222D` | 径向渐变 | 装饰底色 |
---
#### 1.1.3 主色 · 渐蓝系（ZS-002）
用于信息提示、链接、次级按钮与图表。
| 编号 | 色值 | 明度分组 | 说明 |
|------|------|----------|------|
| ZS-002 | `#0062D9` | 深色 | 蓝色代表色（基准） |
| ZS-002-01 | `#F9FCFF` | 浅色 | 极浅蓝，大面积底色 |
| ZS-002-02 | `#F4F9FF` | 浅色 | 浅蓝底色 |
| ZS-002-03 | `#EAF4FF` | 浅色 | 浅蓝底色 / 信息背景 |
| ZS-002-04 | `#D4E9FF` | 中亮色 | — |
| ZS-002-05 | `#AAD2FF` | 中亮色 | — |
| ZS-002-06 | `#80BCFF` | 中亮色 | — |
| ZS-002-07 | `#55A6FE` | 中亮色 | 浅蓝 Tag / 图表 |
| ZS-002-08 | `#2B8FFE` | 中亮色 | — |
| ZS-002-09 | `#0079FE` | 中亮色 | **标准蓝**，链接 / 信息主色 |
| ZS-002-10 | `#0056C6` | 深色 | 深蓝，Hover |
| ZS-002-11 | `#004AB3` | 深色 | 深蓝，Active |
| ZS-002-12 | `#00368C` | 深色 | 极深蓝 |
| ZS-002-13 | `#002466` | 深色 | 最深蓝 |
| ZS-002-14 | `#0079FE → #004AB3` | 线性渐变 | 装饰底色 |
| ZS-002-15 | `#55A6FE → #0079FE` | 径向渐变 | 装饰底色 |
---
#### 1.1.4 辅色 · 渐橙系（FS-001）
用于警告、进行中、待处理等中性偏提醒状态。
| 编号 | 色值 | 明度分组 | 说明 |
|------|------|----------|------|
| FS-001 | `#D97B00` | 深色 | 橙色代表色（基准） |
| FS-001-01 | `#FFFCF9` | 浅色 | 极浅橙，大面积底色 |
| FS-001-02 | `#FFFAF4` | 浅色 | 浅橙底色 |
| FS-001-03 | `#FFF6EA` | 浅色 | 浅橙底色 / 警告背景 |
| FS-001-04 | `#FFEED4` | 中亮色 | — |
| FS-001-05 | `#FFDDAA` | 中亮色 | — |
| FS-001-06 | `#FFCC80` | 中亮色 | — |
| FS-001-07 | `#FFBB55` | 中亮色 | 浅橙 Tag / 图表 |
| FS-001-08 | `#FFAA2B` | 中亮色 | — |
| FS-001-09 | `#FF9900` | 中亮色 | **标准橙**，警告主色 |
| FS-001-10 | `#C66D00` | 深色 | 深橙，Hover |
| FS-001-11 | `#B35F00` | 深色 | 深橙，Active |
| FS-001-12 | `#8C4600` | 深色 | 极深橙 |
| FS-001-13 | `#663000` | 深色 | 最深橙 |
| FS-001-14 | `#FF9900 → #B35F00` | 线性渐变 | 装饰底色 |
| FS-001-15 | `#FFBB55 → #FF9900` | 径向渐变 | 装饰底色 |
---
#### 1.1.5 辅色 · 渐绿系（FS-002）
用于成功、在线、通过、已完成等正向状态。
| 编号 | 色值 | 明度分组 | 说明 |
|------|------|----------|------|
| FS-002 | `#1EB07F` | 深色 | 绿色代表色（基准） |
| FS-002-01 | `#FAFEFD` | 浅色 | 极浅绿，大面积底色 |
| FS-002-02 | `#F6FDFB` | 浅色 | 浅绿底色 |
| FS-002-03 | `#EEFCF7` | 浅色 | 浅绿底色 / 成功背景 |
| FS-002-04 | `#DCF8EE` | 中亮色 | — |
| FS-002-05 | `#BAF1DD` | 中亮色 | — |
| FS-002-06 | `#97EBCD` | 中亮色 | — |
| FS-002-07 | `#74E4BC` | 中亮色 | 浅绿 Tag / 图表 |
| FS-002-08 | `#52DDAB` | 中亮色 | — |
| FS-002-09 | `#2FD69A` | 中亮色 | **标准绿**，成功主色 |
| FS-002-10 | `#189D72` | 深色 | 深绿，Hover |
| FS-002-11 | `#118A65` | 深色 | 深绿，Active |
| FS-002-12 | `#07634B` | 深色 | 极深绿 |
| FS-002-13 | `#043D30` | 深色 | 最深绿 |
| FS-002-14 | `#2FD69A → #118A65` | 线性渐变 | 装饰底色 |
| FS-002-15 | `#74E4BC → #2FD69A` | 径向渐变 | 装饰底色 |
---
#### 1.1.6 辅色 · 渐青系（FS-003）
用于数据高亮、图表配色、辅助信息标识。
| 编号 | 色值 | 明度分组 | 说明 |
|------|------|----------|------|
| FS-003 | `#2F9ACC` | 深色 | 青色代表色（基准） |
| FS-003-01 | `#FBFDFE` | 浅色 | 极浅青，大面积底色 |
| FS-003-02 | `#F7FCFE` | 浅色 | 浅青底色 |
| FS-003-03 | `#EFFAFE` | 浅色 | 浅青底色 |
| FS-003-04 | `#E0F5FD` | 中亮色 | — |
| FS-003-05 | `#C1EBFB` | 中亮色 | — |
| FS-003-06 | `#A2E1F9` | 中亮色 | — |
| FS-003-07 | `#83D7F7` | 中亮色 | 浅青 Tag / 图表 |
| FS-003-08 | `#64CDF5` | 中亮色 | — |
| FS-003-09 | `#45C3F3` | 中亮色 | **标准青**，数据高亮主色 |
| FS-003-10 | `#2788B9` | 深色 | 深青，Hover |
| FS-003-11 | `#1E76A6` | 深色 | 深青，Active |
| FS-003-12 | `#115580` | 深色 | 极深青 |
| FS-003-13 | `#0B3959` | 深色 | 最深青 |
| FS-003-14 | `#45C3F3 → #1E76A6` | 线性渐变 | 装饰底色 |
| FS-003-15 | `#83D7F7 → #45C3F3` | 径向渐变 | 装饰底色 |
---
#### 1.1.7 辅色 · 中性灰系（FS-004）
承载页面背景、正文、备注文字、图标与分割线。浅色主题的核心承载色系。
| 编号 | 色值 | 明度分组 | 说明 |
|------|------|----------|------|
| FS-004 | `#222222` | 深色 | 中性代表色（基准） |
| FS-004-01 | `#FFFFFF` | 浅色 | 纯白，页面 / 容器背景、白色文字 |
| FS-004-02 | `#FAFAFA` | 浅色 | 浅灰背景 |
| FS-004-03 | `#F5F5F5` | 浅色 | 浅灰背景 / 分割区底 |
| FS-004-04 | `#E8E8E8` | 中亮色 | 分割线 / 边框 |
| FS-004-05 | `#DBDBDB` | 中亮色 | 边框 / 禁用底 |
| FS-004-06 | `#C1C1C1` | 中亮色 | 禁用文字 / 占位符 |
| FS-004-07 | `#A6A6A6` | 中亮色 | 备注文字 / 图标 |
| FS-004-08 | `#7F7F7F` | 中亮色 | 次级文字 |
| FS-004-09 | `#575757` | 中亮色 | 次要正文 |
| FS-004-10 | `#3D3D3D` | 深色 | 正文加强 |
> 灰系用途分层：`01 ~ 03` 背景 / 白色文字 / 分割线；`04 ~ 09` 备注文字及图标；`10` 与基准 `#222222` 用于正文。
---
#### 1.1.8 功能色（主色 / 字体色 / 辅色 / 背景色）
从标准色系中提取，用于具体 UI 角色指定。
| 角色 | 色值 | 来源 |
|------|------|------|
| 主色（Primary） | `#F5222D` | ZS-001-09 |
| 主色 Hover | `#CF1322` | ZS-001 |
| 主色 Active | `#A8071A` | ZS-001-11 |
| 信息 / 链接色 | `#0079FE` | ZS-002-09 |
| 成功色 | `#2FD69A` | FS-002-09 |
| 警告色 | `#FF9900` | FS-001-09 |
| 错误色 | `#F5222D` | ZS-001-09 |
| 正文字体色 | `#222222` | FS-004 |
| 次级字体色 | `#575757` | FS-004-09 |
| 备注 / 占位字体色 | `#A6A6A6` | FS-004-07 |
| 禁用字体色 | `#C1C1C1` | FS-004-06 |
| 页面背景色 | `#FAFAFA` | FS-004-02 |
| 容器背景色 | `#FFFFFF` | FS-004-01 |
| 分割线 | `#E8E8E8` | FS-004-04 |
---
#### 1.1.9 小面积装饰色
用于图标点缀、徽标、少量强调，不用于大面积背景。
| 色值 | 来源 | 说明 |
|------|------|------|
| `#F5222D` | ZS-001-09 | 红色，危险 / 品牌徽标 |
| `#0079FE` | ZS-002-09 | 蓝色，信息点缀 |
| `#FF9900` | FS-001-09 | 橙色，提醒点缀 |
| `#2FD69A` | FS-002-09 | 绿色，在线点 |
| `#45C3F3` | FS-003-09 | 青色，数据点缀 |
---
#### 1.1.10 图表配色
> **以 §25.1 图表通用色序为准**。本小节给出的是从主 / 辅色提取的强调型色序，适用于需要突出对比的少量序列；柱状 / 饼 / 环 / 面积等多分类图表的标准柔和色序见 [05-图表](05-图表.md)（§25）。
**通用图表色序**（面积较大，如柱状图、折线图、饼图）：
| 序号 | 色值 | 来源 |
|------|------|------|
| 1 | `#F5222D` | ZS-001-09 |
| 2 | `#0079FE` | ZS-002-09 |
| 3 | `#FF9900` | FS-001-09 |
| 4 | `#2FD69A` | FS-002-09 |
| 5 | `#45C3F3` | FS-003-09 |
| 6 | `#FA9196` | ZS-001-06 |
| 7 | `#55A6FE` | ZS-002-07 |
| 8 | `#FFBB55` | FS-001-07 |
**小面积图表色序**（面积较小，如散点、小徽章、迷你图）：
| 序号 | 色值 | 来源 |
|------|------|------|
| 1 | `#F86C73` | ZS-001-07 |
| 2 | `#55A6FE` | ZS-002-07 |
| 3 | `#74E4BC` | FS-002-07 |
| 4 | `#FFBB55` | FS-001-07 |
| 5 | `#83D7F7` | FS-003-07 |
| 6 | `#A6A6A6` | FS-004-07 |
---
#### 1.1.11 CSS Token 建议
```css
:root {
/* 主色 · 渐红系 ZS-001 */
--zs-001: #CF1322;
--zs-001-01: #FEFAFA; --zs-001-02: #FEF6F6; --zs-001-03: #FEEDED;
--zs-001-04: #FDDADC; --zs-001-05: #FCB5B9; --zs-001-06: #FA9196;
--zs-001-07: #F86C73; --zs-001-08: #F74750; --zs-001-09: #F5222D;
--zs-001-10: #BC0D1E; --zs-001-11: #A8071A; --zs-001-12: #820014;
--zs-001-13: #5C0011;
/* 主色 · 渐蓝系 ZS-002 */
--zs-002: #0062D9;
--zs-002-01: #F9FCFF; --zs-002-02: #F4F9FF; --zs-002-03: #EAF4FF;
--zs-002-04: #D4E9FF; --zs-002-05: #AAD2FF; --zs-002-06: #80BCFF;
--zs-002-07: #55A6FE; --zs-002-08: #2B8FFE; --zs-002-09: #0079FE;
--zs-002-10: #0056C6; --zs-002-11: #004AB3; --zs-002-12: #00368C;
--zs-002-13: #002466;
/* 辅色 · 渐橙系 FS-001 */
--fs-001: #D97B00;
--fs-001-01: #FFFCF9; --fs-001-02: #FFFAF4; --fs-001-03: #FFF6EA;
--fs-001-04: #FFEED4; --fs-001-05: #FFDDAA; --fs-001-06: #FFCC80;
--fs-001-07: #FFBB55; --fs-001-08: #FFAA2B; --fs-001-09: #FF9900;
--fs-001-10: #C66D00; --fs-001-11: #B35F00; --fs-001-12: #8C4600;
--fs-001-13: #663000;
/* 辅色 · 渐绿系 FS-002 */
--fs-002: #1EB07F;
--fs-002-01: #FAFEFD; --fs-002-02: #F6FDFB; --fs-002-03: #EEFCF7;
--fs-002-04: #DCF8EE; --fs-002-05: #BAF1DD; --fs-002-06: #97EBCD;
--fs-002-07: #74E4BC; --fs-002-08: #52DDAB; --fs-002-09: #2FD69A;
--fs-002-10: #189D72; --fs-002-11: #118A65; --fs-002-12: #07634B;
--fs-002-13: #043D30;
/* 辅色 · 渐青系 FS-003 */
--fs-003: #2F9ACC;
--fs-003-01: #FBFDFE; --fs-003-02: #F7FCFE; --fs-003-03: #EFFAFE;
--fs-003-04: #E0F5FD; --fs-003-05: #C1EBFB; --fs-003-06: #A2E1F9;
--fs-003-07: #83D7F7; --fs-003-08: #64CDF5; --fs-003-09: #45C3F3;
--fs-003-10: #2788B9; --fs-003-11: #1E76A6; --fs-003-12: #115580;
--fs-003-13: #0B3959;
/* 辅色 · 中性灰系 FS-004 */
--fs-004: #222222;
--fs-004-01: #FFFFFF; --fs-004-02: #FAFAFA; --fs-004-03: #F5F5F5;
--fs-004-04: #E8E8E8; --fs-004-05: #DBDBDB; --fs-004-06: #C1C1C1;
--fs-004-07: #A6A6A6; --fs-004-08: #7F7F7F; --fs-004-09: #575757;
--fs-004-10: #3D3D3D;
/* 功能色（语义别名） */
--color-primary: var(--zs-001-09); /* #F5222D */
--color-primary-hover: var(--zs-001); /* #CF1322 */
--color-primary-active: var(--zs-001-11); /* #A8071A */
--color-link: var(--zs-002-09); /* #0079FE */
--color-success: var(--fs-002-09); /* #2FD69A */
--color-warning: var(--fs-001-09); /* #FF9900 */
--color-error: var(--zs-001-09); /* #F5222D */
--color-text: var(--fs-004); /* #222222 */
--color-text-secondary: var(--fs-004-09); /* #575757 */
--color-text-tertiary: var(--fs-004-07); /* #A6A6A6 */
--color-text-disabled: var(--fs-004-06); /* #C1C1C1 */
--color-bg-page: var(--fs-004-02); /* #FAFAFA */
--color-bg-container: var(--fs-004-01); /* #FFFFFF */
--color-border: var(--fs-004-04); /* #E8E8E8 */
}
```
---
## 2. 字体
字体规范分**大屏页面**与**后台系统**两套，分别对应可视化大屏与管理后台两类场景。
### 2.1 大屏页面字体规范
#### 2.1.1 中文字体：Noto Sans S Chinese
| 样式 | 使用场景 |
|------|----------|
| 24px Bold | 一级标题 |
| 24px Medium | 次要一级标题 |
| 22px Medium | 二级标题 |
| 22px Regular | 正文 |
| 20px Regular | 排版空间有限的正文 |
#### 2.1.2 数字字体：D-DIN
| 样式 | 使用场景 |
|------|----------|
| 32px Bold | 重要数据展示 |
| 32px Regular | 普通数据展示 |
| 26px Bold | 常规数据展示 |
| 26px Regular | 常规数据展示 |
#### 2.1.3 特殊数字：DS-Digital
| 样式 | 使用场景 |
|------|----------|
| 50px Bold | 大屏主数据展示 |
#### 2.1.4 表格数字：Arial
| 样式 | 使用场景 |
|------|----------|
| 20px Regular | 表格横纵轴数字 |
---
### 2.2 后台系统字体规范
#### 2.2.1 中文字体：Noto Sans S Chinese
| 样式 | 使用场景 |
|------|----------|
| 18px Bold | 导航、一级标题 |
| 18px Medium | 次要一级标题 |
| 16px Bold | 二级标题 |
| 16px Medium | 次要二级标题 |
| 16px Regular | 正文、按钮内部文字等 |
| 16px Light | 次要正文 |
#### 2.2.2 数字字体：D-DIN
| 样式 | 使用场景 |
|------|----------|
| 26px Bold | 重要数据展示 |
| 26px Regular | 普通数据展示 |
| 24px Bold | 常规数据展示（小） |
| 24px Regular | 常规数据展示（小） |
#### 2.2.3 LOGO 字体：DOUYUFont
| 样式 | 使用场景 |
|------|----------|
| 20px 文字样式 | 页面顶部系统名称 |
#### 2.2.4 表格数字：Arial
| 样式 | 使用场景 |
|------|----------|
| 16px Regular | 表格横纵轴数字 |
| 14px Regular | 表格横纵轴的数字（空间有限） |
---
## 3. 阴影
> 浅色主题采用**中性投影**（基于 FS-004 `#222222`）营造层级，避免使用彩色外发光。卡片以纯白 `#FFFFFF` 浮于浅灰页面背景 `#FAFAFA` 之上，靠投影与边框区分。
### 3.1 容器与卡片配色
#### 3.1.1 卡片（标题 + 操作）
白底卡片，标题在左、操作区在右（文字操作或图标操作）。
| 角色 | 色值 | 来源 |
|------|------|------|
| 卡片背景 | `#FFFFFF` | FS-004-01 |
| 卡片边框 | `#E8E8E8` | FS-004-04 |
| 卡片阴影 | `0 2px 8px rgba(34, 34, 34, 0.08)` | 基于 FS-004 中性投影 |
| 标题文字（16px Bold） | `#222222` | FS-004（正文色） |
| 操作按钮文字 | `#F5222D` | ZS-001-09（主色红，链接型操作） |
| 次级操作图标（✏️ / ⋯） | `#A6A6A6` | FS-004-07（备注图标色） |
#### 3.1.2 卡片新增（占位卡片）
虚线描边的"新增入口"卡片，用于引导用户添加内容。
| 角色 | 色值 | 来源 |
|------|------|------|
| 卡片背景 | `#FFFFFF` | FS-004-01 |
| 虚线边框 | `#DBDBDB` | FS-004-05 |
| 加号图标 | `#A6A6A6` | FS-004-07 |
| Hover 边框 | `#F5222D` | ZS-001-09（悬停时提示可点击） |
| Hover 加号 | `#F5222D` | ZS-001-09 |
#### 3.1.3 阴影投影规则
| 层级 | 阴影值 | 使用场景 |
|------|--------|----------|
| 一级阴影（卡片浮起） | `0 2px 8px rgba(34, 34, 34, 0.08)` | 普通卡片 |
| 二级阴影（hover / 强调） | `0 4px 16px rgba(34, 34, 34, 0.12)` | 卡片 hover、悬浮按钮、弹出层 |
| 三级阴影（弹窗 / Modal） | `0 8px 32px rgba(34, 34, 34, 0.16)` | Dialog、Drawer |
---
## 4. 圆角
### 4.1 圆角统一规范
| 元素 | 圆角值 | 说明 |
|------|--------|------|
| 按钮 | `2px` | 所有按钮（主 / 次要 / 默认 / 文本）统一使用 |
| 卡片 | `4px` | 内容卡片、标题+操作卡片、卡片新增占位 |
| 页面分栏框 | `4px` | 外层容器、分栏区域 |
| 输入框 / 选择器 | `2px` | 与按钮一致，保持表单内对齐 |
| Tag / Badge | `2px` | 与按钮一致 |
| Modal / Drawer | `4px` | 与卡片一致 |
---
## 6. 间距
> 全站以 `8px (0.5rem)` 为对照基准单位，划分"密 / 疏"两个层次。所有间距取值均来自下列阶梯，禁止使用非阶梯值（如 5px、13px）。
### 6.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 是"疏"的下限**，两者之间不应再插入自定义值。
### 6.2 使用原则
- **同层级一致**：同一布局层级内的间距必须使用同一阶值；多种取值会破坏节奏。
- **就近取阶**：相邻区块的间距尽量从相邻阶梯取值（如 `16px → 24px`），跨越过多阶（如 `8px → 56px`）会让视觉断裂。
- **密疏不混用**：一个组件内部全部用"密"，外部用"疏"，避免内 / 外间距颠倒。
- **优先 8 的倍数**：除最小阶 `4px` 外，所有阶皆为 8 的倍数，方便 4/8 网格对齐。
- **响应式按比例衰减**：移动端可整体降一阶（如 `24px → 16px`），但仍在阶梯内。
### 6.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 */
}
```
---
## 20. 语义状态色（统一约定）
> 进度、状态标签、表格状态、时间轴等大量组件共用同一套语义色。后续章节直接引用本表。
| 语义 | 文字色 | 浅底背景 | 实填背景 | 来源 |
|------|--------|----------|----------|------|
| 成功 / 完成（绿） | `#189D72` (FS-002-10) | `#EEFCF7` (FS-002-03) | `#2FD69A` (FS-002-09) | 渐绿系 |
| 警告 / 进行中（橙） | `#FF9900` (FS-001-09) | `#FFF6EA` (FS-001-03) | `#FF9900` (FS-001-09) | 渐橙系 |
| 错误 / 失败（红） | `#F5222D` (ZS-001-09) | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) | 渐红系 |
| 信息 / 等待（蓝） | `#0079FE` (ZS-002-09) | `#EAF4FF` (ZS-002-03) | `#0079FE` (ZS-002-09) | 渐蓝系 |
| 待更新（青） | `#45C3F3` (FS-003-09) | `#EFFAFE` (FS-003-03) | `#45C3F3` (FS-003-09) | 渐青系 |
| 未开始 / 中性（灰） | `#7F7F7F` (FS-004-08) | `#F5F5F5` (FS-004-03) | `#A6A6A6` (FS-004-07) | 中性灰系 |
---
---
> 返回 [规范目录](README.md)
frontend-web/docs/浅红色UI规范/02-按钮与表单.md
+314
View File
@@ -0,0 +1,314 @@
# 浅红色 UI 规范 · 二、按钮与表单输入
> 返回 [规范目录](README.md)　|　本篇：按钮 · 表单 · 输入框 · 选择按钮 · 标签输入框 · 上传
---
## 5. 按钮
> 全部圆角 `2px`，文字字号 `14px`，字体 Noto Sans S Chinese Regular。配色取自 ZS-001 主色红与 FS-004 中性灰。
### 5.1 按钮尺寸
| 规格 | 高度 | 内边距 | 使用场景 |
|------|------|--------|----------|
| 小 | `24px` | `0 8px` | 空间小的板块内部，如表格中、卡片标题等 |
| 正常 | `32px` | `0 14px` | 默认尺寸，所有常用按钮 |
### 5.2 按钮类型与配色
#### 5.2.1 主按钮（Primary）
> 一个操作区域只能有一个主按钮。
| 状态 | 背景 | 边框 | 文字 |
|------|------|------|------|
| 默认 | `#F5222D` (ZS-001-09) | — | `#FFFFFF` |
| Hover | `#CF1322` (ZS-001) | — | `#FFFFFF` |
| Active | `#A8071A` (ZS-001-11) | — | `#FFFFFF` |
| 失效 | `#A6A6A6` (FS-004-07) | — | `#FFFFFF` |
#### 5.2.2 次要按钮（Secondary / Outline-Primary）
重要度低于主按钮、高于默认按钮。红色描边 + 红色文字。
| 状态 | 背景 | 边框 | 文字 |
|------|------|------|------|
| 默认 | `#FFFFFF` | `#F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) |
| Hover | `#FEEDED` (ZS-001-03) | `#CF1322` (ZS-001) | `#CF1322` (ZS-001) |
| Active | `#FDDADC` (ZS-001-04) | `#A8071A` (ZS-001-11) | `#A8071A` (ZS-001-11) |
| 失效 | `#FFFFFF` | `#FCB5B9` (ZS-001-05) | `#FCB5B9` (ZS-001-05) |
#### 5.2.3 默认按钮（Default）
用于"取消 / 返回"等次要操作，与主按钮成对出现时主按钮在右。中性描边。
| 状态 | 背景 | 边框 | 文字 |
|------|------|------|------|
| 默认 | `#FFFFFF` | `#DBDBDB` (FS-004-05) | `#222222` (FS-004) |
| Hover | `#FAFAFA` (FS-004-02) | `#F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) |
| Active | `#F5F5F5` (FS-004-03) | `#CF1322` (ZS-001) | `#CF1322` (ZS-001) |
| 禁用 | `#F5F5F5` (FS-004-03) | `#E8E8E8` (FS-004-04) | `#C1C1C1` (FS-004-06) |
#### 5.2.4 文本按钮（Text）
用于表格操作、文件下载等。无背景与边框，靠文字色识别。
| 状态 | 文字 | 装饰 |
|------|------|------|
| 默认 | `#F5222D` (ZS-001-09) | 无下划线 |
| Hover | `#CF1322` (ZS-001) | 显示下划线（与文字同色） |
| Active | `#A8071A` (ZS-001-11) | 下划线 |
| 失效 | `#C1C1C1` (FS-004-06) | 无装饰 |
#### 5.2.5 图标按钮（Icon-only）
用于增强辨识度或节省空间。仅图标，无文字。
| 变体 | 背景 | 边框 | 图标颜色 |
|------|------|------|----------|
| 描边（默认） | `#FFFFFF` | `#DBDBDB` (FS-004-05) | `#575757` (FS-004-09) |
| 描边 Hover | `#FAFAFA` | `#F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) |
| 主色（填充） | `#F5222D` (ZS-001-09) | — | `#FFFFFF` |
| 主色 Hover | `#CF1322` (ZS-001) | — | `#FFFFFF` |
| 浅色（弱填充） | `#FEEDED` (ZS-001-03) | — | `#F5222D` (ZS-001-09) |
### 5.3 按钮组合
#### 5.3.1 文字 + 下拉按钮（含 ⌄）
| 形态 | 配色规则 |
|------|----------|
| 默认（Outline） | 沿用 §5.2.3 默认按钮，箭头 ⌄ 与文字同色 `#222222` |
| 主色（Filled） | 沿用 §5.2.1 主按钮，箭头 ⌄ 同步白色 `#FFFFFF` |
#### 5.3.2 图标 + 文字按钮（如 `+ 正常`）
| 形态 | 配色规则 |
|------|----------|
| 默认（Outline） | 沿用 §5.2.3，左侧图标颜色与文字一致 `#222222` |
| 主色（Filled） | 沿用 §5.2.1，左侧图标与文字一致 `#FFFFFF` |
#### 5.3.3 文本按钮 + 图标（"更多 »"、"展开 ⌄"、"下一页 »"、"« 上一页"、"收起 ^"）
| 角色 | 色值 |
|------|------|
| 文字 + 图标（默认） | `#F5222D` (ZS-001-09) |
| 文字 + 图标（Hover） | `#CF1322` (ZS-001) |
| 失效 | `#C1C1C1` (FS-004-06) |
> 图标可在文字前或后；多个文本按钮排成一行时，间距 `16px`，无分隔符。
#### 5.3.4 主按钮 + 默认按钮组合（如"确定 / 取消 / 返回"）
- **排列顺序**：默认按钮在左，主按钮在右（最右侧为主操作）
- **按钮间距**：`8px`
- **示例**：`[ 返回 ] [ 取消 ] [ 确定 ]`
- **配色**：主按钮沿用 §5.2.1，其余沿用 §5.2.3
### 5.4 其他按钮
#### 5.4.1 悬浮状态（Floating）
用于 Banner / 登录 / 视觉冲击强等展示场景。配色与主按钮一致，叠加阴影抬升。
| 状态 | 阴影 |
|------|------|
| 默认 | `0 2px 8px rgba(34, 34, 34, 0.08)`（§3.1.3 一级阴影） |
| Hover | `0 4px 16px rgba(34, 34, 34, 0.12)`（§3.1.3 二级阴影） |
| Active | 阴影消失，按下感 |
#### 5.4.2 加载中（Loading）
用于异步操作等待反馈。点击瞬间将按钮锁定，文字前显示旋转图标。
| 角色 | 色值 |
|------|------|
| 背景 | `#F5222D` (ZS-001-09) |
| 文字 | `#FFFFFF` |
| 加载图标 | `#FFFFFF`，旋转动画 `1.2s linear infinite` |
| 不可点击 | 鼠标 `cursor: not-allowed` |
> 与失效态的区别：失效是"不可操作"，加载是"操作进行中"——保留品牌主色，只是不可再次触发。
---
## 12. 表单（Form）
> 页面级表单可参照弹窗表单，**操作按钮置于左下角**。容器为白底卡片，标题下叠 `1px solid #E8E8E8` 分割线。
### 12.1 基础表单结构
| 元素 | 规格 / 配色 |
|------|-------------|
| 容器背景 | `#FFFFFF` (FS-004-01)，圆角 `4px` |
| 表单标题 | `16px Bold`，`#222222` (FS-004)，下叠 `1px solid #E8E8E8` |
| 字段标签（label） | `14px Regular`，`#575757` (FS-004-09)，左对齐 |
| 字段垂直间距 | `--spacing-3` (12px) |
| 输入控件 | 见 §13 输入框 |
| 操作按钮区 | 置于左下角，主按钮 + 默认按钮（§5.3.4），间距 `--spacing-2` (8px) |
### 12.2 开关（Switch）
| 状态 | 轨道背景 | 滑块 | 文字 |
|------|----------|------|------|
| 开（ON） | `#F5222D` (ZS-001-09) | `#FFFFFF` 圆点 | "开" `#FFFFFF` |
| 关（OFF） | `#DBDBDB` (FS-004-05) | `#FFFFFF` 圆点 | "关" `#A6A6A6` (FS-004-07) |
| 禁用 | `#E8E8E8` (FS-004-04) | `#FFFFFF` | `#C1C1C1` |
- 轨道高 `20px`，圆角全圆；切换过渡 `transform 160ms ease-out`
### 12.3 表格内报错（Table 报错）
行内可编辑表格的校验错误态。
| 元素 | 配色 |
|------|------|
| 表头背景 | `#FEEDED` (ZS-001-03) |
| 表头文字 | `#222222` (FS-004)，`14px Medium` |
| 行（默认） | 背景 `#FFFFFF`，底边 `1px solid #F5F5F5` (FS-004-03) |
| 行（hover / 选中） | 背景 `#FEF6F6` (ZS-001-02) |
| 正文文字 | `#222222` (FS-004) |
| 错误输入框边框 | `1px solid #F5222D` (ZS-001-09) |
| 单位后缀（如 `M`） | addon 背景 `#FAFAFA`，边框 `#DBDBDB`，文字 `#575757` |
| 错误提示气泡 | 背景 `#F5222D`，文字 `#FFFFFF` `12px`，圆角 `2px`，带向上箭头，定位于出错输入框下方 |
| 复选框（选中） | 勾选填充 `#F5222D`，对勾 `#FFFFFF` |
---
## 13. 输入框（Input）
> 字号 `16px`，高度 `32px`，圆角 `2px`，内边距 `0 12px`，背景 `#FFFFFF`。
### 13.1 基础状态
| 状态 | 边框 | 背景 | 文字 / 占位符 |
|------|------|------|--------------|
| 未填（默认） | `1px solid #DBDBDB` (FS-004-05) | `#FFFFFF` | 占位符 `#A6A6A6` (FS-004-07) |
| 聚焦（Focus） | `1px solid #F5222D` (ZS-001-09) | `#FFFFFF` | 文字 `#222222` |
| 已填 | `1px solid #DBDBDB` | `#FFFFFF` | 文字 `#222222` (FS-004) |
| 未填 · 禁用 | `1px solid #E8E8E8` (FS-004-04) | `#F5F5F5` (FS-004-03) | 占位符 `#C1C1C1` (FS-004-06)，`cursor: not-allowed` |
| 已填 · 禁用 | `1px solid #E8E8E8` | `#F5F5F5` | 文字 `#A6A6A6` |
| 错误（Error） | `1px solid #F5222D` | `#FFFFFF` | 文字 `#222222`，下方红色提示文字 `12px #F5222D` |
### 13.2 带操作 / 特殊输入框
| 类型 | 说明 | 配色 |
|------|------|------|
| 未填 / 已填 · 操作 | 尾部带操作图标（如 ⚙） | 图标 `#A6A6A6`，hover `#F5222D` |
| 密码 · 不可见 | 尾部带可见性切换 👁 | 图标 `#A6A6A6`，点击切换明 / 密文 |
| 前置标签 | 头部下拉（如 `http:// ▾`） | addon 背景 `#FAFAFA`，边框 `#DBDBDB`，文字 `#575757` |
| 后置标签 | 尾部下拉（如 `.com ▾`） | 同前置标签 |
| 前后置标签 | 头尾各一段 addon | 同上；输入区与 addon 共用一条外边框 |
---
## 14. 选择按钮（单选 / 多选式）
> 以按钮形态替代传统单选 / 复选，提升点击区域与辨识度。每组提供三种"已选"填充强度，可按对比需要选用；布局分**相连**（segmented）与**分离**两种。
### 14.1 选择按钮（基础）
| 状态 / 变体 | 背景 | 边框 | 文字 |
|------|------|------|------|
| 未选 | `#FFFFFF` | `1px solid #DBDBDB` (FS-004-05) | `#222222` (FS-004) |
| 已选 · 描边 | `#FFFFFF` | `1px solid #F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) |
| 已选 · 浅填 | `#FEEDED` (ZS-001-03) | `1px solid #FCB5B9` (ZS-001-05) | `#F5222D` (ZS-001-09) |
| 已选 · 实填 | `#F5222D` (ZS-001-09) | — | `#FFFFFF` |
| 禁用 | `#F5F5F5` (FS-004-03) | `1px solid #E8E8E8` | `#C1C1C1` (FS-004-06) |
- 高度 `32px`，内边距 `0 14px`，圆角 `2px`，字号 `14px`
- **相连布局**：按钮紧贴，仅最外两端圆角，相邻共用边框
- **分离布局**：按钮间距 `--spacing-2` (8px)，各自独立圆角
### 14.2 选择按钮（带统计）
在文案后附计数，如 `已选(230)`。配色完全沿用 §14.1，计数文字与主文字同色（实填态为 `#FFFFFF`）。
### 14.3 按钮式页签（带图标）
文案前带图标（如 `田`），用于视图 / 模式切换。
| 状态 / 变体 | 背景 | 边框 | 图标 + 文字 |
|------|------|------|-------------|
| 正常（未激活） | `#FFFFFF` | `1px solid #DBDBDB` | `#222222` |
| 激活 · 描边 | `#FFFFFF` | `1px solid #F5222D` | `#F5222D` |
| 激活 · 实填 | `#F5222D` (ZS-001-09) | — | `#FFFFFF` |
- 图标与文字间距 `--spacing-1` (4px)，其余规格同 §14.1
---
## 15. 标签输入框（Tag Input）
> 在输入框内以"标签 + 自由输入"混合录入，支持单行 / 多行，含字数统计。
### 15.1 规格
| 属性 | 取值 |
|------|------|
| 容器边框 | `1px solid #DBDBDB` (FS-004-05)，圆角 `2px` |
| 聚焦边框 | `1px solid #F5222D` (ZS-001-09) |
| 容器背景 | `#FFFFFF` |
| 内边距 | `--spacing-2` (8px) |
| 标签与标签间距 | `--spacing-1` (4px) |
| 右下角支持拖拽缩放（多行） | `resize: vertical` |
### 15.2 标签（Tag）配色
| 元素 | 色值 | 来源 |
|------|------|------|
| 标签背景 | `#F5F5F5` (FS-004-03) | — |
| 标签文字 | `#575757` (FS-004-09) | — |
| 关闭图标 `×` | `#A6A6A6` (FS-004-07) | hover `#F5222D` |
| 占位符（请输入） | `#A6A6A6` (FS-004-07) | — |
| 字数统计（如 `2/100`） | `#A6A6A6` (FS-004-07) | 超限时变 `#F5222D` |
> 折叠多标签时可用 `+N` 形式聚合（如 `+1 ×`），样式同普通标签。
---
## 16. 上传（Upload）
> 含单文件、批量上传、拖拽上传三种形态。操作按钮中"开始上传 / 上传"为主按钮，"取消"为默认按钮。
### 16.1 上传触发器
| 形态 | 配色 |
|------|------|
| 上传按钮（⬆ 上传文件） | 默认按钮（§5.2.3），含上传图标 |
| 选择文件输入 | 只读输入框（§13）+ 右侧"选择文件"默认按钮 |
| 提示文字 | `12px Regular`，`#A6A6A6` (FS-004-07)，如"支持 DOCX/ZIP/PDF，文件大小不超过 2MB" |
| 示例文件链接（下载 / 查看示例文件） | 文本按钮 `#F5222D` (ZS-001-09)，hover `#CF1322` |
### 16.2 拖拽区（Drop Zone）
| 属性 | 取值 |
|------|------|
| 背景 | `#FAFAFA` (FS-004-02) |
| 边框 | `1px dashed #DBDBDB` (FS-004-05) |
| 拖入高亮 | 边框 `1px dashed #F5222D` (ZS-001-09)，背景 `#FEF6F6` (ZS-001-02) |
| 提示文字（释放鼠标） | `#A6A6A6` (FS-004-07) |
### 16.3 文件列表与状态
列表表头：文件名 / 大小 / 状态 / 操作。各状态配色：
| 状态 | 图标 | 文字色 |
|------|------|--------|
| 上传成功 | ✓ 圆形，`#2FD69A` (FS-002-09) | `#189D72` (FS-002-10) |
| 文件格式有误 / 失败 | ❗ 圆形，`#F5222D` (ZS-001-09) | `#F5222D` |
| 上传中（如 上传 40%） | ⟳ 旋转，`#F5222D` (ZS-001-09) | `#575757` (FS-004-09) |
| 待上传 | 🕐 时钟，`#A6A6A6` (FS-004-07) | `#A6A6A6` |
| 操作列「删除」 | — | 文本按钮 `#A6A6A6`，hover `#F5222D` |
### 16.4 底部操作
`[ 取消 ]（默认按钮） [ 开始上传 ]（主按钮 #F5222D）`，间距 `--spacing-2` (8px)，右对齐。
---
---
> 返回 [规范目录](README.md)
frontend-web/docs/浅红色UI规范/03-导航.md
+495
View File
@@ -0,0 +1,495 @@
# 浅红色 UI 规范 · 三、导航
> 返回 [规范目录](README.md)　|　本篇：导航组件 · 面包屑 · 页头与分页 · 步骤条 · 页签与锚点
---
## 7. 导航组件
> 适用于"后台 / 控制台"类浅红主题界面。整体结构 = 顶部导航（红底）+ 二级导航（白底）+ 左侧分级菜单 + 多级下拉。颜色取自 ZS-001 主色红与 FS-004 中性灰。
### 7.1 顶部导航（Header · 红底）
#### 7.1.1 规格
| 属性 | 取值 |
|------|------|
| 高度 | `56px` |
| 左右 padding | `--spacing-4` (16px) |
| 背景 | `linear-gradient(90deg, #A8071A 0%, #CF1322 100%)`（ZS-001-11 → ZS-001） |
| LOGO 区切角装饰 | 叠深红斜切块 `#A8071A` (ZS-001-11)，`clip-path` 斜边 |
| 底边 | 无（与二级导航白底直接相接） |
| 文字基线 | `Noto Sans S Chinese`，垂直居中 |
#### 7.1.2 系统标题（LOGO + ******系统）
- 字号 `20px Bold`，颜色 `#FFFFFF`，字体 `DOUYUFont` 或 Noto Sans Medium
- LOGO 图标 `#FFFFFF`，置于左侧切角块上
#### 7.1.3 一级导航（中部主导航，红底白字）
| 状态 | 文字 | 背景 / 装饰 |
|------|------|------------|
| 默认 | `#FFFFFF` | `transparent` |
| Hover | `#FFFFFF` | 背景 `rgba(255, 255, 255, 0.12)` |
| 激活 | `#FFFFFF` | 底部 `2px solid #FFFFFF` 高亮线，背景 `rgba(255, 255, 255, 0.16)` |
- 字号 `16px Medium`，项间距 `--spacing-5` (24px)
#### 7.1.4 右侧工具区（图标 / 用户 / 退出）
| 元素 | 字号/尺寸 | 颜色 |
|------|----------|------|
| 工具图标（消息 / 通知等） | `16px` | `#FFFFFF`，hover `rgba(255,255,255,0.7)` |
| 用户名（如"李向前"） | `14px Regular` | `#FFFFFF` |
| 用户头像 | `28px` 圆形 | — |
| 退出图标 | `16px` | `#FFFFFF` |
- 元素间距 `--spacing-3` (12px)，整体右 padding `--spacing-4` (16px)
#### 7.1.5 用户下拉菜单（右上角）
白底面板，规格同 §7.4 下拉面板。
| 状态 | 背景 | 文字 / 图标 |
|------|------|-------------|
| 默认 | `transparent` | `#575757` (FS-004-09) |
| Hover / 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) |
> 项示例：用户中心 / 修改密码 / 退出；每项左侧带 16px 图标，图标色与文字同步。
### 7.2 二级导航（白底 Tab 行）
紧贴顶部导航下方的白底标签行。
#### 7.2.1 规格
| 属性 | 取值 |
|------|------|
| 高度 | `48px` |
| 背景 | `#FFFFFF` (FS-004-01) |
| 底边 | `border-bottom: 1px solid #E8E8E8` (FS-004-04) |
| 项间距 | `--spacing-6` (32px) |
| 字号 | `16px Medium` |
#### 7.2.2 状态配色
| 状态 | 文字 | 下划线 / 装饰 |
|------|------|--------------|
| 默认 | `#222222` (FS-004) | 无 |
| Hover | `#F5222D` (ZS-001-09) | 无 |
| 激活 | `#F5222D` (ZS-001-09) | 底部 `2px solid #F5222D`，含下拉箭头 `▾` 同色 |
| 失效 | `#C1C1C1` (FS-004-06) | 无 |
### 7.3 侧边栏（分级菜单）
#### 7.3.1 规格
| 属性 | 取值 |
|------|------|
| 宽度 | `200px`（展开）/ `64px`（折叠仅图标） |
| 背景 | `#FFFFFF` (FS-004-01) |
| 右边界 | `border-right: 1px solid #E8E8E8` (FS-004-04) |
| 项高度 | `40px` |
| 项左 padding | 二级 `--spacing-4` (16px)；三级 `--spacing-6` (32px) |
| 字号 | `16px Regular`（二级）/ `14px Regular`（三级） |
#### 7.3.2 二级菜单项配色
| 状态 | 背景 | 文字 | 图标 | 左侧指示条 |
|------|------|------|------|-----------|
| 默认 | `transparent` | `#222222` (FS-004) | `#A6A6A6` (FS-004-07) | 无 |
| Hover | `#FAFAFA` (FS-004-02) | `#F5222D` (ZS-001-09) | `#F5222D` | 无 |
| 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) | `#F5222D` | 左侧 `2px solid #F5222D` |
#### 7.3.3 三级菜单项配色（前缀 `-` 短横线）
| 状态 | 背景 | 文字 | 左侧指示条 |
|------|------|------|-----------|
| 默认 | `transparent` | `#575757` (FS-004-09) | 无 |
| Hover | `#FAFAFA` (FS-004-02) | `#F5222D` (ZS-001-09) | 无 |
| 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) | 左侧 `2px solid #F5222D` |
### 7.4 下拉菜单面板
#### 7.4.1 列表型面板（如二级导航的"浏览器容器 / 手机板卡容器…"）
| 属性 | 取值 |
|------|------|
| 背景 | `#FFFFFF` (FS-004-01) |
| 边框 | `1px solid #E8E8E8` (FS-004-04) |
| 阴影 | `0 4px 16px rgba(34, 34, 34, 0.12)`（§3.1.3 二级阴影） |
| 圆角 | `4px` |
| 内边距 | 上下 `--spacing-2` (8px) |
| 最小宽度 | `150px` |
| 行高 | `36px` |
| 状态 | 背景 | 文字 |
|------|------|------|
| 默认 | `transparent` | `#575757` (FS-004-09) |
| Hover / 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) |
| 失效 | `transparent` | `#C1C1C1` (FS-004-06) |
#### 7.4.2 卡片宫格型面板（一级导航的图标宫格下拉）
白底大面板内以网格陈列"图标 + 二级导航名"卡片。
| 角色 | 背景 | 图标 / 文字 |
|------|------|-------------|
| 卡片（默认） | `#FEF6F6` (ZS-001-02) | 图标 `#F5222D`，文字 `#575757` |
| 卡片（Hover） | `#FEEDED` (ZS-001-03) | 图标 / 文字 `#F5222D` |
| 卡片（激活 / 当前） | `#F5222D` (ZS-001-09) | 图标 / 文字 `#FFFFFF` |
| 属性 | 取值 |
|------|------|
| 卡片尺寸 | `80px × 72px`（自适应等分） |
| 卡片圆角 | `4px` |
| 卡片间距 | `--spacing-2` (8px) |
| 面板内边距 | `--spacing-4` (16px) |
| 面板阴影 | `0 8px 32px rgba(34, 34, 34, 0.16)`（§3.1.3 三级阴影） |
### 7.5 交互与动画
| 行为 | 动效 |
|------|------|
| 下拉面板展开 | `transform-origin: top; scaleY(0.95) → scaleY(1); opacity 0 → 1`，`200ms ease-out` |
| 展开箭头旋转 | `rotate(0 → 180deg)`，`200ms ease-out` |
| Hover 背景过渡 | `background-color 120ms ease-out` |
| 激活底部高亮线 | `width 0% → 100%`，`240ms ease-out` |
### 7.6 侧边栏布局变体
> 侧边栏宽度通常固定，按"是否分级 / 是否展开"分为四种形态。关键区分：**叶子节点选中**用实心红填充 + 白字 + 左侧红指示条；**父级（含子项的可展开项）选中**仅用红字 + 红图标，不填充。
#### 7.6.1 上下分级 · 收起（仅图标）
| 属性 | 取值 |
|------|------|
| 宽度 | `64px`，仅图标 |
| 图标项（默认） | 图标 `#A6A6A6`，背景 `transparent` |
| 图标项（激活） | 图标 `#FFFFFF`，背景 `#F5222D` (ZS-001-09) 圆角方块 `4px` |
| Hover 弹出浮层 | **深色浮层**：背景 `#3D3D3D` (FS-004-10)，圆角 `4px`，阴影 §3.1.3 三级 |
| 浮层内二级标题 | `14px Medium`，`#FFFFFF` |
| 浮层内三级项（前缀 `-`） | `14px Regular`，`#FFFFFF`；hover 背景 `rgba(255,255,255,0.1)` |
#### 7.6.2 上下分级 · 展开
完整宽度列表，二级为可展开组（`^ / ▾`），其下挂三级项。
| 层级 / 状态 | 背景 | 文字 / 图标 | 左侧指示条 |
|------|------|-------------|-----------|
| 二级（默认） | `transparent` | 文字 `#222222`、图标 `#A6A6A6` | 无 |
| 二级（展开 / 当前父级） | `transparent` | 文字 `#F5222D`、图标 `#F5222D` | 无 |
| 三级（默认，前缀 `-`） | `transparent` | `#575757` (FS-004-09) | 无 |
| 三级（选中 · 叶子） | `#F5222D` (ZS-001-09) | `#FFFFFF` | 左侧 `2px solid #F5222D` |
#### 7.6.3 只有二级标题 · 不分级
扁平列表，二级即叶子节点，无三级。
| 状态 | 背景 | 文字 / 图标 | 左侧指示条 |
|------|------|-------------|-----------|
| 默认 | `transparent` | 文字 `#222222`、图标 `#A6A6A6` | 无 |
| Hover | `#FAFAFA` (FS-004-02) | 文字 `#F5222D`、图标 `#F5222D` | 无 |
| 选中 | `#F5222D` (ZS-001-09) | `#FFFFFF` | 左侧 `2px solid #F5222D` |
#### 7.6.4 二级选中 · 分级（含四级浮层）
二级展开后选中三级，三级再向右弹出**白底四级浮层**。
| 角色 | 配色 |
|------|------|
| 三级选中（叶子） | 背景 `#F5222D`，文字 `#FFFFFF`，左侧 `2px solid #F5222D` |
| 四级浮层背景 | `#FFFFFF`，边框 `1px solid #E8E8E8`，阴影 §3.1.3 二级 |
| 四级项（默认） | `#575757` (FS-004-09) |
| 四级项（Hover） | 背景 `#FEEDED` (ZS-001-03)，文字 `#F5222D` |
| 四级项（选中） | 文字 `#F5222D`，左侧 `2px solid #F5222D` |
---
## 8. 面包屑（Breadcrumb）
> 用于标识当前页面在层级结构中的位置，并提供逐级返回与跳转。建议层级**不超过四级**。
### 8.1 顶部路径式（🏠 | 概况 / 总概况）
页面顶部的简版面包屑，靠 `/` 分隔。
| 元素 | 色值 | 来源 | 说明 |
|------|------|------|------|
| 首页图标 🏠 | `#A6A6A6` (FS-004-07) | — | hover `#F5222D` |
| 竖分隔 `\|` | `#E8E8E8` | FS-004-04 | 首页图标与路径间 |
| 父级路径文字 | `#575757` (FS-004-09) | — | 可点击，hover `#F5222D` |
| 路径分隔 `/` | `#C1C1C1` | FS-004-06 | — |
| 当前页文字 | `#222222` (FS-004) | — | `Medium`，不可点击 |
### 8.2 返回 + 路径式（含 ← 返回）
左侧"← 返回"按钮 + 竖分隔 + 文字路径。按层级展开：
```
一级: ← 返回 │ 现在位置
二级: ← 返回 │ 上一级位置 / 现在位置
三级: ← 返回 │ 上二级位置 / 上一级位置 / 现在位置
四级: ← 返回 │ 上三级位置 / 上二级位置 / 上一级位置 / 现在位置
```
| 元素 | 色值 | 来源 | 说明 |
|------|------|------|------|
| 返回箭头 ← + "返回" | `#F5222D` (ZS-001-09) | — | hover `#CF1322`，文本按钮态 |
| 竖分隔 `\|` | `#E8E8E8` | FS-004-04 | 返回与路径间 |
| 历史层级文字 | `#575757` (FS-004-09) | — | 可点击，hover `#F5222D` |
| 路径分隔 `/` | `#C1C1C1` | FS-004-06 | — |
| 当前位置文字 | `#222222` (FS-004) | — | `Medium`，不可点击 |
### 8.3 行为规则
- 点击「返回」按钮逐步向上返回一级。
- 点击文字路径，快速返回到该层级页面。
- 层级尽可能不超过四级；超出时中间层折叠为 `…`。
- 字号 `14px Regular`，元素间距 `--spacing-2` (8px)，竖分隔高度约 `12–14px`。
---
## 9. 页头与分页
### 9.1 页头（Page Header）
内容区顶部的标题区，底部叠一条 `1px solid #E8E8E8` (FS-004-04) 分割线。
| 变体 | 构成 | 配色 |
|------|------|------|
| 基础页头 | 页头标题 | 标题 `16px Bold #222222` (FS-004) |
| 页头 + 说明 | 标题 +（简要说明） | 说明 `14px Regular #A6A6A6` (FS-004-07) |
| 页头 + 说明 icon | 标题 + `?` 帮助图标 | 图标 `#A6A6A6`，hover `#F5222D` |
| 分 Tabs 页头 | 多个标题 Tab | 见 §9.2 |
### 9.2 分 Tabs 页头
横向页签形态，激活态红色下划线。
| 状态 | 文字 | 下划线 |
|------|------|--------|
| 默认 | `#222222` (FS-004) | 无 |
| Hover | `#F5222D` (ZS-001-09) | 无 |
| 激活 | `#F5222D` (ZS-001-09) | `2px solid #F5222D`，宽度与文字齐 |
| 失效 | `#C1C1C1` (FS-004-06) | 无 |
- 字号 `14px Medium`，项间距 `--spacing-5` (24px)，下划线与文字底部间距 `--spacing-2` (8px)
### 9.3 分页（Pagination）
#### 9.3.1 正常分页
`共 240 项 [1] 2 3 4 5 … 24 > 每页 [10 ▾] 条 前往 [ ] 页`
| 元素 | 默认 | Hover | 激活 | 失效 |
|------|------|-------|------|------|
| 总数 / 辅助文字（共N项 / 每页 / 条 / 前往 / 页） | `#575757` (FS-004-09) | — | — | — |
| 页码数字 | `#222222` (FS-004) | `#F5222D` (ZS-001-09) | 背景 `#F5222D` + 文字 `#FFFFFF` | `#C1C1C1` (FS-004-06) |
| 翻页箭头 `< >` | `#575757` (FS-004-09) | `#F5222D` | — | `#C1C1C1` |
| 省略号 `…` | `#A6A6A6` (FS-004-07) | — | — | — |
| 每页选择器 / 跳转输入框 | 边框 `#DBDBDB` (FS-004-05) | 边框 `#F5222D` | — | 边框 `#E8E8E8` |
- 页码项尺寸 `28px × 28px`，圆角 `2px`，激活态为实心红方块；项间距 `--spacing-1` (4px)
#### 9.3.2 精简分页
`共 1 项 < [1] / 10 >`
| 元素 | 色值 |
|------|------|
| 总数文字 | `#575757` (FS-004-09) |
| 当前页输入框 | 边框 `#DBDBDB`，文字 `#222222` |
| 总页数 `/ N` | `#A6A6A6` (FS-004-07) |
| 翻页箭头 `< >` | `#575757`，hover `#F5222D`，失效 `#C1C1C1` |
#### 9.3.3 导航式分页
仅"下一页 » / « 上一页"文本按钮，无页码。配色沿用 §5.3.3 文本按钮 + 图标：
| 状态 | 色值 |
|------|------|
| 默认 | `#F5222D` (ZS-001-09) |
| Hover | `#CF1322` (ZS-001) |
| 失效 | `#C1C1C1` (FS-004-06) |
---
## 10. 步骤条（Steps）
> 用于多步流程的进度指引。按布局分**横向**（弹窗 / 页面）与**纵向**两类。颜色取自 ZS-001 主色红与 FS-004 中性灰。
### 10.1 步骤节点（公共）
每个步骤由「指示圆 + 标题（可选描述）」组成。指示圆按状态切换形态：
| 状态 | 圆形外观 | 圆内符号 | 来源 |
|------|----------|----------|------|
| 已完成（Completed） | 描边圆 `2px solid #F5222D`，背景 `transparent` | `✓`（对勾，`#F5222D`） | ZS-001-09 |
| 当前（Current） | 实心圆，背景 `#F5222D` | 步骤数字，`#FFFFFF` | ZS-001-09 / 白 |
| 未开始（Upcoming） | 描边圆 `1px solid #C1C1C1`，背景 `transparent` | 步骤数字，`#A6A6A6` | FS-004-06 / FS-004-07 |
| 失效（Disabled） | 描边圆 `1px solid #E8E8E8`，背景 `transparent` | 步骤数字，`#C1C1C1` | FS-004-04 / FS-004-06 |
**指示圆规格**：
| 属性 | 取值 |
|------|------|
| 直径 | `24px` |
| 圆内字号 | `12px Bold`（D-DIN 或 Noto Sans Bold） |
| 对勾图标 | `12px`，居中 |
**标题与描述文字**：
| 元素 | 状态 | 字号 / 颜色 | 来源 |
|------|------|-------------|------|
| 标题 | 已完成 / 当前 | `14px Medium`，`#222222` | FS-004 |
| 标题 | 未开始 / 失效 | `14px Medium`，`#A6A6A6` → `#C1C1C1` | FS-004-07 → FS-004-06 |
| 描述 | 已完成 / 当前 | `12px Regular`，`#575757` | FS-004-09 |
| 描述 | 未开始 / 失效 | `12px Regular`，`#A6A6A6` → `#C1C1C1` | FS-004-07 → FS-004-06 |
**连接线（步骤之间）**：
| 类型 | 色值 | 来源 | 样式 |
|------|------|------|------|
| 已完成段 | `#F5222D` | ZS-001-09 | `1px dashed`（弹窗）/ `1px solid`（页面） |
| 未完成段 | `#C1C1C1` | FS-004-06 | `1px dashed` |
> 连接线在指示圆两侧水平居中（横向）或正下方垂直（纵向）；线两端与圆外缘留 `--spacing-1` (4px) 间隙。
### 10.2 弹窗步骤条（横向 · 描边圆为主）
用于 Modal / Drawer 内的紧凑步骤条。完成态用**描边 + 红色对勾**，避免在弹窗内过于抢眼。
```
( ✓ ) ┄┄┄ (●2) ┄┄┄ ( 3 ) ┄┄┄ ( 4 ) ┄┄┄ ( 5 )
标题 标题 标题 标题 标题
(描述) (描述) (描述) (描述) (描述)
```
| 属性 | 取值 |
|------|------|
| 容器水平 padding | `--spacing-5` (24px) |
| 指示圆 → 标题间距 | `--spacing-2` (8px) |
| 标题 → 描述间距 | `--spacing-1` (4px) |
| 连接线 | `1px dashed`，完成段 `#F5222D`，未完成段 `#C1C1C1` |
| 文字对齐 | 标题、描述居中于指示圆下方 |
| 两种变体 | 仅标题 / 标题 + 描述 |
### 10.3 页面步骤条（横向 · 实心圆 + 自定义首项标题）
用于页面级向导（如「新建集群」）。完成态连接线改为**实线**，首步标题可显示具体名称。
```
(✓) ──── (●2) ┄┄┄ ( 3 ) ┄┄┄ ( 4 ) ┄┄┄ ( 5 )
新建集群 标题 标题 标题 标题
(描述文本) (描述文本) (描述文本) (描述文本) (描述文本)
```
| 维度 | 弹窗步骤条 | 页面步骤条 |
|------|-----------|-----------|
| 完成态圆形 | 描边圆 + 红色对勾 | 描边圆 + 红色对勾（同） |
| 完成段连接线 | `1px dashed #F5222D` | `1px solid #F5222D` |
| 第一项 | 通用「标题」占位 | 可显示具体名称（自定义文案） |
### 10.4 纵向步骤条
用于侧栏 / 详情页内的纵向流程指引。两种变体——「仅标题」与「标题 + 描述」。
```
仅标题: 标题 + 描述:
(✓) 新建集群 (✓) 新建集群
┊ 描述文本描述
(●2) 标题 ┊
┊ (●2) 标题
( 3 ) 标题 描述文本描述
┊ ┊
( 4 ) 标题 ( 3 ) 标题
描述文本描述
```
| 属性 | 取值 |
|------|------|
| 指示圆 → 标题水平间距 | `--spacing-2` (8px) |
| 节点垂直间距（仅标题） | `--spacing-5` (24px)，圆心到圆心 |
| 节点垂直间距（标题 + 描述） | `--spacing-6` (32px)，圆心到圆心 |
| 标题 → 描述间距 | `--spacing-1` (4px) |
| 连接线位置 | 上下指示圆正下方垂直，居中于圆心 |
| 连接线样式 | `1px dashed`，完成段 `#F5222D`，未完成段 `#C1C1C1` |
| 文字对齐 | 标题与描述左对齐 |
### 10.5 交互与动画
| 行为 | 动效 |
|------|------|
| 步骤切换（next） | 当前圆 `background: transparent → #F5222D`，`200ms ease-out`；上一步圆 `border-color: #C1C1C1 → #F5222D`，再 `200ms` 切换为对勾图标淡入 |
| 连接线进度 | 完成段 `width 0% → 100%`，`240ms ease-out` |
---
## 11. 页签与锚点
> 共用主色红指示当前位置：页签用于同层级内容切换，锚点用于长页面内章节跳转。
### 11.1 页签（Tabs）
#### 11.1.1 横向页签（下划线 · 横向）
| 状态 | 文字 | 下划线 |
|------|------|--------|
| 默认 | `#222222` (FS-004) | 无 |
| Hover | `#F5222D` (ZS-001-09) | 无 |
| 激活 | `#F5222D` (ZS-001-09) | `2px solid #F5222D`，宽度与文字齐 |
| 失效 | `#C1C1C1` (FS-004-06) | 无 |
- 字号 `14px Medium`，项间距 `--spacing-5` (24px)，下划线与文字底部间距 `--spacing-2` (8px)
- 容器底边叠一条 `1px solid #E8E8E8` (FS-004-04) 基线，激活高亮线压在其上
#### 11.1.2 纵向页签（下划线 · 纵向）
| 状态 | 文字 | 右侧指示线 |
|------|------|-----------|
| 默认 | `#222222` (FS-004) | 无 |
| Hover | `#F5222D` (ZS-001-09) | 无 |
| 激活 | `#F5222D` (ZS-001-09) | 右侧 `2px solid #F5222D`，高度与文字齐 |
| 失效 | `#C1C1C1` (FS-004-06) | 无 |
- 字号 `14px Medium`，项高度 `32px`，项间距 `--spacing-2` (8px)
- 容器右边叠一条 `1px solid #E8E8E8` 基线，激活指示线压在其上
### 11.2 锚点（Anchor）
用于长内容页的章节快速跳转，支持一 / 二级缩进。
```
│ 一级
│ 一级 (active)
│ 二级
│ 二级
│ 一级
│ 一级
```
| 属性 | 取值 |
|------|------|
| 左侧基线 | `1px solid #E8E8E8` (FS-004-04) 通栏 |
| 项高度 | `32px` |
| 一级项左 padding | `--spacing-3` (12px) |
| 二级项左 padding | `--spacing-5` (24px) |
| 字号 | `14px Regular` |
| 状态 | 一级文字 | 二级文字 | 左侧指示条 |
|------|----------|----------|-----------|
| 默认 | `#222222` (FS-004) | `#A6A6A6` (FS-004-07) | 无 |
| Hover | `#F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) | 无 |
| 激活 | `#F5222D` (ZS-001-09) | — | 左侧 `2px solid #F5222D`，覆盖容器基线 |
- 二级项不单独支持激活态：选中二级时其父级一级显示激活态，指示条按父级位置渲染
---
---
> 返回 [规范目录](README.md)
frontend-web/docs/浅红色UI规范/04-数据展示.md
+308
View File
@@ -0,0 +1,308 @@
# 浅红色 UI 规范 · 四、数据展示
> 返回 [规范目录](README.md)　|　本篇：弹出式窗口 · 卡片 · 折叠面板 · 进度条 · 表格 · 标签 · 时间轴
---
## 17. 弹出式窗口（Modal / Dialog）
> 用于聚焦的多步表单 / 确认操作。内部可承载页签、步骤条、表单控件。
### 17.1 容器规格
| 属性 | 取值 |
|------|------|
| 背景 | `#FFFFFF` (FS-004-01)，圆角 `4px` |
| 阴影 | `0 8px 32px rgba(34, 34, 34, 0.16)`（§3.1.3 三级阴影） |
| 遮罩层 | `rgba(34, 34, 34, 0.45)`（基于 FS-004） |
| 标题区 | 左侧 `3px` 主色红竖条 `#F5222D` + 标题 `16px Bold #222222` |
| 关闭按钮 `×` | `#A6A6A6` (FS-004-07)，hover `#F5222D` |
| 内边距 | `--spacing-5` (24px) |
| 底部操作区 | 右对齐，主按钮在最右（§5.3.4） |
### 17.2 内部页签与步骤条
- 顶部页签沿用 §11.1 横向页签（Tab 激活红字 + 红下划线，基线 `#E8E8E8`）。
- 步骤条沿用 §10.2 弹窗步骤条（完成态红描边对勾、当前态红实心、未开始灰描边，连接线 `1px dashed`）。
### 17.3 表单控件补充（Modal 内常用）
| 控件 | 配色 |
|------|------|
| 必填星号 `*` | `#F5222D` (ZS-001-09)，置于 label 前 |
| 下拉选择（Select，`请选择 ▾`） | 同输入框（§13），箭头 `#A6A6A6`，聚焦边框 `#F5222D` |
| 日期 / 时间选择器（📅） | 输入框 + 日历图标 `#A6A6A6`；区间用"起 至 止"两段 |
| 文本区域（Textarea） | 同输入框，`resize: vertical`，最小高度约 `80px` |
| 数值 + 单位（如 `100 天`） | 输入框 + 尾部 addon（背景 `#FAFAFA`，边框 `#DBDBDB`，文字 `#575757`） |
| 复选框（Checkbox） | 未选边框 `#DBDBDB`；选中背景 `#F5222D` + 对勾 `#FFFFFF` |
| 错误态 | 控件边框 `1px solid #F5222D`，下方红色提示文字 `12px #F5222D`（如"输入表单内容报错"） |
---
## 18. 数据展示 · 卡片（Card）
> 用于陈列结构化信息（人物 / 媒体 / 群组等档案）。在 §3 卡片基础上扩展"分级信息卡片"。
### 18.1 卡片头部
| 元素 | 配色 |
|------|------|
| 类目竖条（标题前） | `3px` 主色红 `#F5222D` (ZS-001-09) |
| 标题（如「个体」「媒体」） | `16px Bold`，`#222222` (FS-004) |
| 关闭 `×` | `#A6A6A6` (FS-004-07)，hover `#F5222D` |
| 右上操作（查看档案） | 小尺寸主按钮 `#F5222D` + 白字（§5.1 小，含图标） |
### 18.2 标签 / 属性 Tag
| 类型 | 背景 | 文字 | 来源 |
|------|------|------|------|
| 人物属性 / 红色标签 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) | 主色红 |
| 立场 / 成功类（绿） | `#EEFCF7` (FS-002-03) | `#189D72` (FS-002-10) | 渐绿系 |
| 状态签（右上角强调） | `transparent` | `#F5222D` (ZS-001-09) | 主色红 |
| 话题标签（#话题） | `transparent` | `#F5222D` (ZS-001-09) | 主色红，`#` 前缀 |
- Tag 圆角 `2px`，内边距 `0 8px`，字号 `12px`
### 18.3 卡片内页签与信息行
| 元素 | 配色 |
|------|------|
| 页签（基本信息 / 线下活动 / 线上发声） | 激活 `#F5222D` + 红下划线；默认 `#222222`（§11.1.1） |
| 页签红点提示（•） | `#F5222D` (ZS-001-09)，标识有更新 |
| 信息项标签（国家/地区、职务…） | `#A6A6A6` (FS-004-07) |
| 信息项取值 | `#222222` (FS-004) |
| 来源平台图标（如 Facebook） | 平台原色（蓝 `#0079FE` 近似），不纳入主题强调色 |
---
## 19. 数据展示 · 折叠面板（Collapse）
> 用于长内容的收起 / 展开。含列表概览折叠、带图标折叠、手风琴折叠、信息流折叠四类。
### 19.1 列表概览折叠（含 + 图标变体）
| 状态 | 构成 | 配色 |
|------|------|------|
| 收起 | 标题 + 描述 + 右侧 `▾` | 标题 `#222222` (FS-004)、描述 `#A6A6A6` (FS-004-07)、箭头 `#A6A6A6` |
| 展开 | 上述 + 下方内容区 | 内容区背景 `#FAFAFA` (FS-004-02)，箭头旋转为 `^` |
| 属性 | 取值 |
|------|------|
| 容器边框 | `1px solid #DBDBDB` (FS-004-05)，圆角 `4px` |
| 头部内边距 | `--spacing-4` (16px) |
| 左侧图标（带图标变体） | 占位 `40px`，图标 `#A6A6A6` |
### 19.2 手风琴折叠（Accordion）
多面板同列堆叠，同一时刻通常仅展开一项。
| 元素 | 配色 |
|------|------|
| 项分隔 | `1px solid #E8E8E8` (FS-004-04) |
| 标题 | `#222222` (FS-004)，前置 `▾ / >` 箭头 `#A6A6A6` |
| 收起 / 展开 链接 | 文本按钮 `#F5222D` (ZS-001-09) |
| 展开正文 | `#575757` (FS-004-09)，背景 `#FFFFFF` |
### 19.3 信息流折叠（Feed）
用于资讯流条目的展开详情。
| 元素 | 配色 |
|------|------|
| 前置「标签」Tag | 背景 `#FEEDED` (ZS-001-03)，文字 `#F5222D` (ZS-001-09) |
| 条目标题 | `#222222` (FS-004)，`14px Medium` |
| 热度计数（🔥 6405） | 火苗图标 `#FF9900` (FS-001-09)，数字 `#575757` (FS-004-09) |
| 收起 / 展开 链接 + 箭头 | `#F5222D` (ZS-001-09) |
| 分节标题（【热点首发】/【应对建议】） | `#F5222D` (ZS-001-09)，`Medium` |
| 来源 / 作者行（社交媒体 \| 平台 \| @用户） | `#A6A6A6` (FS-004-07) |
| 外链 URL | `#0079FE` (ZS-002-09)，hover 下划线 |
| 日期 | `#A6A6A6` (FS-004-07) |
| 正文 | `#575757` (FS-004-09) |
| 缩略图 | 圆角 `2px`，间距 `--spacing-1` (4px) |
---
## 21. 数据展示 · 进度条（Progress）
### 21.1 标准进度条
| 属性 | 取值 |
|------|------|
| 轨道背景 | `#F5F5F5` (FS-004-03) |
| 轨道高度 | `8px`，圆角全圆 |
| 已完成段 | 按语义取色（§20）：成功绿 / 失败红 / 警告橙 |
| 百分比文字 | `#222222` (FS-004)，置于条右侧 |
| 末端状态图标 | 成功 ✓ `#2FD69A`；失败 ✗ `#F5222D`（橙色进行态可不带图标） |
### 21.2 小型进度条
放在较窄区域内（如表格单元格）。规格同 §21.1，仅尺寸缩小：
| 属性 | 取值 |
|------|------|
| 轨道高度 | `4px` |
| 百分比 / 图标 | 字号缩至 `12px`，图标 `12px` |
### 21.3 环形进度条
| 属性 | 取值 |
|------|------|
| 轨道环 | `#F5F5F5` (FS-004-03) |
| 进度环 | 按语义取色（§20），线宽 `6px`，圆头端点 |
| 中心主数字（如 `82.0%`） | `#222222` (FS-004)，D-DIN |
| 中心名称 | `12px Regular`，`#A6A6A6` (FS-004-07) |
> 进度环颜色按阈值映射（如低→绿、中→橙、高→红）由业务自定义，但必须取自 §20 语义色。
---
## 22. 数据展示 · 表格（Table）
### 22.1 结构规格
| 属性 | 取值 |
|------|------|
| 表头背景 | `#FFFFFF`（或浅红 `#FEF6F6` ZS-001-02 强调首行） |
| 表头文字 | `14px Medium`，`#222222` (FS-004) |
| 单元格文字 | `14px Regular`，`#222222` |
| 行高 | `48px` |
| 行分隔 | `1px solid #F5F5F5` (FS-004-03) |
| 行 Hover | 背景 `#FAFAFA` (FS-004-02) |
| 斑马纹（可选） | 偶数行 `#FAFAFA` (FS-004-02) |
| 复选框（选中） | 填充 `#F5222D` + 对勾 `#FFFFFF` |
### 22.2 状态列（圆点 + 文字）
| 文字 | 圆点色 | 来源 |
|------|--------|------|
| 普通 | `#2FD69A`（成功绿） | FS-002-09 |
| 异常 | `#F5222D`（错误红） | ZS-001-09 |
| 特殊 | `#FF9900`（警告橙） | FS-001-09 |
- 文字统一 `#222222` (FS-004)，圆点直径 `6px`，与文字间距 `--spacing-1` (4px)
### 22.3 整体状态列（状态标签）
使用 §23 浅底状态标签：进行中（橙）/ 已完成（绿）/ 已失败（红）。
### 22.4 操作列
文本按钮 + 图标，沿用 §5.3.3：查看 / 配置 等均为 `#F5222D` (ZS-001-09)，hover `#CF1322`，按钮间距 `--spacing-3` (12px)。
### 22.5 单元格内编辑报错
可编辑单元格（如 `100 [M]`）校验失败：输入框边框 `1px solid #F5222D`，红色气泡提示"Table 内输入报错"（背景 `#F5222D`、白字 `12px`，§12.3 同款）。
---
## 23. 数据展示 · 标签（Tag / Badge）
### 23.1 标签形式
| 形式 | 用途 | 配色 |
|------|------|------|
| 文字按钮标签 | 重点突出标记属性 | 三种强度：灰底 `#F5F5F5`/`#575757`；浅红底 `#FEEDED`/`#F5222D`；实红 `#F5222D`/`#FFFFFF` |
| 图标 + 文字按钮标签 | 增强辨识度 | 灰底 + 平台原色图标（如 Twitter 蓝）；或实红 `#F5222D` + 白字 + ✓ |
| 圆点 + 文字标签 | 属性多 / 复杂、无需突出 | 圆点按语义色（普通绿 / 特殊橙 / 异常红），文字 `#222222` |
| 动态标签 | 可增删（筛选列表、关键词） | 已加：灰底 `#F5F5F5` + `×`；新增入口：虚线框 `#DBDBDB` + "+ 标签" |
- 标签圆角 `2px`，高度 `24px`，内边距 `0 8px`，字号 `12px`
### 23.2 状态标签（Status Badge）
四种呈现风格，颜色全部取自 §20 语义状态色：
| 风格 | 说明 |
|------|------|
| ① 浅底彩字 | 浅底背景 + 语义文字色（默认推荐，弱干扰） |
| ② 实填白字 | 语义实填背景 + 白字（强调态，用于重点状态） |
| ③ 图标 + 浅底彩字 | ① 基础上前置语义图标 |
| ④ 图标 + 彩字（无底） | 仅图标 + 文字，最轻量 |
常见状态与语义映射：
| 状态 | 语义 / 取色 |
|------|-------------|
| 未开始 / 就绪 | 中性灰 |
| 等待中 / 等待 | 信息蓝 |
| 进行中 / 进行 | 警告橙 |
| 已完成 / 成功 | 成功绿 |
| 已失败 / 失败 | 错误红 |
| 待更新 / 待更 | 青 |
- 图标（②④ 风格）：就绪 ⊖、等待 ⊗、进行 🕐、成功 ✓、失败 ✗、待更 🕐，颜色与文字同步
---
## 24. 数据展示 · 时间轴（Timeline）
> 用于按时间顺序陈列事件。分纵向（基础 / 卡片 / 长文本）与横向两种主轴方向，另含全局缩略时间轴。
### 24.1 纵向时间轴点（基础）
| 元素 | 配色 |
|------|------|
| 轴线 | `1px solid #E8E8E8` (FS-004-04) 或虚线 |
| 最新 / 当前节点 | 空心红圆环 `2px solid #F5222D` (ZS-001-09)，背景 `#FFFFFF` |
| 历史节点 | 实心红点 `#F5222D` (ZS-001-09)，直径 `8px` |
| 事件标题 | `14px Medium`，`#222222` (FS-004) |
| 时间文字 | `12px Regular`，`#A6A6A6` (FS-004-07) |
### 24.2 卡片式时间轴点
节点内容置于浅灰卡片中。
| 元素 | 配色 |
|------|------|
| 卡片背景 | `#FAFAFA` (FS-004-02)，圆角 `4px` |
| 卡片内分隔 | `1px solid #E8E8E8` |
| 正文标签（如"安全状况："） | `#575757` (FS-004-09) |
| 正向取值（如"今日无安全风险"） | `#189D72`（成功绿，FS-002-10） |
### 24.3 横向长文本时间轴
横轴双向箭头，节点上下交错分布。
| 元素 | 配色 |
|------|------|
| 主轴线 + 双向箭头 | `#222222` (FS-004) |
| 上方节点标记 + 日期 | 红色 `#F5222D` (ZS-001-09)，`▼` 标记 |
| 下方节点标记 + 日期 | 橙色 `#FF9900` (FS-001-09)，`▲` 标记 |
| 节点正文 | `#575757` (FS-004-09)，`14px Regular` |
> 上 / 下用红 / 橙双色区分两类事件或交替排布，避免拥挤。
### 24.4 纵向长文本时间轴
带头像、状态标签、富文本与附件的纵向时间流。
| 元素 | 配色 |
|------|------|
| 轴线 | `1px dashed #DBDBDB` (FS-004-05) |
| 日期分组吸顶标签 | 背景 `#A6A6A6`(FS-004-07) 或 `#F5F5F5`，文字 `#FFFFFF` / `#575757`，圆角 `2px` |
| 节点圆点 | 红 `#F5222D`（重点）/ 浅红 `#FCB5B9`（次要） |
| 状态标签 | 浅底状态标签：计划（橙 `#FFF6EA`/`#FF9900`）、已成行（红 `#FEEDED`/`#F5222D`）（§23.2 ①） |
| 人物名 | `14px Regular`，`#222222` |
| 时间 | `12px`，`#A6A6A6` (FS-004-07) |
| 正文 | `#575757` (FS-004-09) |
| 地址（📍 地址） | 图标 + 文字 `#A6A6A6` |
| 缩略图 | 圆角 `2px`，间距 `--spacing-1` (4px) |
### 24.5 全局时间轴（缩略 / 范围选择）
页面顶部用于框选时间范围的缩略轴。
| 元素 | 配色 |
|------|------|
| 刻度轴背景 | 灰阶渐变 `linear-gradient(90deg, #7F7F7F, #DBDBDB)`（FS-004-08 → FS-004-05） |
| 刻度文字（如 04-03） | `#FFFFFF`，`12px` |
| 拖拽游标（handle） | `#FFFFFF` 竖条，带轻微阴影 |
| 选区刷选框（brush） | 边框 `1px solid #F5222D`，填充 `rgba(245, 34, 45, 0.08)`（浅红 ZS-001-09 8%） |
| 选区内迷你面积图 | 描边 `#F5222D`，填充浅红渐变 |
---
---
> 返回 [规范目录](README.md)
frontend-web/docs/浅红色UI规范/05-图表.md
+90
View File
@@ -0,0 +1,90 @@
# 浅红色 UI 规范 · 五、图表
> 返回 [规范目录](README.md)　|　本篇：图表通用色序 · 公共元素 · 柱状/折线/甘特/饼环
---
## 25. 图表（Charts）
> 图表配色以**柔和色系**为主（保证大面积色块不刺眼），强调线 / 排行榜可叠加主色红渐变。多分类图表的色序按"用几色取几色"，从下表对应行从左到右取用。
### 25.1 图表通用色序（权威）
> 如需更多色值，请 UI 设计师按系统整体风格在同色系内扩展。
| 分类数 | 色序（从左到右） |
|--------|------------------|
| 三色 | `#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`(ZS-001-06 浅红) / `#FCA58F`·`#FDB887`(橙红过渡) / `#FFCC80`(FS-001-06 浅橙) / `#DCD69A`(黄绿过渡) / `#BAE1B3`·`#97EBCD`(FS-002-06 浅绿) / `#9EE4EA`·`#A2E1F9`(FS-003-06 浅青) / `#80BCFF`(ZS-002-06 浅蓝)
- 取色原则：序列从暖（红）到冷（蓝）渐变排布，相邻类别对比清晰
### 25.2 图表公共元素
| 元素 | 配色 |
|------|------|
| 坐标轴线 | `1px solid #E8E8E8` (FS-004-04) |
| 网格线 | `1px dashed #F5F5F5` (FS-004-03) |
| 轴刻度文字 | `12px`，`#A6A6A6` (FS-004-07) |
| 图例文字 | `12px`，`#575757` (FS-004-09)，前置色块圆角 `2px` |
| Tooltip 浮层 | 背景 `rgba(34,34,34,0.85)`（FS-004），文字 `#FFFFFF` `12px`，圆角 `4px` |
| 数值标注气泡 | 背景 `#7F7F7F` (FS-004-08)，白字（如悬停值 `59.32`） |
| 高亮选区（band） | 填充 `rgba(245,34,45,0.08)`，中线 `1px dashed #F5222D` (ZS-001-09) |
### 25.3 柱状图（Bar）
| 形态 | 配色 |
|------|------|
| 堆叠柱 / 分组柱 | 各序列按 §25.1 取色（如 Paper 绿 `#97EBCD`、Project 橙 `#FFCC80`、Book 红 `#FA9196`） |
| 单序列柱 / 条形 | 主序列 `#FA9196`（浅红） |
| 排行榜（TOP 渐变条） | 进度条填充 `linear-gradient(90deg, #F5222D 0%, #FF9900 100%)`（红→橙），轨道 `#F5F5F5`，名称 `#222222`、数值 `#222222` 右对齐 |
- 柱体圆角 `2px`，柱间距按类目自适应
### 25.4 折线图（Line / Area）
| 元素 | 配色 |
|------|------|
| 主折线 | `#F5222D` (ZS-001-09)，线宽 `2px` |
| 面积填充 | `linear-gradient(180deg, rgba(245,34,45,0.15), rgba(245,34,45,0))` |
| 数据点 | 描边 `#F5222D` + 白色填充，悬停放大并实心 |
| 多序列线 | 用饱和主色保证细线可辨：红 `#F5222D` / 蓝 `#0079FE` / 橙 `#FF9900` / 绿 `#2FD69A` |
| 涨跌双色线 | 上行 `#F5222D`（红）/ 下行 `#2FD69A`（绿） |
| 堆叠面积 | 各层按 §25.1 柔和色 + 各自浅色渐变填充 |
| 悬停辅助线 + tooltip | 竖虚线 `#F5222D`，tooltip 见 §25.2（如"异常率 12.3%"） |
### 25.5 甘特图（Gantt）
| 元素 | 配色 |
|------|------|
| 行背景斑马纹 | 浅红 `#FEF6F6` (ZS-001-02) 与 `#FFFFFF` 交替 |
| 任务条 | 按 §25.1 取色（每类任务一色），圆角 `2px`，末端可带箭头 |
| 网格线 | `1px solid #F5F5F5` (FS-004-03) |
| 时间轴 / 月份标签 | `12px`，`#A6A6A6` (FS-004-07) |
| 图例 | 圆点 + 文字，圆点取对应任务色，文字 `#575757` |
### 25.6 饼图 / 环形图（Pie / Donut）
支持三环至八环（即 3~8 个分类），扇区按 §25.1 对应行取色。
| 元素 | 配色 |
|------|------|
| 扇区 | §25.1 通用色序 |
| 中心主数字（如 `34801`） | `#222222` (FS-004)，D-DIN |
| 中心说明（XXX总数） | `12px`，`#A6A6A6` (FS-004-07) |
| 引导线 + 标签 | 引导线同扇区色，标签文字 `#575757` (FS-004-09)，百分比同行 |
| 扇区间隙 | `2px` 白色描边分隔，环宽适中（甜甜圈留中心空 ≥ 50%） |
---
---
> 返回 [规范目录](README.md)
frontend-web/docs/浅红色UI规范/06-页面与布局.md
+121
View File
@@ -0,0 +1,121 @@
# 浅红色 UI 规范 · 六、页面与布局
> 返回 [规范目录](README.md)　|　本篇：统计与汇总卡 · 实体卡片 · 综合页面布局示例
---
## 26. 统计与汇总卡（Dashboard）
> 仪表盘顶部的指标卡与汇总卡，用于一屏概览关键数据。
### 26.1 指标卡（已用 / 可用 + 迷你环）
横向排列的使用率卡，左侧数值、右侧迷你环形进度。
| 元素 | 配色 |
|------|------|
| 卡标题（如"账号使用率"） | `14px Regular`，`#575757` (FS-004-09) |
| 主数值（已用，如 `139`） | D-DIN `26px Bold`，`#222222` (FS-004) |
| 次数值（可用，如 `2`） | D-DIN，`#FF9900`（警告橙，FS-001-09） |
| 数值下标签（已用 / 可用） | `12px`，`#A6A6A6` (FS-004-07) |
| 迷你环 + 中心百分比 | 按使用率阈值取语义色（§20）：低→绿、中→橙、高→红；轨道 `#F5F5F5` |
| 卡间竖分隔 | `1px solid #E8E8E8` (FS-004-04) |
### 26.2 汇总卡（总量 + 正常 / 异常 + 环形）
| 元素 | 配色 |
|------|------|
| 总量数值（如 `300`） | D-DIN，`#222222` (FS-004) |
| 正常数值（如 `270`） | `#FF9900`（橙）或成功绿，按业务定 |
| 异常数值（如 `30`） | `#F5222D`（错误红，ZS-001-09） |
| 标签（总量 / 正常 / 异常） | `#575757` (FS-004-09) |
| 环形图 | 正常段绿 `#97EBCD`、异常段红 `#FA9196`（§25.1 色序）；中心主数（如 `40%`）`#222222`、说明（异常率）`#A6A6A6` |
### 26.3 时间范围切换（今日 / 近7日）
分段选择，沿用 §14.3 按钮式页签：
| 状态 | 配色 |
|------|------|
| 选中（今日） | 背景 `#F5222D` (ZS-001-09)，文字 `#FFFFFF` |
| 未选（近7日） | 背景 `#FFFFFF`，边框 `#DBDBDB`，文字 `#222222` |
### 26.4 资源检索条
`[资源类型 ▾] [请输入关键词] [搜索]`：下拉 + 输入框沿用 §13；搜索为主按钮（§5.2.1 红）。配合右侧表格（§22），表头含排序箭头（默认 `#A6A6A6`，激活 `#F5222D`）。
---
## 27. 实体卡片（列表卡 / 任务集卡）
> 卡片网格陈列实体（任务集 / 人物 / 项目等），含主数据、属性表、负责人操作按钮与空状态。
### 27.1 卡片结构
| 元素 | 配色 |
|------|------|
| 卡片背景 / 边框 / 阴影 | `#FFFFFF` / `1px solid #E8E8E8` / §3.1.3 一级阴影，圆角 `4px` |
| 主标题（如人名） | `16px Bold`，`#222222` (FS-004) |
| 副标题（项目名） | `14px Regular`，`#575757` (FS-004-09) |
| 创建时间 | `12px`，`#A6A6A6` (FS-004-07) |
| 主指标（目标数量，如 `10247`） | D-DIN `26px Bold`，`#F5222D` (ZS-001-09)；标签"目标数量" `#A6A6A6` |
| 属性面板（社交媒体(52)） | 背景 `#FEF6F6` (ZS-001-02)；条目名 `#575757`、数值 `#F5222D` (ZS-001-09) |
| 联系/备注行 | `#575757` (FS-004-09)，时间后缀 `#A6A6A6` |
| 底部负责人按钮 | 通栏主按钮：背景 `#F5222D`、文字 `#FFFFFF`（§5.2.1） |
### 27.2 卡片 Hover 操作菜单
卡片右上 `⋯` 触发**深色下拉**：
| 元素 | 配色 |
|------|------|
| 菜单背景 | `#3D3D3D` (FS-004-10)，圆角 `4px`，阴影 §3.1.3 二级 |
| 菜单项（修改 / 删除） | 文字 + 图标 `#FFFFFF`；hover 背景 `rgba(255,255,255,0.1)` |
### 27.3 空状态（暂无任务）
| 元素 | 配色 |
|------|------|
| 空状态插图 / 图标 | 中性灰 `#C1C1C1` (FS-004-06) |
| 空状态文字（暂无任务） | `14px`，`#A6A6A6` (FS-004-07) |
| 主指标归零 | 数值显示 `0`，颜色同 §27.1（红） |
---
## 28. 综合页面布局示例
> 标准后台页面 = 顶部红底导航（§7.1）+ 左侧分级侧边栏（§7.3 / §7.6）+ 右侧内容区。
### 28.1 仪表盘页
```
┌ Header（红底，§7.1）────────────────────────────────────────────┐
├──────┬───────────────────────────────────────────────────────────┤
│ 侧栏 │ 面包屑（§8.1） │
│(§7.3)│ ┌ 指标卡 × N（§26.1，横向等分，竖线分隔）───────────────┐ │
│ │ ├ 汇总卡(§26.2) │ 折线图(§25.4) │ 资源表(§22 + 检索§26.4)│ │
│ │ └ 异常分布图 … │ │
└──────┴───────────────────────────────────────────────────────────┘
```
- 内容区背景 `#FAFAFA` (FS-004-02)，卡片白底浮起；模块间距 `--spacing-5` (24px)，卡内边距 `--spacing-4` (16px)
### 28.2 列表卡片页
```
┌ Header（红底）─────────────────────────────────────────────────┐
├──────┬───────────────────────────────────────────────────────────┤
│ 侧栏 │ [搜索框] [搜索] [+ 添加任务集] 排序 [创建时间 ▾]│
│ │ ┌实体卡┐ ┌实体卡┐ ┌实体卡┐ ┌实体卡┐ （§27，等宽网格） │
│ │ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │ ┌实体卡┐ ┌空状态┐ … │
└──────┴───────────────────────────────────────────────────────────┘
```
- 卡片网格列间距 / 行间距 `--spacing-5` (24px)
- 顶部工具条：搜索输入（§13）+ 搜索主按钮（§5.2.1）+ "添加"主按钮；右侧排序下拉（§13）
- "+ 添加任务集"为主按钮（红 `#F5222D` + 白字 + 加号图标，§5.3.2）
---
> 返回 [规范目录](README.md)
frontend-web/docs/浅红色UI规范/README.md
+85
View File
@@ -0,0 +1,85 @@
# 浅红色 UI 规范
浅色主题设计规范：以白 / 浅灰作大面积背景、深色作正文、**红色（`#F5222D`）为品牌强调主色**。
> 全文按主题拆分为 6 篇，章节号（§1 ~ §28）全局唯一，跨篇引用（如"沿用 §5.2.1"）按下表定位即可。
## 篇目导航
| 篇 | 文件 | 内容 |
|----|------|------|
| 一、基础样式 | [01-基础样式.md](01-基础样式.md) | §1 色彩 · §2 字体 · §3 阴影 · §4 圆角 · §6 间距 · §20 语义状态色 |
| 二、按钮与表单 | [02-按钮与表单.md](02-按钮与表单.md) | §5 按钮 · §12 表单 · §13 输入框 · §14 选择按钮 · §15 标签输入框 · §16 上传 |
| 三、导航 | [03-导航.md](03-导航.md) | §7 导航组件 · §8 面包屑 · §9 页头与分页 · §10 步骤条 · §11 页签与锚点 |
| 四、数据展示 | [04-数据展示.md](04-数据展示.md) | §17 弹窗 · §18 卡片 · §19 折叠面板 · §21 进度条 · §22 表格 · §23 标签 · §24 时间轴 |
| 五、图表 | [05-图表.md](05-图表.md) | §25 图表（通用色序 / 柱 / 折线 / 甘特 / 饼环） |
| 六、页面与布局 | [06-页面与布局.md](06-页面与布局.md) | §26 统计与汇总卡 · §27 实体卡片 · §28 综合页面布局示例 |
## 章节速查（§ → 篇）
| § | 章节 | 所在篇 |
|---|------|--------|
| 1 | 色彩 | [一](01-基础样式.md) |
| 2 | 字体 | [一](01-基础样式.md) |
| 3 | 阴影 | [一](01-基础样式.md) |
| 4 | 圆角 | [一](01-基础样式.md) |
| 5 | 按钮 | [二](02-按钮与表单.md) |
| 6 | 间距 | [一](01-基础样式.md) |
| 7 | 导航组件 | [三](03-导航.md) |
| 8 | 面包屑 | [三](03-导航.md) |
| 9 | 页头与分页 | [三](03-导航.md) |
| 10 | 步骤条 | [三](03-导航.md) |
| 11 | 页签与锚点 | [三](03-导航.md) |
| 12 | 表单 | [二](02-按钮与表单.md) |
| 13 | 输入框 | [二](02-按钮与表单.md) |
| 14 | 选择按钮 | [二](02-按钮与表单.md) |
| 15 | 标签输入框 | [二](02-按钮与表单.md) |
| 16 | 上传 | [二](02-按钮与表单.md) |
| 17 | 弹出式窗口 | [四](04-数据展示.md) |
| 18 | 卡片 | [四](04-数据展示.md) |
| 19 | 折叠面板 | [四](04-数据展示.md) |
| 20 | 语义状态色 | [一](01-基础样式.md) |
| 21 | 进度条 | [四](04-数据展示.md) |
| 22 | 表格 | [四](04-数据展示.md) |
| 23 | 标签 | [四](04-数据展示.md) |
| 24 | 时间轴 | [四](04-数据展示.md) |
| 25 | 图表 | [五](05-图表.md) |
| 26 | 统计与汇总卡 | [六](06-页面与布局.md) |
| 27 | 实体卡片 | [六](06-页面与布局.md) |
| 28 | 综合页面布局示例 | [六](06-页面与布局.md) |
## 颜色速查
完整色板与编号见 [§1 色彩](01-基础样式.md)。最常用的功能色：
| 角色 | 色值 | 编号 |
|------|------|------|
| 主色 Primary | `#F5222D` | ZS-001-09 |
| 主色 Hover | `#CF1322` | ZS-001 |
| 主色 Active | `#A8071A` | ZS-001-11 |
| 链接 / 信息 | `#0079FE` | ZS-002-09 |
| 正文 | `#222222` | FS-004 |
| 次级文字 | `#575757` | FS-004-09 |
| 备注 / 占位 | `#A6A6A6` | FS-004-07 |
| 禁用文字 | `#C1C1C1` | FS-004-06 |
| 页面背景 | `#FAFAFA` | FS-004-02 |
| 容器背景 | `#FFFFFF` | FS-004-01 |
| 分割线 | `#E8E8E8` | FS-004-04 |
**语义状态色**（成功 / 警告 / 错误 / 信息 / 待更新 / 中性，详见 [§20](01-基础样式.md)）：
| 语义 | 文字 | 浅底 | 实填 |
|------|------|------|------|
| 成功（绿） | `#189D72` | `#EEFCF7` | `#2FD69A` |
| 警告（橙） | `#FF9900` | `#FFF6EA` | `#FF9900` |
| 错误（红） | `#F5222D` | `#FEEDED` | `#F5222D` |
| 信息（蓝） | `#0079FE` | `#EAF4FF` | `#0079FE` |
| 待更新（青） | `#45C3F3` | `#EFFAFE` | `#45C3F3` |
| 中性（灰） | `#7F7F7F` | `#F5F5F5` | `#A6A6A6` |
## 通用约定速记
- **圆角**：按钮 / 输入框 / Tag `2px`；卡片 / 分栏 / Modal `4px`（§4）
- **间距阶梯**：4 / 8 / 12 / 16（密）· 24 / 32 / 40 / 56（疏），16 是密的上限、24 是疏的下限（§6）
- **按钮尺寸**：小 `24px` / 正常 `32px`（§5.1）
- **字体**：中文 Noto Sans S Chinese，数字 D-DIN（§2）