update:优化样式

AGENTS.md

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

src/apis.js

@@ -410,6 +410,15 @@ 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

@@ -57,6 +57,30 @@ const props = defineProps({
 	  src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png"
 	  mode="widthFix"
 	/>
+  <image
+      class="bg-image"
+      v-if="type === 7"
+      src="@/static/app-bg6.png"
+      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/Avatar.vue

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

src/components/Container.vue

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

src/components/TargetCanvas.vue

@@ -0,0 +1,535 @@
+<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/mock/index.js

@@ -0,0 +1,104 @@
+// 首页一周打卡展示数据，直接对应顶部 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

@@ -0,0 +1,113 @@
+// 难度页当前用于保存“开始训练前上下文”的本地存储 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

@@ -119,6 +119,15 @@
     },
     {
       "path": "pages/mine-bow-data"
+    },
+    {
+      "path": "pages/training/difficulty"
+    },
+    {
+      "path": "pages/training/index"
+    },
+    {
+      "path": "pages/training/practise-one"
     }
   ],
   "globalStyle": {

src/pages/index.vue

@@ -197,7 +197,8 @@ onShareTimeline(() => {
             </BubbleTip>
           </view>
           <view class="play-card">
-            <view @click="$clickSound(() => toPage('/pages/practise'))">
+            <!-- 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/training/components/BowData.vue

@@ -0,0 +1,116 @@
+<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

@@ -0,0 +1,665 @@
+<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

@@ -0,0 +1,62 @@
+<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

@@ -0,0 +1,157 @@
+<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

@@ -0,0 +1,109 @@
+<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

@@ -0,0 +1,628 @@
+<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

@@ -0,0 +1,89 @@
+<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

@@ -0,0 +1,387 @@
+<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

@@ -0,0 +1,196 @@
+<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

@@ -0,0 +1,327 @@
+<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

@@ -0,0 +1,86 @@
+<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

@@ -0,0 +1,81 @@
+<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

@@ -0,0 +1,801 @@
+<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

@@ -0,0 +1,885 @@
+<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

@@ -0,0 +1,537 @@
+<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/static/training-difficulty-design/lock.svg

@@ -0,0 +1,19 @@
+<?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

@@ -0,0 +1,19 @@
+<?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>