From 48d22e0d420ea753cb6893f1f758d7135671ff83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= Date: Mon, 25 May 2026 22:51:38 +0800 Subject: [PATCH] =?UTF-8?q?ui=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend-web/docs/ui修改-深蓝.md | 702 +++++++++++++++++++++++++++++++ 1 file changed, 702 insertions(+) diff --git a/frontend-web/docs/ui修改-深蓝.md b/frontend-web/docs/ui修改-深蓝.md index 3aaa8028..a2d6a432 100644 --- a/frontend-web/docs/ui修改-深蓝.md +++ b/frontend-web/docs/ui修改-深蓝.md @@ -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; +} +```