From 4a9b2f2db23d3dc469dd52c27853c350fe5ca7ed Mon Sep 17 00:00:00 2001
From: wsy182 <2392948297@qq.com>
Date: Wed, 25 Mar 2026 14:07:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(game):=20=E5=AE=9E=E7=8E=B0=E6=B8=B8?=
 =?UTF-8?q?=E6=88=8F=E6=88=BF=E9=97=B4=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=92=8CWebSocket=E8=BF=9E=E6=8E=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加路由参数解析和房间状态初始化逻辑
- 实现房间玩家座位视图计算和状态映射
- 集成WebSocket客户端连接管理和重连机制
- 添加房间数据持久化存储功能
- 实现游戏界面状态显示和用户交互控制
- 更新WS代理目标地址配置
- 重构房间状态管理模块分离到独立store
---
 .env.development              |   4 +-
 src/assets/styles/room.css    |   2 +-
 src/store/index.ts            |  45 +++++++
 src/store/state.ts            |  49 ++++++++
 src/store/storage.ts          |  20 +++
 src/types/state/meld.ts       |   4 +-
 src/types/state/player.ts     |   4 +-
 src/views/ChengduGamePage.vue | 223 ++++++++++++++++++++++++++++++----
 src/views/HallPage.vue        |  22 +++-
 src/ws/client.ts              |  19 ++-
 10 files changed, 353 insertions(+), 39 deletions(-)
 create mode 100644 src/store/index.ts
 create mode 100644 src/store/state.ts
 create mode 100644 src/store/storage.ts

diff --git a/.env.development b/.env.development
index 4e162d6..152e027 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,4 @@
 VITE_API_BASE_URL=/api/v1
 VITE_GAME_WS_URL=/ws
-VITE_API_PROXY_TARGET=http://192.168.2.16:19000
-VITE_WS_PROXY_TARGET=http://192.168.2.16:19000
+VITE_API_PROXY_TARGET=http://192.168.1.5:19000
+VITE_WS_PROXY_TARGET=http://192.168.1.5:19000
diff --git a/src/assets/styles/room.css b/src/assets/styles/room.css
index e5dcc70..89c8a20 100644
--- a/src/assets/styles/room.css
+++ b/src/assets/styles/room.css
@@ -148,7 +148,7 @@
   position: absolute;
   top: -4px;
   left: 58px;
