场景 27：协同编辑 (Google Docs)
从一个简单的富文本编辑器，演进到支持多人实时协作的文档系统。
V1 — 1 个用户：纯前端富文本编辑器
Section titled “V1 — 1 个用户：纯前端富文本编辑器”你需要一个可以编辑和保存文档的网页工具，支持基本的富文本格式。
你要解决什么
Section titled “你要解决什么”- 使用 contenteditable div 实现富文本编辑
- 工具栏支持加粗、斜体、标题、列表等基本格式
- 文档内容自动保存到 localStorage（每 3 秒）
- 文档列表管理：新建、打开、删除
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”用 React + Tailwind 构建一个富文本编辑器。使用 contenteditable div 实现编辑区域，工具栏支持加粗、斜体、下划线、H1-H3、有序/无序列表。文档自动保存到 localStorage（每 3 秒防抖），左侧显示文档列表，支持新建和删除文档。不需要后端。
- 富文本格式正确应用（加粗、标题等）
- 自动保存正常工作
- 刷新页面内容不丢失
- 可以管理多个文档
- 工具栏状态反映当前光标位置的格式
你学到了什么
Section titled “你学到了什么”- contenteditable API → Module 1
- 防抖自动保存 → Module 2
- document.execCommand 富文本操作 → Module 1
V2 — 10 个用户：后端存储文档
Section titled “V2 — 10 个用户：后端存储文档”多人需要访问同一份文档，需要服务端持久化，但还不需要实时协作。
你要解决什么
Section titled “你要解决什么”- 文档 CRUD API，服务端存储
- 文件系统或 SQLite 存文档内容
- 多人可编辑同一文档（但可能互相覆盖）
- 基本的文档分享（通过链接）
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”用 Go + Gin + GORM + SQLite 构建文档后端。模型：Document（标题、内容HTML、创建者、更新者、更新时间）、User（名称、邮箱）。API：文档 CRUD、文档列表、按 ID 获取文档。前端从 localStorage 迁移到调用 API。打开文档时获取最新内容，保存时 PUT 整个文档内容。添加简单的分享：文档有唯一 UUID，通过 /doc/:uuid 可访问。
- 文档保存到服务端数据库
- 多个浏览器可以打开同一文档
- 后保存的内容覆盖先保存的
- 分享链接可以打开文档
- 文档列表正确显示
你学到了什么
Section titled “你学到了什么”- 从客户端存储迁移到服务端 → Module 3
- UUID 作为公开标识 → Module 4
- 最后写入胜出（Last Write Wins）→ Module 5
V3 — 100 个用户：版本历史
Section titled “V3 — 100 个用户：版本历史”用户需要查看文档修改历史，在多人编辑时能比较不同版本的差异。
你要解决什么
Section titled “你要解决什么”- 迁移到 PostgreSQL
- 每次保存创建新版本（版本号递增）
- 版本历史列表和回退
- Diff 对比：两个版本之间的差异高亮
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”迁移到 PostgreSQL。添加 DocumentVersion 表（文档ID、版本号、内容、编辑者、时间戳）。每次保存文档时创建新版本记录，Document 表保存当前版本号。API：获取版本列表、查看特定版本、回退到历史版本。前端添加版本面板：显示版本时间线，点击可查看历史版本，支持两个版本的 diff 对比（用简单的文本差异算法，标记新增/删除的段落）。
- 每次保存产生新版本记录
- 版本列表按时间倒序显示
- 可以查看任意历史版本内容
- 回退操作创建新版本（不删除历史）
- Diff 对比正确标记差异
你学到了什么
Section titled “你学到了什么”- 版本控制模型设计 → Module 5
- 不可变版本记录（append-only）→ Module 6
- 文本差异算法基础 → Module 7
V4 — 1000 个用户：实时协作
Section titled “V4 — 1000 个用户：实时协作”多人同时编辑一个文档，需要看到彼此的光标位置和实时修改。
你要解决什么
Section titled “你要解决什么”- WebSocket 连接同一文档的所有编辑者
- 同步光标位置和选区
- 简单 OT（Operational Transform）处理并发编辑
- 在线编辑者头像显示
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”添加实时协作。WebSocket 端点 /ws/doc/:id，连接时传用户信息。实现简单 OT：操作类型 insert(pos, text) 和 delete(pos, length)，服务端维护操作历史，收到操作后对其他客户端的待发送操作做 transform。每个客户端发送光标位置（offset），服务端广播给其他用户。前端显示其他用户的光标（彩色竖线+名字标签）。在线用户列表显示在文档顶部。
- 两个浏览器同时编辑同一文档，内容实时同步
- 能看到其他用户的光标位置
- 同时在不同位置输入不会丢失内容
- 在线用户列表实时更新
- 断开重连后状态正确恢复
你学到了什么
Section titled “你学到了什么”- WebSocket 多客户端广播 → Module 7
- OT 算法基础 → Module 8
- 光标位置同步 → Module 7
V5 — 1 万用户：离线编辑与冲突合并
Section titled “V5 — 1 万用户：离线编辑与冲突合并”用户可能在离线状态下编辑，上线后需要与其他人的修改合并。需要评论功能。
你要解决什么
Section titled “你要解决什么”- CRDT 文档模型替代 OT（适合离线场景）
- 离线编辑缓存 + 上线自动合并
- 评论系统：选中文本添加评论，评论锚点跟随编辑
- 文档协作人数扩展
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”用 CRDT 替代 OT 实现协同编辑。采用 Yjs 库（或自实现简单 CRDT）：每个字符有唯一 ID（lamport timestamp + client ID），插入和删除操作可交换和幂等。离线时操作存 IndexedDB，上线后批量同步。评论功能：选中文本范围创建评论，评论锚定到 CRDT 节点 ID（而非字符位置），编辑后评论位置自动调整。支持回复和解决评论。
- 离线编辑后上线正确合并
- 两人离线各自编辑同一段落，合并无冲突
- 评论锚点在编辑后位置正确
- 评论支持回复和标记已解决
- CRDT 状态在多客户端间一致
你学到了什么
Section titled “你学到了什么”- CRDT 原理与实践 → Module 8
- 离线优先架构 → Module 9
- 评论锚点与文档模型绑定 → Module 8
V6 — 10 万+ 用户：企业协作平台
Section titled “V6 — 10 万+ 用户：企业协作平台”企业需要精细的权限控制、审计合规、多格式导出。
你要解决什么
Section titled “你要解决什么”- 权限矩阵：查看者/评论者/编辑者/管理员
- 审计日志：记录所有操作（谁在何时做了什么）
- 导出格式：PDF、Word、Markdown
- 文件夹组织和团队空间
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”实现企业版协作文档。权限系统：文档有 owner，可邀请协作者设置角色（viewer/commenter/editor/admin）。viewer 只读，commenter 可查看+评论，editor 可编辑，admin 可管理权限。审计日志表记录所有操作（user_id, action, document_id, detail, timestamp），提供日志查询 API（按文档/用户/时间过滤）。导出：HTML→PDF（用 chromedp），HTML→Markdown（自实现转换），HTML→Word（用 unioffice 库）。添加 Folder 模型实现文件夹组织。
- 不同角色权限正确隔离
- viewer 无法编辑，commenter 无法修改内容
- 审计日志完整记录所有操作
- 导出 PDF/Word/Markdown 格式正确
- 文件夹支持嵌套和移动文档
你学到了什么
Section titled “你学到了什么”- RBAC 权限模型 → Module 10
- 审计日志设计 → Module 11
- 多格式文档转换 → Module 12
- 团队协作架构 → Module 10