lc/wx_pbzc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
cnliucheng
2026-07-27 17:28:53 +08:00
parent 4b5f195a18
commit e2becc24aa
9 changed files with 329 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/leaderboard/leaderboard.js
+32 -5
View File
@@ -17,6 +17,7 @@ Page({
rankedList: [],
myEntry: null,
loading: false,
refreshing: false,
empty: false,
icons: iconsMod.build()
},
@@ -58,7 +59,24 @@ Page({
this._fetchSeq = (this._fetchSeq || 0) + 1
const seq = this._fetchSeq
const period = this.data.activePeriod
this.setData({ loading: true, empty: false })
// 乐观缓存:命中该 period 的近期缓存就先秒显旧数据,后台再静默拉新。
// 命中时不进 loading 骨架屏(避免旧数据被空白覆盖),用 refreshing 标记
// 后台刷新状态;未命中才显示骨架屏。云函数全表扫描冷启动可达 2-3s,
// 这层客户端缓存把"重复进入 / 切 period"的等待几乎降到无感。
const cached = storage.getLeaderboardCache(period)
if (cached && cached.rankedList) {
this.setData({
rankedList: cached.rankedList,
myEntry: cached.myEntry,
loading: false,
empty: cached.empty,
refreshing: true
})
} else {
this.setData({ loading: true, empty: false, refreshing: false })
}
wx.cloud.callFunction({
name: 'leaderboard',
data: {
@@ -76,7 +94,12 @@ Page({
// them into thinking the cloud is broken.
console.warn('[leaderboard] cloud function failed, using local fallback:', err)
if (seq !== this._fetchSeq) { if (cb) cb(); return }
this._applyLocal()
// 已有缓存秒显时后台刷新失败:保持旧数据,不打断用户;仅无缓存才走本地兜底。
if (cached && cached.rankedList) {
this.setData({ refreshing: false })
} else {
this._applyLocal()
}
if (cb) cb()
})
},
@@ -91,12 +114,16 @@ Page({
durationText: util.formatDuration(result.myEntry.duration),
isMe: true
} : null
const empty = list.length === 0 && !myEntry
this.setData({
rankedList: list,
myEntry,
loading: false,
empty: list.length === 0 && !myEntry
refreshing: false,
empty
})
// 写入乐观缓存:下次进页面 / 切 period 秒显
storage.setLeaderboardCache(this.data.activePeriod, { rankedList: list, myEntry, empty })
},
/** Local fallback: use local storage when cloud function isn't deployed */
@@ -122,9 +149,9 @@ Page({
rank: 1, openid: 'local', name: localName, nickname: profile.nickname || '',
duration, durationText: util.formatDuration(duration), sessions
}
this.setData({ rankedList: [entry], myEntry: { ...entry, isMe: true }, loading: false, empty: false })
this.setData({ rankedList: [entry], myEntry: { ...entry, isMe: true }, loading: false, refreshing: false, empty: false })
} else {
this.setData({ loading: false, empty: true })
this.setData({ loading: false, refreshing: false, empty: true })
}
},
pages/leaderboard/leaderboard.wxml
+7 -6
View File
@@ -21,16 +21,17 @@
<ui-skeleton variant="list-row" count="{{5}}" />
</view>
<!-- Empty with CSS illustration -->
<!-- Empty: 奖杯光环插画 -->
<view class="empty-state" wx:elif="{{empty}}">
<view class="empty-illus">
<view class="empty-illus-body"></view>
<view class="empty-illus-arm empty-illus-arm--l"></view>
<view class="empty-illus-arm empty-illus-arm--r"></view>
<view class="empty-illus-bubble">加油</view>
<view class="empty-halo"></view>
<image class="empty-trophy" src="{{icons.trophyFill}}" mode="aspectFit"></image>
<image class="empty-spark empty-spark--1" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
<image class="empty-spark empty-spark--2" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
<image class="empty-spark empty-spark--3" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
</view>
<text class="empty-text">暂无排行数据</text>
<text class="empty-sub">快去训练吧,争当第一名!</text>
<text class="empty-sub">快去训练,争当第一名!</text>
</view>
<block wx:else>
pages/leaderboard/leaderboard.wxss
+87 -48
View File
@@ -82,7 +82,7 @@
display: flex;
flex-direction: column;
align-items: center;
width: 200rpx;
flex: 1;
}
.podium-crown {
@@ -128,7 +128,7 @@
opacity: 0.7;
border: 4rpx solid var(--card-bg);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
margin-bottom: 12rpx;
margin-bottom: 0;
}
.avatar--lg {
@@ -138,7 +138,7 @@
border: 4rpx solid rgba(var(--primary-rgb), 0.4);
box-shadow: 0 6rpx 20rpx rgba(var(--primary-rgb), 0.25);
opacity: 0.85;
margin-bottom: 12rpx;
margin-bottom: 0;
}
/* A real photo fills the whole circle (no inner ring), mirroring the
@@ -178,6 +178,10 @@
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
/* 用 name 的 margin-top 直接控制与上方头像/角标的间距:它是 flex 子元素,
margin 必定生效不折叠,不依赖 avatar margin-bottom 的 collapse 行为
(WebView/Skyline 下不一致,曾导致角标压住昵称)。 */
margin-top: 30rpx;
}
.podium-name--first {
@@ -196,7 +200,7 @@
text-align: center;
font-size: 22rpx;
font-weight: 700;
color: var(--primary);
color: var(--text);
line-height: 1;
}
@@ -222,9 +226,21 @@
position: relative;
}
.podium-base--first { height: 96rpx; background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.04)); }
.podium-base--second { height: 64rpx; }
.podium-base--third { height: 48rpx; }
.podium-base--first {
height: 96rpx;
background: linear-gradient(180deg, rgba(255, 197, 61, 0.55), rgba(250, 140, 22, 0.20));
box-shadow: 0 6rpx 18rpx rgba(250, 140, 22, 0.30), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.45);
}
.podium-base--second {
height: 64rpx;
background: linear-gradient(180deg, rgba(201, 205, 212, 0.50), rgba(140, 140, 140, 0.16));
box-shadow: 0 6rpx 18rpx rgba(140, 140, 140, 0.22), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.45);
}
.podium-base--third {
height: 48rpx;
background: linear-gradient(180deg, rgba(232, 160, 106, 0.50), rgba(212, 107, 8, 0.16));
box-shadow: 0 6rpx 18rpx rgba(212, 107, 8, 0.22), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.45);
}
/* Rank list */
.rank-list {
@@ -369,56 +385,79 @@
.empty-illus {
position: relative;
width: 200rpx;
height: 200rpx;
margin-bottom: 40rpx;
width: 280rpx;
height: 280rpx;
margin-bottom: 48rpx;
display: flex;
align-items: center;
justify-content: center;
}
.empty-illus-body {
position: absolute;
bottom: 30rpx;
left: 50%;
transform: translateX(-50%);
width: 160rpx;
height: 30rpx;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
border-radius: 16rpx;
}
.empty-illus-arm {
position: absolute;
bottom: 36rpx;
width: 20rpx;
height: 60rpx;
background: var(--primary);
border-radius: 10rpx;
}
.empty-illus-arm--l {
left: 30rpx;
transform: rotate(30deg);
}
.empty-illus-arm--r {
right: 30rpx;
transform: rotate(-30deg);
}
.empty-illus-bubble {
/* 光晕:主题色径向渐变圆,托住奖杯 */
.empty-halo {
position: absolute;
top: 0;
left: 0;
right: 0;
background: var(--primary-bg);
color: var(--primary);
font-size: 22rpx;
font-weight: 600;
padding: 8rpx 16rpx;
border-radius: 16rpx;
line-height: 1;
bottom: 0;
border-radius: 50%;
background: radial-gradient(circle at center,
rgba(var(--primary-rgb), 0.20) 0%,
rgba(var(--primary-rgb), 0.10) 45%,
rgba(var(--primary-rgb), 0) 72%);
}
/* 奖杯:居中,轻微浮动 + 投影 */
.empty-trophy {
position: relative;
width: 144rpx;
height: 144rpx;
z-index: 2;
animation: emptyFloat 3s ease-in-out infinite;
filter: drop-shadow(0 6rpx 16rpx rgba(var(--primary-rgb), 0.25));
}
/* 闪光点:散布光晕周围,错峰闪烁 + 缩放 */
.empty-spark {
position: absolute;
z-index: 3;
opacity: 0.85;
}
.empty-spark--1 {
top: 18rpx;
left: 40rpx;
width: 32rpx;
height: 32rpx;
animation: emptySparkle 2.4s ease-in-out infinite;
}
.empty-spark--2 {
top: 48rpx;
right: 32rpx;
width: 26rpx;
height: 26rpx;
animation: emptySparkle 2.4s ease-in-out 0.6s infinite;
}
.empty-spark--3 {
bottom: 40rpx;
right: 60rpx;
width: 22rpx;
height: 22rpx;
animation: emptySparkle 2.4s ease-in-out 1.2s infinite;
}
@keyframes emptyFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10rpx); }
}
@keyframes emptySparkle {
0%, 100% { opacity: 0.2; transform: scale(0.8); }
50% { opacity: 0.95; transform: scale(1.15); }
}
.empty-text {
font-size: 30rpx;
font-weight: 600;
color: var(--text);
margin-bottom: 12rpx;
}