feat(播放器): 添加循环播放模式功能

实现三种循环播放模式：关闭、全部循环和单曲循环。修改播放逻辑以支持不同模式：
- 关闭模式：播放到队列末尾时停止
- 全部循环：播放到队列末尾时从头开始
- 单曲循环：当前歌曲播放结束后自动重播

新增单曲循环图标组件，并优化播放控制按钮的UI交互。

src/assets/icons/cycletwoarrowswithnumone.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="M8 20V21.9325C8 22.2086 7.77614 22.4325 7.5 22.4325C7.38303 22.4325 7.26977 22.3915 7.17991 22.3166L3.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.1046 20 16V8H22V16C22 18.2091 20.2091 20 18 20H8ZM16 2.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 6C4.89543 6 4 6.89543 4 8V16H2V8C2 5.79086 3.79086 4 6 4H16V2.0675ZM11 8H13V16H11V10H9V9L11 8Z">
+		</path>
+	</svg>
+</template>

src/components/Player.vue

@@ -69,8 +69,13 @@ function playNext() {
 	if (playQueueStore.currentIndex === playQueueStore.list.length - 1) {
 		console.log("at the bottom, pause")
 		playQueueStore.currentIndex = 0
-		player.value?.pause()
-		playQueueStore.isPlaying = false
+		if(playQueueStore.playMode.repeat === 'all') {
+			playQueueStore.currentIndex = 0
+			playQueueStore.isPlaying = true
+		} else {
+			player.value?.pause()
+			playQueueStore.isPlaying = false
+		}
 	} else {
 		playQueueStore.currentIndex++
 		playQueueStore.isPlaying = true
@@ -204,7 +209,10 @@ function getCurrentTrack() {
 			ref="playerRef" 
 			:autoplay="playQueueStore.isPlaying" 
 			v-if="playQueueStore.list.length !== 0" 
-			@ended="playNext"
+			@ended="() => {
+				if (playQueueStore.playMode.repeat === 'single') { playQueueStore.isPlaying = true }
+				else { playNext() }
+			}"
 			@pause="playQueueStore.isPlaying = false" 
 			@play="playQueueStore.isPlaying = true" 
 			@playing="() => {

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 CycleTwoArrowsWithNumOneIcon from '../assets/icons/cycletwoarrowswithnumone.vue'
 import SpeakerIcon from '../assets/icons/speaker.vue'
 
 const playQueueStore = usePlayQueueStore()
@@ -301,7 +302,7 @@ function getCurrentTrack() {
 					</button>
 				</div>
 
-				<div class="flex-1 text-right flex">
+				<div class="flex-1 text-right flex gap-1">
 					<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">
@@ -354,9 +355,23 @@ function getCurrentTrack() {
 					<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="">
-					<CycleTwoArrowsIcon :size="4" />
+					class="flex-1 h-9 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
+					:class="playQueueStore.playMode.repeat === 'off' ? 'text-white bg-neutral-800/80' : 'bg-[#ffffffaa] text-neutral-700'"
+					@click="() => {
+						switch (playQueueStore.playMode.repeat) {
+							case 'off':
+								playQueueStore.playMode.repeat = 'all'
+								break
+							case 'all':
+								playQueueStore.playMode.repeat = 'single'
+								break
+							case 'single':
+								playQueueStore.playMode.repeat = 'off'
+								break
+						}
+					}">
+					<CycleTwoArrowsIcon :size="4" v-if="playQueueStore.playMode.repeat !== 'single'" />
+					<CycleTwoArrowsWithNumOneIcon :size="4" v-else />
 				</button>
 			</div>