update:修改会员页默认值

AGENTS.md

@@ -264,7 +264,6 @@ AI 应主动：
 * 少解释
 * 优先 patch
 * 优先 diff
-* 写好中文注释
 
 除非用户明确要求：
 否则不要输出完整项目。

src/App.vue

@@ -22,8 +22,7 @@
 	const {
 		updateUser,
 		updateOnline,
-		clearSessionState,
+		clearSessionState
-		clearDevice
 	} = store;
 
 	watch(
@@ -64,11 +63,6 @@
 		updateOnline(data.online);
 	}
 
-	function onDeviceBindInvalid() {
-		clearDevice();
-		uni.setStorageSync("calibration", false);
-	}
-
 	function onDeviceShoot() {
 		// audioManager.play("射箭声音")
 	}
@@ -84,7 +78,6 @@
 		uni.$on("update-user", emitUpdateUser);
 		uni.$on("update-online", emitUpdateOnline);
 		uni.$on("session-kicked-out", onSessionKickedOut);
-		uni.$on("device-bind-invalid", onDeviceBindInvalid);
 		const token = uni.getStorageSync(
 			`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
 		);
@@ -98,7 +91,6 @@
 		uni.$off("update-user", emitUpdateUser);
 		uni.$off("update-online", emitUpdateOnline);
 		uni.$off("session-kicked-out", onSessionKickedOut);
-		uni.$off("device-bind-invalid", onDeviceBindInvalid);
 		websocket.closeWebSocket();
 	});
 </script>
@@ -258,6 +250,69 @@
 		text-overflow: ellipsis;
 	}
 
+	.member-nickname {
+		position: relative;
+		display: inline-flex;
+		max-width: 100%;
+		overflow: hidden;
+	}
+
+	.member-nickname__text,
+	.member-nickname__shine {
+		display: block;
+		max-width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.member-nickname--vip .member-nickname__text {
+		color: #E7BA80;
+	}
+
+	.member-nickname--svip .member-nickname__text {
+		background: linear-gradient(90deg, #ffb86c, #ff4fd8, #7c5cff, #35d6ff);
+		-webkit-background-clip: text;
+		background-clip: text;
+		color: transparent;
+	}
+
+	.member-nickname__shine {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(
+			110deg,
+			transparent 0%,
+			transparent 38%,
+			rgba(255, 255, 255, 0.15) 45%,
+			rgba(255, 255, 255, 1) 50%,
+			rgba(255, 255, 255, 0.15) 55%,
+			transparent 62%,
+			transparent 100%
+		);
+		background-size: 220% 100%;
+		background-position: 120% 0;
+		-webkit-background-clip: text;
+		background-clip: text;
+		color: transparent;
+		pointer-events: none;
+		animation: memberNicknameShine 3.5s infinite ease-in-out;
+	}
+
+	@keyframes memberNicknameShine {
+		0%,
+		50% {
+			background-position: 120% 0;
+		}
+
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
 	.modal {
 		height: 100%;
 		display: flex;

src/apis.js

@@ -70,15 +70,6 @@ function request(method, url, data = {}) {
                             resolve({binded: true});
                             return;
                         }
-                        if (message === "BIND_FAILD") {
-                            uni.$emit("device-bind-invalid");
-                            uni.showToast({
-                                title: "设备绑定状态已失效，请重新绑定",
-                                icon: "none",
-                            });
-                            reject({type: "DEVICE_BIND_INVALID", message});
-                            return;
-                        }
                         if (message === "ERROR_ORDER_UNPAY") {
                             uni.showToast({
                                 title: "当前有未支付订单",
@@ -342,6 +333,9 @@ export const createOrderAPI = (vipId) => {
         quanity: 1,
         tradeType: "mini",
         payType: "wxpay",
+        returnUrl: "",
+        remark: "",
+        mockTest: false,
     });
 };
 
@@ -419,15 +413,6 @@ export const getPractiseDataAPI = async () => {
     return request("GET", "/user/practice/statistics");
 };
 
-export const getPersonalTrainingAPI = async () => {
-    return request("GET", "/personal/training");
-};
-
-export const getTrainingDifficultyListAPI = async (type) => {
-    const query = type ? `?type=${encodeURIComponent(type)}` : "";
-    return request("GET", `/training/difficulty/list${query}`);
-};
-
 export const getBattleDataAPI = async () => {
     return request("GET", "/user/fight/statistics");
 };

src/components/AppBackground.vue

@@ -58,29 +58,11 @@ const props = defineProps({
 	  mode="widthFix"
 	/>
   <image
-      class="bg-image"
+	  class="bg-image"
-      v-if="type === 7"
+	  v-if="type === 10"
-      src="@/static/app-bg6.png"
+	  src="https://static.shelingxingqiu.com/shootmini/static/vip/vip-bg.png"
-      mode="widthFix"
+	  mode="widthFix"
-    />
+	/>
-    <image
-      class="bg-image"
-      v-if="type === 8"
-      src="@/static/app-bg7.png"
-      mode="widthFix"
-    />
-    <image
-      class="bg-image"
-      v-if="type === 9"
-      src="@/static/app-bg8.png"
-      mode="widthFix"
-    />
-    <image
-      class="bg-image"
-      v-if="type === 10"
-      src="@/static/app-bg9.png"
-      mode="widthFix"
-    />
     <view class="bg-overlay" v-if="type === 0"></view>
   </view>
 </template>

src/components/AppFooter.vue

@@ -8,7 +8,7 @@ const tabs = [
 function handleTabClick(index) {
   if (index === 0) {
     uni.navigateTo({
-      url: "/pages/be-vip",
+      url: "/pages/member/be-vip",
     });
   }
   if (index === 1) {

src/components/Avatar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -26,33 +26,12 @@ const props = defineProps({
     type: Number,
     default: 45,
   },
-  sizeUnit: {
-    type: String,
-    default: "px",
-  },
-  imageMode: {
-    type: String,
-    default: "widthFix",
-  },
   borderColor: {
     type: String,
     default: "",
   },
 });
 const avatarFrame = ref("");
-const sizeValue = computed(() => `${Number(props.size)}${props.sizeUnit}`);
-const frameSizeValue = computed(() => `${Number(props.size) + 10}${props.sizeUnit}`);
-const avatarImageStyle = computed(() => ({
-  width: sizeValue.value,
-  height: sizeValue.value,
-  minHeight: sizeValue.value,
-  borderColor: props.borderColor || "#fff",
-}));
-const avatarFrameStyle = computed(() => ({
-  width: frameSizeValue.value,
-  height: frameSizeValue.value,
-}));
-
 watch(
   () => [config.value, props.rankLvl],
   () => {
@@ -72,7 +51,10 @@ watch(
       v-if="avatarFrame"
       :src="avatarFrame"
       mode="widthFix"
-      :style="avatarFrameStyle"
+      :style="{
+        width: Number(size) + 10 + 'px',
+        height: Number(size) + 10 + 'px',
+      }"
       class="avatar-frame"
     />
     <image
@@ -96,8 +78,13 @@ watch(
     <view v-if="rank > 3" class="rank-view">{{ rank }}</view>
     <image
       :src="src || '../static/user-icon.png'"
-      :mode="imageMode"
+      mode="widthFix"
-      :style="avatarImageStyle"
+      :style="{
+        width: size + 'px',
+        height: size + 'px',
+        minHeight: size + 'px',
+        borderColor: borderColor || '#fff',
+      }"
       class="avatar-image"
     />
   </view>

src/components/BackToGame.vue

@@ -18,12 +18,14 @@ const props = defineProps({
   },
 });
 const loading = ref(false);
+const navigating = ref(false);
 
 /** 统一获取当前环境 token，用于守卫：无有效 token 时不发起接口请求 */
 const getToken = () =>
   uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
 
 onShow(async () => {
+  navigating.value = false;
   if (user.value.id && getToken()) {
     setTimeout(async () => {
       const state = await getUserGameState();
@@ -45,28 +47,35 @@ watch(
   }
 );
 
+const navigateOnce = (url) =>
+  new Promise((resolve, reject) => {
+    navigating.value = true;
+    uni.navigateTo({
+      url,
+      success: resolve,
+      fail: (error) => {
+        navigating.value = false;
+        reject(error);
+      },
+    });
+  });
+
 const onClick = debounce(async () => {
-  if (loading.value) return;
+  if (loading.value || navigating.value) return;
   try {
     loading.value = true;
     const result = await getBattleAPI();
     if (result && result.matchId) {
       await uni.$checkAudio();
       if (result.mode <= 3) {
-        uni.navigateTo({
+        await navigateOnce(`/pages/team-battle/index?battleId=${result.matchId}`);
-          url: `/pages/team-battle/index?battleId=${result.matchId}`,
-        });
       } else {
-        uni.navigateTo({
+        await navigateOnce(`/pages/melee-battle?battleId=${result.matchId}`);
-          url: `/pages/melee-battle?battleId=${result.matchId}`,
-        });
       }
       return;
     }
     if (game.value.roomID) {
-      uni.navigateTo({
+      await navigateOnce("/pages/battle-room?roomNumber=" + game.value.roomID);
-        url: "/pages/battle-room?roomNumber=" + game.value.roomID,
-      });
     } else {
       updateGame(false, "");
     }

src/components/BattleHeader.vue

@@ -27,6 +27,14 @@ defineProps({
     default: true,
   },
 });
+
+const getMemberNicknameClass = (player = {}) => [
+  "member-nickname",
+  player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
+  player.sVip === true ? "member-nickname--svip" : "",
+];
+
+const isMember = (player = {}) => player.vip === true || player.sVip === true;
 </script>
 
 <template>
@@ -51,7 +59,16 @@ defineProps({
           }"
         >
           <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
-          <text class="player-name">{{ player.name }}</text>
+          <view
+            v-if="isMember(player)"
+            :class="['player-name', ...getMemberNicknameClass(player)]"
+          >
+            <text class="member-nickname__text">{{ player.name }}</text>
+            <text v-if="player.sVip === true" class="member-nickname__shine">
+              {{ player.name }}
+            </text>
+          </view>
+          <text v-else class="player-name">{{ player.name }}</text>
         </view>
         <image
           v-if="winner === 1"
@@ -70,7 +87,16 @@ defineProps({
           }"
         >
           <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
-          <text class="player-name">{{ player.name }}</text>
+          <view
+            v-if="isMember(player)"
+            :class="['player-name', ...getMemberNicknameClass(player)]"
+          >
+            <text class="member-nickname__text">{{ player.name }}</text>
+            <text v-if="player.sVip === true" class="member-nickname__shine">
+              {{ player.name }}
+            </text>
+          </view>
+          <text v-else class="player-name">{{ player.name }}</text>
         </view>
         <image
           v-if="winner === 2"
@@ -105,7 +131,16 @@ defineProps({
             :size="40"
             :rank="showRank ? index + 1 : 0"
           />
-          <text class="player-name">{{ player.name }}</text>
+          <view
+            v-if="isMember(player)"
+            :class="['player-name', ...getMemberNicknameClass(player)]"
+          >
+            <text class="member-nickname__text">{{ player.name }}</text>
+            <text v-if="player.sVip === true" class="member-nickname__shine">
+              {{ player.name }}
+            </text>
+          </view>
+          <text v-else class="player-name">{{ player.name }}</text>
         </view>
       </view>
     </scroll-view>
@@ -183,6 +218,13 @@ defineProps({
   text-overflow: ellipsis;
   text-align: center;
 }
+view.player-name {
+  justify-content: center;
+}
+.player-name .member-nickname__text,
+.player-name .member-nickname__shine {
+  font-size: 12px;
+}
 .left-winner-badge {
   position: absolute;
   width: 50px;

src/components/BowData.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowTarget from "@/components/BowTarget.vue";
@@ -8,6 +9,9 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 
+const isSVip = computed(() => user.value.sVip === true);
+const isVip = computed(() => user.value.vip === true && user.value.sVip !== true);
+
 const props = defineProps({
   show: {
     type: Boolean,
@@ -35,7 +39,21 @@ const props = defineProps({
       <view>
         <Avatar :src="user.avatar" :rankLvl="user.rankLvl" :size="45" />
         <view>
-          <text>{{ user.nickName }}</text>
+          <view
+            v-if="isVip || isSVip"
+            :class="[
+              'bow-data-user-name',
+              'member-nickname',
+              isVip ? 'member-nickname--vip' : '',
+              isSVip ? 'member-nickname--svip' : '',
+            ]"
+          >
+            <text class="member-nickname__text">{{ user.nickName }}</text>
+            <text v-if="isSVip" class="member-nickname__shine">
+              {{ user.nickName }}
+            </text>
+          </view>
+          <text v-else>{{ user.nickName }}</text>
           <text>{{ user.lvlName }}</text>
         </view>
       </view>
@@ -44,7 +62,7 @@ const props = defineProps({
       </view>
     </view>
     <view :style="{ width: '100%', marginBottom: '20px' }">
-      <BowTarget :scores="arrows" />
+      <BowTarget :scores="arrows" :isSvip="isSVip" />
     </view>
     <view class="desc">
       <text>{{ arrows.length }}</text>
@@ -95,6 +113,13 @@ const props = defineProps({
   margin-left: 10px;
   color: #fff;
 }
+.bow-data-user-name {
+  max-width: 300rpx;
+}
+.bow-data-user-name .member-nickname__text,
+.bow-data-user-name .member-nickname__shine {
+  max-width: 300rpx;
+}
 .header > view:first-child > view:last-child > text:last-child {
   font-size: 10px;
   background-color: #5f51ff;

src/components/BowShotEffect.vue

@@ -0,0 +1,387 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+
+const props = defineProps({
+  shot: {
+    type: Object,
+    default: null,
+  },
+  playKey: {
+    type: [String, Number],
+    default: "",
+  },
+  targetRadius: {
+    type: Number,
+    default: 20,
+  },
+  targetWidth: {
+    type: Number,
+    default: 0,
+  },
+  targetHeight: {
+    type: Number,
+    default: 0,
+  },
+  hitOffsetPx: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(["complete", "impact"]);
+
+const phase = ref("idle");
+const activePlayKey = ref("");
+const animationKey = ref("");
+const impactEmitted = ref(false);
+let timers = [];
+
+const isActive = computed(() => phase.value !== "idle");
+const ARROW_IMPACT_MS = 340;
+const COMPLETE_FALLBACK_MS = 980;
+
+const safeTargetRadius = computed(() => {
+  const radius = Number(props.targetRadius);
+  return Number.isFinite(radius) && radius > 0 ? radius : 20;
+});
+
+const safeTargetSize = computed(() => {
+  const width = Number(props.targetWidth);
+  const height = Number(props.targetHeight);
+  return {
+    width: Number.isFinite(width) && width > 0 ? width : 0,
+    height: Number.isFinite(height) && height > 0 ? height : 0,
+  };
+});
+
+const shotPoint = computed(() => {
+  const x = Number(props.shot?.x);
+  const y = Number(props.shot?.y);
+  return {
+    x: Number.isFinite(x) ? x : 0,
+    y: Number.isFinite(y) ? y : 0,
+  };
+});
+
+const pointDirection = computed(() => {
+  const point = shotPoint.value;
+  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,
+  };
+});
+
+const hitOffset = computed(() => {
+  const offset = Number(props.hitOffsetPx);
+  const safeOffset = Number.isFinite(offset) && offset > 0 ? offset : 0;
+  const direction = pointDirection.value;
+
+  return {
+    x: direction ? direction.x * safeOffset : 0,
+    y: direction ? -direction.y * safeOffset : 0,
+  };
+});
+
+const hitPercent = computed(() => {
+  const point = shotPoint.value;
+  const radius = safeTargetRadius.value;
+  const diameter = radius * 2;
+
+  return {
+    left: ((point.x + radius) / diameter) * 100,
+    top: ((radius - point.y) / diameter) * 100,
+  };
+});
+
+const arrowAngle = computed(() => {
+  const size = safeTargetSize.value;
+  if (!size.width || !size.height) {
+    const dx = hitPercent.value.left - 50;
+    const dy = 114 - hitPercent.value.top;
+    const fallbackAngle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
+    return Math.max(-18, Math.min(18, fallbackAngle));
+  }
+
+  const startX = size.width * 0.5;
+  const startY = size.height * 1.14;
+  const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
+  const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
+  const dx = endX - startX;
+  const dy = startY - endY;
+  const angle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
+  return Math.max(-18, Math.min(18, angle));
+});
+
+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}%`;
+}
+
+const crackStyle = computed(() => ({
+  left: formatTargetPosition(hitPercent.value.left, hitOffset.value.x),
+  top: formatTargetPosition(hitPercent.value.top, hitOffset.value.y),
+}));
+
+function getTargetTranslate(percent) {
+  const absPercent = Math.abs(percent);
+  const operator = percent >= 0 ? "-" : "+";
+  return `calc(${percent}vw ${operator} ${absPercent * 0.5}px)`;
+}
+
+const arrowMoveStyle = computed(() => {
+  const size = safeTargetSize.value;
+  let x = getTargetTranslate(hitPercent.value.left - 50);
+  let y = getTargetTranslate(hitPercent.value.top - 114);
+
+  if (size.width && size.height) {
+    const startX = size.width * 0.5;
+    const startY = size.height * 1.14;
+    const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
+    const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
+    x = `${endX - startX}px`;
+    y = `${endY - startY}px`;
+  }
+
+  return {
+    "--shot-tx": x,
+    "--shot-ty": y,
+    "--shot-angle": `${arrowAngle.value}deg`,
+  };
+});
+
+function clearTimers() {
+  timers.forEach((timer) => clearTimeout(timer));
+  timers = [];
+}
+
+function queueTimer(callback, delay) {
+  const timer = setTimeout(callback, delay);
+  timers.push(timer);
+}
+
+function emitImpactOnce(playKey) {
+  if (phase.value === "idle" || activePlayKey.value !== playKey || impactEmitted.value) return;
+  impactEmitted.value = true;
+  emit("impact");
+}
+
+function finish(playKey) {
+  if (phase.value === "idle" || activePlayKey.value !== playKey) return;
+  clearTimers();
+  phase.value = "idle";
+  activePlayKey.value = "";
+  emit("complete", playKey);
+}
+
+function play() {
+  if (!props.playKey || !props.shot || !props.shot.ring) return;
+
+  clearTimers();
+  activePlayKey.value = props.playKey;
+  animationKey.value = `${props.playKey}`;
+  impactEmitted.value = false;
+  phase.value = "playing";
+
+  queueTimer(() => {
+    emitImpactOnce(activePlayKey.value);
+  }, ARROW_IMPACT_MS);
+  queueTimer(() => {
+    finish(activePlayKey.value);
+  }, COMPLETE_FALLBACK_MS);
+}
+
+function handleArrowAnimationEnd() {
+  emitImpactOnce(activePlayKey.value);
+}
+
+function handleCrackAnimationEnd() {
+  finish(activePlayKey.value);
+}
+
+watch(
+  () => props.playKey,
+  () => {
+    play();
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  clearTimers();
+});
+</script>
+
+<template>
+  <view
+    v-show="isActive"
+    :class="['shot-effect', `shot-effect--${phase}`]"
+    :style="arrowMoveStyle"
+  >
+    <view
+      :key="`arrow-${animationKey}`"
+      class="shot-arrow-track"
+      @animationend="handleArrowAnimationEnd"
+    >
+      <image
+        class="shot-arrow"
+        src="../static/vip/svip-jian.png"
+        mode="heightFix"
+      />
+    </view>
+    <view
+      :key="`flash-${animationKey}`"
+      class="shot-flash"
+      :style="crackStyle"
+    ></view>
+    <view
+      :key="`crack-anchor-${animationKey}`"
+      class="shot-crack-anchor"
+      :style="crackStyle"
+    >
+      <image
+        :key="`crack-${animationKey}`"
+        class="shot-crack"
+        src="../static/vip/svip-lie.png"
+        mode="aspectFit"
+        @animationend="handleCrackAnimationEnd"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.shot-effect {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  pointer-events: none;
+  overflow: visible;
+  transform: translateZ(0);
+}
+
+.shot-arrow-track {
+  position: absolute;
+  left: 50%;
+  top: 114%;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  transform: translate3d(0, 0, 0);
+  animation: none;
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+}
+
+.shot-arrow {
+  position: absolute;
+  width: 248rpx;
+  height: 1186rpx;
+  left: 0;
+  top: 0;
+  opacity: 1;
+  transform-origin: 44.35% 3.04%;
+  transform: translate(-44.35%, -3.04%) rotate(var(--shot-angle));
+  backface-visibility: hidden;
+  will-change: transform;
+}
+
+.shot-effect--playing .shot-arrow-track {
+  animation: shot-arrow-fly 0.38s cubic-bezier(0.68, 0, 0.9, 0.62) forwards;
+}
+
+.shot-flash,
+.shot-crack-anchor {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+}
+
+.shot-flash {
+  width: 86rpx;
+  height: 86rpx;
+  border-radius: 50%;
+  border: 3rpx solid rgba(255, 236, 166, 0.9);
+  opacity: 0;
+  animation: none;
+}
+
+.shot-crack-anchor {
+  width: 750rpx;
+  height: 750rpx;
+}
+
+.shot-crack {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transform-origin: center center;
+  animation: none;
+  will-change: transform, opacity;
+}
+
+.shot-effect--playing .shot-flash {
+  animation: shot-flash 0.42s ease-out 0.32s forwards;
+}
+
+.shot-effect--playing .shot-crack {
+  animation: shot-crack-hit 0.52s ease-out 0.34s forwards;
+}
+
+@keyframes shot-arrow-fly {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  86% {
+    opacity: 1;
+    transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
+  }
+}
+
+@keyframes shot-flash {
+  0% {
+    opacity: 0.95;
+    transform: translate(-50%, -50%) scale(0.2);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1.9);
+  }
+}
+
+@keyframes shot-crack-hit {
+  0% {
+    opacity: 0;
+    transform: scale(0.55);
+  }
+  28% {
+    opacity: 1;
+    transform: scale(1.08);
+  }
+  56% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.18);
+  }
+}
+</style>

src/components/BowTarget.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
+import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
 import PointSwitcher from "@/components/PointSwitcher.vue";
+import BowShotEffect from "@/components/BowShotEffect.vue";
 
 import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
 import { simulShootAPI } from "@/apis";
