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 未改动。