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
This commit is contained in:
@@ -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; }
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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()
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -79,8 +79,9 @@
|
||||
</view>
|
||||
|
||||
<!-- 时间选择弹窗 -->
|
||||
<view class="modal-overlay" wx:if="{{showPicker}}" bindtap="onClosePicker">
|
||||
<view class="picker-modal" catchtap="noop">
|
||||
<view class="modal-overlay modal-overlay-bottom" wx:if="{{showPicker}}" bindtap="onClosePicker">
|
||||
<view class="picker-modal" catchtap="noop" catchtouchmove="noop">
|
||||
<view class="picker-handle"></view>
|
||||
<text class="picker-title">⏱ 选择训练时长</text>
|
||||
<view class="preset-grid">
|
||||
<view
|
||||
|
||||
+9
-14
@@ -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); }
|
||||
|
||||
@@ -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>
|
||||
|
||||
+12
-13
@@ -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;
|
||||
|
||||
@@ -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 })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user