Update ChengduGamePage.vue

src/views/ChengduGamePage.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+<<<<<<< Updated upstream
+=======
+import deskImage from '../assets/images/desk/desk_01.png'
+>>>>>>> Stashed changes
 import type { AuthSession } from '../api/authed-request'
 import { getUserInfo } from '../api/user'
 import {
@@ -742,10 +746,32 @@ onBeforeUnmount(() => {
         <button class="ghost-btn" type="button" :disabled="leaveRoomPending" @click="backHall">
           {{ leaveRoomPending ? '退出中...' : '返回大厅' }}
         </button>
+<<<<<<< Updated upstream
+=======
+      </div>
+
+      <div class="topbar-center">
+        <div class="title-stack">
+          <p class="game-title">成都麻将实战桌</p>
+          <p class="game-subtitle">{{ roomStatusText }} · {{ currentPhaseText }}</p>
+        </div>
+>>>>>>> Stashed changes
       </div>
     </header>
 
+<<<<<<< Updated upstream
     <section class="table-panel game-table-panel">
+=======
+      <div class="topbar-right">
+        <div class="status-chip net-chip">
+          <span class="wifi-dot" :class="`is-${wsStatus}`"></span>
+          <strong>{{ networkLabel }}</strong>
+        </div>
+        <div class="status-chip clock-chip">{{ formattedClock }}</div>
+        <button class="header-btn ghost-btn" type="button" @click="connectWs">重连</button>
+      </div>
+      <section class="table-panel game-table-panel">
+>>>>>>> Stashed changes
       <div class="room-brief">
         <span class="room-brief-title">当前房间</span>
         <span class="room-brief-item">
@@ -773,7 +799,60 @@ onBeforeUnmount(() => {
           {{ startGamePending ? '开局请求中...' : '开始游戏' }}
         </button>
       </div>
+<<<<<<< Updated upstream
       <div class="mahjong-table game-mahjong-table" :class="{ active: Boolean(roomId) }">
+=======
+      </section>
+    </header>
+
+    <section class="table-shell">
+      <img class="table-desk" :src="deskImage" alt="" />
+      <div class="table-felt">
+        <div class="felt-frame outer"></div>
+        <div class="felt-frame inner"></div>
+        <div class="table-watermark">
+          <span>{{ statusRibbon }}</span>
+          <strong>指尖四川麻将</strong>
+          <small>底注 6亿 · 封顶 32倍</small>
+        </div>
+
+        <article
+          v-for="player in seatDecor"
+          :key="player.seat"
+          class="player-badge"
+          :class="[`seat-${player.seat}`, { 'is-turn': player.isTurn, offline: !player.isOnline }]"
+        >
+          <div class="avatar-card">{{ player.avatar }}</div>
+          <div class="player-meta">
+            <p>{{ player.name }}</p>
+            <strong>{{ player.money }}</strong>
+          </div>
+          <span v-if="player.dealer" class="dealer-mark">庄</span>
+          <span class="missing-mark">{{ missingSuitLabel(player.missingSuit) }}</span>
+        </article>
+
+        <div class="wall wall-top">
+          <img v-for="key in wallBacks.top" :key="key" :src="getBackImage('top')" alt="" />
+        </div>
+        <div class="wall wall-right">
+          <img v-for="key in wallBacks.right" :key="key" :src="getBackImage('right')" alt="" />
+        </div>
+        <div class="wall wall-bottom">
+          <img v-for="key in wallBacks.bottom" :key="key" :src="getBackImage('bottom')" alt="" />
+        </div>
+        <div class="wall wall-left">
+          <img v-for="key in wallBacks.left" :key="key" :src="getBackImage('left')" alt="" />
+        </div>
+
+        <div class="center-deck" :class="`state-${roomState.status}`">
+          <span class="wind north">北</span>
+          <span class="wind west">西</span>
+          <span class="wind south">南</span>
+          <span class="wind east">东</span>
+          <strong>{{ centerTimer }}</strong>
+        </div>
+
+>>>>>>> Stashed changes
         <div
           v-for="seat in seatViews"
           :key="seat.key"