From b6574d8093c87142c74e0378dda6d4803af4b521 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Mon, 26 May 2025 12:18:06 +1000
Subject: [PATCH] =?UTF-8?q?feat(=E6=92=AD=E6=94=BE=E7=95=8C=E9=9D=A2):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=9F=B3=E9=87=8F=E5=9B=BE=E6=A0=87=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=92=AD=E6=94=BE=E5=99=A8=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加新的音量图标组件 speaker.vue
- 调整播放器界面布局，将歌曲信息与操作按钮重新排列
- 优化播放控制按钮的视觉效果，统一模糊效果实现方式
---
 src/assets/icons/speaker.vue |  13 ++++
 src/pages/Playroom.vue       | 125 ++++++++++++++++++++++++-----------
 2 files changed, 99 insertions(+), 39 deletions(-)
 create mode 100644 src/assets/icons/speaker.vue

diff --git a/src/assets/icons/speaker.vue b/src/assets/icons/speaker.vue
new file mode 100644
index 0000000..3167ab8
--- /dev/null
+++ b/src/assets/icons/speaker.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+	size: number
+}>()
+</script>
+
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" :class="`w-${size} h-${size}`">
+		<path
+			d="M6.60282 10.0001L10 7.22056V16.7796L6.60282 14.0001H3V10.0001H6.60282ZM2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z">
+		</path>
+	</svg>
+</template>
\ No newline at end of file
diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index e5741e3..59603b2 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -19,6 +19,7 @@ import EllipsisHorizontalIcon from '../assets/icons/ellipsishorizontal.vue'
 import XIcon from '../assets/icons/x.vue'
 import ShuffleIcon from '../assets/icons/shuffle.vue'
 import CycleTwoArrowsIcon from '../assets/icons/cycletwoarrows.vue'
+import SpeakerIcon from '../assets/icons/speaker.vue'
 
 const playQueueStore = usePlayQueueStore()
 gsap.registerPlugin(Draggable)
@@ -147,27 +148,35 @@ function makePlayQueueListDismiss() {
 		<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 class="relative">
-				<div class="">
-					<div class="text-black/90 blur-lg text-lg font-medium truncate">
-						{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
+			<div class="flex justify-between items-center">
+				<div class="relative flex-auto w-0">
+					<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-black/90 blur-lg 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="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 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>
-
 			</div>
 
 			<div class="flex flex-col gap-1">
@@ -179,7 +188,8 @@ function makePlayQueueListDismiss() {
 
 				<div class="w-full flex justify-between">
 					<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-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">
@@ -188,9 +198,9 @@ function makePlayQueueListDismiss() {
 					</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>
+						<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>
@@ -203,15 +213,23 @@ function makePlayQueueListDismiss() {
 				<div class="flex-1 text-left flex gap-1">
 					<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>
+							<span class="text-black blur-md absolute top-0 left-0">
+								<SpeakerIcon :size="6" />
+							</span>
+							<span class="text-white">
+								<SpeakerIcon :size="6" />
+							</span>
 						</div>
 					</button>
 					<button class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25"
 						@click="makePlayQueueListPresent">
 						<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>
+							<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>
@@ -221,8 +239,12 @@ function makePlayQueueListDismiss() {
 					<button class="text-white flex-1 h-10 flex justify-center items-center rounded-lg hover:bg-white/25"
 						@click="playPrevious">
 						<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>
+							<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>
 
@@ -230,18 +252,30 @@ function makePlayQueueListDismiss() {
 						@click="playQueueStore.isPlaying = !playQueueStore.isPlaying">
 						<div v-if="playQueueStore.isPlaying">
 							<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>
+								<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>
+								<span class="text-black blur-md 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>
+								<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>
 					</button>
@@ -249,8 +283,12 @@ function makePlayQueueListDismiss() {
 					<button class="text-white flex-1 h-10 flex justify-center items-center rounded-lg hover:bg-white/25"
 						@click="playNext">
 						<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>
+							<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>
@@ -259,14 +297,22 @@ function makePlayQueueListDismiss() {
 					<div class="flex-1" />
 					<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>
+							<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-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>
+							<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>
@@ -327,7 +373,8 @@ function makePlayQueueListDismiss() {
 						<div class="flex flex-col text-left flex-auto w-0">
 							<div class="text-white text-base font-medium truncate">{{ track.song.name }}</div>
 							<div class="text-white/75 text-sm truncate">{{ artistsOrganize(track.song.artists ?? []) }} —
-								{{ track.album?.name ?? '未知专辑' }}</div>
+								{{ track.album?.name ?? '未知专辑' }}
+							</div>
 						</div>
 					</div>
 				</button>