wx_pbzc/.workbuddy/memory/2026-08-12.md

# 2026-08-12 工作日志

## 循环训练页遮挡问题分析与 redesign 规划
- 读取 `pages/timer/timer.wxml/wxss/js`，定位循环训练态（circuit mode）布局。
- 问题根因：`.timer-page` 为 `flex column` 且 `min-height: 100vh` 但无滚动，中间圆环 420rpx + 多层呼吸环 488/620rpx + 顶部卡片 + 状态文字 + 目标卡 + 提示气泡的总高度在小屏/大字体下容易超过视口；底部 `.controls` 用 `margin-top: auto` 贴底，结果会被内容顶出可视区域或被安全区截断。
- 规划方案（未改代码）：
  1. 圆环从 420rpx 缩到 340rpx，呼吸环同步缩小。
  2. 顶部卡片内嵌组进度条，组数/阶段/配置摘要合一，减少一层垂直空间。
  3. 状态文字与圆环内副标题、目标卡与姿态提示错位排布，避免信息重复。
  4. 底部控件固定高度 + `padding-bottom: calc(32rpx + env(safe-area-inset-bottom))`，保证始终在安全区上方可见。
  5. 整体改为 `justify-content: space-between` 的 flex 布局，顶部-中部-底部三大块按可用空间分配。
- 已输出 SVG 线框图，待确认后再落地代码。

## 方案修正（用户反馈：timer 页是公用页面，仅循环模式有组进度条）
- 用户指出原规划把页面当"恒有顶部卡片"设计，切换模式重心会跳。
- 修订方案（未改代码）：**组进度从独立顶部面板改为「圆环外圈分段弧」**——
  - 在 `progress-ring` canvas 里加 sets/currentSet/isResting 属性，track 环外侧画一圈分段弧（已完成=主色、进行中=主色+端点光点、未开始=浅灰、休息时下一段=success 绿）。
  - 单组/自由模式不传 sets → 不渲染分段弧，页面结构与现状完全一致，零影响。
  - 圆环内副标题循环模式显示「第 X/Y 组」，单组显示「目标 X」。
  - 组数 >15 时退化为圆环下方细线进度条。
  - 顶部 circuit-bar 面板（wxml 20-53 行、wxss 15-225 行）整个删除，垂直空间全部还给圆环区与底部控件，从根上解决遮挡。
- 已确认 `components/progress-ring` 为 canvas 2d 实现（_draw() 内 ctx.arc/stroke），扩分段弧同套 API，可行。

## 落地：循环训练组进度改造（用户批准后实施）
- **`components/progress-ring/progress-ring.js`**：
  - 新增属性 `sets/currentSet/resting/successColor`（sets<=0 时零渲染，单组/自由模式不受影响）。
  - 新增 `_drawSetArcs(pulse)`：track 环外侧画分段弧（arcR = radius + ringWidth/2 + 3rpx，弧宽 8rpx，段间隔 2.5°）。三态：已完成=primaryColor、进行中=primaryColor+端点光点、休息时下一段=successColor('#00B578')，未开始=trackColor。
  - 呼吸动画用 `canvas.requestAnimationFrame` 循环（周期 1.6s，sin 相位），只清外圈环带（clip 环形避免碰内圈倒计时弧）；paused 时冻结为静态；`detached` 时 cancel。
  - `_draw()` 末尾补调 `_drawSetArcs(_setPulsePhase || 0.6)`，保证每秒全量重绘后分段弧仍在。
- **`pages/timer/timer.wxml`**：删除整个 `circuit-bar` 面板（原 18-53 行）；`<progress-ring>` 新增 `sets="{{totalSets}}" currentSet="{{currentSet}}" resting="{{isResting}}"`。
- **`pages/timer/timer.js`**：删除 `circuitDots/circuitShowDots/circuitTotalWork/dotsDone/dotsActive/dotsNext` 字段与 DOTS_MAX 点阵构建；onTick 由 dots* 改为 `ringSubText: 第 X/Y 组`；_initCircuit 的 ringSubText 改为 `共 X 组 · 休息 Y 秒`（rest=0 省略休息段），goalLine 保持 `每组 X · 共 Y 组`。
- **`pages/timer/timer.wxss`**：删除全部 circuit 样式（.circuit-bar/.circuit-dots/.circuit-track/.circuit-meta/.circuit-count/.circuit-phase/.circuit-sub 等）。
- **落地时的设计决策**：组数上限 50（_int clamp），环形 360° 空间充裕，50 段也不挤线（旧 DOTS_MAX=15 是横向卡片宽度受限），故**不做数量降级**；原方案"组数>15 退化线性条"在环形下无必要。
- 验证：node --check 通过；grep 无残留代码引用（仅注释说明文字）。

