9 · 笔记系统（Note-taking System）

多模型对话工作台与知识应用入口 · 本章是 Open WebUI DeepWiki 中文译文的独立章节页，保留原始链接、源码锚点、模块标签和章节层级。

项目Open WebUI 章节9 状态全文译文模块界面与交互、频道、笔记与协作、接口与服务契约、系统架构

项目要点页2.5 参考项目项目章节目录Open WebUI DeepWiki 原始章节Note-taking System 上一章8.5 下一章9.1

源码线索

backend/open_webui/migrations/versions/e1f2a3b4c5d6_add_is_pinned_to_note.py
backend/open_webui/models/notes.py
backend/open_webui/routers/notes.py
src/lib/apis/notes/index.ts
src/lib/components/common/DropdownOptions.svelte
src/lib/components/common/DropdownSub.svelte
src/lib/components/icons/AdjustmentsHorizontalOutline.svelte
src/lib/components/icons/ArrowUpLeft.svelte
src/lib/components/notes/NoteEditor.svelte
src/lib/components/notes/NoteEditor/Chat.svelte

模块标签

界面与交互
频道、笔记与协作
接口与服务契约
系统架构
工具、记忆与模型调用

中文译文

笔记系统（中文译文）

原始 DeepWiki 页面：https://deepwiki.com/open-webui/open-webui/9-note-taking-system

翻译时间：2026-06-09T16:09:46.349Z

翻译模型：deepseek-chat

原文字符数：10403

项目：Open WebUI (open-webui)

---

笔记系统

目的与范围

笔记系统提供了一个协作式富文本编辑环境，并具备 AI 增强能力。本文档涵盖编辑器架构、数据模型、协作编辑基础设施、AI 集成、版本控制以及文件附件处理。关于可嵌入笔记中的聊天系统，请参见下文 AI 集成部分。关于笔记的工作区组织和文件夹管理，请参见导航与组织。

---

架构概览

笔记系统围绕三个核心层构建：基于 TipTap 的富文本编辑器、使用 Yjs 和 Socket.IO 的协作编辑层，以及用于内容增强的 AI 集成层。

组件层次结构

graph TB
    NoteEditor["NoteEditor.svelte<br/>(主容器)"]
    RichTextInput["RichTextInput.svelte<br/>(TipTap 编辑器)"]
    NotePanel["NotePanel.svelte<br/>(侧边栏面板)"]
    Chat["Chat.svelte<br/>(AI 聊天界面)"]
    Controls["Controls.svelte<br/>(设置面板)"]

    NoteEditor --> RichTextInput
    NoteEditor --> NotePanel
    NotePanel --> Chat
    NotePanel --> Controls

    RichTextInput --> TipTap["TipTap 编辑器实例"]
    RichTextInput --> Collaboration["SocketIOCollaborationProvider"]

    TipTap --> StarterKit["StarterKit 扩展"]
    TipTap --> TableKit["TableKit"]
    TipTap --> ListKit["ListKit (任务列表)"]
    TipTap --> CodeBlock["CodeBlockLowlight"]
    TipTap --> Mention["Mention 扩展"]
    TipTap --> Image["Image 扩展"]

    Collaboration --> YjsDoc["Y.Doc (CRDT)"]
    Collaboration --> SocketIO["Socket.IO 客户端"]

    Chat --> MessageInput["MessageInput.svelte"]
    Chat --> Messages["Messages.svelte"]

来源： src/lib/components/notes/NoteEditor.svelte:1-100、src/lib/components/notes/NotePanel.svelte:1-50、src/lib/components/notes/NoteEditor/Chat.svelte:45-51

笔记数据模型

笔记数据结构支持多种内容格式、版本历史、文件附件和访问控制：

graph LR
    Note["笔记对象"] --> NoteId["id: string"]
    Note --> UserId["user_id: string"]
    Note --> Title["title: string"]
    Note --> Data["data: object"]
    Note --> Meta["meta: object | null"]
    Note --> IsPinned["is_pinned: boolean"]
    Note --> CreatedAt["created_at: int"]
    Note --> UpdatedAt["updated_at: int"]
    Note --> AccessGrants["access_grants: list[AccessGrantModel]"]
    Note --> WriteAccess["write_access: boolean (仅前端)"]

    Data --> Content["content: object"]
    Data --> Versions["versions: array"]
    Data --> Files["files: array | null"]

    Content --> JSON["json: object | null<br/>(TipTap JSON)"]
    Content --> HTML["html: string<br/>(渲染后的 HTML)"]
    Content --> MD["md: string<br/>(Markdown)"]

    Versions --> Version["版本快照"]
    Version --> VersionJSON["json"]
    Version --> VersionHTML["html"]
    Version --> VersionMD["md"]

    AccessGrants --> Grant["AccessGrantModel"]
    Grant --> PrincipalType["principal_type: 'user' | 'group'"]
    Grant --> PrincipalID["principal_id: string"]
    Grant --> Permission["permission: 'read' | 'write'"]

    style Note fill:#ace,stroke:#333,stroke-width:2px

