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>
This commit is contained in:
liucheng
2026-07-25 11:36:32 +08:00
parent e712741425
commit ed7029faf9
6 changed files with 60 additions and 43 deletions
+22 -8
View File
@@ -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>