72 lines
2.4 KiB
Vue
72 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { artistsOrganize } from '../utils'
|
|
import { ref } from 'vue'
|
|
import { usePlayQueueStore } from '../stores/usePlayQueueStore'
|
|
import { useToast } from 'vue-toast-notification'
|
|
import { useFavourites } from '../stores/useFavourites'
|
|
import { debugUI } from '../utils/debug'
|
|
|
|
import QueueAddIcon from '../assets/icons/queueadd.vue'
|
|
import StarEmptyIcon from '../assets/icons/starempty.vue'
|
|
import StarFilledIcon from '../assets/icons/starfilled.vue'
|
|
|
|
const props = defineProps<{
|
|
album?: Album
|
|
track: Song
|
|
index: number
|
|
playfrom: (index: number) => void
|
|
}>()
|
|
|
|
const hover = ref(false)
|
|
|
|
const playQueueStore = usePlayQueueStore()
|
|
const toast = useToast()
|
|
const favourites = useFavourites()
|
|
|
|
function appendToQueue() {
|
|
debugUI('添加歌曲到队列')
|
|
const queue = playQueueStore.list
|
|
queue.push({
|
|
song: props.track,
|
|
album: props.album,
|
|
} as QueueItem)
|
|
playQueueStore.list = queue
|
|
playQueueStore.queueReplaceLock = true
|
|
toast.success('已添加到播放队列末尾', {
|
|
position: 'top-right',
|
|
duration: 1000,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="flex justify-between align-center gap-4 text-left px-2 h-[2.75rem] hover:bg-neutral-600/40 odd:bg-netural-600/20 relative overflow-hidden bg-neutral-800/20 odd:bg-neutral-800/40 transition-all"
|
|
@click="playfrom(index)" @mouseenter="() => { hover = true; debugUI('鼠标悬停在歌曲项') }" @mouseleave="hover = false">
|
|
|
|
<span class="text-[3.7rem] text-white/10 absolute left-0 top-[-1.4rem] track_num">{{ index + 1 }}</span>
|
|
|
|
<div class="flex flex-col justify-center ml-4">
|
|
<div class="text-white text-base">{{ track.name }}</div>
|
|
<div class="text-white/50 text-sm"
|
|
v-if="artistsOrganize(track.artists ?? []) !== artistsOrganize(album?.artistes ?? [])">
|
|
{{ artistsOrganize(track.artists ?? []) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center gap-2" v-if="hover">
|
|
<button @click.stop="appendToQueue"
|
|
class="hover:scale-110 transition-all text-white/50 hover:text-white active:text-white/40 active:scale-95">
|
|
<QueueAddIcon :size="4" />
|
|
</button>
|
|
<button @click.stop="favourites.toggleFavourite({
|
|
song: track,
|
|
album: album,
|
|
})" class="hover:scale-110 transition-all text-white/50 hover:text-white active:text-white/40 active:scale-95">
|
|
<StarFilledIcon v-if="favourites.isFavourite(track.cid)" :size="4" />
|
|
<StarEmptyIcon v-else :size="4" />
|
|
</button>
|
|
</div>
|
|
|
|
</button>
|
|
</template> |