## 呼吸环淡化（用户反馈"圆线条太明显"）
- `timer.wxss` 的 `.breath-aura`：border 6rpx/0.55 → 4rpx/0.20；box-shadow 外层 40rpx/0.45 → 30rpx/0.22、内层 28rpx/0.22 → 20rpx/0.10；auraBreathe 透明度 0.55↔0.85 → 0.30↔0.50，fast 版 0.6↔0.9 → 0.34↔0.55。
- `.breathe-ring` 三档径向渐变强度：0.20/0.26/0.34 → 0.13/0.17/0.22，柔光更淡雅，不与倒计时环抢视觉。

## 目标卡与提示气泡轻量化（用户反馈"两个提示框不好看"）
- 问题：`.goal-card` 是白底卡片+右箭头，看起来像可点按钮但无 tap；`.timer-tip` 是白底气泡+左侧绿条+上方小三角+呼吸阴影，与目标卡叠在一起视觉噪音大。
- `timer.wxml`：删除 `.goal-card` 中的右箭头 `goal-arrow`。
- `timer.wxss`：
  - `.goal-card` 改为轻量胶囊标签：`inline-flex`、主色 8% 淡底、无边框无阴影、圆角 999rpx；padding 24→14rpx/24rpx；图标 40→32rpx；文字 28→26rpx、权重 600→500、主色。
  - `.timer-tip` 改为药丸标签：去掉 `border-left`、小三角、box-shadow、tipPulse 呼吸动画；背景主色 8% 淡底（done 态 success 10%）；padding 20/32→12/24rpx；圆角 999rpx；图标 40→30rpx；文字 30→26rpx、权重 600→500。
- 验证：grep 无 `goal-arrow/tipPulse/timer-tip::before/border-left: 8rpx` 残留。

## 目标卡 + 提示气泡合并为单气泡（用户反馈"字体小了、能否合并、页面三模式公用"）
- 新结构 `.info-bubble`（timer.wxml/wxss）：一张主色 8% 淡底圆角卡，两行——
  - 上 `info-line--goal`：target 图标 + goalLine，26rpx/500/主色（静态摘要，常驻）
  - 分隔线 `info-divider`（1rpx 主色 14% 淡线，仅提示出现时渲染）
  - 下 `info-line--tip`：tipIcon + runningTip，30rpx/600/`--text`（动态提示，比目标行大一号突出）；`--done` 态 success 绿
- 三模式共用同一容器：单组/自由/循环都走 info-bubble；循环休息/暂停时 runningTip='' → 分隔线与提示行整体消失，气泡自动收缩只留目标行，布局不跳。
- 旧 `.goal-card/.goal-icon/.goal-text/.timer-tip/.timer-tip-icon/.timer-tip-text` 全部删除，grep 无残留。

## 状态文案并入信息气泡（用户反馈"撑住"等硬编码文案能否整合进气泡）
- 背景：环下方 `.timer-status`（statusText：准备开始/撑住/休息中/已暂停）是独立一行，用户希望圆环下只留一张卡。
- `timer.wxml`：删除 `.timer-status` 行，气泡改为三行结构——上 `info-line--status`（小圆点 + statusText）+ 恒显分隔线 + 中 `info-line--goal` + 提示行（条件渲染）。
- `timer.wxss`：`.timer-status` 样式删除，新增 `.info-line--status/.info-status-dot/.info-status-text`：
  - 状态行 32rpx/700，小圆点 14rpx 用 `background: currentColor` 跟随状态色（纯 CSS，规避 SVG 图标烤死问题）。
  - 配色：`status--running`=主色（圆点呼吸 1.6s）；休息时 `status` 字段仍是 running，靠 `isResting` 追加 `info-line--rest` 覆盖为 success 绿（呼吸 1.8s）；`status--paused/idle`=text-secondary 灰，paused 圆点冻结动画。
  - `.info-bubble` margin-top 24→40rpx（承接原 timer-status 间距）、padding 20→24rpx。
- 关键机制备忘：**resting 时 status 字段值仍是 'running'**，状态行转绿必须靠 `isResting` 单独加类，不能只看 status。
- 验证：grep 无 `timer-status` 代码残留（仅注释文字），js 未改动。