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

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

注: cloudfunctions/leaderboard 改动须在开发者工具重新部署才生效。

pages/leaderboard/leaderboard.wxml

@@ -1,13 +1,15 @@
 <view class="container page-enter" style="{{themeStyle}}">
-  <!-- Period tabs -->
-  <view class="period-tabs">
-    <view
-      wx:for="{{periods}}"
-      wx:key="key"
-      class="period-tab {{activePeriod === item.key ? 'active' : ''}}"
-      data-period="{{item.key}}"
-      bindtap="switchPeriod"
-    >{{item.label}}</view>
+  <!-- Period tabs: pill-style segmented control, consistent with settings -->
+  <view class="period-seg-wrap">
+    <view class="period-seg">
+      <view
+        wx:for="{{periods}}"
+        wx:key="key"
+        class="period-seg-item {{activePeriod === item.key ? 'active' : ''}}"
+        data-period="{{item.key}}"
+        bindtap="switchPeriod"
+      >{{item.label}}</view>
+    </view>
   </view>
 
   <!-- Loading skeleton -->
@@ -27,33 +29,68 @@
     <text class="empty-sub">快去训练吧,争当第一名!</text>
   </view>
 
-  <!-- Rank list -->
-  <view class="rank-list" wx:else>
-    <view
-      wx:for="{{rankedList}}"
-      wx:key="openid"
-      class="rank-item {{item.openid === myEntry.openid ? 'is-me' : ''}} rank-item--enter"
-      style="animation-delay: {{index < 10 ? index * 60 : 0}}ms;"
-    >
-      <view class="rank-num {{item.rank === 1 ? 'gold' : item.rank === 2 ? 'silver' : item.rank === 3 ? 'bronze' : ''}}">
-        <text wx:if="{{item.rank === 1}}">🥇</text>
-        <text wx:elif="{{item.rank === 2}}">🥈</text>
-        <text wx:elif="{{item.rank === 3}}">🥉</text>
-        <text wx:else>{{item.rank}}</text>
+  <block wx:else>
+    <!-- Podium: top 3 (only when there are at least 3 entries) -->
+    <view class="podium" wx:if="{{rankedList.length >= 3}}">
+      <!-- 2nd -->
+      <view class="podium-slot podium-slot--second rank-item--enter" style="animation-delay: 60ms;">
+        <view class="podium-avatar-wrap">
+          <view class="avatar avatar--md {{rankedList[1].avatarUrl ? 'has-avatar' : ''}}"><image class="avatar__img" src="{{rankedList[1].avatarUrl || icons.peopleFill}}" mode="{{rankedList[1].avatarUrl ? 'aspectFill' : 'aspectFit'}}"></image></view>
+          <view class="podium-medal podium-medal--silver">2</view>
+        </view>
+        <text class="podium-name">{{rankedList[1].name}}</text>
+        <text class="podium-dur">{{rankedList[1].durationText}}</text>
+        <view class="podium-base podium-base--second"><text class="podium-base__label">{{rankedList[1].sessions}}次</text></view>
       </view>
-      <image class="rank-avatar" src="{{icons.peopleFill}}" mode="aspectFit"></image>
-      <view class="rank-info">
-        <text class="rank-name">{{item.name}}</text>
-        <text class="rank-sessions">{{item.sessions}}次</text>
+      <!-- 1st -->
+      <view class="podium-slot podium-slot--first rank-item--enter" style="animation-delay: 0ms;">
+        <image class="podium-crown" src="{{icons.crownFill}}" mode="aspectFit"></image>
+        <view class="podium-avatar-wrap">
+          <view class="avatar avatar--md avatar--lg {{rankedList[0].avatarUrl ? 'has-avatar' : ''}}"><image class="avatar__img" src="{{rankedList[0].avatarUrl || icons.peopleFill}}" mode="{{rankedList[0].avatarUrl ? 'aspectFill' : 'aspectFit'}}"></image></view>
+          <view class="podium-medal podium-medal--gold">1</view>
+        </view>
+        <text class="podium-name podium-name--first">{{rankedList[0].name}}</text>
+        <text class="podium-dur podium-dur--first">{{rankedList[0].durationText}}</text>
+        <view class="podium-base podium-base--first"><text class="podium-base__label">{{rankedList[0].sessions}}次</text></view>
+      </view>
+      <!-- 3rd -->
+      <view class="podium-slot podium-slot--third rank-item--enter" style="animation-delay: 120ms;">
+        <view class="podium-avatar-wrap">
+          <view class="avatar avatar--md {{rankedList[2].avatarUrl ? 'has-avatar' : ''}}"><image class="avatar__img" src="{{rankedList[2].avatarUrl || icons.peopleFill}}" mode="{{rankedList[2].avatarUrl ? 'aspectFill' : 'aspectFit'}}"></image></view>
+          <view class="podium-medal podium-medal--bronze">3</view>
+        </view>
+        <text class="podium-name">{{rankedList[2].name}}</text>
+        <text class="podium-dur">{{rankedList[2].durationText}}</text>
+        <view class="podium-base podium-base--third"><text class="podium-base__label">{{rankedList[2].sessions}}次</text></view>
       </view>
