feat(index): 首页改版 hero + 进度点地图 + 计时环 dial + CTA 脉冲
- 全宽橙渐变 hero:头像+昵称+按小时问候+「时长」敢不敢来挑战+连胜(昵称同行) - 进度点地图 quest-card 上浮叠 hero,圆点+连线 done/now/final 三态,与 CTA 等宽 - 计时环 dial 虚线刻度环+呼吸动画,整体放大(320rpx/数字96rpx) - CTA「立即挑战+时长」带脉冲,保留自由/循环入口 - 千卡按 4 千卡/分钟估算(激励参考);删除「今天还没开始」整段与连胜前图标 - 循环训练秒数步进 ±10;取消每日语录模块
This commit is contained in:
+69
-15
@@ -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' })
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user