---
title: 结果列表
slug: 结果列表
category: 组件
figma_node_id: 1:51
figma_page_name: ＞结果列表
aliases: [SearchResult, Result List, 搜索结果, 综合结果, 垂类结果, 会议搜索结果]
last_extracted: 2026-05-20
status: ok
---

# 结果列表

> 如流全局搜索（搜索框）触发后承载搜索结果呈现的列表组件。覆盖综合 / 垂类两种 tab 形态，从最简的"单行文本"到"两行文本"到"复杂结果"（周报 / OKR / 会议 / 文档插件）共三档结构。会议搜索结果列表是 24 年 Q3 的重点更新，新增文档外露与会议纪要 / 智能记录入口。

## 类型与号型

| 类型 | 适用场景 |
|---|---|
| 1.1 综合 tab - 单行文本 | 群、文档、本地文件等单字段命中 |
| 1.2 综合 tab - 两行文本 | 联系人、消息、会议室、服务号、文档（带摘要） |
| 1.3 复杂结果列表 - 标题加粗 | 周报、OKR、富结构内容 |
| 1.1 垂类列表 - 单行文本 | 垂类 tab 下单字段命中 |
| 1.2 垂类列表 - 两行文本 | 垂类 tab 下带辅助信息的命中 |
| 1.3 复杂结果列表 - 垂类版 | 垂类 tab 下的富结构内容 |
| 文档插件 - 文档 query 推荐 | 搜索框内"我最近编辑的"等 query 推荐 |
| 会议搜索结果 - 桌面端 | 历史会议结果，含纪要 / 智能记录 / 文档外露 |
| 会议搜索结果 - 移动端 | 历史会议结果的移动端排版 |

## 尺寸规格

数值来自 Figma `globalVars.styles`：

| 元素 | 宽 × 高 / 说明 | 来源 token |
|---|---|---|
| 主体画板 | 1280px 宽 | `layout_3KLZPN` |
| 内容容器（结果区） | 696 × 38 单条 | `layout_UT74S9` / `layout_MYFHXY` 等 |
| 结果背景色 | `#FCFCFC` | `fill_SULNCC` |
| 当前选中态指示条 | 26 × 4，渐变 | `layout_69OW9J` + `fill_TTEC5T` |
| 选中态投影 | `0px 3px 5px rgba(0,51,255,0.2)` | `effect_AX24BU` |
| 圆角 - 选中态 | 9px / 100px / 100px / 0px（异型胶囊） | 直接标注 |

## 状态

| 状态 | 含义 |
|---|---|
| 默认态 | 列表项常态，背景 `#FCFCFC` |
| hover 态 | 背景色变深，鼠标变小手，出现"更多操作"按钮或浮层入口 |
| 选中态 | 左侧出现胶囊状指示条，蓝色渐变 |
| 点击态 | 整条可点击（除灰色区域外）；移动端用背景色区分热区 |

### 文档插件 - query 推荐特有状态

| 状态 | 描述 |
|---|---|
| 初始加载 | 100ms 未出结果时展示加载态，loading 显示【...】 |
| 加载完成 | 符号转 1 圈，标题逐字出现，展示推荐 query |
| 加载失败 / 超时兜底 | 暂定 2s 触发兜底文案 |
| hover query 区 | 出小手 + 功能提示，投影加深 |
| 点击后 | 生成中 loading → 展示具体 query，骨架屏加载 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 结果区背景 | `#FCFCFC` | `fill_SULNCC` |
| 章节大标题 | `#11141A` | 24px Medium |
| 普通信息文本 | `#5C6473` | 14px Regular |
| 重要信息文本 | `#11141A` | 14px Medium |
| 标题文本 | `#11141A` | 16px Medium |
| 点击可跳转文本（链接） | `#3377FF` = `Brandblue60` | 14px Medium |
| 选中态指示条 | 渐变 `rgba(89,173,255,1) → rgba(51,119,255,1)` | `fill_TTEC5T` |
| 命中关键词高亮 | `#3377FF` | "命中文字标蓝" |
| 红色尺寸标注 | `#E8178A` | Redlines 数字标注 |

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

## 字段构成

### 综合 / 垂类基础结构

- **icon**：结果类型图标（群 / 联系人 / 文档 / 本地文件 / 会议 / 服务号 等）
- **标题区**：一行展示，超出显示 …，hover tips 展示全部
- **辅助区**：摘要 / 时间 / 参会人等辅助字段，按结果类型差异化
- **更多操作**：hover 时外露的"更多操作"按钮 / 浮层面板

### 会议搜索结果特有字段

来源：Figma 节点"会议搜索桌面端 展示规则"

- **命中规则**：支持标题 / 参会人 / 纪要内容 / 文档标题命中展示，命中文字标蓝
- **标题区**：会议名称（一行截断 + hover tips） + 循环会标签（标签完整展示、标题名称截断）
- **辅助区 - 摘要**：会议纪要，有则展示无则不展示，命中关键词高亮 + 外露，未命中从头展示
- **辅助区 - 时间**：MM-DD HH:mm-HH:mm（桌面端），MM/DD HH:mm-HH:mm（移动端）
- **辅助区 - 参会人**：默认展示创建人 + 参会人数；如有人名命中，命中人外露 + 高亮，超长截断
- **会议纪要 / 智能记录入口**：历史会议增加（icon + 功能文案），桌面端支持单独点击 → 打开纪要 / 智能记录弹窗面板；移动端不支持单独点击
- **文档外露**：在线 & 本地文件均支持
  - 桌面端：横排排列，一行展示，最后一个标题超出显示 …，hover tips 展示全部，新增 "等 n 篇文档" 字段
  - 移动端：仅展示 1 个文档，超长 …，新增 "等 n 篇文档"，n 为总数

