ui规范

2026-05-25 22:51:38 +08:00
1 parent 096e85fbc3
commit 48d22e0d42
@@ -711,6 +711,8 @@
 ## 9. 锚点与页签

 > 对应"4.2 导航组件-锚点"。三类组件共用主色蓝指示当前位置：**页签 / 锚点 / 回到顶部**。
+>
+> 视觉参考：标签横向 / 标签纵向 / 锚点的三联图见设计稿「选项卡.png」——三种形态在本节均已规范化（§9.1 = 标签横纵向、§9.2 = 锚点）。

 ### 9.1 页签（Tabs）

@@ -833,3 +835,703 @@ Hover 状态下方显示 `回到顶部` 提示气泡：
 | 页签 | 同层级内容切换（多 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 页） | 用正常分页 + 隐藏中间页码（`...` 省略） |
+
+---
+
+## 14. 输入框（搜索框）
+
+> 对应设计稿「输入框.png」。按使用场景分三类：**基本搜索框 / 后台系统搜索框 / 页面头部搜索框**。配色全部从 ZS-002 主色蓝与 ZS-004 深蓝系取。
+
+### 14.1 公共规格
+
+所有搜索框共用同一套尺寸 / 边框规格：
+
+| 属性 | 默认（正常） | 小号 |
+|------|--------------|------|
+| 高度 | `32px` | `28px` |
+| 水平 padding | `--spacing-3` (12px) | `--spacing-2` (8px) |
+| 圆角 | `2px`（§4.1） | `2px` |
+| 字号 | `14px Regular` | `14px Regular` |
+| 文字色 | `#C5CFE0` (ZS-004-02) | 同 |
+| 占位符色 | `#6E88B0` (ZS-004-04) | 同 |
+| 背景 | `#0C1836` (ZS-004-09) | 同 |
+
+#### 14.1.1 边框状态
+
+| 状态 | 边框 | 来源 |
+|------|------|------|
+| 默认 | `1px solid #1A2F5A` | ZS-004-07 |
+| Hover | `1px solid #4096FF` | ZS-002-05 |
+| Focus | `1px solid #1677FF` + 外发光 `0 0 0 2px rgba(22,119,255,0.16)` | ZS-002-06 |
+| 失效 | `1px solid #2D4473`，背景 `rgba(22,119,255,0.04)` | ZS-004-06 |
+| 错误 | `1px solid #F5222D` + 外发光 `0 0 0 2px rgba(245,34,45,0.16)` | ZS-001-06 |
+
+### 14.2 基本搜索框
+
+#### 14.2.1 基础搜索框
+
+输入框尾部带 🔍 图标，回车或点击图标触发搜索：
+
+```
+[ 搜索                  🔍 ]
+```
+
+| 角色 | 色值 / 规格 | 来源 |
+|------|-------------|------|
+| 搜索图标 🔍 | `16px`，`#6E88B0` | ZS-004-04 |
+| 图标 hover | `#4096FF` | ZS-002-05 |
+| 图标 → 输入边缘间距 | `--spacing-2` (8px) | — |
+
+#### 14.2.2 分类搜索框（带前缀下拉）
+
+输入框左侧拼一个分类下拉，常用于「按协议搜 IP」等场景：
+
+```
+[ http:// ▾ ] [ 搜索 IP 地址          🔍 ]
+```
+
+| 角色 | 色值 / 规格 | 备注 |
+|------|-------------|------|
+| 前缀下拉宽度 | `auto`，最小 `72px` | 内容自适应 |
+| 前缀下拉与输入框 | 共用同一组边框，**中间无缝**（公用一条 `1px #1A2F5A` 分隔） | 视为一体控件 |
+| 前缀下拉箭头 `▾` | `12px`，`#6E88B0` | hover → `#4096FF` |
+| 整体 focus 行为 | 焦点落到输入框时，**前缀下拉的边框也同步高亮** | — |
+
+### 14.3 后台系统常用搜索框
+
+输入框 + 紧贴右侧的**实心蓝色搜索按钮**，常用于后台主内容区列表筛选：
+
+```
+[ 🔍  搜索任务集名称/负责人        ] [ 搜索 ]
+```
+
+#### 14.3.1 规格
+
+| 元素 | 色值 / 规格 | 来源 |
+|------|-------------|------|
+| 左侧搜索图标 🔍 | `16px`，`#6E88B0` | ZS-004-04 |
+| 图标 → 文字间距 | `--spacing-2` (8px) | — |
+| 输入框右边框 | **无**（与按钮无缝拼接） | — |
+| 按钮 | 沿用 §5.2.1 主按钮，圆角 `2px`，文字 `搜索` | — |
+| 按钮高度 | 与输入框一致 `32px` | — |
+| 按钮左侧 | 与输入框紧贴，**无间距** | — |
+
+### 14.4 页面头部搜索框
+
+页头位置的搜索控件，支持四种扩展：**单行 / 高级搜索 / 历史记录 / 输入联想**。
+
+#### 14.4.1 单行（最简）
+
+```
+[ 输入的文字                    ] [ 搜索 ]
+```
+
+规格同 §14.3，仅省略左侧 🔍 图标，让输入文字占满。
+
+#### 14.4.2 含高级搜索切换
+
+右侧叠加一个文字按钮「高级搜索 ▾」，展开后显示模式选项：
+
+```
+[ 输入的文字              ] [ 搜索 ]   高级搜索 ▾
+                                       ○ 模糊匹配   ● 精准匹配
+```
+
+| 元素 | 色值 / 规格 | 来源 |
+|------|-------------|------|
+| 「高级搜索 ▾」文字按钮 | `14px Regular`，`#4096FF`，hover `#1677FF` | ZS-002-05 → ZS-002-06 |
+| 「高级搜索」与「搜索」按钮间距 | `--spacing-3` (12px) | — |
+| 单选项「模糊匹配 / 精准匹配」 | 沿用通用 Radio 配色：未选 `1px solid #6E88B0`，已选实心 `#1677FF` | — |
+| 单选项 → 搜索框纵向间距 | `--spacing-2` (8px) | — |
+
+#### 14.4.3 含历史记录
+
+输入框下方显示最近搜索词列表，点击直接用该词搜索：
+
+```
+[ 输入的文字              ] [ 搜索 ]
+
+搜索记录词、搜索记录词、记录词
+```
+
+| 元素 | 色值 / 规格 | 来源 |
+|------|-------------|------|
+| 历史记录文字 | `12px Regular`，`#4096FF` | ZS-002-05 |
+| 项间分隔符（顿号 `、`） | `#4A6491` | ZS-004-05（与文字色不同，弱化分隔） |
+| 历史项 hover | `#1677FF` + 下划线 | ZS-002-06 |
+| 历史区与搜索框纵向间距 | `--spacing-2` (8px) | — |
+
+#### 14.4.4 含输入联想下拉
+
+用户输入时，下方弹出联想词面板：
+
+```
+[ 这是                    ] [ 搜索 ]
+┌─────────────────────────────────┐
+│ 这是搜索输入联想词              │
+│ 这是搜索输入联想词              │
+│ 这是搜索输入联想词              │
+│ 这是联想词                      │
+│ 这是联想词悬浮         ←hovered │
+│ ……                              │
+└─────────────────────────────────┘
+```
+
+##### 面板规格
+
+| 属性 | 取值 |
+|------|------|
+| 背景 | `#122347` (ZS-004-08) |
+| 边框 | `1px solid #1A2F5A` (ZS-004-07) |
+| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影变体） |
+| 圆角 | `2px`（与输入框一致） |
+| 项高度 | `36px` |
+| 项水平 padding | `--spacing-3` (12px) |
+| 项字号 | `14px Regular`，`#C5CFE0` (ZS-004-02) |
+| 面板宽度 | 与输入框等宽（不含右侧按钮） |
+| 面板与输入框纵向间距 | `--spacing-1` (4px) |
+
+##### 项状态
+
+| 状态 | 背景 | 文字 |
+|------|------|------|
+| 默认 | `transparent` | `#C5CFE0` |
+| Hover（鼠标 / 键盘焦点） | `rgba(22,119,255,0.16)` 或 `#1A2F5A` (ZS-004-07) | `#FFFFFF` |
+| 已点击（点选后回填输入框） | — | — |
+
+##### 键盘导航
+
+- `↑` / `↓` 在联想词之间移动焦点（焦点项视觉等价于 Hover）
+- `Enter` 选中焦点项并回填输入框 + 触发搜索
+- `Esc` 关闭面板，焦点回到输入框
+
+#### 14.4.5 联想下拉 + 历史记录的关系
+
+- **未输入时**：可显示历史记录（§14.4.3 横向展开形态）
+- **开始输入时**：历史记录被联想下拉**取代**，不要并存
+- **清空输入框**：回到历史记录显示
+
+### 14.5 三种搜索框的选用决策
+
+| 场景 | 选择 |
+|------|------|
+| 表单内 / 卡片内的辅助搜索 | §14.2.1 基础搜索框（图标内嵌） |
+| 需要按类型 / 协议过滤的搜索 | §14.2.2 分类搜索框（带前缀下拉） |
+| 后台列表 / 表格顶部筛选 | §14.3 后台搜索框（输入 + 实心按钮） |
+| 页面头部全局搜索 | §14.4 页面头部搜索框（按需开启高级 / 历史 / 联想） |
+
+### 14.6 CSS Token 参考
+
+```css
+:root {
+  --search-bg:            #0C1836;  /* ZS-004-09 */
+  --search-border:        #1A2F5A;  /* ZS-004-07 */
+  --search-border-hover:  #4096FF;  /* ZS-002-05 */
+  --search-border-focus:  #1677FF;  /* ZS-002-06 */
+  --search-border-error:  #F5222D;  /* ZS-001-06 */
+  --search-text:          #C5CFE0;  /* ZS-004-02 */
+  --search-placeholder:   #6E88B0;  /* ZS-004-04 */
+  --search-icon:          #6E88B0;
+  --search-icon-hover:    #4096FF;
+
+  /* 联想下拉 */
+  --suggest-bg:           #122347;  /* ZS-004-08 */
+  --suggest-item-hover:   rgba(22,119,255,0.16);
+  --suggest-item-text:    #C5CFE0;
+  --suggest-item-hover-text: #FFFFFF;
+
+  /* 历史记录 */
+  --history-text:         #4096FF;
+  --history-text-hover:   #1677FF;
+  --history-sep:          #4A6491;
+}
+```