From a40268e1340f219cd0c1c5cc2e4d5d295541396e Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 25 May 2025 17:52:34 +1000
Subject: [PATCH] =?UTF-8?q?style(Playroom):=20=E8=B0=83=E6=95=B4=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E9=97=B4=E8=B7=9D=E4=BB=A5=E6=8F=90=E5=8D=87=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E4=B8=80=E8=87=B4=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将按钮之间的间距从 `gap-12` 调整为 `gap-16`，并重新排列部分按钮的布局，以提高页面的视觉一致性和美观性。
---
 src/pages/Playroom.vue | 76 ++++++++++++++++++++++--------------------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index 80d713a..d928fa7 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -100,7 +100,7 @@ function playPrevious() {
 		<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="w-full flex justify-center items-center my-auto gap-16 z-10 select-none">
 		<div class="flex flex-col text-center w-96 gap-4">
 			<img :src="playQueueStore.list[playQueueStore.currentIndex].album?.coverUrl"
 				class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96" />
@@ -129,47 +129,49 @@ function playPrevious() {
 						@click="displayTimeLeft = !displayTimeLeft">{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</button>
 				</div>
 
-				<div class="w-full flex justify-between items-center">
-					<div class="flex-1 text-left flex gap-1">
-						<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
-							<StarEmptyIcon :size="4" />
-						</button>
-						<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
-							<MusicListIcon :size="4" />
-						</button>
-					</div>
+				
+			</div>
 
-					<div class="flex-2 text-center align-center justify-center gap-2 flex">
+			<div class="w-full flex justify-between items-center">
+				<div class="flex-1 text-left flex gap-1">
+					<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
+						<StarEmptyIcon :size="4" />
+					</button>
+					<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
+						<MusicListIcon :size="4" />
+					</button>
+				</div>
 
-						<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
-							@click="playPrevious">
-							<RewindIcon :size="6" />
-						</button>
+				<div class="flex-2 text-center align-center justify-center gap-2 flex">
 
-						<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
-							@click="playQueueStore.isPlaying = !playQueueStore.isPlaying">
-							<div v-if="playQueueStore.isPlaying">
-								<LoadingIndicator v-if="playQueueStore.isBuffering" :size="6" />
-								<PauseIcon v-else :size="6" />
-							</div>
-							<PlayIcon v-else :size="6" />
-						</button>
+					<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
+						@click="playPrevious">
+						<RewindIcon :size="6" />
+					</button>
 
-						<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
-							@click="playNext">
-							<ForwardIcon :size="6" />
-						</button>
-					</div>
+					<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
+						@click="playQueueStore.isPlaying = !playQueueStore.isPlaying">
+						<div v-if="playQueueStore.isPlaying">
+							<LoadingIndicator v-if="playQueueStore.isBuffering" :size="6" />
+							<PauseIcon v-else :size="6" />
+						</div>
+						<PlayIcon v-else :size="6" />
+					</button>
 
-					<div class="flex-1 text-right flex">
-						<div class="flex-1" />
-						<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
-							<ChatBubbleQuoteIcon :size="4" />
-						</button>
-						<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
-							<EllipsisHorizontalIcon :size="4" />
-						</button>
-					</div>
+					<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
+						@click="playNext">
+						<ForwardIcon :size="6" />
+					</button>
+				</div>
+
+				<div class="flex-1 text-right flex">
+					<div class="flex-1" />
+					<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
+						<ChatBubbleQuoteIcon :size="4" />
+					</button>
+					<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
+						<EllipsisHorizontalIcon :size="4" />
+					</button>
 				</div>
 			</div>
 		</div>