feat: handle empty play queue gracefully and enhance UI responsiveness

feat: display version number dynamically and add GitHub link in PreferencePanel
2025-05-28 15:25:13 +10:00 · 2025-05-28 15:14:13 +10:00
2 changed files with 337 additions and 297 deletions
--- a/src/components/PreferencePanel.vue
+++ b/src/components/PreferencePanel.vue
@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { watch } from 'vue';
+
 import XIcon from '../assets/icons/x.vue'
 import { usePreferences } from '../stores/usePreferences'
+import { computed } from 'vue'

 const preferences = usePreferences()

-const props = defineProps<{
+
+defineProps<{
 	present: boolean
 }>()

@ -13,7 +15,14 @@ defineEmits<{
 	(e: 'dismiss'): void
 }>()

-watch(() => props.present, (value) => console.log(value))
+const version = computed(() => {
+	try {
+		// 如果你的构建工具支持，可以直接导入
+		return chrome?.runtime?.getManifest?.()?.version || 'unknown'
+	} catch (error) {
+		return 'unknown'
+	}
+})
 </script>

 <template>
@ -34,7 +43,7 @@ watch(() => props.present, (value) => console.log(value))
 					</button>
 				</div>

-				<div class="flex flex-col gap-4">
+				<div class="flex flex-col gap-4 mb-8">
 					<div>
 						<div class="px-8">
 							<div class="text-white/50 text-sm ml-6">播放间</div>
@ -103,13 +112,23 @@ watch(() => props.present, (value) => console.log(value))
 							<div class="text-white/50 text-sm ml-6">关于</div>
 							<ul class="border border-[#ffffff39] rounded-lg backdrop-blur-lg mt-2 overflow-hidden">
 								<li class="odd:bg-neutral-300/5">
-									<button
+									<div
 										class="flex justify-between items-center px-6 py-4 w-full text-left hover:bg-neutral-300/10 transition-all">
 										<div class="flex flex-col">
 											<div class="text-base text-white">MSR Mod</div>
-											<div class="text-sm text-white/80">版本号 0.0.1</div>
+											<div class="text-sm text-white/80">版本号 {{ version }}</div>
 										</div>
-									</button>
+									</div>
+								</li>
+
+								<li class="odd:bg-neutral-300/5">
+									<a href="https://github.com/astrian/msr-mod" target="_blank"
+										class="flex justify-between items-center px-6 py-4 w-full text-left hover:bg-neutral-300/10 transition-all">
+										<div class="flex flex-col">
+											<div class="text-base text-white">前往 GitHub 仓库</div>
+											<div class="text-sm text-white/80">修 Bug 的事情就拜托了，大佬桑！（鞠躬）</div>
+										</div>
+									</a>
 								</li>
 							</ul>
 						</div>
--- a/src/pages/Playroom.vue
+++ b/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">
-		<img class="w-full h-full blur-2xl object-cover scale-110" :src="getCurrentTrack().album?.coverDeUrl" />
+		<div class="z-0 absolute top-0 left-0 w-screen h-screen overflow-hidden"
+			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().album?.name ?? '未知专辑' }}
+									{{ getCurrentTrack()?.song.artists ?? [] }} —
+									{{ 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 ?? []) }} —
-								{{ getCurrentTrack().album?.name ?? '未知专辑' }}
+									{{ artistsOrganize(getCurrentTrack()?.song.artists ?? []) }} —
+									{{ 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())"
-						:class="favourites.isFavourite(getCurrentTrack().song.cid) ? 'bg-neutral-200/90' : 'bg-black/10 hover:bg-black/20'">
-						<span :class="favourites.isFavourite(getCurrentTrack().song.cid) ? 'text-neutral-700' : 'text-white'">
-							<StarFilledIcon v-if="favourites.isFavourite(getCurrentTrack().song.cid)" :size="6" />
+							ref="favoriteButton"
+							@click="() => { const track = getCurrentTrack(); if (track !== null) favourites.toggleFavourite(track) }"
+							:class="getCurrentTrack() && favourites.isFavourite(getCurrentTrack()!.song.cid) ? 'bg-neutral-200/90' : 'bg-black/10 hover:bg-black/20'">
+							<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>
Author	SHA1	Message	Date
Astrian Zheng	1239dbbf86	feat: handle empty play queue gracefully and enhance UI responsiveness Some checks failed 构建扩展程序 / 构建扩展程序 (push) Successful in 54s Details 构建扩展程序 / 发布至 Chrome 应用商店 (push) Failing after 33s Details	2025-05-28 15:25:13 +10:00
Astrian Zheng	09a99f75ae	feat: display version number dynamically and add GitHub link in PreferencePanel	2025-05-28 15:14:13 +10:00