feat(播放控制): 为曲目列表添加点击播放功能

- 在 TrackItem 组件中添加 playfrom 属性,用于接收播放函数
- 修改 playTheAlbum 函数支持从指定索引开始播放
- 为 TrackItem 按钮添加点击事件,点击时调用 playfrom 函数
This commit is contained in:
Astrian Zheng 2025-05-26 08:28:47 +10:00
parent 9d9b32d47d
commit cc6c6e311e
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
2 changed files with 8 additions and 6 deletions

View File

@ -4,13 +4,15 @@ import { artistsOrganize } from '../utils'
defineProps<{
album?: Album,
track: Song,
index: number
index: number,
playfrom: (index: number) => void,
}>()
</script>
<template>
<button
class="flex align-center gap-4 text-left odd:bg-neutral-800/20 px-2 h-[2.75rem] rounded-md hover:bg-neutral-800 align-center relative overflow-hidden">
class="flex align-center gap-4 text-left odd:bg-neutral-800/20 px-2 h-[2.75rem] rounded-md hover:bg-neutral-800 align-center relative overflow-hidden"
@click="playfrom(index)">
<span class="text-[3.7rem] text-white/20 absolute right-0 top-[-1.4rem] track_num">{{ index + 1 }}</span>

View File

@ -30,7 +30,7 @@ onMounted(async () => {
}
})
function playTheAlbum() {
function playTheAlbum(from: number = 0) {
if (playQueue.queueReplaceLock) {
if (!confirm("当前操作会将你的待播列表清空、放入这张专辑所有曲目,并从新待播清单的开头播放。继续吗?")) { return }
playQueue.queueReplaceLock = false
@ -45,7 +45,7 @@ function playTheAlbum() {
})
}
playQueue.list = newPlayQueue
playQueue.currentIndex = 0
playQueue.currentIndex = from
playQueue.isPlaying = true
playQueue.isBuffering = true
}
@ -72,7 +72,7 @@ function playTheAlbum() {
<div class="flex gap-2">
<button
class="bg-sky-500/20 hover:bg-sky-500/30 active:bg-sky-600/30 active:shadow-inner border border-[#ffffff39] rounded-full w-56 h-10 text-base text-white flex justify-center items-center gap-2"
@click="playTheAlbum">
@click="playTheAlbum()">
<PlayIcon :size="4" />
<div>播放专辑</div>
</button>
@ -93,7 +93,7 @@ function playTheAlbum() {
</div>
</div>
<div class="flex flex-col gap-2">
<TrackItem v-for="(track, index) in album?.songs" :key="track.cid" :album="album" :track="track" :index="index" />
<TrackItem v-for="(track, index) in album?.songs" :key="track.cid" :album="album" :track="track" :index="index" :playfrom="playTheAlbum" />
</div>
</div>
</div>