diff --git a/frontend-web/docs/ui修改-深蓝.md b/frontend-web/docs/ui修改-深蓝.md index 357c7b31..3aaa8028 100644 --- a/frontend-web/docs/ui修改-深蓝.md +++ b/frontend-web/docs/ui修改-深蓝.md @@ -233,3 +233,603 @@ |------|----------| | 16px Regular | 表格横纵轴数字 | | 14px Regular | 表格横轴数字（空间有限） | + +--- + +## 3. 阴影 + +### 3.1 容器与卡片配色 + +阴影组通过深浅层级叠加形成空间感：外层容器最深，内层卡片次之，边框与高亮文字使用主色或字体色。 + +#### 3.1.1 外层容器 + +| 角色 | 色值 | 来源 | +|------|------|------| +| 页面 / 最外层背景 | `#060E24` | ZS-004-10 | +| 分栏容器背景 | `#0C1836` | ZS-004-09 | + +#### 3.1.2 卡片（标题 + 操作） + +| 角色 | 色值 | 来源 | +|------|------|------| +| 卡片背景 | `#122347` | ZS-004-08 | +| 卡片边框 | `#1A2F5A` | ZS-004-07 | +| 卡片阴影（外发光） | `rgba(22, 119, 255, 0.12)` | 基于 ZS-002-06 主色蓝 12% 透明度 | +| 标题文字（16px Bold） | `#C5CFE0` | ZS-004-02（正常字体色） | +| 操作按钮文字 | `#4096FF` | ZS-002-05（标准蓝，链接） | +| 次级操作图标（✏️ / ⋯） | `#6E88B0` | ZS-004-04（次级字体色） | + +#### 3.1.3 卡片新增（占位卡片） + +虚线描边的"新增入口"卡片，用于引导用户添加内容。 + +| 角色 | 色值 | 来源 | +|------|------|------| +| 卡片背景 | `#0C1836` | ZS-004-09（与外层同色，营造凹陷感） | +| 虚线边框 | `#4096FF` | ZS-002-05 | +| 加号图标 | `#4096FF` | ZS-002-05 | + +#### 3.1.4 阴影投影规则 + +| 层级 | 阴影值 | 使用场景 | +|------|--------|----------| +| 一级阴影（卡片悬浮） | `0 2px 8px rgba(22, 119, 255, 0.12)` | 普通卡片 | +| 二级阴影（hover / 强调） | `0 4px 16px rgba(22, 119, 255, 0.24)` | 卡片 hover、弹出层 | +| 三级阴影（弹窗 / Modal） | `0 8px 32px rgba(6, 14, 36, 0.6)` | Dialog、Drawer | + +--- + +## 4. 圆角 + +### 4.1 圆角统一规范 + +| 元素 | 圆角值 | 说明 | +|------|--------|------| +| 按钮 | `2px` | 所有按钮（主按钮 / 次按钮 / 文本按钮）统一使用 | +| 卡片 | `4px` | 内容卡片、标题+操作卡片、卡片新增占位 | +| 页面分栏框 | `4px` | 外层容器、分栏区域 | +| 输入框 / 选择器 | `2px` | 与按钮一致，保持表单内对齐 | +| Tag / Badge | `2px` | 与按钮一致 | +| Modal / Drawer | `4px` | 与卡片一致 | + +### 4.2 按钮配色（圆角 2px） + +#### 4.2.1 主按钮（Primary） + +| 角色 | 色值 | 来源 | +|------|------|------| +| 背景 | `#1677FF` | ZS-002-06 | +| 文字 | `#FFFFFF` | — | +| Hover 背景 | `#0958D9` | ZS-002-07 | +| Active 背景 | `#003EB3` | ZS-002-08 | +| 禁用背景 | `#4A6491` | ZS-004-05 | +| 禁用文字 | `#6E88B0` | ZS-004-04 | + +#### 4.2.2 次按钮（Outline / Default） + +| 角色 | 色值 | 来源 | +|------|------|------| +| 背景 | `transparent` | — | +| 边框 | `#6E88B0` | ZS-004-04 | +| 文字 | `#C5CFE0` | ZS-004-02 | +| Hover 边框 | `#4096FF` | ZS-002-05 | +| Hover 文字 | `#4096FF` | ZS-002-05 | +| Active 边框 | `#1677FF` | ZS-002-06 | + +### 4.3 卡片与分栏（圆角 4px） + +| 角色 | 色值 | 来源 | +|------|------|------| +| 卡片背景 | `#122347` | ZS-004-08 | +| 卡片边框 | `#1A2F5A` | ZS-004-07 | +| 分栏框背景 | `#0C1836` | ZS-004-09 | +| 分栏框边框 | `#1A2F5A` | ZS-004-07 | + +--- + +## 5. 按钮 + +> 全部圆角 `2px`，文字字号 14px（小尺寸）/ 14px（正常尺寸），字体 Noto Sans S Chinese Regular。 + +### 5.1 按钮尺寸 + +| 规格 | 高度 | 内边距 | 使用场景 | +|------|------|--------|----------| +| 小 | `28px` | `0 10px` | 空间小的板块内部，如表格中、卡片标题等 | +| 正常 | `32px` | `0 14px` | 默认尺寸，所有常用按钮 | + +### 5.2 按钮类型与配色 + +#### 5.2.1 主按钮（Primary） + +> 一个操作区域只能有一个主按钮。 + +| 状态 | 背景 | 边框 | 文字 | +|------|------|------|------| +| 默认 | `#1677FF` (ZS-002-06) | — | `#FFFFFF` | +| Hover | `#0958D9` (ZS-002-07) | — | `#FFFFFF` | +| Active | `#003EB3` (ZS-002-08) | — | `#FFFFFF` | +| 失效 | `rgba(22, 119, 255, 0.35)` | — | `#6E88B0` (ZS-004-04) | + +#### 5.2.2 默认按钮（Default / Outline） + +用于"取消 / 返回"等次要操作，与主按钮成对出现时主按钮在右。 + +| 状态 | 背景 | 边框 | 文字 | +|------|------|------|------| +| 默认 | `transparent` | `#6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) | +| Hover | `rgba(22, 119, 255, 0.08)` | `#4096FF` (ZS-002-05) | `#4096FF` (ZS-002-05) | +| Active | `rgba(22, 119, 255, 0.16)` | `#1677FF` (ZS-002-06) | `#1677FF` (ZS-002-06) | +| 失效 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` (ZS-004-05) | + +#### 5.2.3 文本按钮（Text） + +用于表格操作、文件下载等。无背景与边框，靠文字色识别。 + +| 状态 | 文字 | 装饰 | +|------|------|------| +| 默认 | `#4096FF` (ZS-002-05) | 无下划线 | +| Hover | `#1677FF` (ZS-002-06) | 显示下划线（与文字同色） | +| Active | `#0958D9` (ZS-002-07) | 下划线 | +| 失效 | `#4A6491` (ZS-004-05) | 无装饰 | + +#### 5.2.4 图标按钮（Icon-only） + +用于增强辨识度或节省空间。仅图标，无文字。 + +| 变体 | 背景 | 图标颜色 | +|------|------|----------| +| 主色（常用） | `#1677FF` (ZS-002-06) | `#FFFFFF` | +| 主色 Hover | `#0958D9` (ZS-002-07) | `#FFFFFF` | +| 危险（删除等） | `#F5222D` (ZS-001-06) | `#FFFFFF` | +| 危险 Hover | `#CF1322` (ZS-001-07) | `#FFFFFF` | +| 透明（仅图标） | `transparent` | `#6E88B0` (ZS-004-04) → hover `#4096FF` (ZS-002-05) | + +### 5.3 按钮组合 + +#### 5.3.1 文字 + 下拉按钮（含 ▾） + +两种填充： + +| 形态 | 配色规则 | +|------|----------| +| 默认（Outline） | 沿用 §5.2.2 默认按钮，箭头 ▾ 与文字同色 `#C5CFE0` | +| 主色（Filled） | 沿用 §5.2.1 主按钮，箭头 ▾ 同步白色 `#FFFFFF` | + +#### 5.3.2 图标 + 文字按钮（如 `+ 正常`） + +| 形态 | 配色规则 | +|------|----------| +| 默认（Outline） | 沿用 §5.2.2，左侧图标颜色与文字一致 `#C5CFE0` | +| 主色（Filled） | 沿用 §5.2.1，左侧图标与文字一致 `#FFFFFF` | + +#### 5.3.3 文本按钮 + 图标（"更多 »"、"展开 ⌄"、"下一页 »"、"« 上一页"） + +| 角色 | 色值 | +|------|------| +| 文字 + 图标（默认） | `#4096FF` (ZS-002-05) | +| 文字 + 图标（Hover） | `#1677FF` (ZS-002-06) | +| 失效 | `#4A6491` (ZS-004-05) | + +> 图标可在文字前或后；多个文本按钮排成一行时，间距 `16px`，无分隔符。 + +#### 5.3.4 主按钮 + 默认按钮组合（如"确定 / 取消 / 返回"） + +- **排列顺序**：默认按钮在左，主按钮在右（最右侧为主操作） +- **按钮间距**：`8px` +- **示例**：`[ 返回 ] [ 取消 ] [ 确定 ]` +- **配色**：主按钮沿用 §5.2.1，其余沿用 §5.2.2 + +### 5.4 其他按钮 + +#### 5.4.1 悬浮状态（Floating） + +用于 Banner / 登录 / 视觉冲击强等展示场景。配色与主按钮一致，叠加阴影抬升。 + +| 状态 | 阴影 | +|------|------| +| 默认 | `0 2px 8px rgba(22, 119, 255, 0.12)`（§3.1.4 一级阴影） | +| Hover | `0 4px 16px rgba(22, 119, 255, 0.24)`（§3.1.4 二级阴影） | +| Active | 阴影消失，按下感 | + +#### 5.4.2 加载中（Loading） + +用于异步操作等待反馈。点击瞬间将按钮锁定，文字前显示旋转图标。 + +| 角色 | 色值 | +|------|------| +| 背景 | `#1677FF` (ZS-002-06) | +| 文字 | `#FFFFFF` | +| 加载图标 | `#FFFFFF`，旋转动画 `1.2s linear infinite` | +| 不可点击 | 鼠标 `cursor: not-allowed` | + +> 与失效态的区别：失效是"不可操作"，加载是"操作进行中"——保留品牌主色，只是不可再次触发。 + +--- + +## 6. 分割线 + +> 统一线宽 `1px`，颜色全部从 ZS-004 深蓝系取色，与深色背景保持低对比度但仍可识别。 + +### 6.1 水平分割线 + +水平分割线常用来对不同元素内容进行分割。 + +| 类型 | 色值 | 来源 | 样式 | 使用场景 | +|------|------|------|------|----------| +| 实线（默认） | `#4A6491` | ZS-004-05 | `border-top: 1px solid` | 模块间、列表项间分割 | +| 实线（强调） | `#6E88B0` | ZS-004-04 | `border-top: 1px solid` | 主区块标题下方、卡片头部分割 | +| 实线（弱化） | `#2D4473` | ZS-004-06 | `border-top: 1px solid` | 卡片内部、密集列表分隔 | +| 虚线 | `#4A6491` | ZS-004-05 | `border-top: 1px dashed` | 次级 / 层级内分割，提示"非主结构" | +| 主色实线（高亮） | `#1677FF` | ZS-002-06 | `border-top: 1px solid` | 强调分隔，少量使用（如当前激活区块底边） | + +### 6.2 垂直分割线 + +垂直分割线常用来做行内分割（如导航项之间、状态指示之间、表格列头之间）。 + +| 类型 | 色值 | 来源 | 样式 | 使用场景 | +|------|------|------|------|----------| +| 实线（默认） | `#4A6491` | ZS-004-05 | `border-left: 1px solid` | 行内 inline 元素分割（面包屑、操作按钮组） | +| 实线（弱化） | `#2D4473` | ZS-004-06 | `border-left: 1px solid` | 表格列分割、紧凑布局 | +| 虚线 | `#4A6491` | ZS-004-05 | `border-left: 1px dashed` | 多列对齐辅助、辅助参考线 | + +### 6.3 规格与间距 + +| 规则 | 取值 | +|------|------| +| 线宽 | `1px` | +| 水平分割线与上下元素间距 | `≥ 8px`（紧凑布局可用 `4px`） | +| 垂直分割线与左右元素间距 | `≥ 8px`（行内紧凑 `4px`） | +| 垂直分割线高度 | 与文字行高一致，约 `12–14px`（也可全高跟随容器） | +| 透明度 | 必要时叠 `opacity: 0.6` 实现"更弱"层级 | + +### 6.4 CSS 参考 + +```css +/* 默认水平分割线 */ +.divider-h { border-top: 1px solid #4A6491; } +.divider-h-strong { border-top: 1px solid #6E88B0; } +.divider-h-weak { border-top: 1px solid #2D4473; } +.divider-h-dashed { border-top: 1px dashed #4A6491; } +.divider-h-accent { border-top: 1px solid #1677FF; } + +/* 垂直分割线 */ +.divider-v { border-left: 1px solid #4A6491; height: 14px; display: inline-block; vertical-align: middle; } +.divider-v-weak { border-left: 1px solid #2D4473; height: 14px; display: inline-block; vertical-align: middle; } +.divider-v-dashed { border-left: 1px dashed #4A6491; height: 14px; display: inline-block; vertical-align: middle; } +``` + +--- + +## 7. 间距 + +> 全站以 `8px (0.5rem)` 为对照基准单位，划分"密 / 疏"两个层次。所有间距取值均来自下列阶梯，禁止使用非阶梯值（如 5px、13px）。 + +### 7.1 间距阶梯 + +| 阶 | px | rem | 分组 | 典型场景 | +|----|------|--------|------|----------| +| 1 | `4px` | `0.25rem` | 密 | 图标与文字间距、Tag 内边距、紧凑徽标 | +| 2 | `8px` | `0.5rem` | 密 | 行内元素相邻、按钮组间距、表单 label 与控件 | +| 3 | `12px` | `0.75rem` | 密 | 表单项垂直间距、列表项内边距 | +| 4 | `16px` | `1rem` | 密 | 卡片内容内边距、模块内分隔 | +| 5 | `24px` | `1.5rem` | 疏 | 模块之间、Section 内边距 | +| 6 | `32px` | `2rem` | 疏 | 卡片之间、表单组之间 | +| 7 | `40px` | `2.5rem` | 疏 | 主区块之间、页面 Header / Footer 内边距 | +| 8 | `56px` | `3.5rem` | 疏 | 页面段落级隔断、Banner 区域 | + +> "密"对应紧凑信息密度（表格、表单、卡片内部）；"疏"对应视觉呼吸（模块之间、页面整体留白）。**16px 是"密"的上限，24px 是"疏"的下限**，两者之间不应再插入自定义值。 + +### 7.2 使用原则 + +- **同层级一致**：同一布局层级内的间距必须使用同一阶值；多种取值会破坏节奏。 +- **就近取阶**：相邻区块的间距尽量从相邻阶梯取值（如 `16px → 24px`），跨越过多阶（如 `8px → 56px`）会让视觉断裂。 +- **密疏不混用**：一个组件内部全部用"密"，外部用"疏"，避免内/外间距颠倒。 +- **优先 8 的倍数**：除最小阶 `4px` 外，所有阶皆为 8 的倍数，方便 4/8 网格对齐。 +- **响应式按比例衰减**：移动端可整体降一阶（如 `24px → 16px`），但仍在阶梯内。 + +### 7.3 CSS Token 建议 + +```css +:root { + --spacing-1: 4px; /* 0.25rem */ + --spacing-2: 8px; /* 0.5rem */ + --spacing-3: 12px; /* 0.75rem */ + --spacing-4: 16px; /* 1rem */ + --spacing-5: 24px; /* 1.5rem */ + --spacing-6: 32px; /* 2rem */ + --spacing-7: 40px; /* 2.5rem */ + --spacing-8: 56px; /* 3.5rem */ +} +``` + +### 7.4 与已有规范的对齐 + +| 已有规则 | 对应阶 | +|----------|--------| +| §4.x 卡片圆角内边距 | `--spacing-4` (16px) | +| §5.3.4 主+默认按钮组合间距 `8px` | `--spacing-2` | +| §5.3.3 文本按钮间距 `16px` | `--spacing-4` | +| §6.3 分割线与上下元素间距 `≥ 8px` | `--spacing-2` 起 | + +--- + +## 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 导航组件-锚点"。三类组件共用主色蓝指示当前位置：**页签 / 锚点 / 回到顶部**。 + +### 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 互斥） | 文字 + 下划线（横/纵） | +| 锚点 | 长页面内章节跳转 | 文字 + 左侧指示条 + 层级缩进 | +| 回到顶部 | 长页面快速返回起点 | 圆形悬浮按钮 + 上箭头 |