From 4a8f68346a7bd436eefadd73e2b6004dce70903a Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Mon, 26 May 2025 14:14:03 +1000
Subject: [PATCH] =?UTF-8?q?style(Playroom):=20=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=A0=BC=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80=E9=97=B4?=
 =?UTF-8?q?=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除多余的空格和换行符
- 统一按钮和布局的样式
- 调整元素间距提升视觉一致性
---
 src/pages/Playroom.vue | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index 999436d..2f471d8 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -138,7 +138,7 @@ function makePlayQueueListDismiss() {
 
 function getCurrentTrack() {
 	if (playQueueStore.playMode.shuffle) {
-		return playQueueStore.list[playQueueStore.shuffleList[playQueueStore.currentIndex]] 
+		return playQueueStore.list[playQueueStore.shuffleList[playQueueStore.currentIndex]]
 	} else {
 		return playQueueStore.list[playQueueStore.currentIndex]
 	}
@@ -146,18 +146,15 @@ function getCurrentTrack() {
 </script>
 
 <template>
-	<div class="z-0 absolute top-0 left-0 w-screen h-screen"
-		v-if="getCurrentTrack().album?.coverDeUrl">
-		<img class="w-full h-full blur-2xl object-cover"
-			:src="getCurrentTrack().album?.coverDeUrl" />
+	<div class="z-0 absolute top-0 left-0 w-screen h-screen" v-if="getCurrentTrack().album?.coverDeUrl">
+		<img class="w-full h-full blur-2xl object-cover" :src="getCurrentTrack().album?.coverDeUrl" />
 		<div class="bg-transparent w-full h-full absolute top-0 left-0" />
 	</div>
 
 	<div class="w-full flex justify-center items-center my-auto gap-16 z-10 select-none">
 		<div class="flex flex-col w-96 gap-4">
-			<img :src="getCurrentTrack().album?.coverUrl"
-				class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96" />
-			<div class="flex justify-between items-center">
+			<img :src="getCurrentTrack().album?.coverUrl" class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96" />
+			<div class="flex justify-between items-center gap-2">
 				<div class="relative flex-auto w-0">
 					<div class="">
 						<div class="text-black/90 blur-lg text-lg font-medium truncate">
@@ -181,11 +178,11 @@ function getCurrentTrack() {
 
 				</div>
 
-				<div class="relative">
-					<button class="h-10 w-10 flex justify-center items-center rounded-full bg-black/10 backdrop-blur-3xl">
-						<span class="text-white"><StarEmptyIcon :size="6" /></span>
-					</button>
-				</div>
+				<button class="h-10 w-10 flex justify-center items-center rounded-full bg-black/10 backdrop-blur-3xl">
+					<span class="text-white">
+						<StarEmptyIcon :size="6" />
+					</span>
+				</button>
 			</div>
 
 			<div class="flex flex-col gap-1">
@@ -378,8 +375,8 @@ function getCurrentTrack() {
 			<hr class="border-[#ffffff39]" />
 
 			<div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-if="playQueueStore.playMode.shuffle">
-				<button v-for="(oriIndex, shuffledIndex) in playQueueStore.shuffleList" class="p-4 w-full rounded-md hover:bg-white/5 first:mt-2"
-					:key="oriIndex" @click="() => {
+				<button v-for="(oriIndex, shuffledIndex) in playQueueStore.shuffleList"
+					class="p-4 w-full rounded-md hover:bg-white/5 first:mt-2" :key="oriIndex" @click="() => {
 						if (playQueueStore.currentIndex === shuffledIndex) { return }
 						playQueueStore.currentIndex = shuffledIndex
 						playQueueStore.isPlaying = true
@@ -399,7 +396,8 @@ function getCurrentTrack() {
 						</div>
 						<div class="flex flex-col text-left flex-auto w-0">
 							<div class="text-white text-base font-medium truncate">{{ playQueueStore.list[oriIndex].song.name }}</div>
-							<div class="text-white/75 text-sm truncate">{{ artistsOrganize(playQueueStore.list[oriIndex].song.artists ?? []) }} —
+							<div class="text-white/75 text-sm truncate">
+								{{ artistsOrganize(playQueueStore.list[oriIndex].song.artists ?? []) }} —
 								{{ playQueueStore.list[oriIndex].album?.name ?? '未知专辑' }}
 							</div>
 						</div>