---
title: 搜索框
slug: 搜索框
category: 组件
figma_node_id: 1:46
figma_page_name: ＞搜索框
aliases: [SearchInput, SearchBox, 搜索输入, 搜索条, 全局搜索]
last_extracted: 2026-05-19
status: ok
---

# 搜索框

> 如流框架顶部全局搜索控件。Mac / Win 两套号型分别交付，默认态宽度跟随视窗的 1/3，且与超级助理入口固定间距，激活态维持线上不变。覆盖默认 / 激活 / 键入 / 文字较多 / hover / tips 通知等完整状态。

## 类型与号型

| 类型 | 适用场景 |
|---|---|
| Mac 默认态搜索框 | macOS 客户端顶部全局搜索 |
| Win 默认态搜索框 | Windows 客户端顶部全局搜索 |
| 超级助理入口 | 与搜索框组合出现，承担大模型助手触发与 tips 通知 |

### 视窗适配号型

| 视窗宽度 | 搜索框默认状态长度 | 来源 token |
|---|---|---|
| 1920px（大屏） | 640px | `layout_APW78U` 容器 |
| 标准 960px | 320px | `layout_B0YPO6` / `layout_7REB6X` |
| 最小 840px | 280px | `layout_9AH5TI` 容器 |

> 搜索框默认状态长度调整为视窗的 1/3，跟随面板等比拉伸。助手入口 & 提示位于搜索框后面，保持固定间距。搜索框激活状态维持线上不变。

## 尺寸规格

数值来自 Figma `globalVars.styles`：

| 元素 | 宽 × 高 | 来源 layout token |
|---|---|---|
| Mac / Win 默认态组件高度 | 44px | `layout_B0YPO6` 等 |
| 标准视窗（960px）下默认态宽度 | 320px | 容器位置 `x:160 y:1467 w:960` 中按 1/3 计 |
| 主体画板 | 1280 × 3641 | `layout_2HZCQF` |
| 超级助理入口图标 | 18 × 18 | `layout_U1JQUZ` 大模型反白符号 |
| 黑色 tips 气泡 | 68 × 28 | `layout_8QDX98` |
| 投影 | `0px 6px 20px rgba(0,0,0,0.05)` | `effect_D2BZQ1` |
| 默认/键入态文字间距 | 18 / 10 / 8 / 8 | Dimension Value 标注 |

## 状态

搜索框完整状态枚举（来自 Figma `name: 默认 / 激活态 / 键入态 / 文字较多效果` 标签）：

| 状态 | 含义 |
|---|---|
| 默认态 | 未聚焦、占位文字可见 |
| 激活态 | 聚焦未输入，光标闪烁 |
| 键入态 | 用户已输入文字，可展示清除按钮 |
| 文字较多效果 | 输入内容长度超出可视宽度时的截断显示态 |

超级助理入口的状态：

| 状态 | 含义 |
|---|---|
| 默认态 | 静止符号，支持点击进入超级助理主场景 |
| hover 态 | hover 时符号变小、出现外边框；动效时长 0.15s |
| tips 通知 | 旋转动效 0.9s（30ms/张），完成后气泡通知划出 0.2s |
| 气泡 hover | 气泡颜色变深，可点击 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 容器底色 | `#FFFFFF` = `White` | 默认底色 |
| 投影 | `rgba(0,0,0,0.05)` | 6px Y / 20px blur |
| 渐变背景装饰（页眉 Union） | `linear-gradient(-64deg, rgba(51,119,255,0)→rgba(51,119,255,0.06))` | 装饰渐变 |
| 章节大标题 | `#11141A` | 24px Medium |
| 状态标签灰 | `#878D99` = `C-Coolgray60` | 12px Regular |
| 说明区正文 | `#5C6473` | 12px Regular |
| 小节标签深 | `#17181A` | 14px Medium |
| 红色尺寸标注 | `#E8178A` | Redlines 数字标注（非组件视觉） |

> 关联 token 见 [色彩](../基础/色彩.md)。搜索框本身视觉以白底 + 阴影为主，蓝色仅出现在装饰渐变与超级助理入口的大模型符号。

## 间距与排布

