lc
05c4763e49
- progress-ring 新增 sets/currentSet/resting/successColor 属性, 圆环外圈绘制分段弧(已完成=主色/当前=呼吸光点/休息下一组=绿),单组模式零渲染 - timer 删除顶部 circuit-bar 进度面板,布局骨架三模式统一 - 呼吸环淡化(描边 0.55→0.20,柔光渐变强度减半) - 目标卡与提示气泡合并为 info-bubble,状态文案(撑住/休息中/已暂停)并入气泡顶部
103 lines
13 KiB
Markdown
103 lines
13 KiB
Markdown
# 2026-08-11
|
||
|
||
## 首页顶部问候区加入用户头像与昵称
|
||
- 在 `pages/index` 顶部问候区（"准备好了吗"）左侧新增圆形头像 + 昵称（昵称默认"运动达人"）。
|
||
- 数据来自 `storage.getProfile()`（{ nickname, avatarUrl }），在 `refresh()` 中读取，每次 onShow 刷新（settings 改完回首页即更新）。
|
||
- 头像圆形裁剪用双保险：外层 `overflow:hidden` + 内层 `image border-radius:50%`；无头像回退 `icons.peopleFill` 人形占位。
|
||
- 改动文件：index.wxml（greeting-row 结构）、index.wxss（横向 flex 布局 + 头像样式）、index.js（data 加 nickName/avatarUrl、refresh 读取 profile）。`node --check` 通过。
|
||
|
||
## 首页问候区样式调整（同一轮）
|
||
- 删除原来的 emoji/success 状态小图标（greeting-icon），昵称嵌入问候句前置并加逗号：`{昵称}，准备好了吗？` / `{昵称}，太棒了！`（完成态）。
|
||
- 昵称默认"运动达人"。删除 .greeting-nickname / .greeting-text / .greeting-icon 旧样式，标题与昵称同行同字号（40rpx 加粗）。头像仍在左、副标题在下。grep 确认无旧类名残留。
|
||
|
||
## 循环训练秒数步进改为 ±10 秒
|
||
- `pages/index/index.wxml` 循环训练弹窗：「每组时长」(hold) 与「组间休息」(rest) 的 stepper `data-delta` 由 ±5 改为 ±10；组数、每周目标（非秒数）不变。
|
||
- JS `onCircuitStep` 的 bounds（hold 下限5 / rest 下限0）无需改，越界自动 clamp。
|
||
|
||
## 首页 index 整体改版（参考 plank-training.html，方案 B 橙色系）
|
||
- 结构重构（纯视觉/布局，不动训练/记录/设置逻辑）：全宽橙渐变 `hero`（头像+昵称+按小时时间问候+「时长」敢不敢来挑战+🔥真实连胜）→ `quest-card` 进度点地图（白卡负 margin 上浮叠 hero，圆点+连线，done/now/final 三态，末节点🏆）→ `dial` 虚线刻度环+呼吸动画（目标时长+预计千卡）→ CTA「立即挑战+时长」带脉冲 → 次级入口自由/循环。
|
||
- 取消每日语录模块（用户要求）。
|
||
- 配色：方案 B，hero 渐变用 `var(--primary)→var(--primary-light)`，随主题切换变色，保持橙色品牌。
|
||
- hero 用 `margin:-24rpx -24rpx 0` 抵消 container 内边距实现全宽；opacity-only 动画避免 transform 破坏弹窗定位。节点地图自适应：计划天数<=8 画每天节点，>8 退化为 5 里程碑节点。
|
||
- JS 新增 `greetText/streakText/questNodes/questTip/estKcal` 字段 + `_greetByHour()`/`_buildQuestMap()`；移除 `useSegments/planDays/planProgress`。`node --check` 通过；grep 确认旧类名(greeting-/header-card/streak-/segment-/milestone-/target-/useSegments 等)零残留。
|
||
- 注意：改版前已先 `git commit`（938a7d1）。本次改版尚未提交，待用户预览确认后再提交。
|
||
|
||
## 首页改版微调（同一轮）
|
||
- 千卡估算修正：从 4 千卡/分钟 降至保守 2.2 千卡/分钟（1分30秒≈3千卡），仅作激励参考非精确值。
|
||
- 删除「预计消耗」后「· 核心力量 +1」文案；整行放大（24→28rpx，数字 30rpx）。
|
||
- 连胜文案「🔥 已连续 N 天打卡」从 hero 底部独立行移到顶部头像+昵称行内（昵称下方），新增 `.hero-user` 纵向堆叠容器。
|
||
|
||
## 首页改版微调（第2轮）
|
||
- 千卡恢复 4 千卡/分钟（用户确认）。
|
||
- 删除「今天还没开始，现在就稳住核心」整段（含已完成态「今日已完成 N 秒」），同步删除 `.today-status`/`.done-text`/`.pending-text` 样式；CTA 按钮仍用 `todayDone` 切换「立即挑战/再战一次」文案。
|
||
- 连胜文案从「昵称下方」改为「昵称同一行后面」：`.hero-user` 改 `flex-direction: row` + `align-items:center` + `gap:14rpx`，`.hero-social` 上间距归零。
|
||
|
||
## 首页改版微调（第3轮）
|
||
- 计时环整体放大：`.dial` 280→320rpx；计时数字设计字号 84→96（`index.js` 数据默认值 + `_readFontScale` 的 DESIGN 常量，clamp 上限同步 96），`.dial-time` max-width 240→280rpx 防溢出。
|
||
- 删除连胜前 🔥 图标（WXML `hero-social` 改为纯文案）。
|
||
- 连胜字号与昵称对齐：`.hero-social` 26→28rpx（与 `.hero-greet` 一致）。
|
||
|
||
## 首页改版微调（第4轮）
|
||
- 进度地图(`quest-card`)与「立即挑战」CTA 按钮等宽：`.quest-card` 左右 margin 由 24rpx 改为 0（容器自身 24rpx 内边距已让两者贴合内容区边缘），保留 `margin-top:-56rpx` 上浮叠 hero。
|
||
|
||
## 训练页(timer)改版（参照用户截图，方案：var(--primary) 主题色 + 无顶部栏）
|
||
- 顶部栏按用户要求取消（不画 sound/pause 图标行）。
|
||
- `components/progress-ring` 扩展：canvas `_draw()` 新增秒刻度层（ticks 属性=秒数，cap 60；四分位加粗、其余细灰）；环内新增 `subText`（副标题，如"目标 30秒"）；移除组件内 statusText 渲染（状态词改由 timer 页在环下方显示）。
|
||
- timer.wxml：progress-ring 传 `ticks="{{ringTicks}}"` `subText="{{ringSubText}}"`；原 hint-section 替换为「环下方状态词 timer-status + 目标信息卡 goal-card(✅今日目标 X · 第N天 ›，静态箭头) + 运行提示 timer-tip」。
|
||
- timer.js 新增派生字段 ringTicks/ringSubText/statusText/goalLine/runningTip，在 _init/_initCircuit/onStart/onPause/onStopCancel/onTrainAgain/各 onTick/onGoalReached 中计算下发；新增 `_durationText(sec)` 语音化时长(45→"45秒",90→"1分30")。
|
||
- timer.wxss：新增 .timer-status/.goal-card/.timer-tip 样式；.timer-page 改 justify-content flex-start + .controls margin-top:auto（按钮贴底）；删除旧 hint-section/hint-row/hint-text/running-pulse/completed-bounce 样式。
|
||
- 状态机(idle/running/paused/completed/circuit/free)、计时逻辑、循环 FSM、呼吸环、彩带、完成弹窗、结束确认弹窗全部保留。node --check 通过；grep 确认 hint-*/status-text/running-pulse/completed-bounce 零残留。改版尚未提交。
|
||
|
||
## 训练页姿态提示醒目化（气泡卡片）
|
||
- 用户要求训练中的姿态提示更醒目。原 `timer-tip` 仅为 26rpx 灰字无修饰。
|
||
- 改为「气泡卡片」：白底 + 主色左边框(8rpx) + 圆角 + 轻投影 + 顶部小三角指向圆环 + 左侧人物主题色图标(peopleFill) + 文字放大(26→30rpx 加粗)；持续 tipPulse 呼吸动画(scale 1↔1.03)。
|
||
- 语义分级：tipType=posture(默认/主色)｜phase(循环阶段,主色)｜done(目标达成,成功色+successFill 图标)。timer.js 在 _init/_initCircuit/onTrainAgain(默认 posture+peopleFill)、single onTick(goalReached→done/successFill 否则 posture/peopleFill)、onGoalReached(done)、circuit onTick(phase/peopleFill) 设置 tipType+tipIcon。
|
||
- 图标用现成 `peopleFill`(主题色人物,白底醒目)，done 用 `successFill`；不手画新增 path(规避 SVG data-URI 色烤死/渲染风险)。node --check 通过；字段引用一致。改版(含前次 timer 重构)于 commit 0464eea 提交。
|
||
|
||
## 训练页圆环放大 + 环内间距调整
|
||
- 用户反馈圆环与中间时钟太贴近。timer.wxml 中 progress-ring `size` 360→420、ringWidth 保持 22（环整体放大、环内边到时钟间隙约 23→53rpx 提升）。
|
||
- timer.wxss 呼吸光晕同步放大（breathe-ring-1/2/3：520/440/380 → 620/540/460rpx），确保光晕仍罩在更大环外侧。
|
||
|
||
## 训练页呼吸光环 + 光晕增强（明显可见）
|
||
- 用户要求光晕与呼吸明显可见。新增 `.breath-aura` 呼吸光环：进度环外侧 488rpx 直径、6rpx 主色描边(0.55 alpha) + 40rpx 外辉光 + inset 28rpx 内辉光；@keyframes auraBreathe 2.8s 慢呼吸(scale 0.9↔1.06, opacity 0.5↔0.95)，running 切 auraBreatheFast 1.3s。timer.wxml 在 ring-wrapper 内 progress-ring 前新增该 view（带 fast 类切换，completed 态 wx:if 隐藏）。
|
||
- 现有径向光晕透明度大幅调高：base 0.10→0.20、ring-2 0.14→0.26、ring-3 0.18→0.34，淡出半径 65%→62~68%。
|
||
- 纯 CSS transform/opacity 动画，不碰 canvas/进度环组件/状态机；z-index:0 在 progress-ring 之下、可见带在环外侧无遮挡；transform 仅作用于光环自身，不影响 fixed 弹窗（现有 breathe-ring 同机制已验证）。
|
||
- 已渲染动画预览 widget 演示可见度。未提交，待用户预览确认。
|
||
|
||
## 训练页呼吸光环柔和化 + 圆环下方整体下移
|
||
- 光环柔和化：scale 幅度 0.9↔1.06 缩至 0.96↔1.04、opacity 峰值 0.95/1.0 降到 0.85/0.9、节奏放慢（idle 2.8s→4s、running 1.3s→2.4s）。
|
||
- 圆环下方元素（状态词/目标卡/提示）整体下移：.ring-wrapper 加 margin-bottom:44rpx；.controls margin-top:auto 贴底不受影响。
|
||
|
||
## progress-ring 刻度四分位对齐修复（bug）
|
||
- 现象：ticks(=训练时长,cap 60)不被 4 整除时,长刻度按 `i % round(ticks/4)===0` 判定落点,只有顶部(12点,i=0)正中,其余 3 根偏到 96°/102°/198° 等。
|
||
- 修复：长刻度改精确画在 12/3/6/9 点 4 个正方向(不依赖 tick 索引整除)；短刻度在靠近四分位(角度差<一格 stepDeg=360/ticks)处跳过,避免与长刻度双线重叠。ticks 是否整除 4 都对齐正中。
|
||
- node --check 通过。未提交。
|
||
|
||
## 首页时间圆环改为大字流光时间（无圆环）
|
||
- 用户认为 index 计时环用处不大，去掉圆环，目标时长改用大字「渐变流光动感数字」显示（选中的风格）。
|
||
- index.wxml：删 `.dial` 圆环整块，改 `<text class="time-display">{{todayTargetText}}</text>` + `<text class="time-label">今日目标时长</text>`，保留「预计消耗 X 千卡」。
|
||
- index.wxss：删 `.dial/.dial::before/.dial-time/.dial-label/@keyframes ringBreathe`；新增 `.time-display`(120rpx/900/letter-spacing -2rpx/tabula-nums + 渐变 background-clip:text + timeShimmer 3s 流光, 跟随 var(--primary)/var(--primary-light) 主题色) 与 `.time-label`。含 `color: var(--primary)` 兜底。
|
||
- index.js：删 `targetTimeFontSize` 字段与 `_readFontScale()` 方法(onLoad 调用一并移除)——那是给圆环内数字防系统字号缩放溢出的专用逻辑,无圆环不需要。
|
||
- grep 确认无 `dial` 类残留(仅 hero::after 的 radial-gradient 误匹配"dial"子串、与圆环无关);node --check 通过。未提交。
|
||
|
||
## 训练页布局：时钟居中 + 按钮贴底留白
|
||
- 用户要求：把底部 3 个按钮（开始／暂停·结束／继续·结束）下移到屏幕底部（以底部 toolbar 为基础），留出空间，时钟(进度环)挪到中间区域。
|
||
- 确认 timer 不是 tabBar 页面（tab 仅 index/records/leaderboard/settings），无需额外预留 tabBar 高度；"底部 toolbar"指屏幕底部区域。
|
||
- 结构改动 timer.wxml：将 `ring-wrapper` + `timer-status` + `goal-card` + `timer-tip` 整体包进新 `<view class="middle-area">`，controls 仍在外部独立贴底。
|
||
- 样式 timer.wxss：新增 `.middle-area { flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; }`，使整组(进度环+状态/目标/提示)在剩余高度内垂直居中，与底部按钮之间自然留白；.controls 仍 `margin-top:auto` 贴底。circuit-bar 保持顶部。
|
||
- 纯布局重构，未动进度环组件/状态机/计时逻辑/动画。未提交。
|
||
|
||
## 首页布局：时钟居中 + 3 按钮贴底（修正）
|
||
- 误判：上轮把同样的"中间展示区"思路套到了训练页(timer)。用户截图与反馈(`@image#1`)是首页 index，把 3 个按钮(再战一次/自由训练/循环训练)推到屏幕底部(贴近 tab bar)、时钟(00:30)挪到中间区域。
|
||
- 撤销对 timer 的误改：timer.wxml 移除 `middle-area` 开闭标签，timer.wxss 删除 `.middle-area` 规则；grep 确认 timer 无 `middle-area` 残留。
|
||
- index 改动：index.wxml 根容器加 `index-page` 类（不动全局 `.container`，仅本页面升级为 flex 列）。index.wxss 新增 `.index-page{display:flex;flex-direction:column;}`；`.timer-wrap` 改为 `flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;text-align:center`（垂直居中"00:30 + 今日目标时长 + 预计消耗 千卡"）；`.action-buttons` 加 `margin-top:auto`（贴底）。hero 的负 margin 与 quest-card 的 -56rpx 上浮叠在 flex 列里仍生效。
|
||
- 效果：hero+quest 在顶 → 中间留白 + 时钟居中 → 留白 → 3 按钮贴底紧挨 tab bar 上方。
|
||
- 未提交。
|
||
|
||
## 首页时间字体改为 Saira Condensed 900（base64 内联）
|
||
- 用户认为 Orbitron 不够硬朗，从 6 款硬朗字体对比中选择 Saira Condensed 900。
|
||
- **关键修复**：微信小程序 `@font-face` 的 `src:url('./local.woff2')` 本地相对路径**不可靠**（devtools 可能假性生效、真机回退系统字体）。之前 Orbitron 用本地路径加载，用户反馈"区别很大"=字体实际没加载。**治本方案**：把 woff2 转 base64 data URI 直接内联到 `@font-face` 的 `src`，不依赖任何外部文件/网络，devtools 和真机一致。
|
||
- app.wxss `@font-face`：`src:url('data:font/woff2;charset=utf-8;base64,<24KB>')`，font-family:'Saira Condensed', font-weight:900。原 woff2 文件（17.7KB）已删除，不再随包冗余。
|
||
- index.wxss `.time-display`：`font-family:'Saira Condensed','Arial Narrow',sans-serif`；`font-weight:900`；`letter-spacing:2rpx`(Saira Condensed 偏窄,小间距即可)。渐变流光 + drop-shadow 阴影不变。
|
||
- node --check 通过。未提交。
|