feat(timer): 训练页改版 hero 风格 + 进度环刻度 + 醒目姿态提示气泡

- progress-ring: canvas 新增秒刻度层(四分位加粗), 环内加 subText, 移除组件内 statusText
- timer.wxml: 环下方状态词 + 目标信息卡(今日目标·第N天›静态箭头) + 运行提示; 进度环传 ticks/subText
- timer.js: 派生 ringTicks/ringSubText/statusText/goalLine/runningTip/tipType/tipIcon, 各生命周期计算下发
- timer.wxss: 按钮贴底(flex-start+margin-top:auto), 新增 .timer-status/.goal-card/.timer-tip 气泡卡片(主色左边框+小三角+tipPulse 呼吸), 文字放大加粗
- 姿态提示分语义: posture/phase(主色) / done(成功色), 图标用 peopleFill/successFill
- 状态机/计时/循环FSM/呼吸环/彩带/弹窗/语音震动常亮全部保留
- 另含 index 进度地图右上角奖杯图标删除(quest-trophy 样式清理)
This commit is contained in:
2026-08-11 15:38:37 +08:00
parent 6f89494c0b
commit 0464eeaba6
8 changed files with 209 additions and 82 deletions
+14 -26
View File
@@ -72,6 +72,8 @@
primaryColor="{{theme.primary}}"
primaryLightColor="{{theme.primaryLight}}"
trackColor="{{isCircuitMode ? '#EEEEEE' : (elapsed >= duration ? '#00B578' : '#EEEEEE')}}"
ticks="{{ringTicks}}"
subText="{{ringSubText}}"
></progress-ring>
<!-- 完成庆祝粒子 -->
@@ -85,32 +87,18 @@
</view>
</view>
<!-- 状态提示 -->
<view class="hint-section">
<view class="hint-row" wx:if="{{status === 'idle'}}">
<image class="hint-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
<text class="hint-text">
<block wx:if="{{isCircuitMode}}">循环训练 · 共需撑 {{circuitTotalWork}} 秒</block>
<block wx:elif="{{isFreeMode}}">自由训练 · 目标 {{duration}} 秒</block>
<block wx:else>今日目标 {{duration}} 秒 · 第 {{planDay}} 天</block>
</text>
</view>
<view class="hint-row" wx:elif="{{status === 'running' && goalReached}}">
<image class="hint-icon running-pulse" src="{{icons.hotFill}}" mode="aspectFit"></image>
<text class="hint-text running">目标达成,继续挑战!</text>
</view>
<view class="hint-row" wx:elif="{{status === 'running'}}">
<image class="hint-icon running-pulse" src="{{icons.likeFill}}" mode="aspectFit"></image>
<text class="hint-text running">{{isCircuitMode ? phaseTip : hintTip}}</text>
</view>
<view class="hint-row" wx:elif="{{status === 'paused'}}">
<image class="hint-icon" src="{{icons.notificationForbidFill}}" mode="aspectFit"></image>
<text class="hint-text paused">已暂停</text>
</view>
<view class="hint-row completed-hint" wx:elif="{{status === 'completed'}}">
<image class="hint-icon completed-bounce" src="{{icons.roundCheckFill}}" mode="aspectFit"></image>
<text class="hint-text completed">目标完成! 继续坚持!</text>
</view>
<!-- 状态文案(环下方) + 目标信息卡 + 运行提示 -->
<view class="timer-status status--{{status}}" wx:if="{{status !== 'completed'}}">{{statusText}}</view>
<view class="goal-card" wx:if="{{status !== 'completed'}}">
<image class="goal-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
<text class="goal-text">{{goalLine}}</text>
<text class="goal-arrow"></text>
</view>
<view class="timer-tip timer-tip--{{tipType}}" wx:if="{{runningTip}}">
<image class="timer-tip-icon" src="{{tipIcon}}" mode="aspectFit"></image>
<text class="timer-tip-text">{{runningTip}}</text>
</view>
<!-- 控制按钮 -->