---
title: suglist
slug: suglist
category: 组件
figma_node_id: 1:50
figma_page_name: ＞suglist
aliases: [Suggestion, Suglist, 搜索建议, 联想词, 自动补全列表, AutoComplete]
last_extracted: 2026-05-19
status: ok
---

# suglist

> 搜索框激活后弹出的实时联想列表。综合 tab 页下分单行文本与两行文本两种布局，覆盖普通检索词、群、联系人、文档、会议、本地文件六种结果类型，以及默认态与 hover 态两种交互状态。hover 时背景变深、出小手、并露出"清除"等更多操作按钮。

## 类型与号型

### 按布局结构分类

| 布局 | 高度 | 适用场景 |
|---|---|---|
| 综合 tab 列表 - 单行文本 | 60px | 普通检索词 / 群 / 联系人 / 会议 / 本地文件 |
| 综合 tab 列表 - 两行文本 | 80px | 文档（含摘要 / 路径副标题） |

### 按结果类型分类

| 类型 | 示例 component |
|---|---|
| 普通检索词 | `3445:490` |
| 群 | `3445:502` |
| 联系人 | `3445:516` |
| 文档 | `3445:461 / 480`（单行 60 / 两行 80） |
| 会议 | `3445:525` |
| 本地文件 | `3445:604` |

> 文档类结果（特殊）：有摘要时展示摘要，没有时则不展示。

## 尺寸规格

数值来自 Figma `globalVars.styles`：

| 元素 | 宽 × 高 | 来源 token |
|---|---|---|
| 整页画板 | 1280 × 3900 | `layout_NG1DQX` |
| suglist 容器灰底 | 1002 × 675 | `layout_PR3I7Y`（示例占位） |
| 单行结果项 | 696 × 60 | `layout_E1R9YC / E9FDDW / 5JA3M3 / SV4WSM / UZGPUE / L36N9X` |
| 两行结果项（文档） | 696 × 80 | `layout_YK2BAB / TLEEQI` |
| hover 态结果项 | 692 × 60 | `layout_3MR49Y / 0PIUTS / GNRF8N / B4BW4X` |
| 小手 icon | 15 × 16 | `layout_2NVMTM` 等 |
| 空框（无结果占位） | 960 × 640 | `layout_LTT9IT` |
| 标题字号 | 24px Medium | `style_D38THE` |
| 小节标题字号 | 18px Semibold | `style_H9WDXR` |
| 正文字号 | 14px Regular | `style_SZZWEH` |
| hover 标题字号 | 14px Medium，行高 22px | `style_Q3BZ2Y` |

## 状态

suglist 完整状态枚举：

| 状态 | 含义 |
|---|---|
| 默认态 | 列表项未触碰，展示标准结果布局 |
| hover 态 | 鼠标悬停，背景变深、出小手、露出更多操作按钮（如"清除""通讯录"） |

文档类结果的细分：

| 子态 | 含义 |
|---|---|
| 文档默认（单行） | 仅展示标题 |
| 文档默认（两行） | 展示标题 + 摘要 / 路径 |
| 文档 hover（单行 / 两行） | 背景变深，可展露更多操作 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 容器底色 | `#FFFFFF` = `White` | suglist 弹层底色 |
| 示例占位灰底 | `#F7F7F7` | 文档配图区域 |
| 空框背景 | `#FCFCFC` = `C-Coolgray10` | 无结果占位 |
| 文字主色 | `#11141A` | 模块/小节标题 |
| 正文 | `#878D99` = `C-Coolgray60` | 14px Regular |
| hover 文字色 | `#17181A` | 14px Medium，行高 22px |
| 装饰渐变（页眉） | `linear-gradient(-64deg, rgba(51,119,255,0)→rgba(51,119,255,0.06))` | Union 装饰 |

> 关联 token 见 [色彩](../基础/色彩.md)。

## 间距与排布

