fix(collab): 两处会让协作「看起来正常、其实各写各的」的缺陷

都是实测复现出来的，不是推测。

1. 教师第二次接单，看到的是上一个学生的代码拼在自己文档里
   CollabModal 的 code ref 跨会话不清。n-modal 默认 display-directive="if"，
   每次打开都重挂 CodeMirror，拿这个 ref 当初始文档；而 yCollab 只观察 ytext、
   从不反过来用 ytext 覆盖编辑器。于是上一轮的代码留在文档里，新学生的内容
   作为 delta 插到位置 0，两边偏移从此对不上。
   实测三轮会累积成 CCC/BBB/AAA/XXX，且教师敲一行之后，教师看到
   「BBB/AAA/XXX」、学生看到「BBB/XXX」——两份不同的文档。
   改法：不绑 v-model，文档完全交给 Yjs；并把 start 的起点从「房间打开 +
   await nextTick」换成「编辑器 ready」，顺带修掉绑到已 destroy 的旧 view。

2. 学生换连接后房间静默死掉
   handleCollabOpen 迁移 socket 时只补发了 help_status，没补 room_open，
   而前端每次连接建立都会把 room 清成 null —— 页面显示「老师正在帮你」，
   编辑器却早把 yCollab 摘了，老师敲的字一个也到不了。
   补发 room_open 也修不好：CRDT 状态跟着旧连接没了，新建 Y.Doc 再 seed
   会和老师那份合并成重复文本。所以改成直接拆房、请求退回排队，
   老师再点一次 —— 和老师掉线走同一条路子。

顺带修掉验证时挖出来的第三个：握手帧会被丢。
两端挂 yCollab 的时刻不同步（教师等模态框、学生等 chunk），先挂好的那端发的
SyncStep1 到对面时还没有 binaryHandler，服务端转发是成功的、客户端却静静丢掉。
丢的偏偏是握手——y-protocols 里 A 的内容靠 B 发的 Step1 换回来，教师的 Step1
一丢，学生的代码就永远到不了教师那边（单向同步，同样看着像在协作）。
CollabWebSocket 改成 handler 装上之前先把二进制帧缓着，装上再按序放行。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016DHxhKNxXfG89JnVzHbvgj

apps/web/src/shared/components/CollabModal.vue

@@ -14,7 +14,6 @@ const isDark = useDark()
 const collabStore = useCollabStore()
 const { start, stop, getInitialExtension } = useCollabDoc()
 
-const code = ref("")
 // shallowRef，理由见 SyncCodeEditor.vue：EditorView 是类实例，ref() 的深度
 // UnwrapRef 会把它拆成一个丢了原型方法的假类型，vue-tsc 报莫名其妙的类型错。
 const editorView = shallowRef<EditorView | null>(null)
@@ -36,25 +35,44 @@ const extensions = computed(() => [
   getInitialExtension(),
 ])
 
