wx_pbzc/pages/timer/timer.wxml

<view class="container timer-page page-enter" style="{{themeStyle}}">

  <!-- 全屏彩带完成庆祝 -->
  <view class="confetti" wx:if="{{isCompleted}}">
    <view
      wx:for="{{confettiPieces}}"
      wx:key="i"
      class="confetti-piece confetti-piece--{{celebrationLevel}}"
      style="left: {{item.left}}%; background: {{item.color}}; animation-delay: {{item.delay}}s; transform: rotate({{item.rotate}}deg); width: {{item.size}}rpx; height: {{item.size * 2}}rpx;"
    ></view>
  </view>

  <!-- 成就横幅 (record / milestone / first) -->
  <view class="achievement-banner" wx:if="{{isCompleted && celebrationLevel !== 'normal'}}">
    <text class="achievement-text">{{celebrationMessage}}</text>
  </view>

  <!-- 呼吸引导环 + 进度条 -->
  <view class="ring-wrapper">
    <view class="breathe-ring breathe-ring-1 {{status === 'running' ? 'fast' : ''}}"
      wx:if="{{status !== 'completed'}}"></view>
    <view class="breathe-ring breathe-ring-2 {{status === 'running' ? 'fast' : ''}}"
      wx:if="{{status !== 'completed'}}"></view>
    <view class="breathe-ring breathe-ring-3 {{status === 'running' ? 'fast' : ''}}"
      wx:if="{{status !== 'completed'}}"></view>

    <progress-ring
      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="{{elapsed >= duration ? '#00B578' : (isDark ? '#3A3A40' : '#EEEEEE')}}"
    ></progress-ring>

    <!-- 完成庆祝粒子 -->
    <view class="celebrate-burst" wx:if="{{isCompleted}}">
      <image class="spark s1" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
      <image class="spark s2" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
      <image class="spark s3" src="{{icons.crownFill}}" mode="aspectFit"></image>
      <image class="spark s4" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
      <image class="spark s5" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
      <image class="spark s6" src="{{icons.likeFill}}" mode="aspectFit"></image>
    </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="{{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">{{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>

  <!-- 控制按钮 -->
  <view class="controls">
    <ui-btn
      wx:if="{{!isRunning && !isPaused}}"
      variant="primary"
      size="xl"
      block
      text="开始"
      icon-src="{{icons.playWhite}}"
      bindtap="onStart"
    ></ui-btn>

    <view class="ctrl-row" wx:if="{{isRunning || isPaused}}">
      <ui-btn
        wx:if="{{!isPaused}}"
        variant="ghost"
        size="xl"
        text="暂停"
        icon-src="{{icons.notificationForbidFill}}"
        custom-style="margin-right: 28rpx;"
        bindtap="onPause"
      ></ui-btn>
      <ui-btn
        wx:if="{{isPaused}}"
        variant="primary"
        size="xl"
        text="继续"
        icon-src="{{icons.playWhite}}"
        custom-style="margin-right: 28rpx;"
        bindtap="onStart"
      ></ui-btn>
      <ui-btn
        variant="outline"
        size="xl"
        text="结束"
        icon-src="{{icons.stop}}"
        bindtap="onStop"
      ></ui-btn>
    </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>

  <!-- 完成训练全屏弹窗 -->
  <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">
        <image class="completion-icon" src="{{completionLevel === 'first' ? icons.partyWhite : completionLevel === 'record' ? icons.trophyWhite : completionLevel === 'milestone' ? icons.hotWhite : icons.sparkleWhite}}" mode="aspectFit"></image>
      </view>
      <text class="completion-title">{{completionMessage}}</text>

      <view class="completion-number-wrap">
        <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>

      <view class="completion-overtime" wx:if="{{completionOvertime > 0}}">
        <text class="overtime-plus">+{{completionOvertime}}</text>
        <text class="overtime-label">秒超长发挥</text>
      </view>

      <view class="completion-streak" wx:if="{{completionStreak > 0}}">
        <image class="streak-flame" src="{{icons.hotFill}}" mode="aspectFit"></image>
        <text class="streak-text">连续打卡 {{completionStreak}} 天</text>
      </view>

      <view class="completion-actions">
        <view class="completion-btn completion-btn--primary" bindtap="onTrainAgain">
          <text>再来一次</text>
        </view>
        <view class="completion-btn" bindtap="onViewRecords">
          <text>查看记录</text>
        </view>
        <!-- openType="share" 会触发 Page.onShareAppMessage(已实现),
             没有这个属性 + onShareAppMessage 时分享按钮就是灰色的。
             ui-btn 透传 openType 到内部原生 button。 -->
        <ui-btn
          variant="ghost"
          size="md"
          customStyle="flex:1; height:88rpx;"
          text="分享"
          openType="share"
        ></ui-btn>
      </view>
      <view class="completion-btn completion-btn--text" bindtap="onCloseCompletion">
        <text>回到首页</text>
      </view>
    </view>
  </view>
</view>