feat(Playroom): 添加新的图标组件并更新界面布局

在Playroom页面中新增了四个图标组件（ChatBubbleQuoteIcon、StarEmptyIcon、MusicListIcon、EllipsisHorizontalIcon），并调整了界面布局以更好地展示这些图标。这些改动旨在提升用户界面的交互性和视觉一致性。

src/assets/icons/chatbubblequote.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="M21 3C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.455L2 22.5V4C2 3.44772 2.44772 3 3 3H21ZM20 5H4V18.385L5.76333 17H20V5ZM10.5153 7.4116L10.9616 8.1004C9.29402 9.0027 9.32317 10.4519 9.32317 10.7645C9.47827 10.7431 9.64107 10.7403 9.80236 10.7553C10.7045 10.8389 11.4156 11.5795 11.4156 12.5C11.4156 13.4665 10.6321 14.25 9.66558 14.25C9.12905 14.25 8.61598 14.0048 8.29171 13.6605C7.77658 13.1137 7.5 12.5 7.5 11.5052C7.5 9.75543 8.72825 8.18684 10.5153 7.4116ZM15.5153 7.4116L15.9616 8.1004C14.294 9.0027 14.3232 10.4519 14.3232 10.7645C14.4783 10.7431 14.6411 10.7403 14.8024 10.7553C15.7045 10.8389 16.4156 11.5795 16.4156 12.5C16.4156 13.4665 15.6321 14.25 14.6656 14.25C14.1291 14.25 13.616 14.0048 13.2917 13.6605C12.7766 13.1137 12.5 12.5 12.5 11.5052C12.5 9.75543 13.7283 8.18684 15.5153 7.4116Z">
+			</path>
+		</svg>
+	</div>
+</template>

src/assets/icons/ellipsishorizontal.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="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z">
+			</path>
+		</svg>
+	</div>
+</template>

src/assets/icons/ellipsisvertical.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="M12 3C11.175 3 10.5 3.675 10.5 4.5C10.5 5.325 11.175 6 12 6C12.825 6 13.5 5.325 13.5 4.5C13.5 3.675 12.825 3 12 3ZM12 18C11.175 18 10.5 18.675 10.5 19.5C10.5 20.325 11.175 21 12 21C12.825 21 13.5 20.325 13.5 19.5C13.5 18.675 12.825 18 12 18ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z">
+			</path>
+		</svg>
+	</div>
+</template>

src/assets/icons/musiclist.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="M2 18H12V20H2V18ZM2 11H16V13H2V11ZM2 4H22V6H2V4ZM19 15.1707V9H24V11H21V18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18C15 16.3431 16.3431 15 18 15C18.3506 15 18.6872 15.0602 19 15.1707ZM18 19C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17C17.4477 17 17 17.4477 17 18C17 18.5523 17.4477 19 18 19Z">
+			</path>
+		</svg>
+	</div>
+</template>

src/pages/Playroom.vue

@@ -12,6 +12,10 @@ import ForwardIcon from '../assets/icons/forward.vue'
 import PlayIcon from '../assets/icons/play.vue'
 import PauseIcon from '../assets/icons/pause.vue'
 import LoadingIndicator from '../assets/icons/loadingindicator.vue'
+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'
 
 const playQueueStore = usePlayQueueStore()
 gsap.registerPlugin(Draggable)
@@ -126,18 +130,20 @@ function playPrevious() {
 				</div>
 
 				<div class="w-full flex justify-between items-center">
-					<div class="flex-1 text-left"></div>
+					<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 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="playPrevious">
-							<div class="w-6 h-6">
+							<RewindIcon :size="6" />
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-									<path
-										d="M11.0002 17.035C11.0002 17.1383 10.9682 17.239 10.9087 17.3234C10.7494 17.549 10.4375 17.6028 10.2119 17.4435L3.07889 12.4085C3.03228 12.3756 2.99164 12.335 2.95874 12.2883C2.7995 12.0627 2.85329 11.7508 3.07889 11.5915L10.2119 6.55648C10.2962 6.49693 10.3969 6.46497 10.5002 6.46497C10.7763 6.46497 11.0002 6.68882 11.0002 6.96497V17.035ZM12.0789 12.4085C12.0323 12.3756 11.9916 12.335 11.9587 12.2883C11.7995 12.0627 11.8533 11.7508 12.0789 11.5915L19.2119 6.55648C19.2962 6.49693 19.3969 6.46497 19.5002 6.46497C19.7763 6.46497 20.0002 6.68882 20.0002 6.96497V17.035C20.0002 17.1383 19.9682 17.239 19.9087 17.3234C19.7494 17.549 19.4375 17.6028 19.2119 17.4435L12.0789 12.4085Z">
-									</path>
-								</svg>
-							</div>
 						</button>
 
 						<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
@@ -151,16 +157,19 @@ function playPrevious() {
 
 						<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
 							@click="playNext">
-							<div class="w-6 h-6">
+							<ForwardIcon :size="6" />
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+						</button>
-									<path
+					</div>
-										d="M4.78834 17.4434C4.70398 17.503 4.60326 17.535 4.5 17.535C4.22386 17.535 4 17.3111 4 17.035V6.96488C4 6.86163 4.03197 6.7609 4.09152 6.67654C4.25076 6.45094 4.56274 6.39715 4.78834 6.5564L11.9213 11.5914C11.9679 11.6243 12.0086 11.665 12.0415 11.7116C12.2007 11.9372 12.1469 12.2492 11.9213 12.4084L4.78834 17.4434ZM13 6.96488C13 6.86163 13.032 6.7609 13.0915 6.67654C13.2508 6.45094 13.5627 6.39715 13.7883 6.5564L20.9213 11.5914C20.9679 11.6243 21.0086 11.665 21.0415 11.7116C21.2007 11.9372 21.1469 12.2492 20.9213 12.4084L13.7883 17.4434C13.704 17.503 13.6033 17.535 13.5 17.535C13.2239 17.535 13 17.3111 13 17.035V6.96488Z">
+
-									</path>
+					<div class="flex-1 text-right flex">
-								</svg>
+						<div class="flex-1" />
-							</div>
+						<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 class="flex-1 text-right"></div>
 				</div>
 			</div>
 		</div>