feat(game): 完善成都麻将游戏页面功能

- 添加WebSocket URL构建逻辑和认证令牌刷新功能 - 实现游戏状态显示包括阶段、网络状态、时钟等信息 - 添加游戏桌面背景图片和玩家座位装饰组件 - 重构CSS样式为网格布局提升响应式体验 - 配置环境变量支持API和WebSocket代理目标设置 - 优化WebSocket连接管理增加错误处理机制 - 添加游戏桌墙体和中心计数器等UI元素 - 修复多处字符串国际化和路径处理问题
2026-03-24 13:44:53 +08:00
parent fcb9a02c68
commit a5c833c769
7 changed files with 657 additions and 42 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -1 +0,0 @@
-VITE_API_BASE_URL=http://localhost:8080/api/v1
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,4 @@
+VITE_API_BASE_URL=/api/v1
+VITE_GAME_WS_URL=/api/v1/ws
+VITE_API_PROXY_TARGET=http://127.0.0.1:19000
+VITE_WS_PROXY_TARGET=http://127.0.0.1:19000
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -39,6 +39,15 @@ function buildUrl(path: string): string {
    return normalizedPath
  }

+  if (API_BASE_URL.startsWith('/')) {
+    const basePath = API_BASE_URL.startsWith('/') ? API_BASE_URL : `/${API_BASE_URL}`
+    if (normalizedPath === basePath || normalizedPath.startsWith(`${basePath}/`)) {
+      return normalizedPath
+    }
+
+    return `${basePath}${normalizedPath}`
+  }
+
  // Avoid duplicated API prefix, e.g. base: /api/v1 + path: /api/v1/auth/login
  try {
    const baseUrl = new URL(API_BASE_URL)
--- a/src/api/authed-request.ts
+++ b/src/api/authed-request.ts
@@ -47,6 +47,15 @@ function buildUrl(path: string): string {
    return normalizedPath
  }

+  if (API_BASE_URL.startsWith('/')) {
+    const basePath = API_BASE_URL.startsWith('/') ? API_BASE_URL : `/${API_BASE_URL}`
+    if (normalizedPath === basePath || normalizedPath.startsWith(`${basePath}/`)) {
+      return normalizedPath
+    }
+
+    return `${basePath}${normalizedPath}`
+  }
+
  try {
    const baseUrl = new URL(API_BASE_URL)
    const basePath = baseUrl.pathname.replace(/\/$/, '')
--- a/src/assets/styles/global.css
+++ b/src/assets/styles/global.css
@@ -423,36 +423,78 @@ button:disabled {
 }

 .game-page {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 12px;
  width: 100%;
  max-width: none;
+  height: 100vh;
  min-height: 100vh;
  margin: 0;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
+  overflow: hidden;
 }

 .game-header {
-  flex: 0 0 auto;
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) minmax(320px, auto) minmax(280px, 1fr);
+  align-items: center;
+  min-height: 96px;
+  padding: 14px 18px;
+  border-radius: 22px;
+  border: 1px solid rgba(233, 199, 108, 0.16);
+  background:
+    linear-gradient(180deg, rgba(20, 47, 35, 0.86), rgba(8, 24, 18, 0.82)),
+    radial-gradient(circle at top, rgba(255, 219, 123, 0.08), transparent 38%);
+  backdrop-filter: blur(10px);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 16px 36px rgba(0, 0, 0, 0.28);
+}
+
+.game-header > div:first-child {
+  min-width: 0;
+}
+
+.game-header h1 {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  color: #f7e4b0;
+}
+
+.game-header .sub-title {
+  margin-top: 6px;
+  color: #d7eadf;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .game-table-panel {
-  flex: 1 1 auto;
  display: flex;
-  flex-direction: column;
-  min-height: 0;
+  align-items: center;
+  min-height: 60px;
+  padding: 10px 14px;
+  overflow: hidden;
 }

 .room-brief {
+  width: 100%;
  display: flex;
  align-items: center;
+  justify-content: space-between;
  gap: 10px;
-  margin-bottom: 10px;
-  padding: 8px 10px;
+  margin-bottom: 0;
+  padding: 4px 2px;
  border-radius: 8px;
-  border: 1px solid rgba(194, 226, 208, 0.2);
-  background: rgba(7, 28, 20, 0.55);
+  border: 0;
+  background: transparent;
+  overflow: hidden;
 }

 .room-brief-title {
@@ -495,6 +537,345 @@ button:disabled {
  text-overflow: ellipsis;
 }

+.topbar-center {
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+}
+
+.title-stack {
+  padding: 10px 18px;
+  border-radius: 18px;
+  text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(7, 24, 17, 0.36);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.game-title {
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: 2px;
+  color: #f6edd5;
+}
+
+.game-subtitle {
+  margin-top: 6px;
+  color: #c4ddd0;
+  font-size: 13px;
+}
+
+.topbar-right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+}
+
+.status-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(198, 223, 209, 0.18);
+  background: rgba(5, 24, 17, 0.42);
+  font-size: 13px;
+}
+
+.wifi-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #9a6b6b;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
+}
+
+.wifi-dot.is-connected {
+  background: #62d78f;
+}
+
+.wifi-dot.is-connecting {
+  background: #f0c46b;
+}
+
+.wifi-dot.is-disconnected {
+  background: #d86f6f;
+}
+
+.header-btn {
+  height: 36px;
+}
+
+.table-shell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 12px;
+  min-height: 0;
+  overflow: hidden;
+  align-items: stretch;
+}
+
+.table-desk {
+  display: block;
+  grid-column: 1;
+  grid-row: 1;
+  width: 100%;
+  height: 100%;
+  border-radius: 28px;
+  object-fit: cover;
+  object-position: center;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
+    0 20px 42px rgba(0, 0, 0, 0.32);
+}
+
+.table-felt {
+  grid-column: 1;
+  grid-row: 1;
+  position: relative;
+  min-height: 0;
+  height: 100%;
+  border-radius: 28px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background:
+    radial-gradient(circle at center, rgba(30, 126, 70, 0.12), transparent 42%),
+    linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.12));
+  overflow: hidden;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+.table-felt::before {
+  content: '';
+  position: absolute;
+  inset: 22px;
+  border-radius: 24px;
+  background: radial-gradient(circle at center, rgba(35, 121, 68, 0.14), transparent 55%);
+  pointer-events: none;
+}
+
+.felt-frame {
+  position: absolute;
+  inset: 20px;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  pointer-events: none;
+}
+
+.felt-frame.inner {
+  inset: 38px;
+  border-color: rgba(255, 255, 255, 0.06);
+  border-style: solid;
+}
+
+.table-watermark {
+  position: absolute;
+  left: 50%;
+  top: 24px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  color: rgba(244, 240, 220, 0.82);
+  text-align: center;
+  pointer-events: none;
+}
+
+.table-watermark span {
+  font-size: 12px;
+  color: #f7e4b0;
+}
+
+.table-watermark strong {
+  font-size: 26px;
+  letter-spacing: 2px;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.table-watermark small {
+  font-size: 12px;
+  color: #bdd8ca;
+}
+
+.player-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 148px;
+  padding: 8px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(244, 222, 163, 0.24);
+  background: rgba(8, 27, 20, 0.72);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
+}
+
+.player-badge.seat-top {
+  top: 76px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.player-badge.seat-right {
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.player-badge.seat-bottom {
+  bottom: 90px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.player-badge.seat-left {
+  left: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.player-badge.is-turn {
+  border-color: rgba(244, 222, 163, 0.72);
+}
+
+.player-badge.offline {
+  opacity: 0.55;
+}
+
+.avatar-card {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  background: linear-gradient(145deg, #ecd995, #d3b767);
+  color: #1c2d23;
+  font-weight: 800;
+}
+
+.player-meta p {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.player-meta strong {
+  font-size: 13px;
+  color: #f7e4b0;
+}
+
+.dealer-mark,
+.missing-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+
+.dealer-mark {
+  background: rgba(236, 188, 84, 0.88);
+  color: #1c2d23;
+}
+
+.missing-mark {
+  margin-left: auto;
+  background: rgba(255, 255, 255, 0.08);
+  color: #d6eadf;
+}
+
+.wall {
+  position: absolute;
+  display: flex;
+  gap: 2px;
+  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.22));
+}
+
+.wall img {
+  display: block;
+  object-fit: contain;
+}
+
+.wall-top,
+.wall-bottom {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.wall-left,
+.wall-right {
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.wall-top {
+  top: 154px;
+}
+
+.wall-top img,
+.wall-bottom img {
+  width: 24px;
+  height: 36px;
+}
+
+.wall-right {
+  right: 132px;
+}
+
+.wall-left {
+  left: 132px;
+}
+
+.wall-left img,
+.wall-right img {
+  width: 36px;
+  height: 24px;
+}
+
+.wall-bottom {
+  bottom: 176px;
+}
+
+.center-deck {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: grid;
+  grid-template-columns: repeat(2, 42px);
+  gap: 6px;
+  align-items: center;
+  justify-items: center;
+  padding: 12px 16px;
+  border-radius: 18px;
+  background: rgba(8, 27, 20, 0.82);
+  border: 1px solid rgba(244, 222, 163, 0.28);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
+}
+
+.center-deck strong {
+  grid-column: 1 / -1;
+  font-size: 16px;
+  color: #f7e4b0;
+}
+
+.wind {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.08);
+  font-weight: 700;
+}
+
 .table-tip {
  margin-top: 4px;
  color: #c1dfcf;
@@ -614,11 +995,17 @@ button:disabled {
 }

 .ws-panel {
-  margin-top: 10px;
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  margin-top: 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(176, 216, 194, 0.22);
  background: rgba(5, 24, 17, 0.58);
+  overflow: hidden;
 }

 .ws-panel-head {
@@ -662,7 +1049,8 @@ button:disabled {

 .ws-log {
  margin-top: 8px;
-  max-height: 140px;
+  flex: 1 1 auto;
+  min-height: 0;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
@@ -802,6 +1190,31 @@ button:disabled {
    align-items: flex-start;
  }

+  .game-header {
+    grid-template-columns: 1fr;
+    justify-items: stretch;
+  }
+
+  .topbar-center,
+  .topbar-right {
+    justify-content: flex-start;
+  }
+
+  .table-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .table-desk,
+  .table-felt,
+  .ws-panel {
+    grid-column: auto;
+    grid-row: auto;
+  }
+
+  .ws-panel {
+    min-height: 180px;
+  }
+
  .header-actions {
    width: 100%;
    display: grid;
@@ -824,6 +1237,9 @@ button:disabled {
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
  }

  .game-mahjong-table {
--- a/src/views/ChengduGamePage.vue
+++ b/src/views/ChengduGamePage.vue
@@ -1,8 +1,13 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import deskImage from '../assets/images/desk/desk_01.png'
+import topBackImage from '../assets/images/tiles/top/tbgs_2.png'
+import rightBackImage from '../assets/images/tiles/right/tbgs_1.png'
+import bottomBackImage from '../assets/images/tiles/bottom/tdbgs_4.png'
+import leftBackImage from '../assets/images/tiles/left/tbgs_3.png'
 import type { AuthSession } from '../api/authed-request'
+import { refreshAccessToken } from '../api/auth'
 import { getUserInfo } from '../api/user'
 import {
  DEFAULT_MAX_PLAYERS,
@@ -29,8 +34,10 @@ const lastStartRequestId = ref('')
 const leaveRoomPending = ref(false)
 const lastLeaveRoomRequestId = ref('')
 const leaveHallAfterAck = ref(false)
+const now = ref(Date.now())
+let clockTimer: number | null = null

-const WS_BASE_URL = import.meta.env.VITE_GAME_WS_URL ?? 'ws://127.0.0.1:8080/ws'
+const WS_BASE_URL = import.meta.env.VITE_GAME_WS_URL ?? '/api/v1/ws'

 type SeatKey = 'top' | 'right' | 'bottom' | 'left'

@@ -153,6 +160,116 @@ const roomStatusText = computed(() => {
  return '等待中'
 })

+const currentPhaseText = computed(() => {
+  const phase = roomState.value.game?.state?.phase?.trim()
+  if (!phase) {
+    return roomState.value.status === 'playing' ? '牌局进行中' : '未开局'
+  }
+
+  const phaseLabelMap: Record<string, string> = {
+    dealing: '发牌',
+    draw: '摸牌',
+    discard: '出牌',
+    action: '响应',
+    settle: '结算',
+    finished: '已结束',
+  }
+
+  return phaseLabelMap[phase] ?? phase
+})
+
+const networkLabel = computed(() => {
+  if (wsStatus.value === 'connected') {
+    return '已连接'
+  }
+  if (wsStatus.value === 'connecting') {
+    return '连接中'
+  }
+  return '未连接'
+})
+
+const formattedClock = computed(() => {
+  return new Date(now.value).toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  })
+})
+
+const statusRibbon = computed(() => {
+  return roomState.value.game?.rule?.name || currentPhaseText.value
+})
+
+const wallBacks = computed<Record<SeatKey, string[]>>(() => {
+  const wallSize = roomState.value.game?.state?.wall.length ?? 0
+  const perSide = Math.max(6, Math.ceil((wallSize || 48) / 4 / 2))
+
+  return {
+    top: Array.from({ length: perSide }, (_, index) => `top-${index}`),
+    right: Array.from({ length: perSide }, (_, index) => `right-${index}`),
+    bottom: Array.from({ length: perSide }, (_, index) => `bottom-${index}`),
+    left: Array.from({ length: perSide }, (_, index) => `left-${index}`),
+  }
+})
+
+const seatDecor = computed(() => {
+  const scoreMap = roomState.value.game?.state?.scores ?? {}
+  const dealerIndex = roomState.value.game?.state?.dealerIndex ?? -1
+
+  return seatViews.value.map((seat, index) => {
+    const playerId = seat.player?.playerId ?? ''
+    const score = playerId ? scoreMap[playerId] : undefined
+
+    return {
+      seat: seat.key,
+      avatar: seat.isSelf ? '我' : String(index + 1),
+      name: seat.player ? (seat.isSelf ? '你' : playerId) : '空位',
+      money: typeof score === 'number' ? `${score}` : '--',
+      dealer: seat.player?.index === dealerIndex,
+      isTurn: seat.isTurn,
+      isOnline: Boolean(seat.player),
+      missingSuit: null as string | null,
+    }
+  })
+})
+
+const centerTimer = computed(() => {
+  const wallLeft = roomState.value.game?.state?.wall.length
+  if (typeof wallLeft === 'number' && Number.isFinite(wallLeft)) {
+    return `余牌 ${wallLeft}`
+  }
+
+  return roomState.value.playerCount > 0
+    ? `${roomState.value.playerCount}/${roomState.value.maxPlayers} 人`
+    : '等待中'
+})
+
+function missingSuitLabel(value: string | null | undefined): string {
+  if (!value) {
+    return '待定'
+  }
+
+  const suitMap: Record<string, string> = {
+    wan: '万',
+    tong: '筒',
+    tiao: '条',
+  }
+
+  return suitMap[value] ?? value
+}
+
+function getBackImage(seat: SeatKey): string {
+  const imageMap: Record<SeatKey, string> = {
+    top: topBackImage,
+    right: rightBackImage,
+    bottom: bottomBackImage,
+    left: leftBackImage,
+  }
+
+  return imageMap[seat]
+}
+
 function backHall(): void {
  if (leaveRoomPending.value) {
    return
@@ -162,7 +279,7 @@ function backHall(): void {
  const sent = sendLeaveRoom()
  if (!sent) {
    leaveHallAfterAck.value = false
-    pushWsMessage('[client] 退出房间失败：未发送请求')
+    pushWsMessage('[client] Leave room request was not sent')
  }
 }

@@ -255,7 +372,41 @@ async function ensureCurrentUserId(): Promise<void> {
    }
    writeStoredAuth(auth.value)
  } catch {
-    wsError.value = '获取当前用户ID失败，部分操作可能不可用'
+    wsError.value = '获取当前用户 ID 失败，部分操作可能不可用'
+  }
+}
+
+async function ensureWsAuth(): Promise<string | null> {
+  const currentAuth = auth.value
+  if (!currentAuth?.token) {
+    return null
+  }
+
+  if (!currentAuth.refreshToken) {
+    return currentAuth.token
+  }
+
+  try {
+    const refreshed = await refreshAccessToken({
+      token: currentAuth.token,
+      tokenType: currentAuth.tokenType,
+      refreshToken: currentAuth.refreshToken,
+    })
+
+    const nextAuth = {
+      ...currentAuth,
+      token: refreshed.token,
+      tokenType: refreshed.tokenType ?? currentAuth.tokenType,
+      refreshToken: refreshed.refreshToken ?? currentAuth.refreshToken,
+      expiresIn: refreshed.expiresIn,
+      user: refreshed.user ?? currentAuth.user,
+    }
+
+    auth.value = nextAuth
+    writeStoredAuth(nextAuth)
+    return nextAuth.token
+  } catch {
+    return currentAuth.token
  }
 }

@@ -588,11 +739,11 @@ function sendLeaveRoom(): boolean {
  const sender = currentUserId.value
  const targetRoomId = roomState.value.id || roomId.value
  if (!sender) {
-    wsError.value = '缺少当前用户ID，无法退出房间'
+    wsError.value = '缺少当前用户 ID，无法退出房间'
    return false
  }
  if (!targetRoomId) {
-    wsError.value = '缺少房间ID，无法退出房间'
+    wsError.value = '缺少房间 ID，无法退出房间'
    return false
  }

@@ -616,9 +767,9 @@ function sendLeaveRoom(): boolean {
  return true
 }

-function connectWs(): void {
+async function connectWs(): Promise<void> {
  wsError.value = ''
-  const token = auth.value?.token
+  const token = await ensureWsAuth()
  if (!token) {
    wsError.value = '缺少 token，无法建立 WebSocket 连接'
    return
@@ -627,7 +778,7 @@ function connectWs(): void {
  disconnectWs()
  wsStatus.value = 'connecting'

-  const url = `${WS_BASE_URL}?token=${encodeURIComponent(token)}`
+  const url = buildWsUrl(token)
  const socket = new WebSocket(url)
  ws.value = socket

@@ -641,7 +792,7 @@ function connectWs(): void {
    logWsReceive('文本消息', event.data)
    try {
      const parsed = JSON.parse(event.data)
-      logWsReceive('JSON消息', parsed)
+      logWsReceive('JSON 消息', parsed)

      pushWsMessage(`[server] ${JSON.stringify(parsed, null, 2)}`)
    } catch {
@@ -652,8 +803,8 @@ function connectWs(): void {
    return
  }

-  logWsReceive('二进制消息')
-  pushWsMessage('[binary] 收到二进制消息')
+  logWsReceive('binary message')
+  pushWsMessage('[binary] message received')
  }

  socket.onerror = () => {
@@ -668,12 +819,24 @@ function connectWs(): void {
      lastLeaveRoomRequestId.value = ''
      leaveHallAfterAck.value = false
      wsError.value = '连接已断开，未收到退出房间确认'
-      pushWsMessage('[client] 连接断开：退出房间请求未确认')
+      pushWsMessage('[client] 连接断开，退出房间请求未确认')
    }
    pushWsMessage('WebSocket 已断开')
  }
 }

+function buildWsUrl(token: string): string {
+  const baseUrl = /^wss?:\/\//.test(WS_BASE_URL)
+    ? new URL(WS_BASE_URL)
+    : new URL(
+        WS_BASE_URL.startsWith('/') ? WS_BASE_URL : `/${WS_BASE_URL}`,
+        `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`,
+      )
+
+  baseUrl.searchParams.set('token', token)
+  return baseUrl.toString()
+}
+
 watch(
  roomId,
  (nextRoomId) => {
@@ -722,11 +885,18 @@ watch(
 )

 onMounted(async () => {
+  clockTimer = window.setInterval(() => {
+    now.value = Date.now()
+  }, 1000)
  await ensureCurrentUserId()
  connectWs()
 })

 onBeforeUnmount(() => {
+  if (clockTimer !== null) {
+    window.clearInterval(clockTimer)
+    clockTimer = null
+  }
  disconnectWs()
  destroyActiveRoomState()
 })
@@ -769,7 +939,7 @@ onBeforeUnmount(() => {
          <strong>{{ roomState.name || roomName || '未命名房间' }}</strong>
        </span>
        <span class="room-brief-item room-brief-id">
-          <em>room_id：</em>
+          <em>room_id:</em>
          <strong>{{ roomId || '未选择房间' }}</strong>
        </span>
        <span class="room-brief-item">
@@ -799,7 +969,7 @@ onBeforeUnmount(() => {
        <div class="table-watermark">
          <span>{{ statusRibbon }}</span>
          <strong>指尖四川麻将</strong>
-          <small>底注 6亿 · 封顶 32倍</small>
+          <small>底注 6 番 · 封顶 32 倍</small>
        </div>

        <article
@@ -851,8 +1021,8 @@ onBeforeUnmount(() => {
          <span v-if="seat.isTurn" class="turn-indicator">出牌中</span>
        </div>
        <div class="table-center">
-          <p>Chengdu Mahjong</p>
-          <p>{{ roomState.id || roomId || 'Waiting...' }}</p>
+          <p>成都麻将</p>
+          <p>{{ roomState.id || roomId || '等待中...' }}</p>
        </div>
      </div>

--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,18 +1,26 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'

-export default defineConfig({
-  plugins: [vue()],
-  server: {
-    proxy: {
-      '/api/v1': {
-        target: 'http://127.0.0.1:19000',
-        changeOrigin: true,
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  const apiProxyTarget = (env.VITE_API_PROXY_TARGET || 'http://127.0.0.1:19000').replace(/\/$/, '')
+  const wsProxyTarget = (env.VITE_WS_PROXY_TARGET || apiProxyTarget).replace(/\/$/, '')
+
+  return {
+    plugins: [vue()],
+    server: {
+      proxy: {
+        '/api/v1/ws': {
+          target: wsProxyTarget,
+          changeOrigin: true,
+          ws: true,
+          rewriteWsOrigin: true,
+        },
+        '/api/v1': {
+          target: apiProxyTarget,
+          changeOrigin: true,
+        },
      },
-      '/api/v1/ws': {
-        target: 'ws://127.0.0.1:19000',
-        ws: true,
-      }
-    }
+    },
  }
-})
+})
				`@@ -1 +0,0 @@`
				`VITE_API_BASE_URL=http://localhost:8080/api/v1`