案例 12 · 敏捷开发：用户故事地图自动演化协同板

> 📘 本案例有深度详解（含真实提示词与全程调试）：案例12 · 用户故事地图实时协同板

【关键工具】 v0 + Liveblocks

【70% Vibe】

输入一个核心业务目标（"让新用户三天内完成首次下单"），AI 自动拆解出多层级的用户故事卡片（史诗 → 故事 → 任务），并铺成一张可视化的故事地图。更妙的是，团队成员能在线一起拖拽卡片、实时同步——像一块活的协作白板。前端用 v0 生成，多人实时协作用 Liveblocks 实现。

【30% Engineering】

"多人实时协作"四个字，背后是分布式系统里最经典的难题。

第一是 WebSocket 掉线重连。实时协作依赖 WebSocket 长连接，但真实网络环境里，连接会因为各种原因断开。断开后如何无感地自动重连、重连后如何把断线期间错过的更新补齐，是保证协作"不卡顿、不丢失"的基础。

第二是并发冲突的解决。当两个人同时拖动同一张卡片、或同时编辑同一处内容时，谁的修改算数？如果处理不好，就会出现"我的改动凭空消失"或"卡片闪来闪去"的灾难。专业的解法是引入 CRDT（无冲突复制数据类型） 这类算法，让多人的并发修改能够自动、正确地合并。这是协作类产品最硬核、也最体现工程功力的 30%。

flowchart LR
    U1[用户 A 拖动卡片] --> M{并发冲突?}
    U2[用户 B 拖动同一卡片] --> M
    M -->|无 CRDT| Bad[改动互相覆盖<br/>卡片乱跳]
    M -->|有 CRDT| Good[自动合并<br/>状态一致]
    style Bad fill:#ffe5e5,stroke:#d33
    style Good fill:#e5ffe9,stroke:#3a3