16.2 · 前端依赖（Frontend Dependencies）

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

项目Open WebUI 章节16.2 状态全文译文模块界面与交互、系统架构、测试、发布与运维、工具、记忆与模型调用

项目要点页2.5 参考项目项目章节目录Open WebUI DeepWiki 原始章节Frontend Dependencies 上一章16.1 下一章16.3

源码线索

CHANGELOG.md
package-lock.json
package.json
src/app.css
src/app.html
src/lib/components/common/RichTextInput.svelte
src/tailwind.css
static/themes/rosepine-dawn.css
static/themes/rosepine.css
tailwind.config.js

模块标签

界面与交互
系统架构
测试、发布与运维
工具、记忆与模型调用
检索、召回与知识系统

中文译文

前端依赖（中文译文）

原始 DeepWiki 页面：https://deepwiki.com/open-webui/open-webui/16.2-frontend-dependencies

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

翻译模型：deepseek-chat

原文字符数：10537

项目：Open WebUI (open-webui)

---

前端依赖

目的与范围

前端依赖栈定义于 package.json:1-161，并通过 package-lock.json:1-112 锁定版本。本文档对主要依赖类别、它们在应用中的角色、版本约束以及集成模式进行了分类整理。它可作为理解哪些外部库驱动特定前端功能以及它们如何相互关联的参考。

---

依赖类别概览

下图将自然语言描述的功能空间与实现这些功能的具体代码实体和库关联起来。

功能到代码实体的映射

graph TB
    subgraph "核心框架"
        Svelte["svelte 5.53.10"]
        SvelteKit["@sveltejs/kit 2.5.27"]
        Vite["vite 5.4.21"]
    end

    subgraph "富文本与笔记"
        Tiptap["@tiptap/core 3.0.7"]
        ProseMirror["prosemirror-model 1.23.0"]
        Marked["marked 9.1.0"]
        Turndown["turndown 7.2.0"]
    end

    subgraph "代码与执行"
        CodeMirror["codemirror 6.0.1"]
        Pyodide["pyodide 0.28.2"]
        Lowlight["lowlight 3.3.0"]
        HighlightJS["highlight.js 11.9.0"]
    end

    subgraph "协作"
        SocketIO["socket.io-client 4.2.0"]
        Yjs["yjs 13.6.27"]
        YProseMirror["y-prosemirror 1.3.7"]
    end

    subgraph "可视化"
        Mermaid["mermaid 11.10.1"]
        ChartJS["chart.js 4.5.0"]
        Vega["vega 6.2.0"]
        XYFlow["@xyflow/svelte 0.1.19"]
    end

    subgraph "AI/ML"
        HuggingFace["@huggingface/transformers 3.0.0"]
        Kokoro["kokoro-js 1.1.1"]
    end

    subgraph "样式"
        Tailwind["tailwindcss 4.0.0"]
        Typography["@tailwindcss/typography 0.5.13"]
    end

    SvelteKit --> Svelte
    Tiptap --> ProseMirror
    Tiptap --> Marked
    Tiptap --> Turndown
    CodeMirror --> HighlightJS
    YProseMirror --> Yjs
    YProseMirror --> ProseMirror

来源： package.json:24-156

---

核心框架栈

前端基于 SvelteKit 2.5.27 和 Svelte 5.53.10 构建，使用 Vite 5.4.21 作为构建工具。升级到 Svelte 5 后，渲染性能显著提升了约 25%。

包	版本	用途
`svelte`	5.53.10	使用 Runes 的核心响应式框架
`@sveltejs/kit`	2.5.27	提供路由和 SSR 的应用框架
`@sveltejs/adapter-node`	2.0.0	Node.js 部署适配器
`@sveltejs/adapter-static`	3.0.2	静态站点生成适配器
`@sveltejs/vite-plugin-svelte`	4.0.0	Svelte 的 Vite 集成插件
`vite`	5.4.21	构建工具和开发服务器

来源： package.json:24-28, 44, 50, 65

---

富文本编辑系统

应用使用基于 ProseMirror 框架构建的 Tiptap 3.0.7 作为富文本编辑器。该系统驱动聊天和笔记中使用的 RichTextInput.svelte 组件。最近的更新修复了列表和代码块的冲突问题 CHANGELOG.md:33。

Tiptap 扩展生态系统

graph TB
    TiptapCore["@tiptap/core 3.0.7"]

    subgraph "内容扩展"
        CodeBlock["@tiptap/extension-code-block-lowlight 3.0.7"]
        Table["@tiptap/extension-table 3.0.7"]
        Image["@tiptap/extension-image 3.0.7"]
        Mention["@tiptap/extension-mention 3.0.9"]
    end

    subgraph "UI 扩展"
        BubbleMenu["@tiptap/extension-bubble-menu 3.0.7"]
        FloatingMenu["@tiptap/extension-floating-menu 3.0.7"]
        DragHandle["@tiptap/extension-drag-handle 3.4.5"]
    end

    subgraph "格式化"
        Highlight["@tiptap/extension-highlight 3.3.0"]
        Typography["@tiptap/extension-typography 3.0.7"]
        StarterKit["@tiptap/starter-kit 3.0.7"]
    end

    TiptapCore --> StarterKit
    TiptapCore --> CodeBlock
    TiptapCore --> Table
    TiptapCore --> Mention
    TiptapCore --> BubbleMenu
    TiptapCore --> FloatingMenu