@@ -26,6 +27,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  isSvip: {
+    type: Boolean,
+    default: false,
+  },
   mode: {
     type: String,
     default: "solo", // solo 单排，team 双排
@@ -57,18 +62,120 @@ const timer = ref(null);
 const dirTimer = ref(null);
 const angle = ref(null);
 const circleColor = ref("");
+const shotEffect = ref(null);
+const hiddenRedLatestKey = ref("");
+const hiddenBlueLatestKey = ref("");
+const targetShaking = ref(false);
+const shakeTimer = ref(null);
 const ROUND_TIP_OFFSET_Y = -32;
 const EXPERIENCE_TIP_OFFSET_Y = -68;
 
+function buildShotEffectKey(team, shot, index) {
+  return [
+    team,
+    index,
+    shot?.playerId ?? "",
+    shot?.x ?? "",
+    shot?.y ?? "",
+    shot?.ring ?? "",
+    shot?.ringX ? 1 : 0,
+  ].join("-");
+}
+
+function shouldPlayShotEffect(shot) {
+  return props.isSvip && !!shot && Number(shot.ring) > 0;
+}
+
+function clearTipTimer() {
+  if (timer.value) {
+    clearTimeout(timer.value);
+    timer.value = null;
+  }
+}
+
+function showShotTip(team, shot) {
+  clearTipTimer();
+  if (team === "red") {
+    latestOne.value = shot;
+    timer.value = setTimeout(() => {
+      latestOne.value = null;
+      timer.value = null;
+    }, 1000);
+    return;
+  }
+
+  bluelatestOne.value = shot;
+  timer.value = setTimeout(() => {
+    bluelatestOne.value = null;
+    timer.value = null;
+  }, 1000);
+}
+
+function triggerShotEffect(team, shot, index) {
+  const key = buildShotEffectKey(team, shot, index);
+
+  if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
+  if (shotEffect.value?.team === "blue") hiddenBlueLatestKey.value = "";
+
+  if (team === "red") {
+    latestOne.value = null;
+    hiddenRedLatestKey.value = key;
+  } else {
+    bluelatestOne.value = null;
+    hiddenBlueLatestKey.value = key;
+  }
+
+  shotEffect.value = { key, team, shot };
+}
+
+function completeShotEffect(key) {
+  if (!shotEffect.value || shotEffect.value.key !== key) return;
+
+  const { team, shot } = shotEffect.value;
+  if (team === "red") hiddenRedLatestKey.value = "";
+  if (team === "blue") hiddenBlueLatestKey.value = "";
+  shotEffect.value = null;
+  showShotTip(team, shot);
+}
+
+function shakeTarget() {
+  targetShaking.value = false;
+  if (shakeTimer.value) {
+    clearTimeout(shakeTimer.value);
+    shakeTimer.value = null;
+  }
+
+  nextTick(() => {
+    targetShaking.value = true;
+    shakeTimer.value = setTimeout(() => {
+      targetShaking.value = false;
+      shakeTimer.value = null;
+    }, 260);
+  });
+}
+
+function shouldHideRedHit(index) {
+  return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
+}
+
+function shouldHideBlueHit(index) {
+  return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
+}
+
 watch(
   () => props.scores,
   (newVal) => {
     if (newVal.length - prevScores.value.length === 1) {
-      latestOne.value = newVal[newVal.length - 1];
+      const latestShot = newVal[newVal.length - 1];
-      if (timer.value) clearTimeout(timer.value);
+      if (shouldPlayShotEffect(latestShot)) {
-      timer.value = setTimeout(() => {
+        triggerShotEffect("red", latestShot, newVal.length - 1);
-        latestOne.value = null;
+      } else {
-      }, 1000);
+        showShotTip("red", latestShot);
+      }
+    } else if (newVal.length <= prevScores.value.length) {
+      latestOne.value = null;
+      hiddenRedLatestKey.value = "";
+      if (shotEffect.value?.team === "red") shotEffect.value = null;
     }
     prevScores.value = [...newVal];
   },
@@ -81,11 +188,16 @@ watch(
   () => props.blueScores,
   (newVal) => {
     if (newVal.length - prevBlueScores.value.length === 1) {
-      bluelatestOne.value = newVal[newVal.length - 1];
+      const latestShot = newVal[newVal.length - 1];
-      if (timer.value) clearTimeout(timer.value);
+      if (shouldPlayShotEffect(latestShot)) {
-      timer.value = setTimeout(() => {
+        triggerShotEffect("blue", latestShot, newVal.length - 1);
-        bluelatestOne.value = null;
+      } else {
-      }, 1000);
+        showShotTip("blue", latestShot);
+      }
+    } else if (newVal.length <= prevBlueScores.value.length) {
+      bluelatestOne.value = null;
+      hiddenBlueLatestKey.value = "";
+      if (shotEffect.value?.team === "blue") shotEffect.value = null;
     }
     prevBlueScores.value = [...newVal];
   },
@@ -164,6 +276,15 @@ function getHitStyle(shot) {
   };
 }
 
+function getSvipHitBgStyle(shot) {
+  const radius = currentHitRadiusPx.value;
+  const point = getShotPoint(shot);
+
+  return {
+    ...getTargetPositionStyle(point, radius),
+  };
+}
+
 function getRoundTipStyle(shot) {
   const point = getShotPoint(shot, true);
   return getTargetPositionStyle(
@@ -239,12 +360,16 @@ onBeforeUnmount(() => {
     clearTimeout(dirTimer.value);
     dirTimer.value = null;
   }
+  if (shakeTimer.value) {
+    clearTimeout(shakeTimer.value);
+    shakeTimer.value = null;
+  }
   uni.$off("socket-inbox", onReceiveMessage);
 });
 </script>
 
 <template>
-  <view class="container">
+  <view :class="['container', { 'container--effecting': shotEffect }]">
     <view class="header" v-if="totalRound > 0">
       <text v-if="totalRound > 0" class="round-count">{{
         (currentRound > totalRound ? totalRound : currentRound) +
@@ -252,7 +377,7 @@ onBeforeUnmount(() => {
         totalRound
       }}</text>
     </view>
-    <view class="target">
+    <view :class="['target', { 'target--shake': targetShaking }]">
       <view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
         <view :style="{ background: circleColor }">
           <image src="../static/dot-circle.png" mode="widthFix" />
@@ -292,8 +417,15 @@ onBeforeUnmount(() => {
         }}<text v-if="bluelatestOne.ring">环</text></view
       >
       <block v-for="(bow, index) in scores" :key="index">
+        <image
+          v-if="pMode && isSvip && bow.ring > 0 && !shouldHideRedHit(index)"
+          class="svip-hit-bg"
+          src="../static/vip/svip-xuan.png"
+          :style="getSvipHitBgStyle(bow)"
+          mode="aspectFit"
+        />
         <view
-          v-if="bow.ring > 0"
+          v-if="bow.ring > 0 && !shouldHideRedHit(index)"
           :class="`hit ${pMode ? 'b' : 's'}-point ${
             index === scores.length - 1 && latestOne ? 'pump-in' : ''
           }`"
@@ -305,8 +437,15 @@ onBeforeUnmount(() => {
         >
       </block>
       <block v-for="(bow, index) in blueScores" :key="index">
+        <image
+          v-if="pMode && isSvip && bow.ring > 0 && !shouldHideBlueHit(index)"
+          class="svip-hit-bg"
+          src="../static/vip/svip-xuan.png"
+          :style="getSvipHitBgStyle(bow)"
+          mode="aspectFit"
+        />
         <view
-          v-if="bow.ring > 0"
+          v-if="bow.ring > 0 && !shouldHideBlueHit(index)"
           :class="`hit ${pMode ? 'b' : 's'}-point ${
             index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
           }`"
@@ -318,6 +457,13 @@ onBeforeUnmount(() => {
           <text v-if="pMode">{{ index + 1 }}</text>
         </view>
       </block>
+      <BowShotEffect
+        :shot="shotEffect && shotEffect.shot"
+        :playKey="shotEffect ? shotEffect.key : ''"
+        :targetRadius="safeTargetRadius"
+        @impact="shakeTarget"
+        @complete="completeShotEffect"
+      />
       <image src="../static/bow-target.png" mode="widthFix" />
     </view>
     <view class="footer">
@@ -339,13 +485,22 @@ onBeforeUnmount(() => {
   height: calc(100vw - 30px);
   padding: 0px 15px;
   position: relative;
+  z-index: 3;
+}
+.container--effecting {
+  z-index: 10000;
 }
 .target {
   position: relative;
   margin: 10px;
   width: calc(100% - 20px);
   height: calc(100% - 20px);
-  z-index: -1;
+  z-index: 1;
+  pointer-events: none;
+  transform-origin: center center;
+}
+.target--shake {
+  animation: target-shake 0.26s ease-out;
 }
 .e-value {
   position: absolute;
@@ -400,17 +555,26 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
 }
+.svip-hit-bg {
+  position: absolute;
+  width: 48rpx;
+  height: 48rpx;
+  z-index: 1;
+  pointer-events: none;
+  transform-origin: center center;
+  animation: svip-hit-xuan 1.2s linear infinite;
+}
 .hit {
   position: absolute;
   border-radius: 50%;
-  z-index: 1;
+  z-index: 2;
   color: #fff;
-  transition: all 0.3s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease;
   box-sizing: border-box;
 }
 .b-point {
   border: 1px solid #fff;
-  z-index: 1;
+  z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -426,6 +590,20 @@ onBeforeUnmount(() => {
   transform: translate(-50%, -50%);*/
   margin-top: 2rpx;
 }
+@keyframes svip-hit-xuan {
+  0% {
+    opacity: 0.9;
+    transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
+  }
+  50% {
+    opacity: 1;
+    transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
+  }
+  100% {
+    opacity: 0.9;
+    transform: translate(-50%, -50%) rotate(360deg) scale(0.92);
+  }
+}
 @keyframes target-pump-in {
   from {
     transform: translate(-50%, -50%) scale(2);
@@ -435,6 +613,29 @@ onBeforeUnmount(() => {
     transform: translate(-50%, -50%) scale(1);
   }
 }
+@keyframes target-shake {
+  0% {
+    transform: translate(0, 0);
+  }
+  14% {
+    transform: translate(-20rpx, 8rpx);
+  }
+  28% {
+    transform: translate(16rpx, -8rpx);
+  }
+  44% {
+    transform: translate(-12rpx, 6rpx);
+  }
+  64% {
+    transform: translate(8rpx, -4rpx);
+  }
+  82% {
+    transform: translate(-4rpx, 2rpx);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
 .hit.pump-in {
   animation: target-pump-in 0.3s ease-out forwards;
   transform-origin: center center;

src/components/Container.vue

@@ -41,10 +41,6 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  headerClass: {
-    type: String,
-    default: "",
-  },
   showBottom: {
     type: Boolean,
     default: true,
@@ -156,7 +152,6 @@ const goCalibration = async () => {
     <AppBackground :type="bgType" :bgColor="bgColor" />
     <Header
       v-if="!isHome"
-      :class="headerClass"
       :title="title"
       :onBack="onBack"
       :whiteBackArrow="whiteBackArrow"

src/components/Header.vue

@@ -55,6 +55,9 @@ const signin = () => {
   }
 };
 
+const isSVip = computed(() => user.value.sVip === true);
+const isVip = computed(() => user.value.vip === true && user.value.sVip !== true);
+
 const loading = ref(false);
 const pointBook = ref(null);
 const heat = ref(0);
@@ -128,7 +131,21 @@ onBeforeUnmount(() => {
             :size="40"
             borderColor="#333"
           />
-          <text class="truncate">{{ user.nickName }}</text>
+          <view
+            v-if="isVip || isSVip"
+            :class="[
+              'point-book-user-name',
+              'member-nickname',
+              isVip ? 'member-nickname--vip' : '',
+              isSVip ? 'member-nickname--svip' : '',
+            ]"
+          >
+            <text class="member-nickname__text">{{ user.nickName }}</text>
+            <text v-if="isSVip" class="member-nickname__shine">
+              {{ user.nickName }}
+            </text>
+          </view>
+          <text v-else class="truncate">{{ user.nickName }}</text>
           <image
             v-if="heat"
             :src="`../static/hot${heat}.png`"
@@ -285,7 +302,8 @@ onBeforeUnmount(() => {
   width: 36rpx;
   height: 36rpx;
 }
-.user-header > text:nth-child(2) {
+.user-header > text:nth-child(2),
+.user-header > .point-book-user-name {
   font-weight: 500;
   font-size: 30rpx;
   color: #333333;
@@ -316,7 +334,7 @@ onBeforeUnmount(() => {
   width: 156rpx;
   height: 28rpx;
   font-weight: 400;
-  font-size: 20rpx;
+  font-size: 24rpx;
   color: #ffffff;
   text-align: center;
   line-height: 28rpx;

src/components/ModalDialog.vue

@@ -0,0 +1,234 @@
+<script setup>
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  content: {
+    type: String,
+    default: "",
+  },
+  cancelText: {
+    type: String,
+    default: "取消",
+  },
+  confirmText: {
+    type: String,
+    default: "确定",
+  },
+  showCancel: {
+    type: Boolean,
+    default: true,
+  },
+  showConfirm: {
+    type: Boolean,
+    default: true,
+  },
+  onCancel: {
+    type: Function,
+    default: null,
+  },
+  onConfirm: {
+    type: Function,
+    default: null,
+  },
+});
+
+const handleCancel = () => {
+  props.onCancel?.();
+};
+
+const handleConfirm = () => {
+  props.onConfirm?.();
+};
+</script>
+
+<template>
+  <view class="modal-mask" :style="{ display: show ? 'flex' : 'none' }">
+    <view class="modal-wrap scale-in">
+      <image
+        class="dialog-light"
+        src="../static/common/dialog-light.png"
+        mode="widthFix"
+      />
+      <image
+        class="dialog-icon"
+        src="../static/common/dialog-icon.png"
+        mode="widthFix"
+      />
+
+      <view class="dialog-panel">
+        <image
+          class="dialog-bg"
+          src="../static/common/dialog-bg.png"
+          mode="scaleToFill"
+        />
+        <view class="dialog-content">
+          <slot>
+            <text v-if="title" class="dialog-title">{{ title }}</text>
+            <text v-if="content" class="dialog-text">{{ content }}</text>
+          </slot>
+        </view>
+
+        <view
+          v-if="showCancel || showConfirm"
+          class="dialog-actions"
+          :class="{ single: !(showCancel && showConfirm) }"
+        >
+          <view
+            v-if="showCancel"
+            class="dialog-button cancel"
+            @click="handleCancel"
+          >
+            <text>{{ cancelText }}</text>
+          </view>
+          <view
+            v-if="showConfirm"
+            class="dialog-button confirm"
+            @click="handleConfirm"
+          >
+            <text>{{ confirmText }}</text>
+          </view>
+          
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.modal-mask {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.62);
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.modal-wrap {
+  position: relative;
+  display: flex;
+  width: 549rpx;
+  min-height: 318rpx;;
+  padding-top: 168rpx;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.dialog-light {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 520rpx;
+  z-index: 1;
+  transform-origin: center center;
+  animation: rotateLight 8s linear infinite;
+}
+
+.dialog-icon {
+  position: absolute;
+  top: 70rpx;
+  left: 50%;
+  width: 250rpx;
+  z-index: 5;
+  transform: translateX(-50%);
+}
+
+.dialog-panel {
+  position: relative;
+  width: 100%;
+  min-height: 318rpx;
+  padding: 98rpx 36rpx 40rpx 36rpx;
+  box-sizing: border-box;
+  z-index: 3;
+  border-radius: 24rpx;
+  border: 2rpx solid rgba(249, 213, 161, 0.5);
+  overflow: hidden;
+}
+
+.dialog-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 24rpx;
+}
+
+.dialog-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  text-align: center;
+}
+
+.dialog-title {
+  font-size: 28rpx;
+  font-weight: 700;
+  line-height: 40rpx;
+}
+
+.dialog-text {
+  margin-top: 10rpx;
+  font-size: 26rpx;
+  line-height: 36rpx;
+  white-space: pre-wrap;
+}
+
+.dialog-actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  margin-top: 50rpx;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.dialog-actions.single {
+  justify-content: center;
+}
+
+.dialog-button {
+  display: flex;
+  width: 232rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  border-radius: 44rpx;
+  justify-content: center;
+  align-items: center;
+  font-size: 26rpx;
+  font-weight: 500;
+}
+
+.dialog-button.cancel {
+  color: #fff;
+  background-color: rgba(255,255,255,0.2);
+}
+
+.dialog-button.confirm {
+  color: #000000;
+  background-color: #ffda3f;
+}
+
+@keyframes rotateLight {
+  from {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  to {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+</style>

src/components/PlayerScore.vue

@@ -16,11 +16,13 @@ const props = defineProps({
 
 const rowCount = new Array(6).fill(0);
 
-const getRingText = (arrow) => {
+const isMember = (player = {}) => player.vip === true || player.sVip === true;
-  if (!arrow) return "-";
+
-  if (arrow.ringX && arrow.ring) return "X环";
+const getMemberNicknameClass = (player = {}) => [
-  return arrow.ring ? `${arrow.ring}环` : "-";
+  "member-nickname",
-};
+  player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
+  player.sVip === true ? "member-nickname--svip" : "",
+];
 </script>
 
 <template>
@@ -37,23 +39,36 @@ const getRingText = (arrow) => {
       mode="widthFix"
     />
     <image :src="player.avatar || '../static/user-icon.png'" mode="widthFix" />
-    <text>{{ player.name }}</text>
+    <view
+      v-if="isMember(player)"
+      :class="['player-score-name', ...getMemberNicknameClass(player)]"
+    >
+      <text class="member-nickname__text">{{ player.name }}</text>
+      <text v-if="player.sVip === true" class="member-nickname__shine">
+        {{ player.name }}
+      </text>
+    </view>
+    <text v-else>{{ player.name }}</text>
     <view>
       <view>
         <view v-for="(_, index) in rowCount" :key="index">
-          <text>{{ getRingText(scores[0]?.[index]) }}</text>
+          <text>{{
+            scores[0] && scores[0][index] ? `${scores[0][index].ring}环` : "-"
+          }}</text>
         </view>
       </view>
       <view>
         <view v-for="(_, index) in rowCount" :key="index">
-          <text>{{ getRingText(scores[1]?.[index]) }}</text>
+          <text>{{
+            scores[1] && scores[1][index] ? `${scores[1][index].ring}环` : "-"
+          }}</text>
         </view>
       </view>
     </view>
     <text
       >{{
         scores
-          .map((s) => (s || []).reduce((last, next) => last + next.ring, 0))
+          .map((s) => s.reduce((last, next) => last + next.ring, 0))
           .reduce((last, next) => last + next, 0)
       }}环</text
     >
@@ -98,6 +113,13 @@ const getRingText = (arrow) => {
   text-overflow: ellipsis;
   width: 20%;
 }
+.player-score-name {
+  width: 20%;
+}
+.player-score-name .member-nickname__text,
+.player-score-name .member-nickname__shine {
+  font-size: 14px;
+}
 .container > view:nth-child(4) {
   display: flex;
   flex-direction: column;

src/components/PointRankItem.vue

@@ -22,6 +22,15 @@ const props = defineProps({
 const like = ref(props.data.ifLike);
 const likeCount = ref(props.data.likeTotal || 0);
 
+const isMember = (data = {}) => data.vip === true || data.sVip === true;
+
+const getMemberNicknameClass = (data = {}) => [
+  "point-rank-name",
+  "member-nickname",
+  data.vip === true && data.sVip !== true ? "member-nickname--vip" : "",
+  data.sVip === true ? "member-nickname--svip" : "",
+];
+
 watch(
   () => props.data,
   (newVal) => {
@@ -53,7 +62,13 @@ const onClick = async () => {
     <view>
       <Avatar :src="data.avatar || '../static/user-icon.png'" :size="36" />
       <view>
-        <text class="truncate">{{ data.name }}</text>
+        <view v-if="isMember(data)" :class="getMemberNicknameClass(data)">
+          <text class="member-nickname__text">{{ data.name }}</text>
+          <text v-if="data.sVip === true" class="member-nickname__shine">
+            {{ data.name }}
+          </text>
+        </view>
+        <text v-else class="truncate">{{ data.name }}</text>
         <view>
           <text>{{ data.totalDay }}天</text>
           <view />
@@ -118,6 +133,14 @@ const onClick = async () => {
   color: #333333;
   margin-bottom: 5rpx;
 }
+.rank-item > view:nth-child(2) > view:last-child > .point-rank-name {
+  width: 200rpx;
+  margin-bottom: 5rpx;
+}
+.point-rank-name .member-nickname__text,
+.point-rank-name .member-nickname__shine {
+  font-size: 28rpx;
+}
 .rank-item > view:nth-child(2) > view:last-child > view {
   display: flex;
   align-items: center;

src/components/Signin.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import SModal from "@/components/SModal.vue";
 import Avatar from "@/components/Avatar.vue";
@@ -16,7 +16,7 @@ import {
 
 import useStore from "@/store";
 const store = useStore();
-const { updateUser, updateDevice, updateOnline, clearDevice } = store;
+const { updateUser, updateDevice, updateOnline } = store;
 
 const props = defineProps({
   show: {
@@ -60,6 +60,21 @@ function onNicknameChange(e) {
   nickName.value = e.detail.value;
 }
 
+const resetForm = () => {
+  loading.value = false;
+  agree.value = false;
+  phone.value = "";
+  avatarUrl.value = "";
+  nickName.value = "";
+};
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) resetForm();
+  }
+);
+
 const handleLogin = async () => {
   if (loading.value) return;
   if (!phone.value) {
@@ -107,8 +122,6 @@ async function doLogin() {
       );
       const data = await getDeviceBatteryAPI();
       updateOnline(data.online);
-    } else {
-      clearDevice();
     }
     props.onClose();
   } catch (error) {
@@ -139,11 +152,7 @@ const openPrivacyLink = () => {
 };
 
 onShow(() => {
-  loading.value = false;
+  resetForm();
-  agree.value = false;
-  phone.value = "";
-  avatarUrl.value = "";
-  nickName.value = "";
 });
 </script>
 
@@ -189,10 +198,11 @@ onShow(() => {
         <text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
         <input
           type="nickname"
+          :value="nickName"
           placeholder="请输入昵称"
           :placeholder-style="`color: ${noBg ? '#666' : '#fff9'} `"
+          @input="onNicknameChange"
           @change="onNicknameChange"
-          @blur="onNicknameBlur"
           :style="{ color: noBg ? '#333' : '#fff' }"
         />
       </view>

src/components/TargetCanvas.vue

@@ -1,535 +0,0 @@
-<script setup>
-import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
-
-const defaultCanvasSize = 300;
-const defaultRingCount = 10;
-
-const props = defineProps({
-  // canvas 唯一标识；不传时组件内部自动生成，避免多个靶面 canvas-id 冲突。
-  canvasId: {
-    type: String,
-    default: "",
-  },
-  // 业务坐标半径，例如 20 表示命中点坐标范围为 -20 到 20。
-  // 当前组件主要用它参与重绘判断，外层命中点定位也应使用同一半径。
-  coordinateRadius: {
-    type: Number,
-    default: 20,
-  },
-  // 是否显示靶心十字辅助线。
-  showCrosshair: {
-    type: Boolean,
-    default: false,
-  },
-  // 是否显示象限文字。
-  showQuadrantLabels: {
-    type: Boolean,
-    default: false,
-  },
-  // 是否显示环数文字。
-  showRingLabels: {
-    type: Boolean,
-    default: true,
-  },
-  // 象限文字配置，key 为 1/2/3/4。
-  quadrantLabels: {
-    type: Object,
-    default: () => ({
-      1: "1",
-      2: "2",
-      3: "3",
-      4: "4",
-    }),
-  },
-  // 高亮区域数组。
-  // quadrant: 1/2/3/4，表示第几个象限。
-  // rings: "all" 或环数数组，例如 [7, 8, 9, 10]。
-  // scope: "box" 表示整象限矩形，"sector" 表示环形扇区。
-  // style: 可覆盖高亮填充色、描边色、线宽比例。
-  highlightAreas: {
-    type: Array,
-    default: () => [],
-  },
-  // 只绘制透明高亮层，不绘制完整靶纸；用于叠加在靶纸图片上。
-  highlightOnly: {
-    type: Boolean,
-    default: false,
-  },
-  // 外部指定 canvas 绘制尺寸；用于让高亮层跟随靶图真实显示区域。
-  canvasWidth: {
-    type: Number,
-    default: 0,
-  },
-  canvasHeight: {
-    type: Number,
-    default: 0,
-  },
-  // 靶纸样式覆盖配置，例如环数、环色、环线颜色、环数字体等。
-  targetStyleConfig: {
-    type: Object,
-    default: () => ({}),
-  },
-  // 十字辅助线样式覆盖配置。
-  crosshairStyle: {
-    type: Object,
-    default: () => ({}),
-  },
-  // 象限文字样式覆盖配置。
-  quadrantLabelStyle: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const instance = getCurrentInstance();
-const localCanvasId = `target-canvas-${Math.random().toString(36).slice(2, 10)}`;
-const currentCanvasId = computed(() => props.canvasId || localCanvasId);
-const lastDrawKey = ref("");
-const canvasSize = ref({
-  width: defaultCanvasSize,
-  height: defaultCanvasSize,
-});
-
-// 完整靶纸默认样式，调用方可以通过 targetStyleConfig 局部覆盖。
-const defaultTargetStyleConfig = {
-  ringCount: defaultRingCount,
-  ringColors: {
-    1: "#f8f8f3",
-    2: "#f8f8f3",
-    3: "#595959",
-    4: "#595959",
-    5: "#24aee0",
-    6: "#24aee0",
-    7: "#ff1f35",
-    8: "#ff1f35",
-    9: "#f7d34a",
-    10: "#f7d34a",
-  },
-  ringLineColor: "rgba(150, 150, 150, 0.55)",
-  ringLineWidthRatio: 0.0022,
-  centerDotColor: "#ffffff",
-  centerDotRadiusRatio: 0.0048,
-  ringLabelFontRatio: 0.032,
-  ringLabelDarkColor: "#111111",
-  ringLabelLightColor: "#ffffff",
-};
-
-// 十字辅助线默认样式。
-const defaultCrosshairStyle = {
-  color: "rgba(20, 20, 20, 0.38)",
-  lineWidthRatio: 0.0025,
-};
-
-// 象限文字默认样式。
-const defaultQuadrantLabelStyle = {
-  color: "#ffffff",
-  fontSizeRatio: 0.045,
-  offsetRatio: 0.78,
-};
-
-// 高亮区域默认样式。
-const defaultHighlightStyle = {
-  color: "rgba(254, 216, 71, 0.34)",
-  strokeColor: "rgba(254, 216, 71, 0.82)",
-  lineWidthRatio: 0.003,
-};
-
-// 合并默认靶纸样式和外部传入样式，ringColors 单独深合并。
-const mergeTargetStyleConfig = () => ({
-  ...defaultTargetStyleConfig,
-  ...props.targetStyleConfig,
-  ringColors: {
-    ...defaultTargetStyleConfig.ringColors,
-    ...(props.targetStyleConfig?.ringColors || {}),
-  },
-});
-
-// 统一把外部传入值转成有效数字，非法值使用 fallback。
-const getNumber = (value, fallback = 0) => {
-  const numberValue = Number(value);
-  return Number.isFinite(numberValue) ? numberValue : fallback;
-};
-
-// 获取指定环数的填充色，兼容数字 key 和字符串 key。
-const getRingColor = (ring, config) => {
-  return config.ringColors?.[ring] || config.ringColors?.[String(ring)] || "#ffffff";
-};
-
-// 规范化高亮环数配置；"all" 表示全部环，数组或单值会过滤非法环数。
-const normalizeRings = (rings, ringCount) => {
-  if (rings === "all") {
-    return "all";
-  }
-
-  const rawRings = Array.isArray(rings) ? rings : [rings];
-  return rawRings
-    .map((ring) => Number(ring))
-    .filter((ring) => Number.isInteger(ring) && ring >= 1 && ring <= ringCount);
-};
-
-// 获取象限对应的扇形弧度范围。
-const getQuadrantAngles = (quadrant) => {
-  const angleMap = {
-    1: [Math.PI, Math.PI * 1.5],
-    2: [Math.PI * 1.5, Math.PI * 2],
-    3: [Math.PI * 0.5, Math.PI],
-    4: [0, Math.PI * 0.5],
-  };
-
-  return angleMap[Number(quadrant)] || null;
-};
-
-// 获取象限对应的矩形区域，用于整象限高亮。
-const getQuadrantBox = (quadrant, centerX, centerY, radius) => {
-  const boxMap = {
-    1: [centerX - radius, centerY - radius, radius, radius],
-    2: [centerX, centerY - radius, radius, radius],
-    3: [centerX - radius, centerY, radius, radius],
-    4: [centerX, centerY, radius, radius],
-  };
-
-  return boxMap[Number(quadrant)] || null;
-};
-
-// 绘制实心圆，靶纸环区和中心点都会用到。
-const drawCircle = (ctx, centerX, centerY, radius, fillColor) => {
-  ctx.beginPath();
-  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-  ctx.setFillStyle(fillColor);
-  ctx.fill();
-};
-
-// 绘制环形扇区，用于按象限高亮指定环数。
-const drawAnnularSector = (
-  ctx,
-  centerX,
-  centerY,
-  innerRadius,
-  outerRadius,
-  startAngle,
-  endAngle,
-  fillColor,
-  strokeColor = "",
-  lineWidth = 0
-) => {
-  ctx.beginPath();
-  ctx.arc(centerX, centerY, outerRadius, startAngle, endAngle);
-
-  if (innerRadius > 0) {
-    ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
-  } else {
-    ctx.lineTo(centerX, centerY);
-  }
-
-  ctx.closePath();
-  ctx.setFillStyle(fillColor);
-  ctx.fill();
-
-  if (strokeColor && lineWidth > 0) {
-    ctx.setStrokeStyle(strokeColor);
-    ctx.setLineWidth(lineWidth);
-    ctx.stroke();
-  }
-};
-
-// 从外到内绘制完整靶纸色环。
-const drawTargetRings = (ctx, centerX, centerY, targetRadius, config) => {
-  for (let ring = 1; ring <= config.ringCount; ring += 1) {
-    const radius = targetRadius * ((config.ringCount + 1 - ring) / config.ringCount);
-    drawCircle(ctx, centerX, centerY, radius, getRingColor(ring, config));
-  }
-};
-
-// 绘制所有高亮区域，支持整象限矩形高亮和指定环数扇区高亮。
-const drawHighlights = (ctx, centerX, centerY, targetRadius, config) => {
-  props.highlightAreas.forEach((area = {}) => {
-    const angles = getQuadrantAngles(area.quadrant);
-
-    if (!angles) {
-      return;
-    }
-
-    const highlightStyle = {
-      ...defaultHighlightStyle,
-      ...(area.style || {}),
-    };
-    const highlightLineWidth = Math.max(1, targetRadius * highlightStyle.lineWidthRatio);
-    const rings = normalizeRings(area.rings || "all", config.ringCount);
-    const scope = area.scope || (rings === "all" ? "box" : "sector");
-
-    // 整象限默认画成矩形高亮，便于对应 1/2/3/4 号框训练提示。
-    if (rings === "all" && scope === "box") {
-      const box = getQuadrantBox(area.quadrant, centerX, centerY, targetRadius);
-      if (!box) return;
-      ctx.beginPath();
-      ctx.rect(...box);
-      ctx.setFillStyle(highlightStyle.color);
-      ctx.fill();
-      ctx.setStrokeStyle(highlightStyle.strokeColor);
-      ctx.setLineWidth(highlightLineWidth);
-      ctx.stroke();
-      return;
-    }
-
-    const targetRings = rings === "all"
-      ? Array.from({ length: config.ringCount }, (_, index) => index + 1)
-      : rings;
-
-    targetRings.forEach((ring) => {
-      const innerRadius = targetRadius * ((config.ringCount - ring) / config.ringCount);
-      const outerRadius = targetRadius * ((config.ringCount + 1 - ring) / config.ringCount);
-      drawAnnularSector(
-        ctx,
-        centerX,
-        centerY,
-        innerRadius,
-        outerRadius,
-        angles[0],
-        angles[1],
-        highlightStyle.color,
-        highlightStyle.strokeColor,
-        highlightLineWidth
-      );
-    });
-  });
-};
-
-// 绘制各环之间的分割线。
-const drawRingLines = (ctx, centerX, centerY, targetRadius, config) => {
-  const lineWidth = Math.max(1, targetRadius * config.ringLineWidthRatio);
-
-  ctx.setStrokeStyle(config.ringLineColor);
-  ctx.setLineWidth(lineWidth);
-
-  for (let index = 1; index <= config.ringCount; index += 1) {
-    const radius = targetRadius * (index / config.ringCount);
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-    ctx.stroke();
-  }
-};
-
-// 绘制靶心十字辅助线。
-const drawCrosshair = (ctx, centerX, centerY, targetRadius) => {
-  if (!props.showCrosshair) {
-    return;
-  }
-
-  const style = {
-    ...defaultCrosshairStyle,
-    ...props.crosshairStyle,
-  };
-
-  ctx.beginPath();
-  ctx.moveTo(centerX - targetRadius, centerY);
-  ctx.lineTo(centerX + targetRadius, centerY);
-  ctx.moveTo(centerX, centerY - targetRadius);
-  ctx.lineTo(centerX, centerY + targetRadius);
-  ctx.setStrokeStyle(style.color);
-  ctx.setLineWidth(Math.max(1, targetRadius * style.lineWidthRatio));
-  ctx.stroke();
-};
-
-// 绘制环数文字。
-const drawRingLabels = (ctx, centerX, centerY, targetRadius, config) => {
-  if (!props.showRingLabels) {
-    return;
-  }
-
-  const ringWidth = targetRadius / config.ringCount;
-  const fontSize = Math.max(10, targetRadius * config.ringLabelFontRatio);
-
-  ctx.setFontSize(fontSize);
-  ctx.setTextAlign("center");
-  ctx.setTextBaseline("middle");
-
-  for (let ring = config.ringCount; ring >= 1; ring -= 1) {
-    const y = centerY + (config.ringCount - ring + 0.45) * ringWidth;
-    const color = ring <= 2 ? config.ringLabelDarkColor : config.ringLabelLightColor;
-    ctx.setFillStyle(color);
-    ctx.fillText(String(ring), centerX, y);
-  }
-};
-
-// 绘制象限文字。
-const drawQuadrantLabels = (ctx, centerX, centerY, targetRadius) => {
-  if (!props.showQuadrantLabels) {
-    return;
-  }
-
-  const style = {
-    ...defaultQuadrantLabelStyle,
-    ...props.quadrantLabelStyle,
-  };
-  const offset = targetRadius * style.offsetRatio;
-  const positions = {
-    1: [centerX - offset, centerY - offset],
-    2: [centerX + offset, centerY - offset],
-    3: [centerX - offset, centerY + offset],
-    4: [centerX + offset, centerY + offset],
-  };
-
-  ctx.setFontSize(Math.max(12, targetRadius * style.fontSizeRatio));
-  ctx.setTextAlign("center");
-  ctx.setTextBaseline("middle");
-  ctx.setFillStyle(style.color);
-
-  Object.entries(positions).forEach(([key, position]) => {
-    const label = props.quadrantLabels?.[key] || props.quadrantLabels?.[Number(key)];
-    if (label === undefined || label === null || label === "") return;
-    ctx.fillText(String(label), position[0], position[1]);
-  });
-};
-
-// 生成高亮区域的绘制 key，只保留真正影响画面的字段。
-const getHighlightDrawKeyAreas = () => {
-  return props.highlightAreas.map((area = {}) => ({
-    quadrant: area.quadrant,
-    rings: area.rings,
-    scope: area.scope,
-    style: area.style,
-  }));
-};
-
-// 生成本次绘制状态的唯一 key，用于避免相同内容重复 draw。
-const getDrawKey = (width, height) => {
-  return JSON.stringify({
-    width,
-    height,
-    coordinateRadius: props.coordinateRadius,
-    showCrosshair: props.showCrosshair,
-    showQuadrantLabels: props.showQuadrantLabels,
-    showRingLabels: props.showRingLabels,
-    highlightAreas: getHighlightDrawKeyAreas(),
-    targetStyleConfig: props.targetStyleConfig,
-    crosshairStyle: props.crosshairStyle,
-    quadrantLabelStyle: props.quadrantLabelStyle,
-    highlightOnly: props.highlightOnly,
-  });
-};
-
-// 主绘制入口：根据 highlightOnly 决定画完整靶纸，还是只画透明高亮层。
-const drawTarget = () => {
-  const width = Math.max(getNumber(canvasSize.value.width, defaultCanvasSize), 1);
-  const height = Math.max(getNumber(canvasSize.value.height, defaultCanvasSize), 1);
-  const drawKey = getDrawKey(width, height);
-
-  if (drawKey === lastDrawKey.value) {
-    return;
-  }
-
-  const size = Math.min(width, height);
-  const centerX = width / 2;
-  const centerY = height / 2;
-  const targetRadius = size / 2;
-  const config = mergeTargetStyleConfig();
-  const ctx = uni.createCanvasContext(currentCanvasId.value, instance?.proxy);
-
-  ctx.clearRect(0, 0, width, height);
-
-  if (!props.highlightOnly) {
-    drawTargetRings(ctx, centerX, centerY, targetRadius, config);
-  }
-
-  drawHighlights(ctx, centerX, centerY, targetRadius, config);
-
-  if (!props.highlightOnly) {
-    drawRingLines(ctx, centerX, centerY, targetRadius, config);
-    drawCircle(
-      ctx,
-      centerX,
-      centerY,
-      Math.max(1, targetRadius * config.centerDotRadiusRatio),
-      config.centerDotColor
-    );
-    drawCrosshair(ctx, centerX, centerY, targetRadius);
-    drawRingLabels(ctx, centerX, centerY, targetRadius, config);
-    drawQuadrantLabels(ctx, centerX, centerY, targetRadius);
-  }
-
-  ctx.draw();
-  lastDrawKey.value = drawKey;
-};
-
-const setCanvasSizeAndDraw = async (width, height) => {
-  canvasSize.value = {
-    width: width > 0 ? width : defaultCanvasSize,
-    height: height > 0 ? height : width || defaultCanvasSize,
-  };
-
-  await nextTick();
-  drawTarget();
-};
-
-// 读取 canvas 实际渲染尺寸后再绘制，保证小程序真机尺寸和坐标一致。
-const measureAndDraw = () => {
-  const propWidth = Math.round(getNumber(props.canvasWidth, 0));
-  const propHeight = Math.round(getNumber(props.canvasHeight, 0));
-
-  if (propWidth > 0 && propHeight > 0) {
-    setCanvasSizeAndDraw(propWidth, propHeight);
-    return;
-  }
-
-  const query = uni.createSelectorQuery().in(instance?.proxy);
-
-  query
-    .select(`#${currentCanvasId.value}`)
-    .boundingClientRect(async (rect) => {
-      const width = Math.round(getNumber(rect?.width, defaultCanvasSize));
-      const height = Math.round(getNumber(rect?.height, width || defaultCanvasSize));
-
-      await setCanvasSizeAndDraw(width, height);
-    })
-    .exec();
-};
-
-// 等待 Vue 完成 DOM 更新后重新测量和绘制。
-const scheduleDraw = async () => {
-  await nextTick();
-  measureAndDraw();
-};
-
-watch(
-  () => [
-    props.coordinateRadius,
-    props.showCrosshair,
-    props.showQuadrantLabels,
-    props.showRingLabels,
-    props.highlightAreas,
-    props.highlightOnly,
-    props.canvasWidth,
-    props.canvasHeight,
-    props.quadrantLabels,
-    props.targetStyleConfig,
-    props.crosshairStyle,
-    props.quadrantLabelStyle,
-  ],
-  scheduleDraw,
-  {
-    deep: true,
-  }
-);
-
-onMounted(() => {
-  setTimeout(measureAndDraw, 30);
-});
-</script>
-
-<template>
-  <canvas
-    :id="currentCanvasId"
-    class="target-canvas"
-    :canvas-id="currentCanvasId"
-    :width="canvasSize.width"
-    :height="canvasSize.height"
-  />
-</template>
-
-<style scoped>
-.target-canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-</style>

src/components/UserHeader.vue

@@ -19,6 +19,8 @@ const nextLvlPoints = ref(0);
 const containerWidth = computed(() =>
   props.showRank ? "72%" : "calc(100% - 15px)"
 );
+const isSVip = computed(() => user.value.sVip === true);
+const isVip = computed(() => user.value.vip === true && !isSVip.value);
 const toUserPage = () => {
   // 获取当前页面路径
   const pages = getCurrentPages();
@@ -69,7 +71,18 @@ watch(
       />
       <view class="user-details" @click="toUserPage">
         <view class="user-name">
-          <text>{{ user.nickName }}</text>
+          <view
+            :class="[
+              'member-nickname',
+              isVip ? 'member-nickname--vip' : '',
+              isSVip ? 'member-nickname--svip' : '',
+            ]"
+          >
+            <text class="member-nickname__text">{{ user.nickName }}</text>
+            <text v-if="isSVip" class="member-nickname__shine">{{
+              user.nickName
+            }}</text>
+          </view>
           <image
             class="user-name-image"
             src="../static/vip1.png"
@@ -148,12 +161,13 @@ watch(
   margin-bottom: 5px;
 }
 
-.user-name > text:first-child {
+.user-name .member-nickname {
-  font-size: 13px;
   max-width: 180rpx;
-  white-space: nowrap;
+}
-  overflow: hidden;
+
-  text-overflow: ellipsis;
+.user-name .member-nickname__text,
+.user-name .member-nickname__shine {
+  font-size: 13px;
 }
 
 .user-name-image {

src/mock/index.js

@@ -1,104 +0,0 @@
-// 首页一周打卡展示数据，直接对应顶部 7 个日期卡片。
-export const trainingHomeWeekSchedule = [
-  {
-    key: "mon",
-    label: "周一",
-    status: "done",
-    icon: "../../static/training-home/done.png",
-  },
-  {
-    key: "tue",
-    label: "周二",
-    status: "done",
-    icon: "../../static/training-home/done.png",
-  },
-  {
-    key: "wed",
-    label: "周三",
-    status: "missed",
-    icon: "../../static/training-home/missed.png",
-  },
-  {
-    key: "thu",
-    label: "周四",
-    status: "missed",
-    icon: "../../static/training-home/missed.png",
-  },
-  {
-    key: "fri",
-    label: "周五",
-    status: "done",
-    icon: "../../static/training-home/done.png",
-  },
-  {
-    key: "sat",
-    label: "周六",
-    status: "done",
-    icon: "../../static/training-home/done.png",
-  },
-  {
-    key: "sun",
-    label: "周日",
-    status: "missed",
-    icon: "../../static/training-home/missed.png",
-  },
-];
-
-// 首页统计卡数据，按设计稿从左到右展示。
-export const trainingHomeStats = [
-  { key: "days", value: "12", unit: "天", label: "共训练" },
-  { key: "shots", value: "112", unit: "支", label: "累计射箭" },
-  { key: "hitRate", value: "30", unit: "%", label: "命中率" },
-  { key: "endurance", value: "6", unit: "支/分钟", label: "耐力射击" },
-  { key: "calories", value: "31W", unit: "卡路里", label: "共消耗" },
-];
-
-// 雷达图区文案与数值配置。
-export const trainingHomeRadar = {
-  labels: ["基础", "精准", "力量", "节奏", "耐力"],
-  values: [5.5, 6.3, 10, 4.5, 6],
-  maxValue: 10,
-  surpassValue: '80%'
-};
-
-// 首页主推荐训练卡数据。
-export const trainingHomeFeatured = {
-  title: "基础训练",
-  progressText: "当前进度 LV7 >",
-};
-
-// 首页四个训练入口卡片数据。
-export const trainingHomeModes = [
-  {
-    key: "endurance",
-    title: "耐力训练",
-    progressText: "当前进度 LV5 >",
-    icon: "../../static/training-home/img_3.png",
-    recommended: true,
-    disabled: false,
-  },
-  {
-    key: "precision",
-    title: "精准训练",
-    progressText: "当前进度 LV3 >",
-    icon: "../../static/training-home/img_4.png",
-    recommended: false,
-    disabled: false,
-  },
-  {
-    key: "rhythm",
-    title: "节奏训练",
-    progressText: "当前进度 LV6 >",
-    icon: "../../static/training-home/img_5.png",
-    recommended: false,
-    disabled: false,
-  },
-  {
-    key: "power",
-    title: "力量训练",
-    progressText: "Coming!  LV10",
-    icon: "../../static/training-home/img_6.png",
-    recommended: false,
-    disabled: true,
-  },
-];

src/mock/trainingDifficulty.js

@@ -1,113 +0,0 @@
-// 难度页当前用于保存“开始训练前上下文”的本地存储 key。
-export const trainingDifficultyStorageKey = "training-selection";
-
-// 当前是页面联调用的模拟数据：
-// 1. 总难度 20 级
-// 2. 已解锁到 Lv3
-// 3. 前三关展示不同完成进度
-const totalDifficultyLevel = 20;
-const mockedUnlockedDifficultyId = "lv3";
-const mockedDifficultyProgressMap = {
-  lv1: 100,
-  lv2: 90,
-  lv3: 70,
-};
-
-const modeList = [
-  {
-    key: "endurance",
-    title: "耐力训练",
-  },
-  {
-    key: "precision",
-    title: "精准训练",
-  },
-  {
-    key: "rhythm",
-    title: "节奏训练",
-  },
-  {
-    key: "basic",
-    title: "基础训练",
-  },
-  {
-    key: "power",
-    title: "力量训练",
-  },
-  {
-    key: "focus",
-    title: "专注训练",
-  },
-];
-
-const createDifficultyId = (level) => `lv${level}`;
-
-const createDifficultyLabel = (level) => `Lv${level}`;
-
-// 根据等级生成模拟文案，方便一次性扩展到更多关卡。
-const createDifficultySummary = (level) => {
-  return [
-    `箭靶划分为${Math.min(1 + Math.floor((level - 1) / 5), 4)}个区域`,
-    `需${4 + level}次命中目标`,
-    `${100 + Math.floor((level - 1) / 2) * 10}秒内完成所有射击`,
-    "需使用20CM全环靶",
-  ];
-};
-
-// 难度页的节点位置已经在页面内统一计算，
-// 这里保留最核心的 id / label 即可，不再维护无效的 left / top / style 字段。
-const createDifficultyNode = (level) => {
-  return {
-    id: createDifficultyId(level),
-    label: createDifficultyLabel(level),
-  };
-};
-
-const createDifficultyDetail = (level) => {
-  const id = createDifficultyId(level);
-  const label = createDifficultyLabel(level);
-
-  return {
-    id,
-    label,
-    title: `${label}难度`,
-    summary: createDifficultySummary(level),
-    startText: "开始",
-    targetPaperType: "20CM全环靶",
-  };
-};
-
-// 所有训练模式当前共用同一套难度定义。
-const sharedDifficultyNodes = Array.from(
-  { length: totalDifficultyLevel },
-  (_, index) => createDifficultyNode(index + 1)
-);
-
-const sharedDifficultyDetails = Object.fromEntries(
-  Array.from({ length: totalDifficultyLevel }, (_, index) => {
-    const detail = createDifficultyDetail(index + 1);
-    return [detail.id, detail];
-  })
-);
-
-const createModeConfig = ({ key, title, reward = null }) => {
-  return {
-    key,
-    title,
-    nodes: sharedDifficultyNodes,
-    details: sharedDifficultyDetails,
-    activeDifficultyId: mockedUnlockedDifficultyId,
-    progressMap: mockedDifficultyProgressMap,
-    reward,
-  };
-};
-
-// 难度页数据源入口：
-// 页面通过 getTrainingDifficultyModeConfig(modeKey) 获取当前模式完整配置。
-export const trainingDifficultyModeMap = Object.fromEntries(
-  modeList.map((mode) => [mode.key, createModeConfig(mode)])
-);
-
-export const getTrainingDifficultyModeConfig = (modeKey) => {
-  return trainingDifficultyModeMap[modeKey] || trainingDifficultyModeMap.precision;
-};

src/pages.json

@@ -70,13 +70,16 @@
       "path": "pages/user"
     },
     {
-      "path": "pages/orders"
+      "path": "pages/member/orders"
     },
     {
-      "path": "pages/order-detail"
+      "path": "pages/member/order-detail"
     },
     {
-      "path": "pages/be-vip"
+      "path": "pages/member/be-vip"
+    },
+    {
+      "path": "pages/member/vip-intro"
     },
     {
       "path": "pages/grade-intro"
@@ -112,22 +115,13 @@
       "path": "pages/match-detail"
     },
     {
-      "path": "pages/team-bow-data"
+      "path": "pages/team-battle/team-bow-data"
     },
     {
       "path": "pages/melee-bow-data"
     },
     {
       "path": "pages/mine-bow-data"
-    },
-    {
-      "path": "pages/training/difficulty"
-    },
-    {
-      "path": "pages/training/index"
-    },
-    {
-      "path": "pages/training/practise-one"
     }
   ],
   "globalStyle": {

src/pages/be-vip.vue

@@ -1,258 +0,0 @@
-<script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import Container from "@/components/Container.vue";
-import Avatar from "@/components/Avatar.vue";
-import SButton from "@/components/SButton.vue";
-import Signin from "@/components/Signin.vue";
-import UserHeader from "@/components/UserHeader.vue";
-import { createOrderAPI, getHomeData, getVIPDescAPI } from "@/apis";
-import { formatTimestamp } from "@/util";
-import useStore from "@/store";
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { user, config } = storeToRefs(store);
-const { updateUser } = store;
-
-const selectedVIP = ref(0);
-const showModal = ref(false);
-const lastDate = ref(user.value.expiredAt);
-const refreshing = ref(false);
-const timer = ref(null);
-const richContent = ref("");
-
-const onPay = async () => {
-  if (!user.value.id) {
-    showModal.value = true;
-  } else if (config.value.vipMenus[selectedVIP.value]) {
-    if (config.value.vipMenus[selectedVIP.value].id) {
-      const result = await createOrderAPI(
-        config.value.vipMenus[selectedVIP.value].id
-      );
-      if (!result.pay) return;
-      const params = result.pay.order.jsApi.params;
-      if (params) {
-        wx.requestPayment({
-          timeStamp: params.timeStamp, // 时间戳
-          nonceStr: params.nonceStr, // 随机字符串
-          package: params.package, // 统一下单接口返回的 prepay_id 参数值，格式：prepay_id=***
-          paySign: params.paySign, // 签名
-          signType: "RSA", // 签名类型，默认为RSA
-          async success(res) {
-            uni.showToast({
-              title: "支付成功",
-              icon: "none",
-            });
-            timer.value = setInterval(async () => {
-              refreshing.value = true;
-              const result = await getHomeData();
-              if (result.user.expiredAt > lastDate.value) {
-                refreshing.value = false;
-                if (result.user) updateUser(result.user);
-                clearInterval(timer.value);
-              }
-            }, 1000);
-          },
-          fail(res) {
-            console.log("pay error", res);
-          },
-        });
-      }
-    }
-  }
-};
-
-onMounted(async () => {
-  const result = await getVIPDescAPI();
-  richContent.value = result.describe;
-});
-
-const toOrderPage = () => {
-  uni.navigateTo({
-    url: "/pages/orders",
-  });
-};
-
-onBeforeUnmount(() => {
-  if (timer.value) clearInterval(timer.value);
-});
-</script>
-
-<template>
-  <Container title="会员说明">
-    <view v-if="user.id" class="header">
-      <view>
-        <Avatar :src="user.avatar" :size="35" />
-        <text class="truncate">{{ user.nickName }}</text>
-        <image
-          class="user-name-image"
-          src="../static/vip1.png"
-          mode="widthFix"
-        />
-      </view>
-      <block v-if="refreshing">
-        <image
-          src="../static/btn-loading.png"
-          mode="widthFix"
-          class="loading"
-        />
-      </block>
-      <block v-else>
-        <text v-if="user.expiredAt">
-          {{ formatTimestamp(user.expiredAt) }} 到期
-        </text>
-      </block>
-    </view>
-    <view
-      class="container"
-      :style="{ height: !user.id ? 'calc(100% - 10px)' : 'calc(100% - 62px)' }"
-    >
-      <view class="content vip-content">
-        <view class="title-bar">
-          <view />
-          <text>VIP 介绍</text>
-        </view>
-        <view :style="{ marginTop: '10rpx' }">
-          <rich-text :nodes="richContent" />
-        </view>
-      </view>
-      <view class="content">
-        <view class="title-bar">
-          <view />
-          <text>会员续费</text>
-        </view>
-        <view class="vip-items">
-          <view
-            v-for="(item, index) in config.vipMenus || []"
-            :key="index"
-            :style="{
-              color: selectedVIP === index ? '#fff' : '#333333',
-              borderColor: selectedVIP === index ? '#FF7D57' : '#eee',
-              background:
-                selectedVIP === index
-                  ? '#FF7D57'
-                  : 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
-            }"
-            @click="() => (selectedVIP = index)"
-          >
-            {{ item.name }}
-          </view>
-        </view>
-      </view>
-      <SButton :onClick="onPay">支付</SButton>
-      <view class="my-orders" v-if="user.id">
-        <view @click="toOrderPage">
-          <text>我的订单</text>
-          <image src="../static/enter-arrow-blue.png" mode="widthFix" />
-        </view>
-      </view>
-      <Signin :show="showModal" :onClose="() => (showModal = false)" />
-    </view>
-  </Container>
-</template>
-
-<style scoped>
-.header {
-  width: calc(100% - 30px);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #fff;
-  padding: 15px;
-  padding-top: 0;
-  font-size: 14px;
-}
-.header > view {
-  display: flex;
-  align-items: center;
-}
-.header > view > text {
-  margin-left: 10px;
-  max-width: 120px;
-  text-align: left;
-}
-.header > view > image {
-  margin-left: 5px;
-  width: 20px;
-}
-.header > text:nth-child(2) {
-  color: #fed847;
-}
-.container {
-  width: 100%;
-  background-color: #f5f5f5;
-  padding-top: 10px;
-}
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: #fff;
-  padding: 15px;
-  margin-bottom: 10px;
-}
-.title-bar {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  color: #000;
-}
-.title-bar > view:first-child {
-  width: 5px;
-  height: 15px;
-  border-radius: 10px;
-  background-color: #fed847;
-  margin-right: 10px;
-}
-.content > view:nth-child(2) {
-  font-size: 14px;
-  color: #333;
-}
-.vip-items {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(4, 23.5%);
-  padding: 10px;
-  row-gap: 5%;
-  column-gap: 2%;
-}
-.vip-items > view {
-  border: 1px solid #eee;
-  padding: 12px 0;
-  border-radius: 10px;
-  text-align: center;
-  font-size: 27rpx;
-}
-.vip-content {
-  max-height: 62%;
-}
-.vip-content > view:nth-child(2) {
-  overflow: auto;
-}
-.vip-content > view:nth-child(2)::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  color: transparent;
-}
-.my-orders {
-  display: flex;
-  justify-content: center;
-  color: #39a8ff;
-  margin-top: 10px;
-  font-size: 13px;
-}
-.my-orders > view {
-  display: flex;
-  align-items: center;
-}
-.my-orders > view > image {
-  width: 15px;
-}
-.loading {
-  width: 20px;
-  height: 20px;
-  margin-left: 10px;
-  transition: all 0.3s ease;
-  background-blend-mode: darken;
-  animation: rotate 2s linear infinite;
-}
-</style>

src/pages/friend-battle-result.vue

@@ -92,6 +92,14 @@ const mvpTeam = computed(() => {
   return blueTeamPlayers.value.some((p) => p.id === mvpPlayer.value.id) ? 1 : 2;
 });
 
+const isMember = (player = {}) => player.vip === true || player.sVip === true;
+
+const getMemberNicknameClass = (player = {}) => [
+  "member-nickname",
+  player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
+  player.sVip === true ? "member-nickname--svip" : "",
+];
+
 /**
  * 激励语图片 URL（在 onLoad 中确定 ifWin 后赋值，避免 Math.random 放在 computed 里产生缓存不一致问题）
  */
@@ -128,6 +136,8 @@ const meleeRankList = computed(() => {
       id: p.id,
       avatar: p.avatar || "",
       name: p.name || "",
+      vip: p.vip,
+      sVip: p.sVip,
       // rank_lvl 字段可能缺失，缺失时显示空字符串，避免 getLvlName(undefined) 返回错误段位名
       lvlName: p.rank_lvl != null ? getLvlName(p.rank_lvl) : "",
       totalRing: resultItem.totalRing ?? 0,
@@ -305,7 +315,7 @@ function goBack() {
     <Container
       :bgType="data.mode > 3 ? -1 : 0"
       bgColor="#000000"
-      :onBack="exit"
+      :onBack="goBack"
     >
 
       <!-- ----- Banner 区：game 胜负展示图（仅 NvN 对抗模式）----- -->
@@ -332,7 +342,20 @@ function goBack() {
           <view class="team-players team-players-blue">
             <view v-for="p in blueTeamPlayers" :key="p.id" class="player-item">
               <Avatar :src="p.avatar" :size="34" borderColor="#8FB4FD" />
-              <text class="player-name player-name-blue">{{ p.name }}</text>
+              <view
+                v-if="isMember(p)"
+                :class="[
+                  'player-name',
+                  'player-name-blue',
+                  ...getMemberNicknameClass(p),
+                ]"
+              >
+                <text class="member-nickname__text">{{ p.name }}</text>
+                <text v-if="p.sVip === true" class="member-nickname__shine">
+                  {{ p.name }}
+                </text>
+              </view>
+              <text v-else class="player-name player-name-blue">{{ p.name }}</text>
             </view>
           </view>
 
@@ -340,7 +363,20 @@ function goBack() {
           <view class="team-players team-players-red">
             <view v-for="p in redTeamPlayers" :key="p.id" class="player-item">
               <Avatar :src="p.avatar" :size="34" borderColor="#E67470" />
-              <text class="player-name player-name-red">{{ p.name }}</text>
+              <view
+                v-if="isMember(p)"
+                :class="[
+                  'player-name',
+                  'player-name-red',
+                  ...getMemberNicknameClass(p),
+                ]"
+              >
+                <text class="member-nickname__text">{{ p.name }}</text>
+                <text v-if="p.sVip === true" class="member-nickname__shine">
+                  {{ p.name }}
+                </text>
+              </view>
+              <text v-else class="player-name player-name-red">{{ p.name }}</text>
             </view>
           </view>
         </view>
@@ -385,7 +421,16 @@ function goBack() {
             :size="53"
             :borderColor="mvpTeam === 1 ? '#5FADFF' : '#FF6060'"
           />
-          <text class="mvp-name">{{ mvpPlayer.name }}</text>
+          <view
+            v-if="isMember(mvpPlayer)"
+            :class="['mvp-name', ...getMemberNicknameClass(mvpPlayer)]"
+          >
+            <text class="member-nickname__text">{{ mvpPlayer.name }}</text>
+            <text v-if="mvpPlayer.sVip === true" class="member-nickname__shine">
+              {{ mvpPlayer.name }}
+            </text>
+          </view>
+          <text v-else class="mvp-name">{{ mvpPlayer.name }}</text>
         </view>
       </view>
 
@@ -433,7 +478,16 @@ function goBack() {
 
               <!-- 昵称 + 段位 -->
               <view class="rank-player-info">
-                <text class="rank-player-name">{{ item.name }}</text>
+                <view
+                  v-if="isMember(item)"
+                  :class="['rank-player-name', ...getMemberNicknameClass(item)]"
+                >
+                  <text class="member-nickname__text">{{ item.name }}</text>
+                  <text v-if="item.sVip === true" class="member-nickname__shine">
+                    {{ item.name }}
+                  </text>
+                </view>
+                <text v-else class="rank-player-name">{{ item.name }}</text>
                 <text class="rank-player-lvl">{{ item.lvlName }}</text>
               </view>
 
@@ -613,6 +667,12 @@ function goBack() {
   white-space: nowrap;
 }
 
+.player-name .member-nickname__text,
+.player-name .member-nickname__shine {
+  font-size: 22rpx;
+  font-weight: 400;
+}
+
 /* ---- 得分行 ---- */
 .vs-scores-row {
   position: relative;
@@ -752,6 +812,11 @@ function goBack() {
   white-space: nowrap;
 }
 
+.mvp-name .member-nickname__text,
+.mvp-name .member-nickname__shine {
+  font-size: 24rpx;
+}
+
 /* ============================
    查看完整成绩链接
    ============================ */
@@ -1072,6 +1137,12 @@ function goBack() {
   white-space: nowrap;
 }
 
+.rank-player-name .member-nickname__text,
+.rank-player-name .member-nickname__shine {
+  font-size: 28rpx;
+  font-weight: 500;
+}
+
 .rank-player-lvl {
   font-size: 22rpx;
   color: rgba(255, 255, 255, 0.5);

src/pages/friend-battle.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { onLoad, onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import GuideTwo from "@/components/GuideTwo.vue";
@@ -24,6 +24,8 @@ const roomNumber = ref("");
 const data = ref({});
 const roomID = ref("");
 const loading = ref(false);
+const isSVip = computed(() => user.value.sVip === true);
+const isVip = computed(() => user.value.vip === true && !isSVip.value);
 
 const enterRoom = debounce(async (number) => {
   if (loading.value) return;
@@ -106,7 +108,18 @@ onLoad(async (options) => {
       <view class="my-data">
         <view>
           <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
-          <text class="truncate">{{ user.nickName }}</text>
+          <view
+            :class="[
+              'member-nickname',
+              isVip ? 'member-nickname--vip' : '',
+              isSVip ? 'member-nickname--svip' : '',
+            ]"
+          >
+            <text class="member-nickname__text">{{ user.nickName }}</text>
+            <text v-if="isSVip" class="member-nickname__shine">{{
+              user.nickName
+            }}</text>
+          </view>
           <text class="my-record-btn" @click="goMyRecord">我的战绩</text>
         </view>
         <view>
@@ -335,13 +348,17 @@ onLoad(async (options) => {
   margin-left: auto;
 }
 
-.my-data>view:first-child>text {
+.my-data>view:first-child>.member-nickname {
   color: #fff;
-  font-size: 17px;
   margin-left: 10px;
   width: 120px;
 }
 
+.my-data>view:first-child>.member-nickname__text,
+.my-data>view:first-child>.member-nickname__shine {
+  font-size: 17px;
+}
+
 .my-data>view:last-child {
   margin-bottom: 15px;
 }

src/pages/index.vue

@@ -26,7 +26,6 @@ const {
   updateConfig,
   updateUser,
   updateDevice,
-  clearDevice,
   getLvlName,
   getLvlNameByScore,
   updateOnline,
@@ -128,8 +127,6 @@ onShow(async () => {
         );
         const data = await getDeviceBatteryAPI();
         updateOnline(data.online);
-      } else {
-        clearDevice();
       }
     }
   }
@@ -200,8 +197,7 @@ onShareTimeline(() => {
             </BubbleTip>
           </view>
           <view class="play-card">
-            <!-- toPage('/pages/practise') -->
+            <view @click="$clickSound(() => toPage('/pages/practise'))">
-            <view @click="() => toPage('/pages/training/index')">
               <image src="../static/my-practise.png" mode="widthFix"/>
             </view>
             <view @click="$clickSound(() => toPage('/pages/friend-battle'))">

src/pages/match-detail.vue

@@ -67,7 +67,7 @@ onLoad(async (options) => {
 const checkBowData = (selected) => {
   if (data.value.mode <= 3) {
     uni.navigateTo({
-      url: `/pages/team-bow-data?battleId=${battleId.value}&selected=${selected}`,
+      url: `/pages/team-battle/team-bow-data?battleId=${battleId.value}&selected=${selected}`,
     });
   } else {
     uni.navigateTo({

src/pages/melee-battle.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+import { ref, onMounted, onBeforeUnmount, watch, nextTick, computed } from "vue";
 import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BowTarget from "@/components/BowTarget.vue";
@@ -30,64 +30,15 @@ const playersSorted = ref([]);
 const playersScores = ref([]);
 const halfTimeTip = ref(false);
 const halfRest = ref(false);
-const HALF_REST_SECONDS = 20;
-const halfRestRemain = ref(HALF_REST_SECONDS);
-let halfRestTimer = null;
 /** 控制设备离线提示弹窗的显示状态 */
 const showOfflineModal = ref(false);
-/** 记录每位玩家当前半场连续 10 环及以上次数，key 为 playerId，用于触发 tententen 音效 */
+/** 记录每位玩家当前半场连续 X 环数，key 为 playerId，用于触发 tententen 音效 */
 const xRingStreaks = ref({});
 
-function clearHalfRestCountdown() {
+const currentPlayer = computed(() =>
-  if (halfRestTimer) {
+  players.value.find((player) => String(player?.id) === String(user.value.id))
-    clearInterval(halfRestTimer);
+);
-    halfRestTimer = null;
+const isCurrentUserSvip = computed(() => currentPlayer.value?.sVip === true);
-  }
-}
-
-function getHalfRestSeconds(battleInfo) {
-  const remainCandidates = [
-    battleInfo?.halfRestRemain,
-    battleInfo?.halfRestRemainSeconds,
-    battleInfo?.restRemain,
-    battleInfo?.restRemainSeconds,
-  ];
-
-  for (const item of remainCandidates) {
-    const remain = Number(item);
-    if (Number.isFinite(remain) && remain > 0 && remain <= HALF_REST_SECONDS) {
-      return Math.ceil(remain);
-    }
-  }
-
-  const endTime = Number(battleInfo?.halfRestEndTime ?? battleInfo?.restEndTime);
-  if (!Number.isFinite(endTime) || endTime <= 0) return HALF_REST_SECONDS;
-
-  const timestamp = endTime < 1e12 ? endTime * 1000 : endTime;
-  const diffSeconds = (timestamp - Date.now()) / 1000;
-  if (diffSeconds > 0 && diffSeconds <= HALF_REST_SECONDS) {
-    return Math.ceil(diffSeconds);
-  }
-
-  return HALF_REST_SECONDS;
-}
-
-function startHalfRestCountdown(seconds = HALF_REST_SECONDS) {
-  clearHalfRestCountdown();
-  halfRestRemain.value = Math.max(0, Math.ceil(Number(seconds) || HALF_REST_SECONDS));
-
-  if (halfRestRemain.value <= 0) return;
-
-  halfRestTimer = setInterval(() => {
-    if (halfRestRemain.value <= 1) {
-      halfRestRemain.value = 0;
-      clearHalfRestCountdown();
-      return;
-    }
-
-    halfRestRemain.value -= 1;
-  }, 1000);
-}
 
 /**
  * 监听设备在线状态，大乱斗比赛进行中设备离线时弹窗提示用户
@@ -145,7 +96,8 @@ function recoverData(battleInfo, { force = false } = {}) {
       halfTimeTip.value = true;
       halfRest.value = true;
       tips.value = "准备下半场";
-      startHalfRestCountdown(getHalfRestSeconds(battleInfo));
+      // 剩余休息时间
+      // const remain = (Date.now() - battleInfo.timeoutTime) / 1000;
       setTimeout(() => {
         uni.$emit("update-remain", 0);
       }, 200);
@@ -176,27 +128,23 @@ onLoad(async (options) => {
 });
 
 /**
- * 检测指定玩家连续 10 环及以上是否达到 3 箭，达到则在环数播报入队后追加 tententen 音效
+ * 检测指定玩家连续 X 环是否达到 3 箭，达到则在环数播报入队后追加 tententen 音效
  * @param {number|string} playerId - 本次射手的 ID（大乱斗中 ShootResult 保留 playerId）
- * @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
+ * @param {boolean} isXRing - 本次射击是否为 X 环
  */
-function isTenPlusRing(shot) {
+function checkAndPlayTententen(playerId, isXRing) {
-  return !!(shot?.ringX || Number(shot?.ring) >= 10);
-}
-
-function checkAndPlayTententen(playerId, isTenPlusRingShot) {
   if (!playerId) return;
   const id = parseInt(playerId);
-  if (isTenPlusRingShot) {
+  if (isXRing) {
     xRingStreaks.value[id] = (xRingStreaks.value[id] || 0) + 1;
-    // 同一玩家连续 3 箭均为 10 环及以上，追加到环数音效队列尾部播放
+    // 同一玩家连续 3 箭均为 X 环，追加到环数音效队列尾部播放
     if (xRingStreaks.value[id] >= 3) {
       xRingStreaks.value[id] = 0;
       // nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen，避免播放顺序颠倒
       nextTick(() => audioManager.play("tententen", false));
     }
   } else {
-    // 低于 10 环或未上靶则重置该玩家的连续计数
+    // 非 X 环则重置该玩家的连续计数
     xRingStreaks.value[id] = 0;
   }
 }
@@ -204,7 +152,6 @@ function checkAndPlayTententen(playerId, isTenPlusRingShot) {
 async function onReceiveMessage(msg) {
   if (Array.isArray(msg)) return;
   if (msg.type === MESSAGETYPESV2.BattleStart) {
-    clearHalfRestCountdown();
     halfTimeTip.value = false;
     halfRest.value = false;
     recoverData(msg);
@@ -219,23 +166,22 @@ async function onReceiveMessage(msg) {
     // 对比更新后数据找出箭数增加的玩家（即本次射手），并读取其最新箭的 ring 数据
     const newRound = playersScores.value[playersScores.value.length - 1] || {};
     let shooterId = null;
-    let isTenPlusRingShot = false;
+    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];
-        isTenPlusRingShot = isTenPlusRing(shot);
+        isXRing = !!(shot?.ringX && shot?.ring);
         break;
       }
     }
-    // 检测同一玩家连续三箭 10 环及以上，触发 tententen 音效
+    // 检测同一玩家三箭全 X 环，触发 tententen 音效
-    checkAndPlayTententen(shooterId, isTenPlusRingShot);
+    checkAndPlayTententen(shooterId, isXRing);
   } else if (msg.type === MESSAGETYPESV2.HalfRest) {
     halfTimeTip.value = true;
     halfRest.value = true;
     tips.value = "准备下半场";
-    startHalfRestCountdown();
   } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
     setTimeout(() => {
       // 全部跳转到新结算页
@@ -256,7 +202,6 @@ onBeforeUnmount(() => {
   uni.setKeepScreenOn({
     keepScreenOn: false,
   });
-  clearHalfRestCountdown();
   uni.$off("socket-inbox", onReceiveMessage);
   audioManager.stopAll();
 });
@@ -304,6 +249,7 @@ onShow(async () => {
         "
         :totalRound="12"
         :scores="playersScores.map((r) => r[user.id]).flat()"
+        :isSvip="isCurrentUserSvip"
         :stop="halfRest"
       />
       <view :style="{ paddingBottom: '20px' }">
@@ -321,7 +267,7 @@ onShow(async () => {
       >
         <view class="half-time-tip">
           <text>上半场结束，休息一下吧:）</text>
-          <text>{{ halfRestRemain }}秒后开始下半场</text>
+          <text>20秒后开始下半场</text>
         </view>
       </ScreenHint>
       <!-- 设备离线提示弹窗 -->

src/pages/melee-bow-data.vue

@@ -13,13 +13,31 @@ const currentUser = ref({
 });
 const players = ref([]);
 
+function getRingTotal(arrows = []) {
+  return arrows.reduce((last, next) => last + (Number(next?.ring) || 0), 0);
+}
+
+function getScoreLabel(score) {
+  if (!score) return "";
+  return score.ringX ? "X" : score.ring || "";
+}
+
+const isMember = (player = {}) => player.vip === true || player.sVip === true;
+
+const getMemberNicknameClass = (player = {}) => [
+  "player-name",
+  "member-nickname",
+  player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
+  player.sVip === true ? "member-nickname--svip" : "",
+];
+
 onLoad(async (options) => {
   if (!options.battleId) return;
   const result = await getBattleAPI(options.battleId || "59348111700660224");
+  const plist = result.teams?.[0]?.players || [];
   players.value = result.resultList.map((item, index) => {
-    const plist = result.teams[0] ? result.teams[0].players : [];
+    const p = plist.find((p) => String(p.id) === String(item.userId));
-    const p = plist.find((p) => p.id === item.userId);
+    const arrows = Array.from({ length: 12 }, () => ({}));
-    const arrows = new Array(12);
     result.rounds.forEach((r, index) => {
       if (r.shoots[item.userId]) {
         r.shoots[item.userId].forEach((s, index2) => {
@@ -29,9 +47,11 @@ onLoad(async (options) => {
     });
     return {
       ...item,
+      ...p,
+      userId: item.userId,
       rank: index + 1,
-      name: p.name,
+      name: p?.name || item.name,
-      avatar: p.avatar || "",
+      avatar: p?.avatar || item.avatar || "",
       arrows,
     };
   });
@@ -68,18 +88,27 @@ onLoad(async (options) => {
             class="player-bg"
           />
           <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
-          <text>{{ player.name }}</text>
+          <view v-if="isMember(player)" :class="getMemberNicknameClass(player)">
+            <text class="member-nickname__text">{{ player.name }}</text>
+            <text v-if="player.sVip === true" class="member-nickname__shine">
+              {{ player.name }}
+            </text>
+          </view>
+          <text v-else>{{ player.name }}</text>
         </view>
       </view>
       <view :style="{ marginTop: '10px' }">
-        <BowTarget :scores="currentUser.arrows" />
+        <BowTarget
+          :scores="currentUser.arrows"
+          :isSvip="currentUser.sVip === true"
+        />
       </view>
       <view class="score-text"
         ><text :style="{ color: '#fed847' }">{{
           currentUser.arrows.length
         }}</text
         >支箭，共<text :style="{ color: '#fed847' }">{{
-          currentUser.arrows.reduce((last, next) => last + next.ring, 0)
+          getRingTotal(currentUser.arrows)
         }}</text
         >环</view
       >
@@ -90,7 +119,7 @@ onLoad(async (options) => {
           class="score-item"
           :style="{ width: '13vw', height: '13vw' }"
         >
-          {{ score.ringX ? "X" : score.ring }}
+          {{ getScoreLabel(score) }}
         </view>
       </view>
     </view>
@@ -149,6 +178,16 @@ onLoad(async (options) => {
   text-align: center;
   position: relative;
 }
+.players > view > .player-name {
+  margin: 5px 0;
+  width: 80%;
+  position: relative;
+  justify-content: center;
+}
+.player-name .member-nickname__text,
+.player-name .member-nickname__shine {
+  font-size: 12px;
+}
 .score-text {
   width: 100%;
   color: #fff;

src/pages/member/be-vip.vue

@@ -0,0 +1,879 @@
+<script setup>
+import { computed, ref, onBeforeUnmount } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import Signin from "@/components/Signin.vue";
+import { createOrderAPI, getAppConfig, getHomeData } from "@/apis";
+import { capsuleHeight } from "@/util";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+
+const store = useStore();
+const { user, config } = storeToRefs(store);
+const { updateConfig, updateUser } = store;
+
+const currentTypeIndex = ref(1);
+const selectedPackageIndex = ref(0);
+const showModal = ref(false);
+const loadingConfig = ref(false);
+const paying = ref(false);
+const refreshing = ref(false);
+const timer = ref(null);
+const lastDate = ref(user.value.expiredAt || 0);
+const maxRefreshTimes = 12;
+
+// 会员页核心展示数据：视觉、权益、套餐均按蓝湖当前两张设计稿拆分。
+const memberTypes = [
+  {
+    key: "normal",
+    tab: "VIP",
+    title: "普通会员",
+    prefix: "成为射灵星球",
+    desc: "特享约战竞技次数包、专属会员标识",
+    benefitTitle: "普通会员专属权益",
+    themeClass: "vip-page--normal",
+    heroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/vip-title.png",
+    activeHeroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/vip-title2.png",
+    orderIcon: "../../static/vip/vip-order.png",
+    heroBadge: "../../static/vip/normal-hero-badge.png",
+    buttonClass: "activate-btn--normal",
+    benefits: [
+      { label: "专属会员标识", icon: "../../static/vip/vip-badge.png" },
+      { label: "教练点评", icon: "../../static/vip/vip-comment.png" },
+      { label: "专享VIP客服", icon: "../../static/vip/vip-service.png" },
+      { label: "排位赛\n每日+20次", icon: "../../static/vip/vip-rank.png" },
+      { label: "约战\n每日+20次", icon: "../../static/vip/vip-battle.png" },
+    ],
+    packages: [
+      { name: "连续包月", price: "20", original: "35" },
+      { name: "12个月", price: "300", original: "420" },
+      { name: "3个月", price: "84", original: "105" },
+    ],
+  },
+  {
+    key: "super",
+    tab: "SVIP",
+    title: "超级会员",
+    prefix: "成为射灵星球",
+    desc: "尊享专属特效、无限制约战竞技、专属会员标识",
+    benefitTitle: "超级会员专属权益",
+    themeClass: "vip-page--super",
+    heroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/svip-title.png",
+    activeHeroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/svip-title2.png",
+    orderIcon: "../../static/vip/svip-order.png",
+    heroBadge: "../../static/vip/super-hero-badge.png",
+    buttonClass: "activate-btn--super",
+    benefits: [
+      { label: "专属落点标识", icon: "../../static/vip/svip-point.png" },
+      { label: "专属命中效果", icon: "../../static/vip/svip-hit.png" },
+      { label: "专属射箭效果", icon: "../../static/vip/svip-arrow.png" },
+      { label: "专属会员标识", icon: "../../static/vip/svip-badge.png" },
+      { label: "教练点评", icon: "../../static/vip/svip-comment.png" },
+      { label: "约战无限制", icon: "../../static/vip/svip-battle.png" },
+      { label: "排位赛无限制", icon: "../../static/vip/svip-rank.png" },
+      { label: "专享SVIP客服", icon: "../../static/vip/svip-service.png" },
+    ],
+    packages: [
+      { name: "连续包月", price: "20", original: "35" },
+      { name: "12个月", price: "300", original: "420" },
+      { name: "3个月", price: "84", original: "105" },
+    ],
+  },
+];
+
+const currentType = computed(() => memberTypes[currentTypeIndex.value]);
+
+// 后端到期时间可能是秒级时间戳、毫秒级时间戳或日期字符串，这里统一转成毫秒。
+const toTimestamp = (value) => {
+  if (!value) return 0;
+  const numberValue = Number(value);
+  if (!Number.isNaN(numberValue)) {
+    return numberValue < 1000000000000 ? numberValue * 1000 : numberValue;
+  }
+  const time = new Date(value).getTime();
+  return Number.isNaN(time) ? 0 : time;
+};
+
+// 当前卡片只关心本 tab 对应的会员到期时间，普通会员和超级会员互不兜底。
+const getVipExpiredValue = (type, source = user.value) => {
+  if (!source) return 0;
+  return type.key === "super" ? source.superVipExpiredAt : source.normalVipExpiredAt;
+};
+
+// 支付后轮询需要比较最新会员到期时间，兼容旧字段 expiredAt。
+const getLatestVipExpiredTime = (source = user.value) => {
+  if (!source) return 0;
+  return Math.max(
+    toTimestamp(source.normalVipExpiredAt),
+    toTimestamp(source.superVipExpiredAt),
+    toTimestamp(source.expiredAt)
+  );
+};
+
+// 未过期才展示“会员生效中”样式，已过期或无值继续展示未开通样式。
+const isVipActive = (type) => {
+  return toTimestamp(getVipExpiredValue(type)) > Date.now();
+};
+
+// 会员卡片展示完整到期时间。
+const formatVipDate = (value) => {
+  const timestamp = toTimestamp(value);
+  if (!timestamp) return "";
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hour = String(date.getHours()).padStart(2, "0");
+  const minute = String(date.getMinutes()).padStart(2, "0");
+  const second = String(date.getSeconds()).padStart(2, "0");
+  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+};
+
+// 会员生效时使用 title2 切图，未生效时沿用原来的开通引导图。
+const getHeroCard = (type) => {
+  return isVipActive(type) ? type.activeHeroCard : type.heroCard;
+};
+
+const getActiveVipExpiredDate = (type) => {
+  return formatVipDate(getVipExpiredValue(type));
+};
+
+// 设计稿里的“下期自动续费”按到期日前一天展示。
+const getActiveVipRenewDate = (type) => {
+  const timestamp = toTimestamp(getVipExpiredValue(type));
+  if (!timestamp) return "";
+  return formatVipDate(timestamp - 24 * 60 * 60 * 1000);
+};
+
+const configMenus = computed(() => {
+  return config.value.vipMenus || [];
+});
+
+const getMenuName = (item) => {
+  return item.name || item.vipName || item.title || "";
+};
+
+const getMenuPrice = (item) => {
+  const value = item.price || item.total || item.amount || item.money;
+  return value ? String(value).replace("￥", "").replace("¥", "") : "";
+};
+
+const getMenuType = (item) => {
+  const vipType = Number(item.vipType);
+  if (vipType === 1) return "normal";
+  if (vipType === 2) return "super";
+
+  const type = String(item.type || "").toLowerCase();
+  if (["super", "svip"].includes(type)) return "super";
+  if (["normal", "vip"].includes(type)) return "normal";
+
+  const name = getMenuName(item);
+  if (/超级|SVIP/i.test(name)) return "super";
+  if (/普通|VIP|会员/i.test(name)) return "normal";
+  return "";
+};
+
+const getPackageMonths = (name) => {
+  if (/连续包月/.test(name)) return 1;
+  const match = String(name || "").match(/(\d+)\s*个?月/);
+  return match ? Number(match[1]) : 0;
+};
+
+const matchPackageSource = (type, pack, index) => {
+  const menus = configMenus.value;
+  const typedMenus = menus.filter((item) => {
+    const menuType = getMenuType(item);
+    if (type.key === "super") return menuType === "super";
+    return menuType === "normal";
+  });
+  const pool = typedMenus.length ? typedMenus : menus;
+  const packMonths = getPackageMonths(pack.name);
+  return (
+    pool.find((item) => getMenuName(item).indexOf(pack.name) !== -1) ||
+    pool.find((item) => packMonths && getPackageMonths(getMenuName(item)) === packMonths) ||
+    pool.find((item) => getMenuPrice(item) === pack.price) ||
+    pool[index]
+  );
+};
+
+const getPackages = (type) => {
+  return type.packages.map((item, index) => {
+    const source = matchPackageSource(type, item, index);
+    return {
+      ...item,
+      source,
+      name: source ? getMenuName(source) || item.name : item.name,
+      price: source ? getMenuPrice(source) || item.price : item.price,
+      icon: source && source.icon,
+      id: source && source.id,
+    };
+  });
+};
+
+const currentPackages = computed(() => {
+  return getPackages(currentType.value);
+});
+
+const selectedPackage = computed(() => {
+  return currentPackages.value[selectedPackageIndex.value] || currentPackages.value[0];
+});
+
+const switchType = (index) => {
+  currentTypeIndex.value = index;
+  selectedPackageIndex.value = 0;
+};
+
+const onSwiperChange = (event) => {
+  currentTypeIndex.value = event.detail.current;
+  selectedPackageIndex.value = 0;
+};
+
+const selectPackage = (index) => {
+  selectedPackageIndex.value = index;
+};
+
+const toPackageDesc = () => {
+  uni.navigateTo({
+    url: "/pages/member/vip-intro",
+  });
+};
+
+const toOrderPage = () => {
+  uni.navigateTo({
+    url: "/pages/member/orders",
+  });
+};
+
+const loadVipConfig = async () => {
+  if (loadingConfig.value || configMenus.value.length) return;
+  loadingConfig.value = true;
+  try {
+    const result = await getAppConfig();
+    if (result) updateConfig(result);
+  } catch (error) {
+    console.log("load vip config error", error);
+  } finally {
+    loadingConfig.value = false;
+  }
+};
+
+const clearRefreshTimer = () => {
+  if (timer.value) {
+    clearInterval(timer.value);
+    timer.value = null;
+  }
+};
+
+const refreshUserAfterPay = () => {
+  clearRefreshTimer();
+  let refreshTimes = 0;
+  // 先记录支付前的最大到期时间，轮询到更大的值就认为会员状态已刷新。
+  lastDate.value = getLatestVipExpiredTime();
+  refreshing.value = true;
+  timer.value = setInterval(async () => {
+    refreshTimes += 1;
+    try {
+      const result = await getHomeData();
+      const latestExpiredAt = getLatestVipExpiredTime(result.user);
+      if (result.user && latestExpiredAt > lastDate.value) {
+        lastDate.value = latestExpiredAt;
+        updateUser(result.user);
+        clearRefreshTimer();
+        refreshing.value = false;
+      } else if (refreshTimes >= maxRefreshTimes) {
+        clearRefreshTimer();
+        refreshing.value = false;
+      }
+    } catch (error) {
+      console.log("refresh user after pay error", error);
+      if (refreshTimes >= maxRefreshTimes) {
+        clearRefreshTimer();
+        refreshing.value = false;
+      }
+    }
+  }, 1000);
+};
+
+const onPay = async () => {
+  if (paying.value || refreshing.value) return;
+  if (!user.value.id) {
+    showModal.value = true;
+    return;
+  }
+  if (!configMenus.value.length) {
+    await loadVipConfig();
+  }
+  const vipId = selectedPackage.value && selectedPackage.value.id;
+  if (!vipId) {
+    uni.showToast({
+      title: loadingConfig.value ? "套餐配置加载中" : "套餐暂不可购买",
+      icon: "none",
+    });
+    return;
+  }
+  paying.value = true;
+  let waitingPayment = false;
+  try {
+    const result = await createOrderAPI(vipId);
+    const params = result?.pay?.order?.jsApi?.params;
+    if (!params?.timeStamp || !params?.nonceStr || !params?.package || !params?.paySign) {
+      uni.showToast({
+        title: "支付参数生成失败",
+        icon: "none",
+      });
+      refreshing.value = false;
+      return;
+    }
+    waitingPayment = true;
+    wx.requestPayment({
+      timeStamp: params.timeStamp, // 微信支付时间戳
+      nonceStr: params.nonceStr, // 微信支付随机串
+      package: params.package, // 预支付交易会话标识
+      paySign: params.paySign, // 微信支付签名
+      signType: params.signType || "RSA",
+      success() {
+        uni.showToast({
+          title: "支付成功",
+          icon: "none",
+        });
+        refreshUserAfterPay();
+      },
+      fail(res) {
+        console.log("pay error", res);
+        if (res.errMsg && res.errMsg.indexOf("cancel") !== -1) return;
+        uni.showToast({
+          title: "支付失败，请稍后重试",
+          icon: "none",
+        });
+      },
+      complete() {
+        paying.value = false;
+      },
+    });
+  } catch (error) {
+    console.log("create vip order error", error);
+  } finally {
+    if (!waitingPayment) paying.value = false;
+  }
+};
+
+onShow(loadVipConfig);
+
+onBeforeUnmount(() => {
+  clearRefreshTimer();
+});
+</script>
+
+<template>
+  <Container title="" :bgType="10" :scroll="false" :showBottom="false">
+    <view class="vip-page" :class="currentType.themeClass">
+      <view class="type-tabs" :style="{ top: capsuleHeight + 'px' }">
+        <view
+          v-for="(item, index) in memberTypes"
+          :key="item.key"
+          class="type-tab"
+          :class="{ 'type-tab--active': currentTypeIndex === index }"
+          @click="switchType(index)"
+        >
+          <text>{{ item.tab }}</text>
+          <view class="type-tab__indicator" />
+        </view>
+      </view>
+      <swiper
+        class="type-swiper"
+        :current="currentTypeIndex"
+        :duration="260"
+        @change="onSwiperChange"
+      >
+        <swiper-item v-for="type in memberTypes" :key="type.key">
+          <scroll-view scroll-y class="type-scroll" :show-scrollbar="false">
+            <view class="vip-content">
+              <view
+                class="hero-card"
+                :class="{ 'hero-card--active': isVipActive(type) }"
+              >
+                <image class="hero-card__bg" :src="getHeroCard(type)" mode="scaleToFill" />
+                <!-- 生效态卡片使用 title2 底图，补充有效期和订单入口叠层。 -->
+                <view v-if="isVipActive(type)" class="hero-card__content">
+                  <text class="hero-card__date">
+                    有效期至：{{ getActiveVipExpiredDate(type) }}
+                  </text>
+                  <!-- <text v-if="type.key === 'super'" class="hero-card__renew">
+                    下期会员将于：{{ getActiveVipRenewDate(type) }}自动续费
+                  </text> -->
+                  <view class="hero-card__order" @click.stop="toOrderPage">
+                    <image class="hero-card__order-icon" :src="type.orderIcon" mode="aspectFit" />
+                    <text>订单管理</text>
+                  </view>
+                </view>
+              </view>
+
+              <view class="benefit-title">
+                <view class="benefit-title__line" />
+                <text>{{ type.benefitTitle }}</text>
+                <view class="benefit-title__line" />
+              </view>
+
+              <view class="benefit-grid" :class="{ 'benefit-grid--normal': type.key === 'normal' }">
+                <view
+                  v-for="benefit in type.benefits"
+                  :key="benefit.label"
+                  class="benefit-item"
+                >
+                  <view class="benefit-icon">
+                    <image class="benefit-icon__img" :src="benefit.icon" mode="aspectFit" />
+                  </view>
+                  <text class="benefit-item__label">{{ benefit.label }}</text>
+                </view>
+              </view>
+
+              <view class="package-header">
+                <text class="package-header__title">选择套餐</text>
+                <view class="package-header__link" @click="toPackageDesc">
+                  <text>套餐说明</text>
+                  <image
+                    class="package-header__icon"
+                    src="../../static/enter.png"
+                    mode="aspectFit"
+                  />
+                </view>
+              </view>
+
+              <scroll-view scroll-x class="package-scroll" :show-scrollbar="false">
+                <view class="package-list">
+                  <view
+                    v-for="(pack, index) in getPackages(type)"
+                    :key="`${type.key}-${pack.name}`"
+                    class="package-card"
+                    :class="{ 'package-card--active': selectedPackageIndex === index }"
+                    @click="selectPackage(index)"
+                  >
+                    <view class="package-card__inner">
+                      <text class="package-name">{{ pack.name }}</text>
+                      <view class="package-price">
+                        <text class="package-price__symbol">¥</text>
+                        <text class="package-price__value">{{ pack.price }}</text>
+                      </view>
+                      <view class="package-origin">
+                        <text>¥{{ pack.original }}</text>
+                        <view class="package-origin__line" />
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </scroll-view>
+
+              <button
+                hover-class="none"
+                class="activate-btn"
+                :class="type.buttonClass"
+                :disabled="loadingConfig || paying || refreshing"
+                @click="onPay"
+              >
+                <text v-if="loadingConfig">加载套餐中</text>
+                <text v-else-if="paying">创建订单中</text>
+                <text v-else-if="!refreshing">¥ {{ selectedPackage.price }} 一键激活</text>
+                <text v-else>刷新会员状态中</text>
+              </button>
+
+              <view class="agreement">
+                <text>支付即同意</text>
+                《&nbsp;<text class="agreement__link">会员自动续费服务协议</text>》
+                《&nbsp;<text class="agreement__link">扣款授权服务协议</text>》
+              </view>
+            </view>
+          </scroll-view>
+        </swiper-item>
+      </swiper>
+      <Signin :show="showModal" :onClose="() => (showModal = false)" />
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.vip-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.type-tabs {
+  position: fixed;
+  left: 0;
+  z-index: 998;
+  width: 50%;
+  height: 50px;
+  margin-left: 50%;
+  transform:translateX(-60%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+.type-tab {
+  width: 132rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 34rpx;
+  font-weight: 700;
+  font-style: italic;
+}
+
+.type-tab__indicator {
+  width: 40rpx;
+  height: 4rpx;
+  border-radius: 4rpx;
+  margin-top: 8rpx;
+  background-color: transparent;
+}
+
+.type-tab--active {
+  color: #ffffff;
+}
+
+.vip-page--normal .type-tab--active .type-tab__indicator {
+  background-color: #ffffff;
+}
+
+.vip-page--super .type-tab--active {
+  color: #fedab5;
+}
+
+.vip-page--super .type-tab--active .type-tab__indicator {
+  background-color: #fedab5;
+}
+
+.type-swiper {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.type-scroll {
+  width: 100%;
+  height: 100%;
+}
+
+.vip-content {
+  min-height: 100%;
+  padding: 32rpx 24rpx 52rpx;
+  box-sizing: border-box;
+}
+
+.hero-card {
+  position: relative;
+  width: 702rpx;
+  height: 260rpx;
+  overflow: hidden;
+}
+
+.hero-card__bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 702rpx;
+  height: 260rpx;
+}
+
+.hero-card__content {
+  position: relative;
+  z-index: 1;
+  /* 对齐 title2 切图左侧预留文案区域。 */
+  padding: 132rpx 0 0 44rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+
+.hero-card__date,
+.hero-card__renew {
+  color: #8d6d55;
+  font-size: 24rpx;
+  line-height: 34rpx;
+}
+
+.vip-page--normal .hero-card__date,
+.vip-page--normal .hero-card__renew {
+  color: #555555;
+}
+
+.hero-card__order {
+  display: flex;
+  align-items: center;
+  margin-top: 10rpx;
+  color: #6d5644;
+  font-size: 24rpx;
+  line-height: 34rpx;
+  text-decoration: underline;
+}
+
+.vip-page--normal .hero-card__order {
+  color: #555555;
+}
+
+.hero-card__order-icon {
+  width: 28rpx;
+  height: 32rpx;
+  margin-right: 8rpx;
+  flex-shrink: 0;
+}
+
+.benefit-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 38rpx;
+  color: #ffffff;
+  font-size: 24rpx;
+  line-height: 34rpx;
+}
+
+.benefit-title__line {
+  width: 14rpx;
+  height: 2rpx;
+  background-color: #ffffff;
+  margin: 0 10rpx;
+}
+
+.benefit-grid {
+  display: flex;
+  flex-wrap: wrap;
+  width: 622rpx;
+  margin: 38rpx auto 0;
+}
+
+.benefit-grid--normal {
+  width: 672rpx;
+}
+
+.benefit-item {
+  width: 144rpx;
+  height: 122rpx;
+  margin-right: 94rpx;
+  margin-bottom: 30rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.benefit-item:nth-child(3n) {
+  margin-right: 0;
+}
+
+.benefit-grid--normal .benefit-item {
+  margin-right: 120rpx;
+}
+
+.benefit-grid--normal .benefit-item:nth-child(3n) {
+  margin-right: 0;
+}
+
+.benefit-icon {
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.benefit-icon__img {
+  width: 80rpx;
+  height: 80rpx;
+  display: block;
+}
+
+.benefit-item__label {
+  margin-top: 8rpx;
+  color: #ffffff;
+  opacity: 0.7;
+  font-size: 24rpx;
+  line-height: 34rpx;
+  text-align: center;
+  white-space: pre-line;
+}
+
+.package-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 56rpx;
+  padding-right: 8rpx;
+}
+
+.benefit-grid--normal + .package-header {
+  margin-top: 146rpx;
+}
+
+.package-header__title {
+  color: #ffffff;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  font-weight: 500;
+}
+
+.vip-page--super .package-header__title {
+  color: #e7ba80;
+}
+
+.package-header__link {
+  display: flex;
+  align-items: center;
+  color: #999999;
+  font-size: 22rpx;
+  line-height: 32rpx;
+}
+
+.package-header__icon {
+  width: 24rpx;
+  height: 28rpx;
+}
+
+.package-scroll {
+  width: 100%;
+  margin-top: 40rpx;
+  white-space: nowrap;
+}
+
+.package-list {
+  display: flex;
+  width: 984rpx;
+  padding: 6rpx 84rpx 6rpx 6rpx;
+  box-sizing: border-box;
+}
+
+.package-card {
+  position: relative;
+  width: 264rpx;
+  height: 224rpx;
+  border-radius: 16rpx;
+  border: 2rpx solid #999999;
+  margin-right: 32rpx;
+  padding: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  color: #999999;
+}
+
+.package-card__inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: inherit;
+}
+
+.package-card--active {
+  border-width: 6rpx;
+  border-color: #fed847;
+}
+
+.vip-page--super .package-card--active {
+  border: none;
+  padding: 6rpx;
+  background: linear-gradient(180deg, #fef3e6 0%, #f0c191 100%);
+}
+
+.vip-page--super .package-card--active .package-card__inner {
+  border-radius: 10rpx;
+  background-color: #050b19;
+}
+
+.package-name {
+  font-size: 24rpx;
+  line-height: 34rpx;
+}
+
+.package-price {
+  display: flex;
+  align-items: baseline;
+  margin-top: 12rpx;
+  color: #ffffff;
+}
+
+.package-card--active .package-price {
+  color: #fed847;
+}
+
+.vip-page--super .package-card--active .package-price {
+  color: #ffe8cd;
+}
+
+.package-price__symbol {
+  font-size: 30rpx;
+  line-height: 36rpx;
+  font-weight: 700;
+}
+
+.package-price__value {
+  font-size: 56rpx;
+  line-height: 66rpx;
+  font-weight: 700;
+}
+
+.package-origin {
+  position: relative;
+  margin-top: 2rpx;
+  color: #999999;
+  font-size: 24rpx;
+  line-height: 34rpx;
+}
+
+.package-origin__line {
+  position: absolute;
+  left: -4rpx;
+  right: -4rpx;
+  top: 16rpx;
+  height: 2rpx;
+  background-color: #999999;
+}
+
+.activate-btn {
+  width: 686rpx;
+  height: 88rpx;
+  border-radius: 44rpx;
+  margin: 34rpx auto 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000000;
+  font-size: 30rpx;
+  line-height: 42rpx;
+  font-weight: 500;
+}
+
+.activate-btn::after {
+  border: none;
+}
+
+.activate-btn--normal {
+  background-color: #fed847;
+}
+
+.activate-btn--super {
+  background: linear-gradient( 181deg, #FDFDFC 0%, #FDF8F2 0%, #FFC992 100%, #FFB96C 100%);
+}
+
+.agreement {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 24rpx;
+  color: #999999;
+  font-size: 20rpx;
+  line-height: 28rpx;
+}
+
+.agreement__link {
+  margin-left: -6rpx;
+  text-decoration: underline;
+}
+</style>

src/pages/member/order-detail.vue

@@ -61,6 +61,18 @@ const goPay = async () => {
   }
 };
 
+const copyOrderId = (orderId) => {
+  uni.setClipboardData({
+    data: String(orderId),
+    success: () => {
+      uni.showToast({
+        title: "复制成功",
+        icon: "success",
+      });
+    },
+  });
+};
+
 const cancelOrder = async () => {
   const result = await cancelOrderListAPI(data.value.orderId);
   data.value = result;
@@ -78,8 +90,13 @@ const cancelOrder = async () => {
       >
       <view class="order">
         <view>
-          <text>商品名：{{ data.vipName }}</text>
+          <text>{{ data.vipName }}</text>
-          <text>订单号：{{ data.orderId }}</text>
+          <view class="order-number">
+            <text>订单号：{{ data.orderId }}</text>
+            <text class="copy-action" @click.stop="copyOrderId(data.orderId)"
+              >复制</text
+            >
+          </view>
           <text>下单时间：{{ data.vipCreateAt }}</text>
           <text
             >支付时间：{{
@@ -141,4 +158,25 @@ const cancelOrder = async () => {
   text-align: center;
   font-size: 11px;
 }
+
+.order-number {
+  display: flex;
+  align-items: center;
+  color: #666666;
+  font-size: 26rpx;
+  margin-top: 10rpx;
+}
+.order-number > text:first-child {
+  flex: 1;
+  min-width: 0;
+  word-break: break-all;
+}
+.copy-action {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  padding: 2rpx 14rpx;
+  color: #1f6ed4;
+  font-size: 24rpx;
+  line-height: 34rpx;
+}
 </style>

src/pages/member/orders.vue

@@ -3,6 +3,7 @@ import { ref, onMounted } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import ScrollList from "@/components/ScrollList.vue";
+import ModalDialog from "@/components/ModalDialog.vue";
 import { getOrderListAPI } from "@/apis";
 import useStore from "@/store";
 import { orderStatusNames, getStatusColor } from "@/constants";
@@ -10,13 +11,34 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, config } = storeToRefs(store);
 
+const autoRenewDialogVisible = ref(false);
+const selectedRenewOrder = ref(null);
+
 const toDetailPage = (detail) => {
   uni.setStorageSync("order", detail);
   uni.navigateTo({
-    url: `/pages/order-detail`,
+    url: "/pages/member/order-detail",
   });
 };
 
+const openAutoRenewDialog = (detail) => {
+  selectedRenewOrder.value = detail;
+  autoRenewDialogVisible.value = true;
+};
+
+const closeAutoRenewDialog = () => {
+  autoRenewDialogVisible.value = false;
+  selectedRenewOrder.value = null;
+};
+
+const confirmAutoRenewDialog = () => {
+  autoRenewDialogVisible.value = false;
+   uni.showToast({
+      title: "功能实现中",
+      icon: "none",
+    });
+}
+
 const list = ref([]);
 
 const onLoading = async (page) => {
@@ -44,7 +66,7 @@ onShow(() => {
 </script>
 
 <template>
-  <Container title="订单">
+  <Container title="订单管理">
     <view class="container">
       <ScrollList :onLoading="onLoading">
         <view
@@ -58,18 +80,31 @@ onShow(() => {
             >{{ orderStatusNames[item.orderStatus] }}</view
           >
           <text>{{ item.vipName }}</text>
-          <!-- <text>订单号：{{ item.orderId }}</text> -->
+          <text>订单号：{{ item.orderId }}</text>
-          <!-- <text>创建时间：{{ item.vipCreateAt }}</text> -->
+          <text>创建时间：{{ item.orderCreateAt }}</text>
-          <text
+          <!-- <text
             >支付时间：{{
               item.orderStatus === 4 ? item.paymentTime : ""
             }}</text
-          >
+          > -->
           <text>金额：{{ item.total }} 元</text>
-          <text>支付方式：微信</text>
+          <!-- <text>支付方式：微信</text> -->
+          <!-- <text class="renew-action" @click.stop="openAutoRenewDialog(item)">
+            自动续费
+          </text> -->
         </view>
       </ScrollList>
     </view>
+
+    <ModalDialog
+      :show="autoRenewDialogVisible"
+      title=""
+      :content="'确定关闭自动续费吗?\n会员到期后你将失去7项特权哦!'"
+      cancel-text="一意孤行"
+      confirm-text="继续享受"
+      :on-cancel="closeAutoRenewDialog"
+      :on-confirm="confirmAutoRenewDialog"
+    />
   </Container>
 </template>
 
@@ -78,15 +113,15 @@ onShow(() => {
   width: 100%;
   height: 100%;
   background-color: #f5f5f5;
-  padding-top: 10px;
+  padding-top: 16rpx;
 }
 .order-item {
   position: relative;
   background-color: #fff;
-  margin-bottom: 10px;
+  margin-bottom: 16rpx;
   display: flex;
   flex-direction: column;
-  padding: 15px;
+  padding: 28rpx 30rpx 18rpx 30rpx;
 }
 .order-item > view:first-child {
   position: absolute;
@@ -98,12 +133,20 @@ onShow(() => {
   font-size: 11px;
 }
 .order-item > text:nth-child(2) {
-  color: #000;
+  color: #333333;
-  font-size: 16px;
+  font-size: 30rpx;
+  font-weight: bold;
 }
 .order-item > text {
   color: #666666;
-  font-size: 13px;
+  font-size: 26rpx;
-  margin-top: 5px;
+  margin-bottom: 10rpx;
+}
+.order-item > .renew-action {
+  position: absolute;
+  right: 30rpx;
+  bottom: 18rpx;
+  color: #1f6ed4;
+  margin-bottom: 0;
 }
 </style>

src/pages/member/vip-intro.vue

@@ -0,0 +1,244 @@
+<script setup>
+import Container from "@/components/Container.vue";
+</script>
+
+<template>
+  <Container title="会员权益说明">
+    <scroll-view scroll-y class="vip-intro" :show-scrollbar="false">
+      <view class="content">
+        <view class="page-title">射灵星球会员权益</view>
+
+        <view class="paragraph">
+          <text class="strong">核心特权：</text>
+          <text>解锁约战、段位评级、实时排位赛、AI智能教练点评四大核心功能。</text>
+        </view>
+
+        <view class="paragraph">
+          <text class="strong">专属服务：</text>
+          <text>享全年不同阶段VIP专属客服，快速解决技术故障、规则疑问等所有问题。</text>
+        </view>
+
+        <view class="paragraph">
+          <text class="strong">新用户福利：</text>
+          <text>所有初次绑定设备的用户，免费赠送6个月普通会员。</text>
+        </view>
+
+        <view class="paragraph">
+          <text>
+            加入射灵星球，在真实射箭运动中体验在线竞技的乐趣，结识全球志同道合的弓友，持续享受新功能与系统升级，不断挑战自我，创造属于你的辉煌战绩！
+          </text>
+        </view>
+
+        <view class="table-wrap">
+          <view class="intro-toast">
+            <image class="intro-toast__bg" src="../../static/vip/intro-toast.png" mode="scaleToFill" />
+            <text class="intro-toast__text">初次绑定设备赠送6个月</text>
+          </view>
+          <view class="benefit-table">
+            <view class="table-row table-head">
+              <text class="table-cell table-cell--feature">特权</text>
+              <text class="table-cell">基础用户</text>
+              <text class="table-cell">普通会员</text>
+              <text class="table-cell">超级会员</text>
+            </view>
+            <view class="table-row">
+              <text class="table-cell table-cell--feature">专属落点标识</text>
+              <text class="table-cell">无</text>
+              <text class="table-cell">无</text>
+              <text class="table-cell">螺旋</text>
+            </view>
+            <view class="table-row">
+              <text class="table-cell table-cell--feature">专属命中效果</text>
+              <text class="table-cell">无</text>
+              <text class="table-cell">无</text>
+              <text class="table-cell">玻璃裂纹</text>
+            </view>
+            <view class="table-row">
+              <text class="table-cell table-cell--feature">箭矢飞行特效</text>
+              <text class="table-cell">无</text>
+              <text class="table-cell">无</text>
+              <text class="table-cell">光箭</text>
+            </view>
+            <view class="table-row">
+              <text class="table-cell table-cell--feature">每日约战次数</text>
+              <text class="table-cell">2次</text>
+              <text class="table-cell">22次</text>
+              <text class="table-cell">无限</text>
+            </view>
+            <view class="table-row">
+              <text class="table-cell table-cell--feature">每日排位赛次数</text>
+              <text class="table-cell">2次</text>
+              <text class="table-cell">22次</text>
+              <text class="table-cell">无限</text>
+            </view>
+            <view class="table-row">
+              <text class="table-cell table-cell--feature">教练点评</text>
+              <text class="table-cell">无</text>
+              <text class="table-cell">专享</text>
+              <text class="table-cell">专享</text>
+            </view>
+            <view class="table-row">
+              <text class="table-cell table-cell--feature">会员标识</text>
+              <text class="table-cell">无</text>
+              <text class="table-cell">专享</text>
+              <text class="table-cell">专享</text>
+            </view>
+            <view class="table-row">
+              <text class="table-cell table-cell--feature">专属客服</text>
+              <text class="table-cell">无</text>
+              <text class="table-cell">专享</text>
+              <text class="table-cell">专享</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="section-title">会员时长叠加与生效规则</view>
+
+        <view class="paragraph">
+          <text class="strong">等级优先级：</text>
+          <text>
+            同时拥有 超级会员 和 普通会员 时，优先使用超级会员权益，普通会员时长自动顺延，待 超级会员 到期后自动生效。
+          </text>
+        </view>
+
+        <view class="paragraph">
+          <text class="strong">连续套餐叠加：</text>
+          <text>
+            已有月 / 半年 / 年卡时再购买连续包月 / 包年，总有效期直接累加；连续套餐从下单日起算，下个周期正常自动扣费。
+          </text>
+        </view>
+
+        <view class="paragraph example">
+          <text>
+            示例：1 月 1 日买半年卡（7 月 1 日到期），1 月 10 日买连续包月，总有效期延至 8 月 1 日，8 月 1 日会发起首次自动扣款。
+          </text>
+        </view>
+
+        <view class="paragraph">
+          <text class="strong">升级超级会员规则：</text>
+          <text>
+            购买升级 超级会员 后立即生效，可升级时长以购买页面提示为准；未升级的剩余 普通会员 时长，将在 超级会员 到期后继续使用。
+          </text>
+        </view>
+      </view>
+    </scroll-view>
+  </Container>
+</template>
+
+<style scoped lang="scss">
+.vip-intro {
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+}
+
+.content {
+  padding: 30rpx;
+  box-sizing: border-box;
+}
+
+.page-title,
+.section-title {
+  color: #333333;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  font-weight: 700;
+}
+
+.page-title {
+  margin-bottom: 26rpx;
+}
+
+.section-title {
+  margin: 42rpx 0 22rpx;
+}
+
+.paragraph {
+  margin-bottom: 22rpx;
+  color: #333333;
+  font-size: 26rpx;
+  line-height: 38rpx;
+}
+
+.strong {
+  color: #333333;
+  font-weight: 700;
+}
+
+.example {
+  color: #666666;
+}
+
+.table-wrap {
+  position: relative;
+  margin-top: 34rpx;
+}
+
+.intro-toast {
+  position: absolute;
+  top: -38rpx;
+  right: 118rpx;
+  z-index: 2;
+  width: 222rpx;
+  height: 54rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.intro-toast__bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 222rpx;
+  height: 54rpx;
+}
+
+.intro-toast__text {
+  position: relative;
+  z-index: 1;
+  color: #333333;
+  font-size: 18rpx;
+  line-height: 30rpx;
+  font-weight: 500;
+  white-space: nowrap;
+  margin-top: -6rpx;
+}
+
+.benefit-table {
+  width: 100%;
+  border-top: 1rpx solid #e5e5e5;
+  border-left: 1rpx solid #e5e5e5;
+  box-sizing: border-box;
+}
+
+.table-row {
+  display: flex;
+  min-height: 60rpx;
+}
+
+.table-cell {
+  width: 22.5%;
+  min-height: 60rpx;
+  padding: 12rpx 4rpx;
+  border-right: 1rpx solid #e5e5e5;
+  border-bottom: 1rpx solid #e5e5e5;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333333;
+  font-size: 24rpx;
+  line-height: 34rpx;
+  text-align: center;
+}
+
+.table-cell--feature {
+  width: 32.5%;
+}
+
+.table-head .table-cell {
+  color: #666666;
+  font-weight: 700;
+}
+</style>

src/pages/mine-bow-data.vue

@@ -11,12 +11,14 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 const arrows = ref([]);
+const isSvip = ref(false);
 const total = ref(0);
 
 onLoad(async (options) => {
   if (!options.id) return;
   const result = await getPractiseAPI(options.id || 176);
   arrows.value = result.details;
+  isSvip.value = result.sVip === true;
   total.value = result.details.length;
 });
 </script>
@@ -34,7 +36,7 @@ onLoad(async (options) => {
         </view>
       </view> -->
       <view :style="{ marginBottom: '20px' }">
-        <BowTarget :scores="arrows" />
+        <BowTarget :scores="arrows" :isSvip="isSvip" />
       </view>
       <view class="desc">
         <text>{{ arrows.length }}</text>

src/pages/my-device.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
@@ -16,11 +16,13 @@ const showTip = ref(false);
 const confirmBindTip = ref(false);
 const addDevice = ref();
 const store = useStore();
-const { updateDevice, clearDevice } = store;
+const { updateDevice } = store;
 const { user, device } = storeToRefs(store);
 const justBind = ref(false);
 const calibration = ref(false);
 const token = ref(null);
+const isSVip = computed(() => user.value.sVip === true);
+const isVip = computed(() => user.value.vip === true && !isSVip.value);
 
 // 扫描二维码方法
 const handleScan = () => {
@@ -84,21 +86,13 @@ const toFristTryPage = () => {
 };
 
 const unbindDevice = async () => {
-  try {
+  await unbindDeviceAPI(device.value.deviceId);
-    await unbindDeviceAPI(device.value.deviceId);
-  } catch (error) {
-    if (error?.type === "DEVICE_BIND_INVALID") {
-      uni.setStorageSync("calibration", false);
-      clearDevice();
-    }
-    return;
-  }
   uni.setStorageSync("calibration", false);
   uni.showToast({
     title: "解绑成功",
     icon: "success",
   });
-  clearDevice();
+  device.value = {};
 };
 
 const toDeviceIntroPage = () => {
@@ -130,23 +124,8 @@ const goCalibration = async () => {
   });
 };
 
-const syncDeviceBinding = async () => {
+onShow(() => {
-  if (!user.value.id) return;
-  try {
-    const devices = await getMyDevicesAPI();
-    if (devices.bindings && devices.bindings.length) {
-      updateDevice(devices.bindings[0].deviceId, devices.bindings[0].deviceName);
-    } else {
-      clearDevice();
-    }
-  } catch (error) {
-    console.log("sync device binding error", error);
-  }
-};
-
-onShow(async () => {
   calibration.value = uni.getStorageSync("calibration");
-  await syncDeviceBinding();
 });
 </script>
 
@@ -232,7 +211,18 @@ onShow(async () => {
             mode="widthFix"
             :style="{ borderRadius: '50%' }"
           />
-          <text>{{ user.nickName }}</text>
+          <view
+            :class="[
+              'member-nickname',
+              isVip ? 'member-nickname--vip' : '',
+              isSVip ? 'member-nickname--svip' : '',
+            ]"
+          >
+            <text class="member-nickname__text">{{ user.nickName }}</text>
+            <text v-if="isSVip" class="member-nickname__shine">{{
+              user.nickName
+            }}</text>
+          </view>
         </view>
       </view>
       <!-- <block v-if="calibration"> -->
@@ -290,7 +280,18 @@ onShow(async () => {
             mode="widthFix"
             :style="{ borderRadius: '50%' }"
           />
-          <text>{{ user.nickName }}</text>
+          <view
+            :class="[
+              'member-nickname',
+              isVip ? 'member-nickname--vip' : '',
+              isSVip ? 'member-nickname--svip' : '',
+            ]"
+          >
+            <text class="member-nickname__text">{{ user.nickName }}</text>
+            <text v-if="isSVip" class="member-nickname__shine">{{
+              user.nickName
+            }}</text>
+          </view>
         </view>
       </view>
       <view :style="{ marginTop: '240rpx' }">
@@ -428,6 +429,15 @@ onShow(async () => {
   text-overflow: ellipsis;
   text-align: center;
 }
+.device-binded .member-nickname {
+  justify-content: center;
+  width: 120px;
+}
+.device-binded .member-nickname__text,
+.device-binded .member-nickname__shine {
+  font-size: 26rpx;
+  text-align: center;
+}
 .device-binded > image {
   width: 100rpx;
   margin: 0 20px;

src/pages/practise-one.vue

@@ -30,8 +30,9 @@ const { user } = storeToRefs(store);
 
 const start = ref(false);
 const scores = ref([]);
+const isSvip = ref(false);
 const total = 12;
-/** 当前练习中连续 10 环及以上计数，用于触发 tententen 音效 */
+/** 当前练习中连续 X 环计数，用于触发 tententen 音效 */
 const xRingStreak = ref(0);
 const practiseResult = ref({});
 const practiseId = ref("");
@@ -48,7 +49,8 @@ onLoad((options) => {
 const onReady = async () => {
   await startPractiseAPI();
   scores.value = [];
-  xRingStreak.value = 0; // 新一局开始，重置 10 环及以上连续计数
+  isSvip.value = false;
+  xRingStreak.value = 0; // 新一局开始，重置 X 环连续计数
   start.value = true;
   audioManager.play("练习开始");
 };
@@ -59,23 +61,19 @@ const onOver = async () => {
 };
 
 /**
- * 检测连续 10 环及以上是否达到 3 箭，达到则播放 tententen 音效
+ * 检测连续 X 环是否达到 3 箭，达到则播放 tententen 音效
- * @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
+ * @param {boolean} isXRing - 本次射击是否为 X 环
  */
-function isTenPlusRing(shot) {
+function checkAndPlayTententen(isXRing) {
-  return !!(shot?.ringX || Number(shot?.ring) >= 10);
+  if (isXRing) {
-}
-
-function checkAndPlayTententen(isTenPlusRingShot) {
-  if (isTenPlusRingShot) {
     xRingStreak.value += 1;
-    // 连续 3 箭均为 10 环及以上，在环数播报入队后追加 tententen，避免播放顺序颠倒
+    // 连续 3 箭均为 X 环，在环数播报入队后追加 tententen，避免播放顺序颠倒
     if (xRingStreak.value >= 3) {
       xRingStreak.value = 0;
       nextTick(() => audioManager.play("tententen", false));
     }
   } else {
-    // 低于 10 环或未上靶则重置连续计数
+    // 非 X 环则重置连续计数
     xRingStreak.value = 0;
   }
 }
@@ -83,11 +81,12 @@ function checkAndPlayTententen(isTenPlusRingShot) {
 async function onReceiveMessage(msg) {
   if (msg.type === MESSAGETYPESV2.ShootResult) {
     const prevLen = scores.value.length;
+    isSvip.value = msg.sVip === true;
     scores.value = msg.details;
-    // 有新箭时取最后一箭判断是否 10 环及以上并检测连续计数
+    // 有新箭时取最后一箭判断是否 X 环并检测连续计数
     if (scores.value.length > prevLen) {
       const latestArrow = scores.value[scores.value.length - 1];
-      checkAndPlayTententen(isTenPlusRing(latestArrow));
+      checkAndPlayTententen(!!(latestArrow?.ringX && latestArrow?.ring));
     }
   } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
     // setTimeout(onOver, 1500);
@@ -105,7 +104,8 @@ async function onComplete() {
     practiseResult.value = {};
     start.value = false;
     scores.value = [];
-  xRingStreak.value = 0; // 重新开始练习，重置 10 环及以上连续计数
+    isSvip.value = false;
+    xRingStreak.value = 0; // 重新开始练习，重置 X 环连续计数
     const result = await createPractiseAPI(total, 120);
     if (result) practiseId.value = result.id;
   }
@@ -178,6 +178,7 @@ onBeforeUnmount(() => {
           :totalRound="start ? total / 4 : 0"
           :currentRound="scores.length % 3"
           :scores="scores"
+          :isSvip="isSvip"
         />
         <ScorePanel2 :arrows="scores" />
         <ScoreResult

src/pages/practise-two.vue

@@ -30,8 +30,9 @@ const { user } = storeToRefs(store);
 
 const start = ref(false);
 const scores = ref([]);
+const isSvip = ref(false);
 const total = 36;
-/** 当前练习中连续 10 环及以上计数，用于触发 tententen 音效 */
+/** 当前练习中连续 X 环计数，用于触发 tententen 音效 */
 const xRingStreak = ref(0);
 const practiseResult = ref({});
 const practiseId = ref("");
@@ -47,7 +48,8 @@ onLoad((options) => {
 const onReady = async () => {
   await startPractiseAPI();
   scores.value = [];
-  xRingStreak.value = 0; // 新一局开始，重置 10 环及以上连续计数
+  isSvip.value = false;
+  xRingStreak.value = 0; // 新一局开始，重置 X 环连续计数
   start.value = true;
   audioManager.play("练习开始");
 };
@@ -58,23 +60,19 @@ const onOver = async () => {
 };
 
 /**
- * 检测连续 10 环及以上是否达到 3 箭，达到则播放 tententen 音效
+ * 检测连续 X 环是否达到 3 箭，达到则播放 tententen 音效
- * @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
+ * @param {boolean} isXRing - 本次射击是否为 X 环
  */
-function isTenPlusRing(shot) {
+function checkAndPlayTententen(isXRing) {
-  return !!(shot?.ringX || Number(shot?.ring) >= 10);
+  if (isXRing) {
-}
-
-function checkAndPlayTententen(isTenPlusRingShot) {
-  if (isTenPlusRingShot) {
     xRingStreak.value += 1;
-    // 连续 3 箭均为 10 环及以上，在环数播报入队后追加 tententen，避免播放顺序颠倒
+    // 连续 3 箭均为 X 环，在环数播报入队后追加 tententen，避免播放顺序颠倒
     if (xRingStreak.value >= 3) {
       xRingStreak.value = 0;
       nextTick(() => audioManager.play("tententen", false));
     }
   } else {
-    // 低于 10 环或未上靶则重置连续计数
+    // 非 X 环则重置连续计数
     xRingStreak.value = 0;
   }
 }
@@ -82,11 +80,12 @@ function checkAndPlayTententen(isTenPlusRingShot) {
 async function onReceiveMessage(msg) {
   if (msg.type === MESSAGETYPESV2.ShootResult) {
     const prevLen = scores.value.length;
+    isSvip.value = msg.sVip === true;
     scores.value = msg.details;
-    // 有新箭时取最后一箭判断是否 10 环及以上并检测连续计数
+    // 有新箭时取最后一箭判断是否 X 环并检测连续计数
     if (scores.value.length > prevLen) {
       const latestArrow = scores.value[scores.value.length - 1];
-      checkAndPlayTententen(isTenPlusRing(latestArrow));
+      checkAndPlayTententen(!!(latestArrow?.ringX && latestArrow?.ring));
     }
   } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
     setTimeout(onOver, 1500);
@@ -120,7 +119,8 @@ async function onComplete() {
     practiseResult.value = {};
     start.value = false;
     scores.value = [];
-  xRingStreak.value = 0; // 重新开始练习，重置 10 环及以上连续计数
+    isSvip.value = false;
+    xRingStreak.value = 0; // 重新开始练习，重置 X 环连续计数
     const result = await createPractiseAPI(total, 3600);
     if (result) practiseId.value = result.id;
   }
@@ -179,6 +179,7 @@ onBeforeUnmount(() => {
           :currentRound="scores.length"
           :totalRound="start ? total : 0"
           :scores="scores"
+          :isSvip="isSvip"
         />
         <ScorePanel
           v-if="start"

src/pages/practise.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import Guide from "@/components/Guide.vue";
@@ -15,6 +15,8 @@ const { user, device, online } = storeToRefs(store);
 const data = ref({});
 const showTargetPicker = ref(false);
 const pendingPractiseType = ref("");
+const isSVip = computed(() => user.value.sVip === true);
+const isVip = computed(() => user.value.vip === true && !isSVip.value);
 
 const goPractise = async (type) => {
   if (!canEenter(user.value, device.value, online.value)) return;
@@ -49,7 +51,18 @@ onShow(async () => {
         <view>
           <view>
             <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
-            <text class="truncate">{{ user.nickName }}</text>
+            <view
+              :class="[
+                'member-nickname',
+                isVip ? 'member-nickname--vip' : '',
+                isSVip ? 'member-nickname--svip' : '',
+              ]"
+            >
+              <text class="member-nickname__text">{{ user.nickName }}</text>
+              <text v-if="isSVip" class="member-nickname__shine">{{
+                user.nickName
+              }}</text>
+            </view>
           </view>
           <view>
             <text>已练习打卡</text>
@@ -132,12 +145,15 @@ onShow(async () => {
   display: flex;
   align-items: flex-end;
 }
-.practise-data > view:first-child > view:first-child > text {
+.practise-data > view:first-child > view:first-child .member-nickname {
   color: #fff;
   margin-left: 10px;
-  font-size: 16px;
   width: 120px;
 }
+.practise-data > view:first-child > view:first-child .member-nickname__text,
+.practise-data > view:first-child > view:first-child .member-nickname__shine {
+  font-size: 16px;
+}
 .practise-data > view:first-child > view:last-child > text:nth-child(2) {
   color: #f7d247;
   margin: 0 3px;

src/pages/rank-list.vue

@@ -102,6 +102,8 @@ const buildDefaultMyData = () => ({
   userId: user.value.id,
   name: user.value.nickName,
   avatar: user.value.avatar,
+  vip: user.value.vip,
+  sVip: user.value.sVip,
   totalScore: 0,
   mvpCount: 0,
   tenRings: 0,
@@ -154,6 +156,15 @@ const getRankUnit = (index = selectedIndex.value) => {
   return "次";
 };
 
+const isMember = (item = {}) => item.vip === true || item.sVip === true;
+
+const getMemberNicknameClass = (item = {}) => [
+  "rank-list-player-name",
+  "member-nickname",
+  item.vip === true && item.sVip !== true ? "member-nickname--vip" : "",
+  item.sVip === true ? "member-nickname--svip" : "",
+];
+
 // 统一设置页面当前的视觉滚动状态，避免吸顶和顶部背景不同步。
 const syncScrollVisualState = (scrollTop = 0) => {
   currentScrollTop.value = scrollTop;
@@ -441,7 +452,13 @@ const measureTabsMetrics = () => {
           </view>
           <Avatar :src="item.avatar" />
           <view class="rank-item-content">
-            <text class="truncate">{{ item.name }}</text>
+            <view v-if="isMember(item)" :class="getMemberNicknameClass(item)">
+              <text class="member-nickname__text">{{ item.name }}</text>
+              <text v-if="item.sVip === true" class="member-nickname__shine">
+                {{ item.name }}
+              </text>
+            </view>
+            <text v-else class="rank-list-player-name truncate">{{ item.name }}</text>
             <text>{{ formatLevelText(item) }}</text>
           </view>
           <text class="rank-item-integral">
@@ -479,7 +496,23 @@ const measureTabsMetrics = () => {
       <text>{{ getDisplayMyRank(currentMyData) }}</text>
       <Avatar :src="currentMyData.avatar || user.avatar" />
       <view class="rank-item-content">
-        <text class="truncate">{{ currentMyData.name || user.nickName }}</text>
+        <view
+          v-if="isMember(currentMyData)"
+          :class="getMemberNicknameClass(currentMyData)"
+        >
+          <text class="member-nickname__text">
+            {{ currentMyData.name || user.nickName }}
+          </text>
+          <text
+            v-if="currentMyData.sVip === true"
+            class="member-nickname__shine"
+          >
+            {{ currentMyData.name || user.nickName }}
+          </text>
+        </view>
+        <text v-else class="rank-list-player-name truncate">
+          {{ currentMyData.name || user.nickName }}
+        </text>
         <text>{{ formatLevelText(currentMyData) }}</text>
       </view>
       <text class="rank-item-integral">
@@ -653,6 +686,18 @@ const measureTabsMetrics = () => {
   width: 120px;
 }
 
+.rank-list-player-name {
+  color: #fff;
+  font-size: 14px;
+  margin-bottom: 3px;
+  width: 120px;
+}
+
+.rank-list-player-name .member-nickname__text,
+.rank-list-player-name .member-nickname__shine {
+  font-size: 14px;
+}
+
 .rank-list-item > text:last-child {
   margin-right: 10px;
   width: 56px;

src/pages/ranking.vue

@@ -55,6 +55,17 @@ const rankLoading = ref(false);
 const scoreRankList = ref([]);
 const mvpRankList = ref([]);
 const tenRingRankList = ref([]);
+const isSVip = computed(() => user.value.sVip === true);
+const isVip = computed(() => user.value.vip === true && !isSVip.value);
+
+const isMember = (item = {}) => item.vip === true || item.sVip === true;
+
+const getMemberNicknameClass = (item = {}) => [
+  "rank-preview-name",
+  "member-nickname",
+  item.vip === true && item.sVip !== true ? "member-nickname--vip" : "",
+  item.sVip === true ? "member-nickname--svip" : "",
+];
 
 // 根据接口返回结构提取榜单数组，兼容数组和对象两种返回形式。
 const getRankListFromResponse = (result) => {
@@ -314,7 +325,20 @@ onShow(async () => {
               :rankLvl="seasonStats.rankLvl"
               :size="30"
             />
-            <text>{{ seasonStats.nickName || user.nickName }}</text>
+            <view
+              :class="[
+                'member-nickname',
+                isVip ? 'member-nickname--vip' : '',
+                isSVip ? 'member-nickname--svip' : '',
+              ]"
+            >
+              <text class="member-nickname__text">
+                {{ seasonStats.nickName || user.nickName }}
+              </text>
+              <text v-if="isSVip" class="member-nickname__shine">
+                {{ seasonStats.nickName || user.nickName }}
+              </text>
+            </view>
           </view>
           <view
             class="ranking-season"
@@ -476,7 +500,13 @@ onShow(async () => {
             :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
           />
           <view>
-            <text class="truncate">{{ item.name }}</text>
+            <view v-if="isMember(item)" :class="getMemberNicknameClass(item)">
+              <text class="member-nickname__text">{{ item.name }}</text>
+              <text v-if="item.sVip === true" class="member-nickname__shine">
+                {{ item.name }}
+              </text>
+            </view>
+            <text v-else class="rank-preview-name truncate">{{ item.name }}</text>
             <text>{{ formatRankSubTitle(item) }}</text>
           </view>
           <text>{{ item.totalScore || 0 }}<text>分</text></text>
@@ -499,7 +529,13 @@ onShow(async () => {
             :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
           />
           <view>
-            <text class="truncate">{{ item.name }}</text>
+            <view v-if="isMember(item)" :class="getMemberNicknameClass(item)">
+              <text class="member-nickname__text">{{ item.name }}</text>
+              <text v-if="item.sVip === true" class="member-nickname__shine">
+                {{ item.name }}
+              </text>
+            </view>
+            <text v-else class="rank-preview-name truncate">{{ item.name }}</text>
             <text>{{ formatRankSubTitle(item) }}</text>
           </view>
           <text>{{ item.mvpCount || 0 }}<text>次</text></text>
@@ -522,7 +558,13 @@ onShow(async () => {
             :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
           />
           <view>
-            <text class="truncate">{{ item.name }}</text>
+            <view v-if="isMember(item)" :class="getMemberNicknameClass(item)">
+              <text class="member-nickname__text">{{ item.name }}</text>
+              <text v-if="item.sVip === true" class="member-nickname__shine">
+                {{ item.name }}
+              </text>
+            </view>
+            <text v-else class="rank-preview-name truncate">{{ item.name }}</text>
             <text>{{ formatRankSubTitle(item) }}</text>
           </view>
           <text>{{ item.tenRings ?? item.TenRings ?? 0 }}<text>次</text></text>
@@ -579,8 +621,14 @@ onShow(async () => {
   font-size: 14px;
 }
 
-.user-info > text {
+.user-info > .member-nickname {
   margin-left: 15px;
+  max-width: 220rpx;
+}
+
+.user-info .member-nickname__text,
+.user-info .member-nickname__shine {
+  font-size: 14px;
 }
 
 .ranking-season {
@@ -773,6 +821,17 @@ onShow(async () => {
   width: 120px;
 }
 
+.rank-preview-name {
+  color: #fff9;
+  font-size: 14px;
+  width: 120px;
+}
+
+.rank-preview-name .member-nickname__text,
+.rank-preview-name .member-nickname__shine {
+  font-size: 14px;
+}
+
 .rank-item > view:nth-child(3) > text:last-child {
   color: #fff4;
   font-size: 13px;

src/pages/team-battle.vue

@@ -49,7 +49,7 @@ const battleWay = ref(0);
 const lastToSomeoneShootKey = ref("");
 /** 控制设备离线提示弹窗的显示状态 */
 const showOfflineModal = ref(false);
-/** 记录每位玩家当前轮连续 10 环及以上次数，key 为 playerId，用于触发 tententen 音效 */
+/** 记录每位玩家当前轮连续 X 环数，key 为 playerId，用于触发 tententen 音效 */
 const xRingStreaks = ref({});
 
 /**
@@ -234,26 +234,22 @@ function onNewRound(msg, prevRound) {
 }
 
 /**
- * 检测指定射手连续 10 环及以上是否达到 3 箭，达到则在环数播报入队后追加 tententen 音效
+ * 检测指定射手连续 X 环是否达到 3 箭，达到则在环数播报入队后追加 tententen 音效
  * @param {number} shooterId - 本次射手的 ID（取自 currentShooterId.value）
- * @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
+ * @param {boolean} isXRing - 本次射击是否为 X 环
  */
-function isTenPlusRing(shot) {
+function checkAndPlayTententen(shooterId, isXRing) {
-  return !!(shot?.ringX || Number(shot?.ring) >= 10);
-}
-
-function checkAndPlayTententen(shooterId, isTenPlusRingShot) {
   if (!shooterId) return;
-  if (isTenPlusRingShot) {
+  if (isXRing) {
     xRingStreaks.value[shooterId] = (xRingStreaks.value[shooterId] || 0) + 1;
-    // 同一玩家连续 3 箭均为 10 环及以上，追加到环数音效队列尾部播放
+    // 同一玩家连续 3 箭均为 X 环，追加到环数音效队列尾部播放
     if (xRingStreaks.value[shooterId] >= 3) {
       xRingStreaks.value[shooterId] = 0;
       // nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen，避免播放顺序颠倒
       nextTick(() => audioManager.play("tententen", false));
     }
   } else {
-    // 低于 10 环或未上靶则重置该玩家的连续计数
+    // 非 X 环则重置该玩家的连续计数
     xRingStreaks.value[shooterId] = 0;
   }
 }
@@ -272,9 +268,9 @@ async function onReceiveMessage(msg) {
   } else if (msg.type === MESSAGETYPESV2.ShootResult) {
     showRoundTip.value = false;
     recoverData(msg, {arrowOnly: true});
-    // 检测同一玩家连续三箭 10 环及以上，触发 tententen 音效
+    // 检测同一玩家三箭全 X 环，触发 tententen 音效
     // currentShooterId 在 ToSomeoneShoot 时写入，ShootResult 不会覆盖，可靠识别本次射手
-    checkAndPlayTententen(currentShooterId.value, isTenPlusRing(msg.shootData));
+    checkAndPlayTententen(currentShooterId.value, !!(msg.shootData?.ringX && msg.shootData?.ring));
   } else if (msg.type === MESSAGETYPESV2.NewRound) {
     // 在进入延迟前先捕获当前轮次，供 onNewRound 使用，防止 800ms 内 ToSomeoneShoot 提前更新 currentRound 造成 Tip 展示错轮
     const prevRound = currentRound.value;

src/pages/team-battle/components/BackToGame.vue

@@ -18,12 +18,14 @@ const props = defineProps({
   },
 });
 const loading = ref(false);
+const navigating = ref(false);
 
 /** 统一获取当前环境 token，用于守卫：无有效 token 时不发起接口请求 */
 const getToken = () =>
   uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
 
 onShow(async () => {
+  navigating.value = false;
   if (user.value.id && getToken()) {
     setTimeout(async () => {
       const state = await getUserGameState();
@@ -45,28 +47,35 @@ watch(
   }
 );
 
+const navigateOnce = (url) =>
+  new Promise((resolve, reject) => {
+    navigating.value = true;
+    uni.navigateTo({
+      url,
+      success: resolve,
+      fail: (error) => {
+        navigating.value = false;
+        reject(error);
+      },
+    });
+  });
+
 const onClick = debounce(async () => {
-  if (loading.value) return;
+  if (loading.value || navigating.value) return;
   try {
     loading.value = true;
     const result = await getBattleAPI();
     if (result && result.matchId) {
       await uni.$checkAudio();
       if (result.mode <= 3) {
-        uni.navigateTo({
+        await navigateOnce(`/pages/team-battle/index?battleId=${result.matchId}`);
-          url: `/pages/team-battle/index?battleId=${result.matchId}`,
-        });
       } else {
-        uni.navigateTo({
+        await navigateOnce(`/pages/melee-battle?battleId=${result.matchId}`);
-          url: `/pages/melee-battle?battleId=${result.matchId}`,
-        });
       }
       return;
     }
     if (game.value.roomID) {
-      uni.navigateTo({
+      await navigateOnce("/pages/battle-room?roomNumber=" + game.value.roomID);
-        url: "/pages/battle-room?roomNumber=" + game.value.roomID,
-      });
     } else {
       updateGame(false, "");
     }

src/pages/team-battle/components/BattleFooter.vue

@@ -51,7 +51,7 @@ const normalRounds = computed(() => {
         <view v-for="(result, index) in roundResults" :key="index">
           <block v-if="index + 1 > normalRounds">
             <image
-              :src="RoundImages[`gold${index + 1 - normalRounds}`]"
+              :src="RoundImages[`gold${result.goldRound || index + 1 - normalRounds}`]"
               mode="widthFix"
             />
           </block>
@@ -86,7 +86,7 @@ const normalRounds = computed(() => {
         <view v-for="(result, index) in roundResults" :key="index">
           <block v-if="index + 1 > normalRounds">
             <image
-              :src="RoundImages[`gold${index + 1 - normalRounds}`]"
+              :src="RoundImages[`gold${result.goldRound || index + 1 - normalRounds}`]"
               mode="widthFix"
             />
           </block>

src/pages/team-battle/components/BattleHeader.vue

@@ -27,6 +27,14 @@ defineProps({
     default: true,
   },
 });
+
+const getMemberNicknameClass = (player = {}) => [
+  "member-nickname",
+  player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
+  player.sVip === true ? "member-nickname--svip" : "",
+];
+
+const isMember = (player = {}) => player.vip === true || player.sVip === true;
 </script>
 
 <template>
@@ -51,7 +59,16 @@ defineProps({
           }"
         >
           <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
-          <text class="player-name">{{ player.name }}</text>
+          <view
+            v-if="isMember(player)"
+            :class="['player-name', ...getMemberNicknameClass(player)]"
+          >
+            <text class="member-nickname__text">{{ player.name }}</text>
+            <text v-if="player.sVip === true" class="member-nickname__shine">
+              {{ player.name }}
+            </text>
+          </view>
+          <text v-else class="player-name">{{ player.name }}</text>
         </view>
         <image
           v-if="winner === 1"
@@ -70,7 +87,16 @@ defineProps({
           }"
         >
           <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
-          <text class="player-name">{{ player.name }}</text>
+          <view
+            v-if="isMember(player)"
+            :class="['player-name', ...getMemberNicknameClass(player)]"
+          >
+            <text class="member-nickname__text">{{ player.name }}</text>
+            <text v-if="player.sVip === true" class="member-nickname__shine">
+              {{ player.name }}
+            </text>
+          </view>
+          <text v-else class="player-name">{{ player.name }}</text>
         </view>
         <image
           v-if="winner === 2"
@@ -105,7 +131,16 @@ defineProps({
             :size="40"
             :rank="showRank ? index + 1 : 0"
           />
-          <text class="player-name">{{ player.name }}</text>
+          <view
+            v-if="isMember(player)"
+            :class="['player-name', ...getMemberNicknameClass(player)]"
+          >
+            <text class="member-nickname__text">{{ player.name }}</text>
+            <text v-if="player.sVip === true" class="member-nickname__shine">
+              {{ player.name }}
+            </text>
+          </view>
+          <text v-else class="player-name">{{ player.name }}</text>
         </view>
       </view>
     </scroll-view>
@@ -183,6 +218,13 @@ defineProps({
   text-overflow: ellipsis;
   text-align: center;
 }
+view.player-name {
+  justify-content: center;
+}
+.player-name .member-nickname__text,
+.player-name .member-nickname__shine {
+  font-size: 12px;
+}
 .left-winner-badge {
   position: absolute;
   width: 50px;

src/pages/team-battle/components/BowTarget.vue

@@ -1,6 +1,15 @@
 <script setup>
-import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
+import {
+  ref,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  computed,
+  nextTick,
+  getCurrentInstance,
+} from "vue";
 import PointSwitcher from "./PointSwitcher.vue";
+import BowShotEffect from "@/components/BowShotEffect.vue";
 
 import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
 import { simulShootAPI } from "@/apis";
@@ -26,6 +35,14 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  redTeam: {
+    type: Array,
+    default: () => [],
+  },
+  blueTeam: {
+    type: Array,
+    default: () => [],
+  },
   latestShotFlash: {
     type: Object,
     default: null,
@@ -59,18 +76,56 @@ const timer = ref(null);
 const dirTimer = ref(null);
 const angle = ref(null);
 const circleColor = ref("");
+const shotEffect = ref(null);
+const hiddenRedLatestKey = ref("");
+const hiddenBlueLatestKey = ref("");
+const targetShaking = ref(false);
+const targetSize = ref({ width: 0, height: 0 });
+const shakeTimer = ref(null);
+const instance = getCurrentInstance();
 const ROUND_TIP_OFFSET_Y = -32;
 const EXPERIENCE_TIP_OFFSET_Y = -68;
 
-function showShotFlash(flash) {
+function buildShotEffectKey(team, shot, fallbackKey = "") {
-  const shootData = flash?.shootData;
+  return (
-  if (!shootData) return;
+    fallbackKey ||
-  if (timer.value) clearTimeout(timer.value);
+    [
+      team,
+      shot?.playerId ?? "",
+      shot?.x ?? "",
+      shot?.y ?? "",
+      shot?.ring ?? "",
+      shot?.ringX ? 1 : 0,
+    ].join("-")
+  );
+}
 
-  if (flash.team === "red") {
+function findShotPlayer(shot, team) {
+  const players = team === "red" ? props.redTeam : props.blueTeam;
+  return players.find((player) => String(player?.id) === String(shot?.playerId));
+}
+
+function isSvipShot(shot, team) {
+  return findShotPlayer(shot, team)?.sVip === true;
+}
+
+function shouldPlayShotEffect(shot, team) {
+  return !!shot && Number(shot.ring) > 0 && isSvipShot(shot, team);
+}
+
+function clearTipTimer() {
+  if (timer.value) clearTimeout(timer.value);
+  timer.value = null;
+}
+
+function showShotTip(team, shootData) {
+  clearTipTimer();
+
+  if (team === "red") {
     latestOne.value = shootData;
     timer.value = setTimeout(() => {
       latestOne.value = null;
+      timer.value = null;
     }, 1000);
     return;
   }
@@ -78,9 +133,102 @@ function showShotFlash(flash) {
   bluelatestOne.value = shootData;
   timer.value = setTimeout(() => {
     bluelatestOne.value = null;
+    timer.value = null;
   }, 1000);
 }
 
+function triggerShotEffect(team, shot, fallbackKey = "") {
+  const key = buildShotEffectKey(team, shot, fallbackKey);
+
+  if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
+  if (shotEffect.value?.team === "blue") hiddenBlueLatestKey.value = "";
+
+  if (team === "red") {
+    latestOne.value = null;
+    hiddenRedLatestKey.value = key;
+  } else {
+    bluelatestOne.value = null;
+    hiddenBlueLatestKey.value = key;
+  }
+
+  shotEffect.value = { key, team, shot };
+}
+
+function completeShotEffect(key) {
+  if (!shotEffect.value || shotEffect.value.key !== key) return;
+
+  const { team, shot } = shotEffect.value;
+  if (team === "red") hiddenRedLatestKey.value = "";
+  if (team === "blue") hiddenBlueLatestKey.value = "";
+  shotEffect.value = null;
+  showShotTip(team, shot);
+}
+
+function shakeTarget() {
+  targetShaking.value = false;
+  if (shakeTimer.value) {
+    clearTimeout(shakeTimer.value);
+    shakeTimer.value = null;
+  }
+
+  nextTick(() => {
+    targetShaking.value = true;
+    shakeTimer.value = setTimeout(() => {
+      targetShaking.value = false;
+      shakeTimer.value = null;
+    }, 260);
+  });
+}
+
+function updateTargetSize() {
+  nextTick(() => {
+    const query = instance?.proxy
+      ? uni.createSelectorQuery().in(instance.proxy)
+      : uni.createSelectorQuery();
+
+    query
+      .select(".target")
+      .boundingClientRect((rect) => {
+        const width = Number(rect?.width);
+        const height = Number(rect?.height);
+        if (!Number.isFinite(width) || !Number.isFinite(height)) return;
+        if (width <= 0 || height <= 0) return;
+        targetSize.value = { width, height };
+      })
+      .exec();
+  });
+}
+
+function handleWindowResize() {
+  updateTargetSize();
+}
+
+function shouldHideRedHit(index) {
+  return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
+}
+
+function shouldHideBlueHit(index) {
+  return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
+}
+
+function showShotFlash(flash) {
+  const shootData = flash?.shootData;
+  if (!shootData) {
+    hiddenRedLatestKey.value = "";
+    hiddenBlueLatestKey.value = "";
+    shotEffect.value = null;
+    return;
+  }
+
+  const team = flash.team === "red" ? "red" : "blue";
+  if (shouldPlayShotEffect(shootData, team)) {
+    triggerShotEffect(team, shootData, flash.key);
+    return;
+  }
+
+  showShotTip(team, shootData);
+}
+
 watch(
   () => props.latestShotFlash,
   (newVal) => {
@@ -89,6 +237,26 @@ watch(
   { immediate: true }
 );
 
+watch(
+  () => props.scores.length,
+  (newLen, oldLen) => {
+    if (newLen > oldLen) return;
+    latestOne.value = null;
+    hiddenRedLatestKey.value = "";
+    if (shotEffect.value?.team === "red") shotEffect.value = null;
+  }
+);
+
+watch(
+  () => props.blueScores.length,
+  (newLen, oldLen) => {
+    if (newLen > oldLen) return;
+    bluelatestOne.value = null;
+    hiddenBlueLatestKey.value = "";
+    if (shotEffect.value?.team === "blue") shotEffect.value = null;
+  }
+);
+
 const safeTargetRadius = computed(() => {
   const radius = Number(props.targetRadius);
   return Number.isFinite(radius) && radius > 0 ? radius : 20;
@@ -159,6 +327,15 @@ function getHitStyle(shot) {
   };
 }
 
+function getSvipHitBgStyle(shot) {
+  const radius = currentHitRadiusPx.value;
+  const point = getShotPoint(shot);
+
+  return {
+    ...getTargetPositionStyle(point, radius),
+  };
+}
+
 function getRoundTipStyle(shot) {
   const point = getShotPoint(shot, true);
   return getTargetPositionStyle(
@@ -223,6 +400,8 @@ async function onReceiveMessage(message) {
 
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
+  updateTargetSize();
+  if (uni.onWindowResize) uni.onWindowResize(handleWindowResize);
 });
 
 onBeforeUnmount(() => {
@@ -234,12 +413,17 @@ onBeforeUnmount(() => {
     clearTimeout(dirTimer.value);
     dirTimer.value = null;
   }
+  if (shakeTimer.value) {
+    clearTimeout(shakeTimer.value);
+    shakeTimer.value = null;
+  }
   uni.$off("socket-inbox", onReceiveMessage);
+  if (uni.offWindowResize) uni.offWindowResize(handleWindowResize);
 });
 </script>
 
 <template>
-  <view class="container">
+  <view :class="['container', { 'container--effecting': shotEffect }]">
     <view class="header" v-if="totalRound > 0">
       <text v-if="totalRound > 0" class="round-count">{{
         (currentRound > totalRound ? totalRound : currentRound) +
@@ -247,7 +431,7 @@ onBeforeUnmount(() => {
         totalRound
       }}</text>
     </view>
-    <view class="target">
+    <view :class="['target', { 'target--shake': targetShaking }]">
       <view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
         <view :style="{ background: circleColor }">
           <image src="../../../static/dot-circle.png" mode="widthFix" />
@@ -287,8 +471,20 @@ onBeforeUnmount(() => {
         }}<text v-if="bluelatestOne.ring">环</text></view
       >
       <block v-for="(bow, index) in scores" :key="index">
+        <image
+          v-if="
+            pMode &&
+            bow.ring > 0 &&
+            isSvipShot(bow, 'red') &&
+            !shouldHideRedHit(index)
+          "
+          class="svip-hit-bg"
+          src="../../../static/vip/svip-xuan.png"
+          :style="getSvipHitBgStyle(bow)"
+          mode="aspectFit"
+        />
         <view
-          v-if="bow.ring > 0"
+          v-if="bow.ring > 0 && !shouldHideRedHit(index)"
           :class="`hit ${pMode ? 'b' : 's'}-point ${
             index === scores.length - 1 && latestOne ? 'pump-in' : ''
           }`"
@@ -300,8 +496,20 @@ onBeforeUnmount(() => {
         >
       </block>
       <block v-for="(bow, index) in blueScores" :key="index">
+        <image
+          v-if="
+            pMode &&
+            bow.ring > 0 &&
+            isSvipShot(bow, 'blue') &&
+            !shouldHideBlueHit(index)
+          "
+          class="svip-hit-bg"
+          src="../../../static/vip/svip-xuan.png"
+          :style="getSvipHitBgStyle(bow)"
+          mode="aspectFit"
+        />
         <view
-          v-if="bow.ring > 0"
+          v-if="bow.ring > 0 && !shouldHideBlueHit(index)"
           :class="`hit ${pMode ? 'b' : 's'}-point ${
             index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
           }`"
@@ -313,6 +521,16 @@ onBeforeUnmount(() => {
           <text v-if="pMode">{{ index + 1 }}</text>
         </view>
       </block>
+      <BowShotEffect
+        :shot="shotEffect && shotEffect.shot"
+        :playKey="shotEffect ? shotEffect.key : ''"
+        :targetRadius="safeTargetRadius"
+        :targetWidth="targetSize.width"
+        :targetHeight="targetSize.height"
+        :hitOffsetPx="currentHitRadiusPx"
+        @impact="shakeTarget"
+        @complete="completeShotEffect"
+      />
       <image src="../../../static/bow-target.png" mode="widthFix" />
     </view>
     <view class="footer">
@@ -334,13 +552,22 @@ onBeforeUnmount(() => {
   height: calc(100vw - 30px);
   padding: 0px 15px;
   position: relative;
+  z-index: 3;
+}
+.container--effecting {
+  z-index: 10000;
 }
 .target {
   position: relative;
   margin: 10px;
   width: calc(100% - 20px);
   height: calc(100% - 20px);
-  z-index: -1;
+  z-index: 1;
+  pointer-events: none;
+  transform-origin: center center;
+}
+.target--shake {
+  animation: target-shake 0.26s ease-out;
 }
 .e-value {
   position: absolute;
@@ -395,17 +622,26 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
 }
+.svip-hit-bg {
+  position: absolute;
+  width: 48rpx;
+  height: 48rpx;
+  z-index: 1;
+  pointer-events: none;
+  transform-origin: center center;
+  animation: svip-hit-xuan 1.2s linear infinite;
+}
 .hit {
   position: absolute;
   border-radius: 50%;
-  z-index: 1;
+  z-index: 2;
   color: #fff;
-  transition: all 0.3s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease;
   box-sizing: border-box;
 }
 .b-point {
   border: 1px solid #fff;
-  z-index: 1;
+  z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -421,6 +657,20 @@ onBeforeUnmount(() => {
   transform: translate(-50%, -50%);*/
   margin-top: 2rpx;
 }
+@keyframes svip-hit-xuan {
+  0% {
+    opacity: 0.9;
+    transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
+  }
+  50% {
+    opacity: 1;
+    transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
+  }
+  100% {
+    opacity: 0.9;
+    transform: translate(-50%, -50%) rotate(360deg) scale(0.92);
+  }
+}
 @keyframes target-pump-in {
   from {
     transform: translate(-50%, -50%) scale(2);
@@ -430,6 +680,29 @@ onBeforeUnmount(() => {
     transform: translate(-50%, -50%) scale(1);
   }
 }
+@keyframes target-shake {
+  0% {
+    transform: translate(0, 0);
+  }
+  14% {
+    transform: translate(-20rpx, 8rpx);
+  }
+  28% {
+    transform: translate(16rpx, -8rpx);
+  }
+  44% {
+    transform: translate(-12rpx, 6rpx);
+  }
+  64% {
+    transform: translate(8rpx, -4rpx);
+  }
+  82% {
+    transform: translate(-4rpx, 2rpx);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
 .hit.pump-in {
   animation: target-pump-in 0.3s ease-out forwards;
   transform-origin: center center;
@@ -457,6 +730,8 @@ onBeforeUnmount(() => {
   display: flex;
   margin-top: -40px;
   justify-content: flex-end;
+  position: relative;
+  z-index: 999;
 }
 .footer > image {
   width: 40px;

src/pages/team-battle/components/Header.vue

@@ -316,7 +316,7 @@ onBeforeUnmount(() => {
   width: 156rpx;
   height: 28rpx;
   font-weight: 400;
-  font-size: 20rpx;
+  font-size: 24rpx;
   color: #ffffff;
   text-align: center;
   line-height: 28rpx;

src/pages/team-battle/components/TeamAvatars.vue

@@ -17,6 +17,7 @@ const props = defineProps({
 const players = ref({});
 const currentTeam = ref(false);
 const firstName = ref("");
+const currentPlayer = ref(null);
 
 // 抽出判断：当前队伍且该玩家排序为 0（队伍首位）
 const isFirst = (id) =>
@@ -30,6 +31,18 @@ const getPos = (id) => {
   return sort * 40;
 };
 
+const getMemberNicknameClass = () => [
+  "current-shooter-name",
+  "member-nickname",
+  currentPlayer.value?.vip === true && currentPlayer.value?.sVip !== true
+    ? "member-nickname--vip"
+    : "",
+  currentPlayer.value?.sVip === true ? "member-nickname--svip" : "",
+];
+
+const isCurrentPlayerMember = () =>
+  currentPlayer.value?.vip === true || currentPlayer.value?.sVip === true;
+
 const syncPlayers = () => {
   const nextPlayers = {};
   const shooterId = props.currentShooterId;
@@ -40,12 +53,14 @@ const syncPlayers = () => {
 
   currentTeam.value = !!shooterId && shooterIndex >= 0;
   firstName.value = "";
+  currentPlayer.value = null;
 
   if (currentTeam.value) {
     const target = nextTeam.splice(shooterIndex, 1)[0];
     if (target) {
       nextTeam.unshift(target);
       firstName.value = target.name || "";
+      currentPlayer.value = target;
     }
   }
 
@@ -93,8 +108,20 @@ watch(
         >{{ isRed ? "红队" : "蓝队" }}</text
       >
     </view>
+    <view
+      v-if="currentTeam && isCurrentPlayerMember()"
+      :class="getMemberNicknameClass()"
+      :style="{
+        [isRed ? 'left' : 'right']: '-4rpx',
+      }"
+    >
+      <text class="member-nickname__text">{{ firstName }}</text>
+      <text v-if="currentPlayer?.sVip === true" class="member-nickname__shine">
+        {{ firstName }}
+      </text>
+    </view>
     <text
-      v-if="currentTeam"
+      v-else-if="currentTeam"
       class="truncate"
       :style="{
         color: isRed ? '#ff6060' : '#5fadff',
@@ -114,6 +141,17 @@ watch(
   height: 10rpx;
   margin: 0 20rpx;
 }
+.current-shooter-name {
+  position: absolute;
+  width: 80rpx;
+  bottom: -100rpx;
+  justify-content: center;
+}
+.current-shooter-name .member-nickname__text,
+.current-shooter-name .member-nickname__shine {
+  font-size: 20rpx;
+  text-align: center;
+}
 .container > text {
   position: absolute;
   font-size: 20rpx;

src/pages/team-battle/index.vue

@@ -473,14 +473,17 @@ function updateTeams(battleInfo) {
 }
 
 function updateGoldenRound(battleInfo) {
-  if (!battleInfo?.current?.goldRound) {
+  const rounds = Array.isArray(battleInfo?.rounds) ? battleInfo.rounds : [];
-    goldenRound.value = 0;
+  const currentRoundNo = Number(battleInfo?.current?.round || 0);
-    return;
+  const currentRoundInfo = rounds.find((round) => Number(round?.round) === currentRoundNo);
-  }
+  const activeGoldRoundInfo = rounds.find(
-  const rounds = Array.isArray(battleInfo.rounds) ? battleInfo.rounds : [];
+    (round) => Number(round?.goldRound || 0) > 0 && round?.status === 1
-  const finishedGoldCount = rounds.filter((round) => !!round?.ifGold).length;
+  );
-  // goldenRound.value = Math.max(1, finishedGoldCount + (battleInfo.current?.playerId ? 1 : 0));
+  const roundGoldRound = Number(currentRoundInfo?.goldRound || 0);
-  goldenRound.value = Math.max(1, finishedGoldCount);
+  const activeGoldRound = Number(activeGoldRoundInfo?.goldRound || 0);
+  const currentGoldRound = Number(battleInfo?.current?.goldRound || 0);
+  const nextGoldRound = roundGoldRound || activeGoldRound || currentGoldRound;
+  goldenRound.value = nextGoldRound > 0 ? nextGoldRound : 0;
 }
 
 // Restore an info snapshot whose eventType points at the NewRound phase.
@@ -858,14 +861,10 @@ async function runToSomeoneShootTask(task, runId) {
   });
 }
 
-function isTenPlusRing(shot) {
+function updateXRingStreak(shooterId, isXRing) {
-  return !!(shot?.ringX || Number(shot?.ring) >= 10);
-}
-
-function updateXRingStreak(shooterId, isTenPlusRingShot) {
   if (!shooterId) return false;
   const id = String(shooterId);
-  if (!isTenPlusRingShot) {
+  if (!isXRing) {
     xRingStreaks.value[id] = 0;
     saveXRingStreaks();
     return false;
@@ -910,7 +909,7 @@ async function runShootResultTask(task) {
 
   const isTententen = updateXRingStreak(
     currentShooterId.value,
-    isTenPlusRing(battleInfo.shootData)
+    !!(battleInfo.shootData?.ringX && battleInfo.shootData?.ring)
   );
   const audioKeys = buildShootResultAudioKeys(battleInfo.shootData);
   if (isTententen) audioKeys.push("tententen");
@@ -1219,6 +1218,8 @@ onShow(() => {
           :scores="scores"
           :blueScores="blueScores"
           :latestShotFlash="latestShotFlash"
+          :redTeam="redTeam"
+          :blueTeam="blueTeam"
       />
       <BattleFooter
           v-if="start"
@@ -1254,7 +1255,7 @@ onShow(() => {
         <view class="offline-modal">
           <text class="offline-title">设备已离线</text>
           <text class="offline-desc">检测到设备已断开连接，请检查设备后继续比赛</text>
-          <SButton :onClick="() => (showOfflineModal = false)">我知道了</SButton>
+          <SButton @click="showOfflineModal = false">我知道了</SButton>
         </view>
       </SModal>
     </view>

src/pages/team-battle/team-bow-data.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "./components/Container.vue";
+import BowTarget from "./components/BowTarget.vue";
+import Avatar from "./components/Avatar.vue";
+import { roundsName } from "@/constants";
+import { getBattleAPI } from "@/apis";
+const selected = ref(0);
+const redScores = ref([]);
+const blueScores = ref([]);
+const redTeam = ref([]);
+const blueTeam = ref([]);
+const tabs = ref([]);
+const players = ref([]);
+const data = ref({});
+
+const loadArrows = (round) => {
+  round.shoots[1].forEach((arrow) => {
+    blueScores.value.push(arrow);
+  });
+  round.shoots[2].forEach((arrow) => {
+    redScores.value.push(arrow);
+  });
+};
+onLoad(async (options) => {
+  if (!options.battleId) return;
+  const result = await getBattleAPI(options.battleId || "57943107462893568");
+  data.value = result;
+  blueTeam.value = data.value.teams?.[1]?.players || [];
+  redTeam.value = data.value.teams?.[2]?.players || [];
+  blueTeam.value.forEach((p, index) => {
+    players.value.push(p);
+    players.value.push(redTeam.value[index]);
+  });
+  Object.values(data.value.rounds).forEach((round, index) => {
+    if (round.ifGold) tabs.value.push(`决金箭`);
+    else tabs.value.push(`第${roundsName[index + 1]}轮`);
+  });
+  selected.value = Number(options.selected || 0);
+  onClickTab(selected.value);
+});
+const onClickTab = (index) => {
+  selected.value = index;
+  redScores.value = [];
+  blueScores.value = [];
+  loadArrows(data.value.rounds[index]);
+};
+</script>
+
+<template>
+  <Container title="靶纸">
+    <view class="container">
+      <view>
+        <view
+          v-for="(tab, index) in tabs"
+          :key="index"
+          @click="() => onClickTab(index)"
+          :class="selected === index ? 'selected-tab' : ''"
+        >
+          {{ tab }}
+        </view>
+      </view>
+      <view :style="{ margin: '20px 0' }">
+        <BowTarget
+          :scores="redScores"
+          :blueScores="blueScores"
+          :redTeam="redTeam"
+          :blueTeam="blueTeam"
+          mode="team"
+        />
+      </view>
+      <view class="score-container">
+        <view
+          class="score-row"
+          v-for="(player, index) in players"
+          :key="index"
+          :style="{
+            justifyContent: index % 2 === 0 ? 'flex-end' : 'flex-start',
+          }"
+        >
+          <Avatar
+            :src="player.avatar"
+            :borderColor="index % 2 === 0 ? '#64BAFF' : '#FF6767'"
+            :size="36"
+          />
+          <view>
+            <view
+              v-for="(score, index) in data.rounds[selected].shoots[
+                index % 2 === 0 ? 1 : 2
+              ]"
+              :key="index"
+              class="score-item"
+            >
+              {{ score.ringX ? "X" : score.ring }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.container > view:nth-child(1) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: calc(100% - 20px);
+  color: #fff9;
+  padding: 10px;
+  overflow-x: auto;
+}
+.container > view:nth-child(1)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.container > view:nth-child(1) > view {
+  border: 1px solid #fff9;
+  border-radius: 20px;
+  padding: 7px 10px;
+  margin: 0 5px;
+  font-size: 14px;
+  flex: 0 0 auto;
+}
+.selected-tab {
+  background-color: #fed847;
+  border-color: #fed847 !important;
+  color: #000;
+}
+.score-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 5px;
+  width: calc(50% - 5px);
+  padding-left: 5px;
+}
+.score-row > view:last-child {
+  margin-left: 10px;
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  gap: 5px;
+  margin-right: 5px;
+  min-width: 26%;
+}
+.score-item {
+  background-image: url("../../static/score-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: #fed847;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  width: 10vw;
+  height: 10vw;
+}
+.score-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+</style>

src/pages/training/components/BowData.vue

@@ -1,116 +0,0 @@
-<script setup>
-import AppBackground from "@/components/AppBackground.vue";
-import Avatar from "@/components/Avatar.vue";
-import BowTarget from "./BowTarget.vue";
-import ScorePanel from "./ScorePanel.vue";
-import useStore from "@/store";
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { user } = storeToRefs(store);
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  onClose: {
-    type: Function,
-    default: () => {},
-  },
-  arrows: {
-    type: Array,
-    default: () => [],
-  },
-  total: {
-    type: Number,
-    default: 0,
-  },
-});
-</script>
-
-<template>
-  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
-    <AppBackground :type="10" />
-    <view class="header">
-      <view>
-        <Avatar :src="user.avatar" :rankLvl="user.rankLvl" :size="45" />
-        <view>
-          <text>{{ user.nickName }}</text>
-          <text>{{ user.lvlName }}</text>
-        </view>
-      </view>
-      <view @click="onClose">
-        <image src="/static/close-white.png" mode="widthFix" />
-      </view>
-    </view>
-    <view :style="{ width: '100%', marginBottom: '20px' }">
-      <BowTarget :scores="arrows" />
-    </view>
-    <view class="desc">
-      <text>{{ arrows.length }}</text>
-      <text>支箭，共</text>
-      <text>{{ arrows.reduce((a, b) => a + (b.ring || 0), 0) }}</text>
-      <text>环</text>
-    </view>
-    <ScorePanel
-      :completeEffect="false"
-      :rowCount="total === 12 ? 6 : 9"
-      :total="total"
-      :arrows="arrows"
-      :margin="total === 12 ? 4 : 1"
-      :fontSize="total === 12 ? 25 : 22"
-    />
-  </view>
-</template>
-
-<style scoped>
-.container {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: #232323;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 10;
-}
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: calc(100% - 20px);
-  padding: 10px;
-}
-.header > view:first-child {
-  display: flex;
-  align-items: center;
-  margin-left: 10px;
-}
-.header > view:first-child > view:last-child {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-left: 10px;
-  color: #fff;
-}
-.header > view:first-child > view:last-child > text:last-child {
-  font-size: 10px;
-  background-color: #5f51ff;
-  padding: 2px 5px;
-  border-radius: 10px;
-  margin-top: 5px;
-}
-.header > view:last-child > image {
-  width: 40px;
-}
-.desc {
-  color: #fff;
-  margin-bottom: 40px;
-}
-.desc > text:nth-child(2),
-.desc > text:nth-child(4) {
-  color: #fed847;
-}
-</style>

src/pages/training/components/BowTarget.vue

@@ -1,665 +0,0 @@
-<script setup>
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from "vue";
-import PointSwitcher from "@/components/PointSwitcher.vue";
-import TargetCanvas from "@/components/TargetCanvas.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: () => [],
-  },
-  mode: {
-    type: String,
-    default: "solo", // solo 单排，team 双排
-  },
-  stop: {
-    type: Boolean,
-    default: false,
-  },
-  coordinateRadius: {
-    type: Number,
-    default: 20,
-  },
-  hitRadiusPx: {
-    type: Number,
-    default: 2,
-  },
-  zoomHitRadiusPx: {
-    type: Number,
-    default: 5,
-  },
-  showCrosshair: {
-    type: Boolean,
-    default: false,
-  },
-  showQuadrantLabels: {
-    type: Boolean,
-    default: false,
-  },
-  quadrantLabels: {
-    type: Object,
-    default: () => ({
-      1: "1",
-      2: "2",
-      3: "3",
-      4: "4",
-    }),
-  },
-  highlightAreas: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const pMode = ref(true);
-const latestOne = ref(null);
-const bluelatestOne = ref(null);
-const prevScores = ref([]);
-const prevBlueScores = ref([]);
-const timer = ref(null);
-const dirTimer = ref(null);
-const angle = ref(null);
-const circleColor = ref("");
-const ROUND_TIP_OFFSET_Y = -32;
-const EXPERIENCE_TIP_OFFSET_Y = -68;
-
-const getNumber = (value, fallback = 0) => {
-  const numberValue = Number(value);
-  return Number.isFinite(numberValue) ? numberValue : fallback;
-};
-
-const safeTargetRadius = computed(() => {
-  return Math.max(getNumber(props.coordinateRadius, 20), 1);
-});
-
-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, extraOffset = {}) {
-  if (!point) return { display: "none" };
-
-  const radius = safeTargetRadius.value;
-  const diameter = radius * 2;
-  const direction = getPointDirection(point);
-  const xOffset = (direction ? direction.x * offsetPx : 0) + (extraOffset.x || 0);
-  const yOffset = (direction ? -direction.y * offsetPx : 0) + (extraOffset.y || 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 getRoundTipStyle(shot) {
-  const point = getShotPoint(shot, true);
-  return getTargetPositionStyle(
-    point,
-    shot?.ring ? currentHitRadiusPx.value : 0,
-    { y: ROUND_TIP_OFFSET_Y }
-  );
-}
-
-function getExperienceTipStyle(shot) {
-  const point = getShotPoint(shot, true);
-  return getTargetPositionStyle(
-    point,
-    shot?.ring ? currentHitRadiusPx.value : 0,
-    { y: EXPERIENCE_TIP_OFFSET_Y }
-  );
-}
-
-watch(
-  () => props.scores,
-  (newVal) => {
-    if (newVal.length - prevScores.value.length === 1) {
-      latestOne.value = newVal[newVal.length - 1];
-      if (timer.value) clearTimeout(timer.value);
-      timer.value = setTimeout(() => {
-        latestOne.value = null;
-      }, 1000);
-    }
-    prevScores.value = [...newVal];
-  },
-  {
-    deep: true,
-  }
-);
-
-watch(
-  () => props.blueScores,
-  (newVal) => {
-    if (newVal.length - prevBlueScores.value.length === 1) {
-      bluelatestOne.value = newVal[newVal.length - 1];
-      if (timer.value) clearTimeout(timer.value);
-      timer.value = setTimeout(() => {
-        bluelatestOne.value = null;
-      }, 1000);
-    }
-    prevBlueScores.value = [...newVal];
-  },
-  {
-    deep: true,
-  }
-);
-
-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%)`,
-  };
-});
-
-const currentArrowIndex = computed(() => {
-  return props.scores.length + props.blueScores.length + 1;
-});
-
-const getHighlightArrowIndex = (area = {}) => {
-  const arrowIndex = Number(area.arrowIndex ?? area.arrowNo ?? area.arrow);
-  return Number.isInteger(arrowIndex) && arrowIndex > 0 ? arrowIndex : null;
-};
-
-const currentHighlightAreas = computed(() => {
-  if (!Array.isArray(props.highlightAreas) || props.highlightAreas.length === 0) {
-    return [];
-  }
-
-  const hasExplicitArrowIndex = props.highlightAreas.some((area = {}) => {
-    return getHighlightArrowIndex(area) !== null;
-  });
-
-  const matchedAreas = props.highlightAreas.filter((area = {}) => {
-    return getHighlightArrowIndex(area) === currentArrowIndex.value;
-  });
-
-  if (hasExplicitArrowIndex) {
-    return matchedAreas;
-  }
-
-  if (props.highlightAreas.length === 1) {
-    return props.highlightAreas.slice(0, 1);
-  }
-
-  const currentArea = props.highlightAreas[currentArrowIndex.value - 1];
-  return currentArea ? [currentArea] : [];
-});
-
-const showHighlightCanvas = computed(() => {
-  return props.totalRound > 0 && currentHighlightAreas.value.length > 0;
-});
-
-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">
-      <image
-        class="target-image"
-        src="../../../static/bow-target.png"
-        mode="aspectFit"
-      />
-      <TargetCanvas
-        v-if="showHighlightCanvas"
-        class="target-highlight-layer"
-        :coordinateRadius="coordinateRadius"
-        :showCrosshair="false"
-        :showQuadrantLabels="false"
-        :showRingLabels="false"
-        :highlightOnly="true"
-        :highlightAreas="currentHighlightAreas"
-      />
-      <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="getExperienceTipStyle(latestOne)"
-      >
-        经验 +1
-      </view>
-      <view
-        v-if="latestOne"
-        class="round-tip fade-in-out"
-        :style="getRoundTipStyle(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="getExperienceTipStyle(bluelatestOne)"
-      >
-        经验 +1
-      </view>
-      <view
-        v-if="bluelatestOne"
-        class="round-tip fade-in-out"
-        :style="getRoundTipStyle(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>
-    </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: 0;
-}
-.target-image {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  pointer-events: none;
-}
-.target-highlight-layer {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  pointer-events: none;
-}
-.e-value {
-  position: absolute;
-  background-color: #0006;
-  color: #fff;
-  font-size: 12px;
-  padding: 4px 7px;
-  border-radius: 5px;
-  z-index: 4;
-  width: 50px;
-  text-align: center;
-}
-.round-tip {
-  position: absolute;
-  color: #fff;
-  font-size: 30px;
-  font-weight: bold;
-  z-index: 4;
-  width: 100px;
-  text-align: center;
-}
-.round-tip > text {
-  font-size: 24px;
-  margin-left: 5px;
-}
-@keyframes target-tip-fade-in-out {
-  0% {
-    transform: translate(-50%, -50%) translateY(20px);
-    opacity: 0;
-  }
-
-  30% {
-    transform: translate(-50%, -50%);
-    opacity: 1;
-  }
-
-  80% {
-    transform: translate(-50%, -50%);
-    opacity: 1;
-  }
-
-  100% {
-    transform: translate(-50%, -50%);
-    opacity: 0;
-  }
-}
-.round-tip.fade-in-out,
-.e-value.fade-in-out {
-  animation: target-tip-fade-in-out 1.2s ease forwards;
-}
-.hit {
-  position: absolute;
-  border-radius: 50%;
-  z-index: 3;
-  color: #fff;
-  transition: all 0.3s ease;
-  box-sizing: border-box;
-}
-.s-point {
-}
-.b-point {
-  border: 1px solid #fff;
-  z-index: 3;
-  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: 5;
-  font-weight: bold;
-}
-.arrow-dir {
-  position: absolute;
-  width: 100%;
-  height: 52%;
-  left: 50%;
-  bottom: 50%;
-  z-index: 4;
-  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>

src/pages/training/components/BubbleTip.vue

@@ -1,62 +0,0 @@
-<script setup>
-const props = defineProps({
-  type: {
-    type: String,
-    default: "normal",
-  },
-  location: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-</script>
-
-<template>
-  <view :class="`container ${type}`" :style="{ ...location }">
-    <slot />
-  </view>
-</template>
-
-<style scoped>
-.container {
-  position: absolute;
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  font-size: 24rpx;
-}
-.normal {
-  background-image: url("../static/bubble-tip.png");
-  width: 157rpx;
-  height: 105rpx;
-  padding-top: 10px;
-  padding-left: 30rpx;
-}
-.normal2 {
-  background-image: url("../static/bubble-tip4.png");
-  width: 190rpx;
-  height: 105rpx;
-  padding-top: 10px;
-  padding-left: 20rpx;
-  top: 0;
-  left: 15%;
-  z-index: 1;
-}
-.long {
-  background-image: url("../static/bubble-tip2.png");
-  width: 370rpx;
-  height: 70rpx;
-  top: -50%;
-  left: 49%;
-}
-.short {
-  background-image: url("../static/bubble-tip3.png");
-  width: 300rpx;
-  height: 70rpx;
-  top: -50%;
-  right: -1%;
-}
-</style>

src/pages/training/components/ScorePanel.vue

@@ -1,157 +0,0 @@
-<script setup>
-import { ref, watch, onMounted, onBeforeUnmount } from "vue";
-const props = defineProps({
-  rowCount: {
-    type: Number,
-    default: 0,
-  },
-  total: {
-    type: Number,
-    default: 0,
-  },
-  arrows: {
-    type: Array,
-    default: () => [],
-  },
-  fontSize: {
-    type: Number,
-    default: 25,
-  },
-  completeEffect: {
-    type: Boolean,
-    default: true,
-  },
-});
-const items = ref(new Array(props.total).fill(9));
-const bgImages = [
-  "../static/complete-light1.png",
-  "../static/complete-light2.png",
-];
-const bgIndex = ref(0);
-
-const getDisplayText = (arrow) => {
-  if (!arrow) return "-";
-  if (arrow.ringX) return "X";
-  return arrow.ring ?? "-";
-};
-
-const isLowScore = (arrow) => {
-  if (!arrow || arrow.ringX) return false;
-  const ring = Number(arrow.ring);
-  return Number.isFinite(ring) && ring < 6;
-};
-
-watch(
-  () => props.total,
-  (newValue) => {
-    items.value = new Array(newValue).fill(9);
-  }
-);
-const timer = ref(null);
-onMounted(() => {
-  timer.value = setInterval(() => {
-    bgIndex.value = bgIndex.value === 0 ? 1 : 0;
-  }, 200);
-});
-onBeforeUnmount(() => {
-  if (timer.value) {
-    clearInterval(timer.value);
-  }
-});
-</script>
-<template>
-  <view class="container">
-    <image
-      v-if="total > 0 && arrows.length === total && completeEffect"
-      :src="bgImages[bgIndex]"
-      class="complete-light"
-      :style="{
-        width: `calc(${(100 / (rowCount + 2)) * rowCount}vw + ${
-          (100 / (total * 2)) * (rowCount * 2 + (total === 12 ? 8 : 24))
-        }px)`,
-        height: `calc(${(100 / (rowCount + 2)) * (total / rowCount)}vw + ${
-          (100 / (total * 2)) *
-          ((total / rowCount) * 2 + (total === 12 ? 7 : 24))
-        }px)`,
-        top: `${total === 12 ? -2 : -3}vw`,
-      }"
-    />
-    <view
-      v-for="(_, index) in items"
-      :key="index"
-      class="score-item"
-    >
-      <image
-        class="score-item-bg"
-        :src="
-          isLowScore(arrows[index])
-            ? '/static/training-difficulty-design/block-gray.png'
-            : '/static/training-difficulty-design/block-gold.png'
-        "
-      />
-      <text
-        class="score-value"
-        :class="{ 'score-value--low': isLowScore(arrows[index]) }"
-      >
-        {{ getDisplayText(arrows[index]) }}
-      </text>
-    </view>
-  </view>
-</template>
-
-<style scoped lang="scss">
-.container {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  position: relative;
-  padding: 30rpx 40rpx 0 40rpx;
-}
-.score-item {
-  position: relative;
-  width: 100rpx;
-  height: 56rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  margin-right: 14rpx;
-  margin-bottom: 14rpx;
-}
-
-.score-item:nth-child(6n) {
-  margin-right: 0;
-}
-
-.score-item-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100rpx;
-  height: 56rpx;
-}
-
-.score-value {
-  position: relative;
-  z-index: 1;
-  min-width: 28rpx;
-  text-align: center;
-  font-size: 34rpx;
-  line-height: 1;
-  font-weight: 700;
-  font-style: italic;
-  color: #f6e3b2;
-  text-shadow: 0 2rpx 0 rgba(36, 36, 48, 0.5);
-  margin-left: -10rpx;
-}
-
-.score-value--low {
-  color: #cfcfcf;
-  text-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.5);
-}
-
-.complete-light {
-  position: absolute;
-}
-</style>

src/pages/training/components/ScorePanel2.vue

@@ -1,109 +0,0 @@
-<script setup>
-import { computed } from "vue";
-
-const props = defineProps({
-  arrows: {
-    type: Array,
-    default: () => [],
-  },
-  total: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const getDisplayText = (arrow = {}) => {
-  if (!arrow) return "";
-  if (!arrow.ring) return "-";
-  return arrow.ringX ? "X" : String(arrow.ring);
-};
-
-const isLowScore = (arrow = {}) => {
-  if (!arrow || arrow.ringX) return false;
-  return Number(arrow.ring) < 6;
-};
-
-const displayArrows = computed(() => {
-  const list = [...props.arrows];
-  if (props.total > 0 && list.length < props.total) {
-    list.push(null);
-  }
-  return list;
-});
-</script>
-
-<template>
-  <view v-if="displayArrows.length" class="score-panel">
-    <view class="score-grid">
-      <view
-        v-for="(arrow, index) in displayArrows"
-        :key="index"
-        class="score-card"
-      >
-        <image class="score-card-bg" :src="isLowScore(arrow)?'/static/training-difficulty-design/block-gray.png':'/static/training-difficulty-design/block-gold.png'"></image>
-        <text
-          class="score-value"
-          :class="{ 'score-value--low': isLowScore(arrow) }"
-        >
-          {{ getDisplayText(arrow) }}
-        </text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style scoped lang="scss">
-.score-panel {
-  width: 100%;
-  padding: 30rpx 40rpx 0 40rpx;
-  box-sizing: border-box;
-}
-
-.score-grid {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.score-card {
-  position: relative;
-  width: 100rpx;
-  height: 56rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  margin-right: 14rpx;
-  margin-bottom: 14rpx;
-}
-
-.score-card:nth-child(6n) {
-  margin-right: 0;
-}
-
-.score-card-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100rpx;
-  height: 56rpx;
-}
-
-.score-value {
-  position: relative;
-  z-index: 1;
-  min-width: 28rpx;
-  text-align: center;
-  font-size: 34rpx;
-  line-height: 1;
-  font-weight: 700;
-  font-style: italic;
-  color: #f6e3b2;
-  text-shadow: 0 2rpx 0 rgba(36, 36, 48, 0.5);
-  margin-left: -10rpx;
-}
-
-.score-value--low {
-  color: #cfcfcf;
-  text-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.5);
-}
-</style>

src/pages/training/components/ScoreResult.vue

@@ -1,628 +0,0 @@
-<script setup>
-import { ref, onMounted, computed } from "vue";
-import ScreenHint from "./ScreenHint.vue";
-import BowData from "./BowData.vue";
-import UserUpgrade from "@/components/UserUpgrade.vue";
-import { directionAdjusts } from "@/constants";
-import useStore from "@/store";
-import { storeToRefs } from "pinia";
-
-const store = useStore();
-const { user } = storeToRefs(store);
-
-const props = defineProps({
-  onClose: {
-    type: Function,
-    default: () => { },
-  },
-  onRetry: {
-    type: Function,
-    default: () => { },
-  },
-  total: {
-    type: Number,
-    default: 0,
-  },
-  rowCount: {
-    type: Number,
-    default: 0,
-  },
-  result: {
-    type: Object,
-    default: () => ({}),
-  },
-  tipSrc: {
-    type: String,
-    default: "",
-  },
-});
-
-const showPanel = ref(true);
-const showComment = ref(false);
-const showBowData = ref(false);
-const showUpgrade = ref(false);
-
-const closePanel = () => {
-  showPanel.value = false;
-  setTimeout(() => {
-    props.onClose();
-  }, 300);
-};
-
-const retryPractice = () => {
-  showPanel.value = false;
-  setTimeout(() => {
-    props.onRetry();
-  }, 300);
-};
-
-function onClickShare() {
-  uni.$emit("share-image");
-}
-
-onMounted(() => {
-  if (props.result.lvl > user.value.lvl) {
-    showUpgrade.value = true;
-  }
-});
-
-const details = computed(() => props.result.details || []);
-
-const arrows = computed(() => {
-  const data = new Array(props.total).fill(null);
-  details.value.forEach((arrow, index) => {
-    data[index] = arrow;
-  });
-  return data;
-});
-
-const validArrows = computed(() => arrows.value.filter((a) => !!a?.ring).length);
-const totalRing = computed(() =>
-  details.value.reduce((last, next) => last + (Number(next.ring) || 0), 0)
-);
-
-const gainedExp = computed(
-  () => props.result.exp || props.result.experience || validArrows.value
-);
-
-const currentLevel = computed(
-  () => props.result.lvl || user.value.lvl || user.value.rankLvl || 1
-);
-
-const currentExp = computed(
-  () => props.result.currentExp || props.result.score || user.value.scores || 0
-);
-
-const nextExp = computed(
-  () => props.result.nextExp || props.result.upgradeScore || 100
-);
-
-const expPercent = computed(() => {
-  if (!nextExp.value) return 0;
-  return Math.min(100, Math.max(0, (currentExp.value / nextExp.value) * 100));
-});
-
-const findValue = (...keys) => {
-  const item = keys.find((key) => props.result[key] !== undefined);
-  return item ? props.result[item] : undefined;
-};
-
-const formatDuration = (value) => {
-  const seconds = Number(value || 0);
-  if (!seconds) return "--";
-  const minutes = Math.floor(seconds / 60);
-  const rest = seconds % 60;
-  return minutes ? `${minutes}分${rest}秒` : `${rest}秒`;
-};
-
-const usedTime = computed(() =>
-  findValue("duration", "usedTime", "shootTime", "time")
-);
-
-const hitCompare = computed(
-  () => Number(findValue("hitCompare", "hitDiff", "hitDelta") || 0)
-);
-
-const timeCompare = computed(
-  () => Number(findValue("timeCompare", "timeDiff", "durationDiff") || 0)
-);
-
-const calories = computed(
-  () => Number(findValue("calories", "calorie", "kcal") || 0)
-);
-</script>
-
-<template>
-  <view :class="['result-mask', showPanel ? 'result-mask--show' : 'result-mask--hide']">
-    <image class="hero-glow" src="/static/training-difficulty-design/result-bg.png" mode="widthFix" />
-    <view class="result-title">
-      <image class="result-title-bg" src="/static/training-difficulty-design/result-t-bg.png" mode="widthFix" />
-      <view class="result-title-text">Lv{{ currentLevel }}</view>
-    </view>
-
-    <view class="result-panel">
-      <view class="line-top"></view>
-      <view class="line-bottom"></view>
-      <view class="stats">
-        <view class="stat-row">
-          <image class="stat-bg" src="/static/training-difficulty-design/result-c-bg.png" mode="scaleToFill" />
-          <view class="stat-cell">
-            <text class="stat-label">共命中目标</text>
-            <view class="stat-value">
-              <text>{{ validArrows }}</text>
-              <text class="stat-unit">次</text>
-            </view>
-          </view>
-          <view class="stat-divider"></view>
-          <view class="stat-cell stat-cell--compare">
-            <text class="stat-label">对比上次</text>
-            <view class="stat-value">
-              <text>{{ Math.abs(hitCompare) }}</text>
-              <text class="stat-unit">次</text>
-              <image class="trend-icon" :class="{ 'trend-icon--down': hitCompare < 0 }"
-                src="/static/training-difficulty-design/result-up.png" mode="widthFix" />
-            </view>
-          </view>
-        </view>
-
-        <view class="stat-row">
-          <image class="stat-bg" src="/static/training-difficulty-design/result-c-bg.png" mode="scaleToFill" />
-          <view class="stat-cell">
-            <text class="stat-label">用时</text>
-            <view class="stat-value">
-              <text>{{ formatDuration(usedTime) }}</text>
-            </view>
-          </view>
-          <view class="stat-divider"></view>
-          <view class="stat-cell stat-cell--compare">
-            <text class="stat-label">对比上次</text>
-            <view class="stat-value">
-              <text>{{ formatDuration(Math.abs(timeCompare)) }}</text>
-              <image class="trend-icon" :class="{ 'trend-icon--down': timeCompare <= 0 }"
-                src="/static/training-difficulty-design/result-up.png" mode="widthFix" />
-            </view>
-          </view>
-        </view>
-         <view class="stat-row">
-          <image class="stat-bg" src="/static/training-difficulty-design/result-c-bg.png" mode="scaleToFill" />
-          <view class="stat-cell">
-            <text class="stat-label">消耗卡路里</text>
-            <view class="stat-value">
-              <text>{{ calories }}卡</text>
-            </view>
-          </view>
-          <text class="stat-equal">≈</text>
-          <!-- <view class="stat-divider"></view> -->
-          <view class="stat-cell stat-cell--compare">
-            <view class="stat-value">
-              <image v-for="index in 3" :key="index" class="rice-icon"
-                  src="/static/training-difficulty-design/result-rice.png" mode="widthFix" />
-            </view>
-          </view>
-        </view>
-
-     
-        <view class="actions">
-          <view class="action-item" @click="() => (showBowData = true)">
-            <image class="action-icon" src="/static/training-difficulty-design/result-icon-1.png" mode="widthFix" />
-            <text>查看靶纸</text>
-          </view>
-          <view v-if="validArrows === total" class="action-item" @click="() => (showComment = true)">
-            <image class="action-icon" src="/static/training-difficulty-design/result-icon-2.png" mode="widthFix" />
-            <text>教练点评</text>
-          </view>
-          <view v-if="validArrows === total" class="action-item" @click="onClickShare">
-            <image class="action-icon" src="/static/training-difficulty-design/result-icon-3.png" mode="widthFix" />
-            <text>分享成绩</text>
-          </view>
-        </view>
-      </view>
-    </view>
-    <view class="oper-box">
-      <view class="exp-area">
-        <text class="exp-gain">+{{ gainedExp }}经验</text>
-        <view class="level-progress">
-          <text class="level-text">LV.{{ currentLevel }}</text>
-          <view class="progress-track">
-            <view class="progress-fill" :style="{ width: `${expPercent}%` }"></view>
-          </view>
-          <text class="progress-text">{{ currentExp }} / {{ nextExp }}</text>
-        </view>
-      </view>
-
-      <view class="footer-actions">
-        <view class="result-btn result-btn--muted" @click="closePanel">
-          <text>{{ validArrows === total ? "完成" : "返回" }}</text>
-        </view>
-        <view class="result-btn result-btn--primary" @click="retryPractice">
-          <text>再来一次</text>
-        </view>
-      </view>
-    </view>
-
-    <ScreenHint :show="showComment" :onClose="() => (showComment = false)" mode="tall">
-      <view class="coach-comment">
-        <text>
-          您本次练习取得了<text class="gold-text">{{ totalRing }}</text>环的成绩，所有箭支上靶后的平均点间距离为<text class="gold-text">{{
-            Number((result.average_distance || 0).toFixed(2))
-            }}</text>，{{
-              result.spreadEvaluation === "Dispersed"
-                ? "还需要持续改进哦~"
-                : "成绩优秀。"
-            }}
-        </text>
-        <view>
-          <image src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png" mode="widthFix" />
-          <text class="coach-suggestion">
-            针对您本次的练习，{{
-              result.spreadEvaluation === "Dispersed"
-                ? "我们建议您充分练习推弓、靠位以及撒放动作一致性。"
-                : totalRing >= 100
-                  ? "我们建议您继续保持即可。"
-                  : `我们建议您将设备的瞄准器${directionAdjusts[result.adjustmentHint]
-                  }调整。`
-            }}
-          </text>
-        </view>
-      </view>
-    </ScreenHint>
-    <BowData :total="arrows.length" :arrows="result.details" :show="showBowData"
-      :onClose="() => (showBowData = false)" />
-    <UserUpgrade :show="showUpgrade" :onClose="() => (showUpgrade = false)" :lvl="result.lvl" />
-  </view>
-</template>
-
-<style scoped lang="scss">
-.result-mask {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  background:
-    linear-gradient(180deg,
-      rgba(24, 22, 17, 0.38) 0%,
-      rgba(24, 22, 17, 0.56) 28%,
-      rgba(17, 17, 25, 0.92) 58%),
-    rgba(0, 0, 0, 0.72);
-  z-index: 999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
-
-.result-mask--show {
-  opacity: 1;
-}
-
-.result-mask--hide {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.hero-glow {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-
-.result-title {
-  position: relative;
-  width: 100%;
-  height: 264rpx;
-  z-index: 2;
-}
-
-.result-title-bg {
-  width: 100%;
-  height: 264rpx;
-  display: block;
-}
-
-.result-title-text {
-  width: 100%;
-  font-size: 28rpx;
-  color: #FBFCE6;
-  font-weight: 600;
-  line-height: 40rpx;
-  text-align: center;
-  position: absolute;
-  top: 116rpx;
-  left: 0;
-}
-
-.result-panel {
-  width: 100vw;
-  height: 634rpx;
-  padding: 144rpx 80rpx 0 80rpx;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: rgba(0, 0, 0, 0.8);
-  z-index: 1;
-  margin-top: -100rpx;
-  position: relative;
-}
-
-.stats {
-  width: 100%;
-  margin-top: 34rpx;
-}
-
-.line-top {
-  background: linear-gradient(45deg, rgba(205, 183, 122, 0) 0%, #CDB77A 49.92%, rgba(205, 183, 122, 0) 100%);
-  width: 100%;
-  height: 4rpx;
-  opacity: 0.9;
-  position: absolute;
-  top: 2rpx;
-  left: 0;
-}
-
-.line-bottom {
-  background: linear-gradient(45deg, rgba(205, 183, 122, 0) 0%, #CDB77A 49.92%, rgba(205, 183, 122, 0) 100%);
-  width: 100%;
-  height: 4rpx;
-  opacity: 0.9;
-  position: absolute;
-  bottom: 2rpx;
-  left: 0;
-}
-
-.stat-row {
-  width: 100%;
-  height: 62rpx;
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin-bottom: 52rpx;
-  // border: 2rpx solid rgba(209, 184, 125, 0.72);
-  // border-radius: 14rpx;
-  transform: skewX(-12deg);
-  box-sizing: border-box;
-}
-
-.stat-cell {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  transform: skewX(12deg);
-}
-
-.stat-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 582rpx;
-  height: 62rpx;
-}
-
-.stat-cell--compare {
-  padding-left: 8rpx;
-  box-sizing: border-box;
-}
-
-.stat-label {
-  position: absolute;
-  top: -30rpx;
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 20rpx;
-  line-height: 1;
-}
-
-.stat-value {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 120rpx;
-  color: #F3E0B9;
-  font-size: 32rpx;
-  line-height: 1;
-  font-weight: 700;
-  font-style: italic;
-}
-
-.stat-unit {
-  margin-left: 4rpx;
-  font-size: 24rpx;
-}
-
-.stat-divider {
-  width: 2rpx;
-  height: 34rpx;
-  background: rgba(197, 160, 92, 0.64);
-  transform: skewX(12deg);
-}
-
-.stat-equal{
-  width: 30rpx;
-  height: 40rpx;
-  color: #F3E0B9;
-  font-size: 30rpx;
-  margin-left: 10rpx;
-}
-
-.trend-icon {
-  width: 28rpx;
-  height: 42rpx;
-  margin-left: 16rpx;
-}
-
-.trend-icon--down {
-  transform: rotate(180deg);
-}
-
-.stat-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 582rpx;
-  height: 62rpx;
-}
-
-.rice-list {
-  width: 160rpx;
-  display: flex;
-  align-items: center;
-}
-
-.rice-icon {
-  width: 36rpx;
-  height: 34rpx;
-  margin-right: 14rpx;
-}
-
-.oper-box {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 598rpx;
-}
-
-.actions {
-  width: 350rpx;
-  display: flex;
-  justify-content: space-between;
-  margin: 0 auto;
-  margin-top: 38rpx;
-}
-
-.action-item {
-  width: 80rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.action-icon {
-  width: 70rpx;
-  height: 68rpx;
-}
-
-.action-item>text {
-  margin-top: 4rpx;
-  color: #FAE6BC;
-  font-size: 20rpx;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.exp-area {
-  width: 100%;
-  margin-top: auto;
-  padding-top: 122rpx;
-}
-
-.exp-gain {
-  display: block;
-  margin-bottom: 14rpx;
-  color: #f6e3b2;
-  font-size: 22rpx;
-  line-height: 1;
-  text-align: center;
-}
-
-.level-progress {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.level-text,
-.progress-text {
-  color: rgba(255, 255, 255, 0.86);
-  font-size: 24rpx;
-  line-height: 1;
-}
-
-.level-text {
-  min-width: 60rpx;
-}
-
-.progress-text {
-  min-width: 72rpx;
-  text-align: right;
-}
-
-.progress-track {
-  flex: 1;
-  height: 10rpx;
-  margin: 0 14rpx;
-  border-radius: 999rpx;
-  overflow: hidden;
-  background: rgba(255, 255, 255, 0.26);
-}
-
-.progress-fill {
-  height: 100%;
-  border-radius: 999rpx;
-  background: linear-gradient(90deg, #ff940f 0%, #ffbb33 58%, #fff0a7 100%);
-}
-
-.footer-actions {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-top: 70rpx;
-}
-
-.result-btn {
-  width: 234rpx;
-  height: 72rpx;
-  border-radius: 999rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 18rpx;
-}
-
-.result-btn>text {
-  font-size: 28rpx;
-  line-height: 1;
-  font-weight: 700;
-}
-
-.result-btn--muted {
-  color: #ffffff;
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.result-btn--primary {
-  background: #FED847;
-  color: #151515;
-}
-
-.gold-text {
-  color: #fed847;
-}
-
-.coach-comment {
-  display: flex;
-  flex-direction: column;
-  font-size: 14px;
-}
-
-.coach-comment>view {
-  display: flex;
-}
-
-.coach-comment>view>image {
-  width: 420rpx;
-  height: 420rpx;
-  margin-right: 20rpx;
-}
-
-.coach-suggestion {
-  margin-top: 12px;
-}
-</style>

src/pages/training/components/ScreenHint.vue

@@ -1,89 +0,0 @@
-<script setup>
-import IconButton from "@/components/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>

src/pages/training/components/ShootProgress.vue

@@ -1,387 +0,0 @@
-<script setup>
-import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
-import audioManager from "@/audioManager";
-import { MESSAGETYPESV2 } from "@/constants";
-import { getDirectionText } from "@/util";
-import Avatar from "@/components/Avatar.vue";
-
-import useStore from "@/store";
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { user } = storeToRefs(store);
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: true,
-  },
-  start: {
-    type: Boolean,
-    default: false,
-  },
-  tips: {
-    type: String,
-    default: "",
-  },
-  total: {
-    type: Number,
-    default: 120,
-  },
-  currentRound: {
-    type: Number,
-    default: 0,
-  },
-  battleId: {
-    type: String,
-    default: "",
-  },
-  melee: {
-    type: Boolean,
-    default: false,
-  },
-  onStop: {
-    type: Function,
-    default: () => {},
-  },
-});
-
-const barColor = ref("#fed847");
-const remain = ref(props.total);
-const timer = ref(null);
-const sound = ref(true);
-const currentRound = ref(props.currentRound);
-const currentRoundEnded = ref(false);
-const halfTime = ref(false);
-const wait = ref(0);
-const transitionStyle = ref("all 1s linear");
-
-const progressPercent = computed(() => {
-  if (!props.total) return 0;
-  return Math.max(0, Math.min(100, (remain.value / props.total) * 100));
-});
-
-const displayName = computed(() => {
-  return (
-    user.value?.nickName ||
-    user.value?.nickname ||
-    user.value?.name ||
-    "Archer"
-  );
-});
-
-const avatarSrc = computed(() => {
-  return user.value?.avatar || "/static/shooter2.png";
-});
-
-watch(
-  () => props.tips,
-  (newVal) => {
-    let key = "";
-    if (newVal.includes("红队")) key = "请红方射箭";
-    if (newVal.includes("蓝队")) key = "请蓝方射箭";
-    if (key) {
-      if (currentRoundEnded.value) {
-        currentRound.value += 1;
-        currentRoundEnded.value = false;
-        if (currentRound.value === 1) audioManager.play("第一轮");
-        if (currentRound.value === 2) audioManager.play("第二轮");
-        if (currentRound.value === 3) audioManager.play("第三轮");
-        if (currentRound.value === 4) audioManager.play("第四轮");
-        if (currentRound.value === 5) audioManager.play("第五轮");
-        setTimeout(() => {
-          audioManager.play(key);
-        }, 1000);
-      } else {
-        audioManager.play(key);
-      }
-    }
-  }
-);
-
-const resetTimer = (count) => {
-  if (timer.value) clearInterval(timer.value);
-  const newVal = Math.round(count);
-
-  if (newVal >= remain.value) {
-    transitionStyle.value = "none";
-    remain.value = newVal;
-    setTimeout(() => {
-      transitionStyle.value = "all 1s linear";
-    }, 50);
-  } else {
-    remain.value = newVal;
-  }
-
-  if (remain.value > 0) {
-    timer.value = setInterval(() => {
-      if (remain.value === 0) {
-        clearInterval(timer.value);
-        props.onStop();
-      }
-      if (remain.value > 0) remain.value--;
-    }, 1000);
-  }
-};
-
-watch(
-  () => props.start,
-  (newVal) => {
-    if (newVal) {
-      resetTimer(props.total);
-    } else {
-      remain.value = 0;
-      clearInterval(timer.value);
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-
-const tipContent = computed(() => {
-  if (halfTime.value) {
-    return props.battleId ? "中场休息" : `中场休息(${wait.value}秒)`;
-  }
-  return props.start && remain.value === 0 ? "时间到！" : props.tips;
-});
-
-const updateSound = () => {
-  sound.value = !sound.value;
-  audioManager.setMuted(!sound.value);
-};
-
-async function onReceiveMessage(msg) {
-  if (Array.isArray(msg)) return;
-  if (msg.type === MESSAGETYPESV2.BattleStart) {
-    halfTime.value = false;
-    audioManager.play("比赛开始");
-  } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
-    audioManager.play("比赛结束", false);
-  } else if (msg.type === MESSAGETYPESV2.ShootResult) {
-    let arrow = {};
-    if (msg.details && Array.isArray(msg.details)) {
-      arrow = msg.details[msg.details.length - 1];
-    } else {
-      if (msg.shootData.playerId !== user.value.id) return;
-      if (msg.shootData) arrow = msg.shootData;
-    }
-    let key = [];
-    key.push(arrow.ring ? `${arrow.ringX ? "X" : arrow.ring}环` : "未上靶");
-    if (arrow.angle !== null) {
-      key.push(`向${getDirectionText(arrow.angle)}调整`);
-    }
-    audioManager.play(key, false);
-  } else if (msg.type === MESSAGETYPESV2.HalfRest) {
-    halfTime.value = true;
-    audioManager.play("中场休息");
-  } else if (msg.type === MESSAGETYPESV2.InvalidShot) {
-    uni.showToast({
-      title: "距离不足，无效",
-      icon: "none",
-    });
-    audioManager.play("射击无效");
-  }
-}
-
-const playSound = (key) => {
-  audioManager.play(key);
-};
-
-onMounted(() => {
-  uni.$on("update-remain", resetTimer);
-  uni.$on("socket-inbox", onReceiveMessage);
-  uni.$on("play-sound", playSound);
-});
-
-onBeforeUnmount(() => {
-  uni.$off("update-remain", resetTimer);
-  uni.$off("socket-inbox", onReceiveMessage);
-  uni.$off("play-sound", playSound);
-  if (timer.value) clearInterval(timer.value);
-});
-</script>
-
-<template>
-  <view v-if="show" class="progress-card">
-    <view class="progress-card__header">
-      <view class="progress-card__profile">
-        <view class="progress-card__avatar-shell">
-          <Avatar
-            :src="avatarSrc"
-            :size="80"
-            size-unit="rpx"
-            image-mode="aspectFill"
-          />
-        </view>
-        <text class="progress-card__name">{{ displayName }}</text>
-      </view>
-
-      <!-- <button class="progress-card__sound" hover-class="none" @click="updateSound">
-        <image
-          class="progress-card__sound-icon"
-          :src="`/static/sound${sound ? '' : '-off'}-yellow.png`"
-          mode="aspectFit"
-        />
-      </button> -->
-    </view>
-
-    <view class="progress-card__track-wrap">
-      <image
-          class="progress-card__titile"
-          src="../../../static/training-difficulty-design/text-icon-cgxl.png"
-          mode="aspectFit"
-        />
-      <view class="progress-card__track">
-        <view
-          class="progress-card__fill"
-          :style="{
-            width: `${progressPercent}%`,
-            backgroundColor: barColor,
-            right: tips.includes('红队') ? 0 : 'unset',
-            transition: transitionStyle,
-          }"
-        />
-        <view class="progress-card__badge">
-          <text class="progress-card__badge-text">剩余{{ remain }}秒</text>
-        </view>
-      </view>
-      <!-- <text v-if="tipContent" class="progress-card__tip">{{ tipContent }}123</text> -->
-    </view>
-  </view>
-</template>
-
-<style scoped>
-.progress-card {
-  box-sizing: border-box;
-  /* padding: 50rpx 30rpx 0 30rpx; */
-  margin: 70rpx 30rpx 0 30rpx;
-}
-
-.progress-card__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.progress-card__profile {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.progress-card__avatar-shell {
-  width: 86rpx;
-  height: 86rpx;
-  padding: 3rpx;
-  box-sizing: border-box;
-  border-radius: 50%;
-  background: linear-gradient(180deg, rgba(255, 209, 153, 1), rgba(162, 119, 55, 1));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.progress-card__avatar {
-  width: 100%;
-  height: 100%;
-  display: block;
-  border-radius: 50%; 
-}
-
-.progress-card__name {
-  width: 86rpx;
-  color: #E7BA80;
-  font-size: 18rpx;
-  line-height: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: center;
-  margin-top: 10rpx;
-}
-
-.progress-card__sound {
-  width: 68rpx;
-  height: 68rpx;
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(28, 24, 21, 0.72);
-  box-shadow: 0 8rpx 18rpx rgba(0, 0, 0, 0.18);
-}
-
-.progress-card__sound::after {
-  border: none;
-}
-
-.progress-card__sound-icon {
-  width: 34rpx;
-  height: 34rpx;
-}
-
-.progress-card__track-wrap {
-  margin-top: -156rpx;
-  padding-left: 102rpx;
-}
-
-.progress-card__titile{
-  width: 260rpx;
-  height: 72rpx;
-  margin-left: 110rpx;
-}
-
-.progress-card__track {
-  position: relative;
-  width: 100%;
-  height: 24rpx;
-  border-radius: 18rpx;
-  overflow: hidden;
-  background: #444444;
-}
-
-.progress-card__fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  border-radius: 18rpx;
-  background: linear-gradient( 133deg, #FFD19A 0%, #A17636 100%);
-}
-
-.progress-card__badge {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  min-width: 156rpx;
-  height: 40rpx;
-  padding: 0 24rpx;
-  box-sizing: border-box;
-  border-radius: 999rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* background: rgba(164, 117, 47, 0.94); */
-  /* box-shadow: 0 4rpx 10rpx rgba(76, 45, 7, 0.22); */
-}
-
-.progress-card__badge-text {
-  color: #fff7de;
-  font-size: 18rpx;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.progress-card__tip {
-  display: block;
-  margin-top: 16rpx;
-  color: rgba(255, 243, 216, 0.88);
-  font-size: 24rpx;
-  line-height: 1.4;
-  text-align: center;
-}
-</style>

src/pages/training/components/TestDistance.vue

@@ -1,196 +0,0 @@
-<script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import Guide from "@/components/Guide.vue";
-import BowPower from "@/components/BowPower.vue";
-import Avatar from "@/components/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">
-    <view class="test-area">
-      <image
-        class="text-bg"
-        src="../../../static/training-difficulty-design/par-bg.png"
-        mode="widthFix"
-      />
-      <button
-        class="simul"
-        @click="simulShoot"
-        hover-class="none"
-        v-if="showsimul"
-      >
-        模拟射箭
-      </button>
-      <view class="warnning-text">
-        <view class="target-tip">当前靶子为<text class="text-yellow">20cm</text>全环靶,请更换靶子</view>
-        <block v-if="distance > 0">
-          <text>当前距离<text class="text-yellow">{{ distance }}</text>米</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 {
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.text-bg {
-  width: 100%;
-  position: relative;
-}
-.warnning-text {
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  height: 200rpx;
-  position: absolute;
-  top: 142rpx;
-  left: 0;
-  width: 100%;
-  font-size: 36rpx;
-  text-align: center;
-}
-.target-tip{
-  margin-bottom: 28rpx;
-}
-.text-yellow{
-  color: #FED847;
-}
-.simul {
-  position: absolute;
-  color: #fff;
-  right: 10px;
-  top: 30rpx;
-}
-.user-row{
-  position: absolute;
-  bottom: 34rpx;
-  left: 0rpx;
-  width: 100%;
-  padding: 0 34rpx;
-  box-sizing: border-box;
-}
-
-
-</style>

src/pages/training/components/TrainingDifficultyBadge.vue

@@ -1,327 +0,0 @@
-<script setup>
-import { computed } from "vue";
-
-const lockedBadgeBackground =
-  "/static/training-difficulty-design/unlock.svg";
-const unlockedBadgeBackground =
-  "/static/training-difficulty-design/lock.svg";
-
-const props = defineProps({
-  node: {
-    type: Object,
-    required: true,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  completedProgress: {
-    type: Number,
-    default: 0,
-  },
-  locked: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(["click"]);
-
-const badgeStyle = computed(() => {
-  const { left, top } = props.node.style || {};
-
-  return {
-    left,
-    top,
-  };
-});
-
-const progressValue = computed(() => {
-  const value = Number(props.completedProgress);
-
-  if (!Number.isFinite(value)) return 0;
-
-  return Math.max(0, Math.min(100, value));
-});
-
-const badgeStateStyle = computed(() => {
-  const label = String(props.node?.label || "");
-  const estimatedLabelWidthRpx = Math.max(36, label.length * 14);
-  const labelCircleSizeRpx = Math.max(58, estimatedLabelWidthRpx + 18);
-  const badgeSizeRpx = Math.max(
-    124,
-    Math.round(labelCircleSizeRpx / 0.4727)
-  );
-
-  return {
-    "--badge-progress": progressValue.value,
-    "--badge-size": `${badgeSizeRpx}rpx`,
-    "--badge-label-size": `${labelCircleSizeRpx}rpx`,
-    "--badge-orbit-offset": "12rpx",
-    "--badge-locked-ring-offset": "12rpx",
-  };
-});
-
-const showProgress = computed(() => {
-  return !props.locked;
-});
-
-const badgeFillSrc = computed(() => {
-  return props.locked ? lockedBadgeBackground : unlockedBadgeBackground;
-});
-
-const handleClick = () => {
-  emit("click", props.node);
-};
-</script>
-
-<template>
-  <view
-    class="difficulty-badge"
-    :class="{
-      'difficulty-badge--active': active,
-      'difficulty-badge--progress': showProgress,
-      'difficulty-badge--locked': locked,
-    }"
-    :style="[badgeStyle, badgeStateStyle]"
-    @click="handleClick"
-  >
-    <view class="difficulty-badge__fill">
-      <image class="difficulty-badge__bg" :src="badgeFillSrc" mode="aspectFit" />
-      <view v-if="active" class="difficulty-badge__active-orbit">
-        <view
-          class="difficulty-badge__active-triangle difficulty-badge__active-triangle--top"
-        ></view>
-        <view
-          class="difficulty-badge__active-triangle difficulty-badge__active-triangle--right"
-        ></view>
-        <view
-          class="difficulty-badge__active-triangle difficulty-badge__active-triangle--bottom"
-        ></view>
-        <view
-          class="difficulty-badge__active-triangle difficulty-badge__active-triangle--left"
-        ></view>
-      </view>
-      <view class="difficulty-badge__label-wrap">
-        <view class="difficulty-badge__label">{{ node.label }}</view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style scoped>
-.difficulty-badge,
-.difficulty-badge__fill,
-.difficulty-badge__label-wrap {
-  box-sizing: border-box;
-}
-
-.difficulty-badge {
-  position: absolute;
-  transform: translate(-50%, -50%);
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease, opacity 0.2s ease;
-}
-
-.difficulty-badge--active {
-  transform: translate(-50%, -50%) scale(1.04);
-}
-
-.difficulty-badge--active::before {
-  content: "";
-  position: absolute;
-  inset: calc(var(--badge-orbit-offset) * -1);
-  border: 4rpx solid transparent;
-  border-radius: 50%;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
-.difficulty-badge--active::after {
-  content: "";
-  position: absolute;
-  inset: -24rpx;
-  border: 4rpx solid rgba(254, 208, 152, 0.96);
-  border-radius: 50%;
-  box-shadow: inset 0 0 10rpx rgba(254, 208, 152, 0.88),
-    inset 0 0 22rpx rgba(254, 208, 152, 0.32),
-    0 0 14rpx rgba(254, 208, 152, 0.92),
-    0 0 32rpx rgba(254, 208, 152, 0.52),
-    0 0 52rpx rgba(254, 208, 152, 0.22);
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
-.difficulty-badge__active-orbit {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: calc(100% + var(--badge-orbit-offset) * 2);
-  height: calc(100% + var(--badge-orbit-offset) * 2);
-  border-radius: 50%;
-  z-index: 3;
-  pointer-events: none;
-  transform: translate(-50%, -50%);
-  animation: badge-orbit-spin 5.4s linear infinite;
-  transform-origin: center;
-}
-
-.difficulty-badge__active-triangle {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  z-index: 2;
-  pointer-events: none;
-  opacity: 0.92;
-  filter: drop-shadow(0 0 8rpx rgba(255, 255, 255, 0.45));
-}
-
-.difficulty-badge__active-triangle--top {
-  top: -3rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 11rpx 8rpx 0 8rpx;
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.difficulty-badge__active-triangle--right {
-  right: -3rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  border-width: 8rpx 11rpx 8rpx 0;
-  border-color: transparent #ffffff transparent transparent;
-}
-
-.difficulty-badge__active-triangle--bottom {
-  bottom: -3rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 0 8rpx 11rpx 8rpx;
-  border-color: transparent transparent #ffffff transparent;
-}
-
-.difficulty-badge__active-triangle--left {
-  left: -3rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  border-width: 8rpx 0 8rpx 11rpx;
-  border-color: transparent transparent transparent #ffffff;
-}
-
-.difficulty-badge__fill {
-  width: var(--badge-size);
-  height: var(--badge-size);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-}
-
-.difficulty-badge__bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-  z-index: 1;
-}
-
-.difficulty-badge--active .difficulty-badge__fill::before,
-.difficulty-badge--active .difficulty-badge__fill::after {
-  content: none;
-}
-
-.difficulty-badge--progress .difficulty-badge__fill::before,
-.difficulty-badge--progress .difficulty-badge__fill::after {
-  content: "";
-  position: absolute;
-  inset: -12rpx;
-  padding: 6rpx;
-  border-radius: inherit;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  pointer-events: none;
-}
-
-.difficulty-badge--progress .difficulty-badge__fill::before {
-  background: rgba(255, 255, 255, 0.35);
-}
-
-.difficulty-badge--progress .difficulty-badge__fill::after {
-  background: conic-gradient(
-    from -90deg,
-    rgba(254, 208, 152, 1) 0,
-    rgba(255, 229, 198, 1) calc(var(--badge-progress) * 1%),
-    transparent calc(var(--badge-progress) * 1%) 100%
-  );
-}
-
-.difficulty-badge--active .difficulty-badge__label,
-.difficulty-badge--progress .difficulty-badge__label {
-  color: #333333;
-}
-
-.difficulty-badge--locked {
-  opacity: 1;
-}
-
-.difficulty-badge--locked::before {
-  content: "";
-  position: absolute;
-  inset: calc(var(--badge-locked-ring-offset) * -1);
-  border: 2rpx solid rgba(160, 160, 160, 0.5);
-  border-radius: 50%;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
-.difficulty-badge--locked .difficulty-badge__label {
-  color: rgba(51, 51, 51, 0.54);
-}
-
-.difficulty-badge__label-wrap {
-  width: var(--badge-label-size);
-  height: var(--badge-label-size);
-  border-radius: 50%;
-  position: relative;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: -5rpx;
-}
-
-.difficulty-badge__label {
-  color: rgba(51, 51, 51, 0.7);
-  font-size: 24rpx;
-  max-width: 100%;
-  height: 34rpx;
-  line-height: 34rpx;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 600;
-  text-align: center;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-@keyframes badge-orbit-spin {
-  from {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-
-  to {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-</style>

src/pages/training/components/TrainingDifficultyPreviewCard.vue

@@ -1,86 +0,0 @@
-<script setup>
-import { computed } from "vue";
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: "",
-  },
-  lines: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const previewLines = computed(() => {
-  return props.lines.map((line) => String(line || "").trim()).filter(Boolean);
-});
-</script>
-
-<template>
-  <view class="difficulty-preview">
-    <image
-      class="difficulty-preview__bg"
-      src="/static/training-difficulty-design/text.png"
-      mode="widthFix"
-    />
-    <view class="difficulty-preview__content">
-      <text class="difficulty-preview__title">{{ title }}</text>
-      <view class="difficulty-preview__copy">
-        <text
-          v-for="(line, index) in previewLines"
-          :key="`${line}-${index}`"
-          class="difficulty-preview__line"
-        >
-          {{ line }}
-        </text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style scoped>
-.difficulty-preview {
-  position: relative;
-  width: 100%;
-}
-
-.difficulty-preview__bg {
-  display: block;
-  width: 100%;
-}
-
-.difficulty-preview__content {
-  position: absolute;
-  top: 28rpx;
-  left: 30rpx;
-  box-sizing: border-box;
-  width: 486rpx;
-}
-
-.difficulty-preview__title {
-  display: block;
-  color: #ffd543;
-  font-size: 24rpx;
-  line-height: 34rpx;
-  font-family: "PingFang SC", sans-serif;
-  text-align: center;
-}
-
-.difficulty-preview__copy {
-  width: 80%;
-  margin: 0 auto;
-  display: block;
-  color: #ffffff;
-  font-size: 24rpx;
-  line-height: 34rpx;
-  font-family: "PingFang SC", sans-serif;
-  text-align: center;
-}
-
-.difficulty-preview__line {
-  display: block;
-}
-
-
-</style>

src/pages/training/components/TrainingDifficultyStartButton.vue

@@ -1,81 +0,0 @@
-<script setup>
-const props = defineProps({
-  text: {
-    type: String,
-    default: "开始",
-  },
-});
-
-const emit = defineEmits(["click"]);
-
-const handleClick = () => {
-  emit("click");
-};
-</script>
-
-<template>
-  <button
-    class="difficulty-start"
-    hover-class="difficulty-start--hover"
-    @click="handleClick"
-  >
-    <image
-      class="difficulty-start__button"
-      src="/static/training-difficulty-design/btn.png"
-      mode="widthFix"
-    />
-  </button>
-</template>
-
-<style scoped>
-.difficulty-start {
-  position: relative;
-  width: 302rpx;
-  height: 170rpx;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  margin: 0 auto;
-}
-
-.difficulty-start::after {
-  border: 0;
-}
-
-.difficulty-start--hover {
-  transform: translateY(2rpx) scale(0.99);
-}
-
-.difficulty-start__mascot {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  z-index: 1;
-  width: 112rpx;
-  transform: translateX(-50%);
-}
-
-.difficulty-start__button {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 2;
-  width: 100%;
-}
-
-.difficulty-start__text {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 58rpx;
-  z-index: 3;
-  color: #9f4d00;
-  font-size: 64rpx;
-  line-height: 76rpx;
-  text-align: center;
-  font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
-  font-weight: 800;
-  text-shadow: 0 3rpx 0 rgba(255, 245, 205, 0.78);
-}
-</style>

src/pages/training/difficulty.vue

@@ -1,801 +0,0 @@
-<script setup>
-import { computed, nextTick, ref } from "vue";
-import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
-import Container from "@/components/Container.vue";
-import TrainingDifficultyBadge from "./components/TrainingDifficultyBadge.vue";
-import TrainingDifficultyPreviewCard from "./components/TrainingDifficultyPreviewCard.vue";
-import TrainingDifficultyStartButton from "./components/TrainingDifficultyStartButton.vue";
-import { getTrainingDifficultyListAPI } from "@/apis";
-
-// 难度页接口数据源：
-// 1. 接口：GET /training/difficulty/list?type=base/endurance/precision/rhythm
-// 2. 当前进度：接口 user_levels / list.completed，路由参数可覆盖选中难度
-const trainingDifficultyStorageKey = "training-selection";
-const trainingDifficultyRefreshEvent = "training-difficulty-refresh";
-const defaultTrainingType = "precision";
-const defaultUnlockedDifficultyId = "lv1";
-const trainingTypeMetaMap = {
-  base: {
-    key: "base",
-    title: "基础训练",
-  },
-  endurance: {
-    key: "endurance",
-    title: "耐力训练",
-  },
-  precision: {
-    key: "precision",
-    title: "精准训练",
-  },
-  rhythm: {
-    key: "rhythm",
-    title: "节奏训练",
-  },
-};
-const routeModeTypeMap = {
-  basic: "base",
-  base: "base",
-  endurance: "endurance",
-  precision: "precision",
-  rhythm: "rhythm",
-};
-const defaultTargetType = 1;
-
-const resolveTrainingType = (mode) => {
-  const normalizedMode = String(mode || "").toLowerCase();
-  return routeModeTypeMap[normalizedMode] || defaultTrainingType;
-};
-
-const createDifficultyId = (level) => `lv${level}`;
-
-const toNumber = (value, fallback = 0) => {
-  const numberValue = Number(value);
-  return Number.isFinite(numberValue) ? numberValue : fallback;
-};
-
-const clampProgress = (value) => {
-  return Math.min(Math.max(value, 0), 100);
-};
-
-const getDifficultyProgress = (item = {}) => {
-  const completedCnt = toNumber(item.completed_cnt);
-  const promoteCnt = toNumber(item.promote_cnt);
-
-  if (item.completed) {
-    return 100;
-  }
-
-  if (promoteCnt <= 0) {
-    return 0;
-  }
-
-  return clampProgress(Math.round((completedCnt / promoteCnt) * 100));
-};
-
-const checkDifficultyCompleted = (item = {}) => {
-  const completedCnt = toNumber(item.completed_cnt);
-  const promoteCnt = toNumber(item.promote_cnt);
-
-  return Boolean(item.completed) || (promoteCnt > 0 && completedCnt >= promoteCnt);
-};
-
-const getDifficultyModeText = (mode) => {
-  return Number(mode) === 1 ? "随机区域+指定环数" : "随机区域命中";
-};
-
-const createEmptyModeConfig = (type = defaultTrainingType) => {
-  const meta = trainingTypeMetaMap[type] || trainingTypeMetaMap[defaultTrainingType];
-
-  return {
-    key: meta.key,
-    title: meta.title,
-    nodes: [],
-    details: {},
-    activeDifficultyId: defaultUnlockedDifficultyId,
-    progressMap: {},
-  };
-};
-
-const createDifficultySummary = (item = {}) => {
-  const desc = String(item.desc || "").trim();
-  const type = item.type;
-  const arrows = toNumber(item.arrows);
-  const timeLimit = toNumber(item.time_limit);
-  const hitReq = toNumber(item.hit_req);
-  const totalReq = toNumber(item.total_req);
-  const blocks = toNumber(item.blocks);
-  const promoteCnt = toNumber(item.promote_cnt);
-  const timeText = timeLimit > 0 ? `${timeLimit}秒内完成` : "不限时完成";
-  const promoteText = promoteCnt > 0 ? `完成${promoteCnt}次晋级` : "";
-
-  const summaryMap = {
-    base: [
-      desc || (hitReq > 0 ? `每箭命中${hitReq}环以上` : "上靶即可"),
-      [`${arrows}箭`, promoteText].filter(Boolean).join(" · "),
-    ],
-    endurance: [
-      desc || `${timeText}${arrows}箭`,
-      [`累计${totalReq}环`, promoteText].filter(Boolean).join(" · "),
-    ],
-    precision: [
-      desc || `命中${blocks}个指定区域`,
-      [
-        `${arrows}箭`,
-        timeText,
-        getDifficultyModeText(item.mode),
-        promoteText,
-      ]
-        .filter(Boolean)
-        .join(" · "),
-    ],
-    rhythm: [
-      desc || `间隔${timeLimit}秒射击`,
-      [
-        `${arrows}箭`,
-        hitReq > 0 ? `每箭${hitReq}环以上` : "上靶即可",
-        getDifficultyModeText(item.mode),
-        promoteText,
-      ]
-        .filter(Boolean)
-        .join(" · "),
-    ],
-  };
-
-  return (summaryMap[type] || [desc]).filter(Boolean);
-};
-
-const normalizeTrainingDifficultyConfig = (result, type) => {
-  const meta = trainingTypeMetaMap[type] || trainingTypeMetaMap[defaultTrainingType];
-  const list = Array.isArray(result?.list) ? result.list : [];
-  const rawItems = list.filter((item) => !item?.type || item.type === meta.key);
-  const difficultyItems = rawItems
-    .map((item) => {
-      const level = toNumber(item?.difficulty);
-
-      if (level <= 0) {
-        return null;
-      }
-
-      const id = createDifficultyId(level);
-      const label = `Lv${level}`;
-
-      return {
-        ...item,
-        recordId: item.id,
-        completedCnt: toNumber(item.completed_cnt),
-        promoteCnt: toNumber(item.promote_cnt),
-        id,
-        level,
-        label,
-        title: `${label}难度`,
-        summary: createDifficultySummary(item),
-        startText: "开始",
-        targetPaperType: "20CM全环靶",
-      };
-    })
-    .filter(Boolean)
-    .sort((first, second) => first.level - second.level);
-  const maxLevel = difficultyItems.reduce(
-    (currentMax, item) => Math.max(currentMax, item.level),
-    0
-  );
-  const completedLevelFromList = difficultyItems.reduce((currentMax, item) => {
-    return checkDifficultyCompleted(item)
-      ? Math.max(currentMax, item.level)
-      : currentMax;
-  }, 0);
-  const userCompletedLevel = toNumber(result?.user_levels?.[meta.key]);
-  const highestCompletedLevel = userCompletedLevel || completedLevelFromList;
-  const unlockedLevel = maxLevel
-    ? Math.min(Math.max(highestCompletedLevel + 1, 1), maxLevel)
-    : 1;
-
-  return {
-    key: meta.key,
-    title: meta.title,
-    nodes: difficultyItems.map((item) => ({
-      id: item.id,
-      label: item.label,
-    })),
-    details: Object.fromEntries(
-      difficultyItems.map((item) => [item.id, item])
-    ),
-    activeDifficultyId: createDifficultyId(unlockedLevel),
-    progressMap: Object.fromEntries(
-      difficultyItems.map((item) => [item.id, getDifficultyProgress(item)])
-    ),
-  };
-};
-
-// 难度轴布局参数，节点按“等级越低越靠下”的方式排列。
-const nodesLayout = {
-  viewportHeightRpx: 1020,
-  topPaddingRpx: 136,
-  bottomPaddingRpx: 144,
-  verticalGapRpx: 188,
-  anchorOffsetRpx: 796,
-  horizontalPatternRpx: [388, 232, 516, 258, 458, 304],
-  nearHorizontalDistanceRpx: 170,
-  extraGapScale: 0.5,
-};
-
-const emptyDifficulty = {
-  id: "",
-  label: "",
-  title: "",
-  summary: [],
-  startText: "开始",
-  targetPaperType: "",
-};
-
-// 页面基础状态
-const pageConfig = ref(createEmptyModeConfig(defaultTrainingType));
-const unlockedDifficultyId = ref(defaultUnlockedDifficultyId);
-const selectedDifficultyId = ref(defaultUnlockedDifficultyId);
-const nodesScrollTop = ref(0);
-const nodesScrollWithAnimation = ref(false);
-const routeOptions = ref({});
-const needRefreshProgress = ref(false);
-
-const difficultyProgressMap = computed(() => {
-  return pageConfig.value?.progressMap || {};
-});
-
-const clamp = (value, min, max) => {
-  return Math.min(Math.max(value, min), max);
-};
-
-// 从 lv1 / lv20 这类 id 中提取等级数值，统一用于排序、解锁判断和进度比较。
-const getDifficultyLevel = (difficultyId = "") => {
-  const matched = String(difficultyId).match(/\d+/);
-  return matched ? Number(matched[0]) : 0;
-};
-
-// 合并节点基础信息和难度详情，并统一按等级升序整理。
-const createDifficultyNodes = (config) => {
-  const details = config?.details || {};
-  const rawNodes = Array.isArray(config?.nodes) ? config.nodes : [];
-  const nodeMap = new Map(rawNodes.map((node) => [node.id, node]));
-  const difficultyIds = new Set([
-    ...rawNodes.map((node) => node.id),
-    ...Object.keys(details),
-  ]);
-
-  return Array.from(difficultyIds)
-    .map((difficultyId) => {
-      const level = getDifficultyLevel(difficultyId);
-      const node = nodeMap.get(difficultyId) || {};
-      const detail = details[difficultyId] || {};
-      const label = node.label || detail.label || `Lv${level || ""}`;
-
-      return {
-        ...node,
-        ...detail,
-        id: difficultyId,
-        level,
-        label,
-        title: detail.title || `${label}难度`,
-        summary: Array.isArray(detail.summary) ? detail.summary : [],
-        startText: detail.startText || "开始",
-        targetPaperType: detail.targetPaperType || "",
-      };
-    })
-    .filter((node) => node.id && node.level > 0)
-    .sort((first, second) => first.level - second.level);
-};
-
-const findValidDifficultyId = (difficultyId, nodes) => {
-  return nodes.some((node) => node.id === difficultyId) ? difficultyId : "";
-};
-
-const getNextDifficultyId = (difficultyId, nodes) => {
-  const currentLevel = getDifficultyLevel(difficultyId);
-  return (
-    nodes.find((node) => node.level === currentLevel + 1)?.id || difficultyId
-  );
-};
-
-// 统一解析当前最新已解锁难度：
-// completedDifficultyId 优先级最高，可在完成当前难度后自动推进到下一关。
-const resolveUnlockedDifficultyId = (options, config, nodes) => {
-  const completedDifficultyId = findValidDifficultyId(
-    options.completedDifficultyId,
-    nodes
-  );
-
-  if (completedDifficultyId) {
-    return getNextDifficultyId(completedDifficultyId, nodes);
-  }
-
-  return (
-    [
-      options.currentDifficultyId,
-      options.latestDifficultyId,
-      options.activeDifficultyId,
-      config.activeDifficultyId,
-      defaultUnlockedDifficultyId,
-    ].find((difficultyId) => findValidDifficultyId(difficultyId, nodes)) ||
-    nodes[0]?.id ||
-    defaultUnlockedDifficultyId
-  );
-};
-
-// 如果传入的默认选中项尚未解锁，则自动回退到当前最新已解锁难度。
-const resolveSelectedDifficultyId = (difficultyId, nodes, currentUnlockedId) => {
-  const safeDifficultyId = findValidDifficultyId(difficultyId, nodes);
-
-  if (!safeDifficultyId) {
-    return currentUnlockedId;
-  }
-
-  return getDifficultyLevel(safeDifficultyId) <=
-    getDifficultyLevel(currentUnlockedId)
-    ? safeDifficultyId
-    : currentUnlockedId;
-};
-
-// 页面渲染使用的难度节点列表，包含纵向轨道坐标。
-const difficultyNodes = computed(() => {
-  const nodes = createDifficultyNodes(pageConfig.value);
-  const leftPositions = nodes.map((_, index) => {
-    return nodesLayout.horizontalPatternRpx[
-      index % nodesLayout.horizontalPatternRpx.length
-    ];
-  });
-  const offsetsFromBottom = [];
-  let accumulatedOffsetRpx = 0;
-
-  nodes.forEach((node, index) => {
-    if (index > 0) {
-      const previousLeftRpx = leftPositions[index - 1];
-      const currentLeftRpx = leftPositions[index];
-      const horizontalDistanceRpx = Math.abs(currentLeftRpx - previousLeftRpx);
-      const extraGapRpx =
-        Math.max(
-          0,
-          nodesLayout.nearHorizontalDistanceRpx - horizontalDistanceRpx
-        ) * nodesLayout.extraGapScale;
-
-      accumulatedOffsetRpx +=
-        nodesLayout.verticalGapRpx + Math.round(extraGapRpx);
-    }
-
-    offsetsFromBottom.push(accumulatedOffsetRpx);
-  });
-
-  const contentHeightRpx = Math.max(
-    nodesLayout.viewportHeightRpx,
-    nodesLayout.topPaddingRpx +
-      nodesLayout.bottomPaddingRpx +
-      (offsetsFromBottom[offsetsFromBottom.length - 1] || 0)
-  );
-
-  return nodes.map((node, index) => {
-    const leftRpx = leftPositions[index];
-    const topRpx =
-      contentHeightRpx -
-      nodesLayout.bottomPaddingRpx -
-      offsetsFromBottom[index];
-
-    return {
-      ...node,
-      leftRpx,
-      topRpx,
-      style: {
-        left: `${leftRpx}rpx`,
-        top: `${topRpx}rpx`,
-      },
-    };
-  });
-});
-
-const difficultyConnectors = computed(() => {
-  const nodes = difficultyNodes.value;
-
-  return nodes.slice(1).map((currentNode, index) => {
-    const previousNode = nodes[index];
-    const startX = Number(previousNode?.leftRpx || 0);
-    const startY = Number(previousNode?.topRpx || 0);
-    const endX = Number(currentNode?.leftRpx || 0);
-    const endY = Number(currentNode?.topRpx || 0);
-    const midX = (startX + endX) / 2;
-    const midY = (startY + endY) / 2;
-    const angle =
-      (Math.atan2(endY - startY, endX - startX) * 180) / Math.PI + 90;
-
-    return {
-      id: `${previousNode.id}-${currentNode.id}`,
-      left: `${midX}rpx`,
-      top: `${midY}rpx`,
-      transform: `translate(-50%, -50%) rotate(${angle}deg)`,
-    };
-  });
-});
-
-const nodesTrackHeightRpx = computed(() => {
-  const bottomNode = difficultyNodes.value[0];
-
-  if (!bottomNode) {
-    return nodesLayout.viewportHeightRpx;
-  }
-
-  return Math.max(
-    nodesLayout.viewportHeightRpx,
-    bottomNode.topRpx + nodesLayout.bottomPaddingRpx
-  );
-});
-
-const nodesTrackStyle = computed(() => {
-  return {
-    height: `${nodesTrackHeightRpx.value}rpx`,
-  };
-});
-
-const selectedDifficulty = computed(() => {
-  return (
-    difficultyNodes.value.find((node) => node.id === selectedDifficultyId.value) ||
-    difficultyNodes.value[0] ||
-    emptyDifficulty
-  );
-});
-
-// 优先显示配置中的难度进度；没有配置时，再按已解锁等级推导完成态。
-const getCompletedDifficultyProgress = (node) => {
-  const configuredProgress = Number(difficultyProgressMap.value[node?.id]);
-
-  if (Number.isFinite(configuredProgress) && configuredProgress > 0) {
-    return configuredProgress;
-  }
-
-  return getDifficultyLevel(node?.id) < getDifficultyLevel(unlockedDifficultyId.value)
-    ? 100
-    : 0;
-};
-
-const checkDifficultyLocked = (node) => {
-  return getDifficultyLevel(node?.id) > getDifficultyLevel(unlockedDifficultyId.value);
-};
-
-// 根据目标难度计算 scroll-view 应滚动到的位置，顶部/底部会自动吸附边界。
-const scrollToDifficulty = (difficultyId, animated = false) => {
-  const node = difficultyNodes.value.find((item) => item.id === difficultyId);
-
-  if (!node) {
-    return;
-  }
-
-  const maxScrollRpx = Math.max(
-    nodesTrackHeightRpx.value - nodesLayout.viewportHeightRpx,
-    0
-  );
-  const targetScrollRpx = clamp(
-    node.topRpx - nodesLayout.anchorOffsetRpx,
-    0,
-    maxScrollRpx
-  );
-
-  nodesScrollWithAnimation.value = animated;
-  nodesScrollTop.value = uni.upx2px(targetScrollRpx);
-};
-
-// 首次进入页面需要静默定位到默认难度；
-// 定位完成后再开启滚动动画，避免第一次手动切换时丢失过渡效果。
-const initScrollPosition = () => {
-  scrollToDifficulty(selectedDifficultyId.value, false);
-
-  nextTick(() => {
-    nodesScrollWithAnimation.value = true;
-  });
-};
-
-const normalizeRouteOptions = (options = {}) => {
-  const difficultyLevel = toNumber(options.difficulty);
-  const completedDifficultyLevel = toNumber(options.completedDifficulty);
-
-  return {
-    ...options,
-    difficultyId:
-      options.difficultyId ||
-      (difficultyLevel > 0 ? createDifficultyId(difficultyLevel) : ""),
-    completedDifficultyId:
-      options.completedDifficultyId ||
-      (completedDifficultyLevel > 0
-        ? createDifficultyId(completedDifficultyLevel)
-        : ""),
-  };
-};
-
-const applyPageState = (options = {}, config) => {
-  const safeOptions = normalizeRouteOptions(options);
-  const nodes = createDifficultyNodes(config);
-  const currentUnlockedId = resolveUnlockedDifficultyId(
-    safeOptions,
-    config,
-    nodes
-  );
-
-  pageConfig.value = config;
-  unlockedDifficultyId.value = currentUnlockedId;
-  selectedDifficultyId.value = resolveSelectedDifficultyId(
-    safeOptions.difficultyId,
-    nodes,
-    currentUnlockedId
-  );
-
-  nextTick(() => {
-    initScrollPosition();
-  });
-};
-
-const initPageState = async (options = {}, refreshOptions = {}) => {
-  const { keepCurrent = false } = refreshOptions;
-  const trainingType = resolveTrainingType(options.mode);
-  const fallbackConfig = createEmptyModeConfig(trainingType);
-
-  if (!keepCurrent) {
-    pageConfig.value = fallbackConfig;
-  }
-
-  try {
-    const result = await getTrainingDifficultyListAPI(trainingType);
-    applyPageState(
-      options,
-      normalizeTrainingDifficultyConfig(result, trainingType)
-    );
-  } catch (error) {
-    console.log("training difficulty load failed", error);
-    if (!keepCurrent) {
-      applyPageState(options, fallbackConfig);
-    }
-    uni.showToast({
-      title: "训练难度加载失败",
-      icon: "none",
-    });
-  }
-};
-
-const cleanQueryValue = (value) => {
-  if (value === undefined || value === null || value === "") {
-    return "";
-  }
-
-  if (typeof value === "number" && !Number.isFinite(value)) {
-    return "";
-  }
-
-  return value;
-};
-
-const createPracticeQuery = (difficulty) => {
-  const trainingType = pageConfig.value.key || defaultTrainingType;
-  const commonQuery = {
-    type: trainingType,
-    difficultyId: difficulty.id,
-    difficulty: difficulty.level,
-    recordId: difficulty.recordId,
-    arrows: toNumber(difficulty.arrows, 12),
-    time: toNumber(difficulty.time_limit, 120) || 120,
-    target: defaultTargetType,
-  };
-  const typedQueryMap = {
-    base: {
-      hitReq: toNumber(difficulty.hit_req),
-    },
-    endurance: {
-      totalReq: toNumber(difficulty.total_req),
-    },
-    precision: {
-      blocks: toNumber(difficulty.blocks),
-      mode: toNumber(difficulty.mode),
-    },
-    rhythm: {
-      hitReq: toNumber(difficulty.hit_req),
-      mode: toNumber(difficulty.mode),
-    },
-  };
-
-  return {
-    ...commonQuery,
-    ...(typedQueryMap[trainingType] || {}),
-  };
-};
-
-const createPracticeUrl = (difficulty) => {
-  const query = Object.entries(createPracticeQuery(difficulty))
-    .map(([key, value]) => [key, cleanQueryValue(value)])
-    .filter(([, value]) => value !== "")
-    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
-    .join("&");
-
-  return `/pages/training/practise-one${query ? `?${query}` : ""}`;
-};
-
-const saveTrainingContext = () => {
-  const difficulty = selectedDifficulty.value;
-
-  if (!difficulty.id) {
-    return;
-  }
-
-  uni.setStorageSync(trainingDifficultyStorageKey, {
-    trainingType: pageConfig.value.key,
-    trainingTitle: pageConfig.value.title,
-    difficultyId: difficulty.id,
-    difficultyLabel: difficulty.label,
-    targetType: defaultTargetType,
-    targetPaperType: difficulty.targetPaperType,
-  });
-};
-
-const handleSelectDifficulty = (node) => {
-  if (!node?.id) {
-    return;
-  }
-
-  if (checkDifficultyLocked(node)) {
-    uni.showToast({
-      title: "难度尚未解锁",
-      icon: "none",
-    });
-    return;
-  }
-
-  if (node.id === selectedDifficultyId.value) {
-    return;
-  }
-
-  selectedDifficultyId.value = node.id;
-  nextTick(() => {
-    scrollToDifficulty(node.id, true);
-  });
-};
-
-const handleStart = () => {
-  if (!selectedDifficulty.value.id) {
-    return;
-  }
-
-  saveTrainingContext();
-  uni.navigateTo({
-    url: createPracticeUrl(selectedDifficulty.value),
-  });
-};
-
-const markProgressRefresh = () => {
-  needRefreshProgress.value = true;
-};
-
-onLoad((options = {}) => {
-  routeOptions.value = { ...options };
-  uni.$on(trainingDifficultyRefreshEvent, markProgressRefresh);
-  initPageState(options);
-});
-
-onShow(() => {
-  if (!needRefreshProgress.value) {
-    return;
-  }
-
-  needRefreshProgress.value = false;
-  initPageState(routeOptions.value, {
-    keepCurrent: true,
-  });
-});
-
-onUnload(() => {
-  uni.$off(trainingDifficultyRefreshEvent, markProgressRefresh);
-});
-</script>
-
-<template>
-  <Container
-    :title="pageConfig.title"
-    :bgType="8"
-    bgColor="#1c1c23"
-    :scroll="false"
-  >
-    <view class="difficulty-page">
-      <view class="difficulty-page__nodes">
-        <scroll-view
-          class="difficulty-page__nodes-scroll"
-          scroll-y
-          enhanced
-          :scroll-top="nodesScrollTop"
-          :scroll-with-animation="nodesScrollWithAnimation"
-          :show-scrollbar="false"
-        >
-          <view class="difficulty-page__nodes-track" :style="nodesTrackStyle">
-            <image
-              v-for="connector in difficultyConnectors"
-              :key="connector.id"
-              class="difficulty-page__connector"
-              src="../../static/training-difficulty-design/jiantou.png"
-              mode="aspectFit"
-              :style="connector"
-            />
-            <TrainingDifficultyBadge
-              v-for="node in difficultyNodes"
-              :key="node.id"
-              :node="node"
-              :active="node.id === selectedDifficultyId"
-              :locked="checkDifficultyLocked(node)"
-              :completedProgress="getCompletedDifficultyProgress(node)"
-              @click="handleSelectDifficulty"
-            />
-          </view>
-        </scroll-view>
-      </view>
-
-      <view class="difficulty-page__preview">
-        <TrainingDifficultyPreviewCard
-          :title="selectedDifficulty.title"
-          :lines="selectedDifficulty.summary"
-        />
-      </view>
-
-      <view class="difficulty-page__start">
-        <TrainingDifficultyStartButton
-          :text="selectedDifficulty.startText"
-          @click="handleStart"
-        />
-      </view>
-    </view>
-  </Container>
-</template>
-
-<style scoped>
-.difficulty-page {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: 18rpx 0 40rpx;
-  overflow: hidden;
-}
-
-.difficulty-page__nodes {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  z-index: 2;
-  margin-bottom: 8rpx;
-}
-
-.difficulty-page__nodes-scroll {
-  width: 100%;
-  height: 100%;
-}
-
-.difficulty-page__nodes-track {
-  position: relative;
-  width: 100%;
-  min-height: 100%;
-}
-
-.difficulty-page__connector {
-  position: absolute;
-  width: 18rpx;
-  height: 28rpx;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.difficulty-page__preview {
-  position: relative;
-  flex: none;
-  z-index: 3;
-  width: 540rpx;
-  height: 172rpx;
-  margin: 0 auto;
-}
-
-.difficulty-page__start {
-  position: relative;
-  flex: none;
-  z-index: 4;
-  width: 302rpx;
-  height: 190rpx;
-  margin: 0 auto;
-  top: -16rpx;
-}
-</style>

src/pages/training/index.vue

@@ -1,885 +0,0 @@
-<script setup>
-import { nextTick, onMounted, ref } from "vue";
-import { onShow } from "@dcloudio/uni-app";
-import Container from "@/components/Container.vue";
-import TargetPicker from "@/components/TargetPicker.vue";
-import { getPersonalTrainingAPI } from "@/apis";
-
-const checkedIcon = "../../static/training-home/done.png";
-const missedIcon = "../../static/training-home/missed.png";
-// 后端训练项目 id 与难度页 mode 参数的映射关系。
-const trainingModeRouteMap = {
-  base: "basic",
-  endurance: "endurance",
-  precision: "precision",
-  rhythm: "rhythm",
-  strength: "power",
-};
-// 训练项目卡片右侧主图标。
-const trainingModeIconMap = {
-  base_bow: "../../static/training-home/img_22.png",
-  bow: "../../static/training-home/img_3.png",
-  target: "../../static/training-home/img_4.png",
-  wave: "../../static/training-home/img_5.png",
-  muscle: "../../static/training-home/img_6.png",
-};
-// 训练项目卡片标题图，按接口 id 映射本地资源。
-const trainingModeTitleImageMap = {
-  endurance: "../../static/training-home/nailixunlian.png",
-  precision: "../../static/training-home/jingzhunxunlian.png",
-  rhythm: "../../static/training-home/jiezouxunlian.png",
-  strength: "../../static/training-home/liliangxulian.png",
-};
-const defaultWeekDays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
-const defaultRadarDimensions = [
-  { name: "基础", score: 0 },
-  { name: "精准", score: 0 },
-  { name: "力量", score: 0 },
-  { name: "节奏", score: 0 },
-  { name: "耐力", score: 0 },
-];
-
-// 页面始终直接消费接口字段，这里只保留一份兜底结构，避免模板访问空值。
-const createDefaultTrainingData = () => ({
-  week_days: defaultWeekDays.map((day) => ({ day, status: "cross" })),
-  stats: {
-    total_training_days: 0,
-    total_arrows: 0,
-    hit_rate: 0,
-    endurance_shoot_speed: 0,
-    total_calories: 0,
-    overtake_rate: 0,
-  },
-  radar: {
-    dimensions: defaultRadarDimensions,
-  },
-  training_items: [],
-});
-
-const trainingData = ref(createDefaultTrainingData());
-const pageMounted = ref(false);
-const showRoutineTargetPicker = ref(false);
-const trainingRadarCanvasId = "training-home-radar";
-const radarImageWidth = 225;
-const radarImageHeight = 224;
-const radarFigureWidthRpx = 448;
-const radarFigureHeightRpx = Math.round(
-  (radarFigureWidthRpx * radarImageHeight) / radarImageWidth
-);
-const radarCanvasWidth = Math.round(uni.upx2px(radarFigureWidthRpx));
-const radarCanvasHeight = Math.round(uni.upx2px(radarFigureHeightRpx));
-const radarScaleX = radarCanvasWidth / radarImageWidth;
-const radarScaleY = radarCanvasHeight / radarImageHeight;
-const radarScale = Math.min(radarScaleX, radarScaleY);
-const radarCenterX = 112.0624 * radarScaleX;
-const radarCenterY = 111.4645 * radarScaleY;
-const radarStrokeWidth = Math.max(1, 2 * radarScale);
-const radarPointRadius = Math.max(2.5, 3.5 * radarScale);
-const radarOuterRadiusX = 110.7089 * radarScaleX;
-const radarOuterRadiusY = 110.7089 * radarScaleY;
-const radarMaxValue = 100;
-const radarFigureStyle = {
-  width: `${radarFigureWidthRpx}rpx`,
-  height: `${radarFigureHeightRpx}rpx`,
-};
-
-const formatValue = (value, digits = 1) => {
-  const numberValue = Number(value);
-  if (!Number.isFinite(numberValue)) return "--";
-  return String(Number(numberValue.toFixed(digits)));
-};
-
-const getLevelText = (item) => {
-  if (!item) return "";
-  const level = Number(item.current_level) || 0;
-  return item.is_locked ? `Coming! LV${level}` : `当前进度 LV${level} >`;
-};
-
-// 卡路里字段按需求做 K / W 缩写展示。
-const getCaloriesValue = (value) => {
-  const numberValue = Number(value);
-  if (!Number.isFinite(numberValue)) return "--";
-  if (numberValue >= 10000) return `${formatValue(numberValue / 10000)}W`;
-  if (numberValue >= 1000) return `${formatValue(numberValue / 1000)}K`;
-  return formatValue(numberValue, 0);
-};
-
-const getTrainingIcon = (item = {}) =>
-  trainingModeIconMap[item.icon] || trainingModeIconMap.bow;
-
-const getTrainingTitleImage = (item = {}) =>
-  trainingModeTitleImageMap[item.id] || "";
-
-const getTrainingMode = (item = {}) =>
-  trainingModeRouteMap[item.id] || item.id || "";
-
-const getRadarPoint = (centerX, centerY, radiusX, radiusY, angle) => ({
-  x: centerX + radiusX * Math.cos(angle),
-  y: centerY + radiusY * Math.sin(angle),
-});
-
-// 雷达图直接使用接口的 5 维 score，按 0-100 等比映射到顶点位置。
-const drawRadar = () => {
-  const dimensions = Array.isArray(trainingData.value.radar?.dimensions)
-    ? trainingData.value.radar.dimensions.slice(0, 5)
-    : [];
-
-  if (dimensions.length !== 5) return;
-
-  const ctx = uni.createCanvasContext(trainingRadarCanvasId);
-  const angles = dimensions.map(
-    (_, index) => (-90 + index * 72) * (Math.PI / 180)
-  );
-
-  ctx.clearRect(0, 0, radarCanvasWidth, radarCanvasHeight);
-
-  const points = dimensions.map((item, index) => {
-    const normalized = Math.max(
-      0,
-      Math.min(Number(item.score) || 0, radarMaxValue)
-    );
-    const progress = normalized / radarMaxValue;
-
-    return getRadarPoint(
-      radarCenterX,
-      radarCenterY,
-      radarOuterRadiusX * progress,
-      radarOuterRadiusY * progress,
-      angles[index]
-    );
-  });
-
-  ctx.beginPath();
-  points.forEach((point, index) => {
-    if (index === 0) ctx.moveTo(point.x, point.y);
-    else ctx.lineTo(point.x, point.y);
-  });
-  ctx.closePath();
-  ctx.setFillStyle("rgba(255, 209, 154, 0.26)");
-  ctx.fill();
-  ctx.setStrokeStyle("rgba(220, 162, 92, 0.92)");
-  ctx.setLineWidth(radarStrokeWidth);
-  ctx.stroke();
-
-  points.forEach((point) => {
-    ctx.beginPath();
-    ctx.arc(point.x, point.y, radarPointRadius, 0, 2 * Math.PI);
-    ctx.setFillStyle("rgba(221, 162, 90, 1)");
-    ctx.fill();
-  });
-
-  ctx.beginPath();
-  ctx.arc(radarCenterX, radarCenterY, radarPointRadius, 0, 2 * Math.PI);
-  ctx.setFillStyle("rgba(125, 107, 83, 0.65)");
-  ctx.fill();
-  ctx.draw();
-};
-
-// 小程序 canvas 首次渲染时机不稳定，延后一帧再绘制更稳。
-const refreshRadar = async () => {
-  await nextTick();
-  setTimeout(() => {
-    drawRadar();
-  }, 30);
-};
-
-const loadPersonalTrainingData = async () => {
-  try {
-    const result = await getPersonalTrainingAPI();
-    trainingData.value = {
-      week_days:
-        Array.isArray(result?.week_days) && result.week_days.length
-          ? result.week_days
-          : createDefaultTrainingData().week_days,
-      stats: {
-        total_training_days: result?.stats?.total_training_days ?? 0,
-        total_arrows: result?.stats?.total_arrows ?? 0,
-        hit_rate: result?.stats?.hit_rate ?? 0,
-        endurance_shoot_speed: result?.stats?.endurance_shoot_speed ?? 0,
-        total_calories: result?.stats?.total_calories ?? 0,
-        overtake_rate: result?.stats?.overtake_rate ?? 0,
-      },
-      radar: {
-        dimensions:
-          Array.isArray(result?.radar?.dimensions) &&
-          result.radar.dimensions.length === 5
-            ? result.radar.dimensions
-            : createDefaultTrainingData().radar.dimensions,
-      },
-      training_items: Array.isArray(result?.training_items)
-        ? result.training_items
-        : [],
-    };
-  } catch (error) {
-    console.log("personal training load failed", error);
-    trainingData.value = createDefaultTrainingData();
-  } finally {
-    await refreshRadar();
-  }
-};
-
-const openTrainingRecord = () => {
-  uni.navigateTo({
-    url: "/pages/my-growth?tab=2",
-  });
-};
-
-const openTrainingItem = (item = {}) => {
-  const mode = getTrainingMode(item);
-  if (!mode) return;
-
-  if (item.is_locked) {
-    uni.showToast({
-      title: `${item.name || "训练"} 暂未开放`,
-      icon: "none",
-    });
-    return;
-  }
-
-  uni.navigateTo({
-    url: `/pages/training/difficulty?mode=${mode}`,
-  });
-};
-
-const openRoutineTraining = () => {
-  showRoutineTargetPicker.value = true;
-};
-
-const handleRoutineTargetConfirm = (target) => {
-  showRoutineTargetPicker.value = false;
-  uni.navigateTo({
-    url: `/pages/practise-one?target=${target}`,
-  });
-};
-
-// 首次进入页面时拉取数据并完成雷达图初始化。
-onMounted(async () => {
-  await loadPersonalTrainingData();
-  pageMounted.value = true;
-});
-
-// 从其他页面返回时刷新训练数据，保持进度与推荐状态最新。
-onShow(async () => {
-  if (!pageMounted.value) return;
-  await loadPersonalTrainingData();
-});
-</script>
-
-<template>
-  <Container :showBackToGame="true" :bgType="7" bgColor="#050b19">
-    <view class="training-home">
-      <view class="week-grid">
-        <view
-          v-for="item in trainingData.week_days"
-          :key="item.day"
-          class="week-item"
-        >
-          <view class="week-item-bg"></view>
-          <image
-            class="week-item-icon"
-            :src="item.status === 'checked' ? checkedIcon : missedIcon"
-            mode="widthFix"
-          />
-          <text
-            class="week-item-label"
-            :class="{ 'week-item-label-active': item.status === 'checked' }"
-          >
-            {{ item.day }}
-          </text>
-        </view>
-      </view>
-
-      <view class="stats-card">
-        <view class="stats-card-bg"></view>
-        <image
-          class="stats-quote stats-quote-left"
-          src="../../static/training-home/img_17.png"
-          mode="widthFix"
-        />
-        <image
-          class="stats-quote stats-quote-right"
-          src="../../static/training-home/img_16.png"
-          mode="widthFix"
-        />
-        <view class="stats-grid">
-          <view class="stats-item">
-            <view class="stats-value-row">
-              <view class="stats-value-group">
-                <text class="stats-value">
-                  {{ formatValue(trainingData.stats.total_training_days, 0) }}
-                </text>
-                <text class="stats-unit">天</text>
-                <view class="stats-value-decoration"></view>
-              </view>
-            </view>
-            <text class="stats-label">共训练</text>
-          </view>
-
-          <view class="stats-item">
-            <view class="stats-value-row">
-              <view class="stats-value-group">
-                <text class="stats-value">
-                  {{ formatValue(trainingData.stats.total_arrows, 0) }}
-                </text>
-                <text class="stats-unit">支</text>
-                <view class="stats-value-decoration"></view>
-              </view>
-            </view>
-            <text class="stats-label">累计射箭</text>
-          </view>
-
-          <view class="stats-item">
-            <view class="stats-value-row">
-              <view class="stats-value-group">
-                <text class="stats-value">
-                  {{ formatValue(trainingData.stats.hit_rate) }}
-                </text>
-                <text class="stats-unit">%</text>
-                <view class="stats-value-decoration"></view>
-              </view>
-            </view>
-            <text class="stats-label">命中率</text>
-          </view>
-
-          <view class="stats-item">
-            <view class="stats-value-row">
-              <view class="stats-value-group">
-                <text class="stats-value">
-                  {{ formatValue(trainingData.stats.endurance_shoot_speed, 0) }}
-                </text>
-                <text class="stats-unit">支/分钟</text>
-                <view class="stats-value-decoration"></view>
-              </view>
-            </view>
-            <text class="stats-label">耐力射击</text>
-          </view>
-
-          <view class="stats-item">
-            <view class="stats-value-row">
-              <view class="stats-value-group">
-                <text class="stats-value">
-                  {{ getCaloriesValue(trainingData.stats.total_calories) }}
-                </text>
-                <text class="stats-unit">卡路里</text>
-                <view class="stats-value-decoration"></view>
-              </view>
-            </view>
-            <text class="stats-label">共消耗</text>
-          </view>
-        </view>
-      </view>
-
-      <view class="radar-section">
-        <view class="record-bubble" @click="openTrainingRecord">
-          <image
-            class="record-bubble-bg"
-            src="../../static/training-home/img_28.png"
-            mode="widthFix"
-          />
-          <view class="record-bubble-copy">
-            <view class="record-main">
-              已超越<text class="record-main-highlight">{{ formatValue(trainingData.stats.overtake_rate) }}%</text>对手
-            </view>
-            <view class="record-sub-row">
-              <text class="record-sub-text">我的训练记录</text>
-              <image
-                class="record-arrow"
-                src="../../static/training-home/img_7.png"
-                mode="widthFix"
-              />
-            </view>
-          </view>
-        </view>
-
-        <view class="radar-board">
-          <text class="radar-label radar-label-top">
-            {{ trainingData.radar.dimensions[0].name }}
-          </text>
-          <text class="radar-label radar-label-right">
-            {{ trainingData.radar.dimensions[1].name }}
-          </text>
-          <text class="radar-label radar-label-bottom-right">
-            {{ trainingData.radar.dimensions[2].name }}
-          </text>
-          <text class="radar-label radar-label-bottom-left">
-            {{ trainingData.radar.dimensions[3].name }}
-          </text>
-          <text class="radar-label radar-label-left">
-            {{ trainingData.radar.dimensions[4].name }}
-          </text>
-
-          <view class="radar-figure" :style="radarFigureStyle">
-            <image
-              class="radar-grid-image"
-              :style="radarFigureStyle"
-              src="../../static/training-home/img_19.png"
-            />
-            <canvas
-              :canvas-id="trainingRadarCanvasId"
-              :id="trainingRadarCanvasId"
-              class="radar-canvas"
-              :style="radarFigureStyle"
-              :width="radarCanvasWidth"
-              :height="radarCanvasHeight"
-            />
-            <image
-              class="radar-mascot"
-              src="../../static/training-home/img_21.png"
-              mode="widthFix"
-            />
-          </view>
-        </view>
-      </view>
-
-      <view class="featured-card" @click="openRoutineTraining">
-        <image
-          class="featured-card-bg"
-          src="../../static/training-home/img_22.png"
-          mode="widthFix"
-        />
-        <view class="featured-card-mask"></view>
-        <view class="featured-card-copy">
-          <text class="featured-card-title">常规训练</text>
-          <text class="featured-card-subtitle">12箭练习</text>
-        </view>
-      </view>
-
-      <view class="mode-grid">
-        <view
-          v-for="item in trainingData.training_items.filter((item) => item.id !== 'strength')"
-          :key="item.id"
-          class="mode-card"
-          @click="openTrainingItem(item)"
-        >
-          <view v-if="item.is_recommended" class="mode-tag">推荐</view>
-          <view class="mode-card-copy">
-            <image
-              v-if="getTrainingTitleImage(item)"
-              class="mode-card-title-image"
-              :src="getTrainingTitleImage(item)"
-              mode="widthFix"
-            />
-            <text v-else class="mode-card-title">{{ item.name }}</text>
-            <text class="mode-card-progress">{{ getLevelText(item) }}</text>
-          </view>
-          <image
-            class="mode-card-icon"
-            :src="getTrainingIcon(item)"
-            mode="aspectFit"
-          />
-        </view>
-      </view>
-    </view>
-    <TargetPicker
-      :show="showRoutineTargetPicker"
-      :onClose="() => (showRoutineTargetPicker = false)"
-      :onConfirm="handleRoutineTargetConfirm"
-    />
-  </Container>
-</template>
-
-<style scoped>
-.training-home {
-  position: relative;
-  overflow: hidden;
-  padding: 18rpx 20rpx 60rpx 20rpx;
-}
-
-.week-grid {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 18rpx;
-}
-
-.week-item {
-  position: relative;
-  width: 92rpx;
-  height: 96rpx;
-  border-radius: 16rpx;
-  overflow: hidden;
-}
-
-.week-item-bg {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
-  opacity: 0.5;
-}
-
-.week-item-icon {
-  position: absolute;
-  left: 28rpx;
-  top: 14rpx;
-  width: 36rpx;
-}
-
-.week-item-label {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 10rpx;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 20rpx;
-  text-align: center;
-  line-height: 28rpx;
-}
-
-.week-item-label-active {
-  color: #e7ba80;
-}
-
-.stats-card {
-  position: relative;
-  margin-top: 32rpx;
-  width: 100%;
-  height: 124rpx;
-  overflow: hidden;
-  border-radius: 24rpx;
-}
-
-.stats-card-bg {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
-  opacity: 0.5;
-}
-
-.stats-quote {
-  position: absolute;
-  z-index: 1;
-  width: 53rpx;
-  height: 50rpx;
-}
-
-.stats-quote-left {
-  left: 4rpx;
-  top: 4rpx;
-}
-
-.stats-quote-right {
-  right: 4rpx;
-  bottom: 4rpx;
-}
-
-.stats-grid {
-  position: absolute;
-  z-index: 1;
-  left: 36rpx;
-  right: 36rpx;
-  top: 22rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.stats-item {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.stats-value-row {
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  width: 100%;
-  height: 48rpx;
-  line-height: 48rpx;
-}
-
-.stats-value-group {
-  position: relative;
-  display: inline-flex;
-  align-items: flex-end;
-  justify-content: center;
-  min-width: 72rpx;
-  white-space: nowrap;
-}
-
-.stats-value-decoration {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 6rpx;
-  min-width: 72rpx;
-  height: 12rpx;
-  border-radius: 6rpx;
-  background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
-  opacity: 0.5;
-}
-
-.stats-value {
-  position: relative;
-  z-index: 1;
-  color: #fff;
-  font-size: 34rpx;
-  font-family: Helvetica, Arial, sans-serif;
-  font-weight: 500;
-  line-height: 46rpx;
-}
-
-.stats-unit {
-  position: relative;
-  z-index: 1;
-  margin-left: 4rpx;
-  padding-bottom: 8rpx;
-  color: #fff;
-  font-size: 20rpx;
-  line-height: 28rpx;
-  opacity: 0.6;
-}
-
-.stats-label {
-  display: inline-block;
-  margin-top: 6rpx;
-  color: #fcce96;
-  font-size: 20rpx;
-  line-height: 28rpx;
-  opacity: 0.6;
-}
-
-.radar-section {
-  position: relative;
-  padding-top: 34rpx;
-}
-
-.record-bubble {
-  position: absolute;
-  right: 0;
-  top: 10rpx;
-  width: 202rpx;
-  height: 122rpx;
-  z-index: 3;
-}
-
-.record-bubble-bg {
-  width: 202rpx;
-}
-
-.record-bubble-copy {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 24rpx;
-  text-align: center;
-}
-
-.record-main {
-  color: #fff;
-  font-size: 24rpx;
-  line-height: 30rpx;
-}
-
-.record-main-highlight {
-  color: #e7ba80;
-}
-
-.record-sub-row {
-  margin-top: 4rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.record-sub-text {
-  color: #ffd947;
-  font-size: 24rpx;
-  height: 30rpx;
-  line-height: 30rpx;
-}
-
-.record-arrow {
-  width: 24rpx;
-}
-
-.radar-board {
-  position: relative;
-  width: 100%;
-  height: 514rpx;
-}
-
-.radar-label {
-  position: absolute;
-  color: rgba(255, 255, 255, 0.78);
-  font-size: 28rpx;
-  line-height: 40rpx;
-}
-
-.radar-label-top {
-  left: 350rpx;
-  top: 14rpx;
-  transform: translateX(-50%);
-  opacity: 0.5;
-}
-
-.radar-label-right {
-  right: 77rpx;
-  top: 190rpx;
-  opacity: 0.5;
-}
-
-.radar-label-bottom-right {
-  right: 170rpx;
-  bottom: 18rpx;
-  opacity: 0.5;
-}
-
-.radar-label-bottom-left {
-  left: 170rpx;
-  bottom: 18rpx;
-  opacity: 0.5;
-}
-
-.radar-label-left {
-  left: 75rpx;
-  top: 180rpx;
-  opacity: 0.5;
-}
-
-.radar-figure {
-  position: absolute;
-  left: 50%;
-  top: 54rpx;
-  transform: translateX(-50%);
-  overflow: visible;
-}
-
-.radar-grid-image,
-.radar-canvas {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.radar-mascot {
-  position: absolute;
-  right: 38rpx;
-  top: 0;
-  width: 92rpx;
-}
-
-.featured-card {
-  position: relative;
-  width: 100%;
-  height: 150rpx;
-  margin-top: 70rpx;
-  border-radius: 16rpx;
-  overflow: hidden;
-}
-
-.featured-card-bg {
-  width: 100%;
-}
-
-.featured-card-mask {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 278rpx;
-  height: 150rpx;
-  background: linear-gradient(90deg, #ffdaa0 0%, #f5c580 74%, rgba(245, 197, 128, 0) 100%);
-}
-
-.featured-card-copy {
-  position: absolute;
-  left: 30rpx;
-  top: 34rpx;
-  display: flex;
-  flex-direction: column;
-}
-
-.featured-card-title {
-  display: block;
-  color: #895409;
-  font-size: 34rpx;
-  font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
-  font-weight: 700;
-  line-height: 42rpx;
-}
-
-.featured-card-subtitle {
-  display: block;
-  margin-top: 10rpx;
-  color: #895409;
-  font-size: 22rpx;
-  line-height: 32rpx;
-  opacity: 0.72;
-}
-
-.mode-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16rpx 18rpx;
-  margin-top: 16rpx;
-}
-
-.mode-card {
-  position: relative;
-  height: 150rpx;
-  box-shadow: inset 2rpx 2rpx 6rpx 0rpx rgba(255, 255, 255, 0.27);
-  border-radius: 16rpx;
-  border: 2rpx solid rgba(235, 184, 123, 0.5);
-  background: rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-}
-
-.mode-tag {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 72rpx;
-  height: 34rpx;
-  line-height: 34rpx;
-  text-align: center;
-  font-size: 20rpx;
-  color: #000;
-  border-bottom-right-radius: 16rpx;
-  background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
-}
-
-.mode-card-copy {
-  position: absolute;
-  left: 30rpx;
-  top: 40rpx;
-}
-
-.mode-card-title {
-  display: block;
-  background-image: linear-gradient(
-    133deg,
-    rgba(235, 184, 123, 0.8) 0%,
-    rgba(181, 140, 78, 0.8) 100%
-  );
-  color: #e7ba80;
-  font-size: 32rpx;
-  font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
-  font-weight: 700;
-  line-height: 38rpx;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.mode-card-title-image {
-  display: block;
-  width: 128rpx;
-}
-
-.mode-card-progress {
-  display: block;
-  margin-top: 14rpx;
-  color: #fcce96;
-  font-size: 22rpx;
-  line-height: 32rpx;
-  opacity: 0.5;
-}
-
-.mode-card-icon {
-  position: absolute;
-  right: 12rpx;
-  top: 14rpx;
-  width: 124rpx;
-  height: 124rpx;
-}
-</style>

src/pages/training/practise-one.vue

@@ -1,537 +0,0 @@
-<script setup>
-import { computed, ref, onMounted, onBeforeUnmount } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
-import Container from "@/components/Container.vue";
-import ShootProgress from "./components/ShootProgress.vue";
-import BowTarget from "./components/BowTarget.vue";
-import ScorePanel2 from "./components/ScorePanel2.vue";
-import ScoreResult from "./components/ScoreResult.vue";
-import Avatar from "@/components/Avatar.vue";
-import BowPower from "@/components/BowPower.vue";
-import TestDistance from "./components/TestDistance.vue";
-import BubbleTip from "./components/BubbleTip.vue";
-import audioManager from "@/audioManager";
-
-import {
-  createPractiseAPI,
-  startPractiseAPI,
-  endPractiseAPI,
-  getPractiseAPI,
-} from "@/apis";
-import { sharePractiseData } from "@/canvas";
-import { wxShare, debounce } from "@/util";
-import { MESSAGETYPESV2, roundsName } from "@/constants";
-
-import useStore from "@/store";
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { user } = storeToRefs(store);
-
-const sound = ref(true);
-const start = ref(false);
-const pageStages = Object.freeze({
-  DISTANCE: "distance",
-  SHOOTING: "shooting",
-  RESULT: "result",
-  LOADING: "loading",
-});
-const pageStage = ref(pageStages.DISTANCE);
-const scores = ref([]);
-const defaultTotal = 12;
-const defaultShootTime = 120;
-const defaultTargetType = 1;
-const total = ref(defaultTotal);
-const shootTime = ref(defaultShootTime);
-const practiseResult = ref({});
-const practiseId = ref("");
-const showGuide = ref(false);
-const tips = ref("");
-const targetType = ref(defaultTargetType);
-const trainingParams = ref({});
-const trainingDifficultyRefreshEvent = "training-difficulty-refresh";
-const useHighlightTest = ref(false);
-const highlightTestTimer = ref(null);
-
-const env = computed(() => {
-  try {
-    return uni.getAccountInfoSync().miniProgram.envVersion;
-  } catch (error) {
-    return "release";
-  }
-});
-
-const isDistanceStage = computed(() => pageStage.value === pageStages.DISTANCE);
-const isShootingStage = computed(() => pageStage.value === pageStages.SHOOTING);
-const hasPractiseResult = computed(() => !!practiseResult.value?.details);
-const showResult = computed(
-  () => pageStage.value === pageStages.RESULT && hasPractiseResult.value
-);
-
-const defaultHighlightAreas = [{ quadrant: 1, rings: [7] }];
-
-// 临时高亮测试数据：第 N 项对应第 N 箭，每箭展示一个不同区域。
-const highlightTestAreas = [
-  { arrowIndex: 1, quadrant: 1, rings: [10] },
-  { arrowIndex: 2, quadrant: 2, rings: [9, 10] },
-  { arrowIndex: 3, quadrant: 3, rings: [8, 9] },
-  { arrowIndex: 4, quadrant: 4, rings: [7, 8] },
-  { arrowIndex: 5, quadrant: 1, rings: [6, 7] },
-  { arrowIndex: 6, quadrant: 2, rings: [5, 6] },
-  { arrowIndex: 7, quadrant: 3, rings: [4, 5] },
-  { arrowIndex: 8, quadrant: 4, rings: [3, 4] },
-  { arrowIndex: 9, quadrant: 1, rings: "all", scope: "sector" },
-  { arrowIndex: 10, quadrant: 2, rings: "all", scope: "sector" },
-  { arrowIndex: 11, quadrant: 3, rings: "all", scope: "sector" },
-  { arrowIndex: 12, quadrant: 4, rings: "all", scope: "sector" },
-];
-
-const targetHighlightAreas = computed(() => {
-  return useHighlightTest.value ? highlightTestAreas : defaultHighlightAreas;
-});
-
-const toRouteNumber = (value, fallback = 0) => {
-  const numberValue = Number(value);
-  return Number.isFinite(numberValue) ? numberValue : fallback;
-};
-
-const toPositiveRouteNumber = (value, fallback) => {
-  const numberValue = toRouteNumber(value, fallback);
-  return numberValue > 0 ? numberValue : fallback;
-};
-
-const createPractice = async () => {
-  const result = await createPractiseAPI(
-    total.value,
-    shootTime.value,
-    targetType.value
-  );
-
-  if (result) practiseId.value = result.id;
-};
-
-const clearHighlightTestTimer = () => {
-  if (highlightTestTimer.value) {
-    clearInterval(highlightTestTimer.value);
-    highlightTestTimer.value = null;
-  }
-};
-
-const buildHighlightTestScore = (index) => ({
-  playerId: user.value?.id,
-  ring: 9,
-  ringX: false,
-  x: ((index % 4) - 1.5) * 2,
-  y: (Math.floor(index / 4) - 1) * 2,
-  angle: null,
-});
-
-const setHighlightTestArrow = (arrowIndex) => {
-  const completedCount = Math.max(arrowIndex - 1, 0);
-  scores.value = Array.from({ length: completedCount }, (_, index) =>
-    buildHighlightTestScore(index)
-  );
-};
-
-// 临时测试入口：自动切换第 1 到第 12 箭，让 BowTarget 按当前箭展示不同高亮。
-const runHighlightTest = () => {
-  clearHighlightTestTimer();
-  useHighlightTest.value = true;
-  practiseResult.value = {};
-  pageStage.value = pageStages.SHOOTING;
-  start.value = true;
-
-  let arrowIndex = 1;
-  setHighlightTestArrow(arrowIndex);
-
-  highlightTestTimer.value = setInterval(() => {
-    if (arrowIndex >= highlightTestAreas.length) {
-      clearHighlightTestTimer();
-      return;
-    }
-
-    arrowIndex += 1;
-    setHighlightTestArrow(arrowIndex);
-  }, 1000);
-};
-
-const resetHighlightTest = () => {
-  clearHighlightTestTimer();
-  useHighlightTest.value = false;
-  scores.value = [];
-};
-
-onLoad((options = {}) => {
-  targetType.value = toPositiveRouteNumber(options.target, defaultTargetType);
-  total.value = toPositiveRouteNumber(options.arrows, defaultTotal);
-  shootTime.value = toPositiveRouteNumber(options.time, defaultShootTime);
-  trainingParams.value = {
-    type: options.type || "",
-    difficultyId: options.difficultyId || "",
-    difficulty: toRouteNumber(options.difficulty),
-    recordId: options.recordId || "",
-    hitReq: toRouteNumber(options.hitReq),
-    totalReq: toRouteNumber(options.totalReq),
-    blocks: toRouteNumber(options.blocks),
-    mode: toRouteNumber(options.mode),
-  };
-});
-
-const onReady = async () => {
-  pageStage.value = pageStages.LOADING;
-  clearHighlightTestTimer();
-  useHighlightTest.value = false;
-  try {
-    await startPractiseAPI();
-    practiseResult.value = {};
-    scores.value = [];
-    start.value = true;
-    pageStage.value = pageStages.SHOOTING;
-    audioManager.play("练习开始");
-  } catch (error) {
-    start.value = false;
-    pageStage.value = pageStages.DISTANCE;
-    throw error;
-  }
-};
-
-const onOver = async () => {
-  if (!isShootingStage.value) return;
-
-  clearHighlightTestTimer();
-  pageStage.value = pageStages.LOADING;
-  start.value = false;
-
-  try {
-    practiseResult.value = (await getPractiseAPI(practiseId.value)) || {};
-    pageStage.value = hasPractiseResult.value
-      ? pageStages.RESULT
-      : pageStages.DISTANCE;
-  } catch (error) {
-    start.value = true;
-    pageStage.value = pageStages.SHOOTING;
-    throw error;
-  }
-};
-
-async function onReceiveMessage(msg) {
-  if (msg.type === MESSAGETYPESV2.ShootResult && isShootingStage.value) {
-    scores.value = msg.details;
-  } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
-    // setTimeout(onOver, 1500);
-  }
-}
-
-function onComplete() {
-  pageStage.value = pageStages.LOADING;
-  start.value = false;
-  uni.$emit(trainingDifficultyRefreshEvent);
-  uni.navigateBack();
-}
-
-async function onRetry() {
-  pageStage.value = pageStages.LOADING;
-  clearHighlightTestTimer();
-  useHighlightTest.value = false;
-  practiseId.value = "";
-  practiseResult.value = {};
-  start.value = false;
-  scores.value = [];
-  try {
-    await createPractice();
-  } finally {
-    pageStage.value = pageStages.DISTANCE;
-  }
-}
-
-const onClickShare = debounce(async () => {
-  await sharePractiseData("shareCanvas", 2, user.value, practiseResult.value);
-  await wxShare("shareCanvas");
-});
-
-function onAudioEnded(s) {
-  if (s.indexOf("比赛结束") >= 0) {
-    onOver()
-  }
-}
-
-const updateSound = () => {
-  sound.value = !sound.value;
-  audioManager.setMuted(!sound.value);
-};
-
-
-onMounted(async () => {
-  // audioManager.play("第一轮");
-  uni.setKeepScreenOn({
-    keepScreenOn: true,
-  });
-  uni.$on("socket-inbox", onReceiveMessage);
-  uni.$on("share-image", onClickShare);
-  uni.$on("audioEnded", onAudioEnded);
-  await createPractice();
-});
-
-onBeforeUnmount(() => {
-  uni.setKeepScreenOn({
-    keepScreenOn: false,
-  });
-  uni.$off("socket-inbox", onReceiveMessage);
-  uni.$off("share-image", onClickShare);
-  uni.$off("audioEnded", onAudioEnded);
-  audioManager.stopAll();
-  clearHighlightTestTimer();
-  endPractiseAPI();
-});
-</script>
-
-<template>
-  <Container
-    :bgType="isDistanceStage ? 9 : 10"
-    :showBottom="isDistanceStage"
-    :scroll="!isShootingStage"
-  >
-    <view class="practise-content">
-      <TestDistance v-if="isDistanceStage" />
-      <view v-else-if="isShootingStage" class="shooting-layout">
-        <view class="shooting-fixed">
-          <ShootProgress
-            :start="start"
-            :onStop="onOver"
-          />
-          <view class="user-row">
-            <!-- <Avatar :src="user.avatar" :size="35" /> -->
-            <BubbleTip v-if="showGuide" type="normal2">
-              <text>还有两场，坚持</text>
-              <text>就是胜利！💪</text>
-            </BubbleTip>
-            <!-- <BowPower /> -->
-          </view>
-          <BowTarget
-            :totalRound="start ? total / 4 : 0"
-            :currentRound="scores.length % 3"
-            :scores="scores"
-            :showCrosshair="false"
-            :highlightAreas="targetHighlightAreas"
-          />
-          <view v-if="env !== 'release'" class="highlight-test-actions">
-            <button
-              class="highlight-test-btn"
-              hover-class="none"
-              @click="runHighlightTest"
-            >
-              高亮测试
-            </button>
-            <button
-              class="highlight-test-btn"
-              hover-class="none"
-              @click="resetHighlightTest"
-            >
-              重置高亮
-            </button>
-          </view>
-          <view class="sound-text-box">
-            <button class="sound-btn" hover-class="none" @click="updateSound">
-              <image
-                class="sound-icon"
-                :src="`/static/sound${sound ? '' : '-off'}-yellow.png`"
-                mode="aspectFit"
-              />
-            </button>
-            <view class="bat-text-big-box">
-              <image
-                class="dao-icon"
-                src="../../static/training-difficulty-design/dao-icon.png"
-                mode="widthFix"
-              />
-              <view class="bat-text-box">
-                <view class="bat-text-small-box">
-                  <view class="text-round-box">
-                    <view class="text1">每箭命中9环之上</view>
-                    <view class="text2">剩余<text class="text2-yellow">3</text>箭</view>
-                  </view>
-                </view>
-              </view>
-            </view>
-          </view>
-        </view>
-        <scroll-view
-          class="score-scroll"
-          scroll-y
-          :enhanced="true"
-          :show-scrollbar="false"
-        >
-          <ScorePanel2 :arrows="scores" :total="total" />
-        </scroll-view>
-      </view>
-      <ScoreResult
-        v-else-if="showResult"
-        :rowCount="6"
-        :total="total"
-        :onClose="onComplete"
-        :onRetry="onRetry"
-        :result="practiseResult"
-      />
-      <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
-    </view>
-    <template #bottom>
-      <view class="btn-box">
-        <image
-          class="btn-box-bg"
-          src="../../static/training-difficulty-design/par-star.png"
-          mode="widthFix"
-        />
-        <button class="btn" @click="onReady">准备好了，开始练习</button>
-      </view>
-    </template>
-  </Container>
-</template>
-
-<style scoped>
-.practise-content {
-  height: 100%;
-  min-height: 0;
-}
-
-.shooting-layout {
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.shooting-fixed {
-  flex-shrink: 0;
-}
-
-.score-scroll {
-  flex: 1;
-  height: 0;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.btn-box{
-  width: 488rpx;
-  height: 234rpx;
-  position: fixed;
-  bottom: 130rpx;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.btn-box-bg{
-  width: 100%;
-}
-.btn{
-  width: 330rpx;
-  height: 70rpx;
-  line-height: 70rpx;
-  background: #FED847;
-  border-radius: 44rpx;
-  text-align: center;
-  color: #000000;
-  font-size: 28rpx;
-  font-weight: 500;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: -36rpx;
-}
-
-.highlight-test-actions {
-  display: flex;
-  justify-content: center;
-  margin-top: -24rpx;
-  position: relative;
-  z-index: 10;
-}
-
-.highlight-test-btn {
-  width: 150rpx;
-  height: 48rpx;
-  line-height: 48rpx;
-  padding: 0;
-  border-radius: 24rpx;
-  background: rgba(0, 0, 0, 0.48);
-  color: #fed847;
-  font-size: 22rpx;
-}
-
-.highlight-test-btn::after {
-  border: none;
-}
-
-.highlight-test-btn + .highlight-test-btn {
-  margin-left: 16rpx;
-}
-
-.sound-text-box{
-  height: 125rpx;
-  padding: 0 56rpx;
-  display: flex;
-  align-items: flex-end;
-}
-.sound-btn {
-  width: 76rpx;
-  height: 70rpx;
-  border: none;
-}
-
-.sound-btn::after {
-  border: none;
-}
-
-.sound-icon {
-  width: 76rpx;
-  height: 70rpx;
-}
-.bat-text-big-box{
-  flex: 1;
-  position: relative;
-}
-.dao-icon{
-  width: 160rpx;
-  height: 125rpx;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-}
-.text-round-box{
-  width: 100%;
-}
-.bat-text-box{
-  display: flex;
-}
-.bat-text-small-box{
-  background: rgba(0, 0, 0, 0.5);
-  width: auto;
-  min-width: 100rpx;
-  border-radius: 16rpx 60rpx 60rpx 16rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding-left: 176rpx;
-  height: 112rpx;
-  padding-right: 30rpx;
-  font-size: 30rpx;
-  color: #E7BA80;
-}
-.text1{
-  font-size: 30rpx;
-  font-weight: 400;
-  color: #E7BA80;
-  line-height: 42rpx;
-}
-.text2{
-  color: #FFFFFF;
-  font-size: 26rpx;
-  font-weight: 400;
-  line-height: 36rpx;
-}
-.text2-yellow{
-  font-size: 30rpx;
-  color: #FFD947;
-  font-weight: 500;
-  margin: 0 4rpx;
-}
-</style>

src/pages/user.vue

@@ -13,7 +13,7 @@ const { updateUser } = store;
 
 const toOrderPage = () => {
   uni.navigateTo({
-    url: "/pages/orders",
+    url: "/pages/member/orders",
   });
 };
 
@@ -27,7 +27,7 @@ const toFristTryPage = async () => {
 };
 const toBeVipPage = () => {
   uni.navigateTo({
-    url: "/pages/be-vip",
+    url: "/pages/member/be-vip",
   });
 };
 const toMyGrowthPage = () => {

src/static/training-difficulty-design/lock.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="55px" height="55px" viewBox="0 0 55 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 11</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="训练难度展示" transform="translate(-160.000000, -478.000000)">
-            <g id="编组-2备份" transform="translate(154.000000, 472.000000)">
-                <g id="编组-11" transform="translate(6.000000, 6.000000)">
-                    <circle id="椭圆形" fill="#CACACA" cx="27.5" cy="27.5" r="27.5"></circle>
-                    <circle id="椭圆形" fill="#FFFFFF" cx="27.5" cy="26" r="25"></circle>
-                    <circle id="椭圆形" fill="#5E5E5E" cx="27.5" cy="26" r="22"></circle>
-                    <circle id="椭圆形" fill="#17B6F2" cx="27.5" cy="26" r="19.5"></circle>
-                    <circle id="椭圆形" fill="#FFC2C2" cx="27.5" cy="26" r="17"></circle>
-                    <circle id="椭圆形" fill="#FF1F33" opacity="0.800000012" cx="27.5" cy="26" r="14.5"></circle>
-                    <circle id="椭圆形" fill="#FED847" cx="27.5" cy="26" r="13"></circle>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/static/training-difficulty-design/unlock.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="56px" height="55px" viewBox="0 0 56 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 9</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="训练难度展示" transform="translate(-60.000000, -313.000000)">
-            <g id="编组-2备份" transform="translate(54.500000, 307.000000)">
-                <g id="编组-9" transform="translate(5.500000, 6.000000)">
-                    <circle id="椭圆形" fill="#CACACA" cx="28" cy="27.5" r="27.5"></circle>
-                    <circle id="椭圆形" fill="#FFFFFF" cx="28" cy="26" r="25"></circle>
-                    <circle id="椭圆形" fill="#5E5E5E" cx="28" cy="26" r="22"></circle>
-                    <circle id="椭圆形" fill="#808080" cx="28" cy="26" r="19.5"></circle>
-                    <circle id="椭圆形" fill="#FFFFFF" cx="28" cy="26" r="17"></circle>
-                    <circle id="椭圆形" fill="#8C8C8C" cx="28" cy="26" r="14.5"></circle>
-                    <circle id="椭圆形" fill="#DBDBDB" cx="28" cy="26" r="13"></circle>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>