-  min-width: 124px;
+  min-width: 128px;
   padding: 8px;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.16);
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..ddd02b7
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,45 @@
+import { ref } from 'vue'
+import type {
+    ActiveRoomState,
+    ActiveRoomSelectionInput,
+} from './state'
+import { readActiveRoomSnapshot, saveActiveRoom } from './storage'
+
+const activeRoom = ref<ActiveRoomState | null>(readActiveRoomSnapshot())
+
+function normalizeRoom(input: ActiveRoomSelectionInput): ActiveRoomState {
+    return {
+        roomId: input.roomId,
+        roomName: input.roomName ?? '',
+        gameType: input.gameType ?? 'chengdu',
+        ownerId: input.ownerId ?? '',
+        maxPlayers: input.maxPlayers ?? 4,
+        playerCount: input.playerCount ?? input.players?.length ?? 0,
+        status: input.status ?? 'waiting',
+        createdAt: input.createdAt ?? '',
+        updatedAt: input.updatedAt ?? '',
+        players: input.players ?? [],
+        myHand: [],
+        game: {
+            state: {
+                wall: [],
+                scores: {},
+                dealerIndex: -1,
+                currentTurn: -1,
+                phase: 'waiting',
+            },
+        },
+    }
+}
+
+// 设置当前房间
+export function setActiveRoom(input: ActiveRoomSelectionInput) {
+    const next = normalizeRoom(input)
+    activeRoom.value = next
+    saveActiveRoom(next)
+}
+
+// 使用房间状态
+export function useActiveRoomState() {
+    return activeRoom
+}
\ No newline at end of file
diff --git a/src/store/state.ts b/src/store/state.ts
new file mode 100644
index 0000000..e1d66ff
--- /dev/null
+++ b/src/store/state.ts
@@ -0,0 +1,49 @@
+// 房间玩家状态
+export interface RoomPlayerState {
+    index: number
+    playerId: string
+    displayName?: string
+    missingSuit?: string | null
+    ready: boolean
+    hand: string[]
+    melds: string[]
+    outTiles: string[]
+    hasHu: boolean
+}
+
+// 房间整体状态
+export interface ActiveRoomState {
+    roomId: string
+    roomName: string
+    gameType: string
+    ownerId: string
+    maxPlayers: number
+    playerCount: number
+    status: string
+    createdAt: string
+    updatedAt: string
+    players: RoomPlayerState[]
+    myHand: string[]
+    game?: {
+        state?: {
+            wall?: string[]
+            scores?: Record<string, number>
+            dealerIndex?: number
+            currentTurn?: number
+            phase?: string
+        }
+    }
+}
+
+export interface ActiveRoomSelectionInput {
+    roomId: string
+    roomName?: string
+    gameType?: string
+    ownerId?: string
+    maxPlayers?: number
+    playerCount?: number
+    status?: string
+    createdAt?: string
+    updatedAt?: string
+    players?: RoomPlayerState[]
+}
\ No newline at end of file
diff --git a/src/store/storage.ts b/src/store/storage.ts
new file mode 100644
index 0000000..5dd97e8
--- /dev/null
+++ b/src/store/storage.ts
@@ -0,0 +1,20 @@
+import type { ActiveRoomState } from './state'
+
+const KEY = 'mahjong_active_room'
+
+// 读取缓存
+export function readActiveRoomSnapshot(): ActiveRoomState | null {
+    const raw = localStorage.getItem(KEY)
+    if (!raw) return null
+
+    try {
+        return JSON.parse(raw)
+    } catch {
+        return null
+    }
+}
+
+// 写入缓存
+export function saveActiveRoom(state: ActiveRoomState) {
+    localStorage.setItem(KEY, JSON.stringify(state))
+}
\ No newline at end of file
diff --git a/src/types/state/meld.ts b/src/types/state/meld.ts
index 930f382..70d7a78 100644
--- a/src/types/state/meld.ts
+++ b/src/types/state/meld.ts
@@ -1,4 +1,4 @@
-import type {Tile} from "../../models";
+import type { Tile } from '../tile'
 
 export type Meld =
     | {
@@ -14,4 +14,4 @@ export type Meld =
     | {
     type: 'an_gang'
     tiles: Tile[]
-}
\ No newline at end of file
+}
diff --git a/src/types/state/player.ts b/src/types/state/player.ts
index 6362f83..a129a99 100644
--- a/src/types/state/player.ts
+++ b/src/types/state/player.ts
@@ -1,5 +1,5 @@
-import type {Tile} from "../../models";
-import type {Meld} from "./meld.ts";
+import type { Tile } from '../tile'
+import type { Meld } from './meld'
 
 export interface Player{
     playerId: string
diff --git a/src/views/ChengduGamePage.vue b/src/views/ChengduGamePage.vue
index 021353c..967a46e 100644
--- a/src/views/ChengduGamePage.vue
+++ b/src/views/ChengduGamePage.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref} from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import deskImage from '../assets/images/desk/desk_01.png'
 import wanIcon from '../assets/images/flowerClolor/wan.png'
 import tongIcon from '../assets/images/flowerClolor/tong.png'
@@ -15,11 +16,63 @@ import TopPlayerCard from '../components/game/TopPlayerCard.vue'
 import RightPlayerCard from '../components/game/RightPlayerCard.vue'
 import BottomPlayerCard from '../components/game/BottomPlayerCard.vue'
 import LeftPlayerCard from '../components/game/LeftPlayerCard.vue'
