feat(ui): 排行榜与首页打卡卡片多项优化

排行榜性能:
- 客户端乐观缓存:进页面/切周期秒显旧数据,后台静默刷新,消除 2-3s 空白
- 云函数实例缓存 TTL 60s -> 5min,降低全表扫描频率

排行榜 UI:
- 空状态重设计:奖杯光环插画(径向光晕 + 闪光漂浮)
- 领奖台 slot 撑满对齐列表、金银铜底座配色、角标与昵称间距修复、底线对齐

首页打卡卡片:
- 火焰光晕脉动 + 72rpx 大数字 + 分段进度格子
- 计划 >10 天时进度退化为里程碑连续条

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2026-07-27 17:28:53 +08:00
parent 4b5f195a18
commit e2becc24aa
9 changed files with 329 additions and 121 deletions
+8 -1
View File
@@ -27,6 +27,8 @@ Page({
planDay: 1,
planTotal: 7,
planProgress: 0,
useSegments: false,
planDays: [],
showPicker: false,
pickerInputFocus: false,
presets: [30, 60, 90, 120, 180, 300],
@@ -142,6 +144,9 @@ Page({
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) : []
this.setData({
theme,
icons: iconsMod.build(theme),
@@ -153,7 +158,9 @@ Page({
planName: plan.name,
planDay: clampedDay,
planTotal: plan.totalDays,
planProgress
planProgress,
useSegments,
planDays
})
},