+const bind = (view: EditorView) => {
+  if (!collabStore.isTeacher || !collabStore.room) return
+  // ★ 教师端 seedContent 必须是 null —— 内容全部来自学生端
+  start({ editorView: view, seedContent: null })
+}
+
+/**
+ * 起点是「编辑器就绪」，不是「房间打开」。
+ *
+ * n-modal 默认 display-directive="if"，每次打开都会重挂一个全新的 CodeMirror。
+ * 原来在 watch 里 `await nextTick()` 之后去取 editorView：赶上 teleport + 离场
+ * 过渡没走完，取到的是上一轮那个已经 destroy 的 view，start() 静默绑到死编辑器上，
+ * 老师对着空白框干等，服务端那边房间却是活的。
+ */
 const handleEditorReady = (payload: { view: EditorView }) => {
   editorView.value = payload.view
+  bind(payload.view)
 }
 
 watch(
   () => collabStore.room,
-  async (room) => {
+  (room) => {
+    // 常规路径下开房时编辑器还没挂，这里是 null，由 @ready 接手；
+    // 万一哪天 display-directive 改成 show（编辑器常驻），这条分支才起作用
     if (room && collabStore.isTeacher) {
-      await nextTick()
-      if (!editorView.value) return
-      // ★ 教师端 seedContent 必须是 null —— 内容全部来自学生端
-      start({ editorView: editorView.value as EditorView, seedContent: null })
+      if (editorView.value) bind(editorView.value)
     } else {
       stop()
+      // 编辑器随模态框一起卸载了，留着这个引用下轮就会绑到一个死 view 上
+      editorView.value = null
     }
   },
 )
 
-onUnmounted(stop)
+onUnmounted(() => {
+  stop()
+  editorView.value = null
+})
 </script>
 
 <template>
@@ -75,8 +93,14 @@ onUnmounted(stop)
       </n-button>
     </template>
 
+    <!--
+      不绑 v-model：这个编辑器的内容完全由 Yjs 文档接管。
+      原来绑了一个跨会话不清的 code ref —— 模态框重挂时 CodeMirror 拿它当初始
+      文档，而 yCollab 只观察 ytext、从不反过来用 ytext 覆盖编辑器，于是上一个
+      学生的代码留在文档里，新学生的内容作为 delta 插到位置 0，两边的偏移从此
+      对不上，教师和学生显示的是两份不同的文档。
+    -->
     <Codemirror
-      v-model="code"
       indentWithTab
       :extensions="extensions"
       :tab-size="4"

apps/web/src/shared/composables/websocket.ts

@@ -737,6 +737,21 @@ export interface CollabMessage extends WebSocketMessage {
 export class CollabWebSocket extends BaseWebSocket<CollabMessage> {
   private binaryHandler: ((data: ArrayBuffer) => void) | null = null
   private connectHandler: (() => void) | null = null
+  /**
+   * 还没装 handler 时先收着的二进制帧。
+   *
+   * room_open 是两端同时收到的，但两端把 yCollab 挂上去的时刻并不同步：
+   * 教师端要等模态框挂出 CodeMirror，学生端要等 y* 那几个 chunk 下载完。
+   * 谁先挂好谁就先发 SyncStep1，而对面这时还没有 handler ——
+   * 服务端只管转发（peer.send() 是成功的），帧就在客户端这儿被静静丢掉了。
+   *
+   * 丢的偏偏是握手：y-protocols 里 A 的内容是靠 **B 发的 Step1** 换回来的。
+   * 教师的 Step1 一丢，学生的代码就永远到不了教师那边 —— 教师看到空编辑器，
+   * 自己敲的字倒是能同步过去，看着像在协作，实际上只有单向。
+   *
+   * 所以在这儿缓一手，等 setBinaryHandler 装上再按序放行。
+   */
+  private pendingBinary: ArrayBuffer[] = []
 
   constructor() {
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"
@@ -745,6 +760,14 @@ export class CollabWebSocket extends BaseWebSocket<CollabMessage> {
 
   setBinaryHandler(handler: ((data: ArrayBuffer) => void) | null) {
     this.binaryHandler = handler
+    if (!handler) {
+      // 协作结束：攒下的帧属于上一轮，放到下一轮去只会污染新文档
+      this.pendingBinary = []
+      return
+    }
+    const buffered = this.pendingBinary
+    this.pendingBinary = []
+    for (const data of buffered) handler(data)
   }
 
   /**
@@ -757,11 +780,22 @@ export class CollabWebSocket extends BaseWebSocket<CollabMessage> {
     this.connectHandler = handler
   }
 
+  /** 一轮握手也就几帧，给个上限纯粹是防呆：真堆到这个数说明哪里不对 */
+  private static readonly MAX_PENDING_BINARY = 64
+
   protected override onBinary(data: ArrayBuffer) {
-    this.binaryHandler?.(data)
+    if (this.binaryHandler) {
+      this.binaryHandler(data)
+      return
+    }
+    if (this.pendingBinary.length < CollabWebSocket.MAX_PENDING_BINARY) {
+      this.pendingBinary.push(data)
+    }
   }
 
   protected override onConnected() {
+    // 新连接，旧连接攒下的帧一概作废
+    this.pendingBinary = []
     this.connectHandler?.()
   }
 }