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

toeverything/AFFiNE

菜单

前端架构

相关源文件

本文档概述了 AFFiNE 的前端架构，涵盖了关键的架构模式、组件、服务及其交互。本文档重点介绍了前端系统的结构以及不同组件如何协同工作以创建一致的用户体验。

有关编辑器系统的信息，请参阅 编辑器系统。有关特定于移动端的实现，请参阅相关特定平台的部分。

核心架构模式

AFFiNE 的前端是使用 React 构建的，并遵循多种架构模式

  1. 面向服务架构：功能封装在负责特定领域的服务中
  2. 实体-组件模式：编辑器等领域实体具有关联的组件
  3. 观察者模式：LiveData 可观察对象用于响应式状态管理
  4. 依赖注入：通过基于作用域的系统注入服务
  5. 响应式编程：使用 LiveData 可观察对象传播状态更改

来源

  • packages/frontend/core/src/modules/editor/entities/editor.ts
  • packages/frontend/core/src/modules/editor/services/editors.ts
  • packages/frontend/core/src/components/page-detail-editor.tsx
  • packages/common/infra/src/atom/settings.ts

核心服务与实体

AFFiNE 的前端使用面向服务架构，功能组织成服务，可以在需要时注入。

编辑器服务与实体

EditorService 创建并管理 Editor 实体，这些实体负责处理文档编辑状态和行为。

Editor 实体

  • 维护编辑器模式（page 或 edgeless）
  • 跟踪选定状态和焦点
  • 绑定到实际编辑器容器（UI 组件）
  • 将状态与工作台视图同步（URL 参数）
  • 与 BlockSuite 编辑器组件集成

来源

  • packages/frontend/core/src/modules/editor/entities/editor.ts
  • packages/frontend/core/src/modules/editor/services/editors.ts
  • packages/frontend/core/src/modules/editor/types.ts

文档服务与文档实体

DocService 管理应用程序中的文档。

Doc 实体提供

  • 对文档元数据和内容的访问
  • 与 BlockSuite 文档模型集成
  • 更新文档状态的方法
  • 文档标题和元数据的响应式属性

来源

  • packages/frontend/core/src/modules/doc/index.ts（从其他文件推断）
  • packages/frontend/core/src/components/page-detail-editor.tsx

工作台服务

WorkbenchService 管理应用程序级别的 UI 状态和导航。

Workbench 实体

  • 管理文档和视图之间的导航
  • 控制侧边栏状态
  • 提供打开文档的方法
  • 与路由器的 URL 管理集成

来源

  • packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
  • 跨多个组件的引用

DocDisplayMeta 服务

DocDisplayMetaService 为文档提供元数据显示功能。

DocDisplayMetaService

  • 提供响应式的文档标题显示逻辑
  • 为文档生成适当的图标
  • 特殊处理日志文档
  • 从文档标题提取表情符号图标
  • 支持标题别名以供引用

来源

  • packages/frontend/core/src/modules/doc-display-meta/services/doc-display-meta.ts
  • packages/frontend/core/src/modules/doc-display-meta/index.ts

PeekView 服务

PeekViewService 管理文档预览功能。

PeekView 系统

  • 在模态框中显示文档预览
  • 支持在不完全导航的情况下查看文档内容
  • 处理文档加载和编辑器初始化
  • 提供轻量级的引用体验

来源

  • packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
  • packages/frontend/core/src/modules/peek-view/view/utils.ts
  • packages/frontend/core/src/components/affine/reference-link/index.tsx

组件架构

AFFiNE 的 UI 由 React 组件构建，它们以层级结构组织，并针对平台进行特定适配。

主要组件结构

来源

  • packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx
  • packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
  • packages/frontend/core/src/components/page-detail-editor.tsx

RootAppSidebar

RootAppSidebar 组件提供主要的导航侧边栏。

侧边栏包括

  • 工作区选择和导航
  • 快速搜索功能
  • 文档创建按钮
  • 文档组织的文件浏览器部分
  • 设置和导入等实用功能

来源

  • packages/frontend/core/src/components/root-app-sidebar/index.tsx

PageDetailEditor

PageDetailEditor 组件是核心编辑器包装器。

