From c07f430009ff914515711cfc3a7ad70f77abcfd6 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Mon, 26 May 2025 12:04:19 +1000
Subject: [PATCH] =?UTF-8?q?feat(Playroom):=20=E4=BC=98=E5=8C=96=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E7=95=8C=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=B9=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=A7=86=E8=A7=89=E5=B1=82=E6=AC=A1=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 替换列表箭头图标为循环双箭头图标
- 背景不再使用降低亮度的蒙版
- 为文本和按钮添加阴影和模糊背景效果
- 统一调整按钮尺寸和交互样式
- 优化时间显示布局和切换功能
---
 src/pages/Playroom.vue | 120 +++++++++++++++++++++++++++++------------
 1 file changed, 86 insertions(+), 34 deletions(-)

diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index e503d36..e5741e3 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -18,7 +18,7 @@ import MusicListIcon from '../assets/icons/musiclist.vue'
 import EllipsisHorizontalIcon from '../assets/icons/ellipsishorizontal.vue'
 import XIcon from '../assets/icons/x.vue'
 import ShuffleIcon from '../assets/icons/shuffle.vue'
-import ListArrowIcon from '../assets/icons/listarrow.vue'
+import CycleTwoArrowsIcon from '../assets/icons/cycletwoarrows.vue'
 
 const playQueueStore = usePlayQueueStore()
 gsap.registerPlugin(Draggable)
@@ -140,37 +140,60 @@ function makePlayQueueListDismiss() {
 		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 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 text-center w-96 gap-4">
+		<div class="flex flex-col 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" />
-			<div>
-				<div class="text-white text-lg font-medium truncate">
-					{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
+			<div class="relative">
+				<div class="">
+					<div class="text-black/90 blur-lg text-lg font-medium truncate">
+						{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
+					</div>
+					<div class="text-black/90 blur-lg text-base truncate">
+						{{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} —
+						{{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }}
+					</div>
 				</div>
-				<div class="text-white/75 text-base truncate">
-					{{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} —
-					{{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }}
+
+				<div class="absolute top-0">
+					<div class="text-white text-lg font-medium truncate">
+						{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
+					</div>
+					<div class="text-white/75 text-base truncate">
+						{{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} —
+						{{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }}
+					</div>
 				</div>
+
 			</div>
 
 			<div class="flex flex-col gap-1">
-				<div class="w-full p-[0.125rem] bg-white/20 rounded-full backdrop-blur-3xl">
+				<div class="w-full p-[0.125rem] bg-white/20 shadow-[0_.125rem_1rem_0_#00000010] rounded-full backdrop-blur-3xl">
 					<div class="w-full" ref="progressBarContainer">
 						<div class="w-2 h-2 bg-white rounded-full shadow-md" ref="progressBarThumb" />
 					</div>
 				</div>
 
 				<div class="w-full flex justify-between">
-					<div class="text-white/75 font-light flex-1 text-left">
-						{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}
+					<div class="font-medium flex-1 text-left relative">
+						<span class="text-black blur-lg absolute top-0">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span>
+						<span class="text-white/90">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span>
+					</div>
+					<div class="text-xs text-center relative">
+						<span class="text-black blur-lg absolute top-0">{{ formatDetector() }}</span>
+						<span class="text-white">{{ formatDetector() }}</span>
+					</div>
+					<div class="flex flex-1">
+						<div class="flex-1" />
+						<button class="text-white/90 font-medium text-right relative"
+							@click="displayTimeLeft = !displayTimeLeft">
+							<span class="text-black blur-lg absolute top-0">{{ `${displayTimeLeft? '-' : ''}${timeFormatter(displayTimeLeft? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</span>
+							<span>{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</span>
+						</button>
 					</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>
 
 
@@ -178,44 +201,73 @@ function makePlayQueueListDismiss() {
 
 			<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 class="h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25">
+						<div class="w-6 h-6 relative">
+							<span class="text-black blur-md absolute top-0 left-0"><StarEmptyIcon :size="6" /></span>
+							<span class="text-white"><StarEmptyIcon :size="6" /></span>
+						</div>
 					</button>
-					<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25"
+					<button class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25"
 						@click="makePlayQueueListPresent">
-						<MusicListIcon :size="4" />
+						<div class="w-6 h-6 relative">
+							<span class="text-black blur-md absolute top-0 left-0"><MusicListIcon :size="6" /></span>
+							<span class="text-white"><MusicListIcon :size="6" /></span>
+						</div>
 					</button>
 				</div>
 
 				<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"
+					<button class="text-white flex-1 h-10 flex justify-center items-center rounded-lg hover:bg-white/25"
 						@click="playPrevious">
-						<RewindIcon :size="6" />
+						<div class="w-8 h-8 relative">
+							<span class="text-black/80 blur-lg absolute top-0 left-0"><RewindIcon :size="8" /></span>
+							<span class="text-white"><RewindIcon :size="8" /></span>
+						</div>
 					</button>
 
-					<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
+					<button class="text-white flex-1 h-10 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 v-if="playQueueStore.isBuffering" class="w-6 h-6 relative">
+								<span class="text-black/80 blur-lg absolute top-0 left-0"><LoadingIndicator :size="6" /></span>
+								<span class="text-white"><LoadingIndicator :size="6" /></span>
+							</div>
+							<div v-else class="w-8 h-8 relative">
+								<span class="text-black/80 blur-lg absolute top-0 left-0"><PauseIcon :size="8" /></span>
+								<span class="text-white"><PauseIcon :size="8" /></span>
+							</div>
+						</div>
+						<div v-else>
+							<div class="w-8 h-8 relative">
+								<span class="text-black/80 blur-lg absolute top-0 left-0"><PlayIcon :size="8" /></span>
+								<span class="text-white"><PlayIcon :size="8" /></span>
+							</div>
 						</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"
+					<button class="text-white flex-1 h-10 flex justify-center items-center rounded-lg hover:bg-white/25"
 						@click="playNext">
-						<ForwardIcon :size="6" />
+						<div class="w-8 h-8 relative">
+							<span class="text-black/80 blur-lg absolute top-0 left-0"><ForwardIcon :size="8" /></span>
+							<span class="text-white"><ForwardIcon :size="8" /></span>
+						</div>
 					</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 class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25">
+						<div class="w-6 h-6 relative">
+							<span class="text-black blur-md absolute top-0 left-0"><ChatBubbleQuoteIcon :size="6" /></span>
+							<span class="text-white"><ChatBubbleQuoteIcon :size="6" /></span>
+						</div>
 					</button>
-					<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
-						<EllipsisHorizontalIcon :size="4" />
+					<button class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25">
+						<div class="w-6 h-6 relative">
+							<span class="text-black blur-sm absolute top-0 left-0"><EllipsisHorizontalIcon :size="6" /></span>
+							<span class="text-white"><EllipsisHorizontalIcon :size="6" /></span>
+						</div>
 					</button>
 				</div>
 			</div>
@@ -240,13 +292,13 @@ function makePlayQueueListDismiss() {
 			<div class="flex gap-2 mx-8 mb-4">
 				<button
 					class="text-white flex-1 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
-					@click="makePlayQueueListDismiss">
+					@click="">
 					<ShuffleIcon :size="4" />
 				</button>
 				<button
 					class="text-white flex-1 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
-					@click="makePlayQueueListDismiss">
-					<ListArrowIcon :size="4" />
+					@click="">
+					<CycleTwoArrowsIcon :size="4" />
 				</button>
 			</div>