-      <text class="rank-dur">{{item.durationText}}</text>
     </view>
-  </view>
+
+    <!-- Rank list: top-3 shown on the podium are skipped when podium exists -->
+    <view class="rank-list">
+      <view
+        wx:for="{{rankedList}}"
+        wx:key="openid"
+        wx:if="{{rankedList.length < 3 || index >= 3}}"
+        class="rank-item {{myEntry && item.openid === myEntry.openid ? 'is-me' : ''}} rank-item--enter"
+        style="animation-delay: {{index < 10 ? index * 60 : 0}}ms;"
+      >
+        <view class="rank-num {{item.rank === 1 ? 'gold' : item.rank === 2 ? 'silver' : item.rank === 3 ? 'bronze' : ''}}">
+          <text>{{item.rank}}</text>
+        </view>
+        <view class="avatar avatar--sm {{item.avatarUrl ? 'has-avatar' : ''}}"><image class="avatar__img" src="{{item.avatarUrl || icons.peopleFill}}" mode="{{item.avatarUrl ? 'aspectFill' : 'aspectFit'}}"></image></view>
+        <view class="rank-info">
+          <text class="rank-name">{{item.name}}</text>
+          <text class="rank-sessions">{{item.sessions}}次</text>
+        </view>
+        <text class="rank-dur">{{item.durationText}}</text>
+      </view>
+    </view>
+  </block>
 
   <!-- My entry pinned at bottom (if not already in list) -->
   <view class="my-bar" wx:if="{{myEntry && myEntry.rank > rankedList.length}}">
-    <view class="rank-num">{{myEntry.rank}}</view>
-    <image class="rank-avatar" src="{{icons.peopleFill}}" mode="aspectFit"></image>
+    <view class="rank-num my-bar__num">{{myEntry.rank}}</view>
+    <view class="avatar avatar--sm my-bar__avatar {{myEntry.avatarUrl ? 'has-avatar' : ''}}"><image class="avatar__img" src="{{myEntry.avatarUrl || icons.peopleFill}}" mode="{{myEntry.avatarUrl ? 'aspectFill' : 'aspectFit'}}"></image></view>
     <view class="rank-info">
       <text class="rank-name">我 ({{myEntry.name}})</text>
       <text class="rank-sessions">{{myEntry.sessions}}次</text>

pages/leaderboard/leaderboard.wxss

@@ -5,42 +5,36 @@
   box-sizing: border-box;
 }
 
-/* Period tabs */
-.period-tabs {
-  display: flex;
-  background: var(--card-bg);
-  padding: 0 32rpx;
-  border-bottom: 1rpx solid var(--border);
+/* Period tabs: pill segmented control, same language as settings .segmented */
+.period-seg-wrap {
+  padding: 20rpx 24rpx 8rpx;
   position: sticky;
   top: 0;
   z-index: 10;
 }
 
-.period-tab {
+.period-seg {
+  display: flex;
+  background: var(--bg-soft);
+  border-radius: 999rpx;
+  padding: 6rpx;
+}
+
+.period-seg-item {
   flex: 1;
   text-align: center;
-  padding: 24rpx 0 20rpx;
-  font-size: 30rpx;
+  padding: 16rpx 0;
+  font-size: 28rpx;
   color: var(--text-secondary);
-  position: relative;
-  transition: color 0.2s, background-color 0.3s ease;
+  border-radius: 999rpx;
+  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
 }
 
-.period-tab.active {
+.period-seg-item.active {
+  background: var(--card-bg);
   color: var(--primary);
   font-weight: 600;
-}
-
-.period-tab.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 40rpx;
-  height: 6rpx;
-  border-radius: 3rpx;
-  background: var(--primary);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.10);
 }
 
 /* Status */
@@ -75,6 +69,163 @@
   opacity: 0.6;
 }
 
