wsk/deerflow-code

Fork 0

gozeros b638b541d0 初始化

2026-09-07 18:24:55 +08:00

30 KiB

Raw Permalink Blame History

深蓝色 UI 规范 · 01 导航（§8–§13）

《深蓝色 UI 规范》分册之一。基础令牌见 00-基础-色彩字体间距.md，可 import 的变量见 tokens.css，总目录与 §索引见 README.md。§N 编号全局唯一。

本篇目录：8 导航组件 · 9 锚点与页签 · 10 步骤条 · 11 面包屑 · 12 页头 · 13 分页

8. 导航组件

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

8.1 整体结构

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

8.2 顶部导航（Header）

8.2.1 规格

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

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

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

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

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

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

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

8.2.4 系统标题（XXXX系统）

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

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

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

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

8.3 侧边栏（三级菜单）

8.3.1 规格

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

8.3.2 状态配色

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

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

8.4.1 面板规格

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

8.4.2 菜单项规格

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

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

8.4.3 菜单项配色

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

8.5 交互与动画

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

8.6 间距引用

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

9. 锚点与页签

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

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

9.1 页签（Tabs）

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

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

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

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

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

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

9.2 锚点（Anchor）

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

9.2.1 结构

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

9.2.2 规格

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

9.2.3 状态配色

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

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

9.2.4 滚动同步

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

9.3 回到顶部（BackToTop）

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

9.3.1 规格

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

9.3.2 状态配色

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

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 页）	用正常分页 + 隐藏中间页码（`...` 省略）

30 KiB Raw Permalink Blame History Unescape Escape