# 浅红色 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)