+/* ---- podium (top 3) ---- */
+.podium {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 32rpx 24rpx 0;
+  gap: 20rpx;
+}
+
+.podium-slot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 200rpx;
+}
+
+.podium-crown {
+  width: 56rpx;
+  height: 56rpx;
+  margin-bottom: -8rpx;
+  z-index: 1;
+  animation: float 2.5s ease-in-out infinite;
+}
+
+.podium-avatar-wrap {
+  position: relative;
+}
+
+/* Circular avatar: a rounded <view> clips the <image> inside it.
+   border-radius on the <image> itself is NOT reliably clipped by some
+   WeChat base libraries, so we wrap it and clip on the parent instead. */
+.avatar {
+  position: relative;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--bg-soft);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.avatar__img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  /* Some WeChat base libraries don't clip a remote <image>'s native layer
+     with the parent view's overflow:hidden (they DO clip the placeholder
+     SVG, which is why daily looked fine but monthly/yearly real photos
+     showed square). Rounding the <image> itself is the cross-version-safe
+     fix and also covers the wrapper. */
+  border-radius: 50%;
+}
+
+.avatar--md {
+  width: 96rpx;
+  height: 96rpx;
+  padding: 20rpx;
+  opacity: 0.7;
+  border: 4rpx solid var(--card-bg);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+  margin-bottom: 12rpx;
+}
+
+.avatar--lg {
+  width: 128rpx;
+  height: 128rpx;
+  padding: 26rpx;
+  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;
+}
+
+/* A real photo fills the whole circle (no inner ring), mirroring the
+   settings-page avatar. The placeholder keeps the padding ring above. */
+.avatar.has-avatar {
+  padding: 0;
+  opacity: 1;
+}
+
+.podium-medal {
+  position: absolute;
+  bottom: -8rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #FFFFFF;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
+}
+
+.podium-medal--gold   { background: linear-gradient(135deg, #FFC53D, #FA8C16); }
+.podium-medal--silver { background: linear-gradient(135deg, #C9CDD4, #8C8C8C); }
+.podium-medal--bronze { background: linear-gradient(135deg, #E8A06A, #D46B08); }
+
+.podium-name {
+  font-size: 26rpx;
+  font-weight: 500;
+  color: var(--text);
+  max-width: 180rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.3;
+}
+
+.podium-name--first {
+  font-size: 28rpx;
+  font-weight: 600;
+}
+
+/* session count printed on the podium base. Pinned a fixed offset above the
+   base's bottom edge so all three sit on the SAME horizontal line despite the
+   stepped base heights (the podium itself is bottom-aligned via flex-end). */
+.podium-base__label {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 10rpx;
+  text-align: center;
+  font-size: 22rpx;
+  font-weight: 700;
+  color: var(--primary);
+  line-height: 1;
+}
+
+.podium-dur {
+  font-size: 24rpx;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-top: 2rpx;
+  font-variant-numeric: tabular-nums;
+}
+
+.podium-dur--first {
+  font-size: 28rpx;
+  color: var(--primary);
+}
+
+/* podium bases: stepped blocks under each slot */
+.podium-base {
+  width: 100%;
+  margin-top: 16rpx;
+  border-radius: 16rpx 16rpx 0 0;
+  background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.10), rgba(var(--primary-rgb), 0.02));
+  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; }
+
 /* Rank list */
 .rank-list {
   padding: 16rpx 24rpx;
@@ -116,14 +267,11 @@
 .rank-num.silver { background: var(--bg-soft); color: #8C8C8C; font-size: 36rpx; }
 .rank-num.bronze { background: rgba(212, 107, 8, 0.15); color: #D46B08; font-size: 36rpx; }
 
-.rank-avatar {
+.avatar--sm {
   width: 64rpx;
   height: 64rpx;
-  border-radius: 50%;
-  background: var(--bg-soft);
-  flex-shrink: 0;
-  margin-right: 16rpx;
   opacity: 0.6;
+  margin-right: 16rpx;
 }
 
 .rank-info {
@@ -155,27 +303,46 @@
   margin-left: 16rpx;
 }
 
-/* My rank bar (pinned) */
+/* My rank bar (pinned): solid gradient card so it reads as "my highlight"
+   floating above the list, not a translucent outline */
 .my-bar {
   position: fixed;
-  bottom: calc(110rpx + env(safe-area-inset-bottom));
+  bottom: calc(120rpx + env(safe-area-inset-bottom));
   left: 24rpx;
   right: 24rpx;
   display: flex;
   align-items: center;
-  background: rgba(var(--primary-rgb), 0.12);
-  border: 2rpx solid var(--primary);
-  border-radius: 16rpx;
-  padding: 16rpx 24rpx;
+  background: linear-gradient(135deg, var(--primary), var(--primary-light));
+  border-radius: 20rpx;
+  padding: 20rpx 24rpx;
   z-index: 10;
-  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
+  box-shadow: 0 8rpx 24rpx rgba(var(--primary-rgb), 0.35);
+}
+
+.my-bar .rank-num.my-bar__num {
+  background: rgba(255, 255, 255, 0.22);
+  color: #FFFFFF;
+}
+
+.my-bar__avatar {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.85);
+  border: 2rpx solid rgba(255, 255, 255, 0.6);
 }
 
 .my-bar .rank-name {
-  color: var(--primary);
+  color: #FFFFFF;
   font-weight: 600;
 }
 
+.my-bar .rank-sessions {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.my-bar .rank-dur {
+  color: #FFFFFF;
+}
+
 /* ---- rank item entrance animation ---- */
 .rank-item--enter {
   animation: rankIn 0.4s cubic-bezier(0.2, 0, 0.2, 1) both;
@@ -191,7 +358,13 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 80rpx 32rpx;
+  justify-content: center;
+  /* 垂直居中在"顶部 segmented 控件以下、底部 tabBar 以上"的可用区域。
+     ~120rpx ≈ seg-wrap 高度；134rpx + safe-area 与 .container 的
+     padding-bottom 一致，预留自定义 tabBar。 */
+  min-height: calc(100vh - 120rpx - 134rpx - env(safe-area-inset-bottom));
+  padding: 32rpx;
+  box-sizing: border-box;
 }
 
 .empty-illus {