feat: 循环训练模式 + 语音补全 / 屏幕常亮 / 卡片渲染修复

循环训练(circuit)
- 新增 utils/circuitTimer.js 状态机: 工作->休息->...->完成, stop() 返回有效撑总秒(不含休息)
- 首页新增「循环训练·分组练习」入口 + stepper 配置弹窗
- 配置本地持久化 circuit_config(每组时长/组数/休息/每周目标), 下次自动预填
- 记录以 planId:'circuit' + mode:'circuit' 落库, duration 语义不变 -> 排行榜/统计/每日计划进度零改动
- 记录页展示「循环 N组xMs·休Rs」

计时器顶部循环进度面板
- 组进度点阵按组数等分铺满(flex:1 1 0, 去掉 max-width 封顶), 当前组以增高而非加宽强调
- 大号「X/Y 组」+ 四态阶段徽章(撑住/休息中/准备开始/已暂停) + 累计秒数副行
- 状态灯用纯 CSS 圆点(SVG 图标颜色烤死在 data URI 里, CSS 改不动)
- 超过 15 组自动降级为线性进度条; 面板不设固定高度, 规避真机大字体档裁字

修复: 循环训练全程无语音
- 根因: circuit 的 onTick 走 _circuitCue(只有震动), 从未调用 _remind
- 接入整场进度播报, 基准为 sets x holdPerSet(而非每组), 避免 4 组播 4 次「已完成一半」
- 新增 restStart/nextSet/lastSet 三条不含数字的词条, 客户端与 tts 云函数词表同步
- 修复必然撞车的时序: 偶数组时 halfway 与休息切换同一 tick, 加 2.6s 优先窗口让位
- 防吵闸门: 每组 <10s 不播过场语音, 休息 <5s 不播; 预载按模式取词条

训练期间屏幕常亮
- wx.setKeepScreenOn: onStart 开 / onUnload 关 / onShow 在 isRunning 时重新武装
- 切后台再回来该标志会被系统清掉, 故必须重新武装, 否则后半程丢语音与震动
- 低基础库与 Android 省电模式静默降级, 不弹 toast

修复: 首页打卡卡片左侧两个竖条
- 根因: ui-card 宿主节点无 display 声明为 inline, 页面侧加的 border 被打断成两个零宽行盒碎片
- ui-card 加 :host{display:block}, margin-bottom 从内部 view 上提到宿主
- 高亮由 border 改为 box-shadow spread 描边(不占布局, 无跳动) + 补 border-radius
- 连带修复失效的交错入场: nth-child 跨组件边界恒匹配 1, 改为 index 属性驱动内联 animation-delay, 14 处调用点补序号

