mirror of
https://github.com/ZHANGTIANYAO1/teamspeak-music-bot.git
synced 2026-10-02 04:52:50 +08:00
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:
1 parent
9dce883384
commit
ee5a75ab5e
8 files changed
+141
-4
No files matched your search
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user