-import type {SeatPlayerCardModel} from '../components/game/seat-player-card'
-import type {WsStatus} from "../ws/client.ts";
-import {wsClient} from "../ws/client.ts";
+import type { SeatPlayerCardModel } from '../components/game/seat-player-card'
+import type { SeatKey } from '../game/seat'
+import { readStoredAuth } from '../utils/auth-storage'
+import type { WsStatus } from '../ws/client'
+import { wsClient } from '../ws/client'
+import { buildWsUrl } from '../ws/url'
+import type {ActiveRoomState, RoomPlayerState} from "../store/state.ts";
+import {readActiveRoomSnapshot} from "../store/storage.ts";
+
+
+interface SeatViewModel {
+  key: SeatKey
+  player?: RoomPlayerState
+  isSelf: boolean
+  isTurn: boolean
+}
+
+const route = useRoute()
+const router = useRouter()
+const auth = ref(readStoredAuth())
+
+function createFallbackRoomState(): ActiveRoomState {
+  const routeRoomId = typeof route.params.roomId === 'string' ? route.params.roomId : ''
+  const routeRoomName = typeof route.query.roomName === 'string' ? route.query.roomName : ''
+
+  return {
+    roomId: routeRoomId,
+    roomName: routeRoomName,
+    gameType: 'chengdu',
+    ownerId: '',
+    maxPlayers: 4,
+    playerCount: 0,
+    status: 'waiting',
+    createdAt: '',
+    updatedAt: '',
+    players: [],
+    myHand: [],
+    game: {
+      state: {
+        wall: [],
+        scores: {},
+        dealerIndex: -1,
+        currentTurn: -1,
+        phase: 'waiting',
+      },
+    },
+  }
+}
+
+const activeRoom = ref<ActiveRoomState>(readActiveRoomSnapshot() ?? createFallbackRoomState())
 
 const now = ref(Date.now())
+const wsStatus = ref<WsStatus>('idle')
+const wsMessages = ref<string[]>([])
+const wsError = ref('')
+const selectedTile = ref<string | null>(null)
+const leaveRoomPending = ref(false)
 let clockTimer: number | null = null
 let unsubscribe: (() => void) | null = null
 
@@ -29,9 +82,76 @@ const menuTriggerActive = ref(false)
 let menuTriggerTimer: number | null = null
 let menuOpenTimer: number | null = null
 
