feat(timer): 训练超时与完成展示优化 (v3.0)

- 超时后圆环底环变绿,中心改显总训练时长(MM:SS 实时涨),移除 +Xs 小徽章
- 完成弹窗成绩由纯秒数改为分秒(如 1分23秒),>=60s 时缩字号防撑破卡片
- 修复结束确认弹窗停留期间计时器未暂停导致训练时长虚增:onStop 暂停、取消恢复、确认取暂停值
- progress-ring 新增 elapsed prop,remaining=0 时中心切显总时长
- 清理废弃的 overtime 字段与 .overtime-badge 样式
- 版本号 v2.9 -> v3.0,更新日期

Co-Authored-By: Claude <noreply@anthropic.com>

components/progress-ring/progress-ring.js

@@ -11,7 +11,10 @@ Component({
     primaryLightColor: { type: String, value: '#FF8C5A' },
     // Track (background ring) color. Caller passes a darker shade in dark mode
     // so the ring isn't an eye-searing light circle on a dark background.
-    trackColor: { type: String, value: '#EEEEEE' }
+    trackColor: { type: String, value: '#EEEEEE' },
+    // Total elapsed seconds (since start). Shown in the ring center once the
+    // countdown hits 0 (overtime mode) - replaces the old +Xs badge.
+    elapsed: { type: Number, value: 0 }
   },
 
   data: {
@@ -20,10 +23,12 @@ Component({
   },
 
   observers: {
-    'remaining, status, duration'() {
+    'remaining, status, duration, elapsed'() {
       const texts = { idle: '准备开始', running: '坚持住', paused: '已暂停', completed: '完成!' }
+      // 倒计时阶段显示剩余;达标后 remaining 归零,改显总训练时长(overtime 模式)
+      const shown = this.data.remaining > 0 ? this.data.remaining : (this.data.elapsed || 0)
       this.setData({
-        displayTime: util.formatTime(this.data.remaining),
+        displayTime: util.formatTime(shown),
         statusText: texts[this.data.status] || ''
       })
     },

config.js

@@ -4,10 +4,10 @@
  */
 module.exports = {
   /** 应用版本号，外显在设置页「关于」 */
-  version: 'v2.9',
+  version: 'v3.0',
 
   /** 最后更新日期，外显在设置页「关于」 */
-  updatedAt: '2026-07-22',
+  updatedAt: '2026-07-25',
 
   /** 开发者名称 / 微信号，设置页点击可复制 */
   developer: '刘承',

pages/timer/timer.js

@@ -16,7 +16,7 @@ Page({
     isRunning: false,
     isPaused: false,
     isCompleted: false,
-    overtime: 0,
+    elapsed: 0,
     goalReached: false,
     hintTip: (config.postureTips && config.postureTips[0]) || '',
     todayTarget: 0,
@@ -82,7 +82,8 @@ Page({
       todayTarget: target,
       planDay: isFreeMode ? 0 : planDay,
       isFreeMode,
-      goalReached: false
+      goalReached: false,
+      elapsed: 0
     })
 
     if (this._timer) {
@@ -104,7 +105,7 @@ Page({
       onTick: (tick) => {
         this.setData({
           remaining: tick.remaining > 0 ? tick.remaining : 0,
-          overtime: tick.remaining <= 0 ? tick.elapsed - this.data.duration : 0
+          elapsed: tick.elapsed
         })
         this._updateHintTip(tick)
         this._remind(tick)
@@ -321,11 +322,24 @@ Page({
     // 用自定义确认弹窗替代 wx.showModal:
     // 系统原生 modal 在 WebView stacking context 下 hit-test 偶发不稳,
     // 自定义 modal + catchtouchmove 与现有 completion-mask 同模式,行为更可靠。
-    this.setData({ showStopConfirm: true })
+    // 弹窗停留期间暂停计时,避免犹豫时间被计入训练时长
+    this._stopWasPaused = this.data.isPaused
+    const patch = { showStopConfirm: true }
+    if (this.data.isRunning && !this.data.isPaused) {
+      this._timer.pause()
+      patch.isPaused = true
+      patch.status = 'paused'
+    }
+    this.setData(patch)
   },
 
   onStopCancel() {
     this.setData({ showStopConfirm: false })
+    // 弹窗前若正在计时(被 onStop 暂停),取消后恢复
+    if (!this._stopWasPaused && this.data.isRunning) {
+      this._timer.resume()
+      this.setData({ isRunning: true, isPaused: false, status: 'running' })
+    }
   },
 
   onStopConfirm() {
@@ -462,7 +476,7 @@ Page({
       isRunning: false,
       isPaused: false,
       remaining: this.data.duration,
-      overtime: 0,
+      elapsed: 0,
       goalReached: false
     })
   },

pages/timer/timer.wxml

@@ -28,12 +28,13 @@
       wx:if="{{status !== 'completed'}}"
       duration="{{duration}}"
       remaining="{{isCompleted ? 0 : remaining}}"
+      elapsed="{{elapsed}}"
       size="{{360}}"
       ringWidth="{{22}}"
       status="{{status}}"
       primaryColor="{{theme.primary}}"
       primaryLightColor="{{theme.primaryLight}}"
-      trackColor="{{isDark ? '#3A3A40' : '#EEEEEE'}}"
+      trackColor="{{elapsed >= duration ? '#00B578' : (isDark ? '#3A3A40' : '#EEEEEE')}}"
     ></progress-ring>
 
     <!-- 完成庆祝粒子 -->
@@ -45,11 +46,6 @@
       <image class="spark s5" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
       <image class="spark s6" src="{{icons.likeFill}}" mode="aspectFit"></image>
     </view>
-
-    <view class="overtime-badge" wx:if="{{overtime > 0}}">
-      <image class="overtime-icon" src="{{icons.hotFill}}" mode="aspectFit"></image>
-      <text>+{{overtime}}s</text>
-    </view>
   </view>
 
   <!-- 状态提示 -->
@@ -134,6 +130,24 @@
   </view>
 
   <!-- 完成训练全屏弹窗 -->
+  <wxs module="fmt">
+    // 秒数 -> 分秒展示: 45->"45"/"秒", 83->"1分23"/"秒", 120->"2"/"分钟"
+    // 与 utils/util.js 的 formatDuration 口径一致(整分钟走分钟单位)
+    module.exports = {
+      numPart: function (s) {
+        s = Math.floor(s || 0)
+        if (s < 60) return '' + s
+        var m = Math.floor(s / 60)
+        var sec = s % 60
+        return sec === 0 ? '' + m : m + '分' + sec
+      },
+      unitPart: function (s) {
+        s = Math.floor(s || 0)
+        if (s < 60) return '秒'
+        return s % 60 === 0 ? '分钟' : '秒'
+      }
+    }
+  </wxs>
   <view class="completion-mask" wx:if="{{showCompletion}}" catchtouchmove="onNoop">
     <view class="completion-card">
       <view class="completion-emoji-wrap">
@@ -142,8 +156,8 @@
       <text class="completion-title">{{completionMessage}}</text>
 
       <view class="completion-number-wrap">
-        <text class="completion-number">{{completionElapsed}}</text>
+        <text class="completion-number {{completionElapsed >= 60 ? 'completion-number--long' : ''}}">{{fmt.numPart(completionElapsed)}}</text>
-        <text class="completion-unit">秒</text>
+        <text class="completion-unit">{{fmt.unitPart(completionElapsed)}}</text>
       </view>
       <text class="completion-label">本次训练</text>
 

pages/timer/timer.wxss

@@ -66,30 +66,6 @@
   100% { opacity: 0; transform: translate(0, -80rpx) scale(0.4); }
 }
 
-/* overtime badge */
-.overtime-badge {
-  position: absolute;
-  bottom: 10rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(var(--success-rgb), 0.12);
-  border: 2rpx solid rgba(var(--success-rgb), 0.3);
-  color: var(--success);
-  padding: 8rpx 24rpx;
-  border-radius: 24rpx;
-  font-size: 28rpx;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 6rpx;
-  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.overtime-icon {
-  width: 28rpx;
-  height: 28rpx;
-}
-
 /* ---- hint section ---- */
 .hint-section {
   margin-top: 36rpx;
@@ -296,6 +272,11 @@
   text-shadow: 0 4rpx 12rpx rgba(var(--primary-rgb), 0.2);
 }
 
+/* >= 60 秒时数字部分变成「X分Y」,字符变多,缩小字号避免撑破卡片 */
+.completion-number--long {
+  font-size: 140rpx;
+}
+
 .completion-unit {
   font-size: 36rpx;
   font-weight: 600;

project.config.json

@@ -2,7 +2,10 @@
   "description": "平板支撑训练小程序",
   "packOptions": {
     "ignore": [
-      { "type": "glob", "value": ".!*" }
+      {
+        "value": ".!*",
+        "type": "glob"
+      }
     ],
     "include": []
   },