PageDetailEditor

  • 作为 BlockSuite 编辑器的包装器
  • 连接到编辑器和文档服务
  • 应用编辑器设置和模式
  • 根据需要支持只读模式
  • 提供编辑器容器绑定

来源

  • packages/frontend/core/src/components/page-detail-editor.tsx

DetailPage（桌面版）

桌面版的 DetailPage 组件提供完整的编辑体验。

桌面版 DetailPage

  • 提供丰富的文档编辑体验
  • 包含用于不同工具的侧边栏选项卡
  • 显示大纲视图以进行导航
  • 支持 AI 聊天集成

来源

  • packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx

MobileDetailPage

MobileDetailPage 组件提供针对移动设备优化的体验。

MobileDetailPage

  • 使用特定于移动端的标题组件
  • 提供触摸优化的编辑体验
  • 显示应用程序选项卡以进行导航
  • 对日志文档有特殊处理

来源

  • packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
  • packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.css.ts
  • packages/frontend/core/src/mobile/components/page-header/index.tsx

AFFiNE 的导航系统结合了 React Router 和工作台感知的组件。

关键导航组件

  • WorkbenchLink：拦截点击并委派给工作台
  • AffinePageReference：用于文档引用的专用链接
  • 路由配置：使用适当的组件设置路由
  • 导航助手：用于常见导航任务的实用函数

来源

  • packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
  • packages/frontend/core/src/components/affine/reference-link/index.tsx
  • packages/frontend/core/src/desktop/router.tsx

环境与平台适配

AFFiNE 会适应不同的环境和平台。

环境系统

  • 检测操作系统和浏览器功能
  • 识别设备规格
  • 配置路径和部署选项
  • 基于平台提供条件渲染

来源

  • packages/common/env/src/global.ts
  • tools/@types/env/__all.d.ts
  • packages/frontend/component/src/hooks/use-theme-color-meta.ts

对话框系统

AFFiNE 使用对话框系统来管理模态框和弹出窗口。

对话框系统

  • 为模态框交互提供一致的 API
  • 支持全局和工作区范围的对话框
  • 从对话框交互中返回结果
  • 管理对话框状态和渲染

来源

  • packages/frontend/core/src/modules/dialogs/constant.ts
  • packages/frontend/core/src/desktop/dialogs/index.tsx
  • packages/frontend/core/src/desktop/dialogs/selectors/date.tsx
  • packages/frontend/core/src/mobile/dialogs/selectors/doc-selector.tsx

服务器端渲染与集成

AFFiNE 与后端服务集成以进行渲染和 API 访问。

关键集成点

  • 文档渲染以实现 SEO 和共享
  • 服务器路径的环境变量
  • 部署的资源路径解析
  • 用于数据操作的 GraphQL API

来源

  • packages/backend/server/src/core/doc-renderer/controller.ts
  • packages/backend/server/src/core/config/config.ts
  • .github/helm/affine/templates/ingress.yaml

主要前端服务表

服务描述关键函数关键文件
EditorService创建并管理编辑器实体createEditor()packages/frontend/core/src/modules/editor/services/editors.ts
DocService管理文档open(), loaded()跨多个文件引用
WorkbenchService管理应用程序 UI 状态openDoc(), openSidebar()packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
PeekViewService管理文档预览open(), close()packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
DocDisplayMetaService提供文档显示元数据title$(), icon$()packages/frontend/core/src/modules/doc-display-meta/services/doc-display-meta.ts
WorkspaceDialogService管理工作区范围的对话框open(), close()packages/frontend/core/src/desktop/dialogs/index.tsx

主要前端组件表

组件描述平台关键文件
RootAppSidebar主导航侧边栏所有packages/frontend/core/src/components/root-app-sidebar/index.tsx
PageDetailEditor核心编辑器包装器所有packages/frontend/core/src/components/page-detail-editor.tsx
DetailPage文档编辑页面桌面packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx
MobileDetailPage移动端文档页面移动端packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
WorkbenchLink导航组件所有packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
DocPeekPreview文档预览组件所有packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx

AFFiNE 的前端架构设计为模块化、响应式且可适应不同平台，在优化特定设备功能的同时，提供一致的用户体验。