mirror of
https://github.com/ZHANGTIANYAO1/teamspeak-music-bot.git
synced 2026-10-02 04:52:50 +08:00
saopig1andClaude Opus 4.7
caeef65cdb
Library / Search / History / Playlist now route the third action to store.playNextSong. Home is unchanged (it doesn't use SongCard). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
99 lines
2.0 KiB
Vue
99 lines
2.0 KiB
Vue
<template>
|
|
<div class="history-page">
|
|
<button class="back-btn" @click="$router.back()">
|
|
<Icon icon="mdi:arrow-left" />
|
|
返回
|
|
</button>
|
|
<h1 class="page-title">播放历史</h1>
|
|
|
|
<div v-if="loading" class="loading">加载中...</div>
|
|
|
|
<div v-else-if="history.length === 0" class="empty">
|
|
暂无播放记录
|
|
</div>
|
|
|
|
<div v-else class="history-list">
|
|
<SongCard
|
|
v-for="(song, i) in history"
|
|
:key="`${song.id}-${i}`"
|
|
:song="song"
|
|
:index="i + 1"
|
|
:active="store.currentSong?.id === song.id"
|
|
@play="store.playSong(song)"
|
|
@playNext="store.playNextSong(song)"
|
|
@add="store.addSong(song)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { Icon } from '@iconify/vue';
|
|
import axios from 'axios';
|
|
import { usePlayerStore } from '../stores/player.js';
|
|
import SongCard from '../components/SongCard.vue';
|
|
|
|
const store = usePlayerStore();
|
|
|
|
import { Song } from '../stores/player.js';
|
|
|
|
const history = ref<Song[]>([]);
|
|
const loading = ref(true);
|
|
|
|
onMounted(async () => {
|
|
if (!store.activeBotId) {
|
|
await store.fetchBots();
|
|
}
|
|
|
|
if (store.activeBotId) {
|
|
try {
|
|
const res = await axios.get(`/api/player/${store.activeBotId}/history`);
|
|
history.value = res.data.history;
|
|
} catch {
|
|
// Ignore if API not ready
|
|
}
|
|
}
|
|
|
|
loading.value = false;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.back-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 14px;
|
|
opacity: 0.7;
|
|
margin-bottom: 16px;
|
|
transition: opacity var(--transition-fast);
|
|
&:hover { opacity: 1; }
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.history-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 60px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.empty {
|
|
text-align: center;
|
|
padding: 80px;
|
|
color: var(--text-tertiary);
|
|
font-size: 14px;
|
|
}
|
|
</style>
|