+const loggedInUserId = computed(() => {
+  const rawId = auth.value?.user?.id
+  if (typeof rawId === 'string') {
+    return rawId
+  }
+  if (typeof rawId === 'number') {
+    return String(rawId)
+  }
+  return ''
+})
+
+const loggedInUserName = computed(() => {
+  return auth.value?.user?.nickname || auth.value?.user?.username || ''
+})
+
+const roomName = computed(() => {
+  const queryRoomName = typeof route.query.roomName === 'string' ? route.query.roomName : ''
+  return queryRoomName || activeRoom.value.roomName || ''
+})
+
+const roomState = computed(() => {
+  return {
+    ...activeRoom.value,
+    name: activeRoom.value.roomName,
+  }
+})
+
+const seatViews = computed<SeatViewModel[]>(() => {
+  const players = roomState.value.players ?? []
+  const tableOrder: SeatKey[] = ['bottom', 'right', 'top', 'left']
+  const selfIndex = players.findIndex((player) => player.playerId === loggedInUserId.value)
+  const currentTurn = roomState.value.game?.state?.currentTurn
+
+  return players.slice(0, 4).map((player, index) => {
+    const relativeIndex = selfIndex >= 0 ? (index - selfIndex + 4) % 4 : index
+    const seatKey = tableOrder[relativeIndex] ?? 'top'
+    return {
+      key: seatKey,
+      player,
+      isSelf: player.playerId === loggedInUserId.value,
+      isTurn: typeof currentTurn === 'number' && player.index === currentTurn,
+    }
+  })
+})
+
+const rightMessages = computed(() => wsMessages.value.slice(-16).reverse())
+
+const currentPhaseText = computed(() => {
+  const phase = roomState.value.game?.state?.phase
+  const map: Record<string, string> = {
+    waiting: '等待中',
+    dealing: '发牌中',
+    playing: '对局中',
+    finished: '已结束',
+  }
+  return phase ? (map[phase] ?? phase) : '等待中'
+})
+
+const roomStatusText = computed(() => {
+  const map: Record<string, string> = {
+    waiting: '等待玩家',
+    playing: '游戏中',
+    finished: '已结束',
+  }
+  const status = roomState.value.status
+  return map[status] ?? status ?? '--'
+})
 
 const networkLabel = computed(() => {
-  const map: Record<string, string> = {
+  const map: Record<WsStatus, string> = {
     connected: '已连接',
     connecting: '连接中',
     error: '连接异常',
@@ -52,7 +172,7 @@ const formattedClock = computed(() => {
 })
 
 const wallBacks = computed<Record<SeatKey, string[]>>(() => {
-  const wallSize = roomState.value.game?.state?.wall.length ?? 0
+  const wallSize = roomState.value.game?.state?.wall?.length ?? 0
   const perSide = Math.max(6, Math.ceil((wallSize || 48) / 4 / 2))
 
   return {
@@ -64,7 +184,6 @@ const wallBacks = computed<Record<SeatKey, string[]>>(() => {
 })
 
 const seatDecor = computed<Record<SeatKey, SeatPlayerCardModel>>(() => {
-  const scoreMap = roomState.value.game?.state?.scores ?? {}
   const dealerIndex = roomState.value.game?.state?.dealerIndex ?? -1
   const defaultMissingSuitLabel = missingSuitLabel(null)
 
@@ -88,15 +207,12 @@ const seatDecor = computed<Record<SeatKey, SeatPlayerCardModel>>(() => {
       continue
     }
 
-    const playerId = seat.player.playerId
-    const score = scoreMap[playerId]
+    const displayName = seat.player.displayName || `玩家${seat.player.index + 1}`
     result[seat.key] = {
       avatar: seat.isSelf ? '我' : String(index + 1),
-      name: seat.isSelf ? '你自己' : seat.player.displayName || `玩家${seat.player.index + 1}`,
-      money: typeof score === 'number' ? String(score) : '--',
+      name: seat.isSelf ? '你自己' : displayName,
       dealer: seat.player.index === dealerIndex,
       isTurn: seat.isTurn,
-      isOnline: true,
       missingSuitLabel: missingSuitLabel(seat.player.missingSuit),
     }
   }
@@ -104,8 +220,6 @@ const seatDecor = computed<Record<SeatKey, SeatPlayerCardModel>>(() => {
   return result
 })
 
-const rightMessages = computed(() => wsMessages.value.slice(-16).reverse())
-
 const floatingMissingSuit = computed(() => {
   const suitMap: Record<string, string> = {
     万: wanIcon,
@@ -113,10 +227,14 @@ const floatingMissingSuit = computed(() => {
     条: tiaoIcon,
   }
 
+  const topLabel = seatDecor.value.top?.missingSuitLabel ?? ''
+  const leftLabel = seatDecor.value.left?.missingSuitLabel ?? ''
+  const rightLabel = seatDecor.value.right?.missingSuitLabel ?? ''
+
   return {
-    top: suitMap[seatDecor.value.top.missingSuitLabel] ?? '',
-    left: suitMap[seatDecor.value.left.missingSuitLabel] ?? '',
-    right: suitMap[seatDecor.value.right.missingSuitLabel] ?? '',
+    top: suitMap[topLabel] ?? '',
+    left: suitMap[leftLabel] ?? '',
+    right: suitMap[rightLabel] ?? '',
   }
 })
 
@@ -127,6 +245,9 @@ function missingSuitLabel(value: string | null | undefined): string {
     tiao: '条',
   }
 
+  if (!value) {
+    return ''
+  }
   return suitMap[value] ?? value
 }
 
@@ -170,6 +291,40 @@ function toggleTrustMode(): void {
   menuOpen.value = false
 }
 
+function selectTile(tile: string): void {
+  selectedTile.value = selectedTile.value === tile ? null : tile
+}
+
+function ensureWsConnected(): void {
+  const token = auth.value?.token
+  if (!token) {
+    wsError.value = '未找到登录凭证，无法建立连接'
+    return
+  }
+
+  wsError.value = ''
+  wsClient.connect(buildWsUrl(token), token)
+}
+
+function reconnectWs(): void {
+  const token = auth.value?.token
+  if (!token) {
+    wsError.value = '未找到登录凭证，无法建立连接'
+    return
+  }
+
+  wsError.value = ''
+  wsClient.reconnect(buildWsUrl(token), token)
+}
+
+function backHall(): void {
+  leaveRoomPending.value = true
+  wsClient.close()
+  void router.push('/hall').finally(() => {
+    leaveRoomPending.value = false
+  })
+}
+
 function handleLeaveRoom(): void {
   menuOpen.value = false
   backHall()
@@ -196,12 +351,35 @@ function handleGlobalEsc(event: KeyboardEvent): void {
 
 
 onMounted(() => {
-  const handler = (status: any) => {
-    WsStatus.value = status
+  const routeRoomId = typeof route.params.roomId === 'string' ? route.params.roomId : ''
+  if (routeRoomId && activeRoom.value.roomId !== routeRoomId) {
+    activeRoom.value = {
+      ...activeRoom.value,
+      roomId: routeRoomId,
+    }
+  }
+  if (!activeRoom.value.roomName && typeof route.query.roomName === 'string') {
+    activeRoom.value = {
+      ...activeRoom.value,
+      roomName: route.query.roomName,
+    }
   }
 
-  // 保存取消订阅函数
+  const handler = (status: WsStatus) => {
+    wsStatus.value = status
+  }
+
+  wsClient.onMessage((msg: unknown) => {
+    const text = typeof msg === 'string' ? msg : JSON.stringify(msg)
+    wsMessages.value.push(`[server] ${text}`)
+  })
+  wsClient.onError((message: string) => {
+    wsError.value = message
+    wsMessages.value.push(`[error] ${message}`)
+  })
+
   unsubscribe = wsClient.onStatusChange(handler)
+  ensureWsConnected()
 
   clockTimer = window.setInterval(() => {
     now.value = Date.now()
@@ -212,7 +390,6 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  // 取消 ws 订阅
   if (unsubscribe) {
     unsubscribe()
     unsubscribe = null
@@ -286,7 +463,7 @@ onBeforeUnmount(() => {
             </div>
             <div class="left-counter">
               <span class="counter-light"></span>
-              <strong>{{ roomState.game?.state?.wall.length ?? 48 }}</strong>
+              <strong>{{ roomState.game?.state?.wall?.length ?? 48 }}</strong>
             </div>
             <span v-if="isTrustMode" class="trust-chip">托管中</span>
           </div>
@@ -356,7 +533,7 @@ onBeforeUnmount(() => {
             <p class="sidebar-title">WebSocket 消息</p>
             <small>{{ networkLabel }} · {{ loggedInUserName || '未登录昵称' }}</small>
           </div>
-          <button class="sidebar-btn" type="button" @click="connectWs">重连</button>
+          <button class="sidebar-btn" type="button" @click="reconnectWs">重连</button>
         </div>
 
         <div class="sidebar-stats">
diff --git a/src/views/HallPage.vue b/src/views/HallPage.vue
index e0a7fcd..cd37acc 100644
--- a/src/views/HallPage.vue
+++ b/src/views/HallPage.vue
@@ -4,10 +4,12 @@ import { useRouter } from 'vue-router'
 import { AuthExpiredError, type AuthSession } from '../api/authed-request'
 import { createRoom, joinRoom, listRooms, type RoomItem } from '../api/mahjong'
 import { getUserInfo, type UserInfo } from '../api/user'
-import { hydrateActiveRoomFromSelection } from '../store/active-room-store'
-import type { RoomPlayerState } from '../store/active-room-store'
+import { setActiveRoom } from '../store'
+import type { RoomPlayerState } from '../store/state'
 import type { StoredAuth } from '../types/session'
 import { clearAuth, readStoredAuth, writeStoredAuth } from '../utils/auth-storage'
+import { wsClient } from '../ws/client'
+import { buildWsUrl } from '../ws/url'
 
 const router = useRouter()
 
@@ -176,6 +178,14 @@ function currentSession(): AuthSession | null {
   return toSession(auth.value)
 }
 
+function connectGameWs(): void {
+  const token = auth.value?.token
+  if (!token) {
+    return
+  }
+  wsClient.connect(buildWsUrl(token), token)
+}
+
 async function refreshRooms(): Promise<void> {
   const session = currentSession()
   if (!session) {
@@ -236,7 +246,7 @@ async function submitCreateRoom(): Promise<void> {
     )
 
     createdRoom.value = room
-    hydrateActiveRoomFromSelection({
+    setActiveRoom({
       roomId: room.room_id,
       roomName: room.name,
       gameType: room.game_type,
@@ -282,7 +292,7 @@ async function handleJoinRoom(room?: { roomId?: string; roomName?: string }): Pr
   roomSubmitting.value = true
   try {
     const joinedRoom = await joinRoom(session, { roomId: targetRoomId }, syncAuth)
-    hydrateActiveRoomFromSelection({
+    setActiveRoom({
       roomId: joinedRoom.room_id,
       roomName: joinedRoom.name,
       gameType: joinedRoom.game_type,
@@ -297,6 +307,7 @@ async function handleJoinRoom(room?: { roomId?: string; roomName?: string }): Pr
     quickJoinRoomId.value = joinedRoom.room_id
     successMessage.value = `已加入房间：${joinedRoom.room_id}`
     await refreshRooms()
+    connectGameWs()
     await router.push({
       path: `/game/chengdu/${joinedRoom.room_id}`,
       query: joinedRoom.name ? { roomName: joinedRoom.name } : undefined,
@@ -335,7 +346,7 @@ async function enterCreatedRoom(): Promise<void> {
   }
 
   showCreatedModal.value = false
-  hydrateActiveRoomFromSelection({
+  setActiveRoom({
     roomId: createdRoom.value.room_id,
     roomName: createdRoom.value.name,
     gameType: createdRoom.value.game_type,
@@ -347,6 +358,7 @@ async function enterCreatedRoom(): Promise<void> {
     updatedAt: createdRoom.value.updated_at,
     players: mapRoomPlayers(createdRoom.value),
   })
+  connectGameWs()
   await router.push({
     path: `/game/chengdu/${createdRoom.value.room_id}`,
     query: { roomName: createdRoom.value.name },
diff --git a/src/ws/client.ts b/src/ws/client.ts
index 0914743..5f5be59 100644
--- a/src/ws/client.ts
+++ b/src/ws/client.ts
@@ -31,6 +31,7 @@ class WsClient {
 
     private reconnectTimer: number | null = null
     private reconnectDelay = 2000 // 重连间隔（毫秒）
+    private manualClosing = false
 
 
     // 构造带 token 的 URL
@@ -46,8 +47,8 @@ class WsClient {
 
     // 建立连接
     connect(url: string, token?: string) {
-        // 已连接则不重复连接
-        if (this.ws && this.status === 'connected') {
+        // 已连接或连接中则不重复连接
+        if (this.ws && (this.status === 'connected' || this.status === 'connecting')) {
             return
         }
 
@@ -57,6 +58,7 @@ class WsClient {
         }
 
         this.setStatus('connecting')
+        this.manualClosing = false
 
         const finalUrl = this.buildUrl()
         this.ws = new WebSocket(finalUrl)
@@ -85,7 +87,10 @@ class WsClient {
         // 连接关闭
         this.ws.onclose = () => {
             this.setStatus('closed')
-            this.tryReconnect()
+            if (!this.manualClosing) {
+                this.tryReconnect()
+            }
+            this.manualClosing = false
         }
     }
 
@@ -100,6 +105,7 @@ class WsClient {
 
     // 手动关闭
     close() {
+        this.manualClosing = true
         if (this.ws) {
             this.ws.close()
             this.ws = null
@@ -107,6 +113,11 @@ class WsClient {
         this.clearReconnect()
     }
 
+    reconnect(url: string, token?: string) {
+        this.close()
+        this.connect(url, token)
+    }
+
 
     // 订阅消息
     onMessage(handler: MessageHandler) {
@@ -159,4 +170,4 @@ class WsClient {
 }
 
 // 单例
-export const wsClient = new WsClient()
\ No newline at end of file
+export const wsClient = new WsClient()