feat(timer): 循环训练组进度改为圆环分段弧 + 信息气泡三行合一
- progress-ring 新增 sets/currentSet/resting/successColor 属性, 圆环外圈绘制分段弧(已完成=主色/当前=呼吸光点/休息下一组=绿),单组模式零渲染 - timer 删除顶部 circuit-bar 进度面板,布局骨架三模式统一 - 呼吸环淡化(描边 0.55→0.20,柔光渐变强度减半) - 目标卡与提示气泡合并为 info-bubble,状态文案(撑住/休息中/已暂停)并入气泡顶部
This commit is contained in:
+27
-51
@@ -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>
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
|
||||
Reference in New Issue
Block a user