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>
2026-07-25 11:36:32 +08:00
parent e712741425
commit ed7029faf9
6 changed files with 60 additions and 43 deletions
@@ -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] || ''
      })
    },
@@ -4,10 +4,10 @@
 */
 module.exports = {
  /** 应用版本号，外显在设置页「关于」 */
-  version: 'v2.9',
+  version: 'v3.0',

  /** 最后更新日期，外显在设置页「关于」 */
-  updatedAt: '2026-07-22',
+  updatedAt: '2026-07-25',

  /** 开发者名称 / 微信号，设置页点击可复制 */
  developer: '刘承',
@@ -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
    })
  },
@@ -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-unit">秒</text>
+        <text class="completion-number {{completionElapsed >= 60 ? 'completion-number--long' : ''}}">{{fmt.numPart(completionElapsed)}}</text>
+        <text class="completion-unit">{{fmt.unitPart(completionElapsed)}}</text>
      </view>
      <text class="completion-label">本次训练</text>

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