细节优化

src/components/ShootProgress2.vue

@@ -27,6 +27,7 @@ watch(
       barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
     if (newVal.includes("蓝队"))
       barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
+    if (newVal.includes("重回")) return;
     if (newVal.includes("红队") || newVal.includes("蓝队")) {
       if (timer.value) clearInterval(timer.value);
       remain.value = props.total;
@@ -41,6 +42,8 @@ watch(
 );
 
 const updateRemain = (value) => {
+  if (Math.ceil(value) === remain.value || Math.floor(value) === remain.value)
+    return;
   if (timer.value) clearInterval(timer.value);
   remain.value = Math.round(value);
   timer.value = setInterval(() => {
@@ -84,7 +87,6 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-left: 10rpx;
 }
 .container > image {
   width: 360rpx;

src/components/TeamAvatars.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 const props = defineProps({
   isRed: {
     type: Boolean,
@@ -13,15 +13,23 @@ const props = defineProps({
     type: Number,
     default: "",
   },
-  youTurn: {
-    type: Boolean,
-    default: false,
-  },
 });
 const players = ref({});
-const youTurn = ref(false);
+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;
+};
+
 onMounted(() => {
   props.team.forEach((p, index) => {
     players.value[p.id] = { sort: index, ...p };
@@ -33,7 +41,7 @@ watch(
   (newVal) => {
     if (!newVal) return;
     const index = props.team.findIndex((p) => p.id === newVal);
-    youTurn.value = index >= 0;
+    currentTeam.value = index >= 0;
     if (index >= 0) {
       const newPlayers = [...props.team];
       const target = newPlayers.splice(index, 1)[0];
@@ -57,7 +65,7 @@ watch(
       class="flag"
       :style="{
         [isRed ? 'left' : 'right']: '10rpx',
-        top: youTurn ? '-44rpx' : '-30rpx',
+        top: currentTeam ? '-44rpx' : '-30rpx',
       }"
     />
     <view
@@ -65,33 +73,28 @@ watch(
       :key="index"
       class="player"
       :style="{
-        width:
-          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 8 : 30) + 'px',
-        height:
-          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 8 : 30) + 'px',
-        borderColor: isRed ? '#ff6060' : '#5fadff',
+        width: (isFirst(item.id) ? 80 : 60) + 'rpx',
+        height: (isFirst(item.id) ? 80 : 60) + 'rpx',
         zIndex: team.length - ((players[item.id] || {}).sort || 0),
-        top: youTurn ? ((players[item.id] || {}).sort || 0) * 4 + 'px' : '6px',
-        left:
-          (isRed
-            ? ((players[item.id] || {}).sort || 0) * 20
-            : 40 - ((players[item.id] || {}).sort || 0) * 20) + 'px',
+        border: isFirst(item.id) ? '3rpx 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="youTurn && ((players[item.id] || {}).sort || 0) === 0"
+        v-if="isFirst(item.id)"
         :style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
         >{{ isRed ? "红队" : "蓝队" }}</text
       >
     </view>
     <text
-      v-if="youTurn"
+      v-if="currentTeam"
       class="truncate"
       :style="{
         color: isRed ? '#ff6060' : '#5fadff',
-        left: isRed ? '-4rpx' : 'unset',
-        right: isRed ? 'unset' : '-12rpx',
+        [isRed ? 'left' : 'right']: '-4rpx',
       }"
       >{{ firstName }}</text
     >
@@ -109,18 +112,17 @@ watch(
 }
 .container > text {
   position: absolute;
-  font-size: 10px;
+  font-size: 20rpx;
   text-align: center;
-  width: 90rpx;
+  width: 80rpx;
   bottom: -100rpx;
-  transform: translateY(-50% - 40rpx);
 }
 .player {
   transition: all 0.3s ease;
   position: absolute;
   border-radius: 50%;
   overflow: hidden;
-  border: 1px solid;
+  box-sizing: border-box;
 }
 .player > image {
   width: 100%;
@@ -130,9 +132,9 @@ watch(
   position: absolute;
   font-size: 16rpx;
   text-align: center;
-  width: 40px;
-  left: 0px;
-  bottom: 0px;
+  width: 80rpx;
+  left: 0;
+  bottom: 0;
   color: #fff;
 }
 .flag {

src/components/TestDistance.vue

@@ -5,7 +5,6 @@ import BowPower from "@/components/BowPower.vue";
 import Avatar from "@/components/Avatar.vue";
 import audioManager from "@/audioManager";
 import { simulShootAPI } from "@/apis";
-import { checkConnection } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -63,7 +62,6 @@ const simulShoot = async () => {
 };
 
 onMounted(() => {
-  checkConnection();
   uni.$on("socket-inbox", onReceiveMessage);
   const accountInfo = uni.getAccountInfoSync();
   const envVersion = accountInfo.miniProgram.envVersion;