优化勋章分段进度展示

pages/records/records.js

@@ -3,7 +3,12 @@ const util = require('../../utils/util')
 const themeMod = require('../../utils/theme')
 const iconsMod = require('../../utils/icons')
 const config = require('../../config')
-const { getBadgeProgress, getBadgeCelebration } = require('../../utils/badge-state')
+const {
+  getBadgePositions,
+  getBadgeSegments,
+  getBadgeDisplayLabel,
+  getBadgeCelebration
+} = require('../../utils/badge-state')
 
 Page({
   data: {
@@ -17,7 +22,7 @@ Page({
     maxDurationText: '',
     totalDays: 0,
     trainingBadges: [],
-    badgeProgress: 0,
+    badgeSegments: [],
     nextBadgeHint: '',
     currentYear: new Date().getFullYear(),
     currentMonth: new Date().getMonth() + 1,
@@ -75,20 +80,17 @@ Page({
     }
 
     // 累计训练天数勋章(里程碑进度条):统计口径=累计去重训练日(可中断)。
-    // 节点等距排列(间距一致、视觉整齐),填充在区间内线性插值,
-    // 解锁时填充正好抵达该节点,满级时填充满格。
+    // 节点等距排列；每个连接段独立填充，绿色铺满即解锁下一枚勋章。
     const totalDays = stats.totalDays
     const badgeDefs = config.trainingDayBadges
-    const n = badgeDefs.length
-    const TRACK_PAD = 4                       // 首尾留白,保证首尾节点/标签不溢出
-    const segWidth = n > 1 ? (100 - TRACK_PAD * 2) / (n - 1) : 0
-    const posOf = (i) => TRACK_PAD + i * segWidth
+    const badgePositions = getBadgePositions(badgeDefs)
     const trainingBadges = badgeDefs.map((b, i) => ({
       ...b,
       unlocked: totalDays >= b.days,
-      pos: Math.round(posOf(i) * 10) / 10
+      pos: badgePositions[i],
+      label: getBadgeDisplayLabel(b, totalDays >= b.days)
     }))
-    const badgeProgress = getBadgeProgress(badgeDefs, totalDays)
+    const badgeSegments = getBadgeSegments(badgeDefs, totalDays)
 
     // 单枚解锁庆祝反馈:对比持久化"已见解锁集合",只庆祝新增勋章。
     // 首次运行(无存储)仅初始化集合,避免老用户一打开就被历史勋章刷屏。
@@ -111,7 +113,7 @@ Page({
       maxDurationText: util.formatDuration(stats.maxDuration),
       totalDays,
       trainingBadges,
-      badgeProgress,
+      badgeSegments,
       nextBadgeHint,
       monthRecords: records,
       historyList,

pages/records/records.wxml

@@ -59,7 +59,10 @@
         <text class="badge-status-next" wx:if="{{nextBadgeHint}}">{{nextBadgeHint}}</text>
       </view>
       <view class="badge-track">
-        <view class="badge-fill" style="width: {{badgeProgress}}%;"></view>
+        <view class="badge-segment" wx:for="{{badgeSegments}}" wx:key="index"
+          style="left: {{item.left}}%; width: {{item.width}}%;">
+          <view class="badge-segment-fill" style="width: {{item.progress}}%;"></view>
+        </view>
         <view class="badge-node {{item.unlocked ? 'unlocked' : ''}} {{item.justUnlocked ? 'celebrate' : ''}}"
           wx:for="{{trainingBadges}}" wx:key="days"
           style="left: {{item.pos}}%;"
@@ -72,7 +75,7 @@
       <view class="badge-labels">
         <text class="badge-label {{item.unlocked ? 'unlocked' : ''}}"
           wx:for="{{trainingBadges}}" wx:key="days"
-          style="left: {{item.pos}}%;">{{item.unlocked ? item.name : item.days}}</text>
+          style="left: {{item.pos}}%;">{{item.label}}</text>
       </view>
     </view>
   </ui-card>

pages/records/records.wxss

@@ -101,11 +101,14 @@
   border-radius: 2rpx;
 }
 
-.badge-fill {
+.badge-segment {
   position: absolute;
-  left: 0;
   top: 0;
   height: 100%;
+}
+
+.badge-segment-fill {
+  height: 100%;
   background: var(--primary);
   border-radius: 2rpx;
   transition: width 0.6s ease;