feat(timer): 循环训练组进度改为圆环分段弧 + 信息气泡三行合一

- progress-ring 新增 sets/currentSet/resting/successColor 属性,
  圆环外圈绘制分段弧(已完成=主色/当前=呼吸光点/休息下一组=绿),单组模式零渲染
- timer 删除顶部 circuit-bar 进度面板,布局骨架三模式统一
- 呼吸环淡化(描边 0.55→0.20,柔光渐变强度减半)
- 目标卡与提示气泡合并为 info-bubble,状态文案(撑住/休息中/已暂停)并入气泡顶部
This commit is contained in:
2026-08-12 09:39:41 +08:00
parent 0464eeaba6
commit 05c4763e49
18 changed files with 720 additions and 497 deletions
+27 -51
View File
@@ -15,44 +15,9 @@
<text class="achievement-text">{{celebrationMessage}}</text>
</view>
<!-- 循环训练进度面板:组点阵 + 第 X/Y 组 + 阶段徽章 + 累计秒数。
层次分工:这里管「第几组」(宏观),中间的进度环管「本组还剩几秒」(微观)。 -->
<view
class="circuit-bar {{isResting ? 'is-rest' : ''}} {{status === 'paused' ? 'is-paused' : ''}}"
wx:if="{{isCircuitMode && status !== 'completed'}}"
>
<!-- 组进度点阵:已完成 / 进行中 / 下一组 三态 -->
<view class="circuit-dots" wx:if="{{circuitShowDots}}">
<view
wx:for="{{circuitDots}}"
wx:key="*this"
class="circuit-dot {{item <= dotsDone ? 'is-done' : ''}} {{item === dotsActive ? 'is-active' : ''}} {{item === dotsNext ? 'is-next' : ''}}"
></view>
</view>
<!-- 组数过多(>15)时退化为线性进度条,避免点阵挤成头发丝 -->
<view class="circuit-track" wx:else>
<view class="circuit-track-fill" style="width: {{dotsDone * 100 / totalSets}}%"></view>
</view>
<view class="circuit-meta">
<view class="circuit-count">
<text class="circuit-count-num">{{status === 'idle' ? totalSets : currentSet}}</text>
<text class="circuit-count-total" wx:if="{{status !== 'idle'}}">/{{totalSets}}</text>
<text class="circuit-count-unit">组</text>
</view>
<view class="circuit-phase circuit-phase--{{status === 'paused' ? 'pause' : (status === 'idle' ? 'idle' : (isResting ? 'rest' : 'work'))}}">
<view class="circuit-phase-dot"></view>
<text class="circuit-phase-text">{{status === 'paused' ? '已暂停' : (status === 'idle' ? '准备开始' : (isResting ? '休息中' : '撑住'))}}</text>
</view>
</view>
<text class="circuit-sub">
<block wx:if="{{status === 'idle'}}">每组 {{circuitHold}} 秒{{circuitRest > 0 ? ' · 休息 ' + circuitRest + ' 秒' : ''}}</block>
<block wx:else>已撑 {{workTotal}} 秒 · 目标 {{circuitTotalWork}} 秒</block>
</text>
</view>
<!-- 呼吸引导环 + 进度条 -->
<!-- 呼吸引导环 + 进度条。循环训练的组进度不再占一块独立面板,
而是由 progress-ring 在圆环外圈画一圈分段弧(见组件的 sets/currentSet/resting 属性),
保证单组/自由/循环三模式共用同一套页面骨架,切换零跳动。 -->
<view class="ring-wrapper">
<view class="breathe-ring breathe-ring-1 {{status === 'running' ? 'fast' : ''}}"
wx:if="{{status !== 'completed'}}"></view>
@@ -60,13 +25,16 @@
wx:if="{{status !== 'completed'}}"></view>
<view class="breathe-ring breathe-ring-3 {{status === 'running' ? 'fast' : ''}}"
wx:if="{{status !== 'completed'}}"></view>
<!-- 呼吸光环:进度环外侧一圈可见的描边辉光,随呼吸收放(idle 慢/running 快) -->
<view class="breath-aura {{status === 'running' ? 'fast' : ''}}"
wx:if="{{status !== 'completed'}}"></view>
<progress-ring
wx:if="{{status !== 'completed'}}"
duration="{{duration}}"
remaining="{{isCompleted ? 0 : remaining}}"
elapsed="{{elapsed}}"
size="{{360}}"
size="{{420}}"
ringWidth="{{22}}"
status="{{status}}"
primaryColor="{{theme.primary}}"
@@ -74,6 +42,9 @@
trackColor="{{isCircuitMode ? '#EEEEEE' : (elapsed >= duration ? '#00B578' : '#EEEEEE')}}"
ticks="{{ringTicks}}"
subText="{{ringSubText}}"
sets="{{totalSets}}"
currentSet="{{currentSet}}"
resting="{{isResting}}"
></progress-ring>
<!-- 完成庆祝粒子 -->
@@ -87,18 +58,23 @@
</view>
</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>
<!-- 信息气泡:状态 + 目标摘要 + 运行提示 三行合一(三模式公用)。
环下方原 statusText(撑住/休息中/已暂停)并入气泡顶部,圆环下只留一张卡。 -->
<view class="info-bubble" wx:if="{{status !== 'completed'}}">
<view class="info-line info-line--status info-line--{{status}} {{isResting ? 'info-line--rest' : ''}}">
<view class="info-status-dot"></view>
<text class="info-status-text">{{statusText}}</text>
</view>
<view class="info-divider"></view>
<view class="info-line info-line--goal">
<image class="info-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
<text class="info-text">{{goalLine}}</text>
</view>
<view class="info-divider" wx:if="{{runningTip}}"></view>
<view class="info-line info-line--tip info-line--{{tipType}}" wx:if="{{runningTip}}">
<image class="info-icon" src="{{tipIcon}}" mode="aspectFit"></image>
<text class="info-text">{{runningTip}}</text>
</view>
</view>
<!-- 控制按钮 -->