update:重构排位赛

2026-05-22 15:40:55 +08:00
parent 8664ae9fe4
commit ef2a71f793
29 changed files with 4386 additions and 36 deletions
--- 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>