- 整页画板 1280px 宽，主搜索区高度 44px
- 标准视窗下搜索框 X 起点 160、宽 960 容器内承载 1/3 宽度搜索框
- 与超级助理入口固定间距：搜索框在前，AI 入口在后
- 视窗自适应：960 / 840 / 1920 三档对应搜索框 320 / 280 / 640
- Dimension Value 红色标注：18px / 10px / 8px / 8px（来自页内 Redlines 注解）

## 文案规则

- 默认 placeholder 应清晰说明可搜索内容范围（如「搜索消息、文件、人」）
- 输入内容超出宽度时不换行，按"文字较多效果"截断
- 超级助理 tips 气泡文案需简洁，承担一次性通知

## 交互行为

- **默认 → 激活**：点击聚焦，描边或底色轻微变化，光标进入
- **激活 → 键入**：开始输入后展示清除按钮（通用工具-关闭，10×10px）
- **文字较多**：超出宽度时不撑容器，文本溢出截断
- **视窗拉伸**：搜索框宽度等比跟随视窗 1/3 变化，与 AI 入口保持固定间距
- **超级助理 hover**：大模型符号变小、出外边框，动效时长 0.15s
- **超级助理 tips**：符号自动旋转 0.9s（30ms/张）→ 出气泡通知（划出 0.2s）→ hover 气泡变深
- **激活态尺寸不变**：聚焦后宽度维持线上现状，不做横向扩展

## 示例

<!-- 缺图: Mac-搜索框默认态 → ../图片/组件/搜索框/Mac-搜索框默认态.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: Win-搜索框默认态 → ../图片/组件/搜索框/Win-搜索框默认态.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 标准960视窗-搜索框 → ../图片/组件/搜索框/标准960视窗.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 最小840视窗-搜索框 → ../图片/组件/搜索框/最小840视窗.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 1920视窗-搜索框 → ../图片/组件/搜索框/1920视窗.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 搜索框激活态 → ../图片/组件/搜索框/搜索框激活态.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 搜索框键入态 → ../图片/组件/搜索框/搜索框键入态.png（待补图） -->
<!-- 缺图: 搜索框文字较多 → ../图片/组件/搜索框/搜索框文字较多.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 超级助理入口默认态 → ../图片/组件/搜索框/超级助理入口默认态.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 超级助理入口hover态 → ../图片/组件/搜索框/超级助理入口hover.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 超级助理tips通知 → ../图片/组件/搜索框/超级助理tips通知.png（Figma 节点未导出或图已删除，待手动补图） -->

## 设计考量 / 原文摘录

> 搜索框默认状态长度调整为视窗的 1/3，跟随面板等比拉伸。助手入口 & 提示位于搜索框后面，保持固定间距。搜索框激活状态维持线上不变。
> hover 态：hover 时符号需发生变化，提示可点击。AI 变小，出外边框，动效时长 0.15s。
> 默认态：日常打开如流，超级助理符号静止，支持点击符号/名称进入主场景。
> 效果：超级助理符号自动旋转动效，动效一圈时长 0.9s（30ms/张），旋转完成后最后一张作为常驻图形。

- **宽度策略**：默认宽度跟随视窗 1/3，激活时不再扩张，避免页面元素位移
- **AI 入口跟随**：助手入口与搜索框固定间距，三档视窗下相对位置不变
- **动效时长**：hover 0.15s，旋转 0.9s（30ms × 30 帧），气泡划出 0.2s

## 不推荐用法

- 在搜索框激活后改变其横向宽度（与"激活态维持线上"冲突）
- 把 AI 入口和搜索框之间的间距改成自适应（应固定）
- 在默认态长度上叠加描边强调（应保持低视觉权重，依赖投影区分层级）
- 在小于 840px 的视窗里使用搜索框（最小视窗号型未覆盖）

## 关联

- 搜索建议列表见 [suglist](suglist.md)
- 搜索结果展示见 [结果列表](结果列表.md)
- 结果过滤见 [筛选器](筛选器.md)
- 结果导航 tab 见 [搜索导航](搜索导航.md)
- 输入控件基础见 [输入框](输入框.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
