05c4763e49
- progress-ring 新增 sets/currentSet/resting/successColor 属性, 圆环外圈绘制分段弧(已完成=主色/当前=呼吸光点/休息下一组=绿),单组模式零渲染 - timer 删除顶部 circuit-bar 进度面板,布局骨架三模式统一 - 呼吸环淡化(描边 0.55→0.20,柔光渐变强度减半) - 目标卡与提示气泡合并为 info-bubble,状态文案(撑住/休息中/已暂停)并入气泡顶部
13 KiB
13 KiB
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) 的 stepperdata-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轮)
- 计时环整体放大:
.dial280→320rpx;计时数字设计字号 84→96(index.js数据默认值 +_readFontScale的 DESIGN 常量,clamp 上限同步 96),.dial-timemax-width 240→280rpx 防溢出。 - 删除连胜前 🔥 图标(WXML
hero-social改为纯文案)。 - 连胜字号与昵称对齐:
.hero-social26→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 重构)于 commit0464eea提交。
训练页圆环放大 + 环内间距调整
- 用户反馈圆环与中间时钟太贴近。timer.wxml 中 progress-ring
size360→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 通过。未提交。