2 changed files with 284 additions and 324 deletions
--- a/src/components/PreferencePanel.vue
+++ b/src/components/PreferencePanel.vue
@ -1,13 +1,11 @@
 <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()

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

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

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

 <template>
@ -43,7 +34,7 @@ const version = computed(() => {
 					</button>
 				</div>

-				<div class="flex flex-col gap-4 mb-8">
+				<div class="flex flex-col gap-4">
 					<div>
 						<div class="px-8">
 							<div class="text-white/50 text-sm ml-6">播放间</div>
@ -112,23 +103,13 @@ const version = computed(() => {
 							<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">
-									<div
+									<button
 										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">版本号 {{ version }}</div>
+											<div class="text-sm text-white/80">版本号 0.0.1</div>
 										</div>
-									</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>
+									</button>
 								</li>
 							</ul>
 						</div>
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@ -302,9 +302,6 @@ function makePlayQueueListDismiss() {
 }

 function getCurrentTrack() {
-	if (playQueueStore.list.length === 0) {
-		return null
-	}
 	if (playQueueStore.playMode.shuffle) {
 		return playQueueStore.list[playQueueStore.shuffleList[playQueueStore.currentIndex]]
 	} else {
@ -353,9 +350,7 @@ function toggleMoreOptions() {
 	}
 }

-watch(() => [preferences.presentLyrics, getCurrentTrack()?.song.lyricUrl], (newValue, oldValue) => {
-	if (!getCurrentTrack()) { return }
-
+watch(() => [preferences.presentLyrics, getCurrentTrack().song.lyricUrl], (newValue, oldValue) => {
 	const [showLyrics, hasLyricUrl] = newValue
 	const [prevShowLyrics, _prevHasLyricUrl] = oldValue || [false, null]

@ -441,11 +436,9 @@ 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>

@ -457,7 +450,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>
@ -468,34 +461,31 @@ 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="() => { 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" />
+						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" />
 							<StarEmptyIcon v-else :size="6" />
 						</span>
 					</button>
@ -656,7 +646,7 @@ watch(() => playQueueStore.currentIndex, () => {
 							</button>
 							<!-- Show tooltip only on hover, with transition -->
 							<transition name="lyrics-tooltip-fade">
-									<div v-if="showLyricsTooltip && getCurrentTrack() === null && !getCurrentTrack()!.song.lyricUrl"
+								<div v-if="showLyricsTooltip && !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>
@ -710,8 +700,7 @@ 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>
@ -760,16 +749,6 @@ 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>