feat(ui): 排行榜与首页打卡卡片多项优化
排行榜性能: - 客户端乐观缓存:进页面/切周期秒显旧数据,后台静默刷新,消除 2-3s 空白 - 云函数实例缓存 TTL 60s -> 5min,降低全表扫描频率 排行榜 UI: - 空状态重设计:奖杯光环插画(径向光晕 + 闪光漂浮) - 领奖台 slot 撑满对齐列表、金银铜底座配色、角标与昵称间距修复、底线对齐 首页打卡卡片: - 火焰光晕脉动 + 72rpx 大数字 + 分段进度格子 - 计划 >10 天时进度退化为里程碑连续条 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user