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/index/index.js
+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
})
},
pages/index/index.wxml
+33 -15
View File
@@ -9,28 +9,46 @@
<text class="greeting-sub">{{todayDone ? '继续保持这个势头' : '今天的平板支撑等着你'}}</text>
</view>
<!-- 连续打卡卡片 -->
<!-- 连续打卡卡片:火焰连胜 + 分段进度 -->
<ui-card variant="gradient in" class="{{justCompleted ? 'just-completed' : ''}}">
<view class="header-card">
<view class="streak-section">
<image class="streak-icon" src="{{icons.hotWhite}}" mode="aspectFit"></image>
<text class="streak-num">{{streakCount}}</text>
<text class="streak-label">连续打卡</text>
</view>
<view class="divider"></view>
<view class="plan-info">
<!-- 上区:连胜视觉重心 + 计划徽章 -->
<view class="streak-row">
<view class="streak-section">
<view class="streak-icon-wrap">
<view class="streak-halo"></view>
<image class="streak-icon" src="{{icons.hotWhite}}" mode="aspectFit"></image>
</view>
<view class="streak-text">
<text class="streak-num">{{streakCount}}</text>
<text class="streak-label">连续打卡</text>
</view>
</view>
<view class="plan-badge">
<image class="plan-badge-icon" src="{{icons.formWhite}}" mode="aspectFit"></image>
<text class="plan-badge-text">{{planName}}</text>
</view>
<view class="progress-bar-wrap">
<view class="progress-bar">
<view class="progress-fill" style="width: {{planProgress}}%;">
<view class="progress-glow"></view>
</view>
</view>
<text class="progress-label">第 {{planDay}} / {{planTotal}} 天</text>
</view>
<!-- 下区:分段格子(<=10天)或里程碑连续条(>10天) -->
<view class="segment-progress">
<view class="segment-track" wx:if="{{useSegments}}">
<view
wx:for="{{planDays}}"
wx:key="*this"
class="segment-cell {{index < planDay - 1 ? 'done' : ''}} {{index === planDay - 1 ? 'current' : ''}}"
></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>
</ui-card>
pages/index/index.wxss
+114 -43
View File
@@ -33,32 +33,72 @@
/* ---- header card ---- */
.header-card {
display: flex;
align-items: center;
flex-direction: column;
gap: 28rpx;
padding: 4rpx 0;
}
/* 上区:左连胜视觉重心,右计划徽章 */
.streak-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.streak-section {
display: flex;
flex-direction: column;
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 {
width: 44rpx;
height: 44rpx;
margin-bottom: 4rpx;
position: relative;
width: 64rpx;
height: 64rpx;
z-index: 1;
animation: float 2.5s ease-in-out infinite;
}
.streak-text {
display: flex;
flex-direction: column;
}
.streak-num {
font-size: 56rpx;
font-weight: 700;
font-size: 72rpx;
font-weight: 800;
line-height: 1;
/* 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
use var(--primary) here — that would be orange-on-orange and invisible. */
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 {
@@ -68,29 +108,24 @@
line-height: 1;
}
.divider {
width: 2rpx;
height: 80rpx;
background: var(--border);
margin: 0 28rpx;
}
.plan-info {
flex: 1;
display: flex;
flex-direction: column;
@keyframes streakHalo {
0%, 100% { transform: scale(0.85); opacity: 0.7; }
50% { transform: scale(1.1); opacity: 1; }
}
/* 计划徽章:移到上区右侧,半透明白底药丸,与火焰渐变卡片区分 */
.plan-badge {
display: flex;
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 {
width: 28rpx;
height: 28rpx;
color: var(--primary);
margin-right: 8rpx;
}
@@ -101,39 +136,70 @@
line-height: 1;
}
.progress-bar-wrap {
/* 下区:分段进度 */
.segment-progress {
display: flex;
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%;
height: 8rpx;
background: var(--border);
border-radius: 4rpx;
overflow: visible;
margin-bottom: 8rpx;
}
.progress-fill {
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);
.milestone-bar {
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;
right: -4rpx;
top: -4rpx;
width: 16rpx;
height: 16rpx;
background: var(--on-primary, var(--primary));
top: 50%;
width: 10rpx;
height: 10rpx;
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 {
@@ -142,6 +208,11 @@
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-section {
text-align: center;