feat(ui): 排行榜与首页打卡卡片多项优化
排行榜性能: - 客户端乐观缓存:进页面/切周期秒显旧数据,后台静默刷新,消除 2-3s 空白 - 云函数实例缓存 TTL 60s -> 5min,降低全表扫描频率 排行榜 UI: - 空状态重设计:奖杯光环插画(径向光晕 + 闪光漂浮) - 领奖台 slot 撑满对齐列表、金银铜底座配色、角标与昵称间距修复、底线对齐 首页打卡卡片: - 火焰光晕脉动 + 72rpx 大数字 + 分段进度格子 - 计划 >10 天时进度退化为里程碑连续条 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -20,7 +20,13 @@ const TZ_OFFSET_MS = 8 * 60 * 60 * 1000
|
|||||||
// a short TTL so repeated board opens (and day/month/year switches within
|
// a short TTL so repeated board opens (and day/month/year switches within
|
||||||
// a session) reuse one scan. Cold starts just re-scan. Not persistent
|
// a session) reuse one scan. Cold starts just re-scan. Not persistent
|
||||||
// across instances, which is fine - the board needn't be real-time.
|
// across instances, which is fine - the board needn't be real-time.
|
||||||
const CACHE_TTL = 60 * 1000
|
// 5min: the board is non-real-time, and the expensive part is the serial
|
||||||
|
// full-collection scan (100/page). A longer TTL means far fewer re-scans
|
||||||
|
// while the instance stays warm; the trade-off is a freshly-trained user
|
||||||
|
// may not see themselves for up to 5min, acceptable for a motivational
|
||||||
|
// board. The client also keeps its own display cache, so re-entry paints
|
||||||
|
// instantly regardless of this TTL.
|
||||||
|
const CACHE_TTL = 5 * 60 * 1000
|
||||||
let _docsCache = null // { latestByOpenid: Map, ts }
|
let _docsCache = null // { latestByOpenid: Map, ts }
|
||||||
let _docsCachePromise = null // in-flight 扫描 promise,防缓存击穿
|
let _docsCachePromise = null // in-flight 扫描 promise,防缓存击穿
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ module.exports = {
|
|||||||
version: 'v3.01',
|
version: 'v3.01',
|
||||||
|
|
||||||
/** 最后更新日期,外显在设置页「关于」 */
|
/** 最后更新日期,外显在设置页「关于」 */
|
||||||
updatedAt: '2026-07-25',
|
updatedAt: '2026-07-27',
|
||||||
|
|
||||||
/** 开发者名称 / 微信号,设置页点击可复制 */
|
/** 开发者名称 / 微信号,设置页点击可复制 */
|
||||||
developer: '刘承',
|
developer: '刘承',
|
||||||
|
|||||||
@@ -27,6 +27,8 @@ Page({
|
|||||||
planDay: 1,
|
planDay: 1,
|
||||||
planTotal: 7,
|
planTotal: 7,
|
||||||
planProgress: 0,
|
planProgress: 0,
|
||||||
|
useSegments: false,
|
||||||
|
planDays: [],
|
||||||
showPicker: false,
|
showPicker: false,
|
||||||
pickerInputFocus: false,
|
pickerInputFocus: false,
|
||||||
presets: [30, 60, 90, 120, 180, 300],
|
presets: [30, 60, 90, 120, 180, 300],
|
||||||
@@ -142,6 +144,9 @@ Page({
|
|||||||
const theme = themeMod.getCurrentTheme()
|
const theme = themeMod.getCurrentTheme()
|
||||||
// 防御:totalDays 为 0(极端数据损坏)时避免除以 0 得到 NaN
|
// 防御:totalDays 为 0(极端数据损坏)时避免除以 0 得到 NaN
|
||||||
const planProgress = plan.totalDays > 0 ? Math.round((clampedDay / plan.totalDays) * 100) : 0
|
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({
|
this.setData({
|
||||||
theme,
|
theme,
|
||||||
icons: iconsMod.build(theme),
|
icons: iconsMod.build(theme),
|
||||||
@@ -153,7 +158,9 @@ Page({
|
|||||||
planName: plan.name,
|
planName: plan.name,
|
||||||
planDay: clampedDay,
|
planDay: clampedDay,
|
||||||
planTotal: plan.totalDays,
|
planTotal: plan.totalDays,
|
||||||
planProgress
|
planProgress,
|
||||||
|
useSegments,
|
||||||
|
planDays
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
+33
-15
@@ -9,28 +9,46 @@
|
|||||||
<text class="greeting-sub">{{todayDone ? '继续保持这个势头' : '今天的平板支撑等着你'}}</text>
|
<text class="greeting-sub">{{todayDone ? '继续保持这个势头' : '今天的平板支撑等着你'}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 连续打卡卡片 -->
|
<!-- 连续打卡卡片:火焰连胜 + 分段进度 -->
|
||||||
<ui-card variant="gradient in" class="{{justCompleted ? 'just-completed' : ''}}">
|
<ui-card variant="gradient in" class="{{justCompleted ? 'just-completed' : ''}}">
|
||||||
<view class="header-card">
|
<view class="header-card">
|
||||||
<view class="streak-section">
|
<!-- 上区:连胜视觉重心 + 计划徽章 -->
|
||||||
<image class="streak-icon" src="{{icons.hotWhite}}" mode="aspectFit"></image>
|
<view class="streak-row">
|
||||||
<text class="streak-num">{{streakCount}}</text>
|
<view class="streak-section">
|
||||||
<text class="streak-label">连续打卡</text>
|
<view class="streak-icon-wrap">
|
||||||
</view>
|
<view class="streak-halo"></view>
|
||||||
<view class="divider"></view>
|
<image class="streak-icon" src="{{icons.hotWhite}}" mode="aspectFit"></image>
|
||||||
<view class="plan-info">
|
</view>
|
||||||
|
<view class="streak-text">
|
||||||
|
<text class="streak-num">{{streakCount}}</text>
|
||||||
|
<text class="streak-label">连续打卡</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<view class="plan-badge">
|
<view class="plan-badge">
|
||||||
<image class="plan-badge-icon" src="{{icons.formWhite}}" mode="aspectFit"></image>
|
<image class="plan-badge-icon" src="{{icons.formWhite}}" mode="aspectFit"></image>
|
||||||
<text class="plan-badge-text">{{planName}}</text>
|
<text class="plan-badge-text">{{planName}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="progress-bar-wrap">
|
</view>
|
||||||
<view class="progress-bar">
|
<!-- 下区:分段格子(<=10天)或里程碑连续条(>10天) -->
|
||||||
<view class="progress-fill" style="width: {{planProgress}}%;">
|
<view class="segment-progress">
|
||||||
<view class="progress-glow"></view>
|
<view class="segment-track" wx:if="{{useSegments}}">
|
||||||
</view>
|
<view
|
||||||
</view>
|
wx:for="{{planDays}}"
|
||||||
<text class="progress-label">第 {{planDay}} / {{planTotal}} 天</text>
|
wx:key="*this"
|
||||||
|
class="segment-cell {{index < planDay - 1 ? 'done' : ''}} {{index === planDay - 1 ? 'current' : ''}}"
|
||||||
|
></view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="milestone-track" wx:else>
|
||||||
|
<view class="milestone-bar">
|
||||||
|
<view class="milestone-fill" style="width: {{planProgress}}%;"></view>
|
||||||
|
<view class="milestone-node" style="left: 0%;"></view>
|
||||||
|
<view class="milestone-node" style="left: 25%;"></view>
|
||||||
|
<view class="milestone-node" style="left: 50%;"></view>
|
||||||
|
<view class="milestone-node" style="left: 75%;"></view>
|
||||||
|
<view class="milestone-node" style="left: 100%;"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="progress-label">第 {{planDay}} / {{planTotal}} 天</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</ui-card>
|
</ui-card>
|
||||||
|
|||||||
+114
-43
@@ -33,32 +33,72 @@
|
|||||||
/* ---- header card ---- */
|
/* ---- header card ---- */
|
||||||
.header-card {
|
.header-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
|
gap: 28rpx;
|
||||||
padding: 4rpx 0;
|
padding: 4rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 上区:左连胜视觉重心,右计划徽章 */
|
||||||
|
.streak-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.streak-section {
|
.streak-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 140rpx;
|
}
|
||||||
|
|
||||||
|
/* 火焰图标 + 光晕:光晕脉动让火焰"活"起来 */
|
||||||
|
.streak-icon-wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.streak-halo {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle at center,
|
||||||
|
rgba(var(--primary-rgb), 0.45) 0%,
|
||||||
|
rgba(var(--primary-rgb), 0.18) 50%,
|
||||||
|
rgba(var(--primary-rgb), 0) 75%);
|
||||||
|
animation: streakHalo 2s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.streak-icon {
|
.streak-icon {
|
||||||
width: 44rpx;
|
position: relative;
|
||||||
height: 44rpx;
|
width: 64rpx;
|
||||||
margin-bottom: 4rpx;
|
height: 64rpx;
|
||||||
|
z-index: 1;
|
||||||
animation: float 2.5s ease-in-out infinite;
|
animation: float 2.5s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.streak-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.streak-num {
|
.streak-num {
|
||||||
font-size: 56rpx;
|
font-size: 72rpx;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
|
line-height: 1;
|
||||||
/* On the gradient hero card --text cascades to white; on any plain card it
|
/* On the gradient hero card --text cascades to white; on any plain card it
|
||||||
stays dark, so var(--text) reads correctly in both contexts. We must NOT
|
stays dark, so var(--text) reads correctly in both contexts. We must NOT
|
||||||
use var(--primary) here — that would be orange-on-orange and invisible. */
|
use var(--primary) here — that would be orange-on-orange and invisible. */
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
|
text-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
|
|
||||||
.streak-label {
|
.streak-label {
|
||||||
@@ -68,29 +108,24 @@
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
@keyframes streakHalo {
|
||||||
width: 2rpx;
|
0%, 100% { transform: scale(0.85); opacity: 0.7; }
|
||||||
height: 80rpx;
|
50% { transform: scale(1.1); opacity: 1; }
|
||||||
background: var(--border);
|
|
||||||
margin: 0 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plan-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 计划徽章:移到上区右侧,半透明白底药丸,与火焰渐变卡片区分 */
|
||||||
.plan-badge {
|
.plan-badge {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 16rpx;
|
background: rgba(255, 255, 255, 0.18);
|
||||||
|
padding: 8rpx 18rpx;
|
||||||
|
border-radius: 999rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plan-badge-icon {
|
.plan-badge-icon {
|
||||||
width: 28rpx;
|
width: 28rpx;
|
||||||
height: 28rpx;
|
height: 28rpx;
|
||||||
color: var(--primary);
|
|
||||||
margin-right: 8rpx;
|
margin-right: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -101,39 +136,70 @@
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-wrap {
|
/* 下区:分段进度 */
|
||||||
|
.segment-progress {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar {
|
/* planTotal <= 10:按天分段格子 */
|
||||||
|
.segment-track {
|
||||||
|
display: flex;
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment-cell {
|
||||||
|
flex: 1;
|
||||||
|
height: 12rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
background: transparent;
|
||||||
|
border: 2rpx solid rgba(255, 255, 255, 0.30);
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: background 0.3s ease, border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment-cell.done {
|
||||||
|
background: var(--on-primary, #FFFFFF);
|
||||||
|
border-color: var(--on-primary, #FFFFFF);
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment-cell.current {
|
||||||
|
background: var(--on-primary, #FFFFFF);
|
||||||
|
border-color: var(--on-primary, #FFFFFF);
|
||||||
|
animation: segmentPulse 1.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* planTotal > 10:连续条 + 里程碑节点,避免格子过密 */
|
||||||
|
.milestone-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 8rpx;
|
|
||||||
background: var(--border);
|
|
||||||
border-radius: 4rpx;
|
|
||||||
overflow: visible;
|
|
||||||
margin-bottom: 8rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-fill {
|
.milestone-bar {
|
||||||
height: 100%;
|
|
||||||
/* On the gradient hero card --on-primary (white) overrides the fallback,
|
|
||||||
so the fill stays visible instead of blending into the orange card. */
|
|
||||||
background: var(--on-primary, linear-gradient(90deg, var(--primary), var(--primary-light)));
|
|
||||||
border-radius: 4rpx;
|
|
||||||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 12rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.12);
|
||||||
|
border-radius: 6rpx;
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-glow {
|
.milestone-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--on-primary, linear-gradient(90deg, var(--primary), var(--primary-light)));
|
||||||
|
border-radius: 6rpx;
|
||||||
|
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestone-node {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -4rpx;
|
top: 50%;
|
||||||
top: -4rpx;
|
width: 10rpx;
|
||||||
width: 16rpx;
|
height: 10rpx;
|
||||||
height: 16rpx;
|
|
||||||
background: var(--on-primary, var(--primary));
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow: 0 0 10rpx var(--on-primary, var(--primary));
|
background: var(--card-bg);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border: 2rpx solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-label {
|
.progress-label {
|
||||||
@@ -142,6 +208,11 @@
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes segmentPulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 4rpx rgba(var(--primary-rgb), 0.4); }
|
||||||
|
50% { box-shadow: 0 0 14rpx rgba(var(--primary-rgb), 0.9); }
|
||||||
|
}
|
||||||
|
|
||||||
/* ---- target card ---- */
|
/* ---- target card ---- */
|
||||||
.target-section {
|
.target-section {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ Page({
|
|||||||
rankedList: [],
|
rankedList: [],
|
||||||
myEntry: null,
|
myEntry: null,
|
||||||
loading: false,
|
loading: false,
|
||||||
|
refreshing: false,
|
||||||
empty: false,
|
empty: false,
|
||||||
icons: iconsMod.build()
|
icons: iconsMod.build()
|
||||||
},
|
},
|
||||||
@@ -58,7 +59,24 @@ Page({
|
|||||||
this._fetchSeq = (this._fetchSeq || 0) + 1
|
this._fetchSeq = (this._fetchSeq || 0) + 1
|
||||||
const seq = this._fetchSeq
|
const seq = this._fetchSeq
|
||||||
const period = this.data.activePeriod
|
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({
|
wx.cloud.callFunction({
|
||||||
name: 'leaderboard',
|
name: 'leaderboard',
|
||||||
data: {
|
data: {
|
||||||
@@ -76,7 +94,12 @@ Page({
|
|||||||
// them into thinking the cloud is broken.
|
// them into thinking the cloud is broken.
|
||||||
console.warn('[leaderboard] cloud function failed, using local fallback:', err)
|
console.warn('[leaderboard] cloud function failed, using local fallback:', err)
|
||||||
if (seq !== this._fetchSeq) { if (cb) cb(); return }
|
if (seq !== this._fetchSeq) { if (cb) cb(); return }
|
||||||
this._applyLocal()
|
// 已有缓存秒显时后台刷新失败:保持旧数据,不打断用户;仅无缓存才走本地兜底。
|
||||||
|
if (cached && cached.rankedList) {
|
||||||
|
this.setData({ refreshing: false })
|
||||||
|
} else {
|
||||||
|
this._applyLocal()
|
||||||
|
}
|
||||||
if (cb) cb()
|
if (cb) cb()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -91,12 +114,16 @@ Page({
|
|||||||
durationText: util.formatDuration(result.myEntry.duration),
|
durationText: util.formatDuration(result.myEntry.duration),
|
||||||
isMe: true
|
isMe: true
|
||||||
} : null
|
} : null
|
||||||
|
const empty = list.length === 0 && !myEntry
|
||||||
this.setData({
|
this.setData({
|
||||||
rankedList: list,
|
rankedList: list,
|
||||||
myEntry,
|
myEntry,
|
||||||
loading: false,
|
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 */
|
/** 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 || '',
|
rank: 1, openid: 'local', name: localName, nickname: profile.nickname || '',
|
||||||
duration, durationText: util.formatDuration(duration), sessions
|
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 {
|
} else {
|
||||||
this.setData({ loading: false, empty: true })
|
this.setData({ loading: false, refreshing: false, empty: true })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -21,16 +21,17 @@
|
|||||||
<ui-skeleton variant="list-row" count="{{5}}" />
|
<ui-skeleton variant="list-row" count="{{5}}" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- Empty with CSS illustration -->
|
<!-- Empty: 奖杯光环插画 -->
|
||||||
<view class="empty-state" wx:elif="{{empty}}">
|
<view class="empty-state" wx:elif="{{empty}}">
|
||||||
<view class="empty-illus">
|
<view class="empty-illus">
|
||||||
<view class="empty-illus-body"></view>
|
<view class="empty-halo"></view>
|
||||||
<view class="empty-illus-arm empty-illus-arm--l"></view>
|
<image class="empty-trophy" src="{{icons.trophyFill}}" mode="aspectFit"></image>
|
||||||
<view class="empty-illus-arm empty-illus-arm--r"></view>
|
<image class="empty-spark empty-spark--1" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
|
||||||
<view class="empty-illus-bubble">加油</view>
|
<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>
|
</view>
|
||||||
<text class="empty-text">暂无排行数据</text>
|
<text class="empty-text">暂无排行数据</text>
|
||||||
<text class="empty-sub">快去训练吧,争当第一名!</text>
|
<text class="empty-sub">快去训练,争当第一名!</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<block wx:else>
|
<block wx:else>
|
||||||
|
|||||||
@@ -82,7 +82,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 200rpx;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.podium-crown {
|
.podium-crown {
|
||||||
@@ -128,7 +128,7 @@
|
|||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
border: 4rpx solid var(--card-bg);
|
border: 4rpx solid var(--card-bg);
|
||||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||||
margin-bottom: 12rpx;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar--lg {
|
.avatar--lg {
|
||||||
@@ -138,7 +138,7 @@
|
|||||||
border: 4rpx solid rgba(var(--primary-rgb), 0.4);
|
border: 4rpx solid rgba(var(--primary-rgb), 0.4);
|
||||||
box-shadow: 0 6rpx 20rpx rgba(var(--primary-rgb), 0.25);
|
box-shadow: 0 6rpx 20rpx rgba(var(--primary-rgb), 0.25);
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
margin-bottom: 12rpx;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* A real photo fills the whole circle (no inner ring), mirroring the
|
/* A real photo fills the whole circle (no inner ring), mirroring the
|
||||||
@@ -178,6 +178,10 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
|
/* 用 name 的 margin-top 直接控制与上方头像/角标的间距:它是 flex 子元素,
|
||||||
|
margin 必定生效不折叠,不依赖 avatar margin-bottom 的 collapse 行为
|
||||||
|
(WebView/Skyline 下不一致,曾导致角标压住昵称)。 */
|
||||||
|
margin-top: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.podium-name--first {
|
.podium-name--first {
|
||||||
@@ -196,7 +200,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--primary);
|
color: var(--text);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -222,9 +226,21 @@
|
|||||||
position: relative;
|
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--first {
|
||||||
.podium-base--second { height: 64rpx; }
|
height: 96rpx;
|
||||||
.podium-base--third { height: 48rpx; }
|
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 */
|
||||||
.rank-list {
|
.rank-list {
|
||||||
@@ -369,56 +385,79 @@
|
|||||||
|
|
||||||
.empty-illus {
|
.empty-illus {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 200rpx;
|
width: 280rpx;
|
||||||
height: 200rpx;
|
height: 280rpx;
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 48rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-illus-body {
|
/* 光晕:主题色径向渐变圆,托住奖杯 */
|
||||||
position: absolute;
|
.empty-halo {
|
||||||
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 {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: var(--primary-bg);
|
bottom: 0;
|
||||||
color: var(--primary);
|
border-radius: 50%;
|
||||||
font-size: 22rpx;
|
background: radial-gradient(circle at center,
|
||||||
font-weight: 600;
|
rgba(var(--primary-rgb), 0.20) 0%,
|
||||||
padding: 8rpx 16rpx;
|
rgba(var(--primary-rgb), 0.10) 45%,
|
||||||
border-radius: 16rpx;
|
rgba(var(--primary-rgb), 0) 72%);
|
||||||
line-height: 1;
|
}
|
||||||
|
|
||||||
|
/* 奖杯:居中,轻微浮动 + 投影 */
|
||||||
|
.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 {
|
.empty-text {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
margin-bottom: 12rpx;
|
margin-bottom: 12rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
+40
-1
@@ -418,6 +418,43 @@ const getTodayRecord = () => {
|
|||||||
return hasRecord ? { date: today, duration: totalDuration } : null
|
return hasRecord ? { date: today, duration: totalDuration } : null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Leaderboard display cache, keyed by period ('day' | 'month' | 'year').
|
||||||
|
*
|
||||||
|
* Why: building the board requires a full-collection scan in the cloud
|
||||||
|
* function (cursor-paginated 100/page, serial), which takes 2-3s when
|
||||||
|
* the function's in-instance cache is cold. This client cache lets the
|
||||||
|
* page paint the last-rendered result instantly on re-entry / period
|
||||||
|
* switch while the cloud refreshes in the background.
|
||||||
|
*
|
||||||
|
* Freshness: entries older than LB_CACHE_MAX_AGE are treated as misses -
|
||||||
|
* the cached avatarUrl is a cloud:// temp URL (~2h TTL) and stale links
|
||||||
|
* render as broken images. 30min stays safely inside that window while
|
||||||
|
* still covering the common "switch tab / switch period" re-entry case.
|
||||||
|
*/
|
||||||
|
const LEADERBOARD_CACHE_KEY = 'leaderboard_cache'
|
||||||
|
const LB_CACHE_MAX_AGE = 30 * 60 * 1000
|
||||||
|
|
||||||
|
const getLeaderboardCache = (period) => {
|
||||||
|
if (!period) return null
|
||||||
|
try {
|
||||||
|
const all = wx.getStorageSync(LEADERBOARD_CACHE_KEY) || {}
|
||||||
|
const entry = all[period]
|
||||||
|
if (!entry) return null
|
||||||
|
if (Date.now() - (entry.cachedAt || 0) > LB_CACHE_MAX_AGE) return null
|
||||||
|
return entry
|
||||||
|
} catch (e) { return null }
|
||||||
|
}
|
||||||
|
|
||||||
|
const setLeaderboardCache = (period, payload) => {
|
||||||
|
if (!period || !payload) return
|
||||||
|
try {
|
||||||
|
const all = wx.getStorageSync(LEADERBOARD_CACHE_KEY) || {}
|
||||||
|
all[period] = { ...payload, cachedAt: Date.now() }
|
||||||
|
wx.setStorageSync(LEADERBOARD_CACHE_KEY, all)
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
getRecords,
|
getRecords,
|
||||||
saveRecord,
|
saveRecord,
|
||||||
@@ -439,5 +476,7 @@ module.exports = {
|
|||||||
_markLocalChanged,
|
_markLocalChanged,
|
||||||
getToday,
|
getToday,
|
||||||
getDateOffset,
|
getDateOffset,
|
||||||
getTodayRecord
|
getTodayRecord,
|
||||||
|
getLeaderboardCache,
|
||||||
|
setLeaderboardCache
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user