feat(Playroom): 添加新的图标组件并更新播放队列对话框

在播放队列对话框中添加了新的图标组件（XIcon、ShuffleIcon、ListArrowIcon），并更新了对话框的布局和样式

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>

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>

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>

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="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">
+			<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>