feat: 训练完成后首页 streak 卡片高亮 3 秒

timer 记录保存时写 _last_train_at 时间戳,index onShow 检测
< 10s 的标记则触发 just-completed class,卡片脉冲 2 次 + 主题色
边框 + 阴影,3 秒后自动淡出。让'完成训练'的反馈在首页也可见。
This commit is contained in:
2026-07-08 14:13:50 +08:00
parent c0f7ca612c
commit f052327276
4 changed files with 43 additions and 1 deletions
+26
View File
@@ -41,9 +41,35 @@ Page({
if (this._firstShow) {
this._firstShow = false
this.refresh()
this._checkFreshTrain()
return
}
this.refresh()
this._checkFreshTrain()
},
/**
* If user just returned from completing a training, briefly highlight
* the "今日已完成" badge so the success feels tangible. The flag is
* timestamped; older than 10s is treated as stale (e.g. user reopened
* the app later).
*/
_checkFreshTrain() {
try {
const at = wx.getStorageSync('_last_train_at')
if (!at) return
const age = Date.now() - at
if (age < 0 || age > 10 * 1000) {
wx.removeStorageSync('_last_train_at')
return
}
wx.removeStorageSync('_last_train_at')
this.setData({ justCompleted: true })
if (this._justCompletedTimer) clearTimeout(this._justCompletedTimer)
this._justCompletedTimer = setTimeout(() => {
this.setData({ justCompleted: false })
}, 3000)
} catch (e) {}
},
onPullDownRefresh() {
+1 -1
View File
@@ -10,7 +10,7 @@
</view>
<!-- 连续打卡卡片 -->
<ui-card variant="in">
<ui-card variant="in" class="{{justCompleted ? 'just-completed' : ''}}">
<view class="header-card">
<view class="streak-section">
<image class="streak-icon" src="{{icons.hotFill}}" mode="aspectFit"></image>
+12
View File
@@ -350,3 +350,15 @@
padding: 12rpx 0;
margin-top: 8rpx;
}
/* ---- 训练完成高亮 (3 秒后淡出) ---- */
.just-completed {
animation: justCompletedPulse 1s ease-in-out 2;
border: 4rpx solid var(--primary) !important;
box-shadow: 0 4rpx 24rpx rgba(var(--primary-rgb), 0.3) !important;
}
@keyframes justCompletedPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
+4
View File
@@ -292,6 +292,10 @@ Page({
})
storage.updateStreak(today)
// Flag the just-completed training so the index page can briefly
// highlight the "今日已完成" badge when the user lands back there.
try { wx.setStorageSync('_last_train_at', Date.now()) } catch (e) {}
wx.showToast({ title: `已记录 ${elapsed}`, icon: 'none', duration: 1500 })
setTimeout(() => { wx.navigateBack() }, 1500)
}