初始化

2026-09-07 18:24:55 +08:00
1 parent 34474bd5fc
commit b638b541d0
@@ -0,0 +1,495 @@
+# 浅红色 UI 规范 · 三、导航
+
+> 返回 [规范目录](README.md)　|　本篇：导航组件 · 面包屑 · 页头与分页 · 步骤条 · 页签与锚点
+
+---
+
+## 7. 导航组件
+
+> 适用于"后台 / 控制台"类浅红主题界面。整体结构 = 顶部导航（红底）+ 二级导航（白底）+ 左侧分级菜单 + 多级下拉。颜色取自 ZS-001 主色红与 FS-004 中性灰。
+
+### 7.1 顶部导航（Header · 红底）
+
+#### 7.1.1 规格
+
+| 属性 | 取值 |
+|------|------|
+| 高度 | `56px` |
+| 左右 padding | `--spacing-4` (16px) |
+| 背景 | `linear-gradient(90deg, #A8071A 0%, #CF1322 100%)`（ZS-001-11 → ZS-001） |
+| LOGO 区切角装饰 | 叠深红斜切块 `#A8071A` (ZS-001-11)，`clip-path` 斜边 |
+| 底边 | 无（与二级导航白底直接相接） |
+| 文字基线 | `Noto Sans S Chinese`，垂直居中 |
+
+#### 7.1.2 系统标题（LOGO + ******系统）
+
+- 字号 `20px Bold`，颜色 `#FFFFFF`，字体 `DOUYUFont` 或 Noto Sans Medium
+- LOGO 图标 `#FFFFFF`，置于左侧切角块上
+
+#### 7.1.3 一级导航（中部主导航，红底白字）
+
+| 状态 | 文字 | 背景 / 装饰 |
+|------|------|------------|
+| 默认 | `#FFFFFF` | `transparent` |
+| Hover | `#FFFFFF` | 背景 `rgba(255, 255, 255, 0.12)` |
+| 激活 | `#FFFFFF` | 底部 `2px solid #FFFFFF` 高亮线，背景 `rgba(255, 255, 255, 0.16)` |
+
+- 字号 `16px Medium`，项间距 `--spacing-5` (24px)
+
+#### 7.1.4 右侧工具区（图标 / 用户 / 退出）
+
+| 元素 | 字号/尺寸 | 颜色 |
+|------|----------|------|
+| 工具图标（消息 / 通知等） | `16px` | `#FFFFFF`，hover `rgba(255,255,255,0.7)` |
+| 用户名（如"李向前"） | `14px Regular` | `#FFFFFF` |
+| 用户头像 | `28px` 圆形 | — |
+| 退出图标 | `16px` | `#FFFFFF` |
+
+- 元素间距 `--spacing-3` (12px)，整体右 padding `--spacing-4` (16px)
+
+#### 7.1.5 用户下拉菜单（右上角）
+
+白底面板，规格同 §7.4 下拉面板。
+
+| 状态 | 背景 | 文字 / 图标 |
+|------|------|-------------|
+| 默认 | `transparent` | `#575757` (FS-004-09) |
+| Hover / 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) |
+
+> 项示例：用户中心 / 修改密码 / 退出；每项左侧带 16px 图标，图标色与文字同步。
+
+### 7.2 二级导航（白底 Tab 行）
+
+紧贴顶部导航下方的白底标签行。
+
+#### 7.2.1 规格
+
+| 属性 | 取值 |
+|------|------|
+| 高度 | `48px` |
+| 背景 | `#FFFFFF` (FS-004-01) |
+| 底边 | `border-bottom: 1px solid #E8E8E8` (FS-004-04) |
+| 项间距 | `--spacing-6` (32px) |
+| 字号 | `16px Medium` |
+
+#### 7.2.2 状态配色
+
+| 状态 | 文字 | 下划线 / 装饰 |
+|------|------|--------------|
+| 默认 | `#222222` (FS-004) | 无 |
+| Hover | `#F5222D` (ZS-001-09) | 无 |
+| 激活 | `#F5222D` (ZS-001-09) | 底部 `2px solid #F5222D`，含下拉箭头 `▾` 同色 |
+| 失效 | `#C1C1C1` (FS-004-06) | 无 |
+
+### 7.3 侧边栏（分级菜单）
+
+#### 7.3.1 规格
+
+| 属性 | 取值 |
+|------|------|
+| 宽度 | `200px`（展开）/ `64px`（折叠仅图标） |
+| 背景 | `#FFFFFF` (FS-004-01) |
+| 右边界 | `border-right: 1px solid #E8E8E8` (FS-004-04) |
+| 项高度 | `40px` |
+| 项左 padding | 二级 `--spacing-4` (16px)；三级 `--spacing-6` (32px) |
+| 字号 | `16px Regular`（二级）/ `14px Regular`（三级） |
+
+#### 7.3.2 二级菜单项配色
+
+| 状态 | 背景 | 文字 | 图标 | 左侧指示条 |
+|------|------|------|------|-----------|
+| 默认 | `transparent` | `#222222` (FS-004) | `#A6A6A6` (FS-004-07) | 无 |
+| Hover | `#FAFAFA` (FS-004-02) | `#F5222D` (ZS-001-09) | `#F5222D` | 无 |
+| 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) | `#F5222D` | 左侧 `2px solid #F5222D` |
+
+#### 7.3.3 三级菜单项配色（前缀 `-` 短横线）
+
+| 状态 | 背景 | 文字 | 左侧指示条 |
+|------|------|------|-----------|
+| 默认 | `transparent` | `#575757` (FS-004-09) | 无 |
+| Hover | `#FAFAFA` (FS-004-02) | `#F5222D` (ZS-001-09) | 无 |
+| 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) | 左侧 `2px solid #F5222D` |
+
+### 7.4 下拉菜单面板
+
+#### 7.4.1 列表型面板（如二级导航的"浏览器容器 / 手机板卡容器…"）
+
+| 属性 | 取值 |
+|------|------|
+| 背景 | `#FFFFFF` (FS-004-01) |
+| 边框 | `1px solid #E8E8E8` (FS-004-04) |
+| 阴影 | `0 4px 16px rgba(34, 34, 34, 0.12)`（§3.1.3 二级阴影） |
+| 圆角 | `4px` |
+| 内边距 | 上下 `--spacing-2` (8px) |
+| 最小宽度 | `150px` |
+| 行高 | `36px` |
+
+| 状态 | 背景 | 文字 |
+|------|------|------|
+| 默认 | `transparent` | `#575757` (FS-004-09) |
+| Hover / 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) |
+| 失效 | `transparent` | `#C1C1C1` (FS-004-06) |
+
+#### 7.4.2 卡片宫格型面板（一级导航的图标宫格下拉）
+
+白底大面板内以网格陈列"图标 + 二级导航名"卡片。
+
+| 角色 | 背景 | 图标 / 文字 |
+|------|------|-------------|
+| 卡片（默认） | `#FEF6F6` (ZS-001-02) | 图标 `#F5222D`，文字 `#575757` |
+| 卡片（Hover） | `#FEEDED` (ZS-001-03) | 图标 / 文字 `#F5222D` |
+| 卡片（激活 / 当前） | `#F5222D` (ZS-001-09) | 图标 / 文字 `#FFFFFF` |
+
+| 属性 | 取值 |
+|------|------|
+| 卡片尺寸 | `80px × 72px`（自适应等分） |
+| 卡片圆角 | `4px` |
+| 卡片间距 | `--spacing-2` (8px) |
+| 面板内边距 | `--spacing-4` (16px) |
+| 面板阴影 | `0 8px 32px rgba(34, 34, 34, 0.16)`（§3.1.3 三级阴影） |
+
+### 7.5 交互与动画
+
+| 行为 | 动效 |
+|------|------|
+| 下拉面板展开 | `transform-origin: top; scaleY(0.95) → scaleY(1); opacity 0 → 1`，`200ms ease-out` |
+| 展开箭头旋转 | `rotate(0 → 180deg)`，`200ms ease-out` |
+| Hover 背景过渡 | `background-color 120ms ease-out` |
+| 激活底部高亮线 | `width 0% → 100%`，`240ms ease-out` |
+
+### 7.6 侧边栏布局变体
+
+> 侧边栏宽度通常固定，按"是否分级 / 是否展开"分为四种形态。关键区分：**叶子节点选中**用实心红填充 + 白字 + 左侧红指示条；**父级（含子项的可展开项）选中**仅用红字 + 红图标，不填充。
+
+#### 7.6.1 上下分级 · 收起（仅图标）
+
+| 属性 | 取值 |
+|------|------|
+| 宽度 | `64px`，仅图标 |
+| 图标项（默认） | 图标 `#A6A6A6`，背景 `transparent` |
+| 图标项（激活） | 图标 `#FFFFFF`，背景 `#F5222D` (ZS-001-09) 圆角方块 `4px` |
+| Hover 弹出浮层 | **深色浮层**：背景 `#3D3D3D` (FS-004-10)，圆角 `4px`，阴影 §3.1.3 三级 |
+| 浮层内二级标题 | `14px Medium`，`#FFFFFF` |
+| 浮层内三级项（前缀 `-`） | `14px Regular`，`#FFFFFF`；hover 背景 `rgba(255,255,255,0.1)` |
+
+#### 7.6.2 上下分级 · 展开
+
+完整宽度列表，二级为可展开组（`^ / ▾`），其下挂三级项。
+
+| 层级 / 状态 | 背景 | 文字 / 图标 | 左侧指示条 |
+|------|------|-------------|-----------|
+| 二级（默认） | `transparent` | 文字 `#222222`、图标 `#A6A6A6` | 无 |
+| 二级（展开 / 当前父级） | `transparent` | 文字 `#F5222D`、图标 `#F5222D` | 无 |
+| 三级（默认，前缀 `-`） | `transparent` | `#575757` (FS-004-09) | 无 |
+| 三级（选中 · 叶子） | `#F5222D` (ZS-001-09) | `#FFFFFF` | 左侧 `2px solid #F5222D` |
+
+#### 7.6.3 只有二级标题 · 不分级
+
+扁平列表，二级即叶子节点，无三级。
+
+| 状态 | 背景 | 文字 / 图标 | 左侧指示条 |
+|------|------|-------------|-----------|
+| 默认 | `transparent` | 文字 `#222222`、图标 `#A6A6A6` | 无 |
+| Hover | `#FAFAFA` (FS-004-02) | 文字 `#F5222D`、图标 `#F5222D` | 无 |
+| 选中 | `#F5222D` (ZS-001-09) | `#FFFFFF` | 左侧 `2px solid #F5222D` |
+
+#### 7.6.4 二级选中 · 分级（含四级浮层）
+
+二级展开后选中三级，三级再向右弹出**白底四级浮层**。
+
+| 角色 | 配色 |
+|------|------|
+| 三级选中（叶子） | 背景 `#F5222D`，文字 `#FFFFFF`，左侧 `2px solid #F5222D` |
+| 四级浮层背景 | `#FFFFFF`，边框 `1px solid #E8E8E8`，阴影 §3.1.3 二级 |
+| 四级项（默认） | `#575757` (FS-004-09) |
+| 四级项（Hover） | 背景 `#FEEDED` (ZS-001-03)，文字 `#F5222D` |
+| 四级项（选中） | 文字 `#F5222D`，左侧 `2px solid #F5222D` |
+
+---
+
+## 8. 面包屑（Breadcrumb）
+
+> 用于标识当前页面在层级结构中的位置，并提供逐级返回与跳转。建议层级**不超过四级**。
+
+### 8.1 顶部路径式（🏠 | 概况 / 总概况）
+
+页面顶部的简版面包屑，靠 `/` 分隔。
+
+| 元素 | 色值 | 来源 | 说明 |
+|------|------|------|------|
+| 首页图标 🏠 | `#A6A6A6` (FS-004-07) | — | hover `#F5222D` |
+| 竖分隔 `\|` | `#E8E8E8` | FS-004-04 | 首页图标与路径间 |
+| 父级路径文字 | `#575757` (FS-004-09) | — | 可点击，hover `#F5222D` |
+| 路径分隔 `/` | `#C1C1C1` | FS-004-06 | — |
+| 当前页文字 | `#222222` (FS-004) | — | `Medium`，不可点击 |
+
+### 8.2 返回 + 路径式（含 ← 返回）
+
+左侧"← 返回"按钮 + 竖分隔 + 文字路径。按层级展开：
+
+```
+一级:  ← 返回 │ 现在位置
+二级:  ← 返回 │ 上一级位置 / 现在位置
+三级:  ← 返回 │ 上二级位置 / 上一级位置 / 现在位置
+四级:  ← 返回 │ 上三级位置 / 上二级位置 / 上一级位置 / 现在位置
+```
+
+| 元素 | 色值 | 来源 | 说明 |
+|------|------|------|------|
+| 返回箭头 ← + "返回" | `#F5222D` (ZS-001-09) | — | hover `#CF1322`，文本按钮态 |
+| 竖分隔 `\|` | `#E8E8E8` | FS-004-04 | 返回与路径间 |
+| 历史层级文字 | `#575757` (FS-004-09) | — | 可点击，hover `#F5222D` |
+| 路径分隔 `/` | `#C1C1C1` | FS-004-06 | — |
+| 当前位置文字 | `#222222` (FS-004) | — | `Medium`，不可点击 |
+
+### 8.3 行为规则
+
+- 点击「返回」按钮逐步向上返回一级。
+- 点击文字路径，快速返回到该层级页面。
+- 层级尽可能不超过四级；超出时中间层折叠为 `…`。
+- 字号 `14px Regular`，元素间距 `--spacing-2` (8px)，竖分隔高度约 `12–14px`。
+
+---
+
+## 9. 页头与分页
+
+### 9.1 页头（Page Header）
+
+内容区顶部的标题区，底部叠一条 `1px solid #E8E8E8` (FS-004-04) 分割线。
+
+| 变体 | 构成 | 配色 |
+|------|------|------|
+| 基础页头 | 页头标题 | 标题 `16px Bold #222222` (FS-004) |
+| 页头 + 说明 | 标题 +（简要说明） | 说明 `14px Regular #A6A6A6` (FS-004-07) |
+| 页头 + 说明 icon | 标题 + `?` 帮助图标 | 图标 `#A6A6A6`，hover `#F5222D` |
+| 分 Tabs 页头 | 多个标题 Tab | 见 §9.2 |
+
+### 9.2 分 Tabs 页头
+
+横向页签形态，激活态红色下划线。
+
+| 状态 | 文字 | 下划线 |
+|------|------|--------|
+| 默认 | `#222222` (FS-004) | 无 |
+| Hover | `#F5222D` (ZS-001-09) | 无 |
+| 激活 | `#F5222D` (ZS-001-09) | `2px solid #F5222D`，宽度与文字齐 |
+| 失效 | `#C1C1C1` (FS-004-06) | 无 |
+
+- 字号 `14px Medium`，项间距 `--spacing-5` (24px)，下划线与文字底部间距 `--spacing-2` (8px)
+
+### 9.3 分页（Pagination）
+
+#### 9.3.1 正常分页
+
+`共 240 项  [1] 2 3 4 5 … 24 >  每页 [10 ▾] 条  前往 [ ] 页`
+
+| 元素 | 默认 | Hover | 激活 | 失效 |
+|------|------|-------|------|------|
+| 总数 / 辅助文字（共N项 / 每页 / 条 / 前往 / 页） | `#575757` (FS-004-09) | — | — | — |
+| 页码数字 | `#222222` (FS-004) | `#F5222D` (ZS-001-09) | 背景 `#F5222D` + 文字 `#FFFFFF` | `#C1C1C1` (FS-004-06) |
+| 翻页箭头 `< >` | `#575757` (FS-004-09) | `#F5222D` | — | `#C1C1C1` |
+| 省略号 `…` | `#A6A6A6` (FS-004-07) | — | — | — |
+| 每页选择器 / 跳转输入框 | 边框 `#DBDBDB` (FS-004-05) | 边框 `#F5222D` | — | 边框 `#E8E8E8` |
+
+- 页码项尺寸 `28px × 28px`，圆角 `2px`，激活态为实心红方块；项间距 `--spacing-1` (4px)
+
+#### 9.3.2 精简分页
+
+`共 1 项  <  [1] / 10  >`
+
+| 元素 | 色值 |
+|------|------|
+| 总数文字 | `#575757` (FS-004-09) |
+| 当前页输入框 | 边框 `#DBDBDB`，文字 `#222222` |
+| 总页数 `/ N` | `#A6A6A6` (FS-004-07) |
+| 翻页箭头 `< >` | `#575757`，hover `#F5222D`，失效 `#C1C1C1` |
+
+#### 9.3.3 导航式分页
+
+仅"下一页 » / « 上一页"文本按钮，无页码。配色沿用 §5.3.3 文本按钮 + 图标：
+
+| 状态 | 色值 |
+|------|------|
+| 默认 | `#F5222D` (ZS-001-09) |
+| Hover | `#CF1322` (ZS-001) |
+| 失效 | `#C1C1C1` (FS-004-06) |
+
+---
+
+## 10. 步骤条（Steps）
+
+> 用于多步流程的进度指引。按布局分**横向**（弹窗 / 页面）与**纵向**两类。颜色取自 ZS-001 主色红与 FS-004 中性灰。
+
+### 10.1 步骤节点（公共）
+
+每个步骤由「指示圆 + 标题（可选描述）」组成。指示圆按状态切换形态：
+
+| 状态 | 圆形外观 | 圆内符号 | 来源 |
+|------|----------|----------|------|
+| 已完成（Completed） | 描边圆 `2px solid #F5222D`，背景 `transparent` | `✓`（对勾，`#F5222D`） | ZS-001-09 |
+| 当前（Current） | 实心圆，背景 `#F5222D` | 步骤数字，`#FFFFFF` | ZS-001-09 / 白 |
+| 未开始（Upcoming） | 描边圆 `1px solid #C1C1C1`，背景 `transparent` | 步骤数字，`#A6A6A6` | FS-004-06 / FS-004-07 |
+| 失效（Disabled） | 描边圆 `1px solid #E8E8E8`，背景 `transparent` | 步骤数字，`#C1C1C1` | FS-004-04 / FS-004-06 |
+
+**指示圆规格**：
+
+| 属性 | 取值 |
+|------|------|
+| 直径 | `24px` |
+| 圆内字号 | `12px Bold`（D-DIN 或 Noto Sans Bold） |
+| 对勾图标 | `12px`，居中 |
+
+**标题与描述文字**：
+
+| 元素 | 状态 | 字号 / 颜色 | 来源 |
+|------|------|-------------|------|
+| 标题 | 已完成 / 当前 | `14px Medium`，`#222222` | FS-004 |
+| 标题 | 未开始 / 失效 | `14px Medium`，`#A6A6A6` → `#C1C1C1` | FS-004-07 → FS-004-06 |
+| 描述 | 已完成 / 当前 | `12px Regular`，`#575757` | FS-004-09 |
+| 描述 | 未开始 / 失效 | `12px Regular`，`#A6A6A6` → `#C1C1C1` | FS-004-07 → FS-004-06 |
+
+**连接线（步骤之间）**：
+
+| 类型 | 色值 | 来源 | 样式 |
+|------|------|------|------|
+| 已完成段 | `#F5222D` | ZS-001-09 | `1px dashed`（弹窗）/ `1px solid`（页面） |
+| 未完成段 | `#C1C1C1` | FS-004-06 | `1px dashed` |
+
+> 连接线在指示圆两侧水平居中（横向）或正下方垂直（纵向）；线两端与圆外缘留 `--spacing-1` (4px) 间隙。
+
+### 10.2 弹窗步骤条（横向 · 描边圆为主）
+
+用于 Modal / Drawer 内的紧凑步骤条。完成态用**描边 + 红色对勾**，避免在弹窗内过于抢眼。
+
+```
+( ✓ ) ┄┄┄ (●2) ┄┄┄ ( 3 ) ┄┄┄ ( 4 ) ┄┄┄ ( 5 )
+ 标题        标题       标题       标题       标题
+(描述)     (描述)      (描述)     (描述)     (描述)
+```
+
+| 属性 | 取值 |
+|------|------|
+| 容器水平 padding | `--spacing-5` (24px) |
+| 指示圆 → 标题间距 | `--spacing-2` (8px) |
+| 标题 → 描述间距 | `--spacing-1` (4px) |
+| 连接线 | `1px dashed`，完成段 `#F5222D`，未完成段 `#C1C1C1` |
+| 文字对齐 | 标题、描述居中于指示圆下方 |
+| 两种变体 | 仅标题 / 标题 + 描述 |
+
+### 10.3 页面步骤条（横向 · 实心圆 + 自定义首项标题）
+
+用于页面级向导（如「新建集群」）。完成态连接线改为**实线**，首步标题可显示具体名称。
+
+```
+(✓) ──── (●2) ┄┄┄ ( 3 ) ┄┄┄ ( 4 ) ┄┄┄ ( 5 )
+新建集群   标题       标题       标题       标题
+(描述文本) (描述文本) (描述文本) (描述文本) (描述文本)
+```
+
+| 维度 | 弹窗步骤条 | 页面步骤条 |
+|------|-----------|-----------|
+| 完成态圆形 | 描边圆 + 红色对勾 | 描边圆 + 红色对勾（同） |
+| 完成段连接线 | `1px dashed #F5222D` | `1px solid #F5222D` |
+| 第一项 | 通用「标题」占位 | 可显示具体名称（自定义文案） |
+
+### 10.4 纵向步骤条
+
+用于侧栏 / 详情页内的纵向流程指引。两种变体——「仅标题」与「标题 + 描述」。
+
+```
+仅标题:              标题 + 描述:
+
+(✓) 新建集群         (✓) 新建集群
+ ┊                       描述文本描述
+(●2) 标题            ┊
+ ┊                  (●2) 标题
+( 3 ) 标题               描述文本描述
+ ┊                  ┊
+( 4 ) 标题          ( 3 ) 标题
+                         描述文本描述
+```
+
+| 属性 | 取值 |
+|------|------|
+| 指示圆 → 标题水平间距 | `--spacing-2` (8px) |
+| 节点垂直间距（仅标题） | `--spacing-5` (24px)，圆心到圆心 |
+| 节点垂直间距（标题 + 描述） | `--spacing-6` (32px)，圆心到圆心 |
+| 标题 → 描述间距 | `--spacing-1` (4px) |
+| 连接线位置 | 上下指示圆正下方垂直，居中于圆心 |
+| 连接线样式 | `1px dashed`，完成段 `#F5222D`，未完成段 `#C1C1C1` |
+| 文字对齐 | 标题与描述左对齐 |
+
+### 10.5 交互与动画
+
+| 行为 | 动效 |
+|------|------|
+| 步骤切换（next） | 当前圆 `background: transparent → #F5222D`，`200ms ease-out`；上一步圆 `border-color: #C1C1C1 → #F5222D`，再 `200ms` 切换为对勾图标淡入 |
+| 连接线进度 | 完成段 `width 0% → 100%`，`240ms ease-out` |
+
+---
+
+## 11. 页签与锚点
+
+> 共用主色红指示当前位置：页签用于同层级内容切换，锚点用于长页面内章节跳转。
+
+### 11.1 页签（Tabs）
+
+#### 11.1.1 横向页签（下划线 · 横向）
+
+| 状态 | 文字 | 下划线 |
+|------|------|--------|
+| 默认 | `#222222` (FS-004) | 无 |
+| Hover | `#F5222D` (ZS-001-09) | 无 |
+| 激活 | `#F5222D` (ZS-001-09) | `2px solid #F5222D`，宽度与文字齐 |
+| 失效 | `#C1C1C1` (FS-004-06) | 无 |
+
+- 字号 `14px Medium`，项间距 `--spacing-5` (24px)，下划线与文字底部间距 `--spacing-2` (8px)
+- 容器底边叠一条 `1px solid #E8E8E8` (FS-004-04) 基线，激活高亮线压在其上
+
+#### 11.1.2 纵向页签（下划线 · 纵向）
+
+| 状态 | 文字 | 右侧指示线 |
+|------|------|-----------|
+| 默认 | `#222222` (FS-004) | 无 |
+| Hover | `#F5222D` (ZS-001-09) | 无 |
+| 激活 | `#F5222D` (ZS-001-09) | 右侧 `2px solid #F5222D`，高度与文字齐 |
+| 失效 | `#C1C1C1` (FS-004-06) | 无 |
+
+- 字号 `14px Medium`，项高度 `32px`，项间距 `--spacing-2` (8px)
+- 容器右边叠一条 `1px solid #E8E8E8` 基线，激活指示线压在其上
+
+### 11.2 锚点（Anchor）
+
+用于长内容页的章节快速跳转，支持一 / 二级缩进。
+
+```
+│ 一级
+│ 一级          (active)
+│    二级
+│    二级
+│ 一级
+│ 一级
+```
+
+| 属性 | 取值 |
+|------|------|
+| 左侧基线 | `1px solid #E8E8E8` (FS-004-04) 通栏 |
+| 项高度 | `32px` |
+| 一级项左 padding | `--spacing-3` (12px) |
+| 二级项左 padding | `--spacing-5` (24px) |
+| 字号 | `14px Regular` |
+
+| 状态 | 一级文字 | 二级文字 | 左侧指示条 |
+|------|----------|----------|-----------|
+| 默认 | `#222222` (FS-004) | `#A6A6A6` (FS-004-07) | 无 |
+| Hover | `#F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) | 无 |
+| 激活 | `#F5222D` (ZS-001-09) | — | 左侧 `2px solid #F5222D`，覆盖容器基线 |
+
+- 二级项不单独支持激活态：选中二级时其父级一级显示激活态，指示条按父级位置渲染
+
+---
+
+
+---
+
+> 返回 [规范目录](README.md)