## 文档外露交互

### 在线文档
- 每篇文档支持单独热区，点击进入文档详情页（桌面端）或跳转知识库文档页面（移动端）

### 本地文件
- 需展示后缀，空间不足时后缀完整展示、标题缩略
- 点击打开预览窗口；不支持预览的文件点击后出 toast 提示"不支持预览"

### hover 效果（桌面端）
- 文档名出小手、文字变蓝出下划线
- 超长文案展示 tips 提示

### 移动端补偿
- 由于无 hover 态，默认 & 点击态增加背景色，提示可单独点击 + 区分热区防误触

## 文档插件 - 我最近编辑的

来源：Figma 节点"文档插件-1.文档 query 推荐"

加载完成后展示规则：
1. 最多显示 1 行，最少 2 个词条，最多一排
2. 自适应区间：最后一个展示不下时默认不展示，不做缩略
3. 人名特殊处理：最多展示 3 个汉字，超出截断；其余内容需完整展示（例：迪丽热...发送的）
4. 用户选择后，当前页面展开

文档结果展示：
- 加载完成：【...】渐隐 → 标题文案替换逐字出现 → 展示文档结果
- 最多展示 3 条，不足 3 条按实际展示；其余支持跳转至主场景查看

兜底文案："仅展示前 3 条，去超级助理查看更多相关文档"

## 交互行为

- **整条点击**：整条结果支持点击（除灰色区域外），效果维持线上
- **hover 默认态**：背景色变深 + 出小手，同时出现"更多操作"按钮或浮层面板
- **结果不足时**：兜底文案"进入超级助手里使用更多能力"
- **会议结果按钮点击**：
  - 点击纪要 icon → 打开会议纪要面板
  - 点击智能记录 icon → 打开智能记录面板
  - 点击其他区域 → 打开会议详情

## 文案规则

- 命中文字标蓝（`#3377FF`），未命中正常色
- 文档标题超长 …，hover tips 展示全部
- "等 n 篇文档"中 n 为文档总数，与文档保持固定间距，需完整展示
- "不支持预览"通过 toast 提示

## 示例

![结果列表-综合-基础布局](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-综合-单行文本-群](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-综合-两行文本-联系人](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-综合-两行文本-消息](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-综合-两行文本-会议室](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-综合-两行文本-服务号](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-综合-两行文本-文档](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-复杂结果-周报](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-复杂结果-OKR](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-垂类-单行文本](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-垂类-两行文本](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-交互状态-默认hover](../图片/组件/结果列表/zong-he-baselayout.png)
![结果列表-交互状态-更多操作](../图片/组件/结果列表/zong-he-baselayout.png)
![文档插件-query推荐-默认态](../图片/组件/结果列表/zong-he-baselayout.png)
![文档插件-query推荐-加载态](../图片/组件/结果列表/zong-he-baselayout.png)
![文档插件-query推荐-完成态](../图片/组件/结果列表/zong-he-baselayout.png)
![会议搜索-桌面端-展示规则](../图片/组件/结果列表/zong-he-baselayout.png)
![会议搜索-桌面端-hover态](../图片/组件/结果列表/zong-he-baselayout.png)
![会议搜索-桌面端-文档外露](../图片/组件/结果列表/zong-he-baselayout.png)
![会议搜索-移动端-展示规则](../图片/组件/结果列表/zong-he-baselayout.png)
![会议搜索-移动端-点击态](../图片/组件/结果列表/zong-he-baselayout.png)

## 设计考量 / 原文摘录

> hover 时背景色变深，出小手，同时出现 更多操作按钮 / 浮层面板。
> 整条结果支持点击（除灰色区域外），效果维持线上。
> 文档 hover 效果：hover 出小手，文字变蓝出下划线，超长文案展示 tips 提示。
> 由于移动端无 hover 态，默认 & 点击态增加背景色，一方面提示用户该区域可单独点击，另一方面区分热区范围防止误触。
> 24 年 Q3 更新 - 会议搜索结果增加文档链接。

- **三档信息密度**：单行 / 两行 / 复杂，按结果类型选用，避免视觉过载
- **命中即外露**：摘要 / 文档 / 参会人在命中时优先展示命中元素，未命中按原顺序
- **桌面与移动差异**：移动端用背景色补偿无 hover 的交互弱点
- **会议结果功能整合**：纪要、智能记录、文档单独热区，避免用户跳转查看

## 不推荐用法

- 在两行文本结果上叠加更多辅助字段，导致行数膨胀（应升级到"复杂结果列表"）
- 命中文字不标蓝（弱化命中信号）
- 文档外露超过一行换行展示（应保持一行 + 缩略 + tips）
- 移动端复用桌面端的 hover 交互（移动端无 hover，必须用背景色补偿）

## 关联

- 触发入口见 [搜索框](搜索框.md)
- 输入联想见 [suglist](suglist.md)
- 结果过滤见 [筛选器](筛选器.md)
- tab 切换见 [搜索导航](搜索导航.md)
- 浮层操作面板见 [浮层](浮层.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
