feat(ui): 记录页月份联动与多项 UI 美化/修复

- records: 底部列表与月份选择器联动,新增 [本月|最近] 分段控件;标题/空态随模式切换
- leaderboard: 领奖台布局(冠军居中+皇冠)、次数标注于底座且三档水平对齐;头像 cloud:// 批量预解析提速(云函数需重新部署)
- index/timer: 主色底图标改白色变体修复隐形;目标数字按微信字体缩放补偿真机遮挡
- settings: 配色方案横滑渐变色卡;头像上传前压缩至 200px
- theme: 新增 teal 主题;暗黑背景统一对齐
- 圆形头像双保险(image 自身 border-radius)修复月/年榜方图

注: cloudfunctions/leaderboard 改动须在开发者工具重新部署才生效。
This commit is contained in:
2026-07-22 09:36:22 +08:00
parent 70b87d424d
commit 6176f2c341
32 changed files with 924 additions and 197 deletions
+17 -14
View File
@@ -17,24 +17,25 @@
justify-content: center;
}
/* breathing guide rings — three concentric layers */
/* breathing guide rings — soft radial glows instead of hard outline circles,
so they read as ambient halo rather than a bullseye */
.breathe-ring {
position: absolute;
border-radius: 50%;
border: 3rpx solid rgba(var(--primary-rgb), 0.15);
background: radial-gradient(circle, rgba(var(--primary-rgb), 0.10) 0%, rgba(var(--primary-rgb), 0) 65%);
animation: breathePulse 3.5s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.breathe-ring-1 { width: 480rpx; height: 480rpx; animation-delay: 0s; }
.breathe-ring-2 { width: 400rpx; height: 400rpx; animation-delay: 0.5s; border-color: rgba(var(--primary-rgb), 0.25); border-width: 4rpx; }
.breathe-ring-3 { width: 320rpx; height: 320rpx; animation-delay: 1s; border-color: rgba(var(--primary-rgb), 0.35); border-width: 5rpx; }
.breathe-ring-1 { width: 520rpx; height: 520rpx; animation-delay: 0s; }
.breathe-ring-2 { width: 440rpx; height: 440rpx; animation-delay: 0.5s; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.14) 0%, rgba(var(--primary-rgb), 0) 65%); }
.breathe-ring-3 { width: 380rpx; height: 380rpx; animation-delay: 1s; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.18) 0%, rgba(var(--primary-rgb), 0) 65%); }
.breathe-ring.fast { animation: breathePulseFast 1.4s ease-in-out infinite; }
.breathe-ring.fast.breathe-ring-1 { animation-delay: 0s; border-color: rgba(var(--primary-rgb), 0.3); }
.breathe-ring.fast.breathe-ring-2 { animation-delay: 0.25s; border-color: rgba(var(--primary-rgb), 0.45); }
.breathe-ring.fast.breathe-ring-3 { animation-delay: 0.5s; border-color: rgba(var(--primary-rgb), 0.6); }
.breathe-ring.fast.breathe-ring-1 { animation-delay: 0s; }
.breathe-ring.fast.breathe-ring-2 { animation-delay: 0.25s; }
.breathe-ring.fast.breathe-ring-3 { animation-delay: 0.5s; }
/* celebration burst */
.celebrate-burst {
@@ -47,11 +48,12 @@
.spark {
position: absolute;
font-size: 36rpx;
width: 44rpx;
height: 44rpx;
animation: sparkBurst 1s ease-out forwards;
}
.s1 { top: -10rpx; left: 50%; margin-left: -18rpx; animation-delay: 0s; }
.s1 { top: -10rpx; left: 50%; margin-left: -22rpx; animation-delay: 0s; }
.s2 { top: 30rpx; right: -10rpx; animation-delay: 0.1s; }
.s3 { bottom: -10rpx; right: 50rpx; animation-delay: 0.2s; }
.s4 { bottom: 20rpx; left: 30rpx; animation-delay: 0.15s; }
@@ -264,9 +266,9 @@
50% { transform: scale(1.08); }
}
.completion-emoji {
font-size: 80rpx;
line-height: 1;
.completion-icon {
width: 80rpx;
height: 80rpx;
}
.completion-title {
@@ -346,7 +348,8 @@
}
.streak-flame {
font-size: 32rpx;
width: 32rpx;
height: 32rpx;
}
.streak-text {