lc/wx_pbzc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化勋章分段进度展示

Browse Source
This commit is contained in:
cnliucheng
2026-07-29 11:45:20 +08:00
parent 11d49a26df
commit 903951aee0
5 changed files with 109 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/records/records.js
+13 -11
View File
@@ -3,7 +3,12 @@ const util = require('../../utils/util')
const themeMod = require('../../utils/theme')
const iconsMod = require('../../utils/icons')
const config = require('../../config')
const { getBadgeProgress, getBadgeCelebration } = require('../../utils/badge-state')
const {
getBadgePositions,
getBadgeSegments,
getBadgeDisplayLabel,
getBadgeCelebration
} = require('../../utils/badge-state')
Page({
data: {
@@ -17,7 +22,7 @@ Page({
maxDurationText: '',
totalDays: 0,
trainingBadges: [],
badgeProgress: 0,
badgeSegments: [],
nextBadgeHint: '',
currentYear: new Date().getFullYear(),
currentMonth: new Date().getMonth() + 1,
@@ -75,20 +80,17 @@ Page({
}
// 累计训练天数勋章(里程碑进度条):统计口径=累计去重训练日(可中断)。
// 节点等距排列(间距一致、视觉整齐),填充在区间内线性插值,
// 解锁时填充正好抵达该节点,满级时填充满格。
// 节点等距排列；每个连接段独立填充，绿色铺满即解锁下一枚勋章。
const totalDays = stats.totalDays
const badgeDefs = config.trainingDayBadges
const n = badgeDefs.length
const TRACK_PAD = 4 // 首尾留白,保证首尾节点/标签不溢出
const segWidth = n > 1 ? (100 - TRACK_PAD * 2) / (n - 1) : 0
const posOf = (i) => TRACK_PAD + i * segWidth
const badgePositions = getBadgePositions(badgeDefs)
const trainingBadges = badgeDefs.map((b, i) => ({
...b,
unlocked: totalDays >= b.days,
pos: Math.round(posOf(i) * 10) / 10
pos: badgePositions[i],
label: getBadgeDisplayLabel(b, totalDays >= b.days)
}))
const badgeProgress = getBadgeProgress(badgeDefs, totalDays)
const badgeSegments = getBadgeSegments(badgeDefs, totalDays)
// 单枚解锁庆祝反馈:对比持久化"已见解锁集合",只庆祝新增勋章。
// 首次运行(无存储)仅初始化集合,避免老用户一打开就被历史勋章刷屏。
@@ -111,7 +113,7 @@ Page({
maxDurationText: util.formatDuration(stats.maxDuration),
totalDays,
trainingBadges,
badgeProgress,
badgeSegments,
nextBadgeHint,
monthRecords: records,
historyList,
pages/records/records.wxml
+5 -2
View File
@@ -59,7 +59,10 @@
<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-segment" wx:for="{{badgeSegments}}" wx:key="index"
style="left: {{item.left}}%; width: {{item.width}}%;">
<view class="badge-segment-fill" style="width: {{item.progress}}%;"></view>
</view>
<view class="badge-node {{item.unlocked ? 'unlocked' : ''}} {{item.justUnlocked ? 'celebrate' : ''}}"
wx:for="{{trainingBadges}}" wx:key="days"
style="left: {{item.pos}}%;"
@@ -72,7 +75,7 @@
<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>
style="left: {{item.pos}}%;">{{item.label}}</text>
</view>
</view>
</ui-card>
pages/records/records.wxss
+5 -2
View File
@@ -101,11 +101,14 @@
border-radius: 2rpx;
}
.badge-fill {
.badge-segment {
position: absolute;
left: 0;
top: 0;
height: 100%;
}
.badge-segment-fill {
height: 100%;
background: var(--primary);
border-radius: 2rpx;
transition: width 0.6s ease;
tests/badge-state.test.js
+40 -2
View File
@@ -1,9 +1,23 @@
const test = require('node:test')
const assert = require('node:assert/strict')
const { getBadgeProgress, getBadgeCelebration } = require('../utils/badge-state')
const {
getBadgeProgress,
getBadgePositions,
getBadgeSegments,
getBadgeDisplayLabel,
getBadgeCelebration
} = require('../utils/badge-state')
const badges = [{ days: 3 }, { days: 7 }, { days: 14 }]
const badges = [
{ days: 3, name: '抖登' },
{ days: 7, name: '中登' },
{ days: 14, name: '老登' },
{ days: 30, name: '神登' },
{ days: 60, name: '上古神登' },
{ days: 80, name: '洪荒神登' },
{ days: 100, name: '究极登祖' }
]
test('badge progress remains zero before the first milestone', () => {
assert.equal(getBadgeProgress(badges, 1), 0)
@@ -11,6 +25,30 @@ test('badge progress remains zero before the first milestone', () => {
assert.equal(getBadgeProgress(badges, 3), 4)
})
test('milestones use equal spacing and overall fill stays aligned', () => {
assert.deepEqual(getBadgePositions(badges), [4, 19.3, 34.7, 50, 65.3, 80.7, 96])
assert.equal(getBadgeProgress(badges, 7), 19.3)
assert.equal(getBadgeProgress(badges, 60), 65.3)
assert.equal(getBadgeProgress(badges, 100), 100)
})
test('only the active badge connection is partially green', () => {
assert.deepEqual(getBadgeSegments(badges, 16), [
{ left: 4, width: 15.3, progress: 100 },
{ left: 19.3, width: 15.4, progress: 100 },
{ left: 34.7, width: 15.3, progress: 12.5 },
{ left: 50, width: 15.3, progress: 0 },
{ left: 65.3, width: 15.4, progress: 0 },
{ left: 80.7, width: 15.3, progress: 0 }
])
})
test('equal spacing keeps full unlocked badge names readable', () => {
assert.equal(getBadgeDisplayLabel(badges[3], true), '神登')
assert.equal(getBadgeDisplayLabel(badges[4], true), '上古神登')
assert.equal(getBadgeDisplayLabel(badges[6], false), '100天')
})
test('badge celebration keeps prior milestones seen after records are deleted', () => {
const afterDeletion = getBadgeCelebration([3], [])
assert.deepEqual(afterDeletion, { newly: [], seen: [3] })
utils/badge-state.js
+46 -3
View File
@@ -1,5 +1,15 @@
const TRACK_PAD = 4
const roundPosition = (value) => Math.round(value * 10) / 10
const getBadgePositions = (badges) => {
const defs = Array.isArray(badges) ? badges : []
if (defs.length === 0) return []
if (defs.length === 1) return [TRACK_PAD]
const segmentWidth = (100 - TRACK_PAD * 2) / (defs.length - 1)
return defs.map((_, index) => roundPosition(TRACK_PAD + index * segmentWidth))
}
const getBadgeProgress = (badges, totalDays) => {
const defs = Array.isArray(badges) ? badges : []
if (defs.length === 0) return 0
@@ -8,12 +18,39 @@ const getBadgeProgress = (badges, totalDays) => {
if (days < defs[0].days) return 0
if (defs.length === 1 || days >= defs[defs.length - 1].days) return 100
const segmentWidth = (100 - TRACK_PAD * 2) / (defs.length - 1)
const positions = getBadgePositions(defs)
let index = 0
while (index < defs.length - 1 && days >= defs[index + 1].days) index++
const ratio = (days - defs[index].days) / (defs[index + 1].days - defs[index].days)
return Math.round((TRACK_PAD + index * segmentWidth + ratio * segmentWidth) * 10) / 10
return roundPosition(positions[index] + ratio * (positions[index + 1] - positions[index]))
}
const getBadgeSegments = (badges, totalDays) => {
const defs = Array.isArray(badges) ? badges : []
const positions = getBadgePositions(defs)
const days = Math.max(0, Number(totalDays) || 0)
return defs.slice(0, -1).map((badge, index) => {
const nextBadge = defs[index + 1]
const segmentDays = nextBadge.days - badge.days
const progress = days <= badge.days
? 0
: days >= nextBadge.days
? 100
: roundPosition((days - badge.days) / segmentDays * 100)
return {
left: positions[index],
width: roundPosition(positions[index + 1] - positions[index]),
progress
}
})
}
const getBadgeDisplayLabel = (badge, unlocked) => {
if (!badge) return ''
return unlocked && badge.name ? badge.name : `${badge.days}天`
}
const getBadgeCelebration = (previous, unlockedDays) => {
@@ -25,4 +62,10 @@ const getBadgeCelebration = (previous, unlockedDays) => {
return { newly, seen: Array.from(new Set(previous.concat(unlocked))) }
}
module.exports = { getBadgeProgress, getBadgeCelebration }
module.exports = {
getBadgeProgress,
getBadgePositions,
getBadgeSegments,
getBadgeDisplayLabel,
getBadgeCelebration
}