wsk/deerflow-code

0 Fork 0

Files

T

fengxiangdebaozi 45eb46c3f3 智能体列表

2026-05-26 19:31:59 +08:00

84 KiB

Raw Blame History

深蓝色 UI 规范

1. 色彩

1.1 标准色

色彩体系由四个色系构成，每个色系分主色与辅色两组，每组按明度从浅到深编号（01 最浅，数字越大越深）。

1.1.1 色系总览

色系	用途定位	代码前缀
渐红系	警示、错误、强调操作	ZS-001
渐蓝系	信息、链接、次级操作	ZS-002
渐青系	成功、在线状态、数据高亮	ZS-003
深蓝系	页面背景、容器、导航底色	ZS-004

1.1.2 渐红系（ZS-001）

用于错误提示、危险操作、重要告警。

编号	色值	说明
ZS-001-01	`#FFF1F0`	极浅红，错误背景底色
ZS-001-02	`#FFCCC7`	浅红，输入框错误边框
ZS-001-03	`#FFA39E`	—
ZS-001-04	`#FF7875`	—
ZS-001-05	`#FF4D4F`	标准红，Tag / Badge
ZS-001-06	`#F5222D`	主色红，按钮 / 图标
ZS-001-07	`#CF1322`	深红，Hover 状态
ZS-001-08	`#A8071A`	深红，Active / Press
ZS-001-09	`#820014`	极深红
ZS-001-10	`#5C0011`	最深红

1.1.3 渐蓝系（ZS-002）

用于信息提示、链接、次级按钮。

编号	色值	说明
ZS-002-01	`#E6F4FF`	极浅蓝，信息背景底色
ZS-002-02	`#BAE0FF`	浅蓝
ZS-002-03	`#91CAFF`	—
ZS-002-04	`#69B1FF`	—
ZS-002-05	`#4096FF`	标准蓝，链接 / 信息 Tag
ZS-002-06	`#1677FF`	主色蓝，主操作按钮
ZS-002-07	`#0958D9`	深蓝，Hover
ZS-002-08	`#003EB3`	深蓝，Active
ZS-002-09	`#002C8C`	极深蓝
ZS-002-10	`#001D6C`	最深蓝

1.1.4 渐青系（ZS-003）

用于成功状态、在线标识、数据图表高亮。

编号	色值	说明
ZS-003-01	`#E6FFFB`	极浅青，成功背景
ZS-003-02	`#B5F5EC`	浅青
ZS-003-03	`#87E8DE`	—
ZS-003-04	`#5CDBD3`	—
ZS-003-05	`#36CFC9`	标准青，成功 Tag
ZS-003-06	`#13C2C2`	主色青，在线点 / 图标
ZS-003-07	`#08979C`	深青，Hover
ZS-003-08	`#006D75`	深青，Active
ZS-003-09	`#00474F`	极深青
ZS-003-10	`#002329`	最深青

1.1.5 深蓝系（ZS-004）

用于页面背景、导航栏、侧边栏、卡片容器。这是深蓝主题的核心色系。

编号	色值	说明
ZS-004-01	`#E8EDF5`	极浅，分割线 / 禁用底色
ZS-004-02	`#C5CFE0`	浅，边框
ZS-004-03	`#9BADC8`	—
ZS-004-04	`#6E88B0`	—
ZS-004-05	`#4A6491`	中深蓝，次级文字
ZS-004-06	`#2D4473`	深蓝，卡片容器背景
ZS-004-07	`#1A2F5A`	深蓝，侧边栏背景
ZS-004-08	`#122347`	深蓝，导航栏背景
ZS-004-09	`#0C1836`	极深蓝，页面背景
ZS-004-10	`#060E24`	最深，全局底色

1.1.6 功能色（主色 / 字体色 / 辅色 / 背景色）

从标准色系中提取，用于具体 UI 角色指定。

角色	色值	来源
主色（Primary）	`#1677FF`	ZS-002-06
主色 Hover	`#0958D9`	ZS-002-07
主色 Active	`#003EB3`	ZS-002-08
正常字体色	`#C5CFE0`	ZS-004-02
次级字体色	`#6E88B0`	ZS-004-04
禁用字体色	`#4A6491`	ZS-004-05
辅色（Accent）	`#13C2C2`	ZS-003-06
页面背景色	`#0C1836`	ZS-004-09
容器背景色	`#1A2F5A`	ZS-004-07
白色	`#FFFFFF`	—

1.1.7 小面积装饰色

用于图标点缀、徽标、少量强调，不用于大面积背景。

色值	说明
`#6388FF`	紫蓝，图标装饰
`#F5222D`	红色，危险徽标
`#12306C`	深蓝，品牌点缀
`#478880`	青绿，辅助点缀
`#950404`	深红，重要告警点

1.1.8 图表配色

通用图表色序（面积较大，如柱状图、折线图、饼图）：

序号	色值
1	`#1677FF`
2	`#13C2C2`
3	`#4096FF`
4	`#36CFC9`
5	`#69B1FF`
6	`#5CDBD3`
7	`#91CAFF`
8	`#87E8DE`

小面积图表色序（面积较小，如散点、小徽章、迷你图）：

序号	色值
1	`#4096FF`
2	`#36CFC9`
3	`#FF4D4F`
4	`#FFA39E`
5	`#6388FF`
6	`#478880`

2. 字体

2.1 全局样式 - 字体

2.1.1 大屏页面字体规范

中文字体：Noto Sans S Chinese

样式	使用场景
24px Bold	一级标题
24px Medium	次要一级标题
22px Medium	二级标题
22px Regular	正文
20px Regular	排版空间有限的正文

数字字体：D-DIN

样式	使用场景
32px Bold	重要数据展示
32px Regular	普通数据展示
26px Bold	常规数据展示
26px Regular	常规数据展示

特殊数字：DS-Digital

样式	使用场景
50px Bold	大屏主数据展示

表格字体：Arial

样式	使用场景
20px Regular	表格横纵轴数字

2.1.2 后台系统字体规范

中文字体：Noto Sans S Chinese

样式	使用场景
18px Bold	导航、一级标题
18px Medium	次要一级标题
16px Bold	二级标题
16px Medium	次要二级标题
16px Regular	正文、按钮内部文字等
16px Light	次要正文

数字字体：D-DIN

样式	使用场景
26px Bold	重要数据展示
26px Regular	普通数据展示
24px Bold	常规数据展示（小）
24px Regular	常规数据展示（小）

LOGO 字体：DOUYUFont

样式	使用场景
20px 文字样式	页面顶部系统名称

表格数字：Arial

样式	使用场景
16px Regular	表格横纵轴数字
14px Regular	表格横轴数字（空间有限）

3. 阴影

3.1 容器与卡片配色

阴影组通过深浅层级叠加形成空间感：外层容器最深，内层卡片次之，边框与高亮文字使用主色或字体色。

3.1.1 外层容器

角色	色值	来源
页面 / 最外层背景	`#060E24`	ZS-004-10
分栏容器背景	`#0C1836`	ZS-004-09

3.1.2 卡片（标题 + 操作）

角色	色值	来源
卡片背景	`#122347`	ZS-004-08
卡片边框	`#1A2F5A`	ZS-004-07
卡片阴影（外发光）	`rgba(22, 119, 255, 0.12)`	基于 ZS-002-06 主色蓝 12% 透明度
标题文字（16px Bold）	`#C5CFE0`	ZS-004-02（正常字体色）
操作按钮文字	`#4096FF`	ZS-002-05（标准蓝，链接）
次级操作图标（✏️ / ⋯）	`#6E88B0`	ZS-004-04（次级字体色）

3.1.3 卡片新增（占位卡片）

虚线描边的"新增入口"卡片，用于引导用户添加内容。

角色	色值	来源
卡片背景	`#0C1836`	ZS-004-09（与外层同色，营造凹陷感）
虚线边框	`#4096FF`	ZS-002-05
加号图标	`#4096FF`	ZS-002-05

3.1.4 阴影投影规则

层级	阴影值	使用场景
一级阴影（卡片悬浮）	`0 2px 8px rgba(22, 119, 255, 0.12)`	普通卡片
二级阴影（hover / 强调）	`0 4px 16px rgba(22, 119, 255, 0.24)`	卡片 hover、弹出层
三级阴影（弹窗 / Modal）	`0 8px 32px rgba(6, 14, 36, 0.6)`	Dialog、Drawer

4. 圆角

4.1 圆角统一规范

元素	圆角值	说明
按钮	`2px`	所有按钮（主按钮 / 次按钮 / 文本按钮）统一使用
卡片	`4px`	内容卡片、标题+操作卡片、卡片新增占位
页面分栏框	`4px`	外层容器、分栏区域
输入框 / 选择器	`2px`	与按钮一致，保持表单内对齐
Tag / Badge	`2px`	与按钮一致
Modal / Drawer	`4px`	与卡片一致

4.2 按钮配色（圆角 2px）

4.2.1 主按钮（Primary）

角色	色值	来源
背景	`#1677FF`	ZS-002-06
文字	`#FFFFFF`	—
Hover 背景	`#0958D9`	ZS-002-07
Active 背景	`#003EB3`	ZS-002-08
禁用背景	`#4A6491`	ZS-004-05
禁用文字	`#6E88B0`	ZS-004-04

4.2.2 次按钮（Outline / Default）

角色	色值	来源
背景	`transparent`	—
边框	`#6E88B0`	ZS-004-04
文字	`#C5CFE0`	ZS-004-02
Hover 边框	`#4096FF`	ZS-002-05
Hover 文字	`#4096FF`	ZS-002-05
Active 边框	`#1677FF`	ZS-002-06

4.3 卡片与分栏（圆角 4px）

角色	色值	来源
卡片背景	`#122347`	ZS-004-08
卡片边框	`#1A2F5A`	ZS-004-07
分栏框背景	`#0C1836`	ZS-004-09
分栏框边框	`#1A2F5A`	ZS-004-07

5. 按钮

全部圆角 2px，文字字号 14px（小尺寸）/ 14px（正常尺寸），字体 Noto Sans S Chinese Regular。

5.1 按钮尺寸

规格	高度	内边距	使用场景
小	`28px`	`0 10px`	空间小的板块内部，如表格中、卡片标题等
正常	`32px`	`0 14px`	默认尺寸，所有常用按钮

5.2 按钮类型与配色

5.2.1 主按钮（Primary）

一个操作区域只能有一个主按钮。

状态	背景	边框	文字
默认	`#1677FF` (ZS-002-06)	—	`#FFFFFF`
Hover	`#0958D9` (ZS-002-07)	—	`#FFFFFF`
Active	`#003EB3` (ZS-002-08)	—	`#FFFFFF`
失效	`rgba(22, 119, 255, 0.35)`	—	`#6E88B0` (ZS-004-04)

5.2.2 默认按钮（Default / Outline）

用于"取消 / 返回"等次要操作，与主按钮成对出现时主按钮在右。

状态	背景	边框	文字
默认	`transparent`	`#6E88B0` (ZS-004-04)	`#C5CFE0` (ZS-004-02)
Hover	`rgba(22, 119, 255, 0.08)`	`#4096FF` (ZS-002-05)	`#4096FF` (ZS-002-05)
Active	`rgba(22, 119, 255, 0.16)`	`#1677FF` (ZS-002-06)	`#1677FF` (ZS-002-06)
失效	`transparent`	`#4A6491` (ZS-004-05)	`#4A6491` (ZS-004-05)