来源： package.json:67-85, src/lib/components/common/RichTextInput.svelte:121-158

Markdown 转换管道

RichTextInput.svelte 实现了 Markdown 与编辑器内部状态之间的双向管道。

Markdown 转 HTML：使用 marked 配合自定义渲染器，支持任务列表和 GFM src/lib/components/common/RichTextInput.svelte:2-29。
HTML 转 Markdown：使用 TurndownService 配合 GFM 插件以及针对表格、任务项和提及的自定义规则 src/lib/components/common/RichTextInput.svelte:31-106。使用自定义规则 singleNewlineParagraphs 来防止破坏性的换行行为 src/lib/components/common/RichTextInput.svelte:45-50。

包	版本	用途
`marked`	9.1.0	Markdown 转 HTML 解析
`turndown`	7.2.0	HTML 转 Markdown 转换
`@joplin/turndown-plugin-gfm`	1.0.62	Turndown 的 GFM 表格支持

来源： package.json:62, 121, 145, src/lib/components/common/RichTextInput.svelte:5-106

---

代码编辑与执行

CodeMirror 语言支持

CodeMirror 6.0.1 提供语法高亮和编辑功能。它通过 CodeBlockLowlight 使用 lowlight 集成到 Tiptap 中 src/lib/components/common/RichTextInput.svelte:152, 185-193。

包	版本	用途
`codemirror`	6.0.1	核心编辑器基础设施
`@codemirror/lang-python`	6.1.6	Python 语言支持
`@codemirror/lang-javascript`	6.2.2	JS/TS 语言支持
`highlight.js`	11.9.0	语法高亮引擎
`lowlight`	3.3.0	基于 highlight.js 的虚拟 DOM 高亮

来源： package.json:56-59, 94, 106, 119, src/lib/components/common/RichTextInput.svelte:160-193

浏览器内 Python 执行

应用利用 Pyodide 通过 Web Workers 在浏览器中直接运行 Python 代码。

Pyodide (0.28.2)：基于 WebAssembly 的 Python 发行版 package.json:138。
构建脚本：专用脚本 scripts/prepare-pyodide.js 负责获取运行时 package.json:22。

---

实时通信与协作

Open WebUI 使用 Socket.IO 处理实时事件，使用 Yjs 进行协作式笔记编辑。

协作栈映射

graph LR
    subgraph "前端组件"
        RichText["RichTextInput.svelte"]
    end

    subgraph "协作逻辑"
        SocketIO["socket.io-client"]
        YJS["yjs"]
        YPM["y-prosemirror"]
    end

    RichText -->|"CollaborationProvider"| YJS
    YJS -->|"Binding"| YPM
    YPM -->|"Sync"| ProseMirror["ProseMirror State"]

包	版本	用途
`socket.io-client`	4.2.0	实时事件传输
`yjs`	13.6.27	用于共享状态的 CRDT
`y-prosemirror`	1.3.7	Yjs 的 ProseMirror 绑定
`prosemirror-collab`	1.3.1	核心协作插件

来源： package.json:126, 140, 153, 156, src/lib/components/common/RichTextInput.svelte:126, 153, 178

---

UI 与可视化

组件库

Bits UI (2.0.0)：用于可访问 UI 模式的无头组件 package.json:92。
Paneforge (0.0.6)：用于笔记系统中的可调整大小布局 package.json:123。
Svelte Sonner (0.3.19)：全局使用的 Toast 通知系统，用于反馈 package.json:143。

可视化

Mermaid (11.10.1)：从 Markdown 代码块渲染图表 package.json:122。
Chart.js (4.5.0)：用于使用分析和数据可视化 package.json:93。
XYFlow (@xyflow/svelte 0.1.19)：用于模型图的基于节点的流程渲染 package.json:89。
Leaflet (1.9.4)：用于基于位置功能的交互式地图 package.json:118。

来源： package.json:89, 92, 93, 118, 122, 123, 143

---

文档与文件处理

前端在上传或预览之前，会在本地处理复杂的文件类型。

包	版本	用途
`pdfjs-dist`	5.4.149	PDF 文本提取和渲染
`mammoth`	1.11.0	DOCX 转 HTML 转换
`xlsx`	0.18.5	电子表格处理
`heic2any`	0.0.4	Apple 照片的 HEIC 转 JPEG 转换
`jszip`	3.10.1	客户端 ZIP 文件处理

来源： package.json:105, 115, 120, 125, 152

---

构建与样式工具

CSS 架构

Open WebUI 使用 Tailwind CSS 4.0.0 作为其主要样式引擎。

排版：@tailwindcss/typography 驱动 .markdown-prose 和 .input-prose 类 package.json:31, src/app.css:97-115。
全局样式：基础字体（Inter、Archivo、Mona Sans、Vazirmatn）和根变量在 src/app.css 中定义 src/app.css:3-36。
主题：像 Rose Pine 这样的自定义主题通过 CSS 变量实现 static/themes/rosepine.css:1-132。

开发工具

TypeScript (5.5.4)：整个前端的静态类型检查 package.json:49。
ESLint (8.56.0)：代码检查 package.json:35。
Prettier (3.3.3)：代码格式化 package.json:41。
Vitest (1.6.1)：单元测试 package.json:51。
Cypress (13.15.0)：端到端测试 package.json:34。

来源： package.json:30-52, src/app.css:97-115, static/themes/rosepine.css:1-132