feat(game): 添加成都麻将游戏页面和大厅功能

- 实现 ChengduGamePage.vue 组件，包含完整的麻将游戏界面
- 实现 HallPage.vue 组件，支持房间列表展示、创建和加入功能
- 添加 mahjong API 接口用于房间管理操作
- 集成 store 状态管理和本地存储功能
- 实现 ChengduBottomActions 等游戏控制组件
- 添加 websocket 连接和游戏会话管理逻辑
- 实现游戏倒计时、结算等功能模块

src/components/chengdu/ChengduDeskZones.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { SeatKey } from '../../game/seat'
+import type { DeskSeatState } from '../../views/chengdu/types'
+
+defineProps<{
+  deskSeats: Record<SeatKey, DeskSeatState>
+}>()
+</script>
+
+<template>
+  <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>
+</template>