wsk/deerflow-code

Fork 0

gozeros b638b541d0 初始化

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

19 KiB

Raw Permalink Blame History

浅红色 UI 规范 · 三、导航

返回规范目录　|　本篇：导航组件 · 面包屑 · 页头与分页 · 步骤条 · 页签与锚点

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`，覆盖容器基线

二级项不单独支持激活态：选中二级时其父级一级显示激活态，指示条按父级位置渲染

返回规范目录

19 KiB Raw Permalink Blame History Unescape Escape