From 519816c050789d4e4921a9deb16e3b0efb34323b Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 25 May 2025 19:03:54 +1000
Subject: [PATCH] =?UTF-8?q?feat(Playroom):=20=E6=B7=BB=E5=8A=A0=E6=96=B0?=
 =?UTF-8?q?=E7=9A=84=E5=9B=BE=E6=A0=87=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=92=AD=E6=94=BE=E9=98=9F=E5=88=97=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在播放队列对话框中添加了新的图标组件（XIcon、ShuffleIcon、ListArrowIcon），并更新了对话框的布局和样式
---
 src/assets/icons/cycletwoarrows.vue | 11 +++++++++++
 src/assets/icons/listarrow.vue      | 15 +++++++++++++++
 src/assets/icons/x.vue              | 15 +++++++++++++++
 src/pages/Playroom.vue              | 28 +++++++++++++++++++++++-----
 4 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/icons/cycletwoarrows.vue
 create mode 100644 src/assets/icons/listarrow.vue
 create mode 100644 src/assets/icons/x.vue

diff --git a/src/assets/icons/cycletwoarrows.vue b/src/assets/icons/cycletwoarrows.vue
new file mode 100644
index 0000000..dc1ba09
--- /dev/null
+++ b/src/assets/icons/cycletwoarrows.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+	size: number
+}>()
+</script>
+
+<template>
+	<div :class="`w-${size} h-${size}`">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 20V21.9324C8 22.2086 7.77614 22.4324 7.5 22.4324C7.38303 22.4324 7.26977 22.3914 7.17991 22.3165L3.06093 18.8841C2.84879 18.7073 2.82013 18.392 2.99691 18.1799C3.09191 18.0659 3.23264 18 3.38103 18L18 18C19.1046 18 20 17.1045 20 16V7.99997H22V16C22 18.2091 20.2091 20 18 20H8ZM16 3.99997V2.0675C16 1.79136 16.2239 1.5675 16.5 1.5675C16.617 1.5675 16.7302 1.60851 16.8201 1.68339L20.9391 5.11587C21.1512 5.29266 21.1799 5.60794 21.0031 5.82008C20.9081 5.93407 20.7674 5.99998 20.619 5.99998L6 5.99997C4.89543 5.99997 4 6.8954 4 7.99997V16H2V7.99997C2 5.79083 3.79086 3.99997 6 3.99997H16Z"></path></svg>
+	</div>
+</template>
\ No newline at end of file
diff --git a/src/assets/icons/listarrow.vue b/src/assets/icons/listarrow.vue
new file mode 100644
index 0000000..6d9a621
--- /dev/null
+++ b/src/assets/icons/listarrow.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+	size: number
+}>()
+</script>
+
+<template>
+	<div :class="`w-${size} h-${size}`">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+			<path
+				d="M17 3.99998V2.0675C17 1.79136 17.2239 1.5675 17.5 1.5675C17.617 1.5675 17.7302 1.60851 17.8201 1.68339L21.9391 5.11587C22.1512 5.29266 22.1799 5.60794 22.0031 5.82008C21.9081 5.93407 21.7674 5.99998 21.619 5.99998H2V3.99998H17ZM2 18H22V20H2V18ZM2 11H22V13H2V11Z">
+			</path>
+		</svg>
+	</div>
+</template>
\ No newline at end of file
diff --git a/src/assets/icons/x.vue b/src/assets/icons/x.vue
new file mode 100644
index 0000000..6530efc
--- /dev/null
+++ b/src/assets/icons/x.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+	size: number
+}>()
+</script>
+
+<template>
+	<div :class="`w-${size} h-${size}`">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+			<path
+				d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z">
+			</path>
+		</svg>
+	</div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index 8fd30ea..13dbd2b 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -16,6 +16,9 @@ import ChatBubbleQuoteIcon from '../assets/icons/chatbubblequote.vue'
 import StarEmptyIcon from '../assets/icons/starempty.vue'
 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'
 
 const playQueueStore = usePlayQueueStore()
 gsap.registerPlugin(Draggable)
@@ -26,7 +29,7 @@ const playQueueDialogContainer = useTemplateRef('playQueueDialogContainer')
 const playQueueDialog = useTemplateRef('playQueueDialog')
 
 const displayTimeLeft = ref(false)
-const presentQueueListDialog = ref(false)
+const presentQueueListDialog = ref(true)
 
 onMounted(() => {
 	Draggable.create(progressBarThumb.value, {
@@ -219,13 +222,28 @@ function makePlayQueueListDismiss() {
 
 	<!-- Queue list -->
 	<dialog :open="presentQueueListDialog" class="z-20 w-screen h-screen" @click="makePlayQueueListDismiss" ref="playQueueDialogContainer" style="background-color: #17171780;">
-		<div class="w-96 h-screen bg-neutral-900/80 shadow-[0_0_16px_0_rgba(0,0,0,0.5)] backdrop-blur-2xl p-8 flex flex-col" @click.stop ref="playQueueDialog">
-			<div class="flex justify-between">
+		<div class="w-96 h-screen bg-neutral-900/80 shadow-[0_0_16px_0_rgba(0,0,0,0.5)] backdrop-blur-2xl pt-8 flex flex-col" @click.stop ref="playQueueDialog">
+			<div class="flex justify-between mx-8 mb-4">
 				<div class="text-white font-medium text-2xl">待播清单</div>
-				<button class="text-white" @click="makePlayQueueListDismiss">
-
+				<button class="text-white w-9 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center" @click="makePlayQueueListDismiss">
+					<XIcon :size="4" />
 				</button>
 			</div>
+
+			<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">
+					<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" />
+				</button>
+			</div>
+
+			<hr class="border-[#ffffff39]" />
+
+			<div class="flex-auto h-0 overflow-y-auto px-8">
+				
+			</div>
 		</div>
 	</dialog>
 </template>
\ No newline at end of file