From 595caa0956ecc5c7da9a049374bb2f7702a14be7 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 25 May 2025 14:14:47 +1000
Subject: [PATCH] =?UTF-8?q?feat(Playroom):=20=E6=B7=BB=E5=8A=A0=E9=9F=B3?=
 =?UTF-8?q?=E9=A2=91=E6=A0=BC=E5=BC=8F=E6=A3=80=E6=B5=8B=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E8=83=8C=E6=99=AF=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加 `formatDetector` 函数以动态检测并显示当前播放音频的格式。同时，优化背景图片布局，增加半透明遮罩层以提升视觉效果。
---
 src/pages/Playroom.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index 81c0607..a36fc77 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -45,12 +45,24 @@ watch(() => playQueueStore.currentTime, () => {
 	const newPosition = (containerWidth - thumbWidth) * progress
 	gsap.to(progressBarThumb.value, { x: newPosition, duration: 0.1 })
 })
+
+function formatDetector() {
+	const format = playQueueStore.list[playQueueStore.currentIndex].song.sourceUrl?.split('.').pop()
+	if (format === 'mp3') { return 'MP3' }
+	if (format === 'flac') { return 'FLAC' }
+	if (format === 'm4a') { return 'M4A' }
+	if (format === 'ape') { return 'APE' }
+	if (format === 'wav') { return 'WAV' }
+	return '未知格式'
+}
 </script>
 
 <template>
-	<img class="z-0 absolute top-0 left-0 w-screen h-screen blur-2xl object-cover"
-		:src="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl"
-		v-if="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl" />
+	<div class="z-0 absolute top-0 left-0 w-screen h-screen" v-if="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl">
+		<img class="w-full h-full blur-2xl object-cover"
+			:src="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl" />
+		<div class="bg-gray-600/50 w-full h-full absolute top-0 left-0" />
+	</div>
 
 	<div class="w-full flex justify-center items-center my-auto gap-12 z-10 select-none">
 		<div class="flex flex-col text-center w-96 gap-4">
@@ -76,7 +88,7 @@ watch(() => playQueueStore.currentTime, () => {
 					<div class="text-white/75 font-light flex-1 text-left">
 						{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}
 					</div>
-					<div class="text-white text-xs text-center">MP3</div>
+					<div class="text-white text-xs text-center">{{ formatDetector() }}</div>
 					<button class="text-white/75 font-light flex-1 text-right"
 						@click="displayTimeLeft = !displayTimeLeft">{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</button>
 				</div>