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

- progress-ring 新增 sets/currentSet/resting/successColor 属性,
  圆环外圈绘制分段弧(已完成=主色/当前=呼吸光点/休息下一组=绿),单组模式零渲染
- timer 删除顶部 circuit-bar 进度面板,布局骨架三模式统一
- 呼吸环淡化(描边 0.55→0.20,柔光渐变强度减半)
- 目标卡与提示气泡合并为 info-bubble,状态文案(撑住/休息中/已暂停)并入气泡顶部

components/progress-ring/progress-ring.js

@@ -19,7 +19,20 @@ Component({
     // 60 to avoid clutter). 0 = no ticks drawn. Quarter ticks are emphasized.
     ticks: { type: Number, value: 0 },
     // Small secondary label under the big time (e.g. "目标 30 秒"). Empty = hidden.
-    subText: { type: String, value: '' }
+    subText: { type: String, value: '' },
+    // ---- Circuit (循环训练) set progress ----
+    // An outer band of arc segments, one per set, wrapped around the countdown
+    // ring. sets <= 0 (default) disables the band entirely so single/free mode
+    // renders exactly as before (zero extra draw cost).
+    sets: { type: Number, value: 0 },
+    // 1-based index of the set the CircuitTimer is currently on. While resting it
+    // still points at the just-finished set (same contract as the old dots panel):
+    // working -> sets before it are done, itself is active;
+    // resting -> itself is done, the next set is highlighted green.
+    currentSet: { type: Number, value: 0 },
+    resting: { type: Boolean, value: false },
+    // Highlight color for the "next set" preview during rest.
+    successColor: { type: String, value: '#00B578' }
   },
 
   data: {
@@ -37,6 +50,11 @@ Component({
 
     'remaining, duration, size, ringWidth, primaryColor, primaryLightColor, trackColor, ticks'() {
       this._draw()
+    },
+
+    // Set-progress band: re-render and (re)arm / stop the breathing loop.
+    'sets, currentSet, resting, status'() {
+      this._syncSetPulse()
     }
   },
 
@@ -54,8 +72,14 @@ Component({
           canvas.height = displaySize * dpr
           this._ctx = canvas.getContext('2d')
           this._dpr = dpr
+          this._canvas = canvas
           this._draw()
+          this._syncSetPulse()
         })
+    },
+
+    detached() {
+      this._stopSetPulse()
     }
   },
 
@@ -97,21 +121,36 @@ Component({
       // ---- tick marks (inside the band) ----
       if (ticks > 0) {
         const innerR = radius - lw / 2 - (4 * dpr)   // just inside the band
-        const q = Math.max(1, Math.round(ticks / 4))  // quarter emphasis step
         const shortLen = 6 * dpr
         const longLen = 12 * dpr
+        const stepDeg = 360 / ticks
+        // 短刻度:均匀铺满;但跳过靠近四方位(12/3/6/9 点)的,让位给长刻度,避免双线重叠
         for (let i = 0; i < ticks; i++) {
-          const ang = -Math.PI / 2 + (i / ticks) * Math.PI * 2
-          const isLong = (i % q === 0)
-          const len = isLong ? longLen : shortLen
+          const deg = (i / ticks) * 360
+          const nearestQuarter = Math.round(deg / 90) * 90
+          if (Math.abs(deg - nearestQuarter) < stepDeg) continue
+          const ang = -Math.PI / 2 + (deg * Math.PI) / 180
           const cos = Math.cos(ang)
           const sin = Math.sin(ang)
           ctx.beginPath()
           ctx.moveTo(cx + innerR * cos, cy + innerR * sin)
-          ctx.lineTo(cx + (innerR - len) * cos, cy + (innerR - len) * sin)
-          ctx.lineWidth = (isLong ? 3 : 1.5) * dpr
+          ctx.lineTo(cx + (innerR - shortLen) * cos, cy + (innerR - shortLen) * sin)
+          ctx.lineWidth = 1.5 * dpr
           ctx.lineCap = 'round'
-          ctx.strokeStyle = isLong ? 'rgba(0,0,0,0.28)' : 'rgba(0,0,0,0.12)'
+          ctx.strokeStyle = 'rgba(0,0,0,0.12)'
+          ctx.stroke()
+        }
+        // 四分位长刻度:精确落在 12/3/6/9 点(无论 ticks 是否整除 4,都对齐正中)
+        for (let k = 0; k < 4; k++) {
+          const ang = -Math.PI / 2 + k * (Math.PI / 2)
+          const cos = Math.cos(ang)
+          const sin = Math.sin(ang)
+          ctx.beginPath()
+          ctx.moveTo(cx + innerR * cos, cy + innerR * sin)
+          ctx.lineTo(cx + (innerR - longLen) * cos, cy + (innerR - longLen) * sin)
+          ctx.lineWidth = 3 * dpr
+          ctx.lineCap = 'round'
+          ctx.strokeStyle = 'rgba(0,0,0,0.28)'
           ctx.stroke()
         }
       }
@@ -167,6 +206,168 @@ Component({
         ctx.fill()
         ctx.restore()
       }
+
+      // set-progress band (circuit mode only; no-op when sets <= 0)
+      this._drawSetArcs(this._setPulsePhase || 0.6)
+    },
+
+    /**
+     * Map currentSet/resting onto the three segment states, mirroring the old
+     * dots panel's contract (see the property doc for the semantics).
+     */
+    _setArcState() {
+      const { sets, currentSet, resting } = this.data
+      let done = 0
+      let active = 0
+      let next = 0
+      if (sets > 0 && currentSet > 0) {
+        if (resting) {
+          done = Math.min(currentSet, sets)
+          if (currentSet < sets) next = currentSet + 1
+        } else {
+          done = Math.max(0, currentSet - 1)
+          active = currentSet
+        }
+      }
+      return { done, active, next }
+    },
+
+    /**
+     * Draw (or re-draw) the outer set-progress band. `pulse` is the breathing
+     * phase 0..1 used for the active / next segment; pass a fixed value for a
+     * static render (idle / paused).
+     *
+     * Only the band itself is cleared (clipped to a ring) so the inner
+     * countdown arc is never touched — the rAF loop below re-renders this
+     * band every frame without interfering with the per-second _draw().
+     */
+    _drawSetArcs(pulse) {
+      const ctx = this._ctx
+      if (!ctx) return
+      const { size, ringWidth, sets, primaryColor, trackColor, successColor, status } = this.data
+      if (!sets || sets <= 0) return
+
+      const dpr = this._dpr
+      const cx = (size / 2) * dpr
+      const cy = (size / 2) * dpr
+      // Same radius math as _draw(): the countdown arc sits at `radius`; the
+      // set band wraps just outside it so the two read as concentric layers.
+      const radius = ((size - ringWidth) / 2) * dpr - 6 * dpr
+      const arcR = radius + (ringWidth / 2) * dpr + 3 * dpr
+      const arcW = 8 * dpr
+      const band = arcW / 2 + 3 * dpr
+
+      const { done, active, next } = this._setArcState()
+
+      // Clear only the outer band (ring clip -> inner arc untouched).
+      ctx.save()
+      ctx.beginPath()
+      ctx.arc(cx, cy, arcR + band, 0, Math.PI * 2)
+      ctx.arc(cx, cy, arcR - band, 0, Math.PI * 2, true)
+      ctx.clip()
+      ctx.clearRect(cx - arcR - band, cy - arcR - band, (arcR + band) * 2, (arcR + band) * 2)
+      ctx.restore()
+
+      const p = pulse == null ? 0.6 : Math.max(0, Math.min(1, pulse))
+      const paused = status === 'paused'
+      const segAngle = (Math.PI * 2) / sets
+      const gap = (2.5 * Math.PI) / 180
+      const startAngle = -Math.PI / 2
+
+      for (let i = 1; i <= sets; i++) {
+        const a0 = startAngle + (i - 1) * segAngle + gap / 2
+        const a1 = startAngle + i * segAngle - gap / 2
+
+        let color = trackColor
+        if (i <= done || i === active) color = primaryColor
+        else if (i === next) color = successColor
+
+        const emphasized = i === active || i === next
+        const alpha = emphasized ? (paused ? 0.7 : 0.45 + 0.55 * p) : 1
+
+        ctx.globalAlpha = alpha
+        ctx.beginPath()
+        ctx.arc(cx, cy, arcR, a0, a1)
+        ctx.strokeStyle = color
+        ctx.lineWidth = arcW
+        ctx.lineCap = 'round'
+        ctx.stroke()
+        ctx.globalAlpha = 1
+
+        // Glowing endpoint dot on the emphasized segment.
+        if (emphasized) {
+          const dx = cx + arcR * Math.cos(a1)
+          const dy = cy + arcR * Math.sin(a1)
+          const dotR = (arcW / 2) * (paused ? 1 : 0.85 + 0.35 * p)
+          const glowColor = i === active ? primaryColor : successColor
+          ctx.save()
+          ctx.shadowColor = glowColor
+          ctx.shadowBlur = 8 * dpr
+          ctx.globalAlpha = paused ? 0.9 : 0.55 + 0.45 * p
+          ctx.beginPath()
+          ctx.arc(dx, dy, dotR, 0, Math.PI * 2)
+          ctx.fillStyle = glowColor
+          ctx.fill()
+          ctx.restore()
+          // white core for a "light bulb" feel
+          ctx.beginPath()
+          ctx.arc(dx, dy, dotR * 0.45, 0, Math.PI * 2)
+          ctx.fillStyle = 'rgba(255,255,255,0.85)'
+          ctx.fill()
+        }
+      }
+    },
+
+    _startSetPulse() {
+      if (this._setPulseRAF != null) return
+      const canvas = this._canvas
+      if (!canvas || typeof canvas.requestAnimationFrame !== 'function') {
+        // Older canvas implementations without rAF: render one static frame.
+        this._drawSetArcs(0.6)
+        return
+      }
+      const loop = () => {
+        if (!this._ctx) return
+        const t = Date.now() / 1000
+        this._setPulsePhase = 0.5 + 0.5 * Math.sin((t * Math.PI * 2) / 1.6)
+        this._drawSetArcs(this._setPulsePhase)
+        this._setPulseRAF = canvas.requestAnimationFrame(loop)
+      }
+      this._setPulseRAF = canvas.requestAnimationFrame(loop)
+    },
+
+    _stopSetPulse() {
+      if (this._setPulseRAF == null) return
+      const canvas = this._canvas
+      if (canvas && typeof canvas.cancelAnimationFrame === 'function') {
+        canvas.cancelAnimationFrame(this._setPulseRAF)
+      }
+      this._setPulseRAF = null
+    },
+
+    /**
+     * (Re)arm or stop the breathing loop based on the current state.
+     * - sets <= 0          -> nothing to draw (single/free mode)
+     * - idle / completed   -> static render (no active/next segment)
+     * - paused             -> static render (pausing freezes all motion)
+     * - working / resting  -> breathe the active / next segment
+     */
+    _syncSetPulse() {
+      if (!this._ctx) return
+      const { sets, status } = this.data
+      if (sets <= 0) {
+        this._stopSetPulse()
+        return
+      }
+      const state = this._setArcState()
+      const wantsPulse = (state.active > 0 || state.next > 0) && status !== 'paused'
+      if (wantsPulse) {
+        this._startSetPulse()
+      } else {
+        this._stopSetPulse()
+        this._setPulsePhase = 0.6
+        this._drawSetArcs(0.6)
+      }
     }
   }
 })