5.2.3 文本按钮（Text）

用于表格操作、文件下载等。无背景与边框，靠文字色识别。

状态	文字	装饰
默认	`#4096FF` (ZS-002-05)	无下划线
Hover	`#1677FF` (ZS-002-06)	显示下划线（与文字同色）
Active	`#0958D9` (ZS-002-07)	下划线
失效	`#4A6491` (ZS-004-05)	无装饰

5.2.4 图标按钮（Icon-only）

用于增强辨识度或节省空间。仅图标，无文字。

变体	背景	图标颜色
主色（常用）	`#1677FF` (ZS-002-06)	`#FFFFFF`
主色 Hover	`#0958D9` (ZS-002-07)	`#FFFFFF`
危险（删除等）	`#F5222D` (ZS-001-06)	`#FFFFFF`
危险 Hover	`#CF1322` (ZS-001-07)	`#FFFFFF`
透明（仅图标）	`transparent`	`#6E88B0` (ZS-004-04) → hover `#4096FF` (ZS-002-05)

5.3 按钮组合

5.3.1 文字 + 下拉按钮（含 ▾）

两种填充：

形态	配色规则
默认（Outline）	沿用 §5.2.2 默认按钮，箭头 ▾ 与文字同色 `#C5CFE0`
主色（Filled）	沿用 §5.2.1 主按钮，箭头 ▾ 同步白色 `#FFFFFF`

5.3.2 图标 + 文字按钮（如 `+ 正常`）

形态	配色规则
默认（Outline）	沿用 §5.2.2，左侧图标颜色与文字一致 `#C5CFE0`
主色（Filled）	沿用 §5.2.1，左侧图标与文字一致 `#FFFFFF`

5.3.3 文本按钮 + 图标（"更多 »"、"展开 ⌄"、"下一页 »"、"« 上一页"）

角色	色值
文字 + 图标（默认）	`#4096FF` (ZS-002-05)
文字 + 图标（Hover）	`#1677FF` (ZS-002-06)
失效	`#4A6491` (ZS-004-05)

图标可在文字前或后；多个文本按钮排成一行时，间距 16px，无分隔符。

5.3.4 主按钮 + 默认按钮组合（如"确定 / 取消 / 返回"）

排列顺序：默认按钮在左，主按钮在右（最右侧为主操作）
按钮间距：8px
示例：[ 返回 ] [ 取消 ] [ 确定 ]
配色：主按钮沿用 §5.2.1，其余沿用 §5.2.2

5.4 其他按钮

5.4.1 悬浮状态（Floating）

用于 Banner / 登录 / 视觉冲击强等展示场景。配色与主按钮一致，叠加阴影抬升。

状态	阴影
默认	`0 2px 8px rgba(22, 119, 255, 0.12)`（§3.1.4 一级阴影）
Hover	`0 4px 16px rgba(22, 119, 255, 0.24)`（§3.1.4 二级阴影）
Active	阴影消失，按下感

5.4.2 加载中（Loading）

用于异步操作等待反馈。点击瞬间将按钮锁定，文字前显示旋转图标。

角色	色值
背景	`#1677FF` (ZS-002-06)
文字	`#FFFFFF`
加载图标	`#FFFFFF`，旋转动画 `1.2s linear infinite`
不可点击	鼠标 `cursor: not-allowed`

与失效态的区别：失效是"不可操作"，加载是"操作进行中"——保留品牌主色，只是不可再次触发。

6. 分割线

统一线宽 1px，颜色全部从 ZS-004 深蓝系取色，与深色背景保持低对比度但仍可识别。

6.1 水平分割线

水平分割线常用来对不同元素内容进行分割。

类型	色值	来源	样式	使用场景
实线（默认）	`#4A6491`	ZS-004-05	`border-top: 1px solid`	模块间、列表项间分割
实线（强调）	`#6E88B0`	ZS-004-04	`border-top: 1px solid`	主区块标题下方、卡片头部分割
实线（弱化）	`#2D4473`	ZS-004-06	`border-top: 1px solid`	卡片内部、密集列表分隔
虚线	`#4A6491`	ZS-004-05	`border-top: 1px dashed`	次级 / 层级内分割，提示"非主结构"
主色实线（高亮）	`#1677FF`	ZS-002-06	`border-top: 1px solid`	强调分隔，少量使用（如当前激活区块底边）

6.2 垂直分割线

垂直分割线常用来做行内分割（如导航项之间、状态指示之间、表格列头之间）。

类型	色值	来源	样式	使用场景
实线（默认）	`#4A6491`	ZS-004-05	`border-left: 1px solid`	行内 inline 元素分割（面包屑、操作按钮组）
实线（弱化）	`#2D4473`	ZS-004-06	`border-left: 1px solid`	表格列分割、紧凑布局
虚线	`#4A6491`	ZS-004-05	`border-left: 1px dashed`	多列对齐辅助、辅助参考线

6.3 规格与间距

规则	取值
线宽	`1px`
水平分割线与上下元素间距	`≥ 8px`（紧凑布局可用 `4px`）
垂直分割线与左右元素间距	`≥ 8px`（行内紧凑 `4px`）
垂直分割线高度	与文字行高一致，约 `12–14px`（也可全高跟随容器）
透明度	必要时叠 `opacity: 0.6` 实现"更弱"层级

6.4 CSS 参考

