update: 优化个人训练

src/pages/training/components/TrainingDifficultyBadge.vue

@@ -15,6 +15,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  showUnlockProgress: {
+    type: Boolean,
+    default: false,
+  },
   completedProgress: {
     type: Number,
     default: 0,
@@ -106,6 +110,15 @@ const handleClick = () => {
         <view class="difficulty-badge__label">{{ node.label }}</view>
       </view>
     </view>
+    <view
+      v-if="showUnlockProgress"
+      class="difficulty-badge__unlock-progress"
+    >
+      <view
+        class="difficulty-badge__unlock-progress-completed"
+        :style="{ width: `${progressValue}%` }"
+      ></view>
+    </view>
   </view>
 </template>
 
@@ -315,6 +328,25 @@ const handleClick = () => {
   overflow: hidden;
 }
 
+.difficulty-badge__unlock-progress {
+  position: absolute;
+  top: calc(100% + 30rpx);
+  left: 50%;
+  width: 120rpx;
+  height: 10rpx;
+  overflow: hidden;
+  border-radius: 6rpx;
+  background: rgba(0, 0, 0, 0.6);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.difficulty-badge__unlock-progress-completed {
+  height: 100%;
+  border-radius: 6rpx;
+  background: rgba(255, 217, 71, 1);
+}
+
 @keyframes badge-orbit-spin {
   from {
     transform: translate(-50%, -50%) rotate(0deg);

src/pages/training/difficulty.vue

@@ -83,10 +83,6 @@ const checkDifficultyCompleted = (item = {}) => {
   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];
 
@@ -107,14 +103,12 @@ const createDifficultySummary = (item = {}) => {
   const timeLimit = toNumber(item.time_limit);
   const hitReq = toNumber(item.hit_req);
   const totalReq = toNumber(item.total_req);
-  const promoteCnt = toNumber(item.promote_cnt);
   const shootingTimeText =
     timeLimit > 0 ? `在${timeLimit}秒内进行射箭` : "不限时进行射箭";
   const enduranceTimeText =
     timeLimit > 0
       ? `在${timeLimit}秒内完成${arrows}箭`
       : `不限时完成${arrows}箭`;
-  const promoteText = promoteCnt > 0 ? `完成${promoteCnt}次晋级` : "";
 
   const summaryMap = {
     base: [
@@ -130,15 +124,10 @@ const createDifficultySummary = (item = {}) => {
       `需要有${arrows}箭命中高亮区域`,
     ],
     rhythm: [
-      desc || `间隔${timeLimit}秒射击`,
-      [
-        `${arrows}箭`,
-        hitReq > 0 ? `每箭${hitReq}环以上` : "上靶即可",
-        getDifficultyModeText(item.mode),
-        promoteText,
-      ]
-        .filter(Boolean)
-        .join(" · "),
+      arrows > 0
+        ? `需要在指定时间节点射出${arrows}射箭`
+        : "需要在指定时间节点射箭",
+      hitReq > 0 ? `且每箭命中${hitReq}环内` : "且每箭命中指定区域",
     ],
   };
 
@@ -803,6 +792,7 @@ onShow(() => {
               :node="node"
               :active="node.id === selectedDifficultyId"
               :locked="checkDifficultyLocked(node)"
+              :showUnlockProgress="node.id === unlockedDifficultyId"
               :completedProgress="getCompletedDifficultyProgress(node)"
               @click="handleSelectDifficulty"
             />

src/pages/training/index.vue

@@ -17,7 +17,7 @@ const trainingModeRouteMap = {
   rhythm: "rhythm",
   strength: "power",
 };
-const unavailableTrainingIds = new Set(["rhythm", "strength"]);
+const unavailableTrainingIds = new Set(["strength"]);
 // 训练项目卡片右侧主图标。
 const trainingModeIconMap = {
   base_bow:
@@ -27,7 +27,7 @@ const trainingModeIconMap = {
     "https://static.shelingxingqiu.com/shootmini/static/training-home/img_5.png",
   wave: "https://static.shelingxingqiu.com/shootmini/static/training-home/img_6.png",
   muscle:
-    "https://static.shelingxingqiu.com/shootmini/static/training-home/img_6.png",
+    "https://static.shelingxingqiu.com/shootmini/static/training-home/img_7.png",
 };
 // 训练项目卡片标题图，按接口 id 映射 CDN 资源。
 const trainingModeTitleImageMap = {
@@ -40,7 +40,7 @@ const trainingModeTitleImageMap = {
   rhythm:
     "https://static.shelingxingqiu.com/shootmini/static/training-home/jiezouxunlian.png",
   strength:
-    "https://static.shelingxingqiu.com/shootmini/static/training-home/liliangxulian.png",
+    "https://static.shelingxingqiu.com/shootmini/static/training-home/wendingxunlian.png",
 };
 const defaultWeekDays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
 const defaultRadarDimensions = [
@@ -743,7 +743,7 @@ onShow(async () => {
 
 .radar-section {
   position: relative;
-  padding-top: 34rpx;
+  padding-top: 30rpx;
 }
 
 .record-bubble {
@@ -863,8 +863,8 @@ onShow(async () => {
 .featured-card {
   position: relative;
   width: 100%;
-  height: 150rpx;
-  margin-top: 70rpx;
+  height: 130rpx;
+  margin-top: 38rpx;
   border-radius: 16rpx;
   overflow: hidden;
 }
@@ -878,13 +878,13 @@ onShow(async () => {
   left: 0;
   top: 0;
   width: 278rpx;
-  height: 150rpx;
+  height: 130rpx;
 }
 
 .featured-card-copy {
   position: absolute;
   left: 174rpx;
-  top: 58rpx;
+  top: 60rpx;
   display: flex;
   flex-direction: column;
 }
@@ -900,10 +900,9 @@ onShow(async () => {
 
 .featured-card-subtitle {
   display: block;
-  margin-top: 10rpx;
   color: #895409;
-  font-size: 22rpx;
-  line-height: 32rpx;
+  font-size: 20rpx;
+  line-height: 28rpx;
 }
 
 .mode-grid {
@@ -915,7 +914,7 @@ onShow(async () => {
 
 .mode-card {
   position: relative;
-  height: 150rpx;
+  height: 130rpx;
   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);
@@ -928,8 +927,8 @@ onShow(async () => {
   left: 0;
   top: 0;
   width: 72rpx;
-  height: 34rpx;
-  line-height: 34rpx;
+  height: 28rpx;
+  line-height: 28rpx;
   text-align: center;
   font-size: 20rpx;
   color: #000;
@@ -940,7 +939,7 @@ onShow(async () => {
 .mode-card-copy {
   position: absolute;
   left: 30rpx;
-  top: 40rpx;
+  top: 32rpx;
 }
 
 .mode-card-title {
@@ -968,16 +967,16 @@ onShow(async () => {
   display: block;
   margin-top: 14rpx;
   color: #fcce96;
-  font-size: 22rpx;
-  line-height: 32rpx;
+  font-size: 20rpx;
+  line-height: 28rpx;
   opacity: 0.5;
 }
 
 .mode-card-icon {
   position: absolute;
-  right: 12rpx;
-  top: 14rpx;
-  width: 124rpx;
-  height: 124rpx;
+  right: 18rpx;
+  top: 8rpx;
+  width: 116rpx;
+  height: 116rpx;
 }
 </style>