- 整页宽 1280px，画板高 3900px
- 结果项 X 起点 159、宽 696；hover 态 hover 区 692 + 4 留白
- 结果项间无明显分隔线，依靠 hover 背景区分
- 章节排布（垂直步进）：
  - 1.1 单行文本示例：Y 485
  - 1.2 两行文本示例：Y 847
  - 默认 / hover 区：Y 1071 起步进 110px
- 空框（无结果占位）：1280 中居中，960×640，灰底 `#FCFCFC`

## 文案规则

- 联想结果文案应贴近用户输入字符，命中部分需视觉强化（命中文字标蓝）
- 文档类副标题不超过 1 行，过长省略
- 普通检索词通常是历史检索词，hover 时露出"清除"操作
- "清除"按钮 hover 时颜色变蓝，提示可点击
- 联系人 hover 时露出"通讯录"按钮，颜色变蓝可点击

## 交互行为

- **默认 → hover**：鼠标悬停时，整行背景变深、光标变小手、文字色加深
- **hover 时露出更多操作**：在右侧出现"清除"/"通讯录"等附加按钮（依结果类型）
- **更多操作 hover**：附加按钮单独 hover 时变蓝，标识可点击
- **键盘上下键**：在 suglist 上移动焦点，焦点态等同 hover
- **回车 / 点击**：跳转到对应详情（联系人卡片、文档、群、会议等）
- **无结果**：列表替换为空框（960×640）占位
- **文档单行 / 两行切换**：依摘要 / 路径数据存在与否，自动适配

## 示例

<!-- 缺图: suglist-单行文本布局 → ../图片/组件/suglist/单行文本布局.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: suglist-两行文本布局 → ../图片/组件/suglist/两行文本布局.png（待补图） -->
<!-- 缺图: suglist-普通检索词 → ../图片/组件/suglist/普通检索词.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: suglist-群结果 → ../图片/组件/suglist/群.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: suglist-联系人结果 → ../图片/组件/suglist/联系人.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: suglist-会议结果 → ../图片/组件/suglist/会议.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: suglist-文档单行 → ../图片/组件/suglist/文档单行.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: suglist-文档两行 → ../图片/组件/suglist/文档两行.png（待补图） -->
<!-- 缺图: suglist-本地文件 → ../图片/组件/suglist/本地文件.png（待补图） -->
<!-- 缺图: suglist-文档hover → ../图片/组件/suglist/文档hover.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: suglist-普通检索词hover → ../图片/组件/suglist/普通检索词hover.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: suglist-群hover → ../图片/组件/suglist/群hover.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: suglist-联系人hover → ../图片/组件/suglist/联系人hover.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: suglist-空状态 → ../图片/组件/suglist/空状态.png（待补图） -->

## 设计考量 / 原文摘录

> hover 时背景色变深，出小手，同时出现"清除"等更多操作按钮。
> hover "清除"按钮，颜色变蓝，提示可点击。
> hover "通讯录"按钮，颜色变蓝，提示可点击。
> 文档类结果（特殊），有摘要时展示摘要，没有时则不展示。

- **单行 / 两行二态切换**：单行用于结构简单的实体（人、群、词条），两行预留摘要区给文档
- **hover 露出更多操作**：把次级操作（清除历史、跳转通讯录）藏在 hover，避免默认态视觉拥挤
- **附加按钮二级 hover 变蓝**：通过颜色强化"可点"感，避免与整行 hover 混淆

## 不推荐用法

- 文档类用单行（丢失摘要 / 路径副信息）
- 把"清除""通讯录"等次级操作放在默认态（视觉过载）
- 同一 suglist 内混用不同结果类型且不归类（用户难以扫描）
- hover 时只改文字色不改背景（视觉反馈不足）
- 列表项无最小高度约束（60 / 80 应锁死）

## 关联

- 联想入口见 [搜索框](搜索框.md)
- 联想点击后展开结果见 [结果列表](结果列表.md)
- 结果分类切换见 [搜索导航](搜索导航.md)
- 结果过滤见 [筛选器](筛选器.md)
- 列表基础规范见 [列表](列表.md)
- 浮层定位规范见 [浮层](浮层.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
