feat(index): 首页改版 hero + 进度点地图 + 计时环 dial + CTA 脉冲

- 全宽橙渐变 hero:头像+昵称+按小时问候+「时长」敢不敢来挑战+连胜(昵称同行)
- 进度点地图 quest-card 上浮叠 hero,圆点+连线 done/now/final 三态,与 CTA 等宽
- 计时环 dial 虚线刻度环+呼吸动画,整体放大(320rpx/数字96rpx)
- CTA「立即挑战+时长」带脉冲,保留自由/循环入口
- 千卡按 4 千卡/分钟估算(激励参考);删除「今天还没开始」整段与连胜前图标
- 循环训练秒数步进 ±10;取消每日语录模块
This commit is contained in:
2026-08-11 14:32:25 +08:00
parent 938a7d1276
commit 6f89494c0b
3 changed files with 326 additions and 366 deletions
+69 -15
View File
@@ -25,14 +25,17 @@ Page({
// number grows past the fixed-size circular ring and gets clipped. We
// cancel that scale here so the number renders at a constant visual size
// (matching the devtools/simulator) on every device. See _readFontScale().
targetTimeFontSize: 84,
targetTimeFontSize: 96,
streakCount: 0,
planName: '',
planDay: 1,
planTotal: 7,
planProgress: 0,
useSegments: false,
planDays: [],
// hero / 进度地图 / dial 相关展示字段(由 refresh 生成)
greetText: '你好',
streakText: '今天开启坚持之旅',
questNodes: [],
questTip: '',
estKcal: 0,
showPicker: false,
pickerInputFocus: false,
presets: [30, 60, 90, 120, 180, 300],
@@ -68,8 +71,8 @@ Page({
* compensation under DevTools (host.env === 'devtools') and keep the design
* size — matching what the simulator renders literally.
*
* On real devices, dividing our design size by the factor cancels the
* auto-scale, keeping the number a constant 84rpx-equivalent everywhere.
* On real devices, dividing our design size by the factor cancels the
* auto-scale, keeping the number a constant 96rpx-equivalent everywhere.
* Bounded so a bad reading can only ever make the number smaller (safe),
* never larger (overflow).
*/
@@ -87,7 +90,7 @@ Page({
}
}
} catch (e) {}
const DESIGN = 84
const DESIGN = 96
let size = Math.round(DESIGN / factor)
size = Math.max(48, Math.min(96, size))
this.setData({ targetTimeFontSize: size })
@@ -152,12 +155,17 @@ Page({
const target = planMod.getTodayTarget(settings.planId, clampedDay, customPlans)
const theme = themeMod.getCurrentTheme()
// 防御:totalDays 为 0(极端数据损坏)时避免除以 0 得到 NaN
const planProgress = plan.totalDays > 0 ? Math.round((clampedDay / plan.totalDays) * 100) : 0
// 分段格子(每天一格)只在计划天数 <= 10 时用;更长则退化为里程碑连续条,避免格子过密
const useSegments = plan.totalDays > 0 && plan.totalDays <= 10
const planDays = useSegments ? Array.from({ length: plan.totalDays }, (_, i) => i) : []
const profile = storage.getProfile()
const greetText = this._greetByHour()
const streakText = streak.count > 0
? `已连续 ${streak.count} 天打卡`
: '今天开启坚持之旅'
const questNodes = this._buildQuestMap(plan.totalDays, clampedDay)
const questTip = clampedDay >= plan.totalDays
? '🎉 本期计划已完成,去记录页看看战绩'
: `⚡ 再坚持 ${plan.totalDays - clampedDay} 天,完成本期计划`
// 千卡粗算:按约 4 千卡/分钟估算(1分30秒≈6千卡)。仅作激励性参考,非精确值。
const estKcal = Math.max(1, Math.round((target / 60) * 4))
this.setData({
theme,
icons: iconsMod.build(theme),
@@ -169,14 +177,60 @@ Page({
planName: plan.name,
planDay: clampedDay,
planTotal: plan.totalDays,
planProgress,
useSegments,
planDays,
greetText,
streakText,
questNodes,
questTip,
estKcal,
nickName: profile.nickname || '',
avatarUrl: profile.avatarUrl || ''
})
},
_greetByHour() {
const h = new Date().getHours()
if (h < 6) return '夜深了'
if (h < 12) return '早上好'
if (h < 14) return '中午好'
if (h < 18) return '下午好'
if (h < 22) return '晚上好'
return '夜深了'
},
/**
* 生成闯关进度地图节点。计划天数 <= 8 时画每天节点;> 8 时退化为
* 5 个里程碑节点(0/25/50/75/100%),避免节点过密。state: done|now|todo。
*/
_buildQuestMap(total, day) {
const nodes = []
if (total > 0 && total <= 8) {
for (let i = 1; i <= total; i++) {
nodes.push({
label: i === total ? '🏆' : String(i),
state: i < day ? 'done' : (i === day ? 'now' : 'todo'),
final: i === total
})
}
return nodes
}
const marks = [0, 0.25, 0.5, 0.75, 1]
let nowAssigned = false
marks.forEach((m, idx) => {
const dayAt = Math.round(m * total)
const isFinal = idx === marks.length - 1
let state
if (dayAt <= day) state = 'done'
else if (!nowAssigned) { state = 'now'; nowAssigned = true }
else state = 'todo'
nodes.push({
label: isFinal ? '🏆' : (m === 0 ? '起' : String(dayAt)),
state,
final: isFinal
})
})
return nodes
},
onStartTrain() {
wx.navigateTo({ url: '/pages/timer/timer' })
},