/* 默认水平分割线 */
.divider-h        { border-top: 1px solid #4A6491; }
.divider-h-strong { border-top: 1px solid #6E88B0; }
.divider-h-weak   { border-top: 1px solid #2D4473; }
.divider-h-dashed { border-top: 1px dashed #4A6491; }
.divider-h-accent { border-top: 1px solid #1677FF; }

/* 垂直分割线 */
.divider-v        { border-left: 1px solid #4A6491; height: 14px; display: inline-block; vertical-align: middle; }
.divider-v-weak   { border-left: 1px solid #2D4473; height: 14px; display: inline-block; vertical-align: middle; }
.divider-v-dashed { border-left: 1px dashed #4A6491; height: 14px; display: inline-block; vertical-align: middle; }

7. 间距

全站以 8px (0.5rem) 为对照基准单位，划分"密 / 疏"两个层次。所有间距取值均来自下列阶梯，禁止使用非阶梯值（如 5px、13px）。

7.1 间距阶梯

阶	px	rem	分组	典型场景
1	`4px`	`0.25rem`	密	图标与文字间距、Tag 内边距、紧凑徽标
2	`8px`	`0.5rem`	密	行内元素相邻、按钮组间距、表单 label 与控件
3	`12px`	`0.75rem`	密	表单项垂直间距、列表项内边距
4	`16px`	`1rem`	密	卡片内容内边距、模块内分隔
5	`24px`	`1.5rem`	疏	模块之间、Section 内边距
6	`32px`	`2rem`	疏	卡片之间、表单组之间
7	`40px`	`2.5rem`	疏	主区块之间、页面 Header / Footer 内边距
8	`56px`	`3.5rem`	疏	页面段落级隔断、Banner 区域

"密"对应紧凑信息密度（表格、表单、卡片内部）；"疏"对应视觉呼吸（模块之间、页面整体留白）。16px 是"密"的上限，24px 是"疏"的下限，两者之间不应再插入自定义值。

7.2 使用原则

同层级一致：同一布局层级内的间距必须使用同一阶值；多种取值会破坏节奏。
就近取阶：相邻区块的间距尽量从相邻阶梯取值（如 16px → 24px），跨越过多阶（如 8px → 56px）会让视觉断裂。
密疏不混用：一个组件内部全部用"密"，外部用"疏"，避免内/外间距颠倒。
优先 8 的倍数：除最小阶 4px 外，所有阶皆为 8 的倍数，方便 4/8 网格对齐。
响应式按比例衰减：移动端可整体降一阶（如 24px → 16px），但仍在阶梯内。

7.3 CSS Token 建议

:root {
  --spacing-1: 4px;   /* 0.25rem */
  --spacing-2: 8px;   /* 0.5rem  */
  --spacing-3: 12px;  /* 0.75rem */
  --spacing-4: 16px;  /* 1rem    */
  --spacing-5: 24px;  /* 1.5rem  */
  --spacing-6: 32px;  /* 2rem    */
  --spacing-7: 40px;  /* 2.5rem  */
  --spacing-8: 56px;  /* 3.5rem  */
}

7.4 与已有规范的对齐

已有规则	对应阶
§4.x 卡片圆角内边距	`--spacing-4` (16px)
§5.3.4 主+默认按钮组合间距 `8px`	`--spacing-2`
§5.3.3 文本按钮间距 `16px`	`--spacing-4`
§6.3 分割线与上下元素间距 `≥ 8px`	`--spacing-2` 起

8. 导航组件

适用于"大屏后台 / 控制台"类深蓝主题界面。整体结构 = 顶部导航 + 左侧分级菜单 + 多级下拉。所有颜色取自 ZS-002 / ZS-004 两个色系。

8.1 整体结构

┌─ 顶部导航（Header）─ 高 56px ──────────────────────────────────────────────┐
│ ≡ 二级菜单 二级菜单 二级菜单  〈一级菜单〉〈一级菜单〉  ⟪ XXXX系统 ⟫  〈一级菜单〉  ⟳ 时间  ⌂ 返回首页 │
├──┬──────────────────────────────────────────────────────────────────────────┤
│ 三│  ┌─ 四级菜单（下拉面板）──┐                                              │
│ 级│  │ ▾ 四级菜单             │                                              │
│ 菜│  │   ▾ 五级菜单           │                                              │
│ 单│  │     - 六级菜单 (active)│                                              │
│ 三│  │     - 六级菜单         │                                              │
│ 级│  │   ▸ 五级菜单           │                                              │
│ 菜│  │ ▸ 四级菜单             │                                              │
│ 单│  └────────────────────────┘                                              │
│ …│                                                                          │
└──┴──────────────────────────────────────────────────────────────────────────┘

8.2 顶部导航（Header）

8.2.1 规格

属性	取值
高度	`56px`
左右 padding	`--spacing-4` (16px)
背景	渐变 `linear-gradient(180deg, #122347 0%, #0C1836 100%)`（ZS-004-08 → ZS-004-09）
底边	`border-bottom: 1px solid #1A2F5A` (ZS-004-07)
阴影	`0 2px 8px rgba(6, 14, 36, 0.6)`（§3.1.4 一级阴影变体）
文字基线	`Noto Sans S Chinese`，垂直居中

8.2.2 二级菜单（左侧 Tabs，小号 14px）

状态	文字	背景	装饰
默认	`#6E88B0` (ZS-004-04)	`transparent`	—
Hover	`#C5CFE0` (ZS-004-02)	`rgba(22,119,255,0.08)`	—
激活	`#4096FF` (ZS-002-05)	`transparent`	底部 `2px solid #4096FF` 高亮线

字号 14px Regular，间距 --spacing-3 (12px)
与最左侧的"折叠菜单 ≡"图标间距 --spacing-4 (16px)

8.2.3 一级菜单（中部主导航，16px 带切角装饰）

状态	文字	装饰
默认	`#C5CFE0` (ZS-004-02)	两端切角斜边，`border: 1px solid #1A2F5A`
Hover	`#4096FF` (ZS-002-05)	切角线变 `#4096FF`
激活	`#FFFFFF`	切角线 `#1677FF` (ZS-002-06)，背景 `rgba(22,119,255,0.16)`

字号 16px Medium
切角推荐 clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%)
项间距 --spacing-2 (8px)

8.2.4 系统标题（XXXX系统）

字号 20px Bold，颜色 #FFFFFF
字体 DOUYUFont 或 Noto Sans Medium
左右装饰用主色蓝渐变线条：linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%)，线宽 1px
居中相对 Header 几何中心，左右最少留 --spacing-6 (32px) 间距给一级菜单

8.2.5 右侧工具区（时间 / 图标 / 返回首页）

元素	字号/尺寸	颜色
更新时间文字	`12px Regular`	`#6E88B0` (ZS-004-04)
时间数值（数字）	`12px D-DIN Regular`	`#C5CFE0` (ZS-004-02)
工具图标（刷新/上/家）	`16px`	`#6E88B0`，hover → `#4096FF`
返回首页文字	`14px Regular`	`#C5CFE0`，hover → `#4096FF`

元素间距 --spacing-3 (12px)
整体右 padding --spacing-4 (16px)

8.3 侧边栏（三级菜单）

8.3.1 规格

属性	取值
宽度	`64px`（仅图标 / 竖排文字）
背景	`#0C1836` (ZS-004-09)
右边界	`border-right: 1px solid #1A2F5A` (ZS-004-07)
项高度	`64px`（与宽度一致，呈正方形）
项内间距	上下 `--spacing-3` (12px)
字号	`14px Medium`，竖排（`writing-mode: vertical-rl`）或正常排两行

8.3.2 状态配色

状态	背景	文字	左侧指示条
默认	`transparent`	`#6E88B0` (ZS-004-04)	无
Hover	`rgba(22,119,255,0.08)`	`#C5CFE0` (ZS-004-02)	无
激活	`#1A2F5A` (ZS-004-07)	`#FFFFFF`	左侧 `2px solid #1677FF` (ZS-002-06)

8.4 下拉菜单面板（四级 / 五级 / 六级）

8.4.1 面板规格

属性	取值
背景	`#122347` (ZS-004-08)
边框	`1px solid #1A2F5A` (ZS-004-07)
阴影	`0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影变体）
圆角	`4px`
内边距	上下 `--spacing-2` (8px)
最小宽度	`150px`

8.4.2 菜单项规格

层级	缩进（padding-left）	字号	展开图标	前缀
四级菜单	`--spacing-3` (12px)	`14px Medium`	`▾ / ▸`	—
五级菜单	`--spacing-5` (24px)	`14px Regular`	`▾ / ▸`	—
六级菜单	`--spacing-6` (32px)	`14px Regular`	—	`-` 短横线

行高 32px
项之间无分割线（靠缩进与图标区分层级）

8.4.3 菜单项配色

状态	背景	文字	展开图标
默认	`transparent`	`#C5CFE0` (ZS-004-02)	`#6E88B0` (ZS-004-04)
Hover	`rgba(22,119,255,0.08)`	`#4096FF` (ZS-002-05)	`#4096FF`
激活（当前选中）	`rgba(22,119,255,0.16)`	`#4096FF` (ZS-002-05)	`#1677FF` (ZS-002-06)
父级（含激活子项）	`transparent`	`#FFFFFF`	`#1677FF`
失效	`transparent`	`#4A6491` (ZS-004-05)	`#4A6491`

8.5 交互与动画

行为	动效
下拉面板展开	`transform-origin: top; transform: scaleY(0.95) → scaleY(1); opacity 0 → 1`，`200ms ease-out`
展开图标旋转	`transform: rotate(0 → 90deg)`，`200ms ease-out`
Hover 背景过渡	`background-color 120ms ease-out`
激活底部高亮线（二级菜单）	`width 0% → 100%`，`240ms ease-out`

8.6 间距引用

位置	取值
Header 内部元素间距	`--spacing-2 / --spacing-3`
Header 与下方内容间距	`0`（贴合，靠底边线与阴影区分）
侧边栏与下拉面板间距	`--spacing-1` (4px)
下拉面板与触发元素间距	`--spacing-1` (4px)
同级菜单项之间	`0`（紧贴排列，靠 hover/active 背景区分）

9. 锚点与页签

对应"4.2 导航组件-锚点"。三类组件共用主色蓝指示当前位置：页签 / 锚点 / 回到顶部。

视觉参考：标签横向 / 标签纵向 / 锚点的三联图见设计稿「选项卡.png」——三种形态在本节均已规范化（§9.1 = 标签横纵向、§9.2 = 锚点）。

9.1 页签（Tabs）

9.1.1 横向页签（下划线-横向）

状态	文字	下划线
默认	`#C5CFE0` (ZS-004-02)	无
Hover	`#4096FF` (ZS-002-05)	无
激活	`#4096FF` (ZS-002-05)	`2px solid #4096FF`，宽度与文字齐
失效	`#4A6491` (ZS-004-05)	无

字号 14px Medium
项间距 --spacing-5 (24px)
下划线与文字底部间距 --spacing-2 (8px)
容器底边可叠一条 1px solid #1A2F5A (ZS-004-07) 作为基线，激活态的高亮线压在上面

9.1.2 纵向页签（下划线-纵向）

状态	文字	右侧指示线
默认	`#C5CFE0` (ZS-004-02)	无
Hover	`#4096FF` (ZS-002-05)	无
激活	`#4096FF` (ZS-002-05)	右侧 `2px solid #4096FF`，高度与文字齐
失效	`#4A6491` (ZS-004-05)	无

字号 14px Medium，项高度 32px
项间距 --spacing-2 (8px)
容器右边可叠一条 1px solid #1A2F5A 基线，激活指示线压在上面

9.2 锚点（Anchor）

用于长内容页（如详情页、文档页）的章节快速跳转。

9.2.1 结构

│ 一级
│ 一级          (active)
│    二级
│    二级
│ 一级
│ 一级

9.2.2 规格

属性	取值
容器背景	`#122347` (ZS-004-08) 或 `transparent`（嵌入页面侧栏时）
左侧基线	`1px solid #1A2F5A` (ZS-004-07) 通栏
项高度	`32px`
一级项左 padding	`--spacing-3` (12px)
二级项左 padding	`--spacing-5` (24px)
项间距	`0`（贴合排列）
字号	`14px Regular`

9.2.3 状态配色

状态	一级文字	二级文字	左侧指示条
默认	`#C5CFE0` (ZS-004-02)	`#6E88B0` (ZS-004-04)	无
Hover	`#4096FF` (ZS-002-05)	`#4096FF` (ZS-002-05)	无
激活	`#4096FF` (ZS-002-05)	—	左侧 `2px solid #4096FF`，覆盖容器基线
父级（含激活子项）	`#FFFFFF`	—	—

激活态指示条与基线重合，宽 2px，色压主色蓝 #4096FF
二级项不单独支持激活态：当二级被点中时，其父级一级显示激活态，左侧指示条按父级位置渲染

9.2.4 滚动同步

行为	规则
页面滚动	监听锚点对应区块进入视口的相对位置，自动切换激活态
点击锚点	`behavior: smooth` 滚动到目标，激活指示条 `top` 过渡 `200ms ease-out`
边界处理	滚动到页面顶部 → 第一个锚点激活；到页尾 → 最后一个锚点激活

9.3 回到顶部（BackToTop）

固定在视口右下角的悬浮按钮，向上滚动到页面顶部。

9.3.1 规格

属性	取值
形状	圆形 `40px × 40px`（`border-radius: 50%`）
图标	`↑` 上箭头，`16px`，`#FFFFFF`
距视口右边	`--spacing-5` (24px)
距视口下边	`--spacing-6` (32px)
出现时机	页面 `scrollTop > 200px` 时淡入；回到顶部后淡出
淡入/淡出	`opacity 0 → 1` / `1 → 0`，`200ms ease-out`

9.3.2 状态配色

状态	背景	阴影	图标
正常（默认）	`#1677FF` (ZS-002-06)	`0 2px 8px rgba(22,119,255,0.12)` (§3.1.4 一级阴影)	`#FFFFFF`
悬停（Hover）	`#0958D9` (ZS-002-07)	`0 4px 16px rgba(22,119,255,0.24)` (§3.1.4 二级阴影)	`#FFFFFF`
点按（Active）	`#003EB3` (ZS-002-08)	阴影消失，按下感	`#FFFFFF`
失效 / 不显示	—	—	整体 `opacity: 0`，`pointer-events: none`

Hover 状态下方显示 回到顶部 提示气泡：

属性	取值
文字	`回到顶部`，`12px Regular`
文字颜色	`#C5CFE0` (ZS-004-02)
背景	`#1677FF` (ZS-002-06)
圆角	`2px`
内边距	上下 `4px`，左右 `--spacing-2` (8px)
与按钮间距	`--spacing-2` (8px)
出现时机	Hover 进入 `300ms` 后显示，离开立即消失

9.4 三者的差异与选用

组件	主要用途	视觉特征
页签	同层级内容切换（多 Tab 互斥）	文字 + 下划线（横/纵）
锚点	长页面内章节跳转	文字 + 左侧指示条 + 层级缩进
回到顶部	长页面快速返回起点	圆形悬浮按钮 + 上箭头

10. 步骤条

对应「4.7 导航组件-步骤条」。用于多步流程的进度指引，按布局方向分横向与纵向两类，按使用场景分弹窗步骤条、页面步骤条、纵向步骤条三种。所有颜色取自 ZS-002 主色蓝与 ZS-004 深蓝系。

10.1 步骤节点（公共）

每个步骤由「指示圆 + 标题（可选描述）」组成。指示圆按状态切换三种形态：

状态	圆形外观	圆内符号	来源
已完成（Completed）	描边圆，`2px solid #1677FF`，背景 `transparent`	`✓`（对勾，`#1677FF`）	ZS-002-06
当前（Current / Active）	实心圆，背景 `#1677FF`	步骤数字，`#FFFFFF`	ZS-002-06 / 白
未开始（Upcoming）	描边圆，`1px solid #4A6491`，背景 `transparent`	步骤数字，`#6E88B0`	ZS-004-05 / ZS-004-04
失效（Disabled）	描边圆，`1px solid #2D4473`，背景 `transparent`	步骤数字，`#4A6491`	ZS-004-06 / ZS-004-05

指示圆规格：

属性	取值
直径	`24px`
圆内字号	`12px Bold`（D-DIN 或 Noto Sans Bold）
对勾图标	`12px`，居中
字体水平居中	数字 / 对勾在圆几何中心

标题与描述文字：

元素	状态	字号 / 颜色	来源
标题	已完成 / 当前	`14px Medium`，`#FFFFFF`	—
标题	未开始	`14px Medium`，`#6E88B0`	ZS-004-04
标题	失效	`14px Medium`，`#4A6491`	ZS-004-05
描述	已完成 / 当前	`12px Regular`，`#C5CFE0`	ZS-004-02
描述	未开始 / 失效	`12px Regular`，`#6E88B0` → `#4A6491`	ZS-004-04 → ZS-004-05

连接线（步骤之间）：

类型	色值	来源	样式
已完成段（前一节点已完成）	`#1677FF`	ZS-002-06	`1px dashed`（弹窗）/ `1px solid`（页面）
未完成段	`#4A6491`	ZS-004-05	`1px dashed`

连接线在指示圆两侧水平居中（横向）或正下方垂直（纵向）；线两端与圆外缘留 --spacing-1 (4px) 间隙，避免线穿圆。

10.2 弹窗步骤条（横向 · 描边圆为主）

用于 Modal / Drawer 内引导多步操作的紧凑步骤条。指示圆完成态用描边 + 对勾而非实心，避免在弹窗背景上过于抢眼。

10.2.1 布局

( ✓ ) ┄┄┄┄┄ (●2) ┄┄┄┄┄ ( 3 ) ┄┄┄┄┄ ( 4 ) ┄┄┄┄┄ ( 5 )
 标题         标题         标题         标题         标题
(描述)      (描述)       (描述)       (描述)       (描述)

10.2.2 规格

属性	取值
容器水平 padding	`--spacing-5` (24px)
指示圆 → 标题间距	`--spacing-2` (8px)
标题 → 描述间距	`--spacing-1` (4px)
节点之间水平间距	节点间距自适应等分；连接线占用中间空间
连接线	`1px dashed`，已完成段 `#1677FF`，未完成段 `#4A6491`
文字对齐	标题、描述居中对齐于指示圆下方

10.2.3 两种变体

变体	适用
仅标题	步骤含义已经清晰（如「填写信息 / 确认 / 完成」），节省垂直空间
标题 + 描述	步骤名抽象需要一行小字补充时使用

10.3 页面步骤条（横向 · 实心圆 + 自定义首项标题）

用于页面级流程（如「新建集群」类向导）。和弹窗步骤条相比，已完成态指示圆改为实心填充 + 白色对勾，视觉权重更高；首步标题可显示具体名称（如「新建集群」）而非「标题」占位。

10.3.1 布局

(✓) ────── (●2) ┄┄┄┄┄ ( 3 ) ┄┄┄┄┄ ( 4 ) ┄┄┄┄┄ ( 5 )
新建集群     标题       标题       标题       标题
(描述文本)  (描述文本) (描述文本) (描述文本) (描述文本)

10.3.2 与 §10.2 弹窗步骤条的差异

维度	弹窗步骤条	页面步骤条
完成态圆形	描边圆 + 蓝色对勾	实心蓝圆 + 白色对勾
完成段连接线样式	`1px dashed #1677FF`	`1px solid #1677FF`
标题文字号	`14px Medium`	`14px Medium`（同）
第一项	通用「标题」占位	可显示具体名称（自定义文案）

10.3.3 完成态指示圆补充

角色	色值	来源
已完成圆背景	`#1677FF`	ZS-002-06
已完成圆内对勾	`#FFFFFF`	—
已完成圆边框	无（实心）	—

10.4 纵向步骤条

用于侧栏 / 详情页内的纵向流程指引。两种变体——「仅标题」与「标题 + 描述」。

10.4.1 布局

仅标题:                       标题 + 描述:

(✓) 新建集群                   (✓) 新建集群
 ┊                                  描述文本描述
(●2) 标题                      ┊
 ┊                             (●2) 标题
( 3 ) 标题                          描述文本描述
 ┊                             ┊
( 4 ) 标题                     ( 3 ) 标题
                                    描述文本描述
                               ┊
                               ( 4 ) 标题
                                    描述文本描述

10.4.2 规格

属性	取值
指示圆 → 标题水平间距	`--spacing-2` (8px)
节点垂直间距（仅标题）	`--spacing-5` (24px)，圆心到圆心
节点垂直间距（标题 + 描述）	`--spacing-6` (32px)，圆心到圆心
标题 → 描述间距	`--spacing-1` (4px)
连接线位置	上下两个指示圆正下方垂直，居中于圆心
连接线样式	`1px dashed`，已完成段 `#1677FF`，未完成段 `#4A6491`
文字左对齐	标题与描述左对齐，与指示圆右侧对齐基线

10.4.3 与横向步骤条共用规则

指示圆三态规格沿用 §10.1
已完成态默认用描边 + 对勾（与 §10.2 弹窗一致）；若纵向步骤条用于页面级主流程，可切换为 §10.3 的实心圆变体

10.5 交互与动画

行为	动效
步骤切换（next）	当前圆 `background: transparent → #1677FF`，`200ms ease-out`；同时上一步圆 `border-color: #4A6491 → #1677FF`，再用 `200ms` 切换为对勾图标淡入
步骤切换（prev / 回退）	反向，未完成态恢复 `#4A6491` 边框，圆内数字淡入
连接线高亮	完成段 `border-color: #4A6491 → #1677FF`，`240ms ease-out`
Hover 节点（可点击）	圆边框色暂时变 `#4096FF` (ZS-002-05)，标题文字 `#4096FF`，`120ms ease-out`；不可点击节点（未来步骤）无 hover
点击节点	节点必须已完成才能点（回看），否则视为禁用；点击合法节点触发 `step:change` 事件

10.6 状态机与可达性

当前步 = N	节点 i 的状态
`i < N`	Completed（已完成，可点回看）
`i === N`	Current（当前，不可点）
`i > N`	Upcoming（未开始，不可点）
`i.disabled`	Disabled（被显式禁用，例如条件未满足）

键盘导航：

Tab 顺序在「已完成」节点之间流转，跳过 Current / Upcoming / Disabled
焦点节点圆外加 2px solid #4096FF 焦点环（outline，offset 2px）

屏幕阅读器：

指示圆 role="img"，aria-label="已完成第 N 步" / "当前第 N 步" / "未开始第 N 步"
容器 role="list"，节点 role="listitem"
当前节点额外 aria-current="step"

10.7 CSS Token 参考

:root {
  /* 步骤条节点 */
  --step-circle-size: 24px;
  --step-circle-current-bg: #1677FF;       /* ZS-002-06 */
  --step-circle-current-text: #FFFFFF;
  --step-circle-done-border: #1677FF;      /* ZS-002-06 */
  --step-circle-done-icon: #1677FF;        /* 弹窗变体 */
  --step-circle-done-bg-page: #1677FF;     /* 页面变体:实心 */
  --step-circle-done-icon-page: #FFFFFF;
  --step-circle-upcoming-border: #4A6491;  /* ZS-004-05 */
  --step-circle-upcoming-text: #6E88B0;    /* ZS-004-04 */
  --step-circle-disabled-border: #2D4473;  /* ZS-004-06 */
  --step-circle-disabled-text: #4A6491;    /* ZS-004-05 */

  /* 连接线 */
  --step-line-done: #1677FF;               /* 已完成段 */
  --step-line-upcoming: #4A6491;           /* 未完成段:ZS-004-05 */

  /* 文字 */
  --step-title-active: #FFFFFF;
  --step-title-inactive: #6E88B0;          /* ZS-004-04 */
  --step-desc-active: #C5CFE0;             /* ZS-004-02 */
  --step-desc-inactive: #6E88B0;           /* ZS-004-04 */
}

10.8 三种步骤条的选用决策

场景	选择
Modal / Drawer 内多步表单	§10.2 弹窗步骤条（描边圆，紧凑）
页面级向导（独占大区域）	§10.3 页面步骤条（实心圆，视觉重）
侧栏 / 详情页纵向流程	§10.4 纵向步骤条
步骤数 ≤ 3 且无描述	优先「仅标题」变体
步骤名抽象需补充说明	用「标题 + 描述」变体
步骤数 > 7	不推荐用步骤条，改用「锚点」（§9.2）或分页

11. 面包屑

对应「4.3 导航组件-面包屑」。用于显示当前位置在整个站点层级中的路径，配合「← 返回」按钮支持逐级回溯。颜色取自 ZS-002 主色蓝与 ZS-004 深蓝系。

11.1 标准形态

容器顶部带一个独立的容器 / 边框包裹：

🏠 | 概况 / 总概况

带「返回」按钮的层级形态（一级到四级）：

一级:   ← 返回 │ 现在位置
二级:   ← 返回 │ 上一级位置 / 现在位置
三级:   ← 返回 │ 上二级位置 / 上一级位置 / 现在位置
四级:   ← 返回 │ 上三级位置 / 上二级位置 / 上一级位置 / 现在位置

11.2 规格

属性	取值
容器高度	`40px`
容器背景	`#0C1836` (ZS-004-09)
容器底边	`1px solid #1A2F5A` (ZS-004-07)
容器水平 padding	`--spacing-4` (16px)
字号	`14px Regular`
元素间距（图标 / 文字 / 分隔符之间）	`--spacing-2` (8px)
「返回」与首段路径之间分隔符 `│`	`1px solid #4A6491`，高度 `14px`

11.3 配色

角色	色值	来源	备注
Home 图标 🏠	`#4096FF`	ZS-002-05	默认主色，hover → `#1677FF` (ZS-002-06)
「← 返回」图标 + 文字	`#4096FF`	ZS-002-05	链接样式，hover 显示下划线
历史路径文字（可点击）	`#4096FF`	ZS-002-05	同链接配色
当前位置文字（最后一段）	`#FFFFFF`	—	加粗 `14px Medium`，不可点击
分隔符 `/`	`#4A6491`	ZS-004-05	静态、不可点
分隔符 `│`（返回按钮与路径之间）	`#4A6491`	ZS-004-05	同上
Hover 路径项	`#1677FF`	ZS-002-06	文字色 + 下划线
失效路径项（无对应页）	`#4A6491`	ZS-004-05	`cursor: not-allowed`

11.4 交互规则

点击「← 返回」：逐步向上返回一级（等同浏览器 back）
点击文字路径：快速跳回到对应任意上级页面
当前位置（最后一段）：不响应点击，仅作展示
层级建议：尽可能不超过 4 级；超过 4 级会让面包屑过长，应改用侧栏 / 锚点辅助

11.5 与导航的关系

面包屑不替代主导航（§8）：

主导航 = 「我能去哪些地方」（站点结构）
面包屑 = 「我当前在哪里」（路径回溯）

两者并存时，面包屑紧贴页面主内容区顶部，位于主导航下方、页头（§12）上方。

11.6 CSS 参考

.breadcrumb {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--spacing-4);
  background: #0C1836;
  border-bottom: 1px solid #1A2F5A;
  font-size: 14px;
  gap: var(--spacing-2);
}
.breadcrumb-back     { color: #4096FF; cursor: pointer; }
.breadcrumb-back:hover { color: #1677FF; text-decoration: underline; }
.breadcrumb-sep-bar  { width: 1px; height: 14px; background: #4A6491; }
.breadcrumb-sep      { color: #4A6491; }
.breadcrumb-link     { color: #4096FF; cursor: pointer; }
.breadcrumb-link:hover { color: #1677FF; text-decoration: underline; }
.breadcrumb-current  { color: #FFFFFF; font-weight: 500; }

12. 页头

对应「4.6 导航组件-分页」上半段示意。用于页面主内容区顶部、面包屑下方，承载页面标题与可选的说明 / Tabs。共有 4 种变体。

12.1 通用规格

属性	取值
容器高度	`56px`（仅标题）/ `64px`（含 Tabs）
背景	`#0C1836` (ZS-004-09)
底边	`1px solid #1A2F5A` (ZS-004-07)
水平 padding	`--spacing-5` (24px)
文字基线	垂直居中

12.2 四种变体

12.2.1 基础页头

只有标题：

页头标题

角色	色值 / 字号	来源
标题	`18px Bold`，`#FFFFFF`	—

12.2.2 页头 + 说明

标题后跟一段灰色说明文字：

页头标题  （这是一句简要说明）

角色	色值 / 字号	来源
标题	`18px Bold`，`#FFFFFF`	—
说明文字	`14px Regular`，`#6E88B0`	ZS-004-04
标题 → 说明间距	`--spacing-3` (12px)	—

说明用半角圆括号包裹，颜色与括号一致（不要让括号比文字更醒目）。

12.2.3 页头 + 说明 icon

标题后跟一个可悬停查看说明的图标：

页头标题  ⓘ

角色	色值 / 字号	来源
标题	`18px Bold`，`#FFFFFF`	—
说明 icon `ⓘ` 或 `?`	`16px`，`#6E88B0`	ZS-004-04
Icon hover	`#4096FF`	ZS-002-05
标题 → 图标间距	`--spacing-2` (8px)	—

Hover 弹出 Tooltip（沿用 §9.3.3 Tooltip 配色），承载完整说明文字。

12.2.4 分 Tabs 页头

标题位置直接放横向页签（沿用 §9.1.1 横向页签配色），点击切换右侧主内容区：

标题   标题   标题
─────

复用规则	说明
Tab 配色	完全沿用 §9.1.1 横向页签
Tab 字号	`16px Medium`（页头位置比一般 tab 略大）
Tab 间距	`--spacing-5` (24px)
激活态下划线	`2px solid #4096FF`，宽与文字齐

12.3 与右侧操作区的组合

页头右侧常承载主操作按钮（「+ 新建」、「导出」等）。规则：

按钮组靠右对齐，右 padding 与左 padding 一致 (--spacing-5)
多按钮排列顺序参照 §5.3.4（默认按钮在左、主按钮在右），按钮间距 --spacing-2
Tabs 页头中右侧操作区与 Tabs 同高居中

13. 分页

对应「4.6 导航组件-分页」下半段。三种形态——正常分页 / 精简分页 / 导航式分页——按页面信息量与可用空间选用。

13.1 正常分页

承载大列表，提供页码、跳转、每页条数选择：

共 240 项   < ① 2 3 4 5 … 24 >   每页 [10▾] 条   前往 [   ] 页

13.1.1 元素配色与规格

元素	字号 / 色值	来源 / 说明
「共 N 项」总数文字	`14px Regular`，`#6E88B0`	ZS-004-04
页码按钮（默认）	`14px Regular`，`#C5CFE0`，背景 `transparent`	ZS-004-02
页码按钮（hover）	`#4096FF`，背景 `rgba(22,119,255,0.08)`	ZS-002-05
页码按钮（激活/当前页）	`#FFFFFF`，背景 `#1677FF`（实心圆）	ZS-002-06
页码按钮（失效）	`#4A6491`，背景 `transparent`	ZS-004-05
左右翻页箭头 `<` `>`	`14px`，`#6E88B0`，hover → `#4096FF`	ZS-004-04 → ZS-002-05
翻页箭头失效（首/末页）	`#4A6491`	ZS-004-05
省略号 `…`	`#6E88B0`	ZS-004-04，静态展示，不可点
每页条数下拉 `[10▾]`	沿用 §14.1 输入框规格	高度 `28px`，宽 `60px`
「前往 N 页」输入框	沿用 §14.1 输入框规格	高度 `28px`，宽 `48px`

13.1.2 页码按钮规格

属性	取值
形状	圆形 `28px × 28px`（`border-radius: 50%`）
默认背景	`transparent`
当前页背景	`#1677FF` (ZS-002-06)，实心圆，白色数字
字号	`14px Regular`（数字 D-DIN 或 Noto Sans）
项间距	`--spacing-1` (4px)

13.1.3 元素间距

区段	间距
「共 N 项」→ 翻页区	`--spacing-4` (16px)
翻页区内（箭头 / 页码）	`--spacing-1` (4px)
翻页区 → 每页下拉	`--spacing-5` (24px)
每页下拉 → 前往输入	`--spacing-4` (16px)

13.2 精简分页

承载弹窗 / 表格紧凑场景，只暴露「当前页 / 总页数」与左右翻页：

共 1 项   < [ 1 ] / 10 >

13.2.1 规格

元素	配色 / 备注
「共 N 项」	同 §13.1.1
`<` `>` 翻页箭头	同 §13.1.1
`[ 1 ]` 当前页输入框	沿用 §14.1 输入框规格，高 `28px`，宽 `40px`，居中文字
`/ N` 总页数	`14px Regular`，`#6E88B0` (ZS-004-04)
元素间距	`--spacing-2` (8px)

13.2.2 与正常分页的差异

维度	正常分页	精简分页
页码	点击式数字列表	输入框 + 总页数文字
跳转方式	点击数字 / 前往输入	直接修改输入框
每页条数	暴露下拉	不暴露（默认值由调用方决定）
适用	列表 / 表格主内容区	弹窗、抽屉、卡片内嵌列表

13.3 导航式分页

承载长文 / 详情页的「上一篇 / 下一篇」式翻页，只有方向，不暴露页码：

下一页  »
«   上一页

13.3.1 规格

元素	配色 / 备注
「下一页」/「上一页」文字 + 箭头	`14px Regular`，`#4096FF` (ZS-002-05)
Hover	`#1677FF` (ZS-002-06) + 下划线
失效（首/末篇）	`#4A6491` (ZS-004-05)，`cursor: not-allowed`
箭头位置	`下一页 »`（箭头在后）/ `« 上一页`（箭头在前）
文字 → 箭头间距	`--spacing-2` (8px)
两个按钮纵向排列时项间距	`--spacing-3` (12px)

13.4 三种分页的选用决策

场景	选择
后台列表 / 表格	§13.1 正常分页
Modal / Drawer 内嵌列表	§13.2 精简分页
详情页前后翻	§13.3 导航式分页
列表少于 1 页（项数 ≤ pageSize）	不显示分页
项数明确但页码可能很多（>50 页）	用正常分页 + 隐藏中间页码（`...` 省略）

14. 输入框（搜索框）

对应设计稿「输入框.png」。按使用场景分三类：基本搜索框 / 后台系统搜索框 / 页面头部搜索框。配色全部从 ZS-002 主色蓝与 ZS-004 深蓝系取。

14.1 公共规格

所有搜索框共用同一套尺寸 / 边框规格：

属性	默认（正常）	小号
高度	`32px`	`28px`
水平 padding	`--spacing-3` (12px)	`--spacing-2` (8px)
圆角	`2px`（§4.1）	`2px`
字号	`14px Regular`	`14px Regular`
文字色	`#C5CFE0` (ZS-004-02)	同
占位符色	`#6E88B0` (ZS-004-04)	同
背景	`#0C1836` (ZS-004-09)	同

14.1.1 边框状态

状态	边框	来源
默认	`1px solid #1A2F5A`	ZS-004-07
Hover	`1px solid #4096FF`	ZS-002-05
Focus	`1px solid #1677FF` + 外发光 `0 0 0 2px rgba(22,119,255,0.16)`	ZS-002-06
失效	`1px solid #2D4473`，背景 `rgba(22,119,255,0.04)`	ZS-004-06
错误	`1px solid #F5222D` + 外发光 `0 0 0 2px rgba(245,34,45,0.16)`	ZS-001-06

14.2 基本搜索框

14.2.1 基础搜索框

输入框尾部带 🔍 图标，回车或点击图标触发搜索：

[ 搜索                  🔍 ]

角色	色值 / 规格	来源
搜索图标 🔍	`16px`，`#6E88B0`	ZS-004-04
图标 hover	`#4096FF`	ZS-002-05
图标 → 输入边缘间距	`--spacing-2` (8px)	—

14.2.2 分类搜索框（带前缀下拉）

输入框左侧拼一个分类下拉，常用于「按协议搜 IP」等场景：

[ http:// ▾ ] [ 搜索 IP 地址          🔍 ]

角色	色值 / 规格	备注
前缀下拉宽度	`auto`，最小 `72px`	内容自适应
前缀下拉与输入框	共用同一组边框，中间无缝（公用一条 `1px #1A2F5A` 分隔）	视为一体控件
前缀下拉箭头 `▾`	`12px`，`#6E88B0`	hover → `#4096FF`
整体 focus 行为	焦点落到输入框时，前缀下拉的边框也同步高亮	—

14.3 后台系统常用搜索框

输入框 + 紧贴右侧的实心蓝色搜索按钮，常用于后台主内容区列表筛选：

[ 🔍  搜索任务集名称/负责人        ] [ 搜索 ]

14.3.1 规格

元素	色值 / 规格	来源
左侧搜索图标 🔍	`16px`，`#6E88B0`	ZS-004-04
图标 → 文字间距	`--spacing-2` (8px)	—
输入框右边框	无（与按钮无缝拼接）	—
按钮	沿用 §5.2.1 主按钮，圆角 `2px`，文字 `搜索`	—
按钮高度	与输入框一致 `32px`	—
按钮左侧	与输入框紧贴，无间距	—

14.4 页面头部搜索框

页头位置的搜索控件，支持四种扩展：单行 / 高级搜索 / 历史记录 / 输入联想。

14.4.1 单行（最简）

[ 输入的文字                    ] [ 搜索 ]

规格同 §14.3，仅省略左侧 🔍 图标，让输入文字占满。

14.4.2 含高级搜索切换

右侧叠加一个文字按钮「高级搜索 ▾」，展开后显示模式选项：

[ 输入的文字              ] [ 搜索 ]   高级搜索 ▾
                                       ○ 模糊匹配   ● 精准匹配

元素	色值 / 规格	来源
「高级搜索 ▾」文字按钮	`14px Regular`，`#4096FF`，hover `#1677FF`	ZS-002-05 → ZS-002-06
「高级搜索」与「搜索」按钮间距	`--spacing-3` (12px)	—
单选项「模糊匹配 / 精准匹配」	沿用通用 Radio 配色：未选 `1px solid #6E88B0`，已选实心 `#1677FF`	—
单选项 → 搜索框纵向间距	`--spacing-2` (8px)	—

14.4.3 含历史记录

输入框下方显示最近搜索词列表，点击直接用该词搜索：

[ 输入的文字              ] [ 搜索 ]

搜索记录词、搜索记录词、记录词

元素	色值 / 规格	来源
历史记录文字	`12px Regular`，`#4096FF`	ZS-002-05
项间分隔符（顿号 `、`）	`#4A6491`	ZS-004-05（与文字色不同，弱化分隔）
历史项 hover	`#1677FF` + 下划线	ZS-002-06
历史区与搜索框纵向间距	`--spacing-2` (8px)	—

14.4.4 含输入联想下拉

用户输入时，下方弹出联想词面板：

[ 这是                    ] [ 搜索 ]
┌─────────────────────────────────┐
│ 这是搜索输入联想词              │
│ 这是搜索输入联想词              │
│ 这是搜索输入联想词              │
│ 这是联想词                      │
│ 这是联想词悬浮         ←hovered │
│ ……                              │
└─────────────────────────────────┘

面板规格

属性	取值
背景	`#122347` (ZS-004-08)
边框	`1px solid #1A2F5A` (ZS-004-07)
阴影	`0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影变体）
圆角	`2px`（与输入框一致）
项高度	`36px`
项水平 padding	`--spacing-3` (12px)
项字号	`14px Regular`，`#C5CFE0` (ZS-004-02)
面板宽度	与输入框等宽（不含右侧按钮）
面板与输入框纵向间距	`--spacing-1` (4px)

项状态

状态	背景	文字
默认	`transparent`	`#C5CFE0`
Hover（鼠标 / 键盘焦点）	`rgba(22,119,255,0.16)` 或 `#1A2F5A` (ZS-004-07)	`#FFFFFF`
已点击（点选后回填输入框）	—	—

键盘导航

↑ / ↓ 在联想词之间移动焦点（焦点项视觉等价于 Hover）
Enter 选中焦点项并回填输入框 + 触发搜索
Esc 关闭面板，焦点回到输入框

14.4.5 联想下拉 + 历史记录的关系

未输入时：可显示历史记录（§14.4.3 横向展开形态）
开始输入时：历史记录被联想下拉取代，不要并存
清空输入框：回到历史记录显示

14.5 三种搜索框的选用决策

场景	选择
表单内 / 卡片内的辅助搜索	§14.2.1 基础搜索框（图标内嵌）
需要按类型 / 协议过滤的搜索	§14.2.2 分类搜索框（带前缀下拉）
后台列表 / 表格顶部筛选	§14.3 后台搜索框（输入 + 实心按钮）
页面头部全局搜索	§14.4 页面头部搜索框（按需开启高级 / 历史 / 联想）

14.6 CSS Token 参考

:root {
  --search-bg:            #0C1836;  /* ZS-004-09 */
  --search-border:        #1A2F5A;  /* ZS-004-07 */
  --search-border-hover:  #4096FF;  /* ZS-002-05 */
  --search-border-focus:  #1677FF;  /* ZS-002-06 */
  --search-border-error:  #F5222D;  /* ZS-001-06 */
  --search-text:          #C5CFE0;  /* ZS-004-02 */
  --search-placeholder:   #6E88B0;  /* ZS-004-04 */
  --search-icon:          #6E88B0;
  --search-icon-hover:    #4096FF;

  /* 联想下拉 */
  --suggest-bg:           #122347;  /* ZS-004-08 */
  --suggest-item-hover:   rgba(22,119,255,0.16);
  --suggest-item-text:    #C5CFE0;
  --suggest-item-hover-text: #FFFFFF;

  /* 历史记录 */
  --history-text:         #4096FF;
  --history-text-hover:   #1677FF;
  --history-sep:          #4A6491;
}

15. 选择器（Select / Multi-Select / Cascader）

对应设计稿「多项选择.png」。覆盖多项选择与多项带搜索两种主要变体（基础单选选择器同规格，仅触发器不渲染 Tag、面板项不带复选框；级联选择器原则相同，差异在面板分栏横向铺开）。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §14 搜索框完全对齐。

15.1 公共规格

15.1.1 触发器（Trigger）

触发器即「请选择 ▾」或「已选 Tag … ▾」那一行。尺寸、边框、状态机与 §14.1 输入框完全对齐：

属性	取值	来源
高度	`32px`	§14.1
圆角	`2px`	§4.1
水平 padding	`--spacing-3` (12px)	§7.1
背景	`#0C1836` (ZS-004-09)	—
边框	`1px solid #1A2F5A` (ZS-004-07)	—
占位文字 "请选择"	`14px Regular`，`#6E88B0` (ZS-004-04)	—
右侧箭头 `▾`	`12px`，`#6E88B0`，hover `#4096FF`	ZS-002-05

边框状态机（默认 / hover / focus / 失效 / 错误）直接复用 §14.1.1。

15.1.2 下拉面板（Panel）

面板沿用 §14.4.4 联想下拉的容器规格，仅项内容不同：

属性	取值
背景	`#122347` (ZS-004-08)
边框	`1px solid #1A2F5A` (ZS-004-07)
阴影	`0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影）
圆角	`2px`
项高度	`36px`
项水平 padding	`--spacing-3` (12px)
项字号	`14px Regular`，`#C5CFE0` (ZS-004-02)
面板宽度	与触发器等宽（搜索框、底部按钮均内嵌等宽）
面板与触发器纵向间距	`--spacing-1` (4px)

15.1.3 项状态

状态	背景	文字
默认	`transparent`	`#C5CFE0` (ZS-004-02)
Hover / 键盘焦点	`rgba(22,119,255,0.16)` 或 `#1A2F5A`	`#FFFFFF`
已选中	`transparent`（依赖左侧复选框示态，不改行底色）	`#FFFFFF`
禁用	`transparent`	`#4A6491` (ZS-004-05)

点击行的任意位置等价于点击复选框（命中区 = 整行）。

15.2 多项选择

触发器内渲染已选 Tag 列表而不是单行文字；面板项左侧带复选框，多选不关闭面板。

���─────────────────────────────────────┐
│ n1 ×   n2 ×   +1 ×             ▾  │  ← 触发器（已选 Tag）
└─────────────────────────────────────┘
┌─────────────────────────────────────┐  ← 下拉面板
│ ☑ n1                                │
│ ☐ n2                                │
│ ☐ n3                                │
│ ☐ n4                                │
│ ☐ n5                                │
├─────────────────────────────────────┤
│ [+ 添加项]                          │  ← 可选：底部「添加」按钮（§15.2.4）
└─────────────────────────────────────┘

15.2.1 已选 Tag

触发器内每个已选项渲染为一颗 Tag。实心主色蓝底 + 白字，右侧带关闭按钮 ×。

元素	色值 / 规格	来源
背景	`#1677FF` (ZS-002-06)	—
文字	`12px Regular`，`#FFFFFF`	—
圆角	`2px`	—
内边距	`2px 6px`	—
Tag 间距	`--spacing-1` (4px)	§7.1
关闭按钮 `×`	`12px`，`rgba(255,255,255,0.72)`，hover `#FFFFFF`	—
折叠展示 `+N ×`	当选中超过宽度可容纳时，把剩余 N 项收成一颗 `+N ×` Tag。Hover 显示 Tooltip 列出剩余项名；点击 `×` 清空溢出选项	—

15.2.2 复选项

元素	色值 / 规格	来源
复选框尺寸	`14px × 14px`	—
复选框圆角	`2px`	—
未选边框	`1px solid #6E88B0` (ZS-004-04)	—
未选背景	`transparent`	—
已选填充	`#1677FF` (ZS-002-06)	—
已选勾 ✓	`#FFFFFF`，描边 `2px`	—
半选填充	`#1677FF`	—
半选指示	中央横线 `width 8px / height 2px / #FFFFFF`	—
Hover 边框	`#4096FF` (ZS-002-05)	—
禁用边框	`#4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)`	—
复选框 → 文字间距	`--spacing-2` (8px)	§7.1

15.2.3 全选模式（顶部「全部」节点）

面板首行可选地渲染一个「全部」聚合节点，作用类似一次性勾 / 取消所有项：

┌─────────────────────────────────────┐
│ ▢ 全部                              │  ← 半选 / 未选 / 全选三态
│ ☑ n1                                │
│ ☐ n2                                │
└─────────────────────────────────────┘

子状态	复选框外观	触发动作
一个都没选	空心，边框 `#6E88B0`	点击 → 勾上全部子项
部分选中	实心 `#1677FF` + 中央 `2px` 白色横线（半选）	点击 → 勾上全部剩余未选
全部选中	实心 `#1677FF` + 白色勾 ✓	点击 → 清空全部

文字 "全部" 与下方项同色 #C5CFE0，不加粗。

15.2.4 底部「+ 添加项」按钮

面板底部可选地嵌入一颗虚线主色按钮，常用于「在已知池子里允许用户就地新增一项」（如标签、自定义分类）：

┌─────────────────────────────────────┐
│ [+ 正常]                            │
└─────────────────────────────────────┘

元素	色值 / 规格	来源
高度	`32px`（与复选项行齐）	—
边框	`1px dashed #1677FF` (ZS-002-06)	—
背景	`transparent`	—
文字	`14px Regular`，`#4096FF` (ZS-002-05)	—
前缀图标 `+`	`12px`，与文字同色	—
Hover	背景 `rgba(22,119,255,0.16)`，文字 `#1677FF`	ZS-002-05 → ZS-002-06
Active	背景 `rgba(22,119,255,0.24)`，文字 `#FFFFFF`	—
与最后一条复选项纵向分隔	上方分割线 `1px solid #1A2F5A` + `--spacing-1` (4px) 间距	§6.1

点击行为由业务自行实现（如弹出输入框、内联编辑）。

15.3 多项带搜索

在 §15.2 基础上，面板顶部嵌入一行搜索框，输入时实时过滤复选项列表。其它结构（已选 Tag / 复选项 / 全选 / 底部添加）完全沿用 §15.2。

┌─────────────────────────────────────┐
│ n1 ×   +1 ×                    ▾  │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ [ 搜索                       🔍 ]   │  ← 嵌入式搜索框（§15.3.1）
├─────────────────────────────────────┤
│ ▢ 全部                              │
│ ☑ n1                                │
│ ☐ n2                                │
│ ☐ n3                                │
└─────────────────────────────────────┘

15.3.1 嵌入式搜索框

搜索框尺寸采用 §14.1 公共规格的小号（高度 28px），保持与面板视觉上的"嵌入感"：

属性	取值
高度	`28px`（小号）
水平 padding	`--spacing-2` (8px)
圆角	`2px`
背景	`#0C1836` (ZS-004-09，比面板背景深一档)
边框	`1px solid #1A2F5A` (ZS-004-07)
文字	`14px Regular`，`#C5CFE0`
占位符	"搜索"，`#6E88B0`
右侧 🔍 / ⊗ 图标	`14px`，`#6E88B0`，hover `#4096FF`
搜索框 → 列表项纵向间距	`--spacing-2` (8px) + 分割线 `1px solid #1A2F5A`

输入非空时右侧图标切换为 ⊗（清空），点击清空输入并恢复完整列表。

15.3.2 加载与空状态

异步获取选项（如远程搜索）时，列表区按以下规则渲染：

状态	渲染
加载中	文字 "加载中…"，单行居左，`14px Regular`，`#6E88B0`，行高 `32px`
无匹配	文字 "无匹配项"，同上
网络错误	文字 "加载失败，点击重试"，`#FF7875` (ZS-001-04)，可点击

15.4 选用决策

场景	选择
候选池 ≤ 10 项，单值	§15.1 公共规格 + 去掉复选框（基础单选）
候选池 ≤ 10 项，多值	§15.2 多项选择
候选池 > 10 项 / 不可枚举	§15.3 多项带搜索
候选池有层级关系（如部门 / 区域）	级联选择器：每级独立面板横向铺开，单级内部规格同 §15.1~15.3
允许用户新增不在候选池的项	在 §15.2 / §15.3 末尾启用 §15.2.4「+ 添加项」按钮

15.5 CSS Token 参考

:root {
  /* 触发器 —— 复用 §14 搜索框 */
  --select-trigger-bg:          var(--search-bg);            /* #0C1836 */
  --select-trigger-border:      var(--search-border);        /* #1A2F5A */
  --select-trigger-placeholder: var(--search-placeholder);   /* #6E88B0 */
  --select-trigger-arrow:       #6E88B0;
  --select-trigger-arrow-hover: #4096FF;

  /* 下拉面板 —— 复用 §14.4.4 联想 */
  --select-panel-bg:            var(--suggest-bg);           /* #122347 */
  --select-panel-border:        #1A2F5A;
  --select-item-text:           var(--suggest-item-text);    /* #C5CFE0 */
  --select-item-hover-bg:       var(--suggest-item-hover);   /* rgba(22,119,255,0.16) */
  --select-item-hover-text:     var(--suggest-item-hover-text); /* #FFFFFF */
  --select-item-disabled:       #4A6491;                     /* ZS-004-05 */

  /* 已选 Tag */
  --select-tag-bg:              #1677FF;                     /* ZS-002-06 */
  --select-tag-text:            #FFFFFF;
  --select-tag-close:           rgba(255,255,255,0.72);
  --select-tag-close-hover:     #FFFFFF;

  /* 复选框 */
  --check-border:               #6E88B0;                     /* ZS-004-04 */
  --check-border-hover:         #4096FF;                     /* ZS-002-05 */
  --check-fill:                 #1677FF;                     /* ZS-002-06 */
  --check-mark:                 #FFFFFF;
  --check-disabled-border:      #4A6491;                     /* ZS-004-05 */
  --check-disabled-bg:          rgba(22,119,255,0.04);

  /* 底部「+ 添加项」 */
  --select-add-border:          #1677FF;                     /* ZS-002-06 */
  --select-add-text:            #4096FF;                     /* ZS-002-05 */
  --select-add-hover-bg:        rgba(22,119,255,0.16);
  --select-add-hover-text:      #1677FF;
  --select-add-active-bg:       rgba(22,119,255,0.24);
  --select-add-active-text:     #FFFFFF;

  /* 加载 / 错误 */
  --select-loading-text:        #6E88B0;
  --select-error-text:          #FF7875;                     /* ZS-001-04 */
}

16. 单选与多选（Radio / Checkbox）

对应设计稿「多选框.png」。本章定义独立作为表单字段使用的单选（Radio）和多选（Checkbox）两类原子控件，包含未选 / 已选 / 未选禁用 / 已选禁用四种状态。§15.2.2「多项选择的复选项」中的复选框直接复用本章 §16.3 规格，本章是单一真源。

16.1 公共规格

属性	取值
控件尺寸	`14px × 14px`
控件描边宽度	`1px`
控件 → 文字间距	`--spacing-2` (8px)（§7.1）
文字字号	`14px Regular`
行高	`20px`（点击命中区与文字垂直对齐）
同一组横向相邻项的间距	`--spacing-6` (24px)（§7.1）
同一组纵向相邻项的间距	`--spacing-3` (12px)（§7.1）

整行（控件 + 文字）任意位置可点击 = 等效切换该项状态。

16.2 单选（Radio）

一组互斥选项中只能选中一个。视觉为圆形描边 + 内圆实心点。

○ 未选        ● 已选        ○ 未选禁用        ● 已选禁用
                                          (整组降饱和)

16.2.1 外观规格

状态	外环	内圆	文字
未选	`1px solid #4096FF` (ZS-002-05) + 背景 `transparent`	—	`#C5CFE0` (ZS-004-02)
未选 Hover	`1px solid #1677FF` (ZS-002-06)	—	`#FFFFFF`
已选	`1px solid #1677FF` (ZS-002-06)	中心实心圆 `6px × 6px`，`#1677FF`	`#FFFFFF`
已选 Focus	外环外加 `0 0 0 2px rgba(22,119,255,0.16)` 焦点环	—	`#FFFFFF`
未选禁用	`1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)`	—	`#4A6491`
已选禁用	`1px solid #4A6491` (ZS-004-05)	中心实心圆 `6px × 6px`，`#4A6491`	`#4A6491`

外环与内圆均为正圆（border-radius: 50%）。

16.2.2 与 label 组合使用

「基本使用-组合」场景：选中某 Radio 项后，下方展开关联输入字段（如 Antd 的 Form.Item 嵌入式组合）。

● 已选

   lable: [                    ]
   lable: [                    ]

元素	规格
Radio → 下方第一行 label 纵向间距	`--spacing-3` (12px)（§7.1）
嵌入字段左缩进	与 Radio 文字左边缘对齐（即外环宽 14px + 间距 8px = 22px 左缩进）
嵌入字段的 label 与 input	沿用 §14.1 输入框规格
嵌入区分组背景	可选地用 `#1A2F5A` (ZS-004-07) 作浅色卡片底色，强化"属于该 Radio"的视觉归属

16.3 多选（Checkbox）

多个选项可同时选中，互不影响。视觉为方形描边 + 内填勾 ✓。

☐ 未选        ☑ 已选        ☐ 未选禁用        ☑ 已选禁用
                                          (整组降饱和)

16.3.1 外观规格

状态	边框 / 背景	勾 ✓	文字
未选	`1px solid #4096FF` (ZS-002-05) + 背景 `transparent`	—	`#C5CFE0` (ZS-004-02)
未选 Hover	`1px solid #1677FF` (ZS-002-06)	—	`#FFFFFF`
已选	实心填充 `#1677FF` (ZS-002-06)	`#FFFFFF`，描边 `2px`	`#FFFFFF`
已选 Focus	外加 `0 0 0 2px rgba(22,119,255,0.16)` 焦点环	`#FFFFFF`	`#FFFFFF`
半选	实心填充 `#1677FF` (ZS-002-06)	中央横线 `8px × 2px`，`#FFFFFF`	`#FFFFFF`
未选禁用	`1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)`	—	`#4A6491`
已选禁用	实心填充 `#4A6491` (ZS-004-05)	`#C5CFE0` 或 `rgba(255,255,255,0.4)`	`#4A6491`

复选框统一圆角 2px（§4.1）。

16.3.2 与 label 组合使用

与 §16.2.2 完全一致 —— Checkbox 选中后下方展开嵌入式输入字段，缩进与间距规格相同（左缩进 22px、纵向间距 12px）。

☑ 已选

   lable: [                    ]
   lable: [                    ]

16.4 状态对照表

状态	Radio 外环	Radio 内圆	Checkbox 外框	Checkbox 勾	文字
未选	`#4096FF` 描边	—	`#4096FF` 描边	—	`#C5CFE0`
Hover	`#1677FF` 描边	—	`#1677FF` 描边	—	`#FFFFFF`
已选	`#1677FF` 描边	`#1677FF` 6px 圆	`#1677FF` 填充	`#FFFFFF` ✓	`#FFFFFF`
半选（仅 Checkbox）	—	—	`#1677FF` 填充	`#FFFFFF` 横线	`#FFFFFF`
Focus	+ `0 0 0 2px rgba(22,119,255,0.16)`	—	+ `0 0 0 2px rgba(22,119,255,0.16)`	—	`#FFFFFF`
未选禁用	`#4A6491` 描边	—	`#4A6491` 描边	—	`#4A6491`
已选禁用	`#4A6491` 描边	`#4A6491` 6px 圆	`#4A6491` 填充	`#C5CFE0` ✓	`#4A6491`

16.5 与 §15.2.2 的关系

§15.2.2「多项选择面板内的复选项」直接复用本章 §16.3 的复选框外观规格，唯一差异：

在多项选择下拉面板里，未选状态边框是 #6E88B0 (ZS-004-04，更"灰"的占位色)，而非本章 §16.3 默认的 #4096FF（更"蓝"的强调色）
原因：下拉面板里项数多，所有复选框同时蓝色描边会过于喧闹；独立表单字段里数量少（通常 2–4 项），用强调色更醒目

如需统一也可以全面采用本章规格 —— 二选一即可，但一个项目内部应保持一致。

16.6 CSS Token 参考

:root {
  /* 公共 */
  --field-size:                 14px;
  --field-border-w:             1px;
  --field-radius:               2px;          /* 仅 Checkbox 用 */
  --field-text:                 #C5CFE0;      /* ZS-004-02 */
  --field-text-hover:           #FFFFFF;
  --field-text-disabled:        #4A6491;      /* ZS-004-05 */
  --field-focus-ring:           0 0 0 2px rgba(22,119,255,0.16);

  /* Radio */
  --radio-border:               #4096FF;      /* ZS-002-05 */
  --radio-border-hover:         #1677FF;      /* ZS-002-06 */
  --radio-border-checked:       #1677FF;
  --radio-dot:                  #1677FF;      /* 中心 6×6 实心 */
  --radio-border-disabled:      #4A6491;      /* ZS-004-05 */
  --radio-dot-disabled:         #4A6491;
  --radio-bg-disabled:          rgba(22,119,255,0.04);

  /* Checkbox */
  --checkbox-border:            #4096FF;      /* ZS-002-05 */
  --checkbox-border-hover:      #1677FF;      /* ZS-002-06 */
  --checkbox-fill-checked:      #1677FF;      /* ZS-002-06 */
  --checkbox-mark:              #FFFFFF;
  --checkbox-border-disabled:   #4A6491;      /* ZS-004-05 */
  --checkbox-fill-disabled:     #4A6491;
  --checkbox-mark-disabled:     #C5CFE0;
  --checkbox-bg-disabled:       rgba(22,119,255,0.04);

  /* 组合：嵌入式 label + 输入框（§16.2.2 / §16.3.2） */
  --field-group-indent:         22px;         /* 14px 控件 + 8px 间距 */
  --field-group-gap-y:          var(--spacing-3); /* 12px */
}

17. 日期选择器（DatePicker）

对应设计稿「日期时间筛选框.png」。覆盖单日期选择与日期范围选择两种场景。面板包含左侧快捷模式（按天 / 按周 / 按月 / 自定义）、起止输入区、双月日历主体、底部确认按钮四块。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §14 搜索框 / §15 选择器完全对齐。

17.1 触发器（Trigger）

触发器即「2021-12-09 📅」那一行。规格与 §14.1 输入框完全一致：

属性	取值	来源
高度	`32px`	§14.1
圆角	`2px`	§4.1
水平 padding	`--spacing-3` (12px)	§7.1
背景	`#0C1836` (ZS-004-09)	—
边框	`1px solid #1A2F5A` (ZS-004-07)	—
默认日期文字	`14px Regular`，`#C5CFE0` (ZS-004-02)；占位时 "请选择日期" 用 `#6E88B0` (ZS-004-04)	—
右侧 📅 图标	`14px`，`#6E88B0`，hover `#4096FF`	ZS-002-05

边框状态机（默认 / hover / focus / 失效 / 错误）直接复用 §14.1.1。

范围选择触发器变体：宽度自动延展，内显示 2021-12-09 至 2022-01-09。

17.2 下拉面板（Panel）

面板为左 + 右两栏组合：

┌──────────┬───────────────────────────────────────────────────────┐
│ 按天   › │ [ 2021-12-09 ⊗ ]   至   [ 2021-12-09 ⊗ ]              │
│ 按周   › ├───────────────────────────────────────────────────────┤
│ 按月   › │ « < 2021 年 12 月 > »    « < 2022 年 1 月 > »          │
│ 自定义   │  日 一 二 三 四 五 六     日 一 二 三 四 五 六          │
│          │  29 30  1  2  3  4  5    29 30  1  2  3  4  5         │
│          │   6  7  8 ⓿ 10 11 12     6  7  8 ⓿ 10 11 12          │
│          │  13 14 ▓▓ ▓▓ ▓▓ ▓▓ ▓▓     ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓          │
│          │  20 ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓     ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓          │
│          │  27 ▓▓ ▓▓ ▓▓ ▓▓  1  2     3  4  5  6  7  8  9          │
│          │   3  4  5  6  7  8  9     ……                          │
│          ├───────────────────────────────────────────────────────┤
│          │                                       [确定] [取消]  │
└──────────┴───────────────────────────────────────────────────────┘
   ⓿ = 起止日（实心蓝圆）        ▓▓ = 范围内（浅蓝底矩形）

17.2.1 面板容器规格

属性	取值
背景	`#122347` (ZS-004-08)
边框	`1px solid #1A2F5A` (ZS-004-07)
阴影	`0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影）
圆角	`2px`
与触发器纵向间距	`--spacing-1` (4px)
整体宽度	由左栏宽 `80px` + 右栏（双月并列）自适应得出
左右栏分隔线	`1px solid #1A2F5A`（ZS-004-07）

17.3 左侧快捷模式（Sidebar）

属性	取值
宽度	`80px`
项高度	`36px`
水平 padding	`--spacing-3` (12px)
字号	`14px Regular`
右侧 `›` 图标（除"自定义"外）	`12px`，与文字同色

17.3.1 项状态

状态	背景	文字
默认	`transparent`	`#C5CFE0` (ZS-004-02)
Hover	`rgba(22,119,255,0.16)`	`#FFFFFF`
已选	`#1677FF` (ZS-002-06)	`#FFFFFF`

17.3.2 四种模式语义

模式	行为
按天	点击日期格 → 立即选中单日，关闭面板，触发器显示该日
按周	hover 任意日期格 → 整周高亮，点击 → 选中该周
按月	切换到月视图（日期格变成 12 个月名），点击 → 选中该月
自定义	默认显示双月日历，支持选中起止日做范围（详见 §17.5）

17.4 起止日期输入区（Range Inputs）

仅在自定义模式下显示在右栏顶部：

[ 2021-12-09 ⊗ ]   至   [ 2021-12-09 ⊗ ]

元素	色值 / 规格	来源
输入框	沿用 §14.1 公共规格，宽度 `132px`，只读（点击日历格回填，不直接输入）	§14.1
中间 "至" 文字	`14px Regular`，`#6E88B0` (ZS-004-04)，左右 padding `--spacing-3` (12px)	—
右侧 `⊗` 清空按钮	`14px`，`#6E88B0`，hover `#4096FF`	ZS-002-05
输入区 → 日历主体纵向间距	`--spacing-3` (12px) + 分割线 `1px solid #1A2F5A`	§6.1
整行右内 padding	`--spacing-4` (16px)	§7.1

未选起 / 止时对应输入框留空显示占位 "开始日期" / "结束日期"（#6E88B0）。

17.5 双月日历主体（Calendar Grid）

并列展示当月与下月两张日历，便于跨月选范围。

17.5.1 标题栏

« < 2021 年 12 月 > »

元素	色值 / 规格
年月文字	`14px Medium`，`#C5CFE0` (ZS-004-02)
翻页箭头 `‹ ›`	`14px`，`#6E88B0`，hover `#4096FF`
翻年箭头 `« »`	`14px`，`#6E88B0`，hover `#4096FF`
标题栏高度	`36px`
双月之间间距	`--spacing-6` (24px)（§7.1）

行为：« » 翻年；‹ › 翻月。左日历翻动时右日历同步前移一月，保持"双月连续"。

17.5.2 星期表头

属性	取值
文字	`日一二三四五六`
字号	`12px Regular`
颜色	`#6E88B0` (ZS-004-04)
行高	`28px`

17.5.3 日期格规格

属性	取值
单元尺寸	`28px × 28px`（点击命中区）
数字字号	`14px Regular`
圆角	`50%`（已选时实心圆）
行间距	`0`（紧凑排列）

17.5.4 日期格状态

状态	背景	文字
当月普通	`transparent`	`#C5CFE0` (ZS-004-02)
上下月填充（如 12 月日历里显示的 11/29、11/30、1/1、1/2）	`transparent`	`#4A6491` (ZS-004-05)
今天（无边框样式）	`transparent` + `1px solid #1677FF`	`#C5CFE0`
Hover	`rgba(22,119,255,0.16)`	`#FFFFFF`
已选起止日	实心圆 `#1677FF` (ZS-002-06)	`#FFFFFF`
范围内（起止之间）	`rgba(22,119,255,0.16)` 矩形（无圆角，左右相连成连续色带）	`#FFFFFF`
范围内 + 端点	矩形底色 + 端点实心圆叠加（视觉上"圆形扣"在色带头尾）	`#FFFFFF`
禁用（超出 min/max）	`transparent`	`#4A6491`，鼠标 `not-allowed`

⚠️ 范围色带的实现要点：范围内日期格不能各自圆角，否则中间会出现空隙。推荐方案：每行整体作为容器，范围内的日期用同色底向左右各延伸 4px 模拟连续；端点处再叠加 28×28 实心圆。

17.6 底部「确定 / 取消」按钮

元素	规格	来源
区域高度	`48px`
顶部分割线	`1px solid #1A2F5A` (ZS-004-07)	§6.1
右内 padding	`--spacing-4` (16px)	§7.1
按钮对齐	右对齐
「确定」	沿用 §5.2.1 主按钮（实心 `#1677FF`），尺寸"小号"`28px`	§5.2.1
「取消」	沿用 §5.2.2 默认按钮（描边 + 透明底），尺寸"小号"`28px`	§5.2.2
两按钮间距	`--spacing-2` (8px)	§7.1

行为：

「确定」 → 提交当前选择，关闭面板，触发器显示选中值
「取消」 → 丢弃临时选择，关闭面板，触发器值不变

按 Esc 等价于「取消」；按 Enter 等价于「确定」（当选择合法时）。

17.7 选用决策与变体

场景	选择
单日期	触发器 + 单月日历（无左侧快捷栏，无起止输入区）
日期范围（常见筛选）	完整组合：左侧快捷栏 + 双月日历 + 起止输入区
仅按周 / 按月 / 按季度	左侧只保留对应模式项；右侧日历切换为相应粒度
带时间（小时 / 分）	在 §17.4 起止输入区下方追加时分选择列（24h 滚轮，未在本节展开）
多日期独立选（非连续）	不推荐用本组件 —— 改用 §15 多项选择 + 日期值列表

17.8 CSS Token 参考

:root {
  /* 触发器 —— 复用 §14 搜索框 */
  --date-trigger-bg:            var(--search-bg);            /* #0C1836 */
  --date-trigger-border:        var(--search-border);        /* #1A2F5A */
  --date-trigger-text:          var(--search-text);          /* #C5CFE0 */
  --date-trigger-placeholder:   var(--search-placeholder);   /* #6E88B0 */
  --date-trigger-icon:          #6E88B0;
  --date-trigger-icon-hover:    #4096FF;                     /* ZS-002-05 */

  /* 面板 —— 复用 §14.4.4 联想 */
  --date-panel-bg:              var(--suggest-bg);           /* #122347 */
  --date-panel-border:          #1A2F5A;
  --date-panel-divider:         #1A2F5A;                     /* 左右栏 + 顶/底分割线 */

  /* 左侧快捷栏 */
  --date-sidebar-w:             80px;
  --date-sidebar-item-h:        36px;
  --date-sidebar-text:          #C5CFE0;                     /* ZS-004-02 */
  --date-sidebar-text-hover:    #FFFFFF;
  --date-sidebar-bg-hover:      rgba(22,119,255,0.16);
  --date-sidebar-bg-active:     #1677FF;                     /* ZS-002-06 */
  --date-sidebar-text-active:   #FFFFFF;

  /* 起止输入区 */
  --date-range-sep:             #6E88B0;                     /* "至" 文字 */
  --date-range-clear:           #6E88B0;
  --date-range-clear-hover:     #4096FF;

  /* 日历单元 */
  --date-cell-size:             28px;
  --date-cell-text:             #C5CFE0;                     /* 当月 */
  --date-cell-text-outside:     #4A6491;                     /* 上下月填充, ZS-004-05 */
  --date-cell-text-disabled:    #4A6491;
  --date-cell-bg-hover:         rgba(22,119,255,0.16);
  --date-cell-text-hover:       #FFFFFF;
  --date-cell-bg-selected:      #1677FF;                     /* 起止实心圆 */
  --date-cell-text-selected:    #FFFFFF;
  --date-cell-bg-in-range:      rgba(22,119,255,0.16);       /* 范围色带 */
  --date-cell-border-today:     #1677FF;                     /* 今天 1px 边框 */

  /* 标题栏 */
  --date-title-text:            #C5CFE0;
  --date-title-arrow:           #6E88B0;
  --date-title-arrow-hover:     #4096FF;
  --date-weekday-text:          #6E88B0;                     /* 日一二…六 */

  /* 底部按钮区 */
  --date-footer-h:              48px;
  --date-footer-divider:        #1A2F5A;
}

84 KiB Raw Blame History Unescape Escape

深蓝色 UI 规范

1. 色彩

1.1 标准色

1.1.1 色系总览

1.1.2 渐红系（ZS-001）

1.1.3 渐蓝系（ZS-002）

1.1.4 渐青系（ZS-003）

1.1.5 深蓝系（ZS-004）

1.1.6 功能色（主色 / 字体色 / 辅色 / 背景色）

1.1.7 小面积装饰色

1.1.8 图表配色

2. 字体

2.1 全局样式 - 字体

2.1.1 大屏页面字体规范

中文字体：Noto Sans S Chinese

数字字体：D-DIN

特殊数字：DS-Digital

表格字体：Arial

2.1.2 后台系统字体规范

中文字体：Noto Sans S Chinese

数字字体：D-DIN

LOGO 字体：DOUYUFont

表格数字：Arial

3. 阴影

3.1 容器与卡片配色

3.1.1 外层容器

3.1.2 卡片（标题 + 操作）

3.1.3 卡片新增（占位卡片）

3.1.4 阴影投影规则

4. 圆角

4.1 圆角统一规范

4.2 按钮配色（圆角 2px）

4.2.1 主按钮（Primary）

4.2.2 次按钮（Outline / Default）

4.3 卡片与分栏（圆角 4px）

5. 按钮

5.1 按钮尺寸

5.2 按钮类型与配色

5.2.1 主按钮（Primary）

5.2.2 默认按钮（Default / Outline）

5.2.3 文本按钮（Text）

5.2.4 图标按钮（Icon-only）

5.3 按钮组合

5.3.1 文字 + 下拉按钮（含 ▾）

5.3.2 图标 + 文字按钮（如 + 正常）

5.3.3 文本按钮 + 图标（"更多 »"、"展开 ⌄"、"下一页 »"、"« 上一页"）

5.3.4 主按钮 + 默认按钮组合（如"确定 / 取消 / 返回"）

5.4 其他按钮

5.4.1 悬浮状态（Floating）

5.4.2 加载中（Loading）

6. 分割线

6.1 水平分割线

6.2 垂直分割线

6.3 规格与间距

6.4 CSS 参考

7. 间距

7.1 间距阶梯

7.2 使用原则

7.3 CSS Token 建议

7.4 与已有规范的对齐

8. 导航组件

8.1 整体结构

8.2 顶部导航（Header）

8.2.1 规格

8.2.2 二级菜单（左侧 Tabs，小号 14px）

8.2.3 一级菜单（中部主导航，16px 带切角装饰）

8.2.4 系统标题（XXXX系统）

8.2.5 右侧工具区（时间 / 图标 / 返回首页）

8.3 侧边栏（三级菜单）

8.3.1 规格

8.3.2 状态配色

8.4 下拉菜单面板（四级 / 五级 / 六级）

8.4.1 面板规格

8.4.2 菜单项规格

8.4.3 菜单项配色

8.5 交互与动画

8.6 间距引用

9. 锚点与页签

9.1 页签（Tabs）

84 KiB

Raw Blame History

5.3.2 图标 + 文字按钮（如 `+ 正常`）