From 4da52e7f9540258c6f15b33bf03e7e4d2d592699 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Mon, 26 May 2025 13:39:47 +1000
Subject: [PATCH] =?UTF-8?q?feat(=E6=92=AD=E6=94=BE=E5=99=A8):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=BE=AA=E7=8E=AF=E6=92=AD=E6=94=BE=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

新增单曲循环图标组件，并优化播放控制按钮的UI交互。
---
 src/assets/icons/cycletwoarrowswithnumone.vue | 13 +++++++++++
 src/components/Player.vue                     | 14 ++++++++---
 src/pages/Playroom.vue                        | 23 +++++++++++++++----
 3 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/icons/cycletwoarrowswithnumone.vue

diff --git a/src/assets/icons/cycletwoarrowswithnumone.vue b/src/assets/icons/cycletwoarrowswithnumone.vue
new file mode 100644
index 0000000..e112847
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Player.vue b/src/components/Player.vue
index c1fd923..eed6099 100644
--- a/src/components/Player.vue
+++ b/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="() => {
diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index 9f2d0b3..999436d 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 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>