781 lines
30 KiB
Markdown
781 lines
30 KiB
Markdown
# 深蓝色 UI 规范 · 01 导航（§8–§13）
|
||
|
||
> 《深蓝色 UI 规范》分册之一。基础令牌见 `00-基础-色彩字体间距.md`，可 import 的变量见 `tokens.css`，总目录与 §索引见 `README.md`。`§N` 编号全局唯一。
|
||
|
||
**本篇目录**：`8` 导航组件 · `9` 锚点与页签 · `10` 步骤条 · `11` 面包屑 · `12` 页头 · `13` 分页
|
||
|
||
---
|
||
|
||
## 8. 导航组件
|
||
|
||
> 适用于"大屏后台 / 控制台"类深蓝主题界面。整体结构 = 顶部导航 + 左侧分级菜单 + 多级下拉。所有颜色取自 ZS-002 / ZS-004 两个色系。
|
||
|
||
### 8.1 整体结构
|
||
|
||
```
|
||
┌─ 顶部导航（Header）─ 高 56px ──────────────────────────────────────────────┐
|
||
│ ≡ 二级菜单 二级菜单 二级菜单 〈一级菜单〉〈一级菜单〉 ⟪ XXXX系统 ⟫ 〈一级菜单〉 ⟳ 时间 ⌂ 返回首页 │
|
||
├──┬──────────────────────────────────────────────────────────────────────────┤
|
||
│ 三│ ┌─ 四级菜单（下拉面板）──┐ │
|
||
│ 级│ │ ▾ 四级菜单 │ │
|
||
│ 菜│ │ ▾ 五级菜单 │ │
|
||
│ 单│ │ - 六级菜单 (active)│ │
|
||
│ 三│ │ - 六级菜单 │ │
|
||
│ 级│ │ ▸ 五级菜单 │ │
|
||
│ 菜│ │ ▸ 四级菜单 │ │
|
||
│ 单│ └────────────────────────┘ │
|
||
│ …│ │
|
||
└──┴──────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 8.2 顶部导航（Header）
|
||
|
||
#### 8.2.1 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 高度 | `56px` |
|
||
| 左右 padding | `--spacing-4` (16px) |
|
||
| 背景 | 渐变 `linear-gradient(180deg, #122347 0%, #0C1836 100%)`（ZS-004-08 → ZS-004-09） |
|
||
| 底边 | `border-bottom: 1px solid #1A2F5A` (ZS-004-07) |
|
||
| 阴影 | `0 2px 8px rgba(6, 14, 36, 0.6)`（§3.1.4 一级阴影变体） |
|
||
| 文字基线 | `Noto Sans S Chinese`，垂直居中 |
|
||
|
||
#### 8.2.2 二级菜单（左侧 Tabs，小号 14px）
|
||
|
||
| 状态 | 文字 | 背景 | 装饰 |
|
||
|------|------|------|------|
|
||
| 默认 | `#6E88B0` (ZS-004-04) | `transparent` | — |
|
||
| Hover | `#C5CFE0` (ZS-004-02) | `rgba(22,119,255,0.08)` | — |
|
||
| 激活 | `#4096FF` (ZS-002-05) | `transparent` | 底部 `2px solid #4096FF` 高亮线 |
|
||
|
||
- 字号 `14px Regular`，间距 `--spacing-3` (12px)
|
||
- 与最左侧的"折叠菜单 ≡"图标间距 `--spacing-4` (16px)
|
||
|
||
#### 8.2.3 一级菜单（中部主导航，16px 带切角装饰）
|
||
|
||
| 状态 | 文字 | 装饰 |
|
||
|------|------|------|
|
||
| 默认 | `#C5CFE0` (ZS-004-02) | 两端切角斜边，`border: 1px solid #1A2F5A` |
|
||
| Hover | `#4096FF` (ZS-002-05) | 切角线变 `#4096FF` |
|
||
| 激活 | `#FFFFFF` | 切角线 `#1677FF` (ZS-002-06)，背景 `rgba(22,119,255,0.16)` |
|
||
|
||
- 字号 `16px Medium`
|
||
- 切角推荐 `clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%)`
|
||
- 项间距 `--spacing-2` (8px)
|
||
|
||
#### 8.2.4 系统标题（XXXX系统）
|
||
|
||
- 字号 `20px Bold`，颜色 `#FFFFFF`
|
||
- 字体 `DOUYUFont` 或 Noto Sans Medium
|
||
- 左右装饰用主色蓝渐变线条：`linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%)`，线宽 `1px`
|
||
- 居中相对 Header 几何中心，左右最少留 `--spacing-6` (32px) 间距给一级菜单
|
||
|
||
#### 8.2.5 右侧工具区（时间 / 图标 / 返回首页）
|
||
|
||
| 元素 | 字号/尺寸 | 颜色 |
|
||
|------|----------|------|
|
||
| 更新时间文字 | `12px Regular` | `#6E88B0` (ZS-004-04) |
|
||
| 时间数值（数字） | `12px D-DIN Regular` | `#C5CFE0` (ZS-004-02) |
|
||
| 工具图标（刷新/上/家） | `16px` | `#6E88B0`，hover → `#4096FF` |
|
||
| 返回首页文字 | `14px Regular` | `#C5CFE0`，hover → `#4096FF` |
|
||
|
||
- 元素间距 `--spacing-3` (12px)
|
||
- 整体右 padding `--spacing-4` (16px)
|
||
|
||
### 8.3 侧边栏（三级菜单）
|
||
|
||
#### 8.3.1 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 宽度 | `64px`（仅图标 / 竖排文字） |
|
||
| 背景 | `#0C1836` (ZS-004-09) |
|
||
| 右边界 | `border-right: 1px solid #1A2F5A` (ZS-004-07) |
|
||
| 项高度 | `64px`（与宽度一致，呈正方形） |
|
||
| 项内间距 | 上下 `--spacing-3` (12px) |
|
||
| 字号 | `14px Medium`，竖排（`writing-mode: vertical-rl`）或正常排两行 |
|
||
|
||
#### 8.3.2 状态配色
|
||
|
||
| 状态 | 背景 | 文字 | 左侧指示条 |
|
||
|------|------|------|-----------|
|
||
| 默认 | `transparent` | `#6E88B0` (ZS-004-04) | 无 |
|
||
| Hover | `rgba(22,119,255,0.08)` | `#C5CFE0` (ZS-004-02) | 无 |
|
||
| 激活 | `#1A2F5A` (ZS-004-07) | `#FFFFFF` | 左侧 `2px solid #1677FF` (ZS-002-06) |
|
||
|
||
### 8.4 下拉菜单面板（四级 / 五级 / 六级）
|
||
|
||
#### 8.4.1 面板规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 背景 | `#122347` (ZS-004-08) |
|
||
| 边框 | `1px solid #1A2F5A` (ZS-004-07) |
|
||
| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影变体） |
|
||
| 圆角 | `4px` |
|
||
| 内边距 | 上下 `--spacing-2` (8px) |
|
||
| 最小宽度 | `150px` |
|
||
|
||
#### 8.4.2 菜单项规格
|
||
|
||
| 层级 | 缩进（padding-left） | 字号 | 展开图标 | 前缀 |
|
||
|------|---------------------|------|----------|------|
|
||
| 四级菜单 | `--spacing-3` (12px) | `14px Medium` | `▾ / ▸` | — |
|
||
| 五级菜单 | `--spacing-5` (24px) | `14px Regular` | `▾ / ▸` | — |
|
||
| 六级菜单 | `--spacing-6` (32px) | `14px Regular` | — | `-` 短横线 |
|
||
|
||
- 行高 `32px`
|
||
- 项之间无分割线（靠缩进与图标区分层级）
|
||
|
||
#### 8.4.3 菜单项配色
|
||
|
||
| 状态 | 背景 | 文字 | 展开图标 |
|
||
|------|------|------|----------|
|
||
| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | `#6E88B0` (ZS-004-04) |
|
||
| Hover | `rgba(22,119,255,0.08)` | `#4096FF` (ZS-002-05) | `#4096FF` |
|
||
| 激活（当前选中） | `rgba(22,119,255,0.16)` | `#4096FF` (ZS-002-05) | `#1677FF` (ZS-002-06) |
|
||
| 父级（含激活子项） | `transparent` | `#FFFFFF` | `#1677FF` |
|
||
| 失效 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` |
|
||
|
||
### 8.5 交互与动画
|
||
|
||
| 行为 | 动效 |
|
||
|------|------|
|
||
| 下拉面板展开 | `transform-origin: top; transform: scaleY(0.95) → scaleY(1); opacity 0 → 1`，`200ms ease-out` |
|
||
| 展开图标旋转 | `transform: rotate(0 → 90deg)`，`200ms ease-out` |
|
||
| Hover 背景过渡 | `background-color 120ms ease-out` |
|
||
| 激活底部高亮线（二级菜单） | `width 0% → 100%`，`240ms ease-out` |
|
||
|
||
### 8.6 间距引用
|
||
|
||
| 位置 | 取值 |
|
||
|------|------|
|
||
| Header 内部元素间距 | `--spacing-2 / --spacing-3` |
|
||
| Header 与下方内容间距 | `0`（贴合，靠底边线与阴影区分） |
|
||
| 侧边栏与下拉面板间距 | `--spacing-1` (4px) |
|
||
| 下拉面板与触发元素间距 | `--spacing-1` (4px) |
|
||
| 同级菜单项之间 | `0`（紧贴排列，靠 hover/active 背景区分） |
|
||
|
||
---
|
||
|
||
## 9. 锚点与页签
|
||
|
||
> 对应"4.2 导航组件-锚点"。三类组件共用主色蓝指示当前位置：**页签 / 锚点 / 回到顶部**。
|
||
>
|
||
> 视觉参考：标签横向 / 标签纵向 / 锚点的三联图见设计稿「选项卡.png」——三种形态在本节均已规范化（§9.1 = 标签横纵向、§9.2 = 锚点）。
|
||
|
||
### 9.1 页签（Tabs）
|
||
|
||
#### 9.1.1 横向页签（下划线-横向）
|
||
|
||
| 状态 | 文字 | 下划线 |
|
||
|------|------|--------|
|
||
| 默认 | `#C5CFE0` (ZS-004-02) | 无 |
|
||
| Hover | `#4096FF` (ZS-002-05) | 无 |
|
||
| 激活 | `#4096FF` (ZS-002-05) | `2px solid #4096FF`，宽度与文字齐 |
|
||
| 失效 | `#4A6491` (ZS-004-05) | 无 |
|
||
|
||
- 字号 `14px Medium`
|
||
- 项间距 `--spacing-5` (24px)
|
||
- 下划线与文字底部间距 `--spacing-2` (8px)
|
||
- 容器底边可叠一条 `1px solid #1A2F5A` (ZS-004-07) 作为基线，激活态的高亮线压在上面
|
||
|
||
#### 9.1.2 纵向页签（下划线-纵向）
|
||
|
||
| 状态 | 文字 | 右侧指示线 |
|
||
|------|------|-----------|
|
||
| 默认 | `#C5CFE0` (ZS-004-02) | 无 |
|
||
| Hover | `#4096FF` (ZS-002-05) | 无 |
|
||
| 激活 | `#4096FF` (ZS-002-05) | 右侧 `2px solid #4096FF`，高度与文字齐 |
|
||
| 失效 | `#4A6491` (ZS-004-05) | 无 |
|
||
|
||
- 字号 `14px Medium`，项高度 `32px`
|
||
- 项间距 `--spacing-2` (8px)
|
||
- 容器右边可叠一条 `1px solid #1A2F5A` 基线，激活指示线压在上面
|
||
|
||
### 9.2 锚点（Anchor）
|
||
|
||
用于长内容页（如详情页、文档页）的章节快速跳转。
|
||
|
||
#### 9.2.1 结构
|
||
|
||
```
|
||
│ 一级
|
||
│ 一级 (active)
|
||
│ 二级
|
||
│ 二级
|
||
│ 一级
|
||
│ 一级
|
||
```
|
||
|
||
#### 9.2.2 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 容器背景 | `#122347` (ZS-004-08) 或 `transparent`（嵌入页面侧栏时） |
|
||
| 左侧基线 | `1px solid #1A2F5A` (ZS-004-07) 通栏 |
|
||
| 项高度 | `32px` |
|
||
| 一级项左 padding | `--spacing-3` (12px) |
|
||
| 二级项左 padding | `--spacing-5` (24px) |
|
||
| 项间距 | `0`（贴合排列） |
|
||
| 字号 | `14px Regular` |
|
||
|
||
#### 9.2.3 状态配色
|
||
|
||
| 状态 | 一级文字 | 二级文字 | 左侧指示条 |
|
||
|------|----------|----------|-----------|
|
||
| 默认 | `#C5CFE0` (ZS-004-02) | `#6E88B0` (ZS-004-04) | 无 |
|
||
| Hover | `#4096FF` (ZS-002-05) | `#4096FF` (ZS-002-05) | 无 |
|
||
| 激活 | `#4096FF` (ZS-002-05) | — | 左侧 `2px solid #4096FF`，覆盖容器基线 |
|
||
| 父级（含激活子项） | `#FFFFFF` | — | — |
|
||
|
||
- 激活态指示条与基线重合，宽 `2px`，色压主色蓝 `#4096FF`
|
||
- 二级项**不单独支持激活态**：当二级被点中时，其父级一级显示激活态，左侧指示条按父级位置渲染
|
||
|
||
#### 9.2.4 滚动同步
|
||
|
||
| 行为 | 规则 |
|
||
|------|------|
|
||
| 页面滚动 | 监听锚点对应区块进入视口的相对位置，自动切换激活态 |
|
||
| 点击锚点 | `behavior: smooth` 滚动到目标，激活指示条 `top` 过渡 `200ms ease-out` |
|
||
| 边界处理 | 滚动到页面顶部 → 第一个锚点激活；到页尾 → 最后一个锚点激活 |
|
||
|
||
### 9.3 回到顶部（BackToTop）
|
||
|
||
固定在视口右下角的悬浮按钮，向上滚动到页面顶部。
|
||
|
||
#### 9.3.1 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 形状 | 圆形 `40px × 40px`（`border-radius: 50%`） |
|
||
| 图标 | `↑` 上箭头，`16px`，`#FFFFFF` |
|
||
| 距视口右边 | `--spacing-5` (24px) |
|
||
| 距视口下边 | `--spacing-6` (32px) |
|
||
| 出现时机 | 页面 `scrollTop > 200px` 时淡入；回到顶部后淡出 |
|
||
| 淡入/淡出 | `opacity 0 → 1` / `1 → 0`，`200ms ease-out` |
|
||
|
||
#### 9.3.2 状态配色
|
||
|
||
| 状态 | 背景 | 阴影 | 图标 |
|
||
|------|------|------|------|
|
||
| 正常（默认） | `#1677FF` (ZS-002-06) | `0 2px 8px rgba(22,119,255,0.12)` (§3.1.4 一级阴影) | `#FFFFFF` |
|
||
| 悬停（Hover） | `#0958D9` (ZS-002-07) | `0 4px 16px rgba(22,119,255,0.24)` (§3.1.4 二级阴影) | `#FFFFFF` |
|
||
| 点按（Active） | `#003EB3` (ZS-002-08) | 阴影消失，按下感 | `#FFFFFF` |
|
||
| 失效 / 不显示 | — | — | 整体 `opacity: 0`，`pointer-events: none` |
|
||
|
||
#### 9.3.3 悬停 Tooltip
|
||
|
||
Hover 状态下方显示 `回到顶部` 提示气泡：
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 文字 | `回到顶部`，`12px Regular` |
|
||
| 文字颜色 | `#C5CFE0` (ZS-004-02) |
|
||
| 背景 | `#1677FF` (ZS-002-06) |
|
||
| 圆角 | `2px` |
|
||
| 内边距 | 上下 `4px`，左右 `--spacing-2` (8px) |
|
||
| 与按钮间距 | `--spacing-2` (8px) |
|
||
| 出现时机 | Hover 进入 `300ms` 后显示，离开立即消失 |
|
||
|
||
### 9.4 三者的差异与选用
|
||
|
||
| 组件 | 主要用途 | 视觉特征 |
|
||
|------|----------|---------|
|
||
| 页签 | 同层级内容切换（多 Tab 互斥） | 文字 + 下划线（横/纵） |
|
||
| 锚点 | 长页面内章节跳转 | 文字 + 左侧指示条 + 层级缩进 |
|
||
| 回到顶部 | 长页面快速返回起点 | 圆形悬浮按钮 + 上箭头 |
|
||
|
||
---
|
||
|
||
## 10. 步骤条
|
||
|
||
> 对应「4.7 导航组件-步骤条」。用于多步流程的进度指引，按布局方向分**横向**与**纵向**两类，按使用场景分**弹窗步骤条**、**页面步骤条**、**纵向步骤条**三种。所有颜色取自 ZS-002 主色蓝与 ZS-004 深蓝系。
|
||
|
||
### 10.1 步骤节点（公共）
|
||
|
||
每个步骤由「指示圆 + 标题（可选描述）」组成。指示圆按状态切换三种形态：
|
||
|
||
| 状态 | 圆形外观 | 圆内符号 | 来源 |
|
||
|------|----------|----------|------|
|
||
| 已完成（Completed） | 描边圆，`2px solid #1677FF`，背景 `transparent` | `✓`（对勾，`#1677FF`） | ZS-002-06 |
|
||
| 当前（Current / Active） | 实心圆，背景 `#1677FF` | 步骤数字，`#FFFFFF` | ZS-002-06 / 白 |
|
||
| 未开始（Upcoming） | 描边圆，`1px solid #4A6491`，背景 `transparent` | 步骤数字，`#6E88B0` | ZS-004-05 / ZS-004-04 |
|
||
| 失效（Disabled） | 描边圆，`1px solid #2D4473`，背景 `transparent` | 步骤数字，`#4A6491` | ZS-004-06 / ZS-004-05 |
|
||
|
||
**指示圆规格**：
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 直径 | `24px` |
|
||
| 圆内字号 | `12px Bold`（D-DIN 或 Noto Sans Bold） |
|
||
| 对勾图标 | `12px`，居中 |
|
||
| 字体水平居中 | 数字 / 对勾 在圆几何中心 |
|
||
|
||
**标题与描述文字**：
|
||
|
||
| 元素 | 状态 | 字号 / 颜色 | 来源 |
|
||
|------|------|-------------|------|
|
||
| 标题 | 已完成 / 当前 | `14px Medium`，`#FFFFFF` | — |
|
||
| 标题 | 未开始 | `14px Medium`，`#6E88B0` | ZS-004-04 |
|
||
| 标题 | 失效 | `14px Medium`，`#4A6491` | ZS-004-05 |
|
||
| 描述 | 已完成 / 当前 | `12px Regular`，`#C5CFE0` | ZS-004-02 |
|
||
| 描述 | 未开始 / 失效 | `12px Regular`，`#6E88B0` → `#4A6491` | ZS-004-04 → ZS-004-05 |
|
||
|
||
**连接线（步骤之间）**：
|
||
|
||
| 类型 | 色值 | 来源 | 样式 |
|
||
|------|------|------|------|
|
||
| 已完成段（前一节点已完成） | `#1677FF` | ZS-002-06 | `1px dashed`（弹窗）/ `1px solid`（页面） |
|
||
| 未完成段 | `#4A6491` | ZS-004-05 | `1px dashed` |
|
||
|
||
> 连接线在指示圆**两侧水平居中**（横向）或**正下方垂直**（纵向）；线两端与圆外缘留 `--spacing-1` (4px) 间隙，避免线穿圆。
|
||
|
||
### 10.2 弹窗步骤条（横向 · 描边圆为主）
|
||
|
||
用于 Modal / Drawer 内引导多步操作的紧凑步骤条。指示圆**完成态用描边 + 对勾**而非实心，避免在弹窗背景上过于抢眼。
|
||
|
||
#### 10.2.1 布局
|
||
|
||
```
|
||
( ✓ ) ┄┄┄┄┄ (●2) ┄┄┄┄┄ ( 3 ) ┄┄┄┄┄ ( 4 ) ┄┄┄┄┄ ( 5 )
|
||
标题 标题 标题 标题 标题
|
||
(描述) (描述) (描述) (描述) (描述)
|
||
```
|
||
|
||
#### 10.2.2 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 容器水平 padding | `--spacing-5` (24px) |
|
||
| 指示圆 → 标题间距 | `--spacing-2` (8px) |
|
||
| 标题 → 描述间距 | `--spacing-1` (4px) |
|
||
| 节点之间水平间距 | 节点间距自适应等分；连接线占用中间空间 |
|
||
| 连接线 | `1px dashed`，已完成段 `#1677FF`，未完成段 `#4A6491` |
|
||
| 文字对齐 | 标题、描述居中对齐于指示圆下方 |
|
||
|
||
#### 10.2.3 两种变体
|
||
|
||
| 变体 | 适用 |
|
||
|------|------|
|
||
| **仅标题** | 步骤含义已经清晰（如「填写信息 / 确认 / 完成」），节省垂直空间 |
|
||
| **标题 + 描述** | 步骤名抽象需要一行小字补充时使用 |
|
||
|
||
### 10.3 页面步骤条（横向 · 实心圆 + 自定义首项标题）
|
||
|
||
用于页面级流程（如「新建集群」类向导）。和弹窗步骤条相比，**已完成态指示圆改为实心填充 + 白色对勾**，视觉权重更高；首步标题可显示具体名称（如「新建集群」）而非「标题」占位。
|
||
|
||
#### 10.3.1 布局
|
||
|
||
```
|
||
(✓) ────── (●2) ┄┄┄┄┄ ( 3 ) ┄┄┄┄┄ ( 4 ) ┄┄┄┄┄ ( 5 )
|
||
新建集群 标题 标题 标题 标题
|
||
(描述文本) (描述文本) (描述文本) (描述文本) (描述文本)
|
||
```
|
||
|
||
#### 10.3.2 与 §10.2 弹窗步骤条的差异
|
||
|
||
| 维度 | 弹窗步骤条 | 页面步骤条 |
|
||
|------|-----------|-----------|
|
||
| 完成态圆形 | 描边圆 + 蓝色对勾 | 实心蓝圆 + 白色对勾 |
|
||
| 完成段连接线样式 | `1px dashed #1677FF` | `1px solid #1677FF` |
|
||
| 标题文字号 | `14px Medium` | `14px Medium`（同） |
|
||
| 第一项 | 通用「标题」占位 | 可显示具体名称（自定义文案） |
|
||
|
||
#### 10.3.3 完成态指示圆补充
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 已完成圆背景 | `#1677FF` | ZS-002-06 |
|
||
| 已完成圆内对勾 | `#FFFFFF` | — |
|
||
| 已完成圆边框 | 无（实心） | — |
|
||
|
||
### 10.4 纵向步骤条
|
||
|
||
用于侧栏 / 详情页内的纵向流程指引。两种变体——「仅标题」与「标题 + 描述」。
|
||
|
||
#### 10.4.1 布局
|
||
|
||
```
|
||
仅标题: 标题 + 描述:
|
||
|
||
(✓) 新建集群 (✓) 新建集群
|
||
┊ 描述文本描述
|
||
(●2) 标题 ┊
|
||
┊ (●2) 标题
|
||
( 3 ) 标题 描述文本描述
|
||
┊ ┊
|
||
( 4 ) 标题 ( 3 ) 标题
|
||
描述文本描述
|
||
┊
|
||
( 4 ) 标题
|
||
描述文本描述
|
||
```
|
||
|
||
#### 10.4.2 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 指示圆 → 标题水平间距 | `--spacing-2` (8px) |
|
||
| 节点垂直间距（仅标题） | `--spacing-5` (24px)，圆心到圆心 |
|
||
| 节点垂直间距（标题 + 描述） | `--spacing-6` (32px)，圆心到圆心 |
|
||
| 标题 → 描述间距 | `--spacing-1` (4px) |
|
||
| 连接线位置 | 上下两个指示圆**正下方垂直**，居中于圆心 |
|
||
| 连接线样式 | `1px dashed`，已完成段 `#1677FF`，未完成段 `#4A6491` |
|
||
| 文字左对齐 | 标题与描述左对齐，与指示圆右侧对齐基线 |
|
||
|
||
#### 10.4.3 与横向步骤条共用规则
|
||
|
||
- 指示圆三态规格沿用 §10.1
|
||
- 已完成态默认用**描边 + 对勾**（与 §10.2 弹窗一致）；若纵向步骤条用于页面级主流程，可切换为 §10.3 的实心圆变体
|
||
|
||
### 10.5 交互与动画
|
||
|
||
| 行为 | 动效 |
|
||
|------|------|
|
||
| 步骤切换（next） | 当前圆 `background: transparent → #1677FF`，`200ms ease-out`；同时上一步圆 `border-color: #4A6491 → #1677FF`，再用 `200ms` 切换为对勾图标淡入 |
|
||
| 步骤切换（prev / 回退） | 反向，未完成态恢复 `#4A6491` 边框，圆内数字淡入 |
|
||
| 连接线高亮 | 完成段 `border-color: #4A6491 → #1677FF`，`240ms ease-out` |
|
||
| Hover 节点（可点击） | 圆边框色暂时变 `#4096FF` (ZS-002-05)，标题文字 `#4096FF`，`120ms ease-out`；不可点击节点（未来步骤）无 hover |
|
||
| 点击节点 | 节点必须**已完成**才能点（回看），否则视为禁用；点击合法节点触发 `step:change` 事件 |
|
||
|
||
### 10.6 状态机与可达性
|
||
|
||
| 当前步 = N | 节点 i 的状态 |
|
||
|-----------|----------------|
|
||
| `i < N` | Completed（已完成，可点回看） |
|
||
| `i === N` | Current（当前，不可点） |
|
||
| `i > N` | Upcoming（未开始，不可点） |
|
||
| `i.disabled` | Disabled（被显式禁用，例如条件未满足） |
|
||
|
||
**键盘导航**：
|
||
- `Tab` 顺序在「已完成」节点之间流转，跳过 `Current / Upcoming / Disabled`
|
||
- 焦点节点圆外加 `2px solid #4096FF` 焦点环（`outline`，`offset 2px`）
|
||
|
||
**屏幕阅读器**：
|
||
- 指示圆 `role="img"`，`aria-label="已完成第 N 步"` / `"当前第 N 步"` / `"未开始第 N 步"`
|
||
- 容器 `role="list"`，节点 `role="listitem"`
|
||
- 当前节点额外 `aria-current="step"`
|
||
|
||
### 10.7 CSS Token 参考
|
||
|
||
```css
|
||
:root {
|
||
/* 步骤条节点 */
|
||
--step-circle-size: 24px;
|
||
--step-circle-current-bg: #1677FF; /* ZS-002-06 */
|
||
--step-circle-current-text: #FFFFFF;
|
||
--step-circle-done-border: #1677FF; /* ZS-002-06 */
|
||
--step-circle-done-icon: #1677FF; /* 弹窗变体 */
|
||
--step-circle-done-bg-page: #1677FF; /* 页面变体:实心 */
|
||
--step-circle-done-icon-page: #FFFFFF;
|
||
--step-circle-upcoming-border: #4A6491; /* ZS-004-05 */
|
||
--step-circle-upcoming-text: #6E88B0; /* ZS-004-04 */
|
||
--step-circle-disabled-border: #2D4473; /* ZS-004-06 */
|
||
--step-circle-disabled-text: #4A6491; /* ZS-004-05 */
|
||
|
||
/* 连接线 */
|
||
--step-line-done: #1677FF; /* 已完成段 */
|
||
--step-line-upcoming: #4A6491; /* 未完成段:ZS-004-05 */
|
||
|
||
/* 文字 */
|
||
--step-title-active: #FFFFFF;
|
||
--step-title-inactive: #6E88B0; /* ZS-004-04 */
|
||
--step-desc-active: #C5CFE0; /* ZS-004-02 */
|
||
--step-desc-inactive: #6E88B0; /* ZS-004-04 */
|
||
}
|
||
```
|
||
|
||
### 10.8 三种步骤条的选用决策
|
||
|
||
| 场景 | 选择 |
|
||
|------|------|
|
||
| Modal / Drawer 内多步表单 | §10.2 弹窗步骤条（描边圆，紧凑） |
|
||
| 页面级向导（独占大区域） | §10.3 页面步骤条（实心圆，视觉重） |
|
||
| 侧栏 / 详情页纵向流程 | §10.4 纵向步骤条 |
|
||
| 步骤数 ≤ 3 且无描述 | 优先「仅标题」变体 |
|
||
| 步骤名抽象需补充说明 | 用「标题 + 描述」变体 |
|
||
| 步骤数 > 7 | 不推荐用步骤条，改用「锚点」（§9.2）或分页 |
|
||
|
||
---
|
||
|
||
## 11. 面包屑
|
||
|
||
> 对应「4.3 导航组件-面包屑」。用于显示当前位置在整个站点层级中的路径，配合「← 返回」按钮支持逐级回溯。颜色取自 ZS-002 主色蓝与 ZS-004 深蓝系。
|
||
|
||
### 11.1 标准形态
|
||
|
||
容器顶部带一个独立的容器 / 边框包裹：
|
||
|
||
```
|
||
🏠 | 概况 / 总概况
|
||
```
|
||
|
||
带「返回」按钮的层级形态（一级到四级）：
|
||
|
||
```
|
||
一级: ← 返回 │ 现在位置
|
||
二级: ← 返回 │ 上一级位置 / 现在位置
|
||
三级: ← 返回 │ 上二级位置 / 上一级位置 / 现在位置
|
||
四级: ← 返回 │ 上三级位置 / 上二级位置 / 上一级位置 / 现在位置
|
||
```
|
||
|
||
### 11.2 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 容器高度 | `40px` |
|
||
| 容器背景 | `#0C1836` (ZS-004-09) |
|
||
| 容器底边 | `1px solid #1A2F5A` (ZS-004-07) |
|
||
| 容器水平 padding | `--spacing-4` (16px) |
|
||
| 字号 | `14px Regular` |
|
||
| 元素间距（图标 / 文字 / 分隔符之间） | `--spacing-2` (8px) |
|
||
| 「返回」与首段路径之间分隔符 `│` | `1px solid #4A6491`，高度 `14px` |
|
||
|
||
### 11.3 配色
|
||
|
||
| 角色 | 色值 | 来源 | 备注 |
|
||
|------|------|------|------|
|
||
| Home 图标 🏠 | `#4096FF` | ZS-002-05 | 默认主色，hover → `#1677FF` (ZS-002-06) |
|
||
| 「← 返回」图标 + 文字 | `#4096FF` | ZS-002-05 | 链接样式，hover 显示下划线 |
|
||
| 历史路径文字（可点击） | `#4096FF` | ZS-002-05 | 同链接配色 |
|
||
| 当前位置文字（最后一段） | `#FFFFFF` | — | 加粗 `14px Medium`，不可点击 |
|
||
| 分隔符 `/` | `#4A6491` | ZS-004-05 | 静态、不可点 |
|
||
| 分隔符 `│`（返回按钮与路径之间） | `#4A6491` | ZS-004-05 | 同上 |
|
||
| Hover 路径项 | `#1677FF` | ZS-002-06 | 文字色 + 下划线 |
|
||
| 失效路径项（无对应页） | `#4A6491` | ZS-004-05 | `cursor: not-allowed` |
|
||
|
||
### 11.4 交互规则
|
||
|
||
- **点击「← 返回」**：逐步向上返回一级（等同浏览器 back）
|
||
- **点击文字路径**：快速跳回到对应任意上级页面
|
||
- **当前位置**（最后一段）：不响应点击，仅作展示
|
||
- **层级建议**：尽可能不超过 **4 级**；超过 4 级会让面包屑过长，应改用侧栏 / 锚点辅助
|
||
|
||
### 11.5 与导航的关系
|
||
|
||
面包屑**不替代**主导航（§8）：
|
||
|
||
- 主导航 = 「我能去哪些地方」（站点结构）
|
||
- 面包屑 = 「我当前在哪里」（路径回溯）
|
||
|
||
两者并存时，面包屑紧贴页面主内容区顶部，位于主导航下方、页头（§12）上方。
|
||
|
||
### 11.6 CSS 参考
|
||
|
||
```css
|
||
.breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 40px;
|
||
padding: 0 var(--spacing-4);
|
||
background: #0C1836;
|
||
border-bottom: 1px solid #1A2F5A;
|
||
font-size: 14px;
|
||
gap: var(--spacing-2);
|
||
}
|
||
.breadcrumb-back { color: #4096FF; cursor: pointer; }
|
||
.breadcrumb-back:hover { color: #1677FF; text-decoration: underline; }
|
||
.breadcrumb-sep-bar { width: 1px; height: 14px; background: #4A6491; }
|
||
.breadcrumb-sep { color: #4A6491; }
|
||
.breadcrumb-link { color: #4096FF; cursor: pointer; }
|
||
.breadcrumb-link:hover { color: #1677FF; text-decoration: underline; }
|
||
.breadcrumb-current { color: #FFFFFF; font-weight: 500; }
|
||
```
|
||
|
||
---
|
||
|
||
## 12. 页头
|
||
|
||
> 对应「4.6 导航组件-分页」上半段示意。用于页面主内容区顶部、面包屑下方，承载页面标题与可选的说明 / Tabs。共有 4 种变体。
|
||
|
||
### 12.1 通用规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 容器高度 | `56px`（仅标题）/ `64px`（含 Tabs） |
|
||
| 背景 | `#0C1836` (ZS-004-09) |
|
||
| 底边 | `1px solid #1A2F5A` (ZS-004-07) |
|
||
| 水平 padding | `--spacing-5` (24px) |
|
||
| 文字基线 | 垂直居中 |
|
||
|
||
### 12.2 四种变体
|
||
|
||
#### 12.2.1 基础页头
|
||
|
||
只有标题：
|
||
|
||
```
|
||
页头标题
|
||
```
|
||
|
||
| 角色 | 色值 / 字号 | 来源 |
|
||
|------|-------------|------|
|
||
| 标题 | `18px Bold`，`#FFFFFF` | — |
|
||
|
||
#### 12.2.2 页头 + 说明
|
||
|
||
标题后跟一段灰色说明文字：
|
||
|
||
```
|
||
页头标题 （这是一句简要说明）
|
||
```
|
||
|
||
| 角色 | 色值 / 字号 | 来源 |
|
||
|------|-------------|------|
|
||
| 标题 | `18px Bold`，`#FFFFFF` | — |
|
||
| 说明文字 | `14px Regular`，`#6E88B0` | ZS-004-04 |
|
||
| 标题 → 说明间距 | `--spacing-3` (12px) | — |
|
||
|
||
说明用半角圆括号包裹，颜色与括号一致（不要让括号比文字更醒目）。
|
||
|
||
#### 12.2.3 页头 + 说明 icon
|
||
|
||
标题后跟一个可悬停查看说明的图标：
|
||
|
||
```
|
||
页头标题 ⓘ
|
||
```
|
||
|
||
| 角色 | 色值 / 字号 | 来源 |
|
||
|------|-------------|------|
|
||
| 标题 | `18px Bold`，`#FFFFFF` | — |
|
||
| 说明 icon `ⓘ` 或 `?` | `16px`，`#6E88B0` | ZS-004-04 |
|
||
| Icon hover | `#4096FF` | ZS-002-05 |
|
||
| 标题 → 图标间距 | `--spacing-2` (8px) | — |
|
||
|
||
Hover 弹出 Tooltip（沿用 §9.3.3 Tooltip 配色），承载完整说明文字。
|
||
|
||
#### 12.2.4 分 Tabs 页头
|
||
|
||
标题位置直接放横向页签（沿用 §9.1.1 横向页签配色），点击切换右侧主内容区：
|
||
|
||
```
|
||
标题 标题 标题
|
||
─────
|
||
```
|
||
|
||
| 复用规则 | 说明 |
|
||
|----------|------|
|
||
| Tab 配色 | 完全沿用 §9.1.1 横向页签 |
|
||
| Tab 字号 | `16px Medium`（页头位置比一般 tab 略大） |
|
||
| Tab 间距 | `--spacing-5` (24px) |
|
||
| 激活态下划线 | `2px solid #4096FF`，宽与文字齐 |
|
||
|
||
### 12.3 与右侧操作区的组合
|
||
|
||
页头右侧常承载主操作按钮（「+ 新建」、「导出」等）。规则：
|
||
|
||
- 按钮组靠右对齐，右 padding 与左 padding 一致 (`--spacing-5`)
|
||
- 多按钮排列顺序参照 §5.3.4（默认按钮在左、主按钮在右），按钮间距 `--spacing-2`
|
||
- Tabs 页头中右侧操作区与 Tabs 同高居中
|
||
|
||
---
|
||
|
||
## 13. 分页
|
||
|
||
> 对应「4.6 导航组件-分页」下半段。三种形态——**正常分页 / 精简分页 / 导航式分页**——按页面信息量与可用空间选用。
|
||
|
||
### 13.1 正常分页
|
||
|
||
承载大列表，提供页码、跳转、每页条数选择：
|
||
|
||
```
|
||
共 240 项 < ① 2 3 4 5 … 24 > 每页 [10▾] 条 前往 [ ] 页
|
||
```
|
||
|
||
#### 13.1.1 元素配色与规格
|
||
|
||
| 元素 | 字号 / 色值 | 来源 / 说明 |
|
||
|------|-------------|-------------|
|
||
| 「共 N 项」总数文字 | `14px Regular`，`#6E88B0` | ZS-004-04 |
|
||
| 页码按钮（默认） | `14px Regular`，`#C5CFE0`，背景 `transparent` | ZS-004-02 |
|
||
| 页码按钮（hover） | `#4096FF`，背景 `rgba(22,119,255,0.08)` | ZS-002-05 |
|
||
| 页码按钮（激活/当前页） | `#FFFFFF`，背景 `#1677FF`（实心圆） | ZS-002-06 |
|
||
| 页码按钮（失效） | `#4A6491`，背景 `transparent` | ZS-004-05 |
|
||
| 左右翻页箭头 `<` `>` | `14px`，`#6E88B0`，hover → `#4096FF` | ZS-004-04 → ZS-002-05 |
|
||
| 翻页箭头失效（首/末页） | `#4A6491` | ZS-004-05 |
|
||
| 省略号 `…` | `#6E88B0` | ZS-004-04，静态展示，不可点 |
|
||
| 每页条数下拉 `[10▾]` | 沿用 §14.1 输入框规格 | 高度 `28px`，宽 `60px` |
|
||
| 「前往 N 页」输入框 | 沿用 §14.1 输入框规格 | 高度 `28px`，宽 `48px` |
|
||
|
||
#### 13.1.2 页码按钮规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 形状 | 圆形 `28px × 28px`（`border-radius: 50%`） |
|
||
| 默认背景 | `transparent` |
|
||
| 当前页背景 | `#1677FF` (ZS-002-06)，实心圆，白色数字 |
|
||
| 字号 | `14px Regular`（数字 D-DIN 或 Noto Sans） |
|
||
| 项间距 | `--spacing-1` (4px) |
|
||
|
||
#### 13.1.3 元素间距
|
||
|
||
| 区段 | 间距 |
|
||
|------|------|
|
||
| 「共 N 项」→ 翻页区 | `--spacing-4` (16px) |
|
||
| 翻页区内（箭头 / 页码） | `--spacing-1` (4px) |
|
||
| 翻页区 → 每页下拉 | `--spacing-5` (24px) |
|
||
| 每页下拉 → 前往输入 | `--spacing-4` (16px) |
|
||
|
||
### 13.2 精简分页
|
||
|
||
承载弹窗 / 表格紧凑场景，只暴露「当前页 / 总页数」与左右翻页：
|
||
|
||
```
|
||
共 1 项 < [ 1 ] / 10 >
|
||
```
|
||
|
||
#### 13.2.1 规格
|
||
|
||
| 元素 | 配色 / 备注 |
|
||
|------|------------|
|
||
| 「共 N 项」 | 同 §13.1.1 |
|
||
| `<` `>` 翻页箭头 | 同 §13.1.1 |
|
||
| `[ 1 ]` 当前页输入框 | 沿用 §14.1 输入框规格，高 `28px`，宽 `40px`，居中文字 |
|
||
| `/ N` 总页数 | `14px Regular`，`#6E88B0` (ZS-004-04) |
|
||
| 元素间距 | `--spacing-2` (8px) |
|
||
|
||
#### 13.2.2 与正常分页的差异
|
||
|
||
| 维度 | 正常分页 | 精简分页 |
|
||
|------|----------|----------|
|
||
| 页码 | 点击式数字列表 | 输入框 + 总页数文字 |
|
||
| 跳转方式 | 点击数字 / 前往输入 | 直接修改输入框 |
|
||
| 每页条数 | 暴露下拉 | 不暴露（默认值由调用方决定） |
|
||
| 适用 | 列表 / 表格主内容区 | 弹窗、抽屉、卡片内嵌列表 |
|
||
|
||
### 13.3 导航式分页
|
||
|
||
承载长文 / 详情页的「上一篇 / 下一篇」式翻页，只有方向，不暴露页码：
|
||
|
||
```
|
||
下一页 »
|
||
« 上一页
|
||
```
|
||
|
||
#### 13.3.1 规格
|
||
|
||
| 元素 | 配色 / 备注 |
|
||
|------|------------|
|
||
| 「下一页」/「上一页」文字 + 箭头 | `14px Regular`，`#4096FF` (ZS-002-05) |
|
||
| Hover | `#1677FF` (ZS-002-06) + 下划线 |
|
||
| 失效（首/末篇） | `#4A6491` (ZS-004-05)，`cursor: not-allowed` |
|
||
| 箭头位置 | `下一页 »`（箭头在后）/ `« 上一页`（箭头在前） |
|
||
| 文字 → 箭头间距 | `--spacing-2` (8px) |
|
||
| 两个按钮纵向排列时项间距 | `--spacing-3` (12px) |
|
||
|
||
### 13.4 三种分页的选用决策
|
||
|
||
| 场景 | 选择 |
|
||
|------|------|
|
||
| 后台列表 / 表格 | §13.1 正常分页 |
|
||
| Modal / Drawer 内嵌列表 | §13.2 精简分页 |
|
||
| 详情页前后翻 | §13.3 导航式分页 |
|
||
| 列表少于 1 页（项数 ≤ pageSize） | **不显示**分页 |
|
||
| 项数明确但页码可能很多（>50 页） | 用正常分页 + 隐藏中间页码（`...` 省略） |
|
||
|
||
---
|
||
|