feat: handle empty play queue gracefully and enhance UI responsiveness

src/pages/Playroom.vue

@@ -302,6 +302,9 @@ function makePlayQueueListDismiss() {
 }
 
 function getCurrentTrack() {
+	if (playQueueStore.list.length === 0) {
+		return null
+	}
 	if (playQueueStore.playMode.shuffle) {
 		return playQueueStore.list[playQueueStore.shuffleList[playQueueStore.currentIndex]]
 	} else {
@@ -350,7 +353,9 @@ function toggleMoreOptions() {
 	}
 }
 
-watch(() => [preferences.presentLyrics, getCurrentTrack().song.lyricUrl], (newValue, oldValue) => {
+watch(() => [preferences.presentLyrics, getCurrentTrack()?.song.lyricUrl], (newValue, oldValue) => {
+	if (!getCurrentTrack()) { return }
+
 	const [showLyrics, hasLyricUrl] = newValue
 	const [prevShowLyrics, _prevHasLyricUrl] = oldValue || [false, null]
 
@@ -436,9 +441,11 @@ watch(() => playQueueStore.currentIndex, () => {
 </script>
 
 <template>
+	<div v-if="getCurrentTrack() !== null">
 		<!-- Background remains unchanged -->
-	<div class="z-0 absolute top-0 left-0 w-screen h-screen overflow-hidden" v-if="getCurrentTrack().album?.coverDeUrl">
+		<div class="z-0 absolute top-0 left-0 w-screen h-screen overflow-hidden"
-		<img class="w-full h-full blur-2xl object-cover scale-110" :src="getCurrentTrack().album?.coverDeUrl" />
+			v-if="getCurrentTrack()?.album?.coverDeUrl">
+			<img class="w-full h-full blur-2xl object-cover scale-110" :src="getCurrentTrack()?.album?.coverDeUrl" />
 			<div class="w-full h-full absolute top-0 left-0 bg-neutral-900/5" />
 		</div>
 
@@ -450,7 +457,7 @@ watch(() => playQueueStore.currentIndex, () => {
 				<div class="flex flex-col w-96 gap-4" ref="controllerRef">
 					<!-- Album cover with enhanced hover effect -->
 					<div ref="albumCover" class="relative">
-					<img :src="getCurrentTrack().album?.coverUrl" class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96
+						<img :src="getCurrentTrack()?.album?.coverUrl" class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96
 							transition-transform duration-300
 							" :class="playQueueStore.isPlaying ? 'scale-100' : 'scale-85'" />
 					</div>
@@ -461,31 +468,34 @@ watch(() => playQueueStore.currentIndex, () => {
 							<!-- ...existing song info code... -->
 							<div class="">
 								<div class="text-black/90 blur-lg text-lg font-medium truncate w-80">
-								{{ getCurrentTrack().song.name }}
+									{{ getCurrentTrack()?.song.name }}
 								</div>
 								<div class="text-black/90 blur-lg text-base truncate w-80">
-								{{ getCurrentTrack().song.artists ?? [] }} —
+									{{ getCurrentTrack()?.song.artists ?? [] }} —
-								{{ getCurrentTrack().album?.name ?? '未知专辑' }}
+									{{ getCurrentTrack()?.album?.name ?? '未知专辑' }}
 								</div>
 							</div>
 
 							<div class="absolute top-0">
 								<div class="text-white text-lg font-medium truncate w-80">
-								{{ getCurrentTrack().song.name }}
+									{{ getCurrentTrack()?.song.name }}
 								</div>
 								<div class="text-white/75 text-base truncate w-80">
-								{{ artistsOrganize(getCurrentTrack().song.artists ?? []) }} —
+									{{ artistsOrganize(getCurrentTrack()?.song.artists ?? []) }} —
-								{{ getCurrentTrack().album?.name ?? '未知专辑' }}
+									{{ getCurrentTrack()?.album?.name ?? '未知专辑' }}
 								</div>
 							</div>
 						</div>
 
 						<button
 							class="h-10 w-10 flex justify-center items-center rounded-full backdrop-blur-3xl transition-all duration-200 hover:scale-110"
-						ref="favoriteButton" @click="favourites.toggleFavourite(getCurrentTrack())"
+							ref="favoriteButton"
-						:class="favourites.isFavourite(getCurrentTrack().song.cid) ? 'bg-neutral-200/90' : 'bg-black/10 hover:bg-black/20'">
+							@click="() => { const track = getCurrentTrack(); if (track !== null) favourites.toggleFavourite(track) }"
-						<span :class="favourites.isFavourite(getCurrentTrack().song.cid) ? 'text-neutral-700' : 'text-white'">
+							:class="getCurrentTrack() && favourites.isFavourite(getCurrentTrack()!.song.cid) ? 'bg-neutral-200/90' : 'bg-black/10 hover:bg-black/20'">
-							<StarFilledIcon v-if="favourites.isFavourite(getCurrentTrack().song.cid)" :size="6" />
+							<span
+								:class="getCurrentTrack() !== null && favourites.isFavourite(getCurrentTrack()!.song.cid) ? 'text-neutral-700' : 'text-white'">
+								<StarFilledIcon v-if="getCurrentTrack() && favourites.isFavourite(getCurrentTrack()!.song.cid)"
+									:size="6" />
 								<StarEmptyIcon v-else :size="6" />
 							</span>
 						</button>
@@ -646,7 +656,7 @@ watch(() => playQueueStore.currentIndex, () => {
 								</button>
 								<!-- Show tooltip only on hover, with transition -->
 								<transition name="lyrics-tooltip-fade">
-								<div v-if="showLyricsTooltip && !getCurrentTrack().song.lyricUrl"
+									<div v-if="showLyricsTooltip && getCurrentTrack() === null && !getCurrentTrack()!.song.lyricUrl"
 										class="absolute bottom-10 w-60 left-[-7rem] bg-black/60 backdrop-blur-3xl rounded-md p-2 text-xs flex flex-col text-left shadow-2xl border border-[#ffffff39]">
 										<div class="font-semibold text-white">这首曲目不提供歌词文本</div>
 										<div class="text-white/60">启用歌词时，将会在下一首有歌词的曲目中显示歌词文本。</div>
@@ -700,7 +710,8 @@ watch(() => playQueueStore.currentIndex, () => {
 
 				<!-- Lyrics section - full screen height -->
 				<div class="w-[40rem] h-screen" ref="lyricsSection" v-if="presentLyrics">
-				<ScrollingLyrics :lrcSrc="getCurrentTrack().song.lyricUrl ?? undefined" class="h-full" ref="scrollingLyrics" />
+					<ScrollingLyrics :lrcSrc="getCurrentTrack()?.song.lyricUrl ?? undefined" class="h-full"
+						ref="scrollingLyrics" />
 				</div>
 			</div>
 		</div>
@@ -749,6 +760,16 @@ watch(() => playQueueStore.currentIndex, () => {
 				</div>
 			</div>
 		</dialog>
+	</div>
+	<div v-else class="flex items-center justify-center h-screen w-screen flex-col gap-4 text-center select-none">
+		<div class="text-white text-2xl">现在没有播放任何东西喔</div>
+		<div class="text-white text-lg">要来一块苹果派吗？</div>
+		<RouterLink to="/">
+			<button class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-lg transition-all duration-200 text-lg">
+				返回首页
+			</button>
+		</RouterLink>
+	</div>
 </template>
 
 <style scoped>