在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

AppFlowy-IO/AppFlowy

菜单

导航与侧边栏系统

相关源文件

本文档涵盖 AppFlowy 的导航和侧边栏系统，它为用户提供了在工作区、空间、文件夹和各个视图（文档、数据库等）之间进行导航的主要界面。该系统支持桌面和移动平台，具有不同的交互模式。

有关底层视图和文件夹管理逻辑的信息，请参阅视图和文档管理。有关工作区管理详情，请参阅用户身份验证和工作区管理。

架构概述

导航系统以HomeSideBar组件为核心协调器，支持现代基于空间的导航和传统基于文件夹的组织。该系统通过各种 BLoC 组件与 AppFlowy 的状态管理深度集成。

核心组件层级结构

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart51-293 frontend/appflowy_flutter/lib/workspace/presentation/home/desktop_home_screen.dart176-223

状态管理架构

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart86-220 frontend/appflowy_flutter/lib/workspace/application/sidebar/space/space_bloc.dart65-386

HomeSideBar 组件

HomeSideBar作为所有侧边栏功能的主要容器。它根据工作区配置和用户权限动态地在基于空间的导航和基于文件夹的导航之间切换。

组件结构

侧边栏分为不同的部分：

  1. 顶部菜单 - 用户/工作区切换和设置
  2. 搜索按钮 - 命令面板触发器（当功能标志启用时）
  3. 新建页面按钮 - 快速创建页面
  4. 内容区域 - 空间或文件夹部分
  5. 页脚 - 回收站、升级按钮和应用程序控制

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart342-420 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart424-476

动态内容切换

侧边栏使用_renderFolderOrSpace方法在基于空间的导航和基于文件夹的导航之间动态选择。

空间导航条件

  • containsSpace为 true（来自SidebarSectionsBloc）
  • spaces.isNotEmpty（来自SpaceBloc）
  • isCollabWorkspaceOn为 true（协作工作区）

文件夹导航回退

  • 在不满足空间条件时使用
  • 显示传统部分（工作区、私人、个人）
  • 保持向后兼容性

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart424-476

基于空间的导航系统

空间系统提供了一种现代化的分层导航结构，其中内容被组织到独立的“空间”中，每个空间都有自己的权限和内容。

SpaceBloc 状态管理

SpaceBloc管理整个空间生命周期，包括创建、导航和内容管理。

来源：frontend/appflowy_flutter/lib/workspace/application/sidebar/space/space_bloc.dart70-386

空间标题和控制

SidebarSpaceHeader提供空间管理控制，包括：

  • 空间切换 - 用于在空间之间切换的下拉菜单
  • 空间操作 - 重命名、管理、复制、删除操作
  • 页面创建 - 在空间中快速添加新页面的按钮
  • 展开/折叠 - 切换空间内容可见性

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space_header.dart22-263 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/space_more_popup.dart17-211

空间权限

空间支持两种权限级别：

  • 公共空间 - 所有工作区成员均可访问
  • 私人空间 - 仅限创建者和工作区所有者访问

权限系统通过SpacePermission枚举进行管理，并在后端服务中强制执行。

来源：frontend/appflowy_flutter/lib/workspace/application/sidebar/space/space_bloc.dart32-35 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/shared_widget.dart26-112

视图项系统

单个视图（文档、数据库、看板）由ViewItem组件表示，该组件处理显示、交互和分层组织。

ViewItem 组件架构

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart50-216 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart221-431

视图操作和上下文菜单

每个视图项都支持通过悬停状态和上下文菜单访问的全面操作集：

主要操作

  • 在当前选项卡中打开视图
  • 在新选项卡中打开（中键点击或第三方选择）
  • 重命名视图
  • 更改图标/表情符号
  • 添加子视图（针对文档）

辅助操作

  • 收藏/取消收藏
  • 复制视图
  • 移动到不同的空间/位置
  • 删除视图
  • 折叠所有子页面

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart759-836 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_more_action_button.dart

导航系统协调多个状态管理组件，以提供无缝的用户交互。

常见操作的事件流

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart139-181 frontend/appflowy_flutter/lib/workspace/application/sidebar/space/space_bloc.dart288-319

跨空间导航

在空间之间导航或跨空间移动视图时，系统处理复杂的状态协调：

  1. 空间切换 - 更新SpaceBloc中的当前空间
  2. 视图加载 - 为新空间获取子视图
  3. 状态持久化 - 将最后打开的空间保存在键值存储中
  4. 选项卡管理 - 在选项卡系统中打开相应的视图

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart249-292 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart866-896

搜索集成

侧边栏通过专门的搜索按钮（当搜索功能标志启用时）与 AppFlowy 的命令面板系统集成。

命令面板集成

搜索功能与工作区和空间状态紧密集成

搜索集成流程

  1. 用户点击搜索按钮或按下 Ctrl/Cmd+P
  2. 编辑器退出编辑模式以避免工具栏冲突
  3. 命令面板以当前工作区和空间上下文打开
  4. 搜索结果限定在当前工作区/空间内

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart548-585 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/command_palette.dart

键盘导航和快捷键

侧边栏系统通过HomeHotKeys系统支持全面的键盘导航。

侧边栏控制快捷键

  • Ctrl/Cmd + \ 或 Ctrl/Cmd + . - 切换侧边栏可见性
  • Ctrl/Cmd + O - 切换到下一个空间
  • Ctrl/Cmd + N - 创建新页面
  • F2 - 重命名当前视图
  • Ctrl/Cmd + P - 打开命令面板

标签页导航

  • Ctrl/Cmd + W - 关闭当前选项卡
  • Ctrl/Cmd + PageUp/PageDown - 在选项卡之间导航

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/hotkeys.dart70-212

移动端适配

导航系统包含移动端特有的适配，在保持功能性的同时优化了触控界面。

移动空间导航

移动端使用底部表单和简化的交互模式

  • 空间切换 - 带有空间列表的底部表单
  • 视图管理 - 基于手势的导航
  • 简化操作 - 触控优化的操作菜单

移动空间菜单（MobileSpaceMenu）提供与桌面端相同的功能，但采用适合移动设备的 UI 模式。

来源：frontend/appflowy_flutter/lib/mobile/presentation/home/space/mobile_space_menu.dart29-67 frontend/appflowy_flutter/lib/mobile/presentation/home/space/mobile_space_header.dart11-60

与应用程序布局集成

侧边栏通过DesktopHomeScreen组件与更广泛的应用程序布局集成，该组件管理定位、调整大小和动画。

布局协调

布局特点

  • 响应式设计 - 适应不同屏幕尺寸
  • 平滑动画 - 滑入/滑出过渡效果
  • 悬停触发 - 边缘悬停时自动显示
  • 可调整宽度 - 用户可调整侧边栏宽度

来源：frontend/appflowy_flutter/lib/workspace/presentation/home/desktop_home_screen.dart253-318 frontend/appflowy_flutter/lib/workspace/presentation/home/home_layout.dart

此导航和侧边栏系统为用户提供了一个全面、分层的界面，用于组织和访问其内容，同时保持了不同工作区配置和用户权限的灵活性。