From 89d93c8155bff873312924646a88ee9c8f115784 Mon Sep 17 00:00:00 2001 From: cnliucheng Date: Thu, 4 Jun 2026 16:34:22 +0800 Subject: [PATCH] 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 | 52 +++++++++++-------- .../calendar-heatmap/calendar-heatmap.wxml | 1 - .../calendar-heatmap/calendar-heatmap.wxss | 9 ---- components/progress-ring/progress-ring.js | 5 +- custom-tab-bar/index.wxss | 12 ++--- pages/index/index.wxml | 5 +- pages/index/index.wxss | 23 ++++---- pages/records/records.wxml | 3 +- pages/records/records.wxss | 25 +++++---- pages/settings/settings.js | 16 ++++++ pages/settings/settings.wxml | 11 ++++ pages/timer/timer.js | 4 +- 12 files changed, 95 insertions(+), 71 deletions(-) diff --git a/app.wxss b/app.wxss index ad3b416..8fa064f 100644 --- a/app.wxss +++ b/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 ---- */ -.icon { - line-height: 1; - flex-shrink: 0; +/* ---- shared modal overlay ---- */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.45); + z-index: 1000; } -.icon-lg { font-size: 40rpx; } -.icon-md { font-size: 28rpx; } -.icon-sm { font-size: 22rpx; } +.modal-overlay-bottom { + display: flex; + align-items: flex-end; + justify-content: center; +} -.icon-inline { - display: inline-flex; +.modal-overlay-center { + 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; } diff --git a/components/calendar-heatmap/calendar-heatmap.wxml b/components/calendar-heatmap/calendar-heatmap.wxml index 5e9d114..804a5dd 100644 --- a/components/calendar-heatmap/calendar-heatmap.wxml +++ b/components/calendar-heatmap/calendar-heatmap.wxml @@ -1,6 +1,5 @@ - {{year}}年{{month}}月 {{item}} diff --git a/components/calendar-heatmap/calendar-heatmap.wxss b/components/calendar-heatmap/calendar-heatmap.wxss index 484da29..8177f48 100644 --- a/components/calendar-heatmap/calendar-heatmap.wxss +++ b/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; diff --git a/components/progress-ring/progress-ring.js b/components/progress-ring/progress-ring.js index 22da2b4..30da3c6 100644 --- a/components/progress-ring/progress-ring.js +++ b/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() } }, diff --git a/custom-tab-bar/index.wxss b/custom-tab-bar/index.wxss index ebcd093..f0e1914 100644 --- a/custom-tab-bar/index.wxss +++ b/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; diff --git a/pages/index/index.wxml b/pages/index/index.wxml index f60a77f..7c36254 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -79,8 +79,9 @@ - - + + + ⏱ 选择训练时长 📋 最近记录 + 长按可删除 🏃 @@ -63,7 +64,7 @@ - + 📅 diff --git a/pages/records/records.wxss b/pages/records/records.wxss index 14d10cf..09f5e59 100644 --- a/pages/records/records.wxss +++ b/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; diff --git a/pages/settings/settings.js b/pages/settings/settings.js index df1866b..6590502 100644 --- a/pages/settings/settings.js +++ b/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 }) + } + } + }) } }) diff --git a/pages/settings/settings.wxml b/pages/settings/settings.wxml index 990f179..79ef54b 100644 --- a/pages/settings/settings.wxml +++ b/pages/settings/settings.wxml @@ -92,6 +92,17 @@ + + + + 🗑 + 数据管理 + + + + diff --git a/pages/timer/timer.js b/pages/timer/timer.js index b5e9d30..a66669a 100644 --- a/pages/timer/timer.js +++ b/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) } })