refactor(ui): 12-point UI polish and bugfixes

Bug fixes:
- #1 Remove duplicate month label from calendar-heatmap (shown twice in records)
- #2 Extract shared .modal-overlay to app.wxss (was duplicated in index/records)

UX improvements:
- #3 Add long-press hint to history list in records page
- #4 Add drag handle + catchtouchmove to picker modal
- #5 Extend timer auto-navigate-back from 1.5s to 3s
- #6 Add clear data option in settings with confirmation dialog

Visual/code polish:
- #7 Remove 4 unused @keyframes (shimmer, spin) and 5 unused .icon classes
- #8 Tab bar inactive colors: hardcoded #888/#666 -> var(--text-secondary)
- #10 Split progress-ring observer to avoid redundant setData on size/color changes
- #12 Remove meaningless Math.min(planDay, 99) cap

app.wxss

@@ -110,18 +110,6 @@ page {
   70% { transform: translateY(-6rpx); }
 }
 
-/* ---- shimmer ---- */
-@keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-
-/* ---- spin ---- */
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
 .section-title {
   font-size: 32rpx;
   font-weight: 600;
@@ -129,18 +117,38 @@ page {
   margin-bottom: 20rpx;
 }
 
-/* ---- icon sizing ---- */
+/* ---- shared modal overlay ---- */
-.icon {
+.modal-overlay {
-  line-height: 1;
+  position: fixed;
-  flex-shrink: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 1000;
 }
 
-.icon-lg { font-size: 40rpx; }
+.modal-overlay-bottom {
-.icon-md { font-size: 28rpx; }
+  display: flex;
-.icon-sm { font-size: 22rpx; }
+  align-items: flex-end;
+  justify-content: center;
+}
 
-.icon-inline {
+.modal-overlay-center {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  margin-right: 8rpx;
+  justify-content: center;
 }
+
+/* ---- shared danger button ---- */
+.btn-danger {
+  background: #fff;
+  color: #E53935;
+  border: 2rpx solid rgba(229, 57, 53, 0.3);
+  border-radius: 48rpx;
+  font-size: 28rpx;
+  padding: 20rpx 0;
+  text-align: center;
+}
+
+.btn-danger::after { border: none; }

components/calendar-heatmap/calendar-heatmap.wxml

@@ -1,6 +1,5 @@
 <view class="heatmap-container">
   <view class="calendar-header">
-    <text class="month-label">{{year}}年{{month}}月</text>
     <view class="weekday-labels">
       <text class="weekday" wx:for="{{['日','一','二','三','四','五','六']}}" wx:key="*this">{{item}}</text>
     </view>

components/calendar-heatmap/calendar-heatmap.wxss

@@ -6,15 +6,6 @@
   margin-bottom: 16rpx;
 }
 
-.month-label {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 12rpx;
-  display: block;
-  text-align: center;
-}
-
 .weekday-labels {
   display: flex;
   justify-content: space-around;

components/progress-ring/progress-ring.js

@@ -17,12 +17,15 @@ Component({
   },
 
   observers: {
-    'remaining, status, duration, size, ringWidth, primaryColor'() {
+    'remaining, status, duration'() {
       const texts = { idle: '准备开始', running: '坚持住', paused: '已暂停', completed: '完成!' }
       this.setData({
         displayTime: util.formatTime(this.data.remaining),
         statusText: texts[this.data.status] || ''
       })
+    },
+
+    'remaining, duration, size, ringWidth, primaryColor'() {
       this._draw()
     }
   },

custom-tab-bar/index.wxss

@@ -28,7 +28,7 @@
 
 .tab-text {
   font-size: 24rpx;
-  color: #666;
+  color: var(--text-secondary);
   margin-top: 8rpx;
   line-height: 1;
 }
@@ -54,7 +54,7 @@
   height: 0;
   border-left: 22rpx solid transparent;
   border-right: 22rpx solid transparent;
-  border-bottom: 18rpx solid #888;
+  border-bottom: 18rpx solid var(--text-secondary);
   position: absolute;
   top: 0;
   left: 0;
@@ -67,7 +67,7 @@
 .home-body {
   width: 22rpx;
   height: 20rpx;
-  background: #888;
+  background: var(--text-secondary);
   position: absolute;
   bottom: 0;
   left: 11rpx;
@@ -94,7 +94,7 @@
 
 .bar {
   height: 6rpx;
-  background: #888;
+  background: var(--text-secondary);
   border-radius: 3rpx;
 }
 
@@ -120,7 +120,7 @@
 .gear-outer {
   width: 36rpx;
   height: 36rpx;
-  border: 5rpx solid #888;
+  border: 5rpx solid var(--text-secondary);
   border-radius: 50%;
   position: absolute;
   top: 3rpx;
@@ -134,7 +134,7 @@
 .gear-center {
   width: 12rpx;
   height: 12rpx;
-  background: #888;
+  background: var(--text-secondary);
   border-radius: 50%;
   position: absolute;
   top: 15rpx;

pages/index/index.wxml

@@ -79,8 +79,9 @@
 </view>
 
 <!-- 时间选择弹窗 -->
-<view class="modal-overlay" wx:if="{{showPicker}}" bindtap="onClosePicker">
+<view class="modal-overlay modal-overlay-bottom" wx:if="{{showPicker}}" bindtap="onClosePicker">
-  <view class="picker-modal" catchtap="noop">
+  <view class="picker-modal" catchtap="noop" catchtouchmove="noop">
+    <view class="picker-handle"></view>
     <text class="picker-title">⏱ 选择训练时长</text>
     <view class="preset-grid">
       <view

pages/index/index.wxss

@@ -295,28 +295,23 @@
 }
 
 /* ---- picker modal ---- */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.45);
-  z-index: 1000;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-}
-
 .picker-modal {
   width: 100%;
   background: #fff;
   border-radius: 32rpx 32rpx 0 0;
-  padding: 40rpx 32rpx;
+  padding: 28rpx 32rpx 40rpx;
   padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
   animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
 }
 
+.picker-handle {
+  width: 64rpx;
+  height: 8rpx;
+  background: #DDD;
+  border-radius: 4rpx;
+  margin: 0 auto 24rpx;
+}
+
 @keyframes slideUp {
   from { transform: translateY(100%); }
   to { transform: translateY(0); }

pages/records/records.wxml

@@ -40,6 +40,7 @@
   <view class="history-section card">
     <view class="history-header">
       <text class="section-title">📋 最近记录</text>
+      <text class="history-hint" wx:if="{{historyList.length > 0}}">长按可删除</text>
     </view>
     <view wx:if="{{historyList.length === 0}}" class="empty-state">
       <text class="empty-emoji">🏃</text>
@@ -63,7 +64,7 @@
   </view>
 
   <!-- 日期详情弹窗 -->
-  <view class="modal-overlay" wx:if="{{showDayDetail}}" bindtap="onCloseDayDetail">
+  <view class="modal-overlay modal-overlay-center" wx:if="{{showDayDetail}}" bindtap="onCloseDayDetail">
     <view class="day-detail-modal" catchtap="noop">
       <view class="detail-date-row">
         <text class="detail-emoji">📅</text>

pages/records/records.wxss

@@ -78,9 +78,21 @@
 
 /* ---- history ---- */
 .history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 8rpx;
 }
 
+.history-header .section-title {
+  margin-bottom: 0;
+}
+
+.history-hint {
+  font-size: 22rpx;
+  color: #CCC;
+}
+
 .empty-state {
   display: flex;
   flex-direction: column;
@@ -150,19 +162,6 @@
 }
 
 /* ---- day detail popup ---- */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.45);
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .day-detail-modal {
   width: 560rpx;
   background: #fff;

pages/settings/settings.js

@@ -98,5 +98,21 @@ Page({
         wx.showToast({ title: '已复制', icon: 'success', duration: 1500 })
       }
     })
+  },
+
+  onClearData() {
+    wx.showModal({
+      title: '清除数据',
+      content: '将删除所有训练记录和连续打卡数据，此操作不可恢复。确定继续吗？',
+      confirmText: '确定清除',
+      confirmColor: '#E53935',
+      success: (res) => {
+        if (res.confirm) {
+          wx.removeStorageSync('training_records')
+          wx.removeStorageSync('current_streak')
+          wx.showToast({ title: '已清除', icon: 'success', duration: 1500 })
+        }
+      }
+    })
   }
 })

pages/settings/settings.wxml

@@ -92,6 +92,17 @@
     </view>
   </view>
 
+  <!-- 数据管理 -->
+  <view class="card">
+    <view class="section-header">
+      <text class="section-emoji">🗑</text>
+      <text class="section-title">数据管理</text>
+    </view>
+    <button class="btn-danger" bindtap="onClearData">
+      <text>清除所有训练记录</text>
+    </button>
+  </view>
+
   <!-- 关于 -->
   <view class="card about-card">
     <view class="section-header">

pages/timer/timer.js

@@ -41,7 +41,7 @@ Page({
       duration: target,
       remaining: target,
       todayTarget: target,
-      planDay: isFreeMode ? 0 : Math.min(planDay, 99),
+      planDay: isFreeMode ? 0 : planDay,
       isFreeMode
     })
 
@@ -105,6 +105,6 @@ Page({
     storage.updateStreak(today)
 
     wx.showToast({ title: `已记录 ${elapsed}秒`, icon: 'none', duration: 1500 })
-    setTimeout(() => { wx.navigateBack() }, 1500)
+    setTimeout(() => { wx.navigateBack() }, 3000)
   }
 })