菜单

命令面板与搜索

相关源文件

命令面板和搜索系统提供了一个全局的、可通过键盘访问的界面,用于快速查找和导航AppFlowy工作空间内的文档、数据库和其他视图。该系统结合了传统的搜索功能和AI驱动的摘要,并支持桌面和移动平台。

有关导航侧边栏和工作空间组织的信息,请参阅导航和侧边栏系统。有关独立于搜索的AI聊天功能,请参阅AI聊天系统

架构概述

命令面板系统建立在一个分层架构上,该架构将表示层关注点与业务逻辑分开,并与本地和服务器搜索后端集成。

高层系统结构

来源: frontend/appflowy_flutter/lib/workspace/presentation/command_palette/command_palette.dart27-348 frontend/appflowy_flutter/lib/workspace/application/command_palette/command_palette_bloc.dart31-410 frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_page.dart18-143

命令面板系统

命令面板实现为一个全局覆盖层,可通过键盘快捷键 (Cmd/Ctrl+P) 或编程方式触发。它使用Flutter的InheritedWidget模式来管理整个 widget 树的状态。

命令面板组件架构

CommandPalette widget frontend/appflowy_flutter/lib/workspace/presentation/command_palette/command_palette.dart27-74 是命令面板系统的根。它管理一个ValueNotifier<CommandPaletteNotifierValue>,该对象控制面板的打开/关闭状态和相关的bloc实例。

键盘快捷键系统是通过FocusableActionDetector frontend/appflowy_flutter/lib/workspace/presentation/command_palette/command_palette.dart155-172 来实现的,该组件监听 Cmd/Ctrl+P 组合键并触发_ToggleCommandPaletteIntent

来源: frontend/appflowy_flutter/lib/workspace/presentation/command_palette/command_palette.dart27-348 frontend/appflowy_flutter/lib/workspace/application/command_palette/command_palette_bloc.dart15-29

搜索实现

搜索系统结合了本地和服务器搜索,并带有防抖动输入处理和实时结果流。

搜索数据流

搜索输入由SearchField frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_field.dart13-154 处理,该组件使用Debouncer frontend/appflowy_flutter/lib/workspace/application/command_palette/command_palette_bloc.dart15-29 来防止过多的API调用。

搜索结果通过CommandPaletteBloc处理,该bloc将本地和服务器结果合并到一个统一的Map<String, SearchResultItem> frontend/appflowy_flutter/lib/workspace/application/command_palette/command_palette_bloc.dart241-264

来源: frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_field.dart13-154 frontend/appflowy_flutter/lib/workspace/application/command_palette/command_palette_bloc.dart213-275 frontend/appflowy_flutter/lib/workspace/application/command_palette/search_service.dart

搜索结果显示

搜索结果以丰富的预览功能和分层路径信息显示。该系统支持搜索词高亮和文档内容预览。

结果单元格组件

SearchResultCell frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_result_cell.dart20-220 组件通过buildHighLightSpan() frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_result_cell.dart174-194 进行语法高亮显示。

预览系统使用PagePreview frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/page_preview.dart27-310 来显示文档封面、图标和元数据,包括创建时间和最后编辑时间。

来源: frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_result_cell.dart20-243 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/page_preview.dart27-310 frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_view_ancestors.dart11-138

移动端实现

移动搜索界面提供了一个专用的全屏体验,具有触摸优化的导航和AI集成。

移动搜索架构

可以通过 BottomNavigationBarItemType.search frontend/appflowy_flutter/lib/mobile/presentation/mobile_bottom_navigation_bar.dart39 访问移动端搜索,该组件会导航至 MobileSearchScreen frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_page.dart18-143

移动端搜索结果使用了 MobileSearchResultCell frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_cell.dart15-140,该组件在保持与桌面版相同的突出显示和导航功能的同时,提供了针对触摸交互优化的简化布局。

来源: frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_page.dart18-143 frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_textfield.dart14-206 frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_result.dart18-206

AI 搜索集成

该系统包含 AI 驱动的搜索摘要和问答功能,并与更广泛的 AI 系统集成。

AI 搜索组件

AI 搜索集成始于 SearchAskAiEntrance frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart13-244,该组件提供等待输入、搜索和显示 AI 生成的概述等不同状态。

AI 摘要使用 SearchSummaryCell frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_summary_cell.dart16-436,包括可展开文本、来源引用和后续操作按钮。

来源: frontend/appflowy_flutter/lib/workspace/application/command_palette/command_palette_bloc.dart13-244 frontend/appflowy_flutter/lib/workspace/application/command_palette/search_summary_cell.dart16-436 frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_ask_ai_entrance.dart14-205

数据流和状态管理

命令调色板系统结合了 BLoC 模式用于业务逻辑,以及专门的状态管理用于 UI 交互。

状态管理流程

组件状态类型职责
CommandPaletteBlocCommandPaletteState搜索查询、结果、AI 状态
SearchResultListBlocSearchResultListState结果选择、悬停状态
RecentViewsBlocRecentViewsState最近视图、悬停预览
ViewAncestorBlocViewAncestorState文档路径解析

主状态流程从用户在 SearchField 中输入开始,触发 CommandPaletteEvent.searchChanged frontend/appflowy_flutter/lib/workspace/application/command_palette/command_palette_bloc.dart338-339。bloc 使用 Debouncer 来管理搜索时序,并与 SearchBackendService 协调以获取结果。

搜索结果通过多个流进行处理

  • 本地搜索结果 (LocalSearchResponseItemPB)
  • 服务器搜索结果 (SearchResponseItemPB)
  • AI 摘要 (SearchSummaryPB)

这些被合并为一个统一的 Map<String, SearchResultItem> frontend/appflowy_flutter/lib/workspace/application/command_palette/command_palette_bloc.dart394,以实现跨不同 UI 组件的一致显示。

来源: frontend/appflowy_flutter/lib/workspace/application/command_palette/command_palette_bloc.dart31-410 frontend/appflowy_flutter/lib/workspace/application/command_palette/search_result_list_bloc.dart frontend/appflowy_flutter/lib/workspace/application/recent/recent_views_bloc.dart