wsk/deerflow-code

0 Fork 0

Files

T

fengxiangdebaozi b34219ce86 文档修改

2026-05-16 09:07:18 +08:00

12 KiB

Raw Permalink Blame History

AI 写作助手源码与实现映射表

1. 文档目标

本文档用于把以下几类信息对应起来：

豆包 AI 写作助手里要借鉴的交互
Novel / open-canvas / Tiptap 中可参考的实现思路
DeerFlow 当前项目里已经存在的落点
本次新建模块应该落到哪里

这份文档不是源码复制文档，而是开发时的“对照表”和“导航图”。

2. 使用方式

开发时建议按以下顺序看：

先看“目标能力”
再看“参考来源”
再看“DeerFlow 当前落点”
最后看“本次目标文件”

这样可以避免出现两种常见问题：

直接照搬外部项目结构，结果和你们现有架构冲突
只看自己项目，不知道成熟产品交互应该怎么落

3. 总体映射

目标能力	产品参考	外部参考实现	DeerFlow 当前落点	本次目标文件
写作工作区路由	open-canvas 独立页面	open-canvas 路由组织思路	`frontend-web/src/pages/PageRoutes.tsx`	`frontend-web/src/open-canvas-writing/routes/WritingRoutes.tsx`
左右双栏工作区	豆包写作页 / open-canvas	open-canvas 页面壳思路	`frontend-web/src/components/workspace/chats/chat-box.tsx`	`frontend-web/src/open-canvas-writing/pages/WritingWorkspacePage.tsx`、`WritingShell.tsx`
富文本正文编辑	Novel	Tiptap 官方编辑器模式	当前无正式富文本正文编辑器	`frontend-web/src/open-canvas-writing/editor/TiptapEditor.tsx`
文档工具栏	豆包 / Novel	Tiptap Toolbar 组合思路	当前右侧无正式工具栏	`frontend-web/src/open-canvas-writing/components/WritingToolbar.tsx`
选区浮层	豆包	Tiptap BubbleMenu	当前右侧无选区浮层	`frontend-web/src/open-canvas-writing/components/WritingBubbleMenu.tsx`
AI 改写菜单	豆包	自定义菜单 + BubbleMenu 挂接	当前无	`frontend-web/src/open-canvas-writing/components/WritingAiMenu.tsx`
候选结果预览	豆包 / open-canvas	open-canvas 候选应用思路	当前无	`frontend-web/src/open-canvas-writing/components/WritingRewritePreview.tsx`
替换 / 插入	豆包	Tiptap transaction 应用	当前无	`frontend-web/src/open-canvas-writing/utils/apply-rewrite.ts`
写作模式总入口	当前 DeerFlow	现有 `writing_mode` 开关	`frontend-web/src/components/workspace/input-box.tsx`	保留现有入口并接新页面
线程与模型协同	当前 DeerFlow	现有线程 / 模型体系	现有 `core/threads`、`core/models`	继续复用，新增 `api/rewrite.ts`

4. 豆包功能到 DeerFlow 的映射

4.1 滑词 / 选区浮层

豆包里的体验

选中文本后出现轻量浮层
浮层里有：
- AI 改写
- 文本样式
- 复制

DeerFlow 当前状态

右侧还没有正式的选区级工具层

本次实现方式

使用 Tiptap 的 BubbleMenu
再叠加自定义菜单逻辑

本次落点

frontend-web/src/open-canvas-writing/components/WritingBubbleMenu.tsx
frontend-web/src/open-canvas-writing/hooks/useWritingSelection.ts
frontend-web/src/open-canvas-writing/editor/selection.ts

4.2 多段落改写

豆包里的体验

不是只改单句
能对连续几段一起润色、扩写、缩写、改语气

DeerFlow 当前状态

现有右侧编辑区没有正式的多段落选区改写模型

本次实现方式

前端提取连续选区纯文本
前端附带前后文
后端返回候选纯文本
前端决定替换或插入

本次落点

frontend-web/src/open-canvas-writing/hooks/useWritingSelection.ts
frontend-web/src/open-canvas-writing/hooks/useWritingRewrite.ts
frontend-web/src/open-canvas-writing/api/rewrite.ts

4.3 替换 / 插入

豆包里的体验

改写结果不是直接覆盖原文
用户可选择：
- 替换
- 插入

DeerFlow 当前状态

当前没有候选文本应用层

本次实现方式

建立候选结果预览区
基于 Tiptap transaction 应用文本

本次落点

frontend-web/src/open-canvas-writing/components/WritingRewritePreview.tsx
frontend-web/src/open-canvas-writing/utils/apply-rewrite.ts

4.4 标题 / 列表 / 引用 / 代码块工具条

豆包里的体验

右侧本身就是正式文档编辑器
可以快速切换文档结构

DeerFlow 当前状态

当前右侧偏预览，不是正式写作编辑器

本次实现方式

使用 Tiptap 节点和命令
在主工具栏中集中承载

本次落点

frontend-web/src/open-canvas-writing/components/WritingToolbar.tsx
frontend-web/src/open-canvas-writing/hooks/useWritingToolbar.ts
frontend-web/src/open-canvas-writing/editor/commands.ts
frontend-web/src/open-canvas-writing/editor/TiptapExtensions.ts

