feat(game): 添加成都麻将房间配置和桌面牌面显示功能

- 在房间创建接口中添加总回合数配置选项 - 实现桌面弃牌区域的可视化展示，区分各玩家的弃牌和组合 - 添加缺门标识显示，帮助玩家识别缺门牌组起始位置 - 优化牌面操作状态管理，增加弃牌等待状态和超时处理机制 - 更新样式布局适配新的桌面牌面区域，调整墙体和桌面对齐方式 - 修复多处牌面状态同步问题，确保游戏流程中的界面一致性
2026-03-29 17:50:34 +08:00
parent 7751d3b8e3
commit be9bd8c76d
13 changed files with 641 additions and 28 deletions
--- a/chengdu-mahjong-features.md
+++ b/chengdu-mahjong-features.md
@@ -31,6 +31,7 @@ HTTP 接口：
 {
  "name": "房间名",
  "game_type": "chengdu",
+  "total_rounds": 8,
  "max_players": 4
 }
 ```
--- a/src/api/mahjong.ts
+++ b/src/api/mahjong.ts
@@ -33,7 +33,7 @@ const ROOM_JOIN_PATH = import.meta.env.VITE_ROOM_JOIN_PATH ?? '/api/v1/game/mahj

 export async function createRoom(
  auth: AuthSession,
-  input: { name: string; gameType: string; maxPlayers: number; totalRounds: number },
+  input: { name: string; gameType: string; totalRounds: number; maxPlayers: number },
  onAuthUpdated?: (next: AuthSession) => void,
 ): Promise<RoomItem> {
  return authedRequest<RoomItem>({
@@ -44,8 +44,8 @@ export async function createRoom(
    body: {
      name: input.name,
      game_type: input.gameType,
-      max_players: input.maxPlayers,
      total_rounds: input.totalRounds,
+      max_players: input.maxPlayers,
    },
  })
 }
--- a/src/assets/styles/room.css
+++ b/src/assets/styles/room.css
@@ -312,6 +312,61 @@
  z-index: 5;
 }

+.action-countdown {
+  position: absolute;
+  top: 92px;
+  right: 40px;
+  min-width: 188px;
+  padding: 10px 12px;
+  border: 1px solid rgba(255, 219, 131, 0.22);
+  border-radius: 12px;
+  color: #fff5d5;
+  background: rgba(21, 17, 14, 0.82);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
+  z-index: 5;
+}
+
+.action-countdown.is-self {
+  border-color: rgba(107, 237, 174, 0.36);
+  color: #e8fff3;
+}
+
+.action-countdown-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.action-countdown-head strong {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.action-countdown-track {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 6px;
+  margin-top: 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.action-countdown-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #ffd569 0%, #ff8e3c 100%);
+  transition: width 0.9s linear;
+}
+
+.action-countdown.is-self .action-countdown-fill {
+  background: linear-gradient(90deg, #75f0aa 0%, #22b573 100%);
+}
+
 .signal-chip {
  display: inline-flex;
  align-items: center;
@@ -445,6 +500,22 @@
    0 2px 6px rgba(0, 0, 0, 0.2);
 }

+.picture-scene .player-meta .trustee-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  color: #eaffef;
+  font-size: 10px;
+  font-weight: 700;
+  background: linear-gradient(180deg, rgba(57, 182, 110, 0.86), rgba(19, 105, 61, 0.94));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 2px 6px rgba(0, 0, 0, 0.18);
+}
+
 .picture-scene .player-badge.seat-right .player-meta,
 .picture-scene .player-badge.seat-left .player-meta {
  display: flex;
@@ -554,12 +625,12 @@
 }

 .wall-right {
-  right: 110px;
+  right: 140px;
  gap: 0;
 }

 .wall-left {
-  left: 110px;
+  left: 140px;
 }

 .wall-left img,
@@ -636,6 +707,7 @@
 }

 .wall-live-tile-button {
+  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
@@ -643,6 +715,24 @@
  cursor: pointer;
 }

+.wall-live-tile-lack-tag {
+  position: absolute;
+  top: 21px;
+  left: 5px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: 6px;
+  color: #fff8e8;
+  font-size: 10px;
+  line-height: 16px;
+  font-weight: 800;
+  background: linear-gradient(180deg, rgba(200, 56, 41, 0.95), rgba(137, 25, 14, 0.96));
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  z-index: 2;
+  pointer-events: none;
+}
+
 .wall-live-tile-button:disabled {
  cursor: default;
  opacity: 1;
@@ -701,6 +791,116 @@
  left: 110px;
 }

+.desk-zone {
+  position: absolute;
+  display: flex;
+  gap: 0;
+  max-width: 280px;
+  max-height: 220px;
+  pointer-events: none;
+  z-index: 2;
+  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
+}
+
+.desk-zone-top,
+.desk-zone-bottom {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.desk-zone-top {
+  top: 208px;
+}
+
+.desk-zone-bottom {
+  bottom: 220px;
+}
+
+.desk-zone-left,
+.desk-zone-right {
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.desk-zone-left {
+  left: 240px;
+}
+
+.desk-zone-right {
+  right: 240px;
+}
+
+.desk-tile {
+  display: block;
+  object-fit: contain;
+}
+
+.desk-zone-top .desk-tile,
+.desk-zone-bottom .desk-tile {
+  width: 30px;
+  height: 44px;
+}
+
+.desk-zone-left .desk-tile,
+.desk-zone-right .desk-tile {
+  width: 44px;
+  height: 30px;
+}
+
+.desk-zone-top .desk-tile + .desk-tile {
+  margin-left: -0px;
+}
+
+.desk-zone-bottom .desk-tile + .desk-tile {
+  margin-left: -2px;
+}
+
+.desk-zone-left .desk-tile + .desk-tile,
+.desk-zone-right .desk-tile + .desk-tile {
+  margin-top: -14px;
+}
+
+.desk-zone-top .desk-tile.is-group-start,
+.desk-zone-bottom .desk-tile.is-group-start {
+  margin-left: 6px;
+}
+
+.desk-zone-bottom .desk-tile.is-group-start {
+  margin-left: 13px;
+}
+
+.desk-zone-left .desk-tile.is-group-start,
+.desk-zone-right .desk-tile.is-group-start {
+  margin-top: 7px;
+}
+
+.desk-tile.is-covered {
+  opacity: 0.95;
+}
+
+.desk-hu-flag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  margin-left: 6px;
+  padding: 0 7px;
+  border-radius: 999px;
+  color: #fff3da;
+  font-size: 12px;
+  font-weight: 800;
+  background: linear-gradient(180deg, rgba(219, 81, 56, 0.92), rgba(146, 32, 20, 0.96));
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
+}
+
+.desk-zone-left .desk-hu-flag,
+.desk-zone-right .desk-hu-flag {
+  margin-top: 6px;
+  margin-left: 0;
+}
+
 .center-wind-square {
  position: absolute;
  left: 50%;
@@ -1287,6 +1487,22 @@
    left: 88px;
  }

+  .desk-zone-top {
+    top: 196px;
+  }
+
+  .desk-zone-bottom {
+    bottom: 208px;
+  }
+
+  .desk-zone-left {
+    left: 186px;
+  }
+
+  .desk-zone-right {
+    right: 186px;
+  }
+
  .inner-outline.mid {
    inset: 70px 72px 120px;
  }
@@ -1307,6 +1523,12 @@
    height: 62px;
    font-size: 22px;
  }
+
+  .action-countdown {
+    top: 82px;
+    right: 20px;
+    min-width: 164px;
+  }
 }

@media (max-width: 640px) {
@@ -1329,6 +1551,11 @@
    display: none;
  }

+  .desk-zone-top,
+  .desk-zone-bottom {
+    display: none;
+  }
+
  .wall-left {
    left: 32px;
  }
@@ -1337,6 +1564,14 @@
    right: 32px;
  }

+  .desk-zone-left {
+    left: 84px;
+  }
+
+  .desk-zone-right {
+    right: 84px;
+  }
+
  .floating-status.left,
  .floating-status.right {
    display: none;
@@ -1354,6 +1589,21 @@
    font-size: 16px;
  }

+  .top-right-clock {
+    top: 16px;
+    right: 16px;
+    gap: 8px;
+    padding: 7px 10px;
+  }
+
+  .action-countdown {
+    top: 62px;
+    right: 16px;
+    min-width: 0;
+    width: calc(100% - 32px);
+    padding: 8px 10px;
+  }
+
  .bottom-control-panel {
    width: calc(100% - 20px);
  }
--- a/src/components/game/SeatPlayerCard.vue
+++ b/src/components/game/SeatPlayerCard.vue
@@ -51,6 +51,7 @@ const resolvedAvatarUrl = computed(() => {

    <div class="player-meta">
      <p>{{ player.name }}</p>
+      <small v-if="player.isTrustee" class="trustee-chip">托管中</small>
      <small v-if="player.isReady" class="ready-chip">已准备</small>
    </div>

--- a/src/components/game/seat-player-card.ts
+++ b/src/components/game/seat-player-card.ts
@@ -5,5 +5,6 @@ export interface SeatPlayerCardModel {
    dealer: boolean         // 是否庄家
    isTurn: boolean         // 是否当前轮到该玩家
    isReady: boolean        // 是否已准备
+    isTrustee: boolean      // 是否托管
    missingSuitLabel: string // 定缺花色（万/筒/条）
 }
--- a/src/game/actions.ts
+++ b/src/game/actions.ts
@@ -22,6 +22,13 @@ export interface RoomPlayerUpdatePayload {
    }>
 }

+export interface RoomTrusteePayload {
+    player_id?: string
+    playerId?: string
+    trustee?: boolean
+    reason?: string
+}
+

 /**
 * 游戏动作定义（只描述“发生了什么”）
@@ -80,3 +87,8 @@ export type GameAction =
    type: 'ROOM_PLAYER_UPDATE'
    payload: RoomPlayerUpdatePayload
 }
+
+    | {
+    type: 'ROOM_TRUSTEE'
+    payload: RoomTrusteePayload
+}
--- a/src/game/dispatcher.ts
+++ b/src/game/dispatcher.ts
@@ -34,6 +34,10 @@ export function dispatchGameAction(action: GameAction) {
            store.onRoomPlayerUpdate(action.payload)
            break

+        case 'ROOM_TRUSTEE':
+            store.onRoomTrustee(action.payload)
+            break
+

        default:
            throw new Error('Invalid game action')
--- a/src/store/gameStore.ts
+++ b/src/store/gameStore.ts
@@ -4,7 +4,7 @@ import {
    type GameState,
    type PendingClaimState,
 } from '../types/state'
-import type { RoomPlayerUpdatePayload } from '../game/actions'
+import type { RoomPlayerUpdatePayload, RoomTrusteePayload } from '../game/actions'

 import type { Tile } from '../types/tile'

@@ -157,6 +157,7 @@ export const useGameStore = defineStore('game', {
                        typeof avatarUrlRaw === 'string'
                            ? avatarUrlRaw
                            : previous?.avatarURL,
+                    isTrustee: previous?.isTrustee ?? false,
                    missingSuit:
                        typeof missingSuitRaw === 'string' || missingSuitRaw === null
                            ? missingSuitRaw
@@ -185,6 +186,7 @@ export const useGameStore = defineStore('game', {
                        seatIndex: previous?.seatIndex ?? index,
                        displayName: previous?.displayName ?? playerId,
                        avatarURL: previous?.avatarURL,
+                        isTrustee: previous?.isTrustee ?? false,
                        missingSuit: previous?.missingSuit,
                        handTiles: previous?.handTiles ?? [],
                        handCount: previous?.handCount ?? 0,
@@ -200,6 +202,23 @@ export const useGameStore = defineStore('game', {
            this.players = nextPlayers
        },

+        onRoomTrustee(payload: RoomTrusteePayload) {
+            const playerId =
+                (typeof payload.player_id === 'string' && payload.player_id) ||
+                (typeof payload.playerId === 'string' && payload.playerId) ||
+                ''
+            if (!playerId) {
+                return
+            }
+
+            const player = this.players[playerId]
+            if (!player) {
+                return
+            }
+
+            player.isTrustee = typeof payload.trustee === 'boolean' ? payload.trustee : true
+        },
+
        // 清理操作窗口
        clearPendingClaim() {
            this.pendingClaim = undefined
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -5,6 +5,7 @@ export interface RoomPlayerState {
    displayName?: string
    missingSuit?: string | null
    ready: boolean
+    trustee?: boolean
    hand: string[]
    melds: string[]
    outTiles: string[]
--- a/src/types/state/playerState.ts
+++ b/src/types/state/playerState.ts
@@ -7,6 +7,7 @@ export interface PlayerState {
    seatIndex: number
    displayName?: string
    missingSuit?: string | null
+    isTrustee: boolean

    // 手牌（只有自己有完整数据，后端可控制）
    handTiles: Tile[]
--- a/src/views/ChengduGamePage.vue
+++ b/src/views/ChengduGamePage.vue
@@ -16,7 +16,7 @@ import westWind from '../assets/images/direction/xi.png'
 import northWind from '../assets/images/direction/bei.png'
 import type {SeatPlayerCardModel} from '../components/game/seat-player-card'
 import type {SeatKey} from '../game/seat'
-import type {GameAction, RoomPlayerUpdatePayload} from '../game/actions'
+import type {GameAction, RoomPlayerUpdatePayload, RoomTrusteePayload} from '../game/actions'
 import {dispatchGameAction} from '../game/dispatcher'
 import {refreshAccessToken} from '../api/auth'
 import {AuthExpiredError, type AuthSession} from '../api/authed-request'
@@ -55,12 +55,18 @@ interface WallTileItem {
  src: string
  alt: string
  imageType: TableTileImageType
+  isGroupStart?: boolean
+  showLackTag?: boolean
  suit?: Tile['suit']
  tile?: Tile
 }

 interface WallSeatState {
  tiles: WallTileItem[]
+}
+
+interface DeskSeatState {
+  tiles: WallTileItem[]
  hasHu: boolean
 }

@@ -71,10 +77,19 @@ interface SeatViewModel {
  isTurn: boolean
 }

+interface PlayerActionTimer {
+  playerIds: string[]
+  actionDeadlineAt?: string | null
+  countdownSeconds: number
+  duration: number
+  remaining: number
+}
+
 const now = ref(Date.now())
 const wsStatus = ref<WsStatus>('idle')
 const wsMessages = ref<string[]>([])
 const wsError = ref('')
+const roomCountdown = ref<PlayerActionTimer | null>(null)
 const leaveRoomPending = ref(false)
 const readyTogglePending = ref(false)
 const startGamePending = ref(false)
@@ -82,6 +97,7 @@ const dingQuePending = ref(false)
 const discardPending = ref(false)
 const claimActionPending = ref(false)
 let clockTimer: number | null = null
+let discardPendingTimer: number | null = null
 let unsubscribe: (() => void) | null = null
 let needsInitialRoomInfo = false

@@ -322,8 +338,19 @@ const allPlayersReady = computed(() => {
  )
 })

+const hasRoundStarted = computed(() => {
+  return gamePlayers.value.some((player) => {
+    return (
+        player.handCount > 0 ||
+        player.handTiles.length > 0 ||
+        player.melds.length > 0 ||
+        player.discardTiles.length > 0
+    )
+  })
+})
+
 const showStartGameButton = computed(() => {
-  return gameStore.phase === 'waiting' && allPlayersReady.value
+  return gameStore.phase === 'waiting' && allPlayersReady.value && !hasRoundStarted.value
 })

 const showWaitingOwnerTip = computed(() => {
@@ -335,7 +362,7 @@ const canStartGame = computed(() => {
 })

 const showReadyToggle = computed(() => {
-  if (gameStore.phase !== 'waiting' || !gameStore.roomId) {
+  if (gameStore.phase !== 'waiting' || !gameStore.roomId || hasRoundStarted.value) {
    return false
  }

@@ -365,19 +392,20 @@ const canDiscardTiles = computed(() => {
    return false
  }

-  if (gameStore.phase !== 'playing') {
+  if (wsStatus.value !== 'connected') {
    return false
  }

-  if (gameStore.needDraw) {
+  if (player.handTiles.length === 0) {
    return false
  }

-  if (!player.missingSuit || player.handTiles.length === 0) {
+  if (discardPending.value) {
    return false
  }

-  return player.seatIndex === gameStore.currentTurn
+  // 交给后端做最终合法性校验，前端只避免明显无效点击。
+  return true
 })

 const canDrawTile = computed(() => {
@@ -411,6 +439,56 @@ const showClaimActions = computed(() => {
  return visibleClaimOptions.value.length > 0
 })

+const actionCountdown = computed(() => {
+  const countdown = roomCountdown.value
+  if (!countdown) {
+    return null
+  }
+
+  const deadlineAt = countdown.actionDeadlineAt ? Date.parse(countdown.actionDeadlineAt) : Number.NaN
+  const fallbackRemaining = countdown.remaining > 0 ? countdown.remaining : countdown.countdownSeconds
+  const derivedRemaining = Number.isFinite(deadlineAt)
+      ? Math.ceil((deadlineAt - now.value) / 1000)
+      : fallbackRemaining
+  const remaining = Math.max(0, derivedRemaining)
+
+  if (remaining <= 0) {
+    return null
+  }
+
+  const targetPlayerIds = countdown.playerIds.filter((playerId) => typeof playerId === 'string' && playerId.trim())
+  if (targetPlayerIds.length === 0) {
+    return null
+  }
+
+  const playerLabel = targetPlayerIds
+      .map((playerId) => {
+        if (playerId === loggedInUserId.value) {
+          return '你'
+        }
+
+        const targetPlayer = gameStore.players[playerId]
+        if (targetPlayer?.displayName) {
+          return targetPlayer.displayName
+        }
+        if (targetPlayer) {
+          return `玩家${targetPlayer.seatIndex + 1}`
+        }
+        return '玩家'
+      })
+      .join('、')
+  const duration = countdown.duration > 0 ? countdown.duration : Math.max(remaining, fallbackRemaining, 1)
+  const includesSelf = targetPlayerIds.includes(loggedInUserId.value)
+
+  return {
+    playerLabel,
+    remaining,
+    duration,
+    isSelf: includesSelf,
+    progress: Math.max(0, Math.min(100, (remaining / duration) * 100)),
+  }
+})
+
 function applyPlayerReadyState(playerId: string, ready: boolean): void {
  const player = gameStore.players[playerId]
  if (player) {
@@ -745,6 +823,7 @@ function handleRoomStateResponse(message: unknown): void {
      seatIndex,
      displayName: previous?.displayName ?? playerId,
      avatarURL: previous?.avatarURL,
+      isTrustee: previous?.isTrustee ?? false,
      missingSuit: dingQue || previous?.missingSuit || null,
      handTiles: previous?.handTiles ?? [],
      handCount,
@@ -852,7 +931,7 @@ function handleRoomStateResponse(message: unknown): void {
    startGamePending.value = false
  }
  if (currentTurnPlayerId && currentTurnPlayerId !== loggedInUserId.value) {
-    discardPending.value = false
+    markDiscardCompleted()
  }
 }

@@ -900,6 +979,7 @@ function handleRoomInfoResponse(message: unknown): void {
      displayName?: string
      missingSuit?: string | null
      ready: boolean
+      trustee: boolean
      hand: string[]
      melds: string[]
      outTiles: string[]
@@ -912,6 +992,7 @@ function handleRoomInfoResponse(message: unknown): void {
      avatarURL?: string
      missingSuit?: string | null
      isReady: boolean
+      isTrustee: boolean
      handTiles: Tile[]
      handCount: number
      melds: PlayerState['melds']
@@ -946,6 +1027,7 @@ function handleRoomInfoResponse(message: unknown): void {
        displayName: displayName || undefined,
        missingSuit,
        ready,
+        trustee: false,
        hand: [],
        melds: [],
        outTiles: [],
@@ -958,6 +1040,7 @@ function handleRoomInfoResponse(message: unknown): void {
        avatarURL: readString(player, 'avatar_url', 'AvatarUrl', 'avatar', 'avatarUrl') || undefined,
        missingSuit,
        isReady: ready,
+        isTrustee: false,
        handTiles: [],
        handCount: 0,
        melds: [],
@@ -1003,6 +1086,7 @@ function handleRoomInfoResponse(message: unknown): void {
        displayName: displayName || undefined,
        missingSuit,
        ready: existing?.roomPlayer.ready ?? false,
+        trustee: existing?.roomPlayer.trustee ?? false,
        hand: Array.from({length: handCount}, () => ''),
        melds: melds.map((meld) => meld.type),
        outTiles: outTiles.map((tile) => tileToText(tile)),
@@ -1015,6 +1099,7 @@ function handleRoomInfoResponse(message: unknown): void {
        avatarURL: existing?.gamePlayer.avatarURL,
        missingSuit,
        isReady: existing?.gamePlayer.isReady ?? false,
+        isTrustee: existing?.gamePlayer.isTrustee ?? false,
        handTiles: existing?.gamePlayer.handTiles ?? [],
        handCount,
        melds: melds.length > 0 ? melds : existing?.gamePlayer.melds ?? [],
@@ -1053,6 +1138,7 @@ function handleRoomInfoResponse(message: unknown): void {
      displayName: gamePlayer.displayName ?? previous?.displayName,
      avatarURL: gamePlayer.avatarURL ?? previous?.avatarURL,
      missingSuit: gamePlayer.missingSuit ?? previous?.missingSuit,
+      isTrustee: previous?.isTrustee ?? gamePlayer.isTrustee,
      handTiles: gamePlayer.handTiles.length > 0 ? gamePlayer.handTiles : previous?.handTiles ?? [],
      handCount: gamePlayer.handCount > 0
          ? gamePlayer.handCount
@@ -1190,6 +1276,12 @@ function buildWallTileImage(
 }

 function emptyWallSeat(): WallSeatState {
+  return {
+    tiles: [],
+  }
+}
+
+function emptyDeskSeat(): DeskSeatState {
  return {
    tiles: [],
    hasHu: false,
@@ -1217,17 +1309,25 @@ const wallSeats = computed<Record<SeatKey, WallSeatState>>(() => {
    const targetSeat = seat.key

    if (seat.isSelf) {
+      const missingSuit = seat.player.missingSuit as Tile['suit'] | null | undefined
      sortedVisibleHandTiles.value.forEach((tile, index) => {
        const src = buildWallTileImage(targetSeat, tile, 'hand')
        if (!src) {
          return
        }
+        const previousTile = index > 0 ? sortedVisibleHandTiles.value[index - 1] : undefined
+        const isMissingSuitGroupStart = Boolean(
+            missingSuit &&
+            tile.suit === missingSuit &&
+            (!previousTile || previousTile.suit !== tile.suit),
+        )

        seatTiles.push({
          key: `hand-${tile.id}-${index}`,
          src,
          alt: formatTile(tile),
          imageType: 'hand',
+          showLackTag: isMissingSuitGroupStart,
          suit: tile.suit,
          tile,
        })
@@ -1248,6 +1348,49 @@ const wallSeats = computed<Record<SeatKey, WallSeatState>>(() => {
      }
    }

+    emptyState[targetSeat] = {
+      tiles: seatTiles,
+    }
+  }
+
+  return emptyState
+})
+
+const deskSeats = computed<Record<SeatKey, DeskSeatState>>(() => {
+  const emptyState: Record<SeatKey, DeskSeatState> = {
+    top: emptyDeskSeat(),
+    right: emptyDeskSeat(),
+    bottom: emptyDeskSeat(),
+    left: emptyDeskSeat(),
+  }
+
+  if (gameStore.phase === 'waiting' && myHandTiles.value.length === 0) {
+    return emptyState
+  }
+
+  for (const seat of seatViews.value) {
+    if (!seat.player) {
+      continue
+    }
+
+    const seatTiles: WallTileItem[] = []
+    const targetSeat = seat.key
+
+    seat.player.discardTiles.forEach((tile, index) => {
+      const src = buildWallTileImage(targetSeat, tile, 'exposed')
+      if (!src) {
+        return
+      }
+
+      seatTiles.push({
+        key: `discard-${tile.id}-${index}`,
+        src,
+        alt: formatTile(tile),
+        imageType: 'exposed',
+        suit: tile.suit,
+      })
+    })
+
    seat.player.melds.forEach((meld, meldIndex) => {
      meld.tiles.forEach((tile, tileIndex) => {
        const imageType: TableTileImageType = meld.type === 'an_gang' ? 'covered' : 'exposed'
@@ -1257,10 +1400,11 @@ const wallSeats = computed<Record<SeatKey, WallSeatState>>(() => {
        }

        seatTiles.push({
-          key: `${meld.type}-${meldIndex}-${tile.id}-${tileIndex}`,
+          key: `desk-${meld.type}-${meldIndex}-${tile.id}-${tileIndex}`,
          src,
          alt: formatTile(tile),
          imageType,
+          isGroupStart: tileIndex === 0,
          suit: tile.suit,
        })
      })
@@ -1285,6 +1429,7 @@ const seatDecor = computed<Record<SeatKey, SeatPlayerCardModel>>(() => {
    dealer: false,
    isTurn: false,
    isReady: false,
+    isTrustee: false,
    missingSuitLabel: defaultMissingSuitLabel,
  })

@@ -1312,6 +1457,7 @@ const seatDecor = computed<Record<SeatKey, SeatPlayerCardModel>>(() => {
      dealer: seat.player.seatIndex === dealerIndex,
      isTurn: seat.isTurn,
      isReady: Boolean(seat.player.isReady),
+      isTrustee: Boolean(seat.player.isTrustee),
      missingSuitLabel: missingSuitLabel(seat.player.missingSuit),
    }
  }
@@ -1415,12 +1561,57 @@ function handlePlayerHandResponse(message: unknown): void {
    }
  }

-  discardPending.value = false
+  markDiscardCompleted()
  if (gameStore.phase !== 'waiting') {
    startGamePending.value = false
  }
 }

+function handleRoomCountdown(message: unknown): void {
+  const source = asRecord(message)
+  if (!source || typeof source.type !== 'string') {
+    return
+  }
+
+  if (normalizeWsType(source.type) !== 'ROOM_COUNTDOWN') {
+    return
+  }
+
+  const payload = asRecord(source.payload) ?? source
+  const roomId =
+      readString(payload, 'room_id', 'roomId') ||
+      readString(source, 'roomId')
+  if (roomId && gameStore.roomId && roomId !== gameStore.roomId) {
+    return
+  }
+
+  const playerIds = readStringArray(payload, 'player_ids', 'playerIds', 'PlayerIDs')
+  const fallbackPlayerId = readString(payload, 'player_id', 'playerId', 'PlayerID')
+  const normalizedPlayerIds = playerIds.length > 0 ? playerIds : (fallbackPlayerId ? [fallbackPlayerId] : [])
+  if (normalizedPlayerIds.length === 0) {
+    roomCountdown.value = null
+    return
+  }
+
+  const countdownSeconds = readNumber(payload, 'countdown_seconds', 'CountdownSeconds') ?? 0
+  const duration = readNumber(payload, 'duration', 'Duration') ?? countdownSeconds
+  const remaining = readNumber(payload, 'remaining', 'Remaining') ?? countdownSeconds
+  const actionDeadlineAt = readString(payload, 'action_deadline_at', 'ActionDeadlineAt') || null
+
+  if (countdownSeconds <= 0 && remaining <= 0 && !actionDeadlineAt) {
+    roomCountdown.value = null
+    return
+  }
+
+  roomCountdown.value = {
+    playerIds: normalizedPlayerIds,
+    actionDeadlineAt,
+    countdownSeconds,
+    duration,
+    remaining,
+  }
+}
+
 function toGameAction(message: unknown): GameAction | null {
  if (!message || typeof message !== 'object') {
    return null
@@ -1475,11 +1666,44 @@ function toGameAction(message: unknown): GameAction | null {
        return {type: 'ROOM_PLAYER_UPDATE', payload: payload as GameActionPayload<'ROOM_PLAYER_UPDATE'>}
      }
      return null
+    case 'ROOM_TRUSTEE':
+      if (payload && typeof payload === 'object') {
+        return {type: 'ROOM_TRUSTEE', payload: payload as GameActionPayload<'ROOM_TRUSTEE'>}
+      }
+      return {
+        type: 'ROOM_TRUSTEE',
+        payload: source as unknown as GameActionPayload<'ROOM_TRUSTEE'>,
+      }
    default:
      return null
  }
 }

+function syncTrusteeState(payload: RoomTrusteePayload): void {
+  const playerId =
+      (typeof payload.player_id === 'string' && payload.player_id) ||
+      (typeof payload.playerId === 'string' && payload.playerId) ||
+      ''
+  if (!playerId) {
+    return
+  }
+
+  const trustee = typeof payload.trustee === 'boolean' ? payload.trustee : true
+  if (playerId === loggedInUserId.value) {
+    isTrustMode.value = trustee
+  }
+
+  const room = activeRoom.value
+  if (!room || room.roomId !== gameStore.roomId) {
+    return
+  }
+
+  const roomPlayer = room.players.find((item) => item.playerId === playerId)
+  if (roomPlayer) {
+    roomPlayer.trustee = trustee
+  }
+}
+
 function handleReadyStateResponse(message: unknown): void {
  if (!message || typeof message !== 'object') {
    return
@@ -1838,18 +2062,42 @@ function chooseDingQue(suit: Tile['suit']): void {
  })
 }

+function clearDiscardPendingTimer(): void {
+  if (discardPendingTimer !== null) {
+    window.clearTimeout(discardPendingTimer)
+    discardPendingTimer = null
+  }
+}
+
+function markDiscardCompleted(): void {
+  clearDiscardPendingTimer()
+  discardPending.value = false
+}
+
+function markDiscardPendingWithFallback(): void {
+  clearDiscardPendingTimer()
+  discardPending.value = true
+  discardPendingTimer = window.setTimeout(() => {
+    discardPending.value = false
+    discardPendingTimer = null
+  }, 2000)
+}
+
 function discardTile(tile: Tile): void {
-  if (discardPending.value || !canDiscardTiles.value) {
+  if (!canDiscardTiles.value || !gameStore.roomId) {
    return
  }

-  discardPending.value = true
+  markDiscardPendingWithFallback()
  sendWsMessage({
    type: 'discard',
    roomId: gameStore.roomId,
    payload: {
-      room_id: gameStore.roomId,
-      tile,
+      tile: {
+        id: tile.id,
+        suit: tile.suit,
+        value: tile.value,
+      },
    },
  })
 }
@@ -1940,6 +2188,7 @@ function hydrateFromActiveRoom(routeRoomId: string): void {
      displayName: player.displayName || player.playerId,
      avatarURL: previous?.avatarURL,
      missingSuit: player.missingSuit ?? previous?.missingSuit,
+      isTrustee: player.trustee ?? previous?.isTrustee ?? false,
      isReady: player.ready,
      handTiles: previous?.handTiles ?? [],
      handCount: previous?.handCount ?? 0,
@@ -1979,6 +2228,7 @@ onMounted(() => {
    handleRoomInfoResponse(msg)
    handleRoomStateResponse(msg)
    handlePlayerHandResponse(msg)
+    handleRoomCountdown(msg)
    handleReadyStateResponse(msg)
    handlePlayerDingQueResponse(msg)
    const gameAction = toGameAction(msg)
@@ -1988,7 +2238,7 @@ onMounted(() => {
        startGamePending.value = false
      }
      if (gameAction.type === 'PLAY_TILE' && gameAction.payload.playerId === loggedInUserId.value) {
-        discardPending.value = false
+        markDiscardCompleted()
      }
      if (gameAction.type === 'ROOM_PLAYER_UPDATE') {
        syncReadyStatesFromRoomUpdate(gameAction.payload)
@@ -1997,9 +2247,13 @@ onMounted(() => {
      if (gameAction.type === 'CLAIM_RESOLVED') {
        claimActionPending.value = false
      }
+      if (gameAction.type === 'ROOM_TRUSTEE') {
+        syncTrusteeState(gameAction.payload)
+      }
    }
  })
  wsClient.onError((message: string) => {
+    markDiscardCompleted()
    wsError.value = message
    wsMessages.value.push(`[error] ${message}`)

@@ -2040,6 +2294,7 @@ onBeforeUnmount(() => {
    window.clearInterval(clockTimer)
    clockTimer = null
  }
+  clearDiscardPendingTimer()

  window.removeEventListener('click', handleGlobalClick)
  window.removeEventListener('keydown', handleGlobalEsc)
@@ -2117,13 +2372,80 @@ onBeforeUnmount(() => {
            <span>{{ formattedClock }}</span>
          </div>

+          <div v-if="actionCountdown" class="action-countdown" :class="{ 'is-self': actionCountdown.isSelf }">
+            <div class="action-countdown-head">
+              <span>{{ actionCountdown.playerLabel }}操作倒计时</span>
+              <strong>{{ actionCountdown.remaining }}s</strong>
+            </div>
+            <div class="action-countdown-track">
+              <span class="action-countdown-fill" :style="{ width: `${actionCountdown.progress}%` }"></span>
+            </div>
+          </div>
+

          <TopPlayerCard :player="seatDecor.top"/>
          <RightPlayerCard :player="seatDecor.right"/>
          <BottomPlayerCard :player="seatDecor.bottom"/>
          <LeftPlayerCard :player="seatDecor.left"/>

-          <div v-if="wallSeats.top.tiles.length > 0 || wallSeats.top.hasHu" class="wall wall-top wall-live">
+          <div v-if="deskSeats.top.tiles.length > 0 || deskSeats.top.hasHu" class="desk-zone desk-zone-top">
+            <img
+                v-for="tile in deskSeats.top.tiles"
+                :key="tile.key"
+                class="desk-tile"
+                :class="{
+                  'is-group-start': tile.isGroupStart,
+                  'is-covered': tile.imageType === 'covered',
+                }"
+                :src="tile.src"
+                :alt="tile.alt"
+            />
+            <span v-if="deskSeats.top.hasHu" class="desk-hu-flag">胡</span>
+          </div>
+          <div v-if="deskSeats.right.tiles.length > 0 || deskSeats.right.hasHu" class="desk-zone desk-zone-right">
+            <img
+                v-for="tile in deskSeats.right.tiles"
+                :key="tile.key"
+                class="desk-tile"
+                :class="{
+                  'is-group-start': tile.isGroupStart,
+                  'is-covered': tile.imageType === 'covered',
+                }"
+                :src="tile.src"
+                :alt="tile.alt"
+            />
+            <span v-if="deskSeats.right.hasHu" class="desk-hu-flag">胡</span>
+          </div>
+          <div v-if="deskSeats.bottom.tiles.length > 0 || deskSeats.bottom.hasHu" class="desk-zone desk-zone-bottom">
+            <img
+                v-for="tile in deskSeats.bottom.tiles"
+                :key="tile.key"
+                class="desk-tile"
+                :class="{
+                  'is-group-start': tile.isGroupStart,
+                  'is-covered': tile.imageType === 'covered',
+                }"
+                :src="tile.src"
+                :alt="tile.alt"
+            />
+            <span v-if="deskSeats.bottom.hasHu" class="desk-hu-flag">胡</span>
+          </div>
+          <div v-if="deskSeats.left.tiles.length > 0 || deskSeats.left.hasHu" class="desk-zone desk-zone-left">
+            <img
+                v-for="tile in deskSeats.left.tiles"
+                :key="tile.key"
+                class="desk-tile"
+                :class="{
+                  'is-group-start': tile.isGroupStart,
+                  'is-covered': tile.imageType === 'covered',
+                }"
+                :src="tile.src"
+                :alt="tile.alt"
+            />
+            <span v-if="deskSeats.left.hasHu" class="desk-hu-flag">胡</span>
+          </div>
+
+          <div v-if="wallSeats.top.tiles.length > 0" class="wall wall-top wall-live">
            <img
                v-for="(tile, index) in wallSeats.top.tiles"
                :key="tile.key"
@@ -2135,9 +2457,8 @@ onBeforeUnmount(() => {
                :src="tile.src"
                :alt="tile.alt"
            />
-            <span v-if="wallSeats.top.hasHu" class="wall-hu-flag">胡</span>
          </div>
-          <div v-if="wallSeats.right.tiles.length > 0 || wallSeats.right.hasHu" class="wall wall-right wall-live">
+          <div v-if="wallSeats.right.tiles.length > 0" class="wall wall-right wall-live">
            <img
                v-for="(tile, index) in wallSeats.right.tiles"
                :key="tile.key"
@@ -2149,21 +2470,22 @@ onBeforeUnmount(() => {
                :src="tile.src"
                :alt="tile.alt"
            />
-            <span v-if="wallSeats.right.hasHu" class="wall-hu-flag">胡</span>
          </div>
-          <div v-if="wallSeats.bottom.tiles.length > 0 || wallSeats.bottom.hasHu" class="wall wall-bottom wall-live">
+          <div v-if="wallSeats.bottom.tiles.length > 0" class="wall wall-bottom wall-live">
            <template v-for="(tile, index) in wallSeats.bottom.tiles" :key="tile.key">
              <button
                  v-if="tile.tile && tile.imageType === 'hand'"
                  class="wall-live-tile-button"
                  :class="{
                    'is-group-start': index > 0 && tile.suit && wallSeats.bottom.tiles[index - 1]?.suit !== tile.suit,
+                    'is-lack-tagged': tile.showLackTag,
                  }"
                  :data-testid="`hand-tile-${tile.tile.id}`"
                  type="button"
                  :disabled="!canDiscardTiles || discardPending"
                  @click="discardTile(tile.tile)"
              >
+                <span v-if="tile.showLackTag" class="wall-live-tile-lack-tag">缺</span>
                <img
                    class="wall-live-tile"
                    :src="tile.src"
@@ -2181,9 +2503,8 @@ onBeforeUnmount(() => {
                  :alt="tile.alt"
              />
            </template>
-            <span v-if="wallSeats.bottom.hasHu" class="wall-hu-flag">胡</span>
          </div>
-          <div v-if="wallSeats.left.tiles.length > 0 || wallSeats.left.hasHu" class="wall wall-left wall-live">
+          <div v-if="wallSeats.left.tiles.length > 0" class="wall wall-left wall-live">
            <img
                v-for="(tile, index) in wallSeats.left.tiles"
                :key="tile.key"
@@ -2195,7 +2516,6 @@ onBeforeUnmount(() => {
                :src="tile.src"
                :alt="tile.alt"
            />
-            <span v-if="wallSeats.left.hasHu" class="wall-hu-flag">胡</span>
          </div>

 <!--          <div class="floating-status top">-->
--- a/src/views/HallPage.vue
+++ b/src/views/HallPage.vue
@@ -137,6 +137,7 @@ function mapRoomPlayers(room: RoomItem): RoomPlayerState[] {
        (typeof item.PlayerName === 'string' && item.PlayerName) ||
        (item.player_id === currentUserId.value ? displayName.value : undefined),
      ready: Boolean(item.ready),
+      trustee: false,
      hand: [],
      melds: [],
      outTiles: [],
--- a/src/ws/client.ts
+++ b/src/ws/client.ts
@@ -77,8 +77,10 @@ class WsClient {
        this.ws.onmessage = (event) => {
            try {
                const data = JSON.parse(event.data)
+                console.log('[WS:RECV]', data)
                this.messageHandlers.forEach(fn => fn(data))
            } catch {
+                console.log('[WS:RECV]', event.data)
                this.messageHandlers.forEach(fn => fn(event.data))
            }
        }