Merge branch 'test' into feat-prac

2026-05-28 09:46:54 +08:00
parent 18afba01ec d932ce3dea
commit e6d00e7ea9
77 changed files with 7118 additions and 398 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,7 @@ node_modules
 .github
 openspec
 CLAUDE.md
-dosc
+docs
 .DS_Store
 dist
 *.local
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
    "@dcloudio/uni-quickapp-webview": "3.0.0-4060620250520001",
    "@dcloudio/uni-ui": "^1.5.11",
    "pinia": "2.0.36",
+    "pinia-plugin-persistedstate": "3.2.1",
    "vue": "^3.4.21",
    "vue-i18n": "^9.1.9"
  },
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,7 +21,8 @@
 	} = storeToRefs(store);
 	const {
 		updateUser,
-		updateOnline
+		updateOnline,
+		clearSessionState
 	} = store;

 	watch(
@@ -46,6 +47,17 @@
 		updateUser(value);
 	}

+	function onSessionKickedOut() {
+		const env = uni.getAccountInfoSync().miniProgram.envVersion;
+		uni.removeStorageSync(`${env}_token`);
+		clearSessionState();
+		uni.showModal({
+			title: "提示",
+			content: "账号已在其他设备登录",
+			showCancel: false,
+		});
+	}
+
 	async function emitUpdateOnline() {
 		const data = await getDeviceBatteryAPI();
 		updateOnline(data.online);
@@ -65,6 +77,7 @@
 	onShow(() => {
 		uni.$on("update-user", emitUpdateUser);
 		uni.$on("update-online", emitUpdateOnline);
+		uni.$on("session-kicked-out", onSessionKickedOut);
 		const token = uni.getStorageSync(
 			`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
 		);
@@ -77,6 +90,7 @@
 	onHide(() => {
 		uni.$off("update-user", emitUpdateUser);
 		uni.$off("update-online", emitUpdateOnline);
+		uni.$off("session-kicked-out", onSessionKickedOut);
 		websocket.closeWebSocket();
 	});
 </script>
@@ -289,4 +303,4 @@
 		font-style: normal;
 		font-display: swap;
 	}
-</style>
+</style>
--- a/src/apis.js
+++ b/src/apis.js
@@ -6,7 +6,7 @@ try {

    switch (envVersion) {
        case "develop": // 开发版
-            // BASE_URL = "http://localhost:8000/api/shoot";
+            // BASE_URL = "http://192.168.1.30:8000/api/shoot";
            BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
            break;
        case "trial": // 体验版
@@ -42,10 +42,13 @@ function request(method, url, data = {}) {
                    if (code === 0) resolve(data);
                    else if (message) {
                        if (message.indexOf("登录身份已失效") !== -1) {
+                            console.log('1111111111111111111,token失效')
                            uni.removeStorageSync(
                                `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
                            );
                            uni.$emit("update-user");
+                            reject({ type: "AUTH_INVALID", message });
+                            return;
                        }
                        if (message === "ROOM_FULL") {
                            resolve({full: true});
--- a/src/audioManager.js
+++ b/src/audioManager.js
@@ -1,4 +1,11 @@
+export const AUDIO_INTERRUPTION_BEGIN_EVENT = "audio-interruption-begin";
+export const AUDIO_INTERRUPTION_END_EVENT = "audio-interruption-end";
+
 export const audioFils = {
+  tententen: "https://static.shelingxingqiu.com/shootmini/static/audio/tententen.mp3",
+  点击按钮: "https://static.shelingxingqiu.com/shootmini/static/audio/%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE.mp3",
+  "20CM全环靶": "https://static.shelingxingqiu.com/shootmini/static/audio/20CM%E5%85%A8%E7%8E%AF%E9%9D%B6-%E6%97%A0%E6%95%88.mp3",
+  "40CM全环靶": "https://static.shelingxingqiu.com/shootmini/static/audio/40CM%E5%85%A8%E7%8E%AF%E9%9D%B6-%E6%97%A0%E6%95%88.mp3",
  // 激光已校准:
  //   "https://static.shelingxingqiu.com/attachment/2025-10-29/ddupaur1vdkyhzaqdc.mp3",
  胜利: "https://static.shelingxingqiu.com/attachment/2025-09-17/dcuo9yjp0kt5msvmvd.mp3",
@@ -36,7 +43,7 @@ export const audioFils = {
  请开始射击:
    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutzdrl5u0iromqhf.mp3",
  射击无效:
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutya55ufiiw8oo55.mp3",
+    "https://static.shelingxingqiu.com/shootmini/static/audio/%E5%B0%84%E7%AE%AD%E6%97%A0%E6%95%88%E6%A3%80%E6%9F%A5%E8%B7%9D%E7%A6%BB%E5%92%8C%E9%9D%B6%E7%BA%B8.mp3",
  未上靶:
    "https://static.shelingxingqiu.com/attachment/2025-11-12/de6n45o3tsm1v4unam.mp3",
  "1环":
@@ -93,7 +100,7 @@ function debugLog(...args) {
  const envVersion = accountInfo.miniProgram.envVersion;

  // 只在体验版打印日志，正式版(release)和开发版(develop)不打印
-  if (envVersion === "trial") {
+  if (envVersion === "trial" || envVersion === "develop") {
    console.log(...args);
  }
 }
@@ -123,6 +130,7 @@ class AudioManager {
    // 防重复播放保护
    this.lastPlayKey = null;
    this.lastPlayAt = 0;
+    this.isInterrupted = false;

    // 静音开关
    this.isMuted = false;
@@ -137,10 +145,41 @@ class AudioManager {
    this.localFileCache = uni.getStorageSync("audio_local_files") || {};
    // 启动时自动清理过期的缓存文件（URL 已不在 audioFils 中的文件）
    this.cleanObsoleteCache();
+    this.bindAudioInterruptionEvents();

    this.initAudios();
  }

+  bindAudioInterruptionEvents() {
+    if (this._audioInterruptionBound) return;
+    this._audioInterruptionBound = true;
+
+    const begin = () => {
+      if (this.isInterrupted) return;
+      this.isInterrupted = true;
+      this.stopAll();
+      this.isSequenceRunning = false;
+      this.sequenceQueue = [];
+      this.sequenceIndex = 0;
+      this.pendingPlayKey = null;
+      uni.$emit(AUDIO_INTERRUPTION_BEGIN_EVENT);
+    };
+
+    const end = () => {
+      if (!this.isInterrupted) return;
+      this.isInterrupted = false;
+      uni.$emit(AUDIO_INTERRUPTION_END_EVENT);
+      void this.reloadAll();
+    };
+
+    if (typeof uni?.onAudioInterruptionBegin === "function") {
+      uni.onAudioInterruptionBegin(begin);
+    }
+    if (typeof uni?.onAudioInterruptionEnd === "function") {
+      uni.onAudioInterruptionEnd(end);
+    }
+  }
+
  // 清理不再使用的缓存文件
  cleanObsoleteCache() {
    const activeUrls = new Set(Object.values(audioFils));
@@ -457,6 +496,10 @@ class AudioManager {

  // 播放指定音频或音频数组（数组则按顺序连续播放）
  play(input, interrupt = true) {
+    if (this.isInterrupted) {
+      debugLog("音频处理中断状态，忽略播放请求");
+      return;
+    }
    // 统一规范化为队列
    let queue = [];
    if (Array.isArray(input)) {
@@ -510,6 +553,10 @@ class AudioManager {

  // 内部方法：播放单个 key
  _playSingle(key, forceStopAll = false) {
+    if (this.isInterrupted) {
+      debugLog(`音频处理中断状态，跳过播放: ${key}`);
+      return;
+    }
    // 200ms 内的同 key 重复播放直接忽略，避免“比比赛开始”这类重复首音
    const now = Date.now();
    if (this.lastPlayKey === key && now - this.lastPlayAt < 250) {
@@ -553,7 +600,13 @@ class AudioManager {
      // 显式授权播放并立即播放
      this.allowPlayMap.set(key, true);

-      audio.play();
+      try {
+        audio.play();
+      } catch (err) {
+        this.allowPlayMap.set(key, false);
+        debugLog(`音频 ${key} 播放调用失败`, err?.errMsg || err);
+        return;
+      }
      this.currentPlayingKey = key;
      this.lastPlayKey = key;
      this.lastPlayAt = Date.now();
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -31,7 +31,7 @@ function handleTabClick(index) {
      v-for="(tab, index) in tabs"
      :key="index"
      class="tab-item"
-      @click="handleTabClick(index)"
+      @click="$clickSound(() => handleTabClick(index))"
      :style="{
        width: index === 1 ? '36%' : '20%',
      }"
--- a/src/components/BackToGame.vue
+++ b/src/components/BackToGame.vue
@@ -19,8 +19,12 @@ const props = defineProps({
 });
 const loading = ref(false);

+/** 统一获取当前环境 token，用于守卫：无有效 token 时不发起接口请求 */
+const getToken = () =>
+  uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
+
 onShow(async () => {
-  if (user.value.id) {
+  if (user.value.id && getToken()) {
    setTimeout(async () => {
      const state = await getUserGameState();
      updateGame(state.gaming, state.roomId);
@@ -33,7 +37,8 @@ watch(
  async (value) => {
    if (!value.id) {
      updateGame(false, "");
-    } else {
+    } else if (getToken()) {
+      // 有有效 token 时才查询在局状态，避免 token 失效时反复发起无效请求
      const state = await getUserGameState();
      updateGame(state.gaming, state.roomId);
    }
@@ -49,7 +54,7 @@ const onClick = debounce(async () => {
      await uni.$checkAudio();
      if (result.mode <= 3) {
        uni.navigateTo({
-          url: `/pages/team-battle?battleId=${result.matchId}`,
+          url: `/pages/team-battle/index?battleId=${result.matchId}`,
        });
      } else {
        uni.navigateTo({
--- a/src/components/BattleHeader.vue
+++ b/src/components/BattleHeader.vue
@@ -80,28 +80,35 @@ defineProps({
        />
      </view>
    </view>
-    <view
+    <!-- 大乱斗玩家列表：scroll-view 作为横向滚动容器 -->
+    <!-- 小程序中 scroll-view 不支持直接 display:flex，需内部 wrapper view 承载 flex 布局 -->
+    <!-- 仅当玩家 >5 人（内容溢出宽度）时才阻止冒泡，防止与外层 swiper 切换 tab 的手势冲突 -->
+    <scroll-view
      v-if="players.length"
      class="players-melee"
+      scroll-x
+      @touchmove="(e) => players.length > 5 && e.stopPropagation()"
      :style="{ paddingTop: showHeader ? '15px' : '0' }"
    >
-      <view
-        v-for="(player, index) in players"
-        :key="index"
-        :style="{
-          backgroundColor: meleeAvatarColors[index],
-          width: `${Math.max(100 / players.length, 18)}vw`,
-        }"
-      >
-        <Avatar
-          :src="player.avatar"
-          :rankLvl="showRank ? undefined : player.rankLvl"
-          :size="40"
-          :rank="showRank ? index + 1 : 0"
-        />
-        <text class="player-name">{{ player.name }}</text>
+      <view class="players-melee-inner">
+        <view
+          v-for="(player, index) in players"
+          :key="index"
+          :style="{
+            backgroundColor: meleeAvatarColors[index],
+            width: `${Math.max(100 / players.length, 18)}vw`,
+          }"
+        >
+          <Avatar
+            :src="player.avatar"
+            :rankLvl="showRank ? undefined : player.rankLvl"
+            :size="40"
+            :rank="showRank ? index + 1 : 0"
+          />
+          <text class="player-name">{{ player.name }}</text>
+        </view>
      </view>
-    </view>
+    </scroll-view>
  </view>
 </template>

@@ -144,17 +151,21 @@ defineProps({
  justify-content: center;
 }
 .players-melee {
-  display: flex;
  height: 80px;
  width: 100%;
-  overflow-x: auto;
 }
 .players-melee::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
 }
-.players-melee > view {
+/* 小程序 scroll-view 不支持直接 flex，通过内层 wrapper 承载横向排列 */
+.players-melee-inner {
+  display: flex;
+  height: 100%;
+  flex-wrap: nowrap;
+}
+.players-melee-inner > view {
  display: flex;
  flex-direction: column;
  align-items: center;
--- a/src/components/BowTarget.vue
+++ b/src/components/BowTarget.vue
@@ -34,6 +34,18 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  targetRadius: {
+    type: Number,
+    default: 20,
+  },
+  hitRadiusPx: {
+    type: Number,
+    default: 2,
+  },
+  zoomHitRadiusPx: {
+    type: Number,
+    default: 5,
+  },
 });

 const pMode = ref(true);
@@ -80,13 +92,79 @@ watch(
  }
 );

-function calcRealX(num, offset = 3.4) {
-  const len = 20.4 + num;
-  return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
+const safeTargetRadius = computed(() => {
+  const radius = Number(props.targetRadius);
+  return Number.isFinite(radius) && radius > 0 ? radius : 20;
+});
+
+const currentHitRadiusPx = computed(() => {
+  const radius = Number(
+    pMode.value ? props.zoomHitRadiusPx : props.hitRadiusPx
+  );
+  return Number.isFinite(radius) && radius >= 0 ? radius : 0;
+});
+
+function getShotPoint(shot, fallbackCenter = false) {
+  const x = Number(shot?.x);
+  const y = Number(shot?.y);
+  if (Number.isFinite(x) && Number.isFinite(y)) return { x, y };
+  return fallbackCenter ? { x: 0, y: 0 } : null;
 }
-function calcRealY(num, offset = 3.4) {
-  const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
-  return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
+
+function getPointDirection(point) {
+  if (!point) return null;
+  const distance = Math.sqrt(point.x * point.x + point.y * point.y);
+  if (distance === 0) return null;
+
+  return {
+    x: point.x / distance,
+    y: point.y / distance,
+  };
+}
+
+function formatPxOffset(value) {
+  if (!value) return "";
+  const operator = value > 0 ? "+" : "-";
+  return ` ${operator} ${Math.abs(value)}px`;
+}
+
+function formatTargetPosition(percent, offset) {
+  const pxOffset = formatPxOffset(offset);
+  return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
+}
+
+function getTargetPositionStyle(point, offsetPx = 0) {
+  if (!point) return { display: "none" };
+
+  const radius = safeTargetRadius.value;
+  const diameter = radius * 2;
+  const direction = getPointDirection(point);
+  const xOffset = direction ? direction.x * offsetPx : 0;
+  const yOffset = direction ? -direction.y * offsetPx : 0;
+  const leftPercent = ((point.x + radius) / diameter) * 100;
+  const topPercent = ((radius - point.y) / diameter) * 100;
+
+  return {
+    left: formatTargetPosition(leftPercent, xOffset),
+    top: formatTargetPosition(topPercent, yOffset),
+    transform: "translate(-50%, -50%)",
+  };
+}
+
+function getHitStyle(shot) {
+  const radius = currentHitRadiusPx.value;
+  const point = getShotPoint(shot);
+
+  return {
+    ...getTargetPositionStyle(point, radius),
+    width: `${radius * 2}px`,
+    height: `${radius * 2}px`,
+  };
+}
+
+function getTipStyle(shot) {
+  const point = getShotPoint(shot, true);
+  return getTargetPositionStyle(point, shot?.ring ? currentHitRadiusPx.value : 0);
 }
 const simulShoot = async () => {
  if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
@@ -169,20 +247,14 @@ onBeforeUnmount(() => {
      <view
        v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
        class="e-value fade-in-out"
-        :style="{
-          left: calcRealX(latestOne.ring ? latestOne.x : 0, 20),
-          top: calcRealY(latestOne.ring ? latestOne.y : 0, 40),
-        }"
+        :style="getTipStyle(latestOne)"
      >
        经验 +1
      </view>
      <view
        v-if="latestOne"
        class="round-tip fade-in-out"
-        :style="{
-          left: calcRealX(latestOne.ring ? latestOne.x : 0, 28),
-          top: calcRealY(latestOne.ring ? latestOne.y : 0, 28),
-        }"
+        :style="getTipStyle(latestOne)"
        >{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
        }}<text v-if="latestOne.ring">环</text>
      </view>
@@ -193,20 +265,14 @@ onBeforeUnmount(() => {
          user.id === bluelatestOne.playerId
        "
        class="e-value fade-in-out"
-        :style="{
-          left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 20),
-          top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 40),
-        }"
+        :style="getTipStyle(bluelatestOne)"
      >
        经验 +1
      </view>
      <view
        v-if="bluelatestOne"
        class="round-tip fade-in-out"
-        :style="{
-          left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 28),
-          top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 28),
-        }"
+        :style="getTipStyle(bluelatestOne)"
        >{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
        }}<text v-if="bluelatestOne.ring">环</text></view
      >
@@ -217,8 +283,7 @@ onBeforeUnmount(() => {
            index === scores.length - 1 && latestOne ? 'pump-in' : ''
          }`"
          :style="{
-            left: calcRealX(bow.x, pMode ? '3.4' : '2'),
-            top: calcRealY(bow.y, pMode ? '3.4' : '2'),
+            ...getHitStyle(bow),
            backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
          }"
          ><text v-if="pMode">{{ index + 1 }}</text></view
@@ -231,8 +296,7 @@ onBeforeUnmount(() => {
            index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
          }`"
          :style="{
-            left: calcRealX(bow.x, pMode ? '3.4' : '2'),
-            top: calcRealY(bow.y, pMode ? '3.4' : '2'),
+            ...getHitStyle(bow),
            backgroundColor: '#1840FF',
          }"
        >
@@ -302,21 +366,11 @@ onBeforeUnmount(() => {
  z-index: 1;
  color: #fff;
  transition: all 0.3s ease;
-}
-.s-point {
-  width: 4px;
-  height: 4px;
-  min-width: 4px;
-  min-height: 4px;
+  box-sizing: border-box;
 }
 .b-point {
-  width: 10px;
-  height: 10px;
-  min-width: 10px;
-  min-height: 10px;
  border: 1px solid #fff;
  z-index: 1;
-  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
@@ -332,6 +386,19 @@ onBeforeUnmount(() => {
  transform: translate(-50%, -50%);*/
  margin-top: 2rpx;
 }
+@keyframes target-pump-in {
+  from {
+    transform: translate(-50%, -50%) scale(2);
+  }
+
+  to {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+.hit.pump-in {
+  animation: target-pump-in 0.3s ease-out forwards;
+  transform-origin: center center;
+}
 .header {
  width: 100%;
  display: flex;
--- a/src/components/Container.vue
+++ b/src/components/Container.vue
@@ -116,7 +116,7 @@ const backToGame = debounce(async () => {
      await checkAudioProgress();
      if (result.mode <= 3) {
        uni.navigateTo({
-          url: `/pages/team-battle?battleId=${result.matchId}`,
+          url: `/pages/team-battle/index?battleId=${result.matchId}`,
        });
      } else {
        uni.navigateTo({
@@ -206,7 +206,7 @@ const goCalibration = async () => {
          <button hover-class="none" @click="() => (showHint = false)">
            取消
          </button>
-          <button hover-class="none" @click="cancelMatching">确认</button>
+          <button hover-class="none" @click="$clickSound(cancelMatching)">确认</button>
        </view>
      </view>
      <view v-if="hintType === 4" class="tip-content">
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -17,12 +17,19 @@ const props = defineProps({
  },
 });

-const battleMode = ref(1);
-const targetMode = ref(1);
+/** 对战模式：0=未选 1=1v1 2=乱斗 3=2v2 4=3v3 */
+const battleMode = ref(0);
+/** 靶纸尺寸：0=未选 1=20cm 2=40cm */
+const targetMode = ref(0);
 const loading = ref(false);
 const roomNumber = ref("");

 const createRoom = debounce(async () => {
+  // 校验必填项：对战模式与靶纸均必须选择
+  if (!battleMode.value || !targetMode.value) {
+    uni.showToast({ title: '请完善创建信息', icon: 'none' });
+    return;
+  }
  if (game.value.inBattle) {
    uni.$showHint(1);
    return;
@@ -105,7 +112,7 @@ const createRoom = debounce(async () => {
        <text>40厘米全环靶</text>
      </view>
    </view>
-    <SButton :onClick="createRoom">创建房间</SButton>
+    <SButton :onClick="() => $clickSound(createRoom)">创建房间</SButton>
  </view>
 </template>

--- a/src/components/GuideTwo.vue
+++ b/src/components/GuideTwo.vue
@@ -9,12 +9,12 @@ defineProps({

 <template>
  <view class="container">
-    <image class="shooter2" src="../static/shooter2.png" mode="widthFix" />
+    <image class="shooter2" src="https://static.shelingxingqiu.com/shootmini/static/shooter2.png" mode="widthFix" />
    <view class="bg-box">
      <image
        class="bg"
        v-if="!noBg"
-        src="../static/long-bubble-border.png"
+        src="https://static.shelingxingqiu.com/shootmini/static/long-bubble-border.png"
        mode="widthFix"
      />
      <slot />
@@ -26,20 +26,21 @@ defineProps({
 .container {
  display: flex;
  align-items: center;
-  padding: 0 15px;
+  padding: 0 26rpx 0 28rpx;
  margin-bottom: 14rpx;
-  width: clac(100% - 30px);
+  width: clac(100% - 54rpx);
 }
 .container .shooter2 {
-  width: 150rpx;
-  height: 162rpx;
+  display: block;
+  width: 133rpx;
+  height: 144rpx;
 }
 .container .bg-box {
  color: #fff;
  font-size: 28rpx;
  position: relative;
  flex: 1;
-  min-height: 55px;
+  height: 128rpx;
  display: flex;
  align-items: center;
  justify-content: center;
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -57,8 +57,9 @@ const signin = () => {

 const loading = ref(false);
 const pointBook = ref(null);
-const showProgress = ref(false);
 const heat = ref(0);
+/** 房间号按钮动态定位样式（position: fixed，根据胶囊真实位置计算，脱离 flex 流避免挤压标题） */
+const battleRoomBtnStyle = ref({});

 const updateLoading = (value) => {
  loading.value = value;
@@ -80,8 +81,22 @@ onMounted(() => {
      pointBook.value = uni.getStorageSync("last-point-book");
    }
  }
-  if (currentPage.route === "pages/team-battle") {
-    showProgress.value = true;
+  // 仅在对战房间页获取胶囊位置，按钮用 fixed 定位精确贴靠胶囊左侧（脱离 flex 流，不挤压标题）
+  if (currentPage.route === "pages/battle-room") {
+    try {
+      const menuButtonRect = uni.getMenuButtonBoundingClientRect();
+      const { windowWidth } = uni.getSystemInfoSync();
+      battleRoomBtnStyle.value = {
+        // 按钮右边缘距视口右侧 = 屏幕宽 - 胶囊左边缘 + 4px 安全间隙
+        right: (windowWidth - menuButtonRect.left + 4) + "px",
+        // 垂直位置与胶囊顶部对齐
+        top: menuButtonRect.top + "px",
+        // 高度与胶囊一致，视觉融合
+        height: menuButtonRect.height + "px",
+      };
+    } catch (e) {
+      // 获取失败时使用 CSS 兜底定位（28vw + 4px 作为 right，8px 作为 top）
+    }
  }
  uni.$on("update-hot", updateHot);
 });
@@ -127,8 +142,8 @@ onBeforeUnmount(() => {
      </view>
      <block
        v-if="
-          '-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
-          '-凹造型-感知距离-小试牛刀'.indexOf(title) === 10
+          '-箭前准备-感知距离-小试牛刀'.indexOf(title) === -1 ||
+          '-箭前准备-感知距离-小试牛刀'.indexOf(title) === 11
        "
      >
        <text>{{ title }}</text>
@@ -136,12 +151,12 @@ onBeforeUnmount(() => {
      <block
        v-if="
          title &&
-          '-凹造型-感知距离-小试牛刀'.indexOf(title) !== -1 &&
-          '-凹造型-感知距离-小试牛刀'.indexOf(title) !== 10
+          '-箭前准备-感知距离-小试牛刀'.indexOf(title) !== -1 &&
+          '-箭前准备-感知距离-小试牛刀'.indexOf(title) !== 11
        "
      >
        <view class="first-try-steps">
-          <text :class="title === '-凹造型' ? 'current-step' : ''">凹造型</text>
+          <text :class="title === '-箭前准备' ? 'current-step' : ''">箭前准备</text>
          <text>-</text>
          <text :class="title === '-感知距离' ? 'current-step' : ''"
            >感知距离</text
@@ -170,15 +185,22 @@ onBeforeUnmount(() => {
        }}</text
      >
    </view>
-    <view v-if="showProgress" class="battle-progress">
+    <view
+      v-if="
+        currentPage === 'pages/team-battle' ||
+        currentPage === 'pages/team-battle/index'
+      "
+      class="battle-progress"
+    >
      <HeaderProgress />
    </view>
-    <!-- 对战房间：整个胶囊为分享按钮，房号从 Store 读取 -->
+    <!-- 对战房间：整个胶囊为分享按钮，房号从 Store 读取；fixed 定位紧靠系统胶囊左侧 -->
    <button
      v-if="currentPage === 'pages/battle-room' && game.roomNumber"
      open-type="share"
      hover-class="none"
      class="battle-room-number"
+      :style="battleRoomBtnStyle"
    >
      <text class="battle-room-number__text">房号: {{ game.roomNumber }}</text>
      <image src="../static/share2.png" mode="widthFix" class="battle-room-number__icon" />
@@ -270,10 +292,12 @@ onBeforeUnmount(() => {
  margin: 0 20rpx;
  max-width: 300rpx;
 }
-/* 对战房间：整个胶囊作为分享按钮，靠右对齐 */
+/* 对战房间：整个胶囊作为分享按钮，fixed 定位脱离 flex 流，紧贴系统胶囊左侧 */
 .battle-room-number {
-  margin-left: auto;
-  margin-right: 10rpx;
+  position: fixed;
+  /* 兜底定位（JS 获取胶囊位置失败时生效）：约 28vw 对应胶囊区域左边缘 */
+  right: calc(28vw + 4px);
+  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -282,9 +306,7 @@ onBeforeUnmount(() => {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 96rpx;
  border: 1rpx solid #5b5758;
-  flex-shrink: 0;
  padding: 0;
-  line-height: normal;
 }
 /* 重置 button 默认边框 */
 .battle-room-number::after {
--- a/src/components/HeaderProgress.vue
+++ b/src/components/HeaderProgress.vue
@@ -19,12 +19,17 @@ const ended = ref(false);
 const halfTime = ref(false);
 const currentShot = ref(0);
 const totalShot = ref(0);
+/** 标记组件是否已完成挂载，防止 immediate watcher 在挂载前用旧 store 值触发意外播音 */
+const isMounted = ref(false);

 watch(
  () => tips.value,
  (newVal) => {
+    // 挂载完成前不播音（避免 immediate store watcher 用旧值触发多余播报）
+    if (!isMounted.value) return;
+    // 空字符串或含"重回"的 tips 均不播音
+    if (!newVal || newVal.includes("重回")) return;
    let key = [];
-    if (newVal.includes("重回")) return;
    if (currentRoundEnded.value) {
      // 播放当前轮次语音
      key.push(`第${["一", "二", "三", "四", "五"][currentRound.value]}轮`);
@@ -33,8 +38,8 @@ watch(
      newVal.includes("你")
        ? "轮到你了"
        : newVal.includes("红队")
-        ? "请红方射箭"
-        : "请蓝方射箭"
+          ? "请红方射箭"
+          : "请蓝方射箭"
    );
    audioManager.play(key, false);
    currentRoundEnded.value = false;
@@ -52,14 +57,20 @@ async function onReceiveMessage(message) {
  const { type, mode, current, shootData } = message;
  if (type === MESSAGETYPESV2.BattleStart) {
    melee.value = Boolean(mode > 3);
-    totalShot.value = mode === 1 ? 3 : 2;
+    // 优先使用后端返回的 shootNumber，降级则根据 mode 推算
+    totalShot.value = message.shootNumber ?? (mode === 1 ? 3 : 2);
    currentRoundEnded.value = true;
    audioManager.play("比赛开始");
  } else if (type === MESSAGETYPESV2.BattleEnd) {
    audioManager.play("比赛结束", false);
  } else if (type === MESSAGETYPESV2.ShootResult) {
    if (melee.value && current.playerId !== user.value.id) return;
-    if (current.playerId === user.value.id) currentShot.value++;
+    // 从 indexMap 按当前用户 id 取已射箭数，由后端维护准确值，不在前端自增。
+    // 注意：后端在 ShootResult 中会将 playerId 重置为 0（无当前射手），
+    // 因此不能依赖 playerId === user.id 判断，改为直接读取 indexMap[user.id]。
+    // indexMap[user.id] 只在本人射箭后才增加，队友射箭时该值不变，逻辑等价且更准确。
+    const myShot = current.indexMap?.[user.value.id];
+    if (myShot !== undefined) currentShot.value = myShot;
    if (message.shootData) {
      let key = [];
      key.push(
@@ -92,22 +103,36 @@ const onUpdateTips = (newVal) => {
  tips.value = newVal;
 };

-const onUpdateTotalShot = (newVal) => {
-  currentShot.value = newVal.currentShot;
-  totalShot.value = newVal.totalShot;
-};
+// 监听 Pinia store 中 totalShot 变化，用于比赛恢复时同步箭数（替代 uni.$emit 避免时序问题）
+// 使用 immediate: true 确保组件创建时立即读取 store 当前值（解决重入时 totalShot 值不变 watch 不触发的问题）
+watch(() => store.game.totalShot, (newVal) => {
+  if (newVal > 0) {
+    totalShot.value = newVal;
+    currentShot.value = store.game.currentShot;
+  }
+}, { immediate: true });
+
+// 监听 Pinia store 中 tips 变化，用于比赛恢复时同步提示文案（替代 uni.$emit 避免时序问题）
+// 使用 immediate: true 确保组件创建时立即读取 store 当前值（解决 onShow 早于 onMounted 导致 uni.$emit 事件丢失的问题）
+// 注意：使用 != null 而非 if(newVal)，确保空字符串 "" 也能触发清空（避免重新开赛时旧文案残留）
+watch(() => store.game.tips, (newVal) => {
+  if (newVal != null) {
+    tips.value = newVal;
+  }
+}, { immediate: true });

 onMounted(() => {
-  uni.$on("update-shot", onUpdateTotalShot);
+  isMounted.value = true;
  uni.$on("update-tips", onUpdateTips);
  uni.$on("socket-inbox", onReceiveMessage);
  uni.$on("play-sound", playSound);
 });

 onBeforeUnmount(() => {
-  uni.$off("update-shot", onUpdateTotalShot);
  uni.$off("socket-inbox", onReceiveMessage);
  uni.$off("play-sound", playSound);
+  // 补充取消 update-tips 监听，防止页面重建时监听器叠加
+  uni.$off("update-tips", onUpdateTips);
  if (timer.value) clearInterval(timer.value);
 });
 </script>
@@ -117,10 +142,7 @@ onBeforeUnmount(() => {
    <text>{{ (tips || "").replace(/你/g, "").replace(/重回/g, "") }}</text>
    <text v-if="totalShot > 0"> ({{ currentShot }}/{{ totalShot }}) </text>
    <button v-if="!!tips" hover-class="none" @click="updateSound">
-      <image
-        :src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
-        mode="widthFix"
-      />
+      <image :src="`../static/sound${sound ? '' : '-off'}-yellow.png`" mode="widthFix" />
    </button>
  </view>
 </template>
@@ -134,11 +156,13 @@ onBeforeUnmount(() => {
  justify-content: center;
  font-weight: 500;
 }
-.container > button:last-child {
+
+.container>button:last-child {
  width: 36px;
  height: 36px;
 }
-.container > button:last-child > image {
+
+.container>button:last-child>image {
  width: 36px;
  min-height: 36px;
 }
--- a/src/components/Matching.vue
+++ b/src/components/Matching.vue
@@ -123,7 +123,7 @@ onBeforeUnmount(() => {
        </text>
      </view>
    </view>
-    <button hover-class="none" @click="stopMatch">取消匹配</button>
+    <button hover-class="none" @click="$clickSound(stopMatch)">取消匹配</button>
  </view>
 </template>

--- a/src/components/PlayerScore.vue
+++ b/src/components/PlayerScore.vue
@@ -43,7 +43,7 @@ const rowCount = new Array(6).fill(0);
      <view>
        <view v-for="(_, index) in rowCount" :key="index">
          <text>{{
-            scores[1] && scores[1][index] ? `${scores[0][index].ring}环` : "-"
+            scores[1] && scores[1][index] ? `${scores[1][index].ring}环` : "-"
          }}</text>
        </view>
      </view>
--- a/src/components/PlayerSeats.vue
+++ b/src/components/PlayerSeats.vue
@@ -14,6 +14,11 @@ const props = defineProps({
    type: Function,
    default: () => {},
  },
+  /** 当前用户是否为房主；仅房主可见踢人按钮 */
+  isOwner: {
+    type: Boolean,
+    default: false,
+  },
 });
 const seats = new Array(props.total).fill(1);
 </script>
@@ -45,8 +50,9 @@ const seats = new Array(props.total).fill(1);
        mode="widthFix"
        class="player-bg"
      /> -->
+      <!-- 仅房主（isOwner=true）且非空座位时展示踢人按钮 -->
      <button
-        v-if="index > 0 && players[index]"
+        v-if="index > 0 && players[index] && isOwner"
        hover-class="none"
        class="remove-player"
        @click="() => removePlayer(players[index])"
--- a/src/components/ShootProgress2.vue
+++ b/src/components/ShootProgress2.vue
@@ -29,6 +29,33 @@ const updateRemain = (value) => {
    if (timer.value) clearInterval(timer.value);
    return
  }
+  // zeroThenReset：ToSomeoneShoot 到达时，若进度条仍在倒计时则先瞬间清零（约 150ms 停留）再显示下一玩家满值
+  // 若进度条已到 0（loading 状态），直接切换满值
+  if (value.zeroThenReset) {
+    if (timer.value) clearInterval(timer.value);
+    const wasNonZero = remain.value > 0;
+    // 更新下一玩家颜色和方向（在清零和满值时均生效）
+    currentTeam.value = value.team;
+    if (value.team === 'red') barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
+    if (value.team === 'blue') barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
+    transitionStyle.value = "none";
+    if (wasNonZero) {
+      // 瞬间清零，停留约 150ms 后切换为满值
+      remain.value = 0;
+      loading.value = true;
+      setTimeout(() => {
+        remain.value = value.value;
+        loading.value = false;
+        setTimeout(() => { transitionStyle.value = "all 1s linear"; }, 50);
+      }, 150);
+    } else {
+      // 已在底部，直接切换满值
+      remain.value = value.value;
+      loading.value = false;
+      setTimeout(() => { transitionStyle.value = "all 1s linear"; }, 50);
+    }
+    return;
+  }
  loading.value = false;
  currentTeam.value = value.team
  if (value.team === 'red')
@@ -36,7 +63,14 @@ const updateRemain = (value) => {
  if (value.team === 'blue')
    barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
  if (value.reset) {
+    // 重置前先清除旧计时器，防止超时未射箭时旧 interval 残留，导致进度条震荡
+    if (timer.value) clearInterval(timer.value);
+    // 重置时瞬间跳满格，禁用 CSS 过渡避免从旧值「涨到满」的动画
+    transitionStyle.value = "none";
    remain.value = value.value;
+    setTimeout(() => {
+      transitionStyle.value = "all 1s linear";
+    }, 50);
    return;
  }
  const newVal = Math.round(value.value);
@@ -51,6 +85,8 @@ const updateRemain = (value) => {
    remain.value = newVal;
  }

+  // 启动前先清除旧计时器，防止多次 {stop:false} 事件叠加多个 interval
+  if (timer.value) clearInterval(timer.value);
  timer.value = setInterval(() => {
    loading.value = remain.value === 0;
    if (remain.value > 0) remain.value--;
--- a/src/components/Swiper.vue
+++ b/src/components/Swiper.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";

 const props = defineProps({
  interval: {
@@ -14,13 +14,24 @@ const props = defineProps({
    type: Array,
    default: () => [],
  },
+  current: {
+    type: Number,
+    default: 0,
+  },
  onChange: {
    type: Function,
    default: (index) => {},
  },
 });

-const currentIndex = ref(0);
+const currentIndex = ref(props.current);
+
+watch(
+  () => props.current,
+  (index) => {
+    currentIndex.value = index;
+  }
+);

 const handleChange = (e) => {
  currentIndex.value = e.detail.current;
@@ -75,7 +86,7 @@ const handleChange = (e) => {

 .dots {
  position: absolute;
-  bottom: 5%;
+  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
--- a/src/components/TeamAvatars.vue
+++ b/src/components/TeamAvatars.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted, computed } from "vue";
+import { ref, watch } from "vue";
 const props = defineProps({
  isRed: {
    type: Boolean,
@@ -10,7 +10,7 @@ const props = defineProps({
    default: () => [],
  },
  currentShooterId: {
-    type: Number,
+    type: [Number, String],
    default: "",
  },
 });
@@ -30,31 +30,35 @@ const getPos = (id) => {
  return sort * 40;
 };

-onMounted(() => {
-  props.team.forEach((p, index) => {
-    players.value[p.id] = { sort: index, ...p };
+const syncPlayers = () => {
+  const nextPlayers = {};
+  const shooterId = props.currentShooterId;
+  const shooterIndex = props.team.findIndex(
+    (p) => String(p?.id) === String(shooterId)
+  );
+  const nextTeam = [...props.team];
+
+  currentTeam.value = !!shooterId && shooterIndex >= 0;
+  firstName.value = "";
+
+  if (currentTeam.value) {
+    const target = nextTeam.splice(shooterIndex, 1)[0];
+    if (target) {
+      nextTeam.unshift(target);
+      firstName.value = target.name || "";
+    }
+  }
+
+  nextTeam.forEach((p, index) => {
+    if (p?.id) nextPlayers[p.id] = { sort: index, ...p };
  });
-});
+  players.value = nextPlayers;
+};

 watch(
-  () => props.currentShooterId,
-  (newVal) => {
-    if (!newVal) return;
-    const index = props.team.findIndex((p) => p.id === newVal);
-    currentTeam.value = index >= 0;
-    if (index >= 0) {
-      const newPlayers = [...props.team];
-      const target = newPlayers.splice(index, 1)[0];
-      if (target) {
-        newPlayers.unshift(target);
-        firstName.value = target.name;
-        newPlayers.forEach((p, index) => {
-          players.value[p.id] = { sort: index, ...p };
-        });
-      }
-    }
-  },
-  { immediate: true }
+  [() => props.team, () => props.currentShooterId],
+  syncPlayers,
+  { immediate: true, deep: true }
 );
 </script>

@@ -70,7 +74,7 @@ watch(
    />
    <view
      v-for="(item, index) in team"
-      :key="index"
+      :key="item.id || index"
      class="player"
      :style="{
        width: (isFirst(item.id) ? 80 : 60) + 'rpx',
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,26 @@
 import { createSSRApp } from 'vue'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import App from './App.vue'
+import audioManager from './audioManager'

 export function createApp() {
  const app = createSSRApp(App)
  const pinia = createPinia()
+  pinia.use(piniaPluginPersistedstate)
  app.use(pinia)
+
+  /**
+   * 全局点击音效工具函数，用于在任意按钮/元素点击时自动播放音效。
+   * 用法：@click="$clickSound(handler)" 或 @click="$clickSound(() => doSomething())"
+   * @param {Function} handler - 原始点击回调函数（可选，点击时直接调用）
+   * @param {string} [soundKey='点击按钮'] - audioManager 中的音效 key
+   */
+  app.config.globalProperties.$clickSound = (handler, soundKey = '点击按钮') => {
+    audioManager.play(soundKey);
+    if (typeof handler === 'function') handler();
+  };
+
  return {
    app
  }
--- a/src/pages.json
+++ b/src/pages.json
@@ -31,7 +31,7 @@
      }
    },
    {
-      "path": "pages/team-battle"
+      "path": "pages/team-battle/index"
    },
    {
      "path": "pages/melee-battle"
@@ -39,6 +39,9 @@
    {
      "path": "pages/battle-result"
    },
+    {
+      "path": "pages/friend-battle-result"
+    },
    {
      "path": "pages/point-book-edit"
    },
--- a/src/pages/battle-result.vue
+++ b/src/pages/battle-result.vue
@@ -117,7 +117,7 @@ const checkBowData = () => {
            }deg)`,
          }"
        >
-          <view v-if="data.mvp && data.mvp[0].totalRings">
+          <view v-if="data.mvp && data.mvp.totalRings">
            <image src="../static/title-mvp.png" mode="widthFix" />
            <text
              >斩获<text
@@ -127,7 +127,7 @@ const checkBowData = () => {
                  margin: '0 3px',
                  fontWeight: '600',
                }"
-                >{{ data.mvp[0].totalRings }}</text
+                >{{ data.mvp.totalRings }}</text
              >环</text
            >
          </view>
--- a/src/pages/battle-room.vue
+++ b/src/pages/battle-room.vue
@@ -9,9 +9,7 @@ import Avatar from "@/components/Avatar.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import {
  getRoomAPI,
-  destroyRoomAPI,
  exitRoomAPI,
-  startRoomAPI,
  chooseTeamAPI,
  getReadyAPI,
  kickPlayerAPI,
@@ -19,6 +17,7 @@ import {
 import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
+import audioManager from "@/audioManager";
 const store = useStore();
 const { user } = storeToRefs(store);

@@ -42,10 +41,23 @@ const battleTitle = computed(() => {
  return `${half}v${half}对抗赛`;
 });

+/** 靶纸尺寸（cm），由 URL 参数或 API 返回的 targetType 字段填充 */
+const targetSize = ref(0);
+
+/**
+ * 根据 targetSize 动态生成靶纸尺寸文本，如"40cm"
+ * 数据未就绪时显示 "--"；数据来源：创建者取 URL 参数 target，加入者取 API 返回的 targetType
+ */
+const targetSizeLabel = computed(() =>
+  targetSize.value ? `${targetSize.value}cm` : '--'
+);
+
 const ready = ref(false);
 const allReady = ref(false);
 const timer = ref(null);
 const goBattle = ref(false);
+/** 从结算页返回时为 true，跳过进场靶纸语音 */
+const skipTargetAudio = ref(false);

 /**
 * 从服务端刷新当前房间数据，更新成员列表、准备状态等信息
@@ -56,6 +68,15 @@ async function refreshRoomData() {
  const result = await getRoomAPI(roomNumber.value);
  if (result.started) return;
  room.value = result;
+  // 加入者通过 API 返回的 targetType 字段同步靶纸尺寸，并持久化到本地缓存
+  if (result.targetType) {
+    targetSize.value = result.targetType;
+    uni.setStorageSync(`targetSize_${roomNumber.value}`, result.targetType);
+  } else if (targetSize.value === 0) {
+    // API 无该字段时，从本地缓存兜底（如"返回房间"场景）
+    const stored = uni.getStorageSync(`targetSize_${roomNumber.value}`);
+    if (stored) targetSize.value = stored;
+  }
  owner.value = {};
  opponent.value = {};
  const members = result.members || [];
@@ -115,10 +136,6 @@ async function refreshRoomData() {
  // timer.value = setTimeout(refreshRoomData, 2000);
 }

-const startGame = async () => {
-  const result = await startRoomAPI(room.value.number);
-};
-
 const getReady = async () => {
  await getReadyAPI(roomNumber.value);
 };
@@ -178,7 +195,7 @@ async function onReceiveMessage(message) {
      uni.setStorageSync("blue-team", message.teams[1].players || []);
      uni.setStorageSync("red-team", message.teams[2].players || []);
      uni.redirectTo({
-        url: "/pages/team-battle?battleId=" + message.matchId,
+        url: "/pages/team-battle/index?battleId=" + message.matchId,
      });
    } else {
      uni.redirectTo({
@@ -193,14 +210,6 @@ const chooseTeam = async (team) => {
  refreshMembers(result.members);
 };

-const destroyRoom = async () => {
-  if (roomNumber.value) await destroyRoomAPI(roomNumber.value);
-};
-
-const exitRoom = async () => {
-  uni.navigateBack();
-};
-
 /** 待确认踢出的玩家信息 */
 const playerToKick = ref(null);
 /** 控制踢出确认弹窗的显示状态 */
@@ -241,11 +250,41 @@ const canClick = computed(() => {
  return true;
 });

+/**
+ * 根据对战类型和人数动态生成分享文案
+ * 1v1 / 默认 → "星球论箭，来一决高下敢否?"
+ * 2v2 → "2v2对抗赛，是兄弟来助我一把!"
+ * 3v3 → "3v3对抗赛，来了马上发车!"
+ * 乱斗 → "热血乱斗赛，敢来争锋?"
+ */
+const shareTitle = computed(() => {
+  const { battleType, count } = room.value;
+  if (battleType === 2) return '热血乱斗赛，敢来争锋?';
+  if (battleType === 1 && count === 4) return '2v2对抗赛，是兄弟来助我一把!';
+  if (battleType === 1 && count === 6) return '3v3对抗赛，来了马上发车!';
+  return '星球论箭，来一决高下敢否?';
+});
+
+/**
+ * 根据对战类型和靶纸尺寸动态返回分享封面图路径，共 4 张图：
+ *   contest_share_20.png — 约战/对抗赛 + 20cm 靶
+ *   contest_share_40.png — 约战/对抗赛 + 40cm 靶
+ *   melee_share_20.png   — 多人乱斗 + 20cm 靶
+ *   melee_share_40.png   — 多人乱斗 + 40cm 靶
+ *
+ * 当 targetSize 未知时默认取 20cm 图。
+ */
+const shareImage = computed(() => {
+  const type = room.value.battleType === 2 ? 'melee' : 'contest';
+  const size = targetSize.value === 40 ? '40' : '20';
+  return `https://static.shelingxingqiu.com/shootmini/static/share/${type}_share_${size}.png`;
+});
+
 onShareAppMessage(() => {
  return {
-    title: "邀请您进入房间对战",
+    title: shareTitle.value,
    path: "/pages/friend-battle?roomID=" + roomNumber.value,
-    imageUrl: "",
+    imageUrl: shareImage.value,
  };
 });

@@ -265,10 +304,21 @@ onShow(() => {
 * - 同步到 Pinia Store（供 Header 组件展示房号胶囊）
 */
 onLoad(async (options) => {
+  // 从结算页跳回时携带 fromResult=1，标记跳过进场语音
+  if (options.fromResult) skipTargetAudio.value = true;
  if (options.roomNumber) {
    roomNumber.value = options.roomNumber;
    store.updateRoomNumber(options.roomNumber);
  }
+  // 创建者通过 URL 参数 target（1→20cm，2→40cm）初始化靶纸尺寸，并持久化到本地缓存
+  if (options.target) {
+    targetSize.value = parseInt(options.target) * 20;
+    uni.setStorageSync(`targetSize_${roomNumber.value}`, targetSize.value);
+  } else if (roomNumber.value) {
+    // "返回房间"等无 target 参数的场景：从本地缓存恢复（待 refreshRoomData 进一步覆盖）
+    const stored = uni.getStorageSync(`targetSize_${roomNumber.value}`);
+    if (stored) targetSize.value = stored;
+  }
 });

 /**
@@ -280,6 +330,13 @@ onMounted(() => {
    keepScreenOn: true,
  });
  uni.$on("socket-inbox", onReceiveMessage);
+  // 页面加载完成 1 秒后根据靶纸尺寸播报对应语音；从结算页返回时跳过
+  setTimeout(() => {
+    if (!skipTargetAudio.value) {
+      const key = targetSize.value === 40 ? '40CM全环靶' : '20CM全环靶';
+      audioManager.play(key);
+    }
+  }, 1000);
 });

 onBeforeUnmount(() => {
@@ -299,11 +356,8 @@ onBeforeUnmount(() => {
      <GuideTwo>
        <view class="battle-guide">
          <view class="guide-tips">
-            <text>弓箭手们，人都到齐了吗?</text>
-            <text v-if="room.battleType === 1">{{
-              `${room.count / 2}v${room.count / 2}比赛即将开始!`
-            }}</text>
-            <text v-if="room.battleType === 2">大乱斗即将开始! </text>
+            <text class="guide-tips__target">请使用{{ targetSizeLabel }}全环靶</text>
+            <text class="guide-tips__warn">如果实际靶纸与选择靶纸不同，将导致射箭无效</text>
          </view>
        </view>
      </GuideTwo>
@@ -344,7 +398,8 @@ onBeforeUnmount(() => {
            <view v-for="(item, index) in players" :key="index">
              <Avatar v-if="item.id" :src="item.avatar" :size="36" />
              <text v-if="owner.id === item.id">管理员</text>
-              <button v-if="owner.id !== item.id && item.id" hover-class="none" class="remove-player"
+              <!-- 仅房主可见踢人按钮，且不能踢自己 -->
+              <button v-if="owner.id !== item.id && item.id && owner.id === user.id" hover-class="none" class="remove-player"
                @click="() => removePlayer(item)" :style="{ top: '-10rpx', right: '-10rpx' }">
                <image src="../static/close-white.png" mode="widthFix" />
              </button>
@@ -384,10 +439,11 @@ onBeforeUnmount(() => {
          </view>
        </view>
      </block>
+      <!-- isOwner：当前用户是房主时才展示踢人按钮 -->
      <PlayerSeats v-if="room.battleType === 2" :total="room.count || 10" :players="players"
-        :removePlayer="removePlayer" />
+        :removePlayer="removePlayer" :isOwner="owner.id === user.id" />
      <view>
-        <SButton :disabled="!canClick" :onClick="getReady">
+        <SButton :disabled="!canClick" :onClick="() => $clickSound(getReady)">
          {{
            allReady.value
              ? "即将进入对局..."
@@ -818,4 +874,23 @@ onBeforeUnmount(() => {
  border: 1rpx solid #a3793f66;
  color: #fed847;
 }
+
+.guide-tips__target {
+  font-weight: 400;
+  font-size: 26rpx;
+  color: rgba(255, 217, 71, 0.8);
+}
+
+.guide-tips__warn {
+  font-weight: 400;
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 6rpx;
+}
+
+.guide-tips {
+  display: flex;
+  flex-direction: column;
+  padding-left: 20rpx;
+}
 </style>
--- a/src/pages/first-try.vue
+++ b/src/pages/first-try.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import Swiper from "@/components/Swiper.vue";
@@ -18,6 +18,8 @@ import {
  startPractiseAPI,
  endPractiseAPI,
  getPractiseAPI,
+  laserAimAPI,
+  laserCloseAPI,
 } from "@/apis";
 import { sharePractiseData } from "@/canvas";
 import { wxShare, debounce } from "@/util";
@@ -32,6 +34,7 @@ const total = 12;
 const stepButtonTexts = [
  "开始",
  "进入下一个任务",
+  "我已校准",
  "进入下一个任务",
  "我准备好了，开始",
  "",
@@ -43,8 +46,11 @@ const practiseResult = ref({});
 const btnDisabled = ref(false);
 const practiseId = ref("");
 const showGuide = ref(false);
+const laserActive = ref(false);
+const guideSwiperIndex = ref(0);

 const guideImages = [
+  "https://static.shelingxingqiu.com/shootmini/static/target.png",
  "https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wwdpgwt9e6du.png",
  "https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wvv9sw4zioqk.png",
  "https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0ww3khaycallu.png",
@@ -54,10 +60,45 @@ const guideImages = [
  "https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wwr6hfjhyfn5.png",
 ];

+const calibrationGuides = [
+  {
+    title: "箭头面向靶子",
+    src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5wscg7hrfo.png",
+  },
+  {
+    title: "摆出拉弓姿势",
+    src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5b7ljrhx3o.png",
+  },
+  {
+    title: "调整瞄准器",
+    src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrcxf9wjaiv4.png",
+  },
+];
+
 const onSwiperIndexChange = (index) => {
-  if (index + 1 === guideImages.length) {
-    showGuide.value = true;
-  }
+  guideSwiperIndex.value = index;
+  showGuide.value = index + 1 === guideImages.length;
+};
+
+const isGuideLastImage = computed(
+  () => guideSwiperIndex.value + 1 === guideImages.length
+);
+
+const currentStepButtonText = computed(() => {
+  if (step.value === 1 && isGuideLastImage.value) return "去校准智能弓";
+  return stepButtonTexts[step.value];
+});
+
+const openCalibrationLaser = async () => {
+  if (laserActive.value) return;
+  await laserAimAPI();
+  laserActive.value = true;
+};
+
+const closeCalibrationLaser = async () => {
+  if (!laserActive.value) return;
+  await laserCloseAPI();
+  laserActive.value = false;
 };

 const createPractise = async (arrows) => {
@@ -75,7 +116,7 @@ async function onReceiveMessage(msg) {
    scores.value = msg.details;
  } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
    setTimeout(onOver, 1500);
-  } else if (msg.type === MESSAGETYPESV2.TestDistance) {
+  } else if (msg.type === MESSAGETYPESV2.TestDistance && step.value === 3) {
    if (msg.shootData.distance / 100 >= 5) {
      audioManager.play("距离合格");
      btnDisabled.value = false;
@@ -110,12 +151,13 @@ onMounted(() => {
  uni.$on("share-image", onClickShare);
 });

-onBeforeUnmount(() => {
+onBeforeUnmount(async () => {
  uni.setKeepScreenOn({
    keepScreenOn: false,
  });
  uni.$off("socket-inbox", onReceiveMessage);
  uni.$off("share-image", onClickShare);
+  await closeCalibrationLaser();
  audioManager.stopAll();
  endPractiseAPI();
 });
@@ -123,28 +165,39 @@ onBeforeUnmount(() => {
 const nextStep = async () => {
  if (step.value === 0) {
    step.value = 1;
-    title.value = "-凹造型";
+    title.value = "-箭前准备";
  } else if (step.value === 1) {
+    if (!isGuideLastImage.value) {
+      guideSwiperIndex.value += 1;
+      showGuide.value = guideSwiperIndex.value + 1 === guideImages.length;
+      return;
+    }
+    showGuide.value = false;
+    step.value = 2;
+    // title.value = "-校准智能弓";
+    await openCalibrationLaser();
+  } else if (step.value === 2) {
+    await closeCalibrationLaser();
    showGuide.value = false;
    btnDisabled.value = true;
-    step.value = 2;
+    step.value = 3;
    title.value = "-感知距离";
    const result = await createPractiseAPI(total, 120);
    if (result) practiseId.value = result.id;
-  } else if (step.value === 2) {
-    showGuide.value = false;
-    step.value = 3;
-    title.value = "-小试牛刀";
  } else if (step.value === 3) {
+    showGuide.value = false;
+    step.value = 4;
+    title.value = "-小试牛刀";
+  } else if (step.value === 4) {
    title.value = "小试牛刀";
    await startPractiseAPI();
    scores.value = [];
-    step.value = 4;
+    step.value = 5;
    start.value = true;
    setTimeout(() => {
      uni.$emit("play-sound", "请开始射击");
    }, 300);
-  } else if (step.value === 5) {
+  } else if (step.value === 6) {
    uni.navigateBack({
      delta: 1,
    });
@@ -159,13 +212,13 @@ const onClose = async () => {
    setTimeout(() => {
      practiseResult.value = {};
      showGuide.value = false;
-      step.value = 5;
+      step.value = 6;
    }, 500);
  } else {
    practiseResult.value = {};
    start.value = false;
    scores.value = [];
-    step.value = 3;
+    step.value = 4;
    const result = await createPractiseAPI(total, 120);
    if (result) practiseId.value = result.id;
  }
@@ -173,14 +226,14 @@ const onClose = async () => {
 </script>

 <template>
-  <Container :bgType="1" :title="title" :showBottom="step !== 4">
+  <Container :bgType="1" :title="title" :showBottom="step !== 5">
    <view class="container">
      <Guide
-        v-if="step !== 4"
+        v-if="step !== 5"
        :type="
-          step === 2
+          step === 3
            ? 2
-            : step === 5 || (step === 0 && user.nickName.length > 6)
+            : step === 6 || (step === 0 && user.nickName.length > 6)
            ? 1
            : 0
        "
@@ -196,25 +249,28 @@ const onClose = async () => {
          ，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）
        </text>
        <text v-if="step === 1" :style="{ fontSize: '28rpx' }"
-          >这是我们人帅技高的高教练。首先，请按教练示范，尝试自己去做这些动作和手势吧。</text
+          >这位就是人帅技高的高教练！接下来请跟随教练指引，做好射箭前期准备。</text
+        >
+        <text v-if="step === 2" :style="{ fontSize: '28rpx' }"
+          >请按下方步骤完成智能弓校准，让瞄准器和靶子保持对齐。</text
        >
        <view
          class="guide-tips"
          :style="{ marginTop: '8rpx' }"
-          v-if="step === 2"
+          v-if="step === 3"
        >
          <text>你知道5米射程有多远吗？</text>
          <text>
            在我们的排位赛中，射程小于5米的成绩无效、哦！建议平时练习距离至少5米。现在，来边射箭边调整你的站位点吧！
          </text>
        </view>
-        <view class="guide-tips" v-if="step === 3">
+        <view class="guide-tips" v-if="step === 4">
          <text>一切准备就绪</text>
          <text :style="{ fontSize: '28rpx' }"
            >试着完成一个真正的弓箭手任务吧！</text
          >
        </view>
-        <view class="guide-tips" v-if="step === 5">
+        <view class="guide-tips" v-if="step === 6">
          <text>新手试炼场通关啦，优秀！</text>
          <text :style="{ fontSize: '28rpx' }"
            >反曲弓运动基本知识和射灵世界系统规则你已Get，是不是挺容易呀：）</text
@@ -231,35 +287,53 @@ const onClose = async () => {
        src="https://static.shelingxingqiu.com/attachment/2025-11-17/deas80ef1sf9td0leq.png"
        class="try-tip"
        mode="widthFix"
-        v-if="step === 3"
+        v-if="step === 4"
      />
      <image
        src="https://static.shelingxingqiu.com/attachment/2025-07-01/db0ehpz9lav58g5drl.png"
        class="try-tip"
        mode="widthFix"
-        v-if="step === 5"
+        v-if="step === 6"
      />
      <view style="height: 570px" v-if="step === 1">
-        <Swiper :onChange="onSwiperIndexChange" :data="guideImages" />
+        <Swiper
+          :current="guideSwiperIndex"
+          :onChange="onSwiperIndexChange"
+          :data="guideImages"
+        />
      </view>
-      <ShootProgress v-if="step === 4" tips="请开始连续射箭" :start="start" />
-      <TestDistance v-if="step === 2" :guide="false" />
+      <view class="calibration-container" v-if="step === 2">
+        <view
+          v-for="(guide, index) in calibrationGuides"
+          :key="guide.title"
+          class="calibration-guide"
+        >
+          <view>
+            <text>{{ index + 1 }}</text>
+            <text>{{ guide.title }}</text>
+          </view>
+          <image :src="guide.src" mode="widthFix" />
+        </view>
+        <text>请完成以上步骤校准智能弓</text>
+      </view>
+      <ShootProgress v-if="step === 5" tips="请开始连续射箭" :start="start" />
+      <TestDistance v-if="step === 3" :guide="false" />
      <view
        class="user-row"
-        v-if="step === 4"
-        :style="{ marginBottom: step === 2 ? '40px' : '0' }"
+        v-if="step === 5"
+        :style="{ marginBottom: '0' }"
      >
        <Avatar :src="user.avatar" :size="35" />
        <BowPower />
      </view>
      <BowTarget
-        v-if="step === 4"
-        :currentRound="step === 4 ? scores.length : 0"
-        :totalRound="step === 4 ? total : 0"
+        v-if="step === 5"
+        :currentRound="step === 5 ? scores.length : 0"
+        :totalRound="step === 5 ? total : 0"
        :scores="scores"
      />
      <ScorePanel
-        v-if="step === 4"
+        v-if="step === 5"
        :total="total"
        :rowCount="6"
        :arrows="scores"
@@ -287,7 +361,7 @@ const onClose = async () => {
            step === 1 ? "学会了，我摆得比教练还帅" : "我找到合适的点位了"
          }}</text>
        </BubbleTip>
-        {{ stepButtonTexts[step] }}
+        {{ currentStepButtonText }}
      </SButton>
    </template>
  </Container>
@@ -301,4 +375,43 @@ const onClose = async () => {
  width: calc(100% - 20px);
  margin: 0 10px;
 }
+.calibration-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.calibration-guide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 26rpx;
+  color: #ffffff;
+  margin-bottom: 15rpx;
+}
+.calibration-guide > view {
+  width: 100%;
+  margin: 25rpx 0;
+  display: flex;
+  align-items: center;
+}
+.calibration-guide > view > text:first-child {
+  font-size: 24rpx;
+  background: #e89024;
+  border-radius: 50%;
+  width: 32rpx;
+  height: 32rpx;
+  line-height: 32rpx;
+  display: block;
+  text-align: center;
+  margin-right: 15rpx;
+}
+.calibration-guide > image {
+  width: 630rpx;
+  height: 250rpx;
+}
+.calibration-container > text {
+  font-size: 24rpx;
+  color: #fff9;
+  margin: 30rpx;
+}
 </style>
--- a/src/pages/friend-battle-result.vue
+++ b/src/pages/friend-battle-result.vue
--- a/src/pages/friend-battle.vue
+++ b/src/pages/friend-battle.vue
@@ -98,8 +98,10 @@ onLoad(async (options) => {
  <Container title="好友约战" :showBackToGame="true">
    <view :style="{ width: '100%', height: '100%' }">
      <GuideTwo>
-        <text :style="{color: 'rgba(255,217,71,0.8)'}">约上朋友开几局，欢乐多，不寂寞</text>
-        <text>一起练升级更快，早日加入全国排位赛！</text>
+        <view class="guide-tips">
+          <text class="guide-tips__main">约上朋友开几局，欢乐多，不寂寞</text>
+          <text class="guide-tips__sub">一起练升级更快，早日加入全国排位赛！</text>
+        </view>
      </GuideTwo>
      <view class="my-data">
        <view>
@@ -139,7 +141,7 @@ onLoad(async (options) => {
        <image src="../static/founded-room.png" mode="widthFix" />
        <view>
          <input placeholder="输入房间号" v-model="roomNumber" placeholder-style="color: #ccc" />
-          <view @click="enterRoom(roomNumber)">进入房间</view>
+          <view @click="$clickSound(() => enterRoom(roomNumber))">进入房间</view>
        </view>
      </view>
      <view class="create-room">
@@ -153,7 +155,7 @@ onLoad(async (options) => {
          </view>
        </view>
        <view>
-          <SButton width="80%" :rounded="30" :onClick="onCreateRoom">
+          <SButton width="80%" :rounded="30" :onClick="() => $clickSound(onCreateRoom)">
            创建约战房
          </SButton>
        </view>
@@ -162,7 +164,8 @@ onLoad(async (options) => {
        <view v-if="warnning" class="warnning">
          {{ warnning }}
        </view>
-        <CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
+        <!-- showModal 关闭时立即销毁组件，重开时重建，确保选项重置为 0 -->
+        <CreateRoom v-if="!warnning && showModal" :onConfirm="() => (showModal = false)" />
      </SModal>
      <Signin :show="showSignin" :onClose="onSignin" />
    </view>
@@ -170,6 +173,24 @@ onLoad(async (options) => {
 </template>

 <style scoped>
+.guide-tips {
+  display: flex;
+  flex-direction: column;
+  padding-left: 112rpx;
+  width: 100%;
+}
+.guide-tips__main {
+  font-weight: 400;
+  font-size: 26rpx;
+  color: rgba(255, 217, 71, 0.8);
+}
+.guide-tips__sub {
+  font-weight: 400;
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 6rpx;
+}
+
 .founded-room {
  display: flex;
  flex-direction: column;
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -68,28 +68,29 @@ onShow(async () => {
  const token = uni.getStorageSync(`${env}_token`);

  if (!user.value.id && !token) {
-    try {
-      const wxResult = await uni.login({provider: "weixin"});
-      const bindResult = await checkUserBindAPI(wxResult.code);
-      if (bindResult.binded) {
-        const newResult = await uni.login({provider: "weixin"});
-        const silentResult = await silentLoginAPI(newResult.code);
-        if (silentResult.user) updateUser(silentResult.user);
-        const devices = await getMyDevicesAPI();
-        if (devices.bindings && devices.bindings.length) {
-          updateDevice(
-              devices.bindings[0].deviceId,
-              devices.bindings[0].deviceName
-          );
-          const data = await getDeviceBatteryAPI();
-          updateOnline(data.online);
-        }
-      } else {
-        showModal.value = true;
-      }
-    } catch (e) {
-      console.log("检查绑定状态失败", e);
-    }
+    // showModal.value = true;
+    // try {
+    //   const wxResult = await uni.login({provider: "weixin"});
+    //   const bindResult = await checkUserBindAPI(wxResult.code);
+    //   if (bindResult.binded) {
+    //     const newResult = await uni.login({provider: "weixin"});
+    //     const silentResult = await silentLoginAPI(newResult.code);
+    //     if (silentResult.user) updateUser(silentResult.user);
+    //     const devices = await getMyDevicesAPI();
+    //     if (devices.bindings && devices.bindings.length) {
+    //       updateDevice(
+    //           devices.bindings[0].deviceId,
+    //           devices.bindings[0].deviceName
+    //       );
+    //       const data = await getDeviceBatteryAPI();
+    //       updateOnline(data.online);
+    //     }
+    //   } else {
+    //     showModal.value = true;
+    //   }
+    // } catch (e) {
+    //   console.log("检查绑定状态失败", e);
+    // }
  }

  const promises = [getScoreRankList(undefined, 1, 10)];
@@ -159,10 +160,10 @@ onShareTimeline(() => {
  <Container :isHome="true" :showBackToGame="true">
    <view class="container">
      <view class="top-theme">
-        <image
+        <!-- <image
            src="https://static.shelingxingqiu.com/attachment/2025-12-31/dfc9dxrq4xn7e6y2pp.png"
            mode="widthFix"
-        />
+        /> -->
      </view>
      <UserHeader showRank :onSignin="() => (showModal = true)"/>
      <view :style="{ padding: '12px 10px' }">
@@ -178,7 +179,7 @@ onShareTimeline(() => {
                v-else
                src="https://static.shelingxingqiu.com/attachment/2026-01-04/dffohwtk1gwh0xfa6h.png"
                mode="widthFix"
-                @click="() => toPage('/pages/my-device')"
+                @click="$clickSound(() => toPage('/pages/my-device'))"
            />
            <block v-if="user.id">
              <text v-if="!device.deviceId">绑定我的智能弓</text>
@@ -200,7 +201,7 @@ onShareTimeline(() => {
            <view @click="() => toPage('/pages/training/index')">
              <image src="../static/my-practise.png" mode="widthFix"/>
            </view>
-            <view @click="() => toPage('/pages/friend-battle')">
+            <view @click="$clickSound(() => toPage('/pages/friend-battle'))">
              <image src="../static/friend-battle.png" mode="widthFix"/>
            </view>
          </view>
@@ -212,7 +213,7 @@ onShareTimeline(() => {
          />
          <button
              class="into-btn"
-              @click="() => toPage('/pages/ranking')"
+              @click="$clickSound(() => toPage('/pages/ranking'))"
              hover-class="none"
          ></button>
          <view class="ranking-players" @click="toRankListPage">
@@ -476,7 +477,7 @@ onShareTimeline(() => {

 .top-theme {
  position: absolute;
-  display: flex;
+  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
--- a/src/pages/match-detail.vue
+++ b/src/pages/match-detail.vue
@@ -20,25 +20,47 @@ onLoad(async (options) => {
  const result = await getBattleAPI(battleId.value);
  data.value = result;
  if (result.mode > 3) {
-    players.value = result.resultList.map((item, index) => {
-      const plist = result.teams[0] ? result.teams[0].players : [];
-      const p = plist.find((p) => p.id === item.userId);
+    const plist = result.teams[0] ? result.teams[0].players : [];
+    // 以 id 为 key 建立 teams 玩家快速查找表
+    const teamPlayerMap = {};
+    plist.forEach((p) => { teamPlayerMap[p.id] = p; });
+
+    // 处理有成绩的玩家（resultList 顺序即排名顺序）
+    const rankedPlayers = (result.resultList || []).map((item, index) => {
+      const playerId = item.userId || item.id;
+      const p = teamPlayerMap[playerId] || item;
      const arrows = new Array(12);
-      result.rounds.forEach((r, index) => {
-        if (r.shoots[item.userId]) {
-          r.shoots[item.userId].forEach((s, index2) => {
-            arrows[index2 + index * 6] = s;
+      result.rounds.forEach((r, rIndex) => {
+        if (r.shoots[playerId]) {
+          r.shoots[playerId].forEach((s, sIndex) => {
+            arrows[sIndex + rIndex * 6] = s;
          });
        }
      });
      return {
        ...item,
+        id: playerId,
        rank: index + 1,
-        name: p.name,
-        avatar: p.avatar || "",
+        name: (p && p.name) || item.name,
+        avatar: (p && p.avatar) || item.avatar || "",
        arrows,
      };
    });
+
+    // 追加未出现在 resultList 中的玩家（未射箭），rank=0 隐藏角标
+    const rankedIds = new Set(rankedPlayers.map((p) => p.id));
+    const unrankedPlayers = plist
+      .filter((p) => !rankedIds.has(p.id))
+      .map((p) => ({
+        id: p.id,
+        name: p.name,
+        avatar: p.avatar || "",
+        arrows: [],
+        totalScore: 0,
+        rank: 0,
+      }));
+
+    players.value = [...rankedPlayers, ...unrankedPlayers];
  }
 });

@@ -59,13 +81,14 @@ const checkBowData = (selected) => {
  <Container title="详情">
    <view class="container">
      <BattleHeader
+        v-if="data.mode <= 3"
        :winner="data.winTeam"
        :blueTeam="data.teams[1] ? data.teams[1].players : []"
        :redTeam="data.teams[2] ? data.teams[2].players : []"
        :players="players"
      />
      <view
-        v-if="data.mode >= 3"
+        v-if="data.mode > 3"
        class="score-header"
        :style="{ border: 'none', padding: '5px 15px' }"
      >
@@ -76,14 +99,14 @@ const checkBowData = (selected) => {
        </view>
      </view>
      <PlayerScore2
-        v-if="data.mode >= 3"
+        v-if="data.mode > 3"
        v-for="(player, index) in players"
        :key="index"
        :name="player.name"
        :avatar="player.avatar"
        :arrows="player.arrows"
        :totalScore="player.totalScore"
-        :rank="index + 1"
+        :rank="player.rank"
      />
      <view
        v-if="data.mode <= 3"
--- a/src/pages/match-page.vue
+++ b/src/pages/match-page.vue
@@ -3,22 +3,90 @@ import { ref, onMounted, onBeforeUnmount } from "vue";
 import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import Matching from "@/components/Matching.vue";
-import { matchGameAPI } from "@/apis";
+import { matchGameAPI, getBattleAPI } from "@/apis";
 import { MESSAGETYPESV2 } from "@/constants";

 const gameType = ref(0);
 const teamSize = ref(0);
 const onComplete = ref(null);

+/** 匹配超时计时器，用于检测 WS 消息丢失或真正超时 */
+const matchTimeoutTimer = ref(null);
+
+/** 匹配超时阈值（ms），后端设置 15s 匹配，前端预留 5s 冗余 */
+const MATCH_TIMEOUT_MS = 20 * 1000;
+
+/** 清除超时计时器 */
+const clearMatchTimeout = () => {
+  if (matchTimeoutTimer.value) {
+    clearTimeout(matchTimeoutTimer.value);
+    matchTimeoutTimer.value = null;
+  }
+};
+
+/**
+ * 超时处理：查询后端是否已分配对局
+ * - 有对局 → WS 消息丢失场景，自动跳入
+ * - 无对局 → 真正超时，提示用户并返回大厅
+ */
+const handleMatchTimeout = async () => {
+  try {
+    const battle = await getBattleAPI();
+    if (battle && battle.matchId) {
+      uni.showToast({ title: "匹配成功，正在进入...", icon: "none" });
+      if (battle.mode <= 3) {
+        uni.redirectTo({ url: `/pages/team-battle/index?battleId=${battle.matchId}` });
+      } else {
+        uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
+      }
+    } else {
+      uni.showToast({ title: "匹配超时，请重试", icon: "none" });
+      try {
+        if (gameType.value && teamSize.value) {
+          await matchGameAPI(false, gameType.value, teamSize.value);
+        }
+      } catch (_) { /* 取消失败忽略 */ }
+      uni.navigateBack();
+    }
+  } catch (e) {
+    uni.showToast({ title: "匹配超时，请重试", icon: "none" });
+    uni.navigateBack();
+  }
+};
+
 async function stopMatch() {
  uni.$showHint(3);
 }

+/**
+ * 取消匹配，带容错处理：
+ * - 取消成功 → 返回大厅
+ * - 取消失败（后端已分配对局但 WS 未到达）→ 查询并跳入当前对局
+ */
 async function cancelMatch() {
-  if (gameType.value && teamSize.value) {
-    await matchGameAPI(false, gameType.value, teamSize.value);
+  clearMatchTimeout();
+  try {
+    if (gameType.value && teamSize.value) {
+      await matchGameAPI(false, gameType.value, teamSize.value);
+    }
+    uni.navigateBack();
+  } catch (e) {
+    // 取消匹配接口失败，尝试查询是否已被分配对局
+    try {
+      const battle = await getBattleAPI();
+      if (battle && battle.matchId) {
+        if (battle.mode <= 3) {
+          uni.redirectTo({ url: `/pages/team-battle/index?battleId=${battle.matchId}` });
+        } else {
+          uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
+        }
+      } else {
+        uni.navigateBack();
+      }
+    } catch (_) {
+      uni.navigateBack();
+    }
  }
-  uni.navigateBack()
 }

 async function onReceiveMessage(msg) {
@@ -26,13 +94,17 @@ async function onReceiveMessage(msg) {
    onComplete.value = () => {}
  }
  if (msg.type === MESSAGETYPESV2.AboutToStart) {
-    if (gameType.value == 1) {
+    // 收到开始消息，清除超时计时器
+    clearMatchTimeout();
+    // 使用后端下发的 mode 字段判断跳转目标，与好友约战（battle-room.vue）保持一致
+    // mode <= 3 为团队对抗，mode > 3 为大乱斗，覆盖全部 gameType（1~5），不再遗漏
+    if (msg.mode <= 3) {
      uni.redirectTo({
-        url: `/pages/team-battle?battleId=${msg.id}&gameMode=2`,
+        url: `/pages/team-battle/index?battleId=${msg.id}`,
      });
-    } else if (gameType.value == 2) {
+    } else {
      uni.redirectTo({
-        url: `/pages/melee-battle?battleId=${msg.id}&gameMode=2`,
+        url: `/pages/melee-battle?battleId=${msg.id}`,
      });
    }
  }
@@ -54,6 +126,7 @@ onMounted(() => {
 });

 onBeforeUnmount(() => {
+  clearMatchTimeout();
  uni.setKeepScreenOn({
    keepScreenOn: false,
  });
@@ -64,6 +137,9 @@ onBeforeUnmount(() => {
 onShow(async () => {
  if (gameType.value && teamSize.value) {
    matchGameAPI(true, gameType.value, teamSize.value);
+    // 启动超时计时器，防止 WS 消息丢失或长时间无对手导致用户卡死
+    clearMatchTimeout();
+    matchTimeoutTimer.value = setTimeout(handleMatchTimeout, MATCH_TIMEOUT_MS);
  }
 });

--- a/src/pages/melee-battle.vue
+++ b/src/pages/melee-battle.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
 import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BowTarget from "@/components/BowTarget.vue";
@@ -10,16 +10,19 @@ import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import TestDistance from "@/components/TestDistance.vue";
+import SModal from "@/components/SModal.vue";
 import audioManager from "@/audioManager";
 import { getBattleAPI, laserCloseAPI } from "@/apis";
 import { MESSAGETYPESV2 } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { user } = storeToRefs(store);
+const { user, online } = storeToRefs(store);
 const title = ref("");
 const start = ref(null);
 const battleId = ref("");
+/** 对战模式：1=好友约战 2=排位赛，用于结算页跳转判断 */
+const way = ref(0);
 const currentRound = ref(1);
 const tips = ref("即将开始...");
 const players = ref([]);
@@ -27,16 +30,27 @@ const playersSorted = ref([]);
 const playersScores = ref([]);
 const halfTimeTip = ref(false);
 const halfRest = ref(false);
+/** 控制设备离线提示弹窗的显示状态 */
+const showOfflineModal = ref(false);
+/** 记录每位玩家当前半场连续 X 环数，key 为 playerId，用于触发 tententen 音效 */
+const xRingStreaks = ref({});

-const navigateToResult = () => {
-  uni.redirectTo({ url: `/pages/battle-result?battleId=${battleId.value}` });
-};
+/**
+ * 监听设备在线状态，大乱斗比赛进行中设备离线时弹窗提示用户
+ */
+watch(online, (newVal, oldVal) => {
+  if (!newVal && oldVal && start.value === true) {
+    showOfflineModal.value = true;
+  }
+});

 function recoverData(battleInfo, { force = false } = {}) {
  if (!battleInfo) return;
  try {
    if (battleInfo.way === 1) title.value = "好友约战 - 大乱斗";
    if (battleInfo.way === 2) title.value = "排位赛 - 大乱斗";
+    // 保存 way 供结算跳转时使用
+    way.value = battleInfo.way ?? 0;
    
    // 优先使用接口数据，否则使用缓存
    if (battleInfo.teams?.[0]?.players) {
@@ -108,6 +122,28 @@ onLoad(async (options) => {
  // });
 });

+/**
+ * 检测指定玩家连续 X 环是否达到 3 箭，达到则在环数播报入队后追加 tententen 音效
+ * @param {number|string} playerId - 本次射手的 ID（大乱斗中 ShootResult 保留 playerId）
+ * @param {boolean} isXRing - 本次射击是否为 X 环
+ */
+function checkAndPlayTententen(playerId, isXRing) {
+  if (!playerId) return;
+  const id = parseInt(playerId);
+  if (isXRing) {
+    xRingStreaks.value[id] = (xRingStreaks.value[id] || 0) + 1;
+    // 同一玩家连续 3 箭均为 X 环，追加到环数音效队列尾部播放
+    if (xRingStreaks.value[id] >= 3) {
+      xRingStreaks.value[id] = 0;
+      // nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen，避免播放顺序颠倒
+      nextTick(() => audioManager.play("tententen", false));
+    }
+  } else {
+    // 非 X 环则重置该玩家的连续计数
+    xRingStreaks.value[id] = 0;
+  }
+}
+
 async function onReceiveMessage(msg) {
  if (Array.isArray(msg)) return;
  if (msg.type === MESSAGETYPESV2.BattleStart) {
@@ -115,15 +151,37 @@ async function onReceiveMessage(msg) {
    halfRest.value = false;
    recoverData(msg);
  } else if (msg.type === MESSAGETYPESV2.ShootResult) {
+    // 更新前快照各玩家本轮已射箭数，用于事后识别本次射手
+    const curRound = playersScores.value[playersScores.value.length - 1] || {};
+    const prevCounts = {};
+    for (const pid of Object.keys(curRound)) {
+      prevCounts[pid] = (curRound[pid] || []).length;
+    }
    recoverData(msg);
+    // 对比更新后数据找出箭数增加的玩家（即本次射手），并读取其最新箭的 ring 数据
+    const newRound = playersScores.value[playersScores.value.length - 1] || {};
+    let shooterId = null;
+    let isXRing = false;
+    for (const pid of Object.keys(newRound)) {
+      const newLen = (newRound[pid] || []).length;
+      if (newLen > (prevCounts[pid] || 0)) {
+        shooterId = parseInt(pid);
+        const shot = newRound[pid][newLen - 1];
+        isXRing = !!(shot?.ringX && shot?.ring);
+        break;
+      }
+    }
+    // 检测同一玩家三箭全 X 环，触发 tententen 音效
+    checkAndPlayTententen(shooterId, isXRing);
  } else if (msg.type === MESSAGETYPESV2.HalfRest) {
    halfTimeTip.value = true;
    halfRest.value = true;
    tips.value = "准备下半场";
  } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
    setTimeout(() => {
+      // 全部跳转到新结算页
      uni.redirectTo({
-        url: "/pages/battle-result?battleId=" + msg.matchId,
+        url: "/pages/friend-battle-result?battleId=" + msg.matchId,
      });
    }, 1000);
  }
@@ -200,13 +258,25 @@ onShow(async () => {
      <ScreenHint
        :show="halfTimeTip"
        mode="small"
-        :onClose="() => (halfTimeTip = false)"
      >
        <view class="half-time-tip">
          <text>上半场结束，休息一下吧:）</text>
          <text>20秒后开始下半场</text>
        </view>
      </ScreenHint>
+      <!-- 设备离线提示弹窗 -->
+      <SModal
+        :show="showOfflineModal"
+        :noBg="true"
+        height="360rpx"
+        :onClose="() => (showOfflineModal = false)"
+      >
+        <view class="offline-modal">
+          <text class="offline-title">设备已离线</text>
+          <text class="offline-desc">检测到设备已断开连接，请检查设备后继续比赛</text>
+          <SButton @click="showOfflineModal = false">我知道了</SButton>
+        </view>
+      </SModal>
    </view>
  </Container>
 </template>
@@ -216,4 +286,25 @@ onShow(async () => {
  width: 100%;
  height: 100%;
 }
+
+.offline-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60rpx 40rpx 40rpx;
+  gap: 24rpx;
+}
+
+.offline-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #FED847;
+}
+
+.offline-desc {
+  font-size: 28rpx;
+  color: #CCCCCC;
+  text-align: center;
+  line-height: 1.6;
+}
 </style>
--- a/src/pages/my-device.vue
+++ b/src/pages/my-device.vue
@@ -130,7 +130,7 @@ onShow(() => {
 <template>
  <Container title="弓箭绑定">
    <view v-if="!device.deviceId" class="scan-code">
-      <button hover-class="none" @click="handleScan">
+      <button hover-class="none" @click="$clickSound(handleScan)">
        <image src="../static/scan.png" mode="widthFix" />
      </button>
      <button hover-class="none" @click="showTip = true">
@@ -212,33 +212,35 @@ onShow(() => {
          <text>{{ user.nickName }}</text>
        </view>
      </view>
-      <block v-if="calibration">
-        <SButton :onClick="toFristTryPage" width="60vw" :rounded="40"
-          >进入新手试炼</SButton
-        >
-        <view :style="{ marginTop: '15px' }">
-          <SButton
-            :onClick="backToHome"
-            backgroundColor="#fff3"
-            color="#fff"
-            width="60vw"
-            :rounded="40"
-            >返回首页</SButton
-          >
-        </view>
-      </block>
-      <block v-else>
+      <!-- <block v-if="calibration"> -->
        <view>
          <text>恭喜，你的弓箭和账号已成功绑定！</text>
          <text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
        </view>
-        <SButton :onClick="goCalibration" width="60vw" :rounded="40">
+        <!-- <SButton :onClick="goCalibration" width="60vw" :rounded="40">
          开启智能弓进行校准
        </SButton>
        <text :style="{ marginTop: '20rpx', fontSize: '24rpx', color: '#fff9' }"
          >校准时弓箭激光将开启，请勿直视激光</text
-        >
-      </block>
+        > -->
+
+        <view>
+          <SButton
+          :onClick="backToHome"
+          backgroundColor="#fff3"
+          color="#fff"
+          width="60vw"
+          :rounded="40"
+          >返回首页</SButton
+          >
+        </view>
+        <view :style="{ marginTop: '15px' }">
+          <SButton :onClick="toFristTryPage" width="60vw" :rounded="40">进入新手试炼</SButton>
+        </view>
+      <!-- </block> -->
+      <!-- <block v-else>
+        
+      </block> -->
    </view>
    <view v-if="device.deviceId && !justBind" class="has-device">
      <view class="device-binded">
@@ -269,7 +271,7 @@ onShow(() => {
        </view>
      </view>
      <view :style="{ marginTop: '240rpx' }">
-        <SButton :onClick="unbindDevice" width="80vw" :rounded="40"
+        <SButton :onClick="() => $clickSound(unbindDevice)" width="80vw" :rounded="40"
          >解绑</SButton
        >
      </view>
--- a/src/pages/my-growth.vue
+++ b/src/pages/my-growth.vue
@@ -55,7 +55,14 @@ const onPractiseLoading = async (page) => {
 };
 const getName = (battle) => {
  if (battle.mode <= 3) return `${battle.mode}V${battle.mode}`;
-  return battle.mode + "人大乱斗";
+  // 排位赛大乱斗：mode 数字与实际人数不一致，使用固定映射
+  if (battle.way === 2) {
+    if (battle.mode === 4) return "5人大乱斗";
+    if (battle.mode === 5) return "10人大乱斗";
+  }
+  // 好友约战大乱斗：从 teams[0].players 取实际参与人数动态展示
+  const count = battle.teams?.[0]?.players?.length;
+  return count ? `${count}人大乱斗` : "大乱斗";
 };

 /**
@@ -108,7 +115,7 @@ onLoad((options) => {
                :blueTeam="item.teams[1] ? item.teams[1].players : []"
                :redTeam="item.teams[2] ? item.teams[2].players : []"
                :winner="item.winTeam"
-                :showRank="item.teams[0]"
+                :showRank="!!item.teams[0]"
                :showHeader="false"
              />
            </view>
@@ -131,7 +138,7 @@ onLoad((options) => {
                :blueTeam="item.teams[1] ? item.teams[1].players : []"
                :redTeam="item.teams[2] ? item.teams[2].players : []"
                :winner="item.winTeam"
-                :showRank="item.teams[0]"
+                :showRank="!!item.teams[0]"
                :showHeader="false"
              />
            </view>
--- a/src/pages/point-book-create.vue
+++ b/src/pages/point-book-create.vue
@@ -114,7 +114,7 @@ onMounted(async () => {
      />
    </view>
    <template #bottom>
-      <SButton :rounded="50" :onClick="toEditPage">下一步</SButton>
+      <SButton :rounded="50" :onClick="() => $clickSound(toEditPage)">下一步</SButton>
    </template>
  </Container>
 </template>
--- a/src/pages/point-book-edit.vue
+++ b/src/pages/point-book-edit.vue
@@ -198,7 +198,7 @@ onLoad((options) => {
      </ScreenHint2>
    </view>
    <template #bottom>
-      <SButton :rounded="50" :onClick="onSubmit">
+      <SButton :rounded="50" :onClick="() => $clickSound(onSubmit)">
        {{ currentGroup === groups ? "保存并查看分析" : "下一组" }}
      </SButton>
    </template>
--- a/src/pages/point-book.vue
+++ b/src/pages/point-book.vue
@@ -329,10 +329,10 @@ onShareTimeline(() => {
            </view>
          </view>
          <view>
-            <button hover-class="none" @click="toRecordPage" class="image-btn">
+            <button hover-class="none" @click="$clickSound(toRecordPage)" class="image-btn">
              <image src="../static/record-btn.png" mode="widthFix" />
            </button>
-            <button hover-class="none" @click="startScoring" class="image-btn">
+            <button hover-class="none" @click="$clickSound(startScoring)" class="image-btn">
              <image src="../static/start-scoring.png" mode="widthFix" />
            </button>
          </view>
--- a/src/pages/practise-one.vue
+++ b/src/pages/practise-one.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
@@ -31,6 +31,8 @@ const { user } = storeToRefs(store);
 const start = ref(false);
 const scores = ref([]);
 const total = 12;
+/** 当前练习中连续 X 环计数，用于触发 tententen 音效 */
+const xRingStreak = ref(0);
 const practiseResult = ref({});
 const practiseId = ref("");
 const showGuide = ref(false);
@@ -46,6 +48,7 @@ onLoad((options) => {
 const onReady = async () => {
  await startPractiseAPI();
  scores.value = [];
+  xRingStreak.value = 0; // 新一局开始，重置 X 环连续计数
  start.value = true;
  audioManager.play("练习开始");
 };
@@ -55,9 +58,33 @@ const onOver = async () => {
  start.value = false;
 };

+/**
+ * 检测连续 X 环是否达到 3 箭，达到则播放 tententen 音效
+ * @param {boolean} isXRing - 本次射击是否为 X 环
+ */
+function checkAndPlayTententen(isXRing) {
+  if (isXRing) {
+    xRingStreak.value += 1;
+    // 连续 3 箭均为 X 环，在环数播报入队后追加 tententen，避免播放顺序颠倒
+    if (xRingStreak.value >= 3) {
+      xRingStreak.value = 0;
+      nextTick(() => audioManager.play("tententen", false));
+    }
+  } else {
+    // 非 X 环则重置连续计数
+    xRingStreak.value = 0;
+  }
+}
+
 async function onReceiveMessage(msg) {
  if (msg.type === MESSAGETYPESV2.ShootResult) {
+    const prevLen = scores.value.length;
    scores.value = msg.details;
+    // 有新箭时取最后一箭判断是否 X 环并检测连续计数
+    if (scores.value.length > prevLen) {
+      const latestArrow = scores.value[scores.value.length - 1];
+      checkAndPlayTententen(!!(latestArrow?.ringX && latestArrow?.ring));
+    }
  } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
    // setTimeout(onOver, 1500);
  }
@@ -74,6 +101,7 @@ async function onComplete() {
    practiseResult.value = {};
    start.value = false;
    scores.value = [];
+    xRingStreak.value = 0; // 重新开始练习，重置 X 环连续计数
    const result = await createPractiseAPI(total, 120);
    if (result) practiseId.value = result.id;
  }
--- a/src/pages/practise-two.vue
+++ b/src/pages/practise-two.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
 import Container from "@/components/Container.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import BowTarget from "@/components/BowTarget.vue";
@@ -31,6 +31,8 @@ const { user } = storeToRefs(store);
 const start = ref(false);
 const scores = ref([]);
 const total = 36;
+/** 当前练习中连续 X 环计数，用于触发 tententen 音效 */
+const xRingStreak = ref(0);
 const practiseResult = ref({});
 const practiseId = ref("");
 const showGuide = ref(false);
@@ -45,6 +47,7 @@ onLoad((options) => {
 const onReady = async () => {
  await startPractiseAPI();
  scores.value = [];
+  xRingStreak.value = 0; // 新一局开始，重置 X 环连续计数
  start.value = true;
  audioManager.play("练习开始");
 };
@@ -54,9 +57,33 @@ const onOver = async () => {
  start.value = false;
 };

+/**
+ * 检测连续 X 环是否达到 3 箭，达到则播放 tententen 音效
+ * @param {boolean} isXRing - 本次射击是否为 X 环
+ */
+function checkAndPlayTententen(isXRing) {
+  if (isXRing) {
+    xRingStreak.value += 1;
+    // 连续 3 箭均为 X 环，在环数播报入队后追加 tententen，避免播放顺序颠倒
+    if (xRingStreak.value >= 3) {
+      xRingStreak.value = 0;
+      nextTick(() => audioManager.play("tententen", false));
+    }
+  } else {
+    // 非 X 环则重置连续计数
+    xRingStreak.value = 0;
+  }
+}
+
 async function onReceiveMessage(msg) {
  if (msg.type === MESSAGETYPESV2.ShootResult) {
+    const prevLen = scores.value.length;
    scores.value = msg.details;
+    // 有新箭时取最后一箭判断是否 X 环并检测连续计数
+    if (scores.value.length > prevLen) {
+      const latestArrow = scores.value[scores.value.length - 1];
+      checkAndPlayTententen(!!(latestArrow?.ringX && latestArrow?.ring));
+    }
  } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
    setTimeout(onOver, 1500);
  }
@@ -89,6 +116,7 @@ async function onComplete() {
    practiseResult.value = {};
    start.value = false;
    scores.value = [];
+    xRingStreak.value = 0; // 重新开始练习，重置 X 环连续计数
    const result = await createPractiseAPI(total, 3600);
    if (result) practiseId.value = result.id;
  }
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -281,27 +281,27 @@ onShow(async () => {
        <image
          src="../static/rank/battle1v1.svg"
          mode="widthFix"
-          @click.stop="() => toMatchPage(1, 2)"
+          @click.stop="$clickSound(() => toMatchPage(1, 2))"
        />
        <image
          src="../static/rank/battle2v2.svg"
          mode="widthFix"
-          @click.stop="() => toMatchPage(2, 4)"
+          @click.stop="$clickSound(() => toMatchPage(2, 4))"
        />
        <image
          src="../static/rank/battle3v3.svg"
          mode="widthFix"
-          @click.stop="() => toMatchPage(3, 6)"
+          @click.stop="$clickSound(() => toMatchPage(3, 6))"
        />
        <image
          src="../static/rank/battle5.svg"
          mode="widthFix"
-          @click.stop="() => toMatchPage(4, 5)"
+          @click.stop="$clickSound(() => toMatchPage(4, 5))"
        />
        <image
          src="../static/rank/battle10.svg"
          mode="widthFix"
-          @click.stop="() => toMatchPage(5, 10)"
+          @click.stop="$clickSound(() => toMatchPage(5, 10))"
        />
      </view>
    </view>
@@ -323,6 +323,7 @@ onShow(async () => {
          >
            <text>{{ seasonName }}</text>
            <image
+              class="triangle-icon"
              v-show="seasonData.length > 1"
              src="../static/rank/triangle.png"
              mode="widthFix"
@@ -592,6 +593,7 @@ onShow(async () => {
 .ranking-season > image {
  width: 12px;
  height: 12px;
+  transform: rotateX(180deg);
 }

 .ranking-season > text {
@@ -807,18 +809,18 @@ onShow(async () => {
 }

 .season-list {
-  background-color: #000c;
+  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  color: #fff;
  font-size: 12px;
-  padding: 5px 0;
+  padding: 12px 0;
  position: absolute;
  width: 220rpx;
  height: auto;
  max-height: 400rpx;
  overflow: hidden;
  overflow-y: auto;
-  top: -44rpx;
+  top: -42rpx;
  right: -30rpx;
  letter-spacing: 2px;
  z-index: 10;
@@ -829,7 +831,7 @@ onShow(async () => {
  display: flex;
  align-items: center;
  word-break: keep-all;
-  padding: 20rpx 0;
+  padding: 20rpx 10rpx;
 }

 .season-list > view > text {
--- a/src/pages/team-battle.vue
+++ b/src/pages/team-battle.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref, onMounted, onBeforeUnmount, nextTick} from "vue";
+import {ref, onMounted, onBeforeUnmount, nextTick, watch} from "vue";
 import {onLoad, onShow, onHide} from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BattleHeader from "@/components/BattleHeader.vue";
@@ -11,6 +11,7 @@ import RoundEndTip from "@/components/RoundEndTip.vue";
 import TestDistance from "@/components/TestDistance.vue";
 import TeamAvatars from "@/components/TeamAvatars.vue";
 import ShootProgress2 from "@/components/ShootProgress2.vue";
+import SModal from "@/components/SModal.vue";
 import {laserCloseAPI, getBattleAPI} from "@/apis";
 import {MESSAGETYPESV2} from "@/constants";
 import audioManager from "@/audioManager";
@@ -18,11 +19,13 @@ import useStore from "@/store";
 import {storeToRefs} from "pinia";

 const store = useStore();
-const {user} = storeToRefs(store);
+const {user, online} = storeToRefs(store);
 const start = ref(null);
 const tips = ref("");
 const battleId = ref("");
 const currentRound = ref(0);
+/** 专用于 RoundEndTip 展示的轮次，与进度条的 currentRound 解耦，避免 ToSomeoneShoot 提前更新 currentRound 导致 Tip 显示错误轮次 */
+const roundTipRound = ref(0);
 const goldenRound = ref(0);
 const currentRedPoint = ref(0);
 const currentBluePoint = ref(0);
@@ -38,10 +41,31 @@ const showRoundTip = ref(false);
 const isFinalShoot = ref(false);
 const matchStatus = ref(undefined);
 const updateRemainSecond = ref(0);
+/** 当前对局每人射击时间（秒），从后端 shootTime 字段动态读取，默认 15 */
+const shootTimeTotal = ref(15);
+/** 对战来源类型（1=好友约战，2=匹配对战），用于结算页分流 */
+const battleWay = ref(0);
+/** 上一次处理的 ToSomeoneShoot 关键字段，用于去重过滤重复消息 */
+const lastToSomeoneShootKey = ref("");
+/** 控制设备离线提示弹窗的显示状态 */
+const showOfflineModal = ref(false);
+/** 记录每位玩家当前轮连续 X 环数，key 为 playerId，用于触发 tententen 音效 */
+const xRingStreaks = ref({});
+
+/**
+ * 监听设备在线状态，比赛进行中设备离线时弹窗提示用户
+ */
+watch(online, (newVal, oldVal) => {
+  if (!newVal && oldVal && start.value === true) {
+    showOfflineModal.value = true;
+  }
+});

 const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
  try {
    battleId.value = battleInfo.matchId;
+    // 存储对战来源，供结算跳转分流使用
+    if (battleInfo.way !== undefined) battleWay.value = battleInfo.way;

    // 优先使用接口返回的队伍数据，如果没有则尝试从缓存读取（应对匹配刚完成接口未就绪的情况）
    const t1 = battleInfo.teams?.[1] || {};
@@ -71,6 +95,8 @@ const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
      return;
    }
    if (!arrowOnly) {
+      // 在 ToSomeoneShoot 时同步更新当前轮次，使进度条轮次图片及时切换
+      currentRound.value = battleInfo.current.round || 1;
      currentShooterId.value = battleInfo.current.playerId;
      const redPlayer = battleInfo.teams[2].players.find(
          (item) => item.id === battleInfo.current.playerId
@@ -78,22 +104,64 @@ const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
      let nextTips = redPlayer ? "请红队射箭" : "请蓝队射箭";
      if (force) nextTips += "重回";
      if (
-          battleInfo.current.playerId === user.value.id &&
-          redTeam.value.length > 1
+          battleInfo.current.playerId === user.value.id
      ) {
        nextTips += "你";
      }
+      // 同队连续出手时 tips 值不变，HeaderProgress watch 不触发音频
+      // 需在赋值前比较旧值，手动播放音频确保始终触发 onAudioEnded 启动计时器
+      // 注意：使用 interrupt=false 避免打断上一支箭的环数播报音频
+      if (tips.value === nextTips && !nextTips.includes("重回")) {
+        const audioKey = redPlayer ? "请红方射箭" : "请蓝方射箭";
+        audioManager.play(audioKey, false);
+      }
      tips.value = nextTips;
-      uni.$emit("update-tips", nextTips);
-      uni.$emit("update-remain", {reset: true, value: 15, team: redTeam?'red':'blue'});
+      // 同步写入 Pinia store，供 HeaderProgress 通过 immediate watch 在 onMounted 时立即读取
+      // 规避 WeChat 小程序 onShow 在组件 onMounted 之前触发导致 uni.$emit 事件丢失的时序问题
+      store.updateTips(nextTips);
+      // force 模式下改为在 nextTick 内发送 update-tips，规避 WeChat 小程序
+      // onShow 与 onMounted 时序问题导致 HeaderProgress 监听器尚未注册的边界情况
+      if (!force) {
+        uni.$emit("update-tips", nextTips);
+      }
+      // redPlayer 已在上方 find() 确认：不为 null 则当前射手在红队
+      const targetTeam = redPlayer ? 'red' : 'blue';
+      // 从后端消息读取本局射击时间，动态设置进度条满值与倒计时秒数（降级兜底 15s）
+      shootTimeTotal.value = battleInfo.shootTime ?? 15;
      if (force) {
-        const remain = (Date.now() - battleInfo.current.startTime) / 1000;
-        console.log(`当前轮已进行${remain}秒`);
-        if (remain > 0 && remain < 15) {
-          updateRemainSecond.value = 15 - remain - 0.2
+        // force 模式下 start.value 刚由 null 变 true，Vue 异步调度渲染，
+        // ShootProgress2（v-if="start"）尚未挂载，update-remain 事件会被丢弃。
+        // 同时 HeaderProgress 对含"重回"的 tips 拦截音频，倒计时无法依赖
+        // onAudioEnded 驱动，需在 nextTick 后直接启动。
+
+        // playerId=0 表示后端处于过渡状态（上一位射手已完成、下一位尚未分配）
+        // 此时 startTime/targetTeam 均不可靠，停止进度条并等待 WS ToSomeoneShoot 驱动
+        if (!battleInfo.current.playerId) {
+          nextTick(() => {
+            uni.$emit("update-tips", nextTips);
+            uni.$emit("update-remain", {stop: true});
+          });
+          return;
        }
+
+        const elapsed = (Date.now() - battleInfo.current.startTime) / 1000;
+        if (elapsed > 0 && elapsed < shootTimeTotal.value) {
+          updateRemainSecond.value = shootTimeTotal.value - elapsed - 0.2;
+        }
+        const actualRemain = updateRemainSecond.value;
+        nextTick(() => {
+          // 在 nextTick 内统一发送，确保 ShootProgress2 和 HeaderProgress 均已挂载
+          uni.$emit("update-tips", nextTips);
+          uni.$emit("update-remain", {reset: true, value: shootTimeTotal.value, team: targetTeam});
+          // 重置动画完成后，直接启动倒计时（无需依赖音频结束回调）
+          setTimeout(() => {
+            uni.$emit("update-remain", {stop: false, value: actualRemain, team: targetTeam});
+          }, 100);
+        });
      } else {
-        updateRemainSecond.value = battleInfo.readyTime
+        // ToSomeoneShoot 到达时：若进度条仍在倒计时则瞬间清零再切换满值，确保视觉连贯
+        uni.$emit("update-remain", {zeroThenReset: true, value: shootTimeTotal.value, team: targetTeam});
+        updateRemainSecond.value = shootTimeTotal.value;
      }
    } else {
      currentRound.value = battleInfo.current.round || 1;
@@ -113,27 +181,47 @@ const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
 };

 function onAudioEnded(s) {
-  if (s.indexOf('请红方射箭') >= 0 || s.indexOf('请蓝方射箭') >= 0) {
-    let team = s.indexOf('请红方射箭') >= 0 ? 'red' : 'blue';
+  // "请红方射箭"/"请蓝方射箭"：队友或对手轮次；"轮到你了"：用户本人轮次（HeaderProgress特殊分支）
+  // 三者音频结束后均需启动倒计时进度条
+  if (s.indexOf('请红方射箭') >= 0 || s.indexOf('请蓝方射箭') >= 0 || s.indexOf('轮到你了') >= 0) {
+    let team;
+    if (s.indexOf('请红方射箭') >= 0) team = 'red';
+    else if (s.indexOf('请蓝方射箭') >= 0) team = 'blue';
+    else team = tips.value.includes('红队') ? 'red' : 'blue'; // 轮到你了：从当前tips判断用户所在队伍
    uni.$emit("update-remain", {stop: false, value: updateRemainSecond.value, team: team});
  }
  if (s.indexOf("比赛结束") >= 0) {
+    console.log("比赛结束");
    onBattleEnd()
  }
 }

 function onBattleEnd() {
  if (matchStatus.value === 2) {
+    // 全部跳转到新结算页
    uni.redirectTo({
-      url: `/pages/battle-result?battleId=${battleId.value}`,
+      url: `/pages/friend-battle-result?battleId=${battleId.value}`,
    });
  }
 }

-function onNewRound(msg) {
+/**
+ * @param {object} msg - NewRound 消息
+ * @param {number} prevRound - 在 NewRound 消息到达时即时捕获的旧轮次，用于 Tip 展示，避免异步延迟内 currentRound 已被更新
+ */
+function onNewRound(msg, prevRound) {
  showRoundTip.value = true;
  isFinalShoot.value = msg.current.goldRound;
-  const latestRound = msg.rounds[currentRound.value - 1];
+  // 新轮次开始时立即清空靶纸箭迹，避免残留上一轮落点至新轮次第一箭到来
+  scores.value = [];
+  blueScores.value = [];
+  // 决金轮箭数不确定（平局后可能再加一箭），清零 totalShot 隐藏箭数显示
+  if (msg.current.goldRound) {
+    store.updateShotInfo(0, 0);
+  }
+  // 用传入的 prevRound（捕获时刻的旧轮次）展示结算 Tip，与进度条 currentRound 解耦
+  roundTipRound.value = prevRound;
+  const latestRound = msg.rounds[prevRound - 1];
  if (latestRound) {
    if (isFinalShoot.value) {
      currentBluePoint.value = msg.teams[1].score;
@@ -145,19 +233,49 @@ function onNewRound(msg) {
  }
 }

+/**
+ * 检测指定射手连续 X 环是否达到 3 箭，达到则在环数播报入队后追加 tententen 音效
+ * @param {number} shooterId - 本次射手的 ID（取自 currentShooterId.value）
+ * @param {boolean} isXRing - 本次射击是否为 X 环
+ */
+function checkAndPlayTententen(shooterId, isXRing) {
+  if (!shooterId) return;
+  if (isXRing) {
+    xRingStreaks.value[shooterId] = (xRingStreaks.value[shooterId] || 0) + 1;
+    // 同一玩家连续 3 箭均为 X 环，追加到环数音效队列尾部播放
+    if (xRingStreaks.value[shooterId] >= 3) {
+      xRingStreaks.value[shooterId] = 0;
+      // nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen，避免播放顺序颠倒
+      nextTick(() => audioManager.play("tententen", false));
+    }
+  } else {
+    // 非 X 环则重置该玩家的连续计数
+    xRingStreaks.value[shooterId] = 0;
+  }
+}
+
 async function onReceiveMessage(msg) {
  if (Array.isArray(msg)) return;
  if (msg.type === MESSAGETYPESV2.BattleStart) {
    start.value = true;
  } else if (msg.type === MESSAGETYPESV2.ToSomeoneShoot) {
+    // 去重防护：如果 playerId + round 与上一次处理完全相同，则忽略重复推送的消息
+    // （防止 onBeforeUnmount 未及时 off 和页面重创建导致同一事件被处理多次）
+    const key = `${msg?.current?.playerId}-${msg?.current?.round}`;
+    if (key === lastToSomeoneShootKey.value) return;
+    lastToSomeoneShootKey.value = key;
    recoverData(msg);
  } else if (msg.type === MESSAGETYPESV2.ShootResult) {
-    uni.$emit("update-remain", {stop: true})
    showRoundTip.value = false;
    recoverData(msg, {arrowOnly: true});
+    // 检测同一玩家三箭全 X 环，触发 tententen 音效
+    // currentShooterId 在 ToSomeoneShoot 时写入，ShootResult 不会覆盖，可靠识别本次射手
+    checkAndPlayTententen(currentShooterId.value, !!(msg.shootData?.ringX && msg.shootData?.ring));
  } else if (msg.type === MESSAGETYPESV2.NewRound) {
+    // 在进入延迟前先捕获当前轮次，供 onNewRound 使用，防止 800ms 内 ToSomeoneShoot 提前更新 currentRound 造成 Tip 展示错轮
+    const prevRound = currentRound.value;
    setTimeout(() => {
-      onNewRound(msg)
+      onNewRound(msg, prevRound)
    }, 800)
  } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
    matchStatus.value = msg.status;
@@ -174,6 +292,9 @@ async function onReceiveMessage(msg) {

 onLoad(async (options) => {
  if (options.battleId) battleId.value = options.battleId;
+  // 重置箭数和提示文案，防止因 Pinia 保留上一场比赛的旧值而错误展示
+  store.updateShotInfo(0, 0);
+  store.updateTips("");
  // uni.enableAlertBeforeUnload({
  //   message: "离开比赛可能导致比赛失败，是否继续？",
  //   success: (res) => {
@@ -193,23 +314,37 @@ onBeforeUnmount(() => {
  uni.setKeepScreenOn({
    keepScreenOn: false,
  });
+  // 注销所有第三方事件盓听，防止页面重创建时监听叠加导致消息重复处理
+  uni.$off("socket-inbox", onReceiveMessage);
  uni.$off("audioEnded", onAudioEnded);
  audioManager.stopAll();
 });
 const refreshTimer = ref(null);
 onShow(async () => {
  if (battleId.value) {
+    // 延迟 300ms 等待网络恢复，避免小程序从后台切回时网络尚未就绪导致请求失败报错
+    await new Promise(resolve => setTimeout(resolve, 300));
    const result = await getBattleAPI(battleId.value);
    if (!result) return;
    if (result.status === 2) {
-      uni.showToast({
-        title: "比赛已结束",
-        icon: "none",
-      });
-      uni.navigateBack({
-        delta: 2,
+      // 比赛已结束（如切后台再回来）：跳新结算页
+      uni.redirectTo({
+        url: `/pages/friend-battle-result?battleId=${result.matchId}`,
      });
    } else {
+      if (result.status !== 0) {
+        // 比赛进行中，从后端恢复箭数（测距阶段不展示）
+        // 决金轮不展示箭数；其余轮次从 indexMap 按用户 id 取已射箭数
+        if (result.shootNumber && !result.current?.goldRound) {
+          store.updateShotInfo(result.current?.indexMap?.[user.value.id] ?? 0, result.shootNumber);
+        }
+      } else {
+        // 测距阶段重置箭数和提示文案，防止 ImmediateWatcher 读取 Pinia 保留的旧值
+        store.updateShotInfo(0, 0);
+        // 同步清空 Pinia tips 与本地 tips，避免重新开赛时 HeaderProgress 展示上一场旧文案
+        store.updateTips("");
+        tips.value = "";
+      }
      recoverData(result, {force: true});
    }
  }
@@ -219,10 +354,12 @@ onShow(async () => {
 <template>
  <Container :bgType="start ? 3 : 1">
    <view class="container">
+      <!-- winner=0 表示对局尚未开始，不显示胜者徽章 -->
      <BattleHeader
          v-if="start === false"
          :redTeam="redTeam"
          :blueTeam="blueTeam"
+          :winner="0"
      />
      <TestDistance v-if="start === false" :guide="false" :isBattle="true"/>
      <view v-if="start" class="players-row">
@@ -233,6 +370,7 @@ onShow(async () => {
        />
        <ShootProgress2
            :tips="tips"
+            :total="shootTimeTotal"
            :currentRound="
            goldenRound > 0 ? 'gold' + goldenRound : 'round' + currentRound
          "
@@ -254,21 +392,33 @@ onShow(async () => {
      />
      <ScreenHint
          :show="showRoundTip"
-          :onClose="() => (showRoundTip = false)"
          :mode="isFinalShoot ? 'tall' : 'normal'"
      >
        <RoundEndTip
            v-if="showRoundTip"
            :isFinal="isFinalShoot"
-            :round="currentRound"
+            :round="roundTipRound"
            :bluePoint="currentBluePoint"
            :redPoint="currentRedPoint"
            :roundData="
-            roundResults[currentRound - 1] ? roundResults[currentRound - 1] : []
+            roundResults[roundTipRound - 1] ? roundResults[roundTipRound - 1] : []
          "
            :onAutoClose="()=>{ showRoundTip = false}"
        />
      </ScreenHint>
+      <!-- 设备离线提示弹窗 -->
+      <SModal
+          :show="showOfflineModal"
+          :noBg="true"
+          height="360rpx"
+          :onClose="() => (showOfflineModal = false)"
+      >
+        <view class="offline-modal">
+          <text class="offline-title">设备已离线</text>
+          <text class="offline-desc">检测到设备已断开连接，请检查设备后继续比赛</text>
+          <SButton @click="showOfflineModal = false">我知道了</SButton>
+        </view>
+      </SModal>
    </view>
  </Container>
 </template>
@@ -286,4 +436,25 @@ onShow(async () => {
  margin-top: -2%;
  margin-bottom: 6%;
 }
+
+.offline-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60rpx 40rpx 40rpx;
+  gap: 24rpx;
+}
+
+.offline-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #FED847;
+}
+
+.offline-desc {
+  font-size: 28rpx;
+  color: #CCCCCC;
+  text-align: center;
+  line-height: 1.6;
+}
 </style>
--- a/src/pages/team-battle/components/AppBackground.vue
+++ b/src/pages/team-battle/components/AppBackground.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { capsuleHeight } from "@/util";
+
+const props = defineProps({
+  type: {
+    type: Number,
+    default: 0,
+  },
+  bgColor: {
+    type: String,
+    default: "#050b19",
+  },
+});
+</script>
+
+<template>
+  <view class="background" :style="{ backgroundColor: bgColor }">
+    <image
+      class="bg-image"
+      v-if="type === 0"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
+      mode="widthFix"
+    />
+    <image
+      class="bg-image"
+      v-if="type === 1"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg2.png"
+      mode="widthFix"
+    />
+    <image
+      class="bg-image"
+      v-if="type === 2"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg3.png"
+      :style="{ height: capsuleHeight + 50 + 'px' }"
+    />
+    <image
+      class="bg-image"
+      v-if="type === 3"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg4.png"
+      mode="widthFix"
+    />
+    <image
+      class="bg-image"
+      v-if="type === 4"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg5.png"
+      mode="widthFix"
+    />
+    <image
+      class="bg-image"
+      v-if="type === 5"
+      src="https://static.shelingxingqiu.com/attachment/2026-01-05/dfgf3b5kp459tfyn0f.png"
+      mode="widthFix"
+    />
+	<image
+	  class="bg-image"
+	  v-if="type === 6"
+	  src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png"
+	  mode="widthFix"
+	/>
+    <view class="bg-overlay" v-if="type === 0"></view>
+  </view>
+</template>
+
+<style scoped>
+.background {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+
+.bg-image {
+  width: 100%;
+  /* height: 100%; */
+}
+
+.bg-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(26, 26, 26, 0.2),
+    rgba(0, 0, 0, 0.2)
+  );
+}
+</style>
--- a/src/pages/team-battle/components/Avatar.vue
+++ b/src/pages/team-battle/components/Avatar.vue
@@ -0,0 +1,123 @@
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { getLvlImage } = store;
+const { config } = storeToRefs(store);
+const props = defineProps({
+  src: {
+    type: String,
+    default: "",
+  },
+  rankLvl: {
+    type: Number,
+    default: undefined,
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+  rank: {
+    type: Number,
+    default: 0,
+  },
+  size: {
+    type: Number,
+    default: 45,
+  },
+  borderColor: {
+    type: String,
+    default: "",
+  },
+});
+const avatarFrame = ref("");
+watch(
+  () => [config.value, props.rankLvl],
+  () => {
+    if (props.rankLvl !== undefined) {
+      avatarFrame.value = getLvlImage(props.rankLvl);
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
+<template>
+  <view class="avatar" @click="onClick">
+    <image
+      v-if="avatarFrame"
+      :src="avatarFrame"
+      mode="widthFix"
+      :style="{
+        width: Number(size) + 10 + 'px',
+        height: Number(size) + 10 + 'px',
+      }"
+      class="avatar-frame"
+    />
+    <image
+      v-if="rank === 1"
+      src="../../../static/champ1.png"
+      mode="widthFix"
+      class="avatar-rank"
+    />
+    <image
+      v-if="rank === 2"
+      src="../../../static/champ2.png"
+      mode="widthFix"
+      class="avatar-rank"
+    />
+    <image
+      v-if="rank === 3"
+      src="../../../static/champ3.png"
+      mode="widthFix"
+      class="avatar-rank"
+    />
+    <view v-if="rank > 3" class="rank-view">{{ rank }}</view>
+    <image
+      :src="src || '../../../static/user-icon.png'"
+      mode="widthFix"
+      :style="{
+        width: size + 'px',
+        height: size + 'px',
+        minHeight: size + 'px',
+        borderColor: borderColor || '#fff',
+      }"
+      class="avatar-image"
+    />
+  </view>
+</template>
+
+<style scoped>
+.avatar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.avatar-frame {
+  position: absolute;
+}
+.avatar-rank,
+.rank-view {
+  position: absolute;
+  width: 20px;
+  height: 15px;
+  top: -6px;
+  right: -4px;
+}
+.rank-view {
+  background-color: #6d6d6d;
+  text-align: center;
+  line-height: 15px;
+  font-size: 12px;
+  border-top-left-radius: 50%;
+  border-bottom-right-radius: 50%;
+}
+.avatar-image {
+  border-radius: 50%;
+  border: 1px solid #fff;
+}
+</style>
--- a/src/pages/team-battle/components/BackToGame.vue
+++ b/src/pages/team-battle/components/BackToGame.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+
+import { getBattleAPI, getUserGameState } from "@/apis";
+import { debounce } from "@/util";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user, game } = storeToRefs(store);
+const { updateGame } = store;
+
+const props = defineProps({
+  signin: {
+    type: Function,
+    default: () => {},
+  },
+});
+const loading = ref(false);
+
+/** 统一获取当前环境 token，用于守卫：无有效 token 时不发起接口请求 */
+const getToken = () =>
+  uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
+
+onShow(async () => {
+  if (user.value.id && getToken()) {
+    setTimeout(async () => {
+      const state = await getUserGameState();
+      updateGame(state.gaming, state.roomId);
+    }, 1000);
+  }
+});
+
+watch(
+  () => user.value,
+  async (value) => {
+    if (!value.id) {
+      updateGame(false, "");
+    } else if (getToken()) {
+      // 有有效 token 时才查询在局状态，避免 token 失效时反复发起无效请求
+      const state = await getUserGameState();
+      updateGame(state.gaming, state.roomId);
+    }
+  }
+);
+
+const onClick = debounce(async () => {
+  if (loading.value) return;
+  try {
+    loading.value = true;
+    const result = await getBattleAPI();
+    if (result && result.matchId) {
+      await uni.$checkAudio();
+      if (result.mode <= 3) {
+        uni.navigateTo({
+          url: `/pages/team-battle/index?battleId=${result.matchId}`,
+        });
+      } else {
+        uni.navigateTo({
+          url: `/pages/melee-battle?battleId=${result.matchId}`,
+        });
+      }
+      return;
+    }
+    if (game.value.roomID) {
+      uni.navigateTo({
+        url: "/pages/battle-room?roomNumber=" + game.value.roomID,
+      });
+    } else {
+      updateGame(false, "");
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+const gameOver = () => {
+  updateGame(false, "");
+};
+onMounted(() => {
+  uni.$on("game-over", gameOver);
+});
+onBeforeUnmount(() => {
+  uni.$off("game-over", gameOver);
+});
+</script>
+
+<template>
+  <view
+    v-if="game.inBattle || game.roomID"
+    class="back-to-game"
+    @click="onClick"
+  >
+    <image src="../../../static/back-to-game-bg.png" mode="widthFix" />
+    <block v-if="game.inBattle">
+      <image src="../../../static/pk-icon.png" mode="widthFix" />
+      <text>返回进行中的对局</text>
+    </block>
+    <block v-else-if="game.roomID">
+      <text>返回房间</text>
+    </block>
+    <image src="../../../static/back.png" mode="widthFix" />
+  </view>
+</template>
+
+<style scoped>
+.back-to-game {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  width: 56vw;
+  left: calc(50% - 28vw);
+  top: 12%;
+  z-index: 999;
+}
+.back-to-game > image:first-child {
+  position: absolute;
+  width: 100%;
+  height: 100rpx;
+}
+.back-to-game > image:nth-child(2) {
+  position: relative;
+  width: 60px;
+  height: 60px;
+}
+.back-to-game > text {
+  position: relative;
+  font-size: 14px;
+}
+.back-to-game > image:last-child {
+  position: relative;
+  width: 15px;
+  margin-left: 5px;
+  transform: rotate(180deg);
+}
+</style>
--- a/src/pages/team-battle/components/BattleFooter.vue
+++ b/src/pages/team-battle/components/BattleFooter.vue
@@ -0,0 +1,203 @@
+=
+<script setup>
+import { computed } from "vue";
+import BowPower from "./BowPower.vue";
+import { RoundImages } from "@/constants";
+const props = defineProps({
+  roundResults: {
+    type: Array,
+    default: () => [],
+  },
+  bluePoints: {
+    type: Number,
+    default: 0,
+  },
+  redPoints: {
+    type: Number,
+    default: 0,
+  },
+  goldenRound: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const normalRounds = computed(() => {
+  const count = props.roundResults.findIndex((item) => !!item.ifGold);
+  return count > 0 ? count : props.roundResults.length;
+});
+</script>
+
+<template>
+  <view class="container">
+    <view class="guide-row">
+      <image src="../../../static/shooter.png" mode="widthFix" />
+      <view
+        :style="{
+          marginBottom: '10px',
+          transform: 'scale(0.8) translateX(10px)',
+        }"
+      >
+        <BowPower />
+      </view>
+    </view>
+    <view>
+      <image src="../../../static/battle-header-melee.png" mode="widthFix" />
+      <text>蓝队({{ bluePoints }})</text>
+      <text>红队({{ redPoints }})</text>
+    </view>
+    <view class="players">
+      <view>
+        <view v-for="(result, index) in roundResults" :key="index">
+          <block v-if="index + 1 > normalRounds">
+            <image
+              :src="RoundImages[`gold${index + 1 - normalRounds}`]"
+              mode="widthFix"
+            />
+          </block>
+          <block v-else>
+            <image :src="RoundImages[`round${index + 1}`]" mode="widthFix" />
+          </block>
+          <view>
+            <text>{{
+              result.shoots[1] && result.shoots[1].length
+                ? result.shoots[1]
+                    .map((item) => item.ring)
+                    .reduce((last, next) => last + next, 0)
+                : ""
+            }}</text>
+            <text>环</text>
+          </view>
+        </view>
+        <block v-if="roundResults.length < 3">
+          <view v-for="i in 3 - roundResults.length" :key="i">
+            <image
+              :src="RoundImages[`round${i + roundResults.length}`]"
+              mode="widthFix"
+            />
+            <view>
+              <text></text>
+              <text>环</text>
+            </view>
+          </view>
+        </block>
+      </view>
+      <view>
+        <view v-for="(result, index) in roundResults" :key="index">
+          <block v-if="index + 1 > normalRounds">
+            <image
+              :src="RoundImages[`gold${index + 1 - normalRounds}`]"
+              mode="widthFix"
+            />
+          </block>
+          <block v-else>
+            <image :src="RoundImages[`round${index + 1}`]" mode="widthFix" />
+          </block>
+          <view>
+            <text>{{
+              result.shoots[2] && result.shoots[2].length
+                ? result.shoots[2]
+                    .map((item) => item.ring)
+                    .reduce((last, next) => last + next, 0)
+                : ""
+            }}</text>
+            <text>环</text>
+          </view>
+        </view>
+        <block v-if="roundResults.length < 3">
+          <view v-for="i in 3 - roundResults.length" :key="i">
+            <image
+              :src="RoundImages[`round${i + roundResults.length}`]"
+              mode="widthFix"
+            />
+            <view>
+              <text></text>
+              <text>环</text>
+            </view>
+          </view>
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  overflow: hidden;
+  margin-top: -100rpx;
+}
+.container > view:nth-child(2) {
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 13px;
+}
+.container > view:nth-child(2) > image:first-child {
+  position: absolute;
+  width: 100%;
+  top: -6px;
+}
+.container > view:nth-child(2) > text {
+  z-index: 1;
+  margin-top: 2px;
+  color: #8a323e;
+  font-weight: 500;
+}
+.container > view:nth-child(2) > text:nth-child(2) {
+  color: #004ac1;
+}
+.players {
+  display: flex;
+}
+.players > view {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  padding-top: 5px;
+}
+.players > view:first-child > view {
+  background: linear-gradient(270deg, #172a86 0%, #0000 100%);
+}
+.players > view:last-child > view {
+  background: linear-gradient(270deg, #0000 0%, #6a1212 100%);
+}
+.players > view > view {
+  min-height: 52rpx;
+  width: calc(100% - 40px);
+  padding: 2px 20px;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.players > view > view > image:first-child {
+  width: 135rpx;
+  height: 20px;
+}
+.players > view > view > view:last-child {
+  font-size: 10px;
+}
+.players > view > view > view:last-child > text:first-child {
+  font-size: 16px;
+  color: #fed847;
+  margin-right: 5px;
+  font-weight: 500;
+}
+.guide-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding: 0 5vw;
+  margin-bottom: -4px;
+  z-index: 2;
+  position: relative;
+}
+.guide-row > image {
+  width: 140rpx;
+}
+</style>
--- a/src/pages/team-battle/components/BattleHeader.vue
+++ b/src/pages/team-battle/components/BattleHeader.vue
@@ -0,0 +1,200 @@
+<script setup>
+import Avatar from "./Avatar.vue";
+import { meleeAvatarColors } from "@/constants";
+defineProps({
+  players: {
+    type: Array,
+    default: () => [],
+  },
+  blueTeam: {
+    type: Array,
+    default: () => [],
+  },
+  redTeam: {
+    type: Array,
+    default: () => [],
+  },
+  showRank: {
+    type: Boolean,
+    default: false,
+  },
+  winner: {
+    type: Number,
+    default: 2,
+  },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ paddingTop: showHeader ? '5px' : '0' }">
+    <image
+      v-if="showHeader"
+      :src="`../../../static/battle-header${players.length ? '-melee' : ''}.png`"
+      mode="widthFix"
+    />
+    <view
+      v-if="!players.length && blueTeam.length && redTeam.length"
+      class="players"
+      :style="{ paddingTop: showHeader ? '15px' : '0' }"
+    >
+      <view>
+        <view
+          v-for="(player, index) in blueTeam"
+          :key="index"
+          :style="{
+            margin: blueTeam.length === 2 ? '0 -5px' : '0 6px',
+            width: `${100 / blueTeam.length - blueTeam.length * 3}%`,
+          }"
+        >
+          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
+          <text class="player-name">{{ player.name }}</text>
+        </view>
+        <image
+          v-if="winner === 1"
+          src="../../../static/winner-badge.png"
+          mode="widthFix"
+          class="left-winner-badge"
+        />
+      </view>
+      <view>
+        <view
+          v-for="(player, index) in redTeam"
+          :key="index"
+          :style="{
+            margin: redTeam.length === 2 ? '0 -5px' : '0 6px',
+            width: `${100 / redTeam.length - redTeam.length * 3}%`,
+          }"
+        >
+          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
+          <text class="player-name">{{ player.name }}</text>
+        </view>
+        <image
+          v-if="winner === 2"
+          src="../../../static/winner-badge.png"
+          mode="widthFix"
+          class="right-winner-badge"
+        />
+      </view>
+    </view>
+    <!-- 大乱斗玩家列表：scroll-view 作为横向滚动容器 -->
+    <!-- 小程序中 scroll-view 不支持直接 display:flex，需内部 wrapper view 承载 flex 布局 -->
+    <!-- 仅当玩家 >5 人（内容溢出宽度）时才阻止冒泡，防止与外层 swiper 切换 tab 的手势冲突 -->
+    <scroll-view
+      v-if="players.length"
+      class="players-melee"
+      scroll-x
+      @touchmove="(e) => players.length > 5 && e.stopPropagation()"
+      :style="{ paddingTop: showHeader ? '15px' : '0' }"
+    >
+      <view class="players-melee-inner">
+        <view
+          v-for="(player, index) in players"
+          :key="index"
+          :style="{
+            backgroundColor: meleeAvatarColors[index],
+            width: `${Math.max(100 / players.length, 18)}vw`,
+          }"
+        >
+          <Avatar
+            :src="player.avatar"
+            :rankLvl="showRank ? undefined : player.rankLvl"
+            :size="40"
+            :rank="showRank ? index + 1 : 0"
+          />
+          <text class="player-name">{{ player.name }}</text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  position: relative;
+  margin-bottom: 10px;
+}
+.container > image:first-child {
+  position: absolute;
+  width: 100%;
+  top: -5px;
+  z-index: 1;
+}
+.players {
+  display: flex;
+}
+.players > view {
+  width: 50%;
+  height: 75px;
+  color: #fff9;
+  font-size: 12px;
+  overflow: hidden;
+  position: relative;
+  padding-top: 5px;
+  display: flex;
+  justify-content: center;
+}
+.players > view:first-child {
+  background-color: #364469;
+}
+.players > view:last-child {
+  background-color: #692735;
+}
+.players > view > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.players-melee {
+  height: 80px;
+  width: 100%;
+}
+.players-melee::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+/* 小程序 scroll-view 不支持直接 flex，通过内层 wrapper 承载横向排列 */
+.players-melee-inner {
+  display: flex;
+  height: 100%;
+  flex-wrap: nowrap;
+}
+.players-melee-inner > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff9;
+  font-size: 12px;
+  padding-top: 7px;
+  flex: 0 0 auto;
+}
+.player-name {
+  margin-top: 3px;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+.left-winner-badge {
+  position: absolute;
+  width: 50px;
+  top: -12%;
+  left: -5%;
+  transform: rotate(-12deg);
+}
+.right-winner-badge {
+  position: absolute;
+  width: 50px;
+  top: -12%;
+  right: -5%;
+  transform: rotate(36deg);
+}
+</style>
--- a/src/pages/team-battle/components/BowPower.vue
+++ b/src/pages/team-battle/components/BowPower.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { getDeviceBatteryAPI } from "@/apis";
+
+const power = ref(0);
+const timer = ref(null);
+
+onMounted(async () => {
+  const data = await getDeviceBatteryAPI();
+  power.value = data.battery;
+  timer.value = setInterval(async () => {
+    const data = await getDeviceBatteryAPI();
+    power.value = data.battery;
+  }, 1000 * 10);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="container">
+    <image src="../../../static/b-power.png" mode="widthFix" />
+    <view>电量{{ power || 1 }}%</view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  color: #ffffffa8;
+  font-size: 13px;
+}
+.container > image {
+  width: 20px;
+  margin-right: 5px;
+}
+</style>
--- a/src/pages/team-battle/components/BowTarget.vue
+++ b/src/pages/team-battle/components/BowTarget.vue
@@ -0,0 +1,518 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
+import PointSwitcher from "./PointSwitcher.vue";
+
+import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
+import { simulShootAPI } from "@/apis";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user, device } = storeToRefs(store);
+
+const props = defineProps({
+  currentRound: {
+    type: Number,
+    default: 0,
+  },
+  totalRound: {
+    type: Number,
+    default: 0,
+  },
+  scores: {
+    type: Array,
+    default: () => [],
+  },
+  blueScores: {
+    type: Array,
+    default: () => [],
+  },
+  latestShotFlash: {
+    type: Object,
+    default: null,
+  },
+  mode: {
+    type: String,
+    default: "solo", // solo 单排，team 双排
+  },
+  stop: {
+    type: Boolean,
+    default: false,
+  },
+  targetRadius: {
+    type: Number,
+    default: 20,
+  },
+  hitRadiusPx: {
+    type: Number,
+    default: 2,
+  },
+  zoomHitRadiusPx: {
+    type: Number,
+    default: 5,
+  },
+});
+
+const pMode = ref(true);
+const latestOne = ref(null);
+const bluelatestOne = ref(null);
+const timer = ref(null);
+const dirTimer = ref(null);
+const angle = ref(null);
+const circleColor = ref("");
+
+function showShotFlash(flash) {
+  const shootData = flash?.shootData;
+  if (!shootData) return;
+  if (timer.value) clearTimeout(timer.value);
+
+  if (flash.team === "red") {
+    latestOne.value = shootData;
+    timer.value = setTimeout(() => {
+      latestOne.value = null;
+    }, 1000);
+    return;
+  }
+
+  bluelatestOne.value = shootData;
+  timer.value = setTimeout(() => {
+    bluelatestOne.value = null;
+  }, 1000);
+}
+
+watch(
+  () => props.latestShotFlash,
+  (newVal) => {
+    showShotFlash(newVal);
+  },
+  { immediate: true }
+);
+
+const safeTargetRadius = computed(() => {
+  const radius = Number(props.targetRadius);
+  return Number.isFinite(radius) && radius > 0 ? radius : 20;
+});
+
+const currentHitRadiusPx = computed(() => {
+  const radius = Number(
+    pMode.value ? props.zoomHitRadiusPx : props.hitRadiusPx
+  );
+  return Number.isFinite(radius) && radius >= 0 ? radius : 0;
+});
+
+function getShotPoint(shot, fallbackCenter = false) {
+  const x = Number(shot?.x);
+  const y = Number(shot?.y);
+  if (Number.isFinite(x) && Number.isFinite(y)) return { x, y };
+  return fallbackCenter ? { x: 0, y: 0 } : null;
+}
+
+function getPointDirection(point) {
+  if (!point) return null;
+  const distance = Math.sqrt(point.x * point.x + point.y * point.y);
+  if (distance === 0) return null;
+
+  return {
+    x: point.x / distance,
+    y: point.y / distance,
+  };
+}
+
+function formatPxOffset(value) {
+  if (!value) return "";
+  const operator = value > 0 ? "+" : "-";
+  return ` ${operator} ${Math.abs(value)}px`;
+}
+
+function formatTargetPosition(percent, offset) {
+  const pxOffset = formatPxOffset(offset);
+  return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
+}
+
+function getTargetPositionStyle(point, offsetPx = 0) {
+  if (!point) return { display: "none" };
+
+  const radius = safeTargetRadius.value;
+  const diameter = radius * 2;
+  const direction = getPointDirection(point);
+  const xOffset = direction ? direction.x * offsetPx : 0;
+  const yOffset = direction ? -direction.y * offsetPx : 0;
+  const leftPercent = ((point.x + radius) / diameter) * 100;
+  const topPercent = ((radius - point.y) / diameter) * 100;
+
+  return {
+    left: formatTargetPosition(leftPercent, xOffset),
+    top: formatTargetPosition(topPercent, yOffset),
+    transform: "translate(-50%, -50%)",
+  };
+}
+
+function getHitStyle(shot) {
+  const radius = currentHitRadiusPx.value;
+  const point = getShotPoint(shot);
+
+  return {
+    ...getTargetPositionStyle(point, radius),
+    width: `${radius * 2}px`,
+    height: `${radius * 2}px`,
+  };
+}
+
+function getTipStyle(shot) {
+  const point = getShotPoint(shot, true);
+  return getTargetPositionStyle(point, shot?.ring ? currentHitRadiusPx.value : 0);
+}
+const simulShoot = async () => {
+  if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
+};
+const simulShoot2 = async () => {
+  if (device.value.deviceId) {
+    const r1 = Math.random() > 0.5 ? 0.01 : 0.02;
+    await simulShootAPI(device.value.deviceId, r1, r1);
+  }
+};
+
+const env = computed(() => {
+  const accountInfo = uni.getAccountInfoSync();
+  return accountInfo.miniProgram.envVersion;
+});
+
+const arrowStyle = computed(() => {
+  return {
+    transform: `rotateX(180deg) translate(-50%, -50%) rotate(${
+      360 - angle.value
+    }deg) translateY(105%)`,
+  };
+});
+
+async function onReceiveMessage(message) {
+  if (Array.isArray(message)) return;
+  if (message.type === MESSAGETYPESV2.ShootResult && message.shootData) {
+    if (
+      message.shootData.playerId === user.value.id &&
+      !message.shootData.ring &&
+      message.shootData.angle >= 0
+    ) {
+      angle.value = null;
+      setTimeout(() => {
+        if (props.scores[0]) {
+          circleColor.value =
+            message.shootData.playerId === props.scores[0].playerId
+              ? "#ff4444"
+              : "#1840FF";
+        }
+        angle.value = message.shootData.angle;
+      }, 200);
+    }
+  }
+}
+
+onMounted(() => {
+  uni.$on("socket-inbox", onReceiveMessage);
+});
+
+onBeforeUnmount(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+    timer.value = null;
+  }
+  if (dirTimer.value) {
+    clearTimeout(dirTimer.value);
+    dirTimer.value = null;
+  }
+  uni.$off("socket-inbox", onReceiveMessage);
+});
+</script>
+
+<template>
+  <view class="container">
+    <view class="header" v-if="totalRound > 0">
+      <text v-if="totalRound > 0" class="round-count">{{
+        (currentRound > totalRound ? totalRound : currentRound) +
+        "/" +
+        totalRound
+      }}</text>
+    </view>
+    <view class="target">
+      <view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
+        <view :style="{ background: circleColor }">
+          <image src="../../../static/dot-circle.png" mode="widthFix" />
+        </view>
+      </view>
+      <view v-if="stop" class="stop-sign">中场休息</view>
+      <view
+        v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
+        class="e-value fade-in-out"
+        :style="getTipStyle(latestOne)"
+      >
+        经验 +1
+      </view>
+      <view
+        v-if="latestOne"
+        class="round-tip fade-in-out"
+        :style="getTipStyle(latestOne)"
+        >{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
+        }}<text v-if="latestOne.ring">环</text>
+      </view>
+      <view
+        v-if="
+          bluelatestOne &&
+          bluelatestOne.ring &&
+          user.id === bluelatestOne.playerId
+        "
+        class="e-value fade-in-out"
+        :style="getTipStyle(bluelatestOne)"
+      >
+        经验 +1
+      </view>
+      <view
+        v-if="bluelatestOne"
+        class="round-tip fade-in-out"
+        :style="getTipStyle(bluelatestOne)"
+        >{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
+        }}<text v-if="bluelatestOne.ring">环</text></view
+      >
+      <block v-for="(bow, index) in scores" :key="index">
+        <view
+          v-if="bow.ring > 0"
+          :class="`hit ${pMode ? 'b' : 's'}-point ${
+            index === scores.length - 1 && latestOne ? 'pump-in' : ''
+          }`"
+          :style="{
+            ...getHitStyle(bow),
+            backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
+          }"
+          ><text v-if="pMode">{{ index + 1 }}</text></view
+        >
+      </block>
+      <block v-for="(bow, index) in blueScores" :key="index">
+        <view
+          v-if="bow.ring > 0"
+          :class="`hit ${pMode ? 'b' : 's'}-point ${
+            index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
+          }`"
+          :style="{
+            ...getHitStyle(bow),
+            backgroundColor: '#1840FF',
+          }"
+        >
+          <text v-if="pMode">{{ index + 1 }}</text>
+        </view>
+      </block>
+      <image src="../../../static/bow-target.png" mode="widthFix" />
+    </view>
+    <view class="footer">
+      <PointSwitcher
+        :onChange="(val) => (pMode = val)"
+        :style="{ zIndex: 999 }"
+      />
+    </view>
+    <view class="simul" v-if="env !== 'release'">
+      <button @click="simulShoot">模拟</button>
+      <button @click="simulShoot2">射箭</button>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: calc(100vw - 30px);
+  height: calc(100vw - 30px);
+  padding: 0px 15px;
+  position: relative;
+}
+.target {
+  position: relative;
+  margin: 10px;
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
+  z-index: -1;
+}
+.e-value {
+  position: absolute;
+  background-color: #0006;
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 7px;
+  border-radius: 5px;
+  z-index: 2;
+  width: 50px;
+  text-align: center;
+}
+.round-tip {
+  position: absolute;
+  color: #fff;
+  font-size: 30px;
+  font-weight: bold;
+  z-index: 2;
+  width: 100px;
+  text-align: center;
+}
+.round-tip > text {
+  font-size: 24px;
+  margin-left: 5px;
+}
+.target > image:last-child {
+  width: 100%;
+  height: 100%;
+}
+.hit {
+  position: absolute;
+  border-radius: 50%;
+  z-index: 1;
+  color: #fff;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+.b-point {
+  border: 1px solid #fff;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.b-point > text {
+  font-size: 16rpx;
+  color: #fff;
+  font-family: "DINCondensed";
+  /* text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);*/
+  margin-top: 2rpx;
+}
+@keyframes target-pump-in {
+  from {
+    transform: translate(-50%, -50%) scale(2);
+  }
+
+  to {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+.hit.pump-in {
+  animation: target-pump-in 0.3s ease-out forwards;
+  transform-origin: center center;
+}
+.header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: -40px;
+}
+.header > image:first-child {
+  width: 40px;
+  height: 40px;
+}
+.round-count {
+  font-size: 20px;
+  color: #fed847;
+  top: 75px;
+  font-weight: bold;
+}
+.footer {
+  width: calc(100% - 20px);
+  padding: 0 10px;
+  display: flex;
+  margin-top: -40px;
+  justify-content: flex-end;
+}
+.footer > image {
+  width: 40px;
+  min-height: 40px;
+  max-height: 40px;
+  border-radius: 50%;
+  border: 1px solid #fff;
+}
+.simul {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  margin-left: 20px;
+  z-index: 999;
+}
+.simul > button {
+  color: #fff;
+}
+.stop-sign {
+  position: absolute;
+  font-size: 44px;
+  color: #fff9;
+  text-align: center;
+  width: 200px;
+  height: 60px;
+  left: calc(50% - 100px);
+  top: calc(50% - 30px);
+  z-index: 99;
+  font-weight: bold;
+}
+.arrow-dir {
+  position: absolute;
+  width: 100%;
+  height: 52%;
+  left: 50%;
+  bottom: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.arrow-dir > view {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+}
+.arrow-dir > view > image {
+  width: 100rpx;
+  height: 100rpx;
+  transform: translate(-30%, -30%);
+}
+@keyframes spring-in {
+  0% {
+    transform: scale(2);
+    opacity: 0.4;
+  }
+  15% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  30% {
+    transform: scale(2);
+    opacity: 0.4;
+  }
+  45% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  60% {
+    transform: scale(2);
+    opacity: 0.4;
+  }
+  75% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+@keyframes disappear {
+  0% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.arrow-dir > view {
+  animation: disappear 3s ease forwards;
+}
+.arrow-dir > view > image {
+  animation: spring-in 3s ease forwards;
+  width: 100%;
+}
+</style>
--- a/src/pages/team-battle/components/Container.vue
+++ b/src/pages/team-battle/components/Container.vue
@@ -0,0 +1,353 @@
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+import AppBackground from "./AppBackground.vue";
+import Header from "./Header.vue";
+import ScreenHint from "./ScreenHint.vue";
+import BackToGame from "./BackToGame.vue";
+import {laserAimAPI, getBattleAPI, matchGameAPI} from "@/apis";
+import { capsuleHeight, debounce } from "@/util";
+import AudioManager from "@/audioManager";
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  bgType: {
+    type: Number,
+    default: 0,
+  },
+  onBack: {
+    type: Function,
+    default: null,
+  },
+  scroll: {
+    type: Boolean,
+    default: true,
+  },
+  isHome: {
+    type: Boolean,
+    default: false,
+  },
+  showBackToGame: {
+    type: Boolean,
+    default: false,
+  },
+  bgColor: {
+    type: String,
+    default: "#050b19",
+  },
+  whiteBackArrow: {
+    type: Boolean,
+    default: true,
+  },
+  showBottom: {
+    type: Boolean,
+    default: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingText: {
+    type: String,
+    default: "",
+  },
+});
+const isIOS = uni.getDeviceInfo().osName === "ios";
+const showHint = ref(false);
+const hintType = ref(0);
+const isLoading = ref(false);
+const audioInitProgress = ref(1);
+const audioProgress = ref(0);
+const audioTimer = ref(null);
+
+const showGlobalHint = (type) => {
+  hintType.value = type;
+  showHint.value = true;
+};
+
+const hideGlobalHint = () => {
+  showHint.value = false;
+};
+
+const restart = () => {
+  uni.restartMiniProgram({
+    path: "/pages/index",
+  });
+};
+
+const checkAudioProgress = async () => {
+  return new Promise((resolve, reject) => {
+    try {
+      audioInitProgress.value = AudioManager.getLoadProgress();
+      if (audioInitProgress.value === 1) return resolve();
+      audioTimer.value = setInterval(() => {
+        audioProgress.value = AudioManager.getLoadProgress();
+        if (audioProgress.value === 1) {
+          setTimeout(() => {
+            audioInitProgress.value = 1;
+          }, 200);
+          clearInterval(audioTimer.value);
+          resolve();
+        }
+      }, 200);
+    } catch (err) {
+      reject(err);
+    }
+  });
+};
+
+const audioFinalProgress = computed(() => {
+  const left = 1 - audioInitProgress.value;
+  if (left <= 0) return 0;
+  return Math.max(0, (audioProgress.value - audioInitProgress.value) / left);
+});
+
+const loadingProgress = computed(() => {
+  if (props.loading && audioInitProgress.value >= 1) return 1;
+  return audioFinalProgress.value;
+});
+
+onBeforeUnmount(() => {
+  if (audioTimer.value) clearInterval(audioTimer.value);
+});
+
+onShow(() => {
+  uni.$showHint = showGlobalHint;
+  uni.$hideHint = hideGlobalHint;
+  uni.$checkAudio = checkAudioProgress;
+  showHint.value = false;
+});
+
+const backToGame = debounce(async () => {
+  if (isLoading.value) return; // 防止重复点击
+
+  try {
+    isLoading.value = true;
+    const result = await getBattleAPI();
+    if (result && result.matchId) {
+      await checkAudioProgress();
+      if (result.mode <= 3) {
+        uni.navigateTo({
+          url: `/pages/team-battle/index?battleId=${result.matchId}`,
+        });
+      } else {
+        uni.navigateTo({
+          url: `/pages/melee-battle?battleId=${result.matchId}`,
+        });
+      }
+    }
+  } catch (error) {
+    console.error("获取当前游戏失败:", error);
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+const goBack = () => {
+  uni.navigateBack();
+};
+
+const cancelMatching = async () => {
+  uni.$emit("cancelMatching");
+}
+
+const goCalibration = async () => {
+  await laserAimAPI();
+  uni.navigateTo({
+    url: "/pages/calibration",
+  });
+};
+</script>
+
+<template>
+  <view :style="{ paddingTop: capsuleHeight + 'px' }">
+    <AppBackground :type="bgType" :bgColor="bgColor" />
+    <Header
+      v-if="!isHome"
+      :title="title"
+      :onBack="onBack"
+      :whiteBackArrow="whiteBackArrow"
+    />
+    <BackToGame v-if="showBackToGame" />
+    <scroll-view
+      :scroll-y="scroll"
+      :enhanced="true"
+      :bounces="false"
+      :show-scrollbar="false"
+      :style="{
+        height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px - ${
+          $slots.bottom && showBottom ? (isIOS ? '75px' : '65px') : '0px'
+        })`,
+      }"
+    >
+      <slot></slot>
+    </scroll-view>
+    <view
+      class="bottom-part"
+      v-if="$slots.bottom && showBottom"
+      :style="{ height: isIOS ? '65px' : '55px', paddingTop: '10px' }"
+    >
+      <slot name="bottom"></slot>
+    </view>
+    <ScreenHint :show="showHint">
+      <view v-if="hintType === 1" class="tip-content">
+        <text>完成进行中的对局才能开启新的。</text>
+        <text>您有正在进行中的对局，是否进入?</text>
+        <view>
+          <button hover-class="none" @click="() => (showHint = false)">
+            不进入
+          </button>
+          <button hover-class="none" @click="backToGame" :disabled="isLoading">
+            {{ isLoading ? "加载中..." : "进入" }}
+          </button>
+        </view>
+      </view>
+      <view v-if="hintType === 2" class="tip-content">
+        <text>离开比赛可能会导致比赛失败，</text>
+        <text>确认离开吗？</text>
+        <view>
+          <button hover-class="none" @click="goBack">离开比赛</button>
+          <button hover-class="none" @click="() => (showHint = false)">
+            继续比赛
+          </button>
+        </view>
+      </view>
+      <view v-if="hintType === 3" class="tip-content">
+        <text>今天不玩了吗？</text>
+        <view>
+          <button hover-class="none" @click="() => (showHint = false)">
+            取消
+          </button>
+          <button hover-class="none" @click="$clickSound(cancelMatching)">确认</button>
+        </view>
+      </view>
+      <view v-if="hintType === 4" class="tip-content">
+        <text>完成智能弓校准，即可解锁全部功能</text>
+        <view>
+          <button hover-class="none" @click="() => (showHint = false)">
+            取消
+          </button>
+          <button hover-class="none" @click="goCalibration">去校准</button>
+        </view>
+      </view>
+    </ScreenHint>
+    <view v-if="loading || audioInitProgress < 1" class="audio-progress">
+      <image
+        src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png"
+        mode="widthFix"
+      />
+      <view>
+        <view :style="{ width: `${loadingProgress * 100}%` }">
+          <!-- <image
+            src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a7si77sg9jqv.png"
+            mode="widthFix"
+          /> -->
+        </view>
+      </view>
+      <view>
+        <text>{{ loading ? loadingText || "加载中..." : "若加载时间过长，请" }}</text>
+        <button v-if="!loading" hover-class="none" @click="restart">点击这里重启</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.tip-content {
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  width: 100%;
+  font-size: 14px;
+}
+.tip-content > text {
+  text-align: center;
+}
+.tip-content > view {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 50rpx;
+  width: 100%;
+}
+.tip-content > view > button {
+  padding: 12px;
+  border-radius: 20px;
+  background-color: #fff6;
+  color: #fff;
+  width: 45%;
+  font-size: 16px;
+}
+.tip-content > view > button:last-child {
+  background-color: #fed847;
+  color: #000;
+}
+
+.tip-content > view > button:disabled {
+  background-color: #ccc;
+  color: #666;
+  opacity: 0.6;
+}
+.audio-progress {
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgb(0 0 0 / 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.audio-progress > image:nth-child(1) {
+  width: 140rpx;
+  height: 150rpx;
+  margin-bottom: 20rpx;
+}
+.audio-progress > view:nth-child(2) {
+  width: 380rpx;
+  height: 6rpx;
+  background: #595959;
+  border-radius: 4rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.audio-progress > view:nth-child(2) > view {
+  background: #ffe431;
+  min-height: 6rpx;
+  border-radius: 4rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  transition: width 0.5s ease;
+}
+.audio-progress > view:nth-child(2) > view > image {
+  width: 46rpx;
+  height: 26rpx;
+}
+.audio-progress > view:nth-child(3) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.audio-progress > view:nth-child(3) > text {
+  font-size: 22rpx;
+  color: #a2a2a2;
+  text-align: center;
+  line-height: 32rpx;
+}
+.audio-progress > view:nth-child(3) > button {
+  font-size: 22rpx;
+  color: #ffe431;
+  line-height: 32rpx;
+  padding: 20rpx 0;
+}
+</style>
--- a/src/pages/team-battle/components/Guide.vue
+++ b/src/pages/team-battle/components/Guide.vue
@@ -0,0 +1,60 @@
+<script setup>
+defineProps({
+  noBg: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: Number,
+    default: 0,
+  },
+});
+const bubbleTypes = [
+  "../../../static/long-bubble.png",
+  "../../../static/long-bubble-middle.png",
+  "../../../static/long-bubble-tall.png",
+];
+</script>
+
+<template>
+  <view class="container">
+    <image src="../../../static/shooter.png" mode="widthFix" />
+    <view>
+      <image
+        v-if="!noBg"
+        :src="bubbleTypes[type]"
+        :style="{ top: type === 2 ? '-6%' : '-13%' }"
+        mode="widthFix"
+      />
+      <slot />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  width: clac(100% - 30px);
+}
+.container > image {
+  width: 20%;
+}
+.container > view {
+  position: relative;
+  width: 80%;
+  min-height: 55px;
+  display: flex;
+  flex-direction: column;
+}
+.container > view > image {
+  position: absolute;
+  left: -7%;
+  width: 108%;
+}
+.container > view {
+  color: #fff;
+  font-size: 28rpx;
+}
+</style>
--- a/src/pages/team-battle/components/Header.vue
+++ b/src/pages/team-battle/components/Header.vue
@@ -0,0 +1,328 @@
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import HeaderProgress from "./HeaderProgress.vue";
+import Avatar from "./Avatar.vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user, game } = storeToRefs(store);
+
+const currentPage = computed(() => {
+  const pages = getCurrentPages();
+  return pages[pages.length - 1].route;
+});
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  onBack: {
+    type: Function,
+    default: null,
+  },
+  whiteBackArrow: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const onClick = () => {
+  if (props.onBack) {
+    props.onBack();
+  } else {
+    const pages = getCurrentPages();
+    if (pages.length > 1) {
+      uni.navigateBack();
+    } else {
+      uni.redirectTo({
+        url: "/pages/index",
+      });
+    }
+  }
+};
+
+const toUserPage = () => {
+  uni.navigateTo({
+    url: "/pages/user",
+  });
+};
+
+const signin = () => {
+  if (!user.value.id) {
+    uni.$emit("point-book-signin");
+  }
+};
+
+const loading = ref(false);
+const pointBook = ref(null);
+const heat = ref(0);
+/** 房间号按钮动态定位样式（position: fixed，根据胶囊真实位置计算，脱离 flex 流避免挤压标题） */
+const battleRoomBtnStyle = ref({});
+
+const updateLoading = (value) => {
+  loading.value = value;
+};
+
+const updateHot = (value) => {
+  heat.value = value;
+};
+
+onMounted(() => {
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  if (
+    currentPage.route === "pages/point-book-edit" ||
+    currentPage.route === "pages/point-book-detail"
+  ) {
+    pointBook.value = uni.getStorageSync("point-book");
+    if (!pointBook.value) {
+      pointBook.value = uni.getStorageSync("last-point-book");
+    }
+  }
+  // 仅在对战房间页获取胶囊位置，按钮用 fixed 定位精确贴靠胶囊左侧（脱离 flex 流，不挤压标题）
+  if (currentPage.route === "pages/battle-room") {
+    try {
+      const menuButtonRect = uni.getMenuButtonBoundingClientRect();
+      const { windowWidth } = uni.getSystemInfoSync();
+      battleRoomBtnStyle.value = {
+        // 按钮右边缘距视口右侧 = 屏幕宽 - 胶囊左边缘 + 4px 安全间隙
+        right: (windowWidth - menuButtonRect.left + 4) + "px",
+        // 垂直位置与胶囊顶部对齐
+        top: menuButtonRect.top + "px",
+        // 高度与胶囊一致，视觉融合
+        height: menuButtonRect.height + "px",
+      };
+    } catch (e) {
+      // 获取失败时使用 CSS 兜底定位（28vw + 4px 作为 right，8px 作为 top）
+    }
+  }
+  uni.$on("update-hot", updateHot);
+});
+onBeforeUnmount(() => {
+  uni.$off("update-hot", updateHot);
+});
+</script>
+
+<template>
+  <view class="container">
+    <view class="back-btn" @click="onClick">
+      <image v-if="whiteBackArrow" src="../../../static/back.png" mode="widthFix" />
+      <image
+        v-if="!whiteBackArrow"
+        src="../../../static/back-black.png"
+        mode="widthFix"
+      />
+    </view>
+    <view :style="{ color: whiteBackArrow ? '#fff' : '#000' }">
+      <view
+        v-if="currentPage === 'pages/point-book'"
+        class="user-header"
+        @click="signin"
+      >
+        <block v-if="user.id">
+          <Avatar
+            :src="user.avatar"
+            :onClick="toUserPage"
+            :size="40"
+            borderColor="#333"
+          />
+          <text class="truncate">{{ user.nickName }}</text>
+          <image
+            v-if="heat"
+            :src="`../../../static/hot${heat}.png`"
+            mode="widthFix"
+          />
+        </block>
+        <block v-else>
+          <image src="../../../static/user-icon.png" mode="widthFix" />
+          <text>新来的弓箭手你好呀~</text>
+        </block>
+      </view>
+      <block
+        v-if="
+          '-箭前准备-感知距离-小试牛刀'.indexOf(title) === -1 ||
+          '-箭前准备-感知距离-小试牛刀'.indexOf(title) === 11
+        "
+      >
+        <text>{{ title }}</text>
+      </block>
+      <block
+        v-if="
+          title &&
+          '-箭前准备-感知距离-小试牛刀'.indexOf(title) !== -1 &&
+          '-箭前准备-感知距离-小试牛刀'.indexOf(title) !== 11
+        "
+      >
+        <view class="first-try-steps">
+          <text :class="title === '-箭前准备' ? 'current-step' : ''">箭前准备</text>
+          <text>-</text>
+          <text :class="title === '-感知距离' ? 'current-step' : ''"
+            >感知距离</text
+          >
+          <text>-</text>
+          <text :class="title === '-小试牛刀' ? 'current-step' : ''"
+            >小试牛刀</text
+          >
+        </view>
+      </block>
+    </view>
+    <view v-if="pointBook" class="point-book-info">
+      <text>{{ pointBook.bowType.name }}</text>
+      <text>{{ pointBook.distance }} 米</text>
+      <text
+        >{{
+          pointBook.bowtargetType.name.substring(
+            0,
+            pointBook.bowtargetType.name.length - 3
+          )
+        }}
+        {{
+          pointBook.bowtargetType.name.substring(
+            pointBook.bowtargetType.name.length - 3
+          )
+        }}</text
+      >
+    </view>
+    <view
+      v-if="
+        currentPage === 'pages/team-battle' ||
+        currentPage === 'pages/team-battle/index'
+      "
+      class="battle-progress"
+    >
+      <HeaderProgress />
+    </view>
+    <!-- 对战房间：整个胶囊为分享按钮，房号从 Store 读取；fixed 定位紧靠系统胶囊左侧 -->
+    <button
+      v-if="currentPage === 'pages/battle-room' && game.roomNumber"
+      open-type="share"
+      hover-class="none"
+      class="battle-room-number"
+      :style="battleRoomBtnStyle"
+    >
+      <text class="battle-room-number__text">房号: {{ game.roomNumber }}</text>
+      <image src="../../../static/share2.png" mode="widthFix" class="battle-room-number__icon" />
+    </button>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 72vw;
+  height: 50px;
+  /* margin-top: var(--status-bar-height); */
+  padding-left: 15px;
+}
+.container > view:nth-child(2) {
+  font-size: 16px;
+  font-weight: bold;
+}
+.back-btn {
+  display: flex;
+  align-items: center;
+}
+.back-btn > image {
+  width: 22px;
+  height: 22px;
+  margin-right: 10px;
+}
+.first-try-steps {
+  display: flex;
+  align-items: center;
+  color: #fff6;
+  font-size: 14px;
+}
+.first-try-steps > text {
+  transition: all 0.3s ease;
+}
+.first-try-steps > text:nth-child(2),
+.first-try-steps > text:nth-child(4) {
+  margin: 0 5px;
+}
+.current-step {
+  font-size: 16px;
+  color: #fff;
+}
+.point-book-info {
+  color: #333;
+  position: fixed;
+  width: 60%;
+  left: 20%;
+  display: flex;
+  justify-content: center;
+}
+.point-book-info > text {
+  border-radius: 6px;
+  background-color: #fff;
+  font-size: 10px;
+  padding: 5px 10px;
+  margin: 3px;
+}
+.battle-progress {
+  position: fixed;
+  width: 60%;
+  left: 20%;
+  display: flex;
+  justify-content: center;
+}
+.user-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.user-header > image:first-child {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2rpx solid #333;
+}
+.user-header > image:last-child {
+  width: 36rpx;
+  height: 36rpx;
+}
+.user-header > text:nth-child(2) {
+  font-weight: 500;
+  font-size: 30rpx;
+  color: #333333;
+  margin: 0 20rpx;
+  max-width: 300rpx;
+}
+/* 对战房间：整个胶囊作为分享按钮，fixed 定位脱离 flex 流，紧贴系统胶囊左侧 */
+.battle-room-number {
+  position: fixed;
+  /* 兜底定位（JS 获取胶囊位置失败时生效）：约 28vw 对应胶囊区域左边缘 */
+  right: calc(28vw + 4px);
+  top: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 240rpx;
+  height: 64rpx;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 96rpx;
+  border: 1rpx solid #5b5758;
+  padding: 0;
+}
+/* 重置 button 默认边框 */
+.battle-room-number::after {
+  border: none;
+}
+.battle-room-number__text {
+  width: 156rpx;
+  height: 28rpx;
+  font-weight: 400;
+  font-size: 20rpx;
+  color: #ffffff;
+  text-align: center;
+  line-height: 28rpx;
+}
+.battle-room-number__icon {
+  width: 25rpx;
+  height: 26rpx;
+}
+</style>
--- a/src/pages/team-battle/components/HeaderProgress.vue
+++ b/src/pages/team-battle/components/HeaderProgress.vue
@@ -0,0 +1,83 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import audioManager from "@/audioManager";
+import useStore from "@/store";
+
+const store = useStore();
+
+// 私有 HeaderProgress 只负责展示提示/箭数和静音开关。
+// 报靶、轮到谁射箭、比赛结束等语音统一由 team-battle 页面队列播放，避免重复播报。
+const tips = ref("");
+const sound = ref(true);
+const currentShot = ref(0);
+const totalShot = ref(0);
+
+const updateSound = () => {
+  sound.value = !sound.value;
+  audioManager.setMuted(!sound.value);
+};
+
+const onUpdateTips = (newVal) => {
+  // 兼容页面通过 uni.$emit("update-tips") 触发的即时刷新。
+  tips.value = newVal;
+};
+
+// 监听 Pinia store 中 totalShot 变化，用于比赛恢复时同步箭数（替代 uni.$emit 避免时序问题）
+// 使用 immediate: true 确保组件创建时立即读取 store 当前值（解决重入时 totalShot 值不变 watch 不触发的问题）
+watch(
+  () => [store.game.currentShot, store.game.totalShot],
+  ([newCurrentShot, newTotalShot]) => {
+    currentShot.value = newCurrentShot || 0;
+    totalShot.value = newTotalShot || 0;
+  },
+  { immediate: true }
+);
+
+// 监听 Pinia store 中 tips 变化，用于比赛恢复时同步提示文案（替代 uni.$emit 避免时序问题）
+// 使用 immediate: true 确保组件创建时立即读取 store 当前值（解决 onShow 早于 onMounted 导致 uni.$emit 事件丢失的问题）
+// 注意：使用 != null 而非 if(newVal)，确保空字符串 "" 也能触发清空（避免重新开赛时旧文案残留）
+watch(() => store.game.tips, (newVal) => {
+  if (newVal != null) {
+    tips.value = newVal;
+  }
+}, { immediate: true });
+
+onMounted(() => {
+  uni.$on("update-tips", onUpdateTips);
+});
+
+onBeforeUnmount(() => {
+  uni.$off("update-tips", onUpdateTips);
+});
+</script>
+
+<template>
+  <view class="container">
+    <text>{{ (tips || "").replace(/你/g, "").replace(/重回/g, "") }}</text>
+    <text v-if="totalShot > 0"> ({{ currentShot }}/{{ totalShot }}) </text>
+    <button v-if="!!tips" hover-class="none" @click="updateSound">
+      <image :src="`../../../static/sound${sound ? '' : '-off'}-yellow.png`" mode="widthFix" />
+    </button>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 50vw;
+  color: #fed847;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+}
+
+.container>button:last-child {
+  width: 36px;
+  height: 36px;
+}
+
+.container>button:last-child>image {
+  width: 36px;
+  min-height: 36px;
+}
+</style>
--- a/src/pages/team-battle/components/IconButton.vue
+++ b/src/pages/team-battle/components/IconButton.vue
@@ -0,0 +1,39 @@
+<script setup>
+const props = defineProps({
+  name: {
+    type: String,
+    default: "",
+  },
+  src: {
+    type: String,
+    default: "",
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+  width: {
+    type: Number,
+    default: 22,
+  },
+});
+</script>
+<template>
+  <view class="container" @click="onClick">
+    <image :src="src" mode="widthFix" :style="{ width: width + 'px' }" />
+    <text>{{ name }}</text>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container > text {
+  color: #666666;
+  font-size: 12px;
+  margin-top: 5px;
+}
+</style>
--- a/src/pages/team-battle/components/PointSwitcher.vue
+++ b/src/pages/team-battle/components/PointSwitcher.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const mode = ref(true);
+
+const onClick = () => {
+  mode.value = !mode.value;
+  props.onChange(mode.value);
+};
+</script>
+
+<template>
+  <view
+    class="point-switcher"
+    :style="{ borderColor: mode ? '#D8D8D8' : '#53EF56' }"
+  >
+    <view
+      @click="onClick"
+      :style="{ transform: 'translateX(' + (mode ? '-58' : '4') + 'rpx)' }"
+    >
+      <text>放大</text>
+      <view :style="{ background: mode ? '#D8D8D8' : '#53EF56' }"></view>
+      <text>真实</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.point-switcher {
+  width: 100rpx;
+  height: 40rpx;
+  border-radius: 22rpx;
+  border: 2rpx solid;
+  display: flex;
+  overflow: hidden;
+}
+.point-switcher > view {
+  position: relative;
+  display: flex;
+  align-items: center;
+  line-height: 40rpx;
+  color: #ffffff;
+  font-weight: 500;
+  font-size: 20rpx;
+  word-break: keep-all;
+  padding: 0 12rpx;
+  transition: all 0.3s ease;
+  transform: translateX(-58rpx);
+}
+.point-switcher > view > text:first-child {
+  color: #53ef56;
+}
+.point-switcher > view > view {
+  width: 36rpx;
+  height: 36rpx;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  margin: 0 10rpx;
+  transition: all 0.3s ease;
+}
+.point-switcher > view > text:last-child {
+  color: #d8d8d8;
+}
+</style>
--- a/src/pages/team-battle/components/RoundEndTip.vue
+++ b/src/pages/team-battle/components/RoundEndTip.vue
@@ -0,0 +1,172 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+const props = defineProps({
+  isFinal: {
+    type: Boolean,
+    default: false,
+  },
+  round: {
+    type: Number,
+    default: 0,
+  },
+  bluePoint: {
+    type: Number,
+    default: 0,
+  },
+  redPoint: {
+    type: Number,
+    default: 0,
+  },
+  roundData: {
+    type: Object,
+    default: () => ({}),
+  },
+  onAutoClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+const count = ref(props.isFinal ? 10 : 3);
+const tiemr = ref(null);
+function startCount() {
+  if (tiemr.value) clearInterval(tiemr.value);
+  tiemr.value = setInterval(() => {
+    if (count.value === 0) {
+      clearInterval(tiemr.value);
+      props.onAutoClose();
+    } else count.value -= 1;
+  }, 1000);
+}
+onMounted(() => {
+  startCount();
+});
+onBeforeUnmount(() => {
+  if (tiemr.value) clearInterval(tiemr.value);
+});
+</script>
+
+<template>
+  <view class="round-end-tip">
+    <text>第{{ round }}轮射箭结束</text>
+    <block v-if="!isFinal">
+      <view class="point-view1" v-if="bluePoint !== 0 || redPoint !== 0">
+        <text>本轮蓝队</text>
+        <text>{{
+          (roundData.shoots[1] || []).reduce(
+            (last, next) => last + next.ring,
+            0
+          )
+        }}</text>
+        <text>环，红队</text>
+        <text>{{
+          (roundData.shoots[2] || []).reduce(
+            (last, next) => last + next.ring,
+            0
+          )
+        }}</text>
+        <text>环</text>
+      </view>
+      <text
+        v-if="bluePoint === 0 && redPoint === 0"
+        :style="{ marginTop: '20px' }"
+      >
+        连续3个来回双方均无人射箭，比赛取消。
+      </text>
+      <text v-if="bluePoint !== 0 && bluePoint === redPoint">
+        红队、蓝队各得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
+          redPoint
+        }}</text
+        >分
+      </text>
+      <text v-if="bluePoint > redPoint">
+        蓝队获胜，得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
+          bluePoint
+        }}</text
+        >分
+      </text>
+      <text v-if="bluePoint < redPoint">
+        红队获胜，得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
+          redPoint
+        }}</text
+        >分
+      </text>
+    </block>
+    <block v-if="isFinal">
+      <view class="point-view2">
+        <text>蓝队</text>
+        <text>{{ bluePoint }}</text>
+        <text>分，红队</text>
+        <text>{{ redPoint }}</text>
+        <text>分</text>
+      </view>
+      <text>同分僵局！最后一箭定江山</text>
+      <view class="final-shoot">
+        <text>{{ count }}</text>
+        <text>秒后蓝红双方</text>
+        <text>决金箭</text>
+        <text>一箭决胜负</text>
+      </view>
+    </block>
+  </view>
+</template>
+
+<style scoped>
+.round-end-tip {
+  width: 100%;
+  color: #fff9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 32rpx;
+}
+.round-end-tip > text:first-child {
+  font-size: 36rpx;
+  color: #fff;
+}
+.point-view1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  margin-bottom: 3px;
+}
+.point-view1 > text:nth-child(2),
+.point-view1 > text:nth-child(4) {
+  color: #fed847;
+  margin: 0 5px;
+}
+.point-view2 {
+  margin: 12px 0;
+  font-size: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.point-view2 > text:nth-child(2),
+.point-view2 > text:nth-child(4) {
+  color: #fed847;
+  width: 30px;
+  text-align: center;
+  font-size: 30px;
+}
+.final-shoot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+  font-size: 28rpx;
+  word-break: keep-all;
+}
+.final-shoot > text:nth-child(1) {
+  width: 20px;
+  text-align: right;
+}
+.final-shoot > text:nth-child(1),
+.final-shoot > text:nth-child(3) {
+  font-size: 32rpx;
+  color: #fed847;
+  margin-left: 10px;
+  margin-right: 5px;
+}
+</style>
--- a/src/pages/team-battle/components/SButton.vue
+++ b/src/pages/team-battle/components/SButton.vue
@@ -0,0 +1,96 @@
+<script setup>
+import { ref } from "vue";
+import { debounce } from "@/util";
+const props = defineProps({
+  width: {
+    type: String,
+    default: "calc(100vw - 20px)",
+  },
+  rounded: {
+    type: Number,
+    default: 10,
+  },
+  onClick: {
+    type: Function,
+    default: async () => {},
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  backgroundColor: {
+    type: String,
+    default: "#fed847",
+  },
+  color: {
+    type: String,
+    default: "#000",
+  },
+  disabledColor:{
+    type: String,
+    default: "#757575",
+  }
+});
+
+const loading = ref(false);
+const timer = ref(null);
+
+const onBtnClick = debounce(async () => {
+  if (props.disabled || loading.value) return;
+
+  let loadingTimer = null;
+  loadingTimer = setTimeout(() => {
+    loading.value = true;
+  }, 300);
+
+  try {
+    await props.onClick();
+  } finally {
+    clearTimeout(loadingTimer);
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <button
+    class="sbtn"
+    hover-class="none"
+    :style="{
+      width: width,
+      borderRadius: rounded + 'px',
+      backgroundColor: disabled ? disabledColor : backgroundColor,
+      color,
+    }"
+    open-type="getUserInfo"
+    @click="onBtnClick"
+  >
+    <block v-if="!loading">
+      <slot />
+    </block>
+    <block v-else>
+      <image src="../../../static/btn-loading.png" mode="widthFix" class="loading" />
+    </block>
+  </button>
+</template>
+
+<style scoped>
+.sbtn {
+  margin: 0 auto;
+  height: 44px;
+  line-height: 44px;
+  font-weight: bold;
+  font-size: 15px;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  overflow: initial;
+}
+.loading {
+  width: 25px;
+  height: 25px;
+  background-blend-mode: darken;
+  animation: rotate 1s linear infinite;
+}
+</style>
--- a/src/pages/team-battle/components/SModal.vue
+++ b/src/pages/team-battle/components/SModal.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  height: {
+    type: String,
+    default: "650rpx",
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+  noBg: {
+    type: Boolean,
+    default: false,
+  },
+});
+const showContainer = ref(false);
+const showContent = ref(false);
+watch(
+  () => props.show,
+  (newValue) => {
+    if (newValue) {
+      showContainer.value = true;
+      setTimeout(() => {
+        showContent.value = true;
+      }, 100);
+    } else {
+      showContent.value = false;
+      setTimeout(() => {
+        showContainer.value = false;
+      }, 100);
+    }
+  },
+  {}
+);
+</script>
+
+<template>
+  <view
+    class="container"
+    v-if="showContainer"
+    :style="{ opacity: show ? 1 : 0 }"
+    @click="onClose"
+  >
+    <view
+      class="modal-content"
+      :style="{
+        transform: `translateY(${showContent ? '0%' : '100%'})`,
+        height,
+      }"
+      @click.stop=""
+    >
+      <image
+        v-if="!noBg"
+        src="https://static.shelingxingqiu.com/attachment/2025-12-04/dep11770wzxg6o2alo.png"
+        mode="widthFix"
+      />
+      <view class="close-btn" @click="onClose" v-if="!noBg">
+        <image src="../../../static/close-yellow.png" mode="widthFix" />
+      </view>
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #00000099;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  opacity: 0;
+  transition: all 0.3s ease;
+  z-index: 999;
+}
+.modal-content {
+  width: 100%;
+  transform: translateY(100%);
+  transition: all 0.3s ease;
+  position: relative;
+  background-color: #372E1D;
+}
+.modal-content > image:first-child {
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+}
+.close-btn {
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: 0;
+}
+.close-btn > image {
+  width: 40px;
+  height: 40px;
+}
+</style>
--- a/src/pages/team-battle/components/ScreenHint.vue
+++ b/src/pages/team-battle/components/ScreenHint.vue
@@ -0,0 +1,89 @@
+<script setup>
+import IconButton from "./IconButton.vue";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: null,
+  },
+  mode: {
+    type: String,
+    default: "normal",
+  },
+});
+const getContentHeight = () => {
+  if (props.mode === "tall") return "50vw";
+  if (props.mode === "square") return "74vw";
+  return "36vw";
+};
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view class="scale-in" :style="{ height: getContentHeight() }">
+      <image
+        v-if="mode === 'normal'"
+        src="../../../static/screen-hint-bg.png"
+        mode="widthFix"
+      />
+      <image
+        v-if="mode === 'tall'"
+        src="../../../static/coach-comment.png"
+        mode="widthFix"
+      />
+      <image
+        v-if="mode === 'square'"
+        src="../../../static/prompt-bg-square.png"
+        mode="widthFix"
+      />
+      <image
+        v-if="mode === 'small'"
+        src="../../../static/finish-frame.png"
+        mode="widthFix"
+      />
+      <slot />
+    </view>
+    <IconButton
+      v-if="!!onClose"
+      src="../../../static/close-gold-outline.png"
+      :width="30"
+      :onClick="onClose"
+    />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 70vw;
+  color: #fff;
+  margin-bottom: 15px;
+}
+.container > view:first-child > image {
+  position: absolute;
+  width: 80vw;
+  left: -7%;
+  bottom: -18vw;
+  z-index: -1;
+  transform: translateY(-75px);
+}
+</style>
--- a/src/pages/team-battle/components/ShootProgress2.vue
+++ b/src/pages/team-battle/components/ShootProgress2.vue
@@ -0,0 +1,215 @@
+<script setup>
+import {ref, watch, onMounted, onBeforeUnmount} from "vue";
+import {RoundGoldImages} from "@/constants";
+
+const props = defineProps({
+  tips: {
+    type: String,
+    default: "",
+  },
+  total: {
+    type: Number,
+    default: 12,
+  },
+  currentRound: {
+    type: String,
+    default: "round1",
+  },
+});
+
+const barColor = ref("");
+const remain = ref(12);
+const timer = ref(null);
+const loading = ref(true);
+const transitionStyle = ref("all 1s linear");
+const currentTeam = ref(null);
+const MIN_TICK_MS = 1;
+const ZERO_EVENT = "team-battle-progress-zero";
+const COUNTDOWN_READY_EVENT = "team-battle-countdown-ready";
+
+const clearCountdownTimer = () => {
+  if (timer.value) {
+    clearInterval(timer.value);
+    timer.value = null;
+  }
+};
+
+const setTransitionByTick = (tickMs) => {
+  transitionStyle.value = `all ${Math.max(MIN_TICK_MS, Math.round(tickMs || 1000))}ms linear`;
+};
+
+const emitProgressZero = () => {
+  uni.$emit(ZERO_EVENT);
+};
+
+const emitCountdownReady = () => {
+  uni.$emit(COUNTDOWN_READY_EVENT);
+};
+
+const updateRemain = (value) => {
+  if (value.stop) {
+    clearCountdownTimer();
+    return;
+  }
+  // zeroThenReset：ToSomeoneShoot 到达时，若进度条仍在倒计时则先瞬间清零（约 150ms 停留）再显示下一玩家满值
+  // 若进度条已到 0（loading 状态），直接切换满值
+  if (value.zeroThenReset) {
+    clearCountdownTimer();
+    const wasNonZero = remain.value > 0;
+    // 更新下一玩家颜色和方向（在清零和满值时均生效）
+    currentTeam.value = value.team;
+    if (value.team === 'red') barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
+    if (value.team === 'blue') barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
+    transitionStyle.value = "none";
+    if (wasNonZero) {
+      // 瞬间清零，停留约 150ms 后切换为满值
+      remain.value = 0;
+      loading.value = true;
+      setTimeout(() => {
+        remain.value = value.value;
+        loading.value = false;
+        setTimeout(() => { transitionStyle.value = "all 1s linear"; }, 50);
+      }, 150);
+    } else {
+      // 已在底部，直接切换满值
+      remain.value = value.value;
+      loading.value = false;
+      setTimeout(() => { transitionStyle.value = "all 1s linear"; }, 50);
+    }
+    return;
+  }
+  loading.value = false;
+  currentTeam.value = value.team
+  if (value.team === 'red')
+    barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
+  if (value.team === 'blue')
+    barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
+  const nextVal = Math.max(0, Math.round(Number(value.value) || 0));
+  const nextTickMs = Math.max(MIN_TICK_MS, Math.round(Number(value.tickMs) || 1000));
+  if (value.reset) {
+    // 重置前先清除旧计时器，防止超时未射箭时旧 interval 残留，导致进度条震荡
+    clearCountdownTimer();
+    // 重置时瞬间跳满格，禁用 CSS 过渡避免从旧值「涨到满」的动画
+    transitionStyle.value = "none";
+    remain.value = nextVal;
+    loading.value = nextVal <= 0;
+    setTimeout(() => {
+      setTransitionByTick(nextTickMs);
+    }, 50);
+    return;
+  }
+  // 如果剩余时间增加（如轮次切换重置），瞬间变化无动画；否则保持动画
+  if (nextVal >= remain.value) {
+    transitionStyle.value = "none";
+    remain.value = nextVal;
+    setTimeout(() => {
+      setTransitionByTick(nextTickMs);
+    }, 50);
+  } else {
+    remain.value = nextVal;
+    setTransitionByTick(nextTickMs);
+  }
+
+  // 启动前先清除旧计时器，防止多次 {stop:false} 事件叠加多个 interval
+  clearCountdownTimer();
+  if (nextVal <= 0) {
+    loading.value = true;
+    emitProgressZero();
+    return;
+  }
+  timer.value = setInterval(() => {
+    if (remain.value > 0) remain.value--;
+    if (remain.value <= 0) {
+      remain.value = 0;
+      loading.value = true;
+      clearCountdownTimer();
+      emitProgressZero();
+      return;
+    }
+    loading.value = false;
+  }, nextTickMs);
+  emitCountdownReady();
+};
+
+watch(
+    () => props.tips,
+    (newVal) => {
+
+    },
+    {
+      immediate: true,
+    }
+);
+
+onMounted(() => {
+  uni.$on("update-remain", updateRemain);
+});
+
+onBeforeUnmount(() => {
+  uni.$off("update-remain", updateRemain);
+  clearCountdownTimer();
+});
+</script>
+
+<template>
+  <view class="container">
+    <image :src="RoundGoldImages[props.currentRound]" mode="widthFix"/>
+    <view
+        :style="{
+        justifyContent: currentTeam==='red' ? 'flex-end' : 'flex-start',
+      }"
+    >
+      <view
+          :style="{
+          width: `${(remain / total) * 100}%`,
+          background: barColor,
+          right: currentTeam==='red' ? 0 : 'unset',
+          transition: transitionStyle,
+        }"
+      />
+      <text v-if="!loading">剩余{{ remain }}秒</text>
+      <text v-else>···</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.container > image {
+  width: 380rpx;
+  height: 80rpx;
+  transform: translateY(18rpx);
+}
+
+.container > view:last-child {
+  width: 100%;
+  text-align: center;
+  background-color: #444444;
+  border-radius: 20px;
+  height: 24rpx;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.container > view:last-child > view {
+  height: 24rpx;
+  border-radius: 15px;
+}
+
+.container > view:last-child > text {
+  font-size: 18rpx;
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>
--- a/src/pages/team-battle/components/TeamAvatars.vue
+++ b/src/pages/team-battle/components/TeamAvatars.vue
@@ -0,0 +1,150 @@
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  isRed: {
+    type: Boolean,
+    default: true,
+  },
+  team: {
+    type: Array,
+    default: () => [],
+  },
+  currentShooterId: {
+    type: [Number, String],
+    default: "",
+  },
+});
+const players = ref({});
+const currentTeam = ref(false);
+const firstName = ref("");
+
+// 抽出判断：当前队伍且该玩家排序为 0（队伍首位）
+const isFirst = (id) =>
+  currentTeam.value && ((players.value[id] || {}).sort || 0) === 0;
+
+const getPos = (id) => {
+  const sort = (players.value[id] || {}).sort || 0;
+  if (currentTeam.value) {
+    return 30 * (sort + Math.ceil(sort / 2));
+  }
+  return sort * 40;
+};
+
+const syncPlayers = () => {
+  const nextPlayers = {};
+  const shooterId = props.currentShooterId;
+  const shooterIndex = props.team.findIndex(
+    (p) => String(p?.id) === String(shooterId)
+  );
+  const nextTeam = [...props.team];
+
+  currentTeam.value = !!shooterId && shooterIndex >= 0;
+  firstName.value = "";
+
+  if (currentTeam.value) {
+    const target = nextTeam.splice(shooterIndex, 1)[0];
+    if (target) {
+      nextTeam.unshift(target);
+      firstName.value = target.name || "";
+    }
+  }
+
+  nextTeam.forEach((p, index) => {
+    if (p?.id) nextPlayers[p.id] = { sort: index, ...p };
+  });
+  players.value = nextPlayers;
+};
+
+watch(
+  [() => props.team, () => props.currentShooterId],
+  syncPlayers,
+  { immediate: true, deep: true }
+);
+</script>
+
+<template>
+  <view class="container">
+    <image
+      :src="isRed ? '../../../static/flag-red.png' : '../../../static/flag-blue.png'"
+      class="flag"
+      :style="{
+        [isRed ? 'left' : 'right']: '10rpx',
+        top: currentTeam ? '-36rpx' : '-24rpx',
+      }"
+    />
+    <view
+      v-for="(item, index) in team"
+      :key="item.id || index"
+      class="player"
+      :style="{
+        width: (isFirst(item.id) ? 80 : 60) + 'rpx',
+        height: (isFirst(item.id) ? 80 : 60) + 'rpx',
+        zIndex: team.length - ((players[item.id] || {}).sort || 0),
+        border: isFirst(item.id) ? '3.5rpx solid' : '2rpx solid',
+        borderColor: isRed ? '#ff6060' : '#5fadff',
+        top: isFirst(item.id) ? '0rpx' : '12rpx',
+        [isRed ? 'left' : 'right']: getPos(item.id) + 'rpx',
+      }"
+    >
+      <image :src="item.avatar || '../../../static/user-icon.png'" mode="widthFix" />
+      <text
+        v-if="isFirst(item.id)"
+        :style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
+        >{{ isRed ? "红队" : "蓝队" }}</text
+      >
+    </view>
+    <text
+      v-if="currentTeam"
+      class="truncate"
+      :style="{
+        color: isRed ? '#ff6060' : '#5fadff',
+        [isRed ? 'left' : 'right']: '-4rpx',
+      }"
+      >{{ firstName }}</text
+    >
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 20vw;
+  height: 10rpx;
+  margin: 0 20rpx;
+}
+.container > text {
+  position: absolute;
+  font-size: 20rpx;
+  text-align: center;
+  width: 80rpx;
+  bottom: -100rpx;
+}
+.player {
+  transition: all 0.3s ease;
+  position: absolute;
+  border-radius: 50%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.player > image {
+  width: 100%;
+  min-height: 100%;
+}
+.player > text {
+  position: absolute;
+  font-size: 15rpx;
+  text-align: center;
+  width: 76rpx;
+  left: 0;
+  bottom: 0;
+  color: #fff;
+}
+.flag {
+  position: absolute;
+  width: 45rpx;
+  height: 45rpx;
+  transition: all 0.3s ease;
+}
+</style>
--- a/src/pages/team-battle/components/TestDistance.vue
+++ b/src/pages/team-battle/components/TestDistance.vue
@@ -0,0 +1,193 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import Guide from "./Guide.vue";
+import BowPower from "./BowPower.vue";
+import Avatar from "./Avatar.vue";
+import audioManager from "@/audioManager";
+import { simulShootAPI } from "@/apis";
+import { MESSAGETYPESV2 } from "@/constants";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user, device } = storeToRefs(store);
+const props = defineProps({
+  guide: {
+    type: Boolean,
+    default: true,
+  },
+  isBattle: {
+    type: Boolean,
+    default: false,
+  },
+  count: {
+    type: Number,
+    default: 15,
+  },
+});
+const arrow = ref({});
+const distance = ref(0);
+const showsimul = ref(false);
+const count = ref(props.count);
+const timer = ref(null);
+
+const updateTimer = (value) => {
+  count.value = Math.round(value);
+};
+onMounted(() => {
+  audioManager.play("请射箭测试距离");
+  if (props.isBattle) {
+    timer.value = setInterval(() => {
+      count.value -= 1;
+      if (count.value < 0) clearInterval(timer.value);
+    }, 1000);
+  }
+  uni.$on("update-timer", updateTimer);
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  uni.$off("update-timer", updateTimer);
+});
+
+async function onReceiveMessage(msg) {
+  if (Array.isArray(msg)) return;
+  if (msg.type === MESSAGETYPESV2.TestDistance) {
+    distance.value = Number((msg.shootData.distance / 100).toFixed(2));
+    if (distance.value >= 5) audioManager.play("距离合格");
+    else audioManager.play("距离不足");
+  }
+}
+
+const simulShoot = async () => {
+  if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
+};
+
+onMounted(() => {
+  uni.$on("socket-inbox", onReceiveMessage);
+  const accountInfo = uni.getAccountInfoSync();
+  const envVersion = accountInfo.miniProgram.envVersion;
+  if (envVersion !== "release") showsimul.value = true;
+});
+
+onBeforeUnmount(() => {
+  uni.$off("socket-inbox", onReceiveMessage);
+});
+</script>
+
+<template>
+  <view class="container">
+    <Guide v-show="guide">
+      <view class="guide-tips">
+        <text>请确保站距达到5米</text>
+        <text>低于5米的射箭无效</text>
+      </view>
+    </Guide>
+    <view class="test-area">
+      <image
+        class="text-bg"
+        src="https://static.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
+        mode="widthFix"
+      />
+      <button
+        class="simul"
+        @click="simulShoot"
+        hover-class="none"
+        v-if="showsimul"
+      >
+        模拟射箭
+      </button>
+      <view class="warnning-text">
+        <block v-if="distance > 0">
+          <text>当前距离{{ distance }}米</text>
+          <text v-if="distance >= 5">已达到距离要求</text>
+          <text v-else>请调整站位</text>
+        </block>
+        <block v-else>
+          <text>请射箭，测试站距</text>
+        </block>
+      </view>
+      <view class="user-row">
+        <Avatar :src="user.avatar" :size="35" />
+        <BowPower />
+      </view>
+    </view>
+    <view v-if="isBattle" class="ready-timer">
+      <image src="../../../static/test-tip.png" mode="widthFix" />
+      <view v-if="count >= 0">
+        <text>具体正式比赛还有</text>
+        <text>{{ count }}</text>
+        <text>秒</text>
+      </view>
+      <view v-else> 进入中... </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  max-height: 70vh;
+}
+.ready-timer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transform: translateY(-10vw);
+}
+.ready-timer > image:first-child {
+  width: 40%;
+}
+.ready-timer > view {
+  width: 80%;
+  height: 45px;
+  background-color: #545454;
+  border-radius: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translateY(-8vw);
+  color: #bebebe;
+  font-size: 15px;
+}
+.ready-timer > view > text:nth-child(2) {
+  color: #fed847;
+  font-size: 20px;
+  width: 22px;
+  text-align: center;
+}
+.test-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 112vw;
+  position: relative;
+}
+.test-area > view:last-child {
+  padding: 15px;
+  width: calc(100% - 30px);
+}
+.text-bg {
+  width: 100%;
+  position: absolute;
+  top: -14.4%;
+  left: 0;
+}
+.warnning-text {
+  color: #fed847;
+  font-size: 27px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 40%;
+}
+.warnning-text > text {
+  width: 70vw;
+  text-align: center;
+}
+.simul {
+  position: absolute;
+  color: #fff;
+  right: 10px;
+}
+</style>
--- a/src/pages/team-battle/index.vue
+++ b/src/pages/team-battle/index.vue
--- a/src/pages/user.vue
+++ b/src/pages/user.vue
@@ -69,6 +69,10 @@ onMounted(() => {
  const envVersion = accountInfo.miniProgram.envVersion;
  if (envVersion !== "release") showLogout.value = true;
 });
+
+/* global __BUILD_TIME__ */
+/** 构建时刻，由 vite.config.js define 在打包时自动注入；仅开发/体验版展示 */
+const buildVersion = typeof __BUILD_TIME__ !== 'undefined' ? __BUILD_TIME__ : '';
 </script>

 <template>
@@ -140,6 +144,10 @@ onMounted(() => {
          :onClick="toAudioTestPage"
          v-if="showLogout"
        />
+        <UserItem
+          title="版本信息(仅用于测试)"
+          v-if="showLogout"
+        >{{ buildVersion }}</UserItem>
        <UserItem
          title="退出登录(仅用于测试)"
          :onClick="logout"
--- a/src/static/friend-battle-result/rank-one.svg
+++ b/src/static/friend-battle-result/rank-one.svg
@@ -0,0 +1,11 @@
+<svg width="156" height="58" viewBox="0 0 156 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132; 5">
+<rect id="&#231;&#159;&#169;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189;" width="156" height="58" fill="url(#paint0_linear_1394_738459)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1394_738459" x1="0" y1="87" x2="156" y2="87" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7E3627"/>
+<stop offset="1" stop-color="#292826" stop-opacity="0.01"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/static/friend-battle-result/rank-three.svg
+++ b/src/static/friend-battle-result/rank-three.svg
@@ -0,0 +1,11 @@
+<svg width="156" height="58" viewBox="0 0 156 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132; 12">
+<rect id="&#231;&#159;&#169;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189;" width="156" height="58" fill="url(#paint0_linear_1394_738487)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1394_738487" x1="0" y1="87" x2="156" y2="87" gradientUnits="userSpaceOnUse">
+<stop stop-color="#573E25"/>
+<stop offset="1" stop-color="#292826" stop-opacity="0.01"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/static/friend-battle-result/rank-two.svg
+++ b/src/static/friend-battle-result/rank-two.svg
@@ -0,0 +1,11 @@
+<svg width="156" height="58" viewBox="0 0 156 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132; 9">
+<rect id="&#231;&#159;&#169;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189;" width="156" height="58" fill="url(#paint0_linear_1394_738473)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1394_738473" x1="0.251953" y1="86.9532" x2="156" y2="86.9532" gradientUnits="userSpaceOnUse">
+<stop stop-color="#25476F"/>
+<stop offset="1" stop-color="#292826" stop-opacity="0.01"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/static/long-bubble-border.png
+++ b/src/static/long-bubble-border.png
--- a/src/static/mvp-blue.png
+++ b/src/static/mvp-blue.png
--- a/src/static/mvp-red.png
+++ b/src/static/mvp-red.png
--- a/src/static/mvp-tip.png
+++ b/src/static/mvp-tip.png
--- a/src/static/shooter2.png
+++ b/src/static/shooter2.png
--- a/src/static/tab-point-book.png
+++ b/src/static/tab-point-book.png
--- a/src/static/you-lost.png
+++ b/src/static/you-lost.png
--- a/src/static/you-win.png
+++ b/src/static/you-win.png
--- a/src/store.js
+++ b/src/store.js
@@ -1,5 +1,7 @@
 import { defineStore } from "pinia";

+const PERSISTED_STORE_KEY = "store";
+
 const defaultUser = {
  id: "",
  nickName: "",
@@ -8,6 +10,22 @@ const defaultUser = {
  lvlName: "",
 };

+const getDefaultUser = () => ({ ...defaultUser });
+
+const getDefaultDevice = () => ({
+  deviceId: "",
+  deviceName: "",
+});
+
+const getDefaultGame = () => ({
+  roomID: "",
+  inBattle: false,
+  roomNumber: "",
+  currentShot: 0,
+  totalShot: 0,
+  tips: "",
+});
+
 const getLvlName = (rankLvl, rankList = []) => {
  if (!rankList) return;
  let lvlName = "";
@@ -65,11 +83,8 @@ const getLvlImageByScore = (score, rankList = []) => {
 export default defineStore("store", {
  // 状态
  state: () => ({
-    user: defaultUser,
-    device: {
-      deviceId: "",
-      deviceName: "",
-    },
+    user: getDefaultUser(),
+    device: getDefaultDevice(),
    config: {},
    rankData: {
      rank: [],
@@ -80,6 +95,9 @@ export default defineStore("store", {
      roomID: "",
      inBattle: false,
      roomNumber: "", // 当前房间号，供 Header 展示房号胶囊
+      currentShot: 0, // 当前已射箭数（用于 HeaderProgress 恢复状态）
+      totalShot: 0, // 轮次总箭数（用于 HeaderProgress 恢复状态）
+      tips: "", // 当前提示文案（用于 HeaderProgress 恢复状态，替代 uni.$emit 避免时序问题）
    },
  }),

@@ -108,7 +126,7 @@ export default defineStore("store", {
      this.online = online;
    },
    async updateUser(user = {}) {
-      this.user = { ...defaultUser, ...user };
+      this.user = { ...getDefaultUser(), ...user };
      this.user.lvlName = getLvlNameByScore(this.user.scores, this.config.randInfos)
      this.user.lvlImage = getLvlImageByScore(
        this.user.scores,
@@ -136,20 +154,41 @@ export default defineStore("store", {
      this.game.roomID = roomID;
      this.game.inBattle = inBattle;
    },
+    /** 更新当前射箭进度（用于 HeaderProgress 恢复状态，替代 uni.$emit 避免时序问题） */
+    updateShotInfo(currentShot = 0, totalShot = 0) {
+      this.game.currentShot = currentShot;
+      this.game.totalShot = totalShot;
+    },
+    /** 更新当前提示文案（用于 HeaderProgress 恢复状态，替代 uni.$emit 避免时序问题） */
+    updateTips(tips = "") {
+      this.game.tips = tips;
+    },
    /** 更新当前房间号，供 Header 组件展示房号胶囊 */
    updateRoomNumber(number) {
      this.game.roomNumber = number;
    },
+    clearSessionState() {
+      this.$patch({
+        user: getDefaultUser(),
+        device: getDefaultDevice(),
+        online: false,
+        game: getDefaultGame(),
+      });
+      uni.removeStorageSync(PERSISTED_STORE_KEY);
+      setTimeout(() => {
+        uni.removeStorageSync(PERSISTED_STORE_KEY);
+      }, 0);
+    },
  },

-  // 开启数据持久化
+  // 数据持久化（via pinia-plugin-persistedstate）
+  // 仅持久化 user 和 device：身份凭证需在冷启动时恢复（如从分享链接进入）
+  // config、game 等运行时状态不持久化，每次联网后重新拉取
  persist: {
-    enabled: true,
-    strategies: [
-      {
-        storage: uni.getStorageSync,
-        paths: ["user", "device", "config"], // 只持久化用户信息
-      },
-    ],
+    storage: {
+      getItem: (key) => uni.getStorageSync(key),
+      setItem: (key, value) => uni.setStorageSync(key, value),
+    },
+    paths: ['user', 'device'],
  },
 });
--- a/src/websocket.js
+++ b/src/websocket.js
@@ -1,12 +1,22 @@
 import { MESSAGETYPES, getMessageTypeName } from "@/constants";
+import { getUserGameState } from "@/apis";
+
 let socket = null;
 let heartbeatInterval = null;
 let reconnectTimer = null;
+let manualClose = false;
+let checkingSession = false;
+let kickedOut = false;
+let isConnecting = false;

-/**
- * 建立 WebSocket 连接
- */
 function createWebSocket(token, onMessage) {
+  if (!token) return;
+  if (kickedOut) kickedOut = false;
+  if (socket || isConnecting) return;
+
+  manualClose = false;
+  isConnecting = true;
+
  let url = "wss://api.shelingxingqiu.com/socket";
  try {
    const accountInfo = uni.getAccountInfoSync();
@@ -14,48 +24,71 @@ function createWebSocket(token, onMessage) {

    switch (envVersion) {
      case "develop": // 开发版
-        // url = "ws://localhost:8000/socket";
+        // url = "ws://192.168.1.30:8000/socket";
        url = "wss://apitest.shelingxingqiu.com/socket";
        break;
      case "trial": // 体验版
        url = "wss://apitest.shelingxingqiu.com/socket";
        break;
-      case "release": // 正式版
+      case "trial":
+        url = "wss://apitest.shelingxingqiu.com/socket";
+        break;
+      case "release":
        url = "wss://api.shelingxingqiu.com/socket";
        break;
      default:
-        // 保持默认值
        break;
    }
  } catch (e) {
-    console.error("获取环境信息失败，使用默认正式环境", e);
+    console.error("获取 WebSocket 环境信息失败，使用默认正式环境", e);
  }
+
  url += `?authorization=${token}`;
-  socket = uni.connectSocket({
+  const socketTask = uni.connectSocket({
    url,
    success: () => {
-      console.log("websocket 连接成功");
-      // 启动心跳
-      startHeartbeat(onMessage);
+      console.log("WebSocket 已发起连接");
    },
-    fail: () => {
+    fail: (err) => {
+      if (socket !== socketTask) return;
+      console.error("WebSocket 连接失败", err);
+      socket = null;
+      isConnecting = false;
      reconnect(onMessage);
    },
  });

-  // 接收消息
-  uni.onSocketMessage((res) => {
+  socket = socketTask;
+
+  socketTask.onOpen(() => {
+    if (socket !== socketTask) return;
+    console.log("WebSocket 连接成功");
+    isConnecting = false;
+    startHeartbeat(onMessage);
+  });
+
+  socketTask.onMessage((res) => {
+    if (socket !== socketTask) return;
+
    const { data, event } = JSON.parse(res.data);
    if (event === "pong") return;
    if (data.type) {
-      console.log("收到消息：", getMessageTypeName(data.type), data.data);
+      console.log(
+        "收到 WebSocket 消息",
+        getMessageTypeName(data.type),
+        data.data
+      );
      if (onMessage) onMessage({ ...(data.data || {}), type: data.type });
      return;
    }
    if (onMessage && data.updates) onMessage(data.updates);
    const msg = data.updates[0];
    if (msg) {
-      console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
+      console.log(
+        "收到 WebSocket 更新",
+        getMessageTypeName(msg.constructor),
+        msg
+      );
      if (msg.constructor === MESSAGETYPES.RankUpdate) {
        uni.setStorageSync("latestRank", msg.lvl);
      } else if (msg.constructor === MESSAGETYPES.LvlUpdate) {
@@ -68,84 +101,109 @@ function createWebSocket(token, onMessage) {
    }
  });

-  // 错误处理
-  uni.onSocketError((err) => {
+  socketTask.onError((err) => {
+    if (socket !== socketTask) return;
    console.error("WebSocket 错误", err);
-    reconnect(onMessage);
  });

-  uni.onSocketClose((result) => {
+  socketTask.onClose(async (result) => {
+    if (socket !== socketTask) return;
    console.log("WebSocket 已关闭", result);
    stopHeartbeat();
-    reconnect(onMessage);
+    socket = null;
+    isConnecting = false;
+
+    if (manualClose || kickedOut) return;
+    await handleUnexpectedClose(onMessage);
  });
 }

-/**
- * 重连机制
- */
-function reconnect(onMessage) {
-  reconnectTimer && clearTimeout(reconnectTimer);
-  closeWebSocket(); // 确保关闭旧连接
+async function handleUnexpectedClose(onMessage) {
+  if (checkingSession || manualClose || kickedOut) return;

  const token = uni.getStorageSync(
    `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
  );
  if (!token) return;

+  checkingSession = true;
+  try {
+    await getUserGameState();
+    if (!manualClose && !kickedOut) reconnect(onMessage);
+  } catch (err) {
+    if (err?.type === "AUTH_INVALID") {
+      kickedOut = true;
+      manualClose = true;
+      reconnectTimer && clearTimeout(reconnectTimer);
+      uni.$emit("session-kicked-out");
+      return;
+    }
+    if (!manualClose && !kickedOut) reconnect(onMessage);
+  } finally {
+    checkingSession = false;
+  }
+}
+
+function reconnect(onMessage) {
+  reconnectTimer && clearTimeout(reconnectTimer);
+
+  const token = uni.getStorageSync(
+    `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
+  );
+  if (!token || manualClose || kickedOut || socket || isConnecting) return;
+
  reconnectTimer = setTimeout(() => {
-    console.log("reconnecting...");
+    if (manualClose || kickedOut || socket || isConnecting) return;
+    console.log("WebSocket 正在重连...");
    createWebSocket(token, onMessage);
  }, 1000);
 }

-function closeWebSocket() {
+function closeWebSocket(isManual = true) {
+  manualClose = isManual;
+  reconnectTimer && clearTimeout(reconnectTimer);
+  stopHeartbeat();
+  isConnecting = false;
+
  if (socket) {
-    reconnectTimer && clearTimeout(reconnectTimer);
-    stopHeartbeat();
+    const currentSocket = socket;
+    socket = null;

    try {
-      socket.close();
+      currentSocket.close();
    } catch (err) {
-      console.error("关闭WebSocket连接失败", err);
+      console.error("关闭 WebSocket 失败", err);
    }
-
-    socket = null; // 清除socket引用
  }
 }

 function sendHeartbeat(onMessage) {
-  uni.sendSocketMessage({
+  if (!socket) return;
+
+  const currentSocket = socket;
+  currentSocket.send({
    data: JSON.stringify({ event: "ping", data: {} }),
-    success: () => {
-      // console.log("发送心跳成功");
-    },
+    success: () => {},
    fail: (err) => {
-      console.error("发送心跳失败", err);
+      if (socket !== currentSocket) return;
+      console.error("心跳发送失败", err);
      stopHeartbeat();
-      closeWebSocket(); // 关闭失效的连接
-      reconnect(onMessage); // 触发重连
+      closeWebSocket(false);
+      reconnect(onMessage);
    },
  });
 }

-/**
- * 启动心跳
- */
 function startHeartbeat(onMessage) {
-  stopHeartbeat(); // 防止重复启动
+  stopHeartbeat();

  heartbeatInterval = setInterval(() => {
-    if (socket && socket.readyState === 1) {
-      // 检查连接状态
+    if (socket) {
      sendHeartbeat(onMessage);
    }
  }, 10000);
 }

-/**
- * 停止心跳
- */
 function stopHeartbeat() {
  if (heartbeatInterval) {
    clearInterval(heartbeatInterval);
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,6 +12,14 @@ export default defineConfig({
  plugins: [
    uni(),
  ],
+  /** 构建时常量注入：__BUILD_TIME__ 在源码中展开为精确的打包时刻字符串 */
+  define: (() => {
+    const d = new Date();
+    const pad = (n) => String(n).padStart(2, '0');
+    // 格式：YYYY.MMDD.HHmm，如 2026.0514.1530
+    const version = `${d.getFullYear()}.${pad(d.getMonth() + 1)}${pad(d.getDate())}.${pad(d.getHours())}${pad(d.getMinutes())}`;
+    return { __BUILD_TIME__: JSON.stringify(version) };
+  })(),
  
 })

--- a/yarn.lock
+++ b/yarn.lock
@@ -3468,6 +3468,11 @@ pify@^2.3.0:
  resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==

+pinia-plugin-persistedstate@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz#66780602aecd6c7b152dd7e3ddc249a1f7a13fe5"
+  integrity sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==
+
 pinia@2.0.36:
  version "2.0.36"
  resolved "https://registry.npmjs.org/pinia/-/pinia-2.0.36.tgz"