feat(records): 训练勋章 UI 改造

- 勋章图标从 emoji 改为矢量 SVG 线性图标(utils/icons.js 新增 bolt/moon/diamond 路径及 white 变体)
- 命名改为累计语义(一周累计/半月累计/月度累计/双月累计/百日累计),并标注"非连续打卡"
- 进度条改回等距节点,解锁时填充正好抵达节点、满级满格
- 新增单枚解锁庆祝:持久化已见解锁集合,进入页面弹 toast + 节点 pop 动画
- 已解锁节点常驻显示勋章名 + 右上角 ✓ 角标,直观体现"已拥有"
- utils/storage.js 新增 totalDays(累计去重训练日),为勋章统计提供数据源
This commit is contained in:
2026-07-28 16:25:55 +08:00
parent 75bad477b1
commit c5ae332cbe
6 changed files with 316 additions and 5 deletions
+33
View File
@@ -44,6 +44,39 @@
</view>
</ui-card>
<!-- 训练勋章 (里程碑进度条) -->
<ui-card variant="in" hidden="{{totalSessions === 0}}">
<view class="badge-section">
<view class="badge-header">
<view class="badge-title-wrap">
<image class="badge-title-icon" src="{{icons.crownFill}}" mode="aspectFit"></image>
<text class="section-title">训练勋章</text>
</view>
</view>
<view class="badge-status">
<text class="badge-status-days">累计训练 <text class="badge-days-num">{{totalDays}}</text> 天</text>
<text class="badge-status-dot" wx:if="{{nextBadgeHint}}">·</text>
<text class="badge-status-next" wx:if="{{nextBadgeHint}}">{{nextBadgeHint}}</text>
</view>
<view class="badge-track">
<view class="badge-fill" style="width: {{badgeProgress}}%;"></view>
<view class="badge-node {{item.unlocked ? 'unlocked' : ''}} {{item.justUnlocked ? 'celebrate' : ''}}"
wx:for="{{trainingBadges}}" wx:key="days"
style="left: {{item.pos}}%;"
data-days="{{item.days}}"
bindtap="onBadgeTap">
<image class="badge-node-icon" src="{{item.unlocked ? icons[item.iconWhite] : icons[item.icon]}}" mode="aspectFit"></image>
<view class="badge-check" wx:if="{{item.unlocked}}"></view>
</view>
</view>
<view class="badge-labels">
<text class="badge-label {{item.unlocked ? 'unlocked' : ''}}"
wx:for="{{trainingBadges}}" wx:key="days"
style="left: {{item.pos}}%;">{{item.unlocked ? item.name : item.days}}</text>
</view>
</view>
</ui-card>
<!-- 训练趋势 -->
<ui-card variant="in" hidden="{{totalSessions === 0}}">
<view class="trend-section">