5. Novel 参考映射

5.1 最值得借鉴的不是“代码整搬”，而是这三件事

编辑器主容器的产品感
工具栏和空态的组织方式
正文阅读宽度、排版、留白

5.2 对应到 DeerFlow 的实现位置

页面壳：WritingShell.tsx
顶部文档区：WritingHeader.tsx
编辑容器：TiptapEditor.tsx
工具栏：WritingToolbar.tsx
空态：WritingEmptyState.tsx

5.3 不建议直接照搬的部分

Next.js 页面结构
依赖其服务端 AI 调用方式
与 Vercel AI SDK 深绑定的部分

6. open-canvas 参考映射

6.1 主要借鉴对象

open-canvas 这次最值得借鉴的不是页面外观，而是：

AI 工作流组织方式
改写结果应用节奏
编辑器和聊天协作的模式

6.2 借鉴重点

借鉴 1：独立工作区思想

不要把写作体验塞进一个零散的弹窗或文件详情页，要有独立工作区。

对应 DeerFlow：

frontend-web/src/open-canvas-writing/pages/WritingWorkspacePage.tsx

借鉴 2：画布状态独立维护

不要让写作状态完全依附聊天消息渲染结果，要独立维护文档和候选状态。

对应 DeerFlow：

frontend-web/src/open-canvas-writing/context/WritingEditorContext.tsx

借鉴 3：AI 输出先预览，再应用

对应 DeerFlow：

frontend-web/src/open-canvas-writing/components/WritingRewritePreview.tsx

7. Tiptap 参考映射

7.1 Tiptap 在本项目中的职责

作为右侧正式富文本编辑器内核
提供结构节点与 marks
提供 BubbleMenu 能力
提供 transaction 应用能力

7.2 建议直接参考的实现点

EditorContent 的封装模式
BubbleMenu 的接入方式
heading / list / blockquote / codeBlock 扩展配置
editor.chain().focus() 命令调用模式
selection 变化监听

7.3 DeerFlow 本次落点

frontend-web/src/open-canvas-writing/editor/TiptapEditor.tsx
frontend-web/src/open-canvas-writing/editor/TiptapExtensions.ts
frontend-web/src/open-canvas-writing/editor/commands.ts
frontend-web/src/open-canvas-writing/components/WritingBubbleMenu.tsx

8. DeerFlow 现有文件到新模块的映射

8.1 `frontend-web/src/pages/PageRoutes.tsx`

当前职责

汇总页面路由

本次作用

挂入新的写作助手路由

后续动作

