diff --git a/.claude/scheduled_tasks.lock b/.claude/scheduled_tasks.lock
deleted file mode 100644
index c508da96..00000000
--- a/.claude/scheduled_tasks.lock
+++ /dev/null
@@ -1 +0,0 @@
-{"sessionId":"f9cbb722-59a7-42fb-a7aa-d4923a8c3425","pid":45764,"acquiredAt":1780221904458}
\ No newline at end of file
diff --git a/frontend-web/docs/浅红色UI规范/01-基础样式.md b/frontend-web/docs/浅红色UI规范/01-基础样式.md
new file mode 100644
index 00000000..4d17a5ef
--- /dev/null
+++ b/frontend-web/docs/浅红色UI规范/01-基础样式.md
@@ -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)
diff --git a/frontend-web/docs/浅红色UI规范/02-按钮与表单.md b/frontend-web/docs/浅红色UI规范/02-按钮与表单.md
new file mode 100644
index 00000000..998b4c61
--- /dev/null
+++ b/frontend-web/docs/浅红色UI规范/02-按钮与表单.md
@@ -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)
diff --git a/frontend-web/docs/浅红色UI规范/03-导航.md b/frontend-web/docs/浅红色UI规范/03-导航.md
new file mode 100644
index 00000000..af19d507
--- /dev/null
+++ b/frontend-web/docs/浅红色UI规范/03-导航.md
@@ -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)
diff --git a/frontend-web/docs/浅红色UI规范/04-数据展示.md b/frontend-web/docs/浅红色UI规范/04-数据展示.md
new file mode 100644
index 00000000..6a495459
--- /dev/null
+++ b/frontend-web/docs/浅红色UI规范/04-数据展示.md
@@ -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)
diff --git a/frontend-web/docs/浅红色UI规范/05-图表.md b/frontend-web/docs/浅红色UI规范/05-图表.md
new file mode 100644
index 00000000..66db5c17
--- /dev/null
+++ b/frontend-web/docs/浅红色UI规范/05-图表.md
@@ -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)
diff --git a/frontend-web/docs/浅红色UI规范/06-页面与布局.md b/frontend-web/docs/浅红色UI规范/06-页面与布局.md
new file mode 100644
index 00000000..5e0f45f6
--- /dev/null
+++ b/frontend-web/docs/浅红色UI规范/06-页面与布局.md
@@ -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)
diff --git a/frontend-web/docs/浅红色UI规范/README.md b/frontend-web/docs/浅红色UI规范/README.md
new file mode 100644
index 00000000..cb16eaa6
--- /dev/null
+++ b/frontend-web/docs/浅红色UI规范/README.md
@@ -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）
diff --git a/frontend-web/docs/浅红色ui修改.md b/frontend-web/docs/浅红色ui修改.md
index 38374add..0e926e70 100644
--- a/frontend-web/docs/浅红色ui修改.md
+++ b/frontend-web/docs/浅红色ui修改.md
@@ -1,1786 +1,14 @@
-# 浅红色 UI 规范
+# 浅红色 UI 规范（已拆分）
 
----
+本规范已按主题拆分到文件夹 **[`浅红色UI规范/`](浅红色UI规范/README.md)**，请从目录进入：
 
-## 1. 色彩
+👉 **[浅红色UI规范 / README.md](浅红色UI规范/README.md)**
 
