update：新增稳定训练

src/pages/training/components/ShootProgress.vue

@@ -73,6 +73,14 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  energyPercent: {
+    type: Number,
+    default: 0,
+  },
+  energyReqPercent: {
+    type: Number,
+    default: 0,
+  },
   isVip: {
     type: Boolean,
     default: false,
@@ -137,6 +145,9 @@ let rhythmServerClockOffsetMs = 0;
 let rhythmSyncGeneration = 0;
 
 const isRhythmTraining = computed(() => props.trainingType === "rhythm");
+const isStabilityTraining = computed(
+  () => props.trainingType === "stability"
+);
 
 const normalizePositiveInteger = (value) => {
   const numberValue = Number(value);
@@ -176,6 +187,18 @@ const progressPercent = computed(() => {
   return Math.max(0, Math.min(100, (remain.value / props.total) * 100));
 });
 
+const stabilityEnergyPercent = computed(() =>
+  Math.max(0, Math.min(100, Number(props.energyPercent) || 0))
+);
+const stabilityEnergyReqPercent = computed(() =>
+  Math.max(0, Math.min(100, Number(props.energyReqPercent) || 0))
+);
+const stabilityEnergyReached = computed(
+  () =>
+    stabilityEnergyReqPercent.value > 0 &&
+    stabilityEnergyPercent.value >= stabilityEnergyReqPercent.value
+);
+
 const rhythmMarkerPercent = computed(() => {
   if (!validRhythmRoundTime.value) return 0;
   return Math.max(
@@ -536,9 +559,34 @@ onBeforeUnmount(() => {
 <template>
   <view
     v-if="show"
-    :class="isRhythmTraining ? 'rhythm-progress' : 'progress-card'"
+    :class="
+      isRhythmTraining
+        ? 'rhythm-progress'
+        : isStabilityTraining
+          ? 'stability-progress'
+          : 'progress-card'
+    "
   >
-    <template v-if="isRhythmTraining">
+    <template v-if="isStabilityTraining">
+      <text class="stability-progress__time">{{ remain }}秒</text>
+      <view class="stability-progress__track">
+        <view
+          class="stability-progress__fill"
+          :class="{
+            'stability-progress__fill--reached': stabilityEnergyReached,
+          }"
+          :style="{ width: `${stabilityEnergyPercent}%` }"
+        />
+        <view
+          class="stability-progress__marker"
+          :style="{ left: `${stabilityEnergyReqPercent}%` }"
+        />
+        <text class="stability-progress__value">
+          {{ Math.round(stabilityEnergyPercent) }}%
+        </text>
+      </view>
+    </template>
+    <template v-else-if="isRhythmTraining">
       <text class="rhythm-progress__title">{{ rhythmTitle }}</text>
       <view class="rhythm-progress__track">
         <view
@@ -758,6 +806,68 @@ onBeforeUnmount(() => {
   text-align: center;
 }
 
+.stability-progress {
+  box-sizing: border-box;
+  margin: 32rpx 84rpx 0;
+}
+
+.stability-progress__time {
+  display: block;
+  margin-bottom: 20rpx;
+  color: #ffffff;
+  font-size: 34rpx;
+  font-weight: 500;
+  line-height: 48rpx;
+  text-align: center;
+}
+
+.stability-progress__track {
+  position: relative;
+  width: 100%;
+  height: 24rpx;
+  overflow: hidden;
+  border-radius: 18rpx;
+  background: #444444;
+}
+
+.stability-progress__fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 18rpx;
+  background: linear-gradient(90deg, #87f1df 0%, #5ba8e8 100%);
+  transition: width 240ms linear, background 240ms ease;
+}
+
+.stability-progress__fill--reached {
+  background: linear-gradient(90deg, #a5df62 0%, #61c787 100%);
+}
+
+.stability-progress__marker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 4rpx;
+  transform: translateX(-2rpx);
+  background: rgba(26, 24, 22, 0.92);
+}
+
+.stability-progress__value {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #eefaff;
+  font-size: 18rpx;
+  line-height: 24rpx;
+  text-align: center;
+  pointer-events: none;
+}
+
 .rhythm-progress {
   box-sizing: border-box;
   margin: 32rpx 84rpx 0;