fix(timer): 完成页圆环覆盖弹窗 + 自定义确认 modal 替代 wx.showModal

训练完成的三个相关 bug:
1. progress-ring 圆环覆盖完成页弹窗 → @tap ring wx:if 让完成态时直接 unmount
2. 完成弹窗内按钮需要点 2 次才能响应 → completion-mask 加 catchtouchmove 拦截 touchmove
3. wx.showModal "结束训练" 系统弹窗在 stacking context 下 hit-test 不稳

根因: .timer-page.page-enter 永久保留 transform: translateY(0),
创建永久 stacking context,影响 native modal 的 WebView 部分 hit-test。

修法:
- 新增自定义 stop-confirm modal (catchtouchmove + 内部 catchtap + bindtap),
  与 ui-modal/settings.plan-editor-mask 同模式,行为可靠
- completion-mask 用相同模式拦截 touchmove
- 顺便修 overtime-badge 暗色 (rgba(var(--success-rgb)))
This commit is contained in:
2026-07-08 15:21:46 +08:00
parent 503f01f6e9
commit 326bc013fe
3 changed files with 119 additions and 11 deletions
+16 -1
View File
@@ -25,6 +25,7 @@
wx:if="{{status !== 'completed'}}"></view>
<progress-ring
wx:if="{{status !== 'completed'}}"
duration="{{duration}}"
remaining="{{isCompleted ? 0 : remaining}}"
size="{{360}}"
@@ -32,6 +33,7 @@
status="{{status}}"
primaryColor="{{theme.primary}}"
primaryLightColor="{{theme.primaryLight}}"
trackColor="{{isDark ? '#2C2C2E' : '#EEEEEE'}}"
></progress-ring>
<!-- 完成庆祝粒子 -->
@@ -114,8 +116,21 @@
</view>
</view>
<!-- 自定义"结束训练"确认弹窗 — 替代 wx.showModal,避免系统原生 modal
在 WebView stacking context 下 hit-test 不稳的问题 -->
<view class="stop-confirm-mask" wx:if="{{showStopConfirm}}" catchtouchmove="onNoop">
<view class="stop-confirm-card" catchtap="onNoop">
<text class="stop-confirm-title">结束训练</text>
<text class="stop-confirm-content">确定要结束本次训练吗?</text>
<view class="stop-confirm-actions">
<view class="stop-confirm-btn" bindtap="onStopCancel">取消</view>
<view class="stop-confirm-btn stop-confirm-btn--primary" bindtap="onStopConfirm">确定</view>
</view>
</view>
</view>
<!-- 完成训练全屏弹窗 -->
<view class="completion-mask" wx:if="{{showCompletion}}">
<view class="completion-mask" wx:if="{{showCompletion}}" catchtouchmove="onNoop">
<view class="completion-card">
<view class="completion-emoji-wrap">
<text class="completion-emoji">{{completionLevel === 'first' ? '🎉' : completionLevel === 'record' ? '🏆' : completionLevel === 'milestone' ? '🔥' : '✨'}}</text>