细节优化

2025-11-10 13:43:25 +08:00
parent 2cf55dcdde
commit 7e1a3be510
8 changed files with 39 additions and 415 deletions
--- a/src/components/ShootProgress2.vue
+++ b/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;
--- a/src/components/TeamAvatars.vue
+++ b/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 {
--- a/src/components/TestDistance.vue
+++ b/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;
--- a/src/pages.json
+++ b/src/pages.json
@@ -102,9 +102,6 @@
    {
      "path": "pages/rank-list"
    },
-    {
-      "path": "pages/team-match"
-    },
    {
      "path": "pages/melee-match"
    },
--- a/src/pages/match-detail.vue
+++ b/src/pages/match-detail.vue
@@ -235,7 +235,7 @@ const checkBowData = () => {
                    borderColor: '#FF6767',
                    transform: `translateX(-${index * 15}px)`,
                  }"
-                  :src="src"
+                  :src="src || '../static/user-icon.png'"
                  :key="index"
                  mode="widthFix"
                />
--- a/src/pages/team-battle.vue
+++ b/src/pages/team-battle.vue
@@ -191,6 +191,10 @@ function recoverData(battleInfo) {

 async function onReceiveMessage(messages = []) {
  messages.forEach((msg) => {
+    if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
+      redTeam.value = msg.groupUserStatus.redTeam;
+      blueTeam.value = msg.groupUserStatus.blueTeam;
+    }
    if (msg.constructor === MESSAGETYPES.AllReady) {
      start.value = true;
    }
--- a/src/pages/team-match.vue
+++ b/src/pages/team-match.vue
@@ -1,362 +0,0 @@
-<script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
-import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
-import Container from "@/components/Container.vue";
-import BattleHeader from "@/components/BattleHeader.vue";
-import BowTarget from "@/components/BowTarget.vue";
-import ShootProgress from "@/components/ShootProgress.vue";
-import PlayersRow from "@/components/PlayersRow.vue";
-import Timer from "@/components/Timer.vue";
-import BattleFooter from "@/components/BattleFooter.vue";
-import ScreenHint from "@/components/ScreenHint.vue";
-import SButton from "@/components/SButton.vue";
-import RoundEndTip from "@/components/RoundEndTip.vue";
-import TestDistance from "@/components/TestDistance.vue";
-import { getCurrentGameAPI } from "@/apis";
-import { isGameEnded } from "@/util";
-import { MESSAGETYPES, roundsName } from "@/constants";
-import useStore from "@/store";
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { user } = storeToRefs(store);
-const title = ref("1V1");
-const start = ref(false);
-const battleId = ref("");
-const currentRound = ref(1);
-const currentRedPoint = ref(0);
-const currentBluePoint = ref(0);
-const totalRounds = ref(0);
-const power = ref(0);
-const scores = ref([]);
-const blueScores = ref([]);
-const redTeam = ref([]);
-const blueTeam = ref([]);
-const currentShooterId = ref(0);
-const tips = ref("即将开始...");
-const roundResults = ref([]);
-const redPoints = ref(0);
-const bluePoints = ref(0);
-const showRoundTip = ref(false);
-const isFinalShoot = ref(false);
-const isEnded = ref(false);
-
-function recoverData(battleInfo) {
-  uni.removeStorageSync("last-awake-time");
-  battleId.value = battleInfo.id;
-  redTeam.value = battleInfo.redTeam;
-  blueTeam.value = battleInfo.blueTeam;
-  if (battleInfo.status === 0) {
-    const readyRemain = Date.now() / 1000 - battleInfo.startTime;
-    console.log(`当前局已进行${readyRemain}秒`);
-    if (readyRemain > 0) {
-      setTimeout(() => {
-        uni.$emit("update-timer", 15 - readyRemain);
-      }, 200);
-    }
-  } else {
-    start.value = true;
-    bluePoints.value = 0;
-    redPoints.value = 0;
-    currentRound.value = battleInfo.currentRound;
-    totalRounds.value = battleInfo.maxRound;
-    roundResults.value = battleInfo.roundResults;
-    battleInfo.roundResults.forEach((round) => {
-      const blueTotal = round.blueArrows.reduce(
-        (last, next) => last + next.ring,
-        0
-      );
-      const redTotal = round.redArrows.reduce(
-        (last, next) => last + next.ring,
-        0
-      );
-      if (blueTotal === redTotal) {
-        bluePoints.value += 1;
-        redPoints.value += 1;
-      } else if (blueTotal > redTotal) {
-        bluePoints.value += 2;
-      } else {
-        redPoints.value += 2;
-      }
-    });
-    if (
-      battleInfo.redTeam[0].shotHistory[battleInfo.currentRound] ||
-      battleInfo.blueTeam[0].shotHistory[battleInfo.currentRound]
-    ) {
-      roundResults.value.push({
-        redArrows: battleInfo.redTeam[0].shotHistory[
-          battleInfo.currentRound
-        ].filter((item) => !!item.playerId),
-        blueArrows: battleInfo.blueTeam[0].shotHistory[
-          battleInfo.currentRound
-        ].filter((item) => !!item.playerId),
-      });
-    } else if (battleInfo.currentRound < 5) {
-      roundResults.value.push({
-        redArrows: [],
-        blueArrows: [],
-      });
-    }
-    if (battleInfo.goldenRound) {
-      const { ShotCount, RedRecords, BlueRecords } = battleInfo.goldenRound;
-      const roundCount = Math.max(RedRecords.length, BlueRecords.length);
-      currentRound.value += roundCount;
-      isFinalShoot.value = true;
-      for (let i = 0; i < roundCount; i++) {
-        const roundData = {
-          redArrows:
-            RedRecords && RedRecords[i] ? RedRecords[i].Arrows || [] : [],
-          blueArrows:
-            BlueRecords && BlueRecords[i] ? BlueRecords[i].Arrows || [] : [],
-        };
-        if (roundResults.value[5 + i]) {
-          roundResults.value[5 + i] = roundData;
-        } else {
-          roundResults.value.push(roundData);
-        }
-      }
-    }
-    const lastIndex = roundResults.value.length - 1;
-    if (roundResults.value[lastIndex]) {
-      const redArrows = roundResults.value[lastIndex].redArrows;
-      scores.value = [...redArrows].filter((item) => !!item.playerId);
-      const blueArrows = roundResults.value[lastIndex].blueArrows;
-      blueScores.value = [...blueArrows].filter((item) => !!item.playerId);
-    }
-    // if (battleInfo.status !== 11) return;
-    if (battleInfo.firePlayerIndex) {
-      currentShooterId.value = battleInfo.firePlayerIndex;
-      const teamPrefix =
-        redTeam.value[0].id === currentShooterId.value
-          ? "请红队射箭 - "
-          : "请蓝队射箭 - ";
-      const roundSuffix = isFinalShoot.value
-        ? "决金箭"
-        : `第${roundsName[currentRound.value]}轮`;
-      tips.value = teamPrefix + roundSuffix;
-    }
-    if (battleInfo.fireTime > 0) {
-      const remain = Date.now() / 1000 - battleInfo.fireTime;
-      console.log(`当前箭已过${remain}秒`);
-      if (remain > 0 && remain <= 15) {
-        // 等渲染好再通知
-        setTimeout(() => {
-          uni.$emit("update-ramain", 15 - remain);
-        }, 300);
-      }
-    }
-  }
-}
-
-async function onReceiveMessage(messages = []) {
-  messages.forEach((msg) => {
-    if (msg.id !== battleId.value) return;
-    if (msg.constructor === MESSAGETYPES.AllReady) {
-      start.value = true;
-      totalRounds.value = msg.groupUserStatus.config.maxRounds;
-      roundResults.value = [
-        {
-          redArrows: [],
-          blueArrows: [],
-        },
-      ];
-    }
-    if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
-      if (currentShooterId.value !== msg.userId) {
-        currentShooterId.value = msg.userId;
-        const teamPrefix =
-          redTeam.value[0].id === currentShooterId.value
-            ? "请红队射箭 - "
-            : "请蓝队射箭 - ";
-        const roundSuffix = isFinalShoot.value
-          ? "决金箭"
-          : `第${roundsName[currentRound.value]}轮`;
-        tips.value = teamPrefix + roundSuffix;
-      }
-    }
-    if (msg.constructor === MESSAGETYPES.ShootResult) {
-      if (currentShooterId.value !== msg.userId) return;
-      const isRed = redTeam.value.find((item) => item.id === msg.userId);
-      if (isRed) scores.value.push({ ...msg.target });
-      else blueScores.value.push({ ...msg.target });
-      if (!roundResults.value[currentRound.value - 1]) {
-        roundResults.value.push({
-          redArrows: [],
-          blueArrows: [],
-        });
-      }
-      roundResults.value[currentRound.value - 1][
-        isRed ? "redArrows" : "blueArrows"
-      ].push({ ...msg.target });
-    }
-    if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
-      const result = msg.preRoundResult;
-      scores.value = [];
-      blueScores.value = [];
-      currentShooterId.value = 0;
-      currentBluePoint.value = result.blueScore;
-      currentRedPoint.value = result.redScore;
-      bluePoints.value += result.blueScore;
-      redPoints.value += result.redScore;
-      if (result.currentRound < 5) {
-        currentRound.value = result.currentRound + 1;
-        roundResults.value.push({
-          redArrows: [],
-          blueArrows: [],
-        });
-        showRoundTip.value = true;
-      }
-    }
-    if (msg.constructor === MESSAGETYPES.FinalShoot) {
-      currentShooterId.value = 0;
-      currentRound.value += 1;
-      roundResults.value.push({
-        redArrows: [],
-        blueArrows: [],
-      });
-      if (!isFinalShoot.value) {
-        isFinalShoot.value = true;
-        showRoundTip.value = true;
-        tips.value = "准备开始决金箭";
-      }
-    }
-    if (msg.constructor === MESSAGETYPES.MatchOver) {
-      if (msg.endStatus.noSaved) {
-        currentRound.value += 1;
-        currentBluePoint.value = 0;
-        currentRedPoint.value = 0;
-        showRoundTip.value = true;
-        setTimeout(() => {
-          uni.navigateBack();
-        }, 3000);
-      } else {
-        isEnded.value = true;
-        uni.setStorageSync("last-battle", msg.endStatus);
-        setTimeout(() => {
-          uni.redirectTo({
-            url: "/pages/battle-result",
-          });
-        }, 1000);
-      }
-    }
-    if (msg.constructor === MESSAGETYPES.BackToGame) {
-      uni.$emit("update-header-loading", false);
-      if (msg.battleInfo) recoverData(msg.battleInfo);
-    }
-  });
-}
-const onBack = () => {
-  uni.$showHint(2);
-};
-
-onLoad(async (options) => {
-  if (options.gameMode == 1) title.value = "好友约战 - 1V1";
-  if (options.gameMode == 2) title.value = "排位赛 - 1V1";
-  if (options.battleId) {
-    battleId.value = options.battleId;
-    redTeam.value = uni.getStorageSync("red-team");
-    blueTeam.value = uni.getStorageSync("blue-team");
-    const battleInfo = uni.getStorageSync("current-battle");
-    if (battleInfo) {
-      await nextTick(() => {
-        recoverData(battleInfo);
-      });
-      setTimeout(getCurrentGameAPI, 2000);
-    }
-  }
-});
-onMounted(() => {
-  uni.setKeepScreenOn({
-    keepScreenOn: true,
-  });
-  uni.$on("socket-inbox", onReceiveMessage);
-});
-onBeforeUnmount(() => {
-  uni.setKeepScreenOn({
-    keepScreenOn: false,
-  });
-  uni.$off("socket-inbox", onReceiveMessage);
-});
-const refreshTimer = ref(null);
-onShow(async () => {
-  if (battleId.value) {
-    if (!isEnded.value && (await isGameEnded(battleId.value))) return;
-    getCurrentGameAPI();
-    const refreshData = () => {
-      const lastAwakeTime = uni.getStorageSync("last-awake-time");
-      if (lastAwakeTime) {
-        getCurrentGameAPI();
-      } else {
-        clearInterval(refreshTimer.value);
-      }
-    };
-    refreshTimer.value = setInterval(refreshData, 2000);
-  }
-});
-onHide(() => {
-  if (refreshTimer.value) clearInterval(refreshTimer.value);
-  uni.setStorageSync("last-awake-time", Date.now());
-});
-</script>
-
-<template>
-  <Container :title="title" :bgType="1" :onBack="onBack">
-    <view class="container">
-      <BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
-      <TestDistance v-if="!start" :guide="false" />
-      <ShootProgress
-        :show="start"
-        :tips="tips"
-        :total="15"
-        :currentRound="currentRound"
-        :battleId="battleId"
-      />
-      <PlayersRow
-        v-if="start"
-        :currentShooterId="currentShooterId"
-        :blueTeam="blueTeam"
-        :redTeam="redTeam"
-      />
-      <BowTarget
-        v-if="start"
-        mode="team"
-        :currentRound="scores.length"
-        :totalRound="3"
-        :scores="scores"
-        :blueScores="blueScores"
-      />
-      <BattleFooter
-        v-if="start"
-        :roundResults="roundResults"
-        :redPoints="redPoints"
-        :bluePoints="bluePoints"
-      />
-      <Timer v-if="!start" />
-      <ScreenHint
-        :show="showRoundTip"
-        :onClose="() => (showRoundTip = false)"
-        :mode="isFinalShoot ? 'tall' : 'normal'"
-      >
-        <RoundEndTip
-          v-if="showRoundTip"
-          :isFinal="isFinalShoot"
-          :round="currentRound - 1"
-          :bluePoint="currentBluePoint"
-          :redPoint="currentRedPoint"
-          :roundData="
-            roundResults[roundResults.length - 2]
-              ? roundResults[roundResults.length - 2]
-              : []
-          "
-          :onAutoClose="() => (showRoundTip = false)"
-        />
-      </ScreenHint>
-    </view>
-  </Container>
-</template>
-
-<style scoped>
-.container {
-  width: 100%;
-  height: 100%;
-}
-</style>
--- a/src/util.js
+++ b/src/util.js
@@ -10,23 +10,6 @@ export const formatTimestamp = (timestamp) => {
  return `${year}-${month}-${day}`;
 };

-export const checkConnection = () => {
-  uni.sendSocketMessage({
-    data: JSON.stringify({ event: "ping", data: {} }),
-    fail: () => {
-      websocket.closeWebSocket();
-      const token = uni.getStorageSync(
-        `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
-      );
-      if (!token) return;
-      // 如果发送失败，说明连接已断开，需要重新连接
-      websocket.createWebSocket(token, (content) => {
-        uni.$emit("socket-inbox", content);
-      });
-    },
-  });
-};
-
 export const debounce = (fn, delay = 300) => {
  let timer = null;
  return async (...args) => {