Note 对象在 backend/open_webui/models/notes.py 中定义为 SQLAlchemy 模型 backend/open_webui/models/notes.py:23-36 和 Pydantic NoteModel backend/open_webui/models/notes.py:38-54。NoteEditor.svelte 组件使用类似的结构初始化 newNote 对象 src/lib/components/notes/NoteEditor.svelte:108-122。

来源： src/lib/components/notes/NoteEditor.svelte:108-122、backend/open_webui/models/notes.py:23-54

---

富文本编辑器 (TipTap)

编辑器基于 TipTap 实现，底层使用 ProseMirror。RichTextInput.svelte 组件提供了一个可复用的编辑器，并配置了多种内容类型的扩展。详情请参见 TipTap 编辑器架构。

编辑器配置

扩展	用途	配置来源
`StarterKit`	基本格式（粗体、斜体、标题）	`src/lib/components/notes/NoteEditor.svelte:168-171`
`TaskList`	支持任务列表及自定义渲染	`src/lib/components/notes/NoteEditor/Chat.svelte:11-31`
`Marked`	Markdown 解析与渲染	`src/lib/components/notes/NoteEditor.svelte:9`

来源： src/lib/components/notes/NoteEditor.svelte:168-171、src/lib/components/notes/NoteEditor/Chat.svelte:7-31

格式转换管道

编辑器以三种同步格式维护内容：TipTap JSON、HTML 和 Markdown。转换由 marked 处理 Markdown 到 HTML 的转换。详情请参见内容格式转换。

graph TB
    subgraph "Markdown 到 HTML"
        MD1["Markdown 输入"] --> Marked["marked.use()"]
        Marked --> CustomRenderer["自定义渲染器<br/>- 任务列表"]
        CustomRenderer --> HTML1["带 data 属性的 HTML"]
    end

来源： src/lib/components/notes/NoteEditor/Chat.svelte:7-31、src/lib/components/notes/NoteEditor.svelte:168-171

---

协作编辑

协作编辑系统使用 Yjs 配合 Socket.IO 作为传输层。详情请参见协作编辑。

协作设置

NoteEditor 在初始化时，如果具有写入权限，则会加入笔记的 Socket.IO 房间 src/lib/components/notes/NoteEditor.svelte:188-196：

$socket?.emit('join-note', {
    note_id: id,
    auth: {
        token: localStorage.token
    }
});

来源： src/lib/components/notes/NoteEditor.svelte:188-196

---

AI 集成

笔记编辑器包含 AI 驱动的功能，用于内容增强、标题生成和集成聊天。详情请参见笔记中的 AI 集成。

标题生成

generateTitleHandler 函数 src/lib/components/notes/NoteEditor.svelte:253-326 实现了 AI 驱动的标题生成。系统提示指示模型生成一个简洁的标题，并附带一个表情符号来概括内容。

文档增强

AI 可以增强整个笔记或选中的文本。DEFAULT_DOCUMENT_EDITOR_PROMPT src/lib/components/notes/NoteEditor/Chat.svelte:83-102 定义了用于指导 AI 根据用户指令以及 <notes>、<context> 和 <selection> 标签中提供的上下文来重写或改进内容的提示词 src/lib/components/notes/NoteEditor/Chat.svelte:165-170。

来源： src/lib/components/notes/NoteEditor.svelte:253-326、src/lib/components/notes/NoteEditor/Chat.svelte:83-102、src/lib/components/notes/NoteEditor/Chat.svelte:165-170

---

版本控制

笔记系统使用 JSON、HTML 和 Markdown 格式的内容快照来维护版本历史。详情请参见版本控制与历史。

insertNoteVersion 函数 src/lib/components/notes/NoteEditor.svelte:233-246 在将当前状态追加到 note.data.versions 数组之前，会将其与 lastVersion 进行比较，以确保仅保存唯一的更改。

来源： src/lib/components/notes/NoteEditor.svelte:233-246

---

文件附件

笔记支持文件附件，为 AI 交互提供额外的上下文。详情请参见笔记中的文件附件。

Controls.svelte 组件管理附件的显示和移除 src/lib/components/notes/NoteEditor/Controls.svelte:41-88。内容提取结果用于 AI 聊天上下文 src/lib/components/notes/NoteEditor/Chat.svelte:167-169。

来源： src/lib/components/notes/NoteEditor/Controls.svelte:41-88、src/lib/components/notes/NoteEditor/Chat.svelte:167-169

---

子页面

有关特定子系统的详细技术文档，请参见以下页面：

TipTap 编辑器架构 — 配置、扩展和自定义 ProseMirror 插件。
内容格式转换 — 双向 Markdown/HTML/JSON 映射逻辑。
协作编辑 — Yjs 同步和 Socket.IO 事件处理。
笔记中的 AI 集成 — 提示词模板和流式内容增强。
版本控制与历史 — 快照管理和回滚机制。
笔记中的文件附件 — 内容提取及协作者间的同步。