网页版多人协同思维导图分支增量同步的核心是只传语义化操作事件（如addbranch、movebranch、removebranch），不传坐标等渲染数据；服务端轻量仲裁，客户端结构驱动重算布局；通过ts+causalityid保障因果序；本地缓存未确认事件支持离线编辑与恢复。
实现网页版多人协同思维导图的分支增量同步，核心是“只传变化、不传全量”，让每个客户端在本地按统一规则拼接结构，避免坐标漂移和状态错乱。关键不在发多少数据，而在发什么、何时发、怎么收。
只同步语义化分支操作，不传渲染结果
分支（子节点）的增删改属于结构变更，必须抽象为带明确意图的事件，而非坐标或DOM快照：
- 新增分支：发送 {"type":"addBranch","parentId":"n3","text":"新任务","position":2}，不含x/y坐标——布局由客户端重算
- 移动分支：发送 {"type":"moveBranch","nodeId":"n7","newParentId":"n5","index":0}，用逻辑顺序（index）代替像素位置
- 删除分支：发送 {"type":"removeBranch","nodeId":"n9"}，服务端校验该节点无子节点或已归档，再广播
- 禁止发送类似 {"x":142.6,"y":-98.3} 这类渲染层数据，否则多端因DPR、缩放、字体差异导致布局失准
服务端做轻量仲裁，客户端做确定性重算
所有客户端收到分支变更后，不直接修改现有布局，而是触发一次“结构驱动的局部重算”：
- 提取当前完整树结构（含所有节点ID、父子关系、文本、展开状态），生成标准化JSON快照
- 调用同一版本的布局引擎（如KityMinder的force-based layout或自研拓扑排序+径向分布）重新计算整棵子树坐标
- 对变动分支及其直系祖先节点启用平滑过渡动画；其余节点保持静止或微调，降低视觉干扰
- 服务端不存坐标，只存结构快照和操作日志，用于冲突回滚与新成员加入时的全量同步
用时间戳+因果链保障操作顺序一致性
多人同时操作同一父节点下的多个分支时，靠网络到达顺序无法保证逻辑正确，需引入因果序机制：
- 每个分支操作事件携带两个时间标识：ts（服务端授时毫秒戳）和 causalityId（前一个相关操作的ID，如上一次addBranch的eventId）
- 服务端按 ts 排序后广播，客户端按 causalityId 链验证依赖关系，跳过已处理或失效的中间事件
- 例如：用户A先添加分支B1，再添加B2（causalityId=B1-eventId）；用户B在A发完B1但未发B2时也添加B3。客户端收到B1→B3→B2后，会等待B2的causalityId就绪再执行，确保B2插在B1之后、B3之前
前端缓存分支状态，支持离线编辑与快速恢复
为应对弱网或页面切换，分支增量同步需兼顾可用性：
- 本地IndexedDB缓存最近100条分支操作事件（含type、id、parentId、text、ts），标记是否已服务端确认（acked: true/false）
- 离线期间新增分支，先写入缓存并本地渲染；联网后按ts顺序批量重放，服务端返回ack即更新本地状态
- 页面重载时，优先加载服务端最新结构快照，再回放未ack事件，确保分支完整性不丢失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