注意: tts 云函数需重新部署, 否则新增的 3 条词条返回 Unknown prompt key(静默降级不报错)
This commit is contained in:
2026-08-03 16:34:22 +08:00
parent 76cd2b6c0f
commit 3532d0111b
23 changed files with 1433 additions and 44 deletions
+39 -1
View File
@@ -9,6 +9,8 @@
- 加新图标或新彩色容器时,先想清楚底色:浅色底用 `*Fill`(主题色),彩色/主色底用 `*White` 变体。
- 主按钮 `ui-btn--primary` 背景是橙渐变,`playFill`(橙) 放上去即隐形——须用 `playWhite`。ghost/outline 按钮底色浅或灰,用 `*Fill`/灰色变体即可。
- `components/ui-btn` 图标尺寸 `1.3em`(随按钮字号自适应),不要回到 `1em` 以免显得过小。
- **需要「随状态换色」的小装饰件,一律用纯 CSS 画,别用 icon**:图标色改不动,而状态灯/圆点要在 白/绿/灰 间切换。`timer` 页循环训练徽章的 `.circuit-phase-dot` 即是此解(14rpx CSS 圆点 + BEM 状态类控制 background)。
- **`timer` 页新增顶部元素必须 `position:relative; z-index:1`**`.breathe-ring`(呼吸光晕,`z-index:0`)在 DOM 里排在页面上方元素之后,同 stacking 上下文下会反盖上去,把主色光晕晕染到白卡片上。循环训练进度面板 `.circuit-bar` 踩过。
- 深色模式有两套事实源,改配色前先统一:`theme.json` 的 dark 与 `app.wxss`/`utils/theme.js` 要一致(已统一到 `#131316` 系)。
- **微信圆形头像/图片裁剪陷阱(用户基础库实测)**:本项目的圆形头像在用户机器上表现如下——
- 单独给 `<image>``border-radius:50%`(无 overflow 父层)→ 圆框里露方图,失效。
@@ -30,14 +32,50 @@
## 排行榜架构(2026-07-28 落地 P0/P1/P2 后)
- **预计算快照**`cloudfunctions/leaderboard``exports.main` 现在区分两种调用——
- **定时触发器**`config.json``triggers``snapshotTimer` / `0 */4 * * * * *`,每 4 分钟)进入 `_rebuildSnapshots()`:扫描一次 `plank_data``_fetchLatestByOpenid`,走 updatedAt 索引+投影),复用 `_buildFromScan()` 算 day/month/year榜,各自写进 `leaderboard_snapshot` 集合(doc._id=周期,字段 `period/ranked/myOpenid/updatedAt`;首次写自动建集合)。
- **定时触发器**`config.json``triggers``snapshotTimer` / `0 */4 * * * * *`,每 4 分钟)进入 `_rebuildSnapshots()`:扫描一次 `plank_data``_fetchLatestByOpenid`,走 updatedAt 索引+投影),复用 `_buildFromScan()` 算 day/month/year/endurance 四榜,各自写进 `leaderboard_snapshot` 集合(doc._id=周期,字段 `period/ranked/myOpenid/updatedAt`;首次写自动建集合)。
- **客户端请求**:默认走 `_serveFromSnapshot()`1 次 `get` ≈ 50ms),快照缺失/过期(>6min)才 `_computeBoard()` 实时重算并回写。**首开/冷启动已从 2-3s 降到 ≈50ms。**
- **force 语义**:仅训练后那一次(客户端 `onShow``_lb_force_refresh``force=true`)走 `_computeBoard(force:true,persist:true)` 实时重算+回写快照;其他 99% 请求读快照,已满足"force 不再绕过云缓存"诉求。
- **P1 启动预热**`app.js` `onLaunch``cloud.init()` 后 fire-and-forget 调一次 `leaderboard`(day),提前暖云实例/快照。
- **头像延迟**:云函数内 `getTempFileURL` 预解析已落地(在 `_buildFromScan` 里),前端不再懒加载,故"文字先出头像后出"的 1-2s 延迟已大幅消除;快照每 4min 重写,临时 URL 始终新鲜。
- **改动注意**:要生效必须**重新部署 `leaderboard` 云函数**(定时器随部署注册)。`plank_data.updatedAt` 单字段索引需在控制台已建(用户已建)。响应结构 `{period,ranked,myOpenid,myEntry,updatedAt}` 不变,客户端 `leaderboard.js` 无需改逻辑(仅注释更新)。
- **耐力榜(第 4 个 tab2026-07-31 新增)**:全局单次最久。`_buildFromScan``endurance` 分支遍历每人全部 records 取 `max(duration)` 并记下该条 `r.date` 作"产生时间"→ `bestDate` 字段靠 `publicEntry``...publicData` 展开透传进快照/响应(无需改 data.js)。客户端 `periods``{key:'endurance',label:'耐力',maxRank:10}`;行/领奖台/my-bar 的副标签统一改用 `subText`(耐力=格式化日期 `YYYY-MM-DD HH:MM`,其余=`N次`)。本人未进 top10 时由既有 my-bar`myEntry.rank > rankedList.length`)在底部显示其最佳成绩+日期——依赖快照存 top500、`findMyEntry` 在完整 500 条里定位本人,故即便排 200 也能被找到。**改云函数后须重新部署**(定时器随部署注册 `endurance`)。
- **TTS 语音词条是「两份白名单」,必须同步**:`utils/voice.js``PROMPTS``cloudfunctions/tts/index.js``PROMPTS` 各存一份。客户端有、云端没有 → 云函数返回 `Unknown prompt key``_fetchUrl``success:false` 后返回 null`play()` 静默 return**不报错、不弹 toast**,只是不出声,极难察觉)。加词条后**必须重新部署 tts 云函数**。词条设计上要**避免包含数字/变量**(如"第3组"),否则得按 N 合成 N 份音频;用"下一组,准备开始"这类通用句即可覆盖任意组数。
- **`voice.play` 会截断前一条语音**`_playSeq` 机制:新 play 令旧的作废)。凡是可能同一 tick 触发两条语音的地方,必须定优先级。已知必撞场景:circuit 的 halfway 触发点 = `sets×hold/2`,**偶数组时必然落在第 sets/2 组最后一秒**,与 rest 阶段切换同刻 → 用 `_playProgressVoice``_voiceBusyUntil = now+2600`,让阶段语音在窗口内让位。类似地,每组 <10 秒时不播过场语音(一句话约 2 秒,否则连珠炮)。
- **circuit 的进度播报基准必须是整场(`sets × holdPerSet`),不能是每组**:否则 4 组会播 4 次"已完成一半啦"。判据用 `<=` 而非 `===`,容忍小程序后台回前台的跳秒补偿。只在 `phase==='working'` 求值——休息时 `workTotal` 冻结,天然不会重复触发。
- **`wx.setKeepScreenOn` 是「小程序级」不是「页面级」,且切后台会失效**(训练页已用,`pages/timer/timer.js``_keepScreenOn`):
- 开了不关 → 用户离开训练页后,首页/记录/榜单全程常亮耗电,只有**退出小程序**才自动失效。故 `onUnload` **必须**显式 `keepScreenOn:false`
- 反过来,**切后台再回前台会被系统清掉**,所以 `onShow` 里要 `if (this.data.isRunning) 重新武装`,否则后半程又开始息屏丢语音/震动。
- `fail` 必须静默(部分 Android ROM 省电模式拒绝该调用),低基础库用 `typeof wx.setKeepScreenOn !== 'function'` 降级。
- 背景:息屏/后台后 JS 定时器被节流,`Timer`/`CircuitTimer``Date.now` 补偿秒数不会错,但**实时提示(语音/震动)错过就没了**——平板支撑用户手撑地不碰屏,60 秒必息屏,所以常亮实际是在修 bug 而非锦上添花。
- **自定义组件宿主节点默认是 inline —— 页面侧给组件标签加 border/box-shadow/transform 会碎裂或静默失效**:本项目 `components/` 下 7 个组件**没有任何一个**写了 `:host { display: block }`(全局 grep `:host`/`display:block` 零匹配),组件 wxss 只给内部那个 view(如 `.ui-card`)写样式。宿主节点(页面 wxml 里的 `<ui-card>` 标签)因此是 inline 盒。
- 页面 wxss **可以**命中宿主节点上的 classstyle isolation 只隔离组件内部),所以样式确实生效了——但按 inline 盒规则渲染:
- `border` → inline 盒被内部 block 打断成前/后两个**零宽行盒**,只在碎片上画左右边框(各 4rpx 贴合成一根竖线)→ 视觉是 block **左上角、左下角各一条竖条**,而不是包一圈。首页 `.just-completed`(训练完成 3 秒高亮)就是这个症状。
- `transform: scale()`**完全无效**(不适用于非替换 inline 元素),脉冲/缩放动画静默不生效。
- `box-shadow` → 同样只画在零宽碎片上,等于看不见。
- **诊断特征**:只要是"某个自定义组件标签上加了装饰样式,结果出现零散短线/动画不动",先怀疑宿主 inline,而不是怀疑选择器没命中。
- **修法**:组件 wxss 加 `:host { display: block; }`(小程序支持 `:host`)。改前需回归各页面该组件的间距布局(inline→block 会吃掉行内空白、宽度变 100%);`ui-btn` 这类可能被当行内用的组件要单独评估。
- **同源坑**`ui-card.wxss``.ui-card.in:nth-child(1..4)` 交错入场延迟也是失效的——`.ui-card` 在组件内部永远是根下第 1 个子元素,恒匹配 `nth-child(1)`。跨组件边界做"第 N 个"选择器一律不可靠,要交错必须由页面传 index 或内联 `animation-delay`
- **已修(2026-08-03,仅 `ui-card`**:加了 `:host { display:block; margin-bottom:24rpx; box-sizing:border-box }`,并把 `margin-bottom` 从内部 `.ui-card` **上提到宿主**——否则页面侧加的边框会把 24rpx 外边距一起圈进框里,框比卡片高一截。交错延迟改为 `index` 属性驱动的内联 `animation-delay``50 + min(index,3)*100` ms),14 处调用点全部显式传 `index``index` 默认 0,漏传也只是退回旧行为,零回归。
- **其余 6 个组件宿主仍是 inline,不要盲目批量加 `:host{display:block}`**`ui-btn``pages/timer/timer.wxml` 里靠 `custom-style="margin-right:28rpx"` 并排布局,改 block 会直接撑成整行。要改必须逐个回归。
- **页面侧给组件标签做描边,优先用 `box-shadow: 0 0 0 Nrpx <color>` 而不是 `border`**:border 会改变宿主盒尺寸(撑大或在 border-box 下向内压窄内容),高亮出现/消失时布局跳动;box-shadow 不占布局空间。但宿主自身没有圆角,必须显式补上与内部卡片一致的 `border-radius`,否则描边是直角框套在圆角卡片外面。
## 约定
- UI 动词说法:index=首页/训练首页,timer=训练页,leaderboard=排行榜,records=记录,settings=设置。
- 美化按"见效快优先"分批做,每轮 node --check + grep 残留再交付。
- **git 推送需走 sandbox 外**:本机 Bash 工具默认 sandbox 隔离网络,`git push` 到 github.com 会 `SSL connection timeout`(约 5 分钟才报错)。必须用 `dangerouslyDisableSandbox: true` 在沙箱外执行推送(或 `run_in_background` + 沙箱外)才能连上。无 SSH keyremote 仅 HTTPS。
## 功能:循环训练 circuit2026-08-03 落地,简化版 + 配置持久化)
- 定位:**「自由训练」的循环形态**,不是新计划体系。不碰现有 `utils/plan.js` 的 hold 模式与每日计划进度。
- 入口:首页「循环训练 · 分组练习」ghost 按钮 → 底部配置弹窗(stepper 调 每组时长/组数/休息/每周目标)→ `saveCircuitConfig` + 跳 `timer?circuit=1&hold=&sets=&rest=&sessions=`
- 配置持久化:`utils/storage.js``getCircuitConfig/saveCircuitConfig`(本地 `circuit_config` 键,含默认值+范围校验,**不进云同步**)。下次打开弹窗预填上次值。
- 状态机:`utils/circuitTimer.js`(新)`CircuitTimer` 类,接口仿 `Timer``start/stop/pause/resume` + `onTick/onPhaseChange/onComplete``stop()` 返回 `workTotal`(有效撑总秒,不含休息)。
- **关键不变量 1`duration` 始终 = 有效撑总秒(组数×每组秒,不含休息)** → 排行榜/里程碑/统计零改动。
- **关键不变量 2:循环记录 `planId``'circuit'`** → `getPlanDay` 不会把它算进每日计划进度;但 `updateStreak` 仍计入连胜(用户确实练了)。
- 记录落库字段:`mode:'circuit'` + `sets/holdPerSet/restPerSet/sessionsPerWeek`records 页按 `r.mode` 显示「循环 N组×Ms」)。
- 阶段提示:TTS 只有 6 个固定 key 无"第N组/休息"词 → circuit 阶段切换用**震动 + 屏上 phaseTip 文本**,完成复用 `complete` 语音。
- 进度环:circuit 模式轨道恒中性灰(否则每阶段都按"累计≥阶段长"误判变绿)。
- 未做(可选后续):周频次硬追踪(仅存 sessionsPerWeek 作显示)、逐周进阶、设置页统一管理。
- 验证:6 个 JS 全过 `node --check`;未动云函数/榜单/云同步。