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/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',