fix: add play mode toggle, wire play history API, add back navigation buttons

- Add play mode cycle button (seq/loop/random/rloop) to Player bar
- Wire GET /api/player/:botId/history to query database instead of returning empty array
- Pass database instance from server.ts to createPlayerRouter
- Add back navigation button to Playlist, Lyrics, History, Search, and Settings views
- SongCard already had dblclick-to-play (no change needed)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
saopig1andClaude Opus 4.6 committed 2026-03-30 02:16:18 +08:00
1 parent 9dce883384
commit ee5a75ab5e
8 files changed
+141 -4

No files matched your search

+40
View File
@@ -18,6 +18,10 @@
<button class="control-btn" @click="store.next()">
<Icon icon="mdi:skip-next" />
</button>
<button class="control-btn mode-btn" @click="cycleMode" :title="modeLabel">
<Icon :icon="modeIcon" />
<span class="mode-label">{{ modeLabel }}</span>
</button>
</div>
<div class="player-right">
@@ -66,6 +70,30 @@ function onVolumeChange(e: Event) {
const target = e.target as HTMLInputElement;
store.setVolume(parseInt(target.value));
}
const modeOrder = ['seq', 'loop', 'random', 'rloop'] as const;
const modeIcons: Record<string, string> = {
seq: 'mdi:arrow-right',
loop: 'mdi:repeat',
random: 'mdi:shuffle',
rloop: 'mdi:shuffle-variant',
};
const modeLabels: Record<string, string> = {
seq: '顺序',
loop: '循环',
random: '随机',
rloop: '随机循环',
};
const currentMode = computed(() => activeBot.value?.playMode ?? 'seq');
const modeIcon = computed(() => modeIcons[currentMode.value] ?? modeIcons.seq);
const modeLabel = computed(() => modeLabels[currentMode.value] ?? modeLabels.seq);
function cycleMode() {
const idx = modeOrder.indexOf(currentMode.value as typeof modeOrder[number]);
const next = modeOrder[(idx + 1) % modeOrder.length];
store.setMode(next);
}
</script>
<style lang="scss" scoped>
@@ -121,6 +149,18 @@ function onVolumeChange(e: Event) {
&:hover { opacity: 1; }
}
.mode-btn {
display: flex;
align-items: center;
gap: 4px;
font-size: 18px;
}
.mode-label {
font-size: 11px;
font-weight: 500;
}
.play-btn {
width: 32px;
height: 32px;