From f8db0ea4d676cd23c14fb2267b5b2f7d95d901b4 Mon Sep 17 00:00:00 2001
From: Azure <983547216@qq.com>
Date: Mon, 22 Jun 2026 13:47:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20App.vue=20=E9=9B=86=E6=88=90=20SSE=20?=
 =?UTF-8?q?=E8=BF=9E=E6=8E=A5=E7=AE=A1=E7=90=86=EF=BC=8CLobby.vue=20?=
 =?UTF-8?q?=E8=AE=A2=E9=98=85=E5=AE=9E=E6=97=B6=E6=88=BF=E9=97=B4=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          | 19 +++++++++++++++++++
 src/components/baseLayouts/Lobby.vue | 25 ++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 8ffa999..c2bda0f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,26 @@
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue'
 import { RouterView } from 'vue-router'
 import { ElConfigProvider } from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import { useSse } from '@/common/hooks/useSse'
+import { useAccountStore } from '@/stores/modules/account'
+
+const accountStore = useAccountStore()
+const { connect, disconnect } = useSse()
+
+// 登录后建立 SSE 连接，登出时断开
+watch(
+  () => accountStore.accessToken,
+  (token) => {
+    if (token) {
+      connect()
+    } else {
+      disconnect()
+    }
+  },
+  { immediate: true }
+)
 </script>
diff --git a/src/components/baseLayouts/Lobby.vue b/src/components/baseLayouts/Lobby.vue
index a1d7559..e1ab5b4 100644
--- a/src/components/baseLayouts/Lobby.vue
+++ b/src/components/baseLayouts/Lobby.vue
@@ -44,13 +44,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import TableCard from './TableCard.vue'
 import CreateRoomDialog from './CreateRoomDialog.vue'
 import type { RoomItem } from '@/api/modules/game'
 import { useBaseLayoutStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import { getRoomList } from '@/api/modules/game'
+import { sseBus } from '@/stores/sseBus'
 
 /** 状态筛选选项 */
 const statusFilters = [
@@ -88,6 +89,28 @@ watch(activeGameId, () => {
 /** 首次加载 */
 fetchRoomList()
 
+// ===== SSE 实时事件订阅 =====
+onMounted(() => {
+  const offs = [
+    // 新房间创建 → 添加到列表头部
+    sseBus.on('room_created', (room: RoomItem) => {
+      rooms.value.unshift(room)
+    }),
+    // 房间状态更新 → 局部替换
+    sseBus.on('room_updated', (room: RoomItem) => {
+      const idx = rooms.value.findIndex((r) => r.id === room.id)
+      if (idx >= 0) {
+        rooms.value[idx] = room
+      }
+    }),
+    // 房间移除 → 从列表中删除
+    sseBus.on('room_removed', ({ roomId }: { roomId: string }) => {
+      rooms.value = rooms.value.filter((r) => r.id !== roomId)
+    })
+  ]
+  onUnmounted(() => offs.forEach((fn) => fn()))
+})
+
 /** 筛选后的房间列表 */
 const filteredRooms = computed(() => {
   const list = rooms.value