-### 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 图表通用色序为准**。本小节给出的是从主 / 辅色提取的强调型色序，适用于需要突出对比的少量序列；柱状 / 饼 / 环 / 面积等多分类图表的标准柔和色序见 [§25 图表](#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` | 与卡片一致 |
-
----
-
-## 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` |
-
-> 与失效态的区别：失效是"不可操作"，加载是"操作进行中"——保留品牌主色，只是不可再次触发。
-
----
-
-## 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  */
-}
-```
-
----
-
-## 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`，覆盖容器基线 |
-
-- 二级项不单独支持激活态：选中二级时其父级一级显示激活态，指示条按父级位置渲染
-
----
-
-## 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)，右对齐。
-
----
-
-## 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) |
-
----
-
-## 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) | 中性灰系 |
-
----
-
-## 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`，填充浅红渐变 |
-
----
-
-## 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%） |
-
----
-
-## 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）
+| 篇 | 文件 |
+|----|------|
+| 一、基础样式（色彩 / 字体 / 阴影 / 圆角 / 间距 / 语义色） | [01-基础样式.md](浅红色UI规范/01-基础样式.md) |
+| 二、按钮与表单 | [02-按钮与表单.md](浅红色UI规范/02-按钮与表单.md) |
+| 三、导航 | [03-导航.md](浅红色UI规范/03-导航.md) |
+| 四、数据展示 | [04-数据展示.md](浅红色UI规范/04-数据展示.md) |
+| 五、图表 | [05-图表.md](浅红色UI规范/05-图表.md) |
+| 六、页面与布局 | [06-页面与布局.md](浅红色UI规范/06-页面与布局.md) |
diff --git a/frontend-web/src/core/auth/yuser-login.ts b/frontend-web/src/core/auth/yuser-login.ts
new file mode 100644
index 00000000..a163db71
--- /dev/null
+++ b/frontend-web/src/core/auth/yuser-login.ts
@@ -0,0 +1,45 @@
+import { requestCrudService } from "@/service/request-axios-service";
+
+const CONSUMER_URL = import.meta.env.VITE_AIPI_CONSUMER_URL || "";
+
+export const TOOLS_TOKEN_STORAGE_KEY = "tools_token";
+export const EXTERNAL_USER_ID_STORAGE_KEY = "userId";
+export const EXTERNAL_USER_INFO_STORAGE_KEY = "userInfo";
+export const GENERAL_QA_ROUTE = "/page/strategy/qa/general";
+
+type UserDetailResponse = {
+  data?: {
+    id?: string;
+    [key: string]: unknown;
+  };
+};
+
+/**
+ * External login via yUserId + optional token (same flow as web-code Login.tsx):
+ * persist tools_token, resolve user via consumer API, store userId/userInfo.
+ */
+export async function loginByYUserId(
+  yUserId: string,
+  token?: string | null,
+): Promise<void> {
+  if (token) {
+    localStorage.setItem(TOOLS_TOKEN_STORAGE_KEY, token);
+  }
+
+  const res = (await requestCrudService.get(
+    `${CONSUMER_URL}/cop/userDetailByYuserId`,
+    { yuserId: yUserId },
+  )) as UserDetailResponse;
+
+  const result = res.data;
+  if (!result?.id) {
+    throw new Error("无法根据 yUserId 获取用户信息。");
+  }
+
+  localStorage.setItem(EXTERNAL_USER_ID_STORAGE_KEY, result.id);
+  localStorage.setItem(EXTERNAL_USER_INFO_STORAGE_KEY, JSON.stringify(result));
+}
+
+export function persistToolsToken(token: string): void {
+  localStorage.setItem(TOOLS_TOKEN_STORAGE_KEY, token);
+}
diff --git a/frontend-web/src/core/page-layout/sidebar-enabled.ts b/frontend-web/src/core/page-layout/sidebar-enabled.ts
index 2819e209..21942b3e 100644
--- a/frontend-web/src/core/page-layout/sidebar-enabled.ts
+++ b/frontend-web/src/core/page-layout/sidebar-enabled.ts
@@ -6,7 +6,14 @@ export function isSidebarEnabledFromSearch(search: string): boolean {
   const params = new URLSearchParams(
     search.startsWith("?") ? search : `?${search}`,
   );
-  return params.get(PAGE_SIDEBAR_QUERY_PARAM) === "1";
+  if (params.get(PAGE_SIDEBAR_QUERY_PARAM) === "1") {
+    return true;
+  }
+  // External yUserId login enables the page sidebar (see LoginPage + yuser-login).
+  if (params.get("yUserId")) {
+    return true;
+  }
+  return false;
 }
 
 export function persistSidebarEnabled(enabled: boolean): void {
diff --git a/frontend-web/src/pages/LoginPage.tsx b/frontend-web/src/pages/LoginPage.tsx
index 5edbf2db..8e7bca92 100644
--- a/frontend-web/src/pages/LoginPage.tsx
+++ b/frontend-web/src/pages/LoginPage.tsx
@@ -10,6 +10,11 @@ import {
   persistExternalLoginParams,
   resolveThemeFromQuery,
 } from "@/core/auth/external-login";
+import {
+  GENERAL_QA_ROUTE,
+  loginByYUserId,
+  persistToolsToken,
+} from "@/core/auth/yuser-login";
 import {
   isSidebarEnabledFromSearch,
   persistSidebarEnabled,
@@ -33,6 +38,8 @@ export default function LoginPage() {
     return raw && raw.length > 0 ? raw : DEFAULT_USERNAME;
   }, [username]);
   // 外部跳转参数：theme 直接调 setTheme；ticket/userId/env 持久化到 localStorage
+  const yUserId = searchParams.get("yUserId")?.trim() ?? "";
+  const toolToken = searchParams.get("token")?.trim() ?? "";
   const externalParams = useMemo(() => ({
     theme: searchParams.get("theme") ?? "",
     ticket: searchParams.get("ticket") ?? "",
@@ -64,6 +71,12 @@ export default function LoginPage() {
       setStatus("loading");
       setErrorMessage("");
       try {
+        if (yUserId) {
+          await loginByYUserId(yUserId, toolToken || null);
+        } else if (toolToken) {
+          persistToolsToken(toolToken);
+        }
+
         const auth = await loginByUsername(resolvedUsername);
         if (cancelled) {
           return;
@@ -71,7 +84,7 @@ export default function LoginPage() {
         setStoredAuth(auth);
         persistSidebarEnabled(sidebarEnabled);
         setStatus("success");
-        router.replace("/page/workspace/chats/new");
+        router.replace(yUserId ? GENERAL_QA_ROUTE : "/page/workspace/chats/new");
       } catch (error) {
         if (cancelled) {
           return;
@@ -87,7 +100,7 @@ export default function LoginPage() {
     return () => {
       cancelled = true;
     };
-  }, [resolvedUsername, router, sidebarEnabled]);
+  }, [resolvedUsername, router, sidebarEnabled, yUserId, toolToken]);
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-background px-6">