引入 WritingRoutes
增加 page/writing/*

8.2 `frontend-web/src/components/workspace/chats/chat-box.tsx`

当前职责

左聊天 + 右 Artifact 双栏布局

本次作用

提供双栏工作区组织思路
可复用布局比例和 panel 交互经验

不建议直接复用的部分

不要继续让右侧核心能力挂在 ArtifactFileDetail 上

本次目标替代

WritingWorkspacePage.tsx
WritingShell.tsx

8.3 `frontend-web/src/components/workspace/artifacts/context.tsx`

当前职责

管理文件型 artifact 列表、选中项和开关状态

本次作用

仅作为旧 Artifact 模块保留

本次目标替代

WritingEditorContext.tsx

原因

写作编辑器需要的不是文件路径状态
而是文档状态、选区状态、候选结果状态、工具层状态

8.4 `frontend-web/src/components/workspace/input-box.tsx`

当前职责

聊天输入区
已有 writing_mode 入口

本次作用

保留为用户进入写作模式的现有入口

本次改造建议

写作模式打开时，跳转或唤起新的写作工作区
不再只停留在“生成 Markdown 文件”这个层面

9. 新模块间的依赖关系

9.1 页面层

WritingRoutes.tsx
WritingWorkspacePage.tsx
WritingShell.tsx

职责：

页面路由
双栏或工作区布局
上下文装配

9.2 编辑器层

TiptapEditor.tsx
TiptapExtensions.ts
commands.ts
selection.ts

职责：

编辑器内核
节点和 marks
基础命令
选区抽取

9.3 交互层

WritingToolbar.tsx
WritingBubbleMenu.tsx
WritingAiMenu.tsx
WritingRewritePreview.tsx

职责：

工具栏
浮层
AI 菜单
候选内容应用

9.4 状态层

WritingEditorContext.tsx
useWritingEditor.ts
useWritingSelection.ts
useWritingRewrite.ts
useWritingToolbar.ts

职责：

主状态
选区状态
改写状态
工具栏状态

9.5 API 层

api/rewrite.ts
api/documents.ts

职责：

对接后端写作改写接口
对接文档加载与保存接口

10. 能力到文件的精确映射

能力	新文件	说明
新写作页面	`frontend-web/src/open-canvas-writing/pages/WritingWorkspacePage.tsx`	承载整个新模式
写作路由	`frontend-web/src/open-canvas-writing/routes/WritingRoutes.tsx`	统一路由入口
页面外壳	`frontend-web/src/open-canvas-writing/components/WritingShell.tsx`	页面布局与容器
文档头部	`frontend-web/src/open-canvas-writing/components/WritingHeader.tsx`	标题、状态
主工具栏	`frontend-web/src/open-canvas-writing/components/WritingToolbar.tsx`	文档结构与格式工具
正文编辑器	`frontend-web/src/open-canvas-writing/editor/TiptapEditor.tsx`	Tiptap 核心封装
扩展配置	`frontend-web/src/open-canvas-writing/editor/TiptapExtensions.ts`	节点和 marks
选区浮层	`frontend-web/src/open-canvas-writing/components/WritingBubbleMenu.tsx`	选区出现的悬浮条
AI 菜单	`frontend-web/src/open-canvas-writing/components/WritingAiMenu.tsx`	润色、扩写等动作
改写预览	`frontend-web/src/open-canvas-writing/components/WritingRewritePreview.tsx`	候选内容展示与应用
替换 / 插入	`frontend-web/src/open-canvas-writing/utils/apply-rewrite.ts`	应用候选结果
编辑器状态	`frontend-web/src/open-canvas-writing/context/WritingEditorContext.tsx`	独立上下文
改写请求	`frontend-web/src/open-canvas-writing/api/rewrite.ts`	调后端接口

11. 开发时的参考顺序

建议开发顺序如下：

先看 PageRoutes.tsx，确定路由接法
再看 chat-box.tsx，理解当前左右布局
然后起 WritingWorkspacePage.tsx 和 WritingShell.tsx
再接 TiptapEditor.tsx
再做 WritingToolbar.tsx
再做 WritingBubbleMenu.tsx
再做 WritingAiMenu.tsx
最后做 WritingRewritePreview.tsx

这样可以让每一层都有稳定承载，不会出现“先做了 AI 菜单，但页面还没落点”的混乱情况。

12. 明确哪些是“参考”，哪些是“目标”

12.1 参考

豆包：交互体验参考
Novel：页面和编辑器质感参考
open-canvas：AI 工作流参考
Tiptap：编辑器技术实现参考

12.2 目标

目标不是复刻任何一个外部项目，而是：

在 DeerFlow 现有架构中
用 React + Vite + 现有线程体系
做出一个更成熟的 AI 写作编辑器模式

13. 结论

这份映射表的核心作用，是避免团队在开发时迷路。

真正推荐的姿势是：

用豆包定义目标体验
用 Novel 定义页面质感
用 open-canvas 定义 AI 工作流
用 Tiptap 作为编辑器内核
用 DeerFlow 现有路由、线程、模型体系做宿主

这样推进，既不会脱离你们现有工程，也能尽量快地把右侧编辑区拉到更接近成熟产品的水平。

12 KiB Raw Permalink Blame History Unescape Escape

AI 写作助手源码与实现映射表

1. 文档目标

2. 使用方式

3. 总体映射

4. 豆包功能到 DeerFlow 的映射

4.1 滑词 / 选区浮层

豆包里的体验

DeerFlow 当前状态

本次实现方式

本次落点

4.2 多段落改写

豆包里的体验

DeerFlow 当前状态

本次实现方式

本次落点

4.3 替换 / 插入

豆包里的体验

DeerFlow 当前状态

本次实现方式

本次落点

4.4 标题 / 列表 / 引用 / 代码块工具条

豆包里的体验

DeerFlow 当前状态

本次实现方式

本次落点

5. Novel 参考映射

5.1 最值得借鉴的不是“代码整搬”，而是这三件事

5.2 对应到 DeerFlow 的实现位置

5.3 不建议直接照搬的部分

6. open-canvas 参考映射

6.1 主要借鉴对象

6.2 借鉴重点

借鉴 1：独立工作区思想

借鉴 2：画布状态独立维护

借鉴 3：AI 输出先预览，再应用

7. Tiptap 参考映射

7.1 Tiptap 在本项目中的职责

7.2 建议直接参考的实现点

7.3 DeerFlow 本次落点

8. DeerFlow 现有文件到新模块的映射

8.1 frontend-web/src/pages/PageRoutes.tsx

当前职责

本次作用

后续动作

8.2 frontend-web/src/components/workspace/chats/chat-box.tsx

当前职责

本次作用

不建议直接复用的部分

本次目标替代

8.3 frontend-web/src/components/workspace/artifacts/context.tsx

当前职责

本次作用

本次目标替代

原因

8.4 frontend-web/src/components/workspace/input-box.tsx

当前职责

本次作用

本次改造建议

9. 新模块间的依赖关系

9.1 页面层

9.2 编辑器层

9.3 交互层

9.4 状态层

9.5 API 层

10. 能力到文件的精确映射

11. 开发时的参考顺序

12. 明确哪些是“参考”，哪些是“目标”

12.1 参考

12.2 目标

13. 结论

12 KiB

Raw Permalink Blame History

8.1 `frontend-web/src/pages/PageRoutes.tsx`

8.2 `frontend-web/src/components/workspace/chats/chat-box.tsx`

8.3 `frontend-web/src/components/workspace/artifacts/context.tsx`

8.4 `frontend-web/src/components/workspace/input-box.tsx`