feat(AlbumDetail, Player, Library): enhance playback functionality and improve user prompts

src/components/AlbumDetailDialog.vue

@@ -114,7 +114,7 @@ const playQueue = usePlayQueueStore()
 
 function playTheAlbum(from: number = 0) {
 	if (playQueue.queueReplaceLock) {
-		if (!confirm("当前操作会将你的待播列表清空、放入这张专辑所有曲目，并从新待播清单的开头播放。继续吗？")) { return }
+		if (!confirm("当前操作会将你的播放队列清空、放入这张专辑所有曲目，并从头播放。继续吗？")) { return }
 		playQueue.queueReplaceLock = false
 	}
 
@@ -132,6 +132,17 @@ function playTheAlbum(from: number = 0) {
 	playQueue.isBuffering = true
 }
 
+function shuffle() {
+	playTheAlbum()
+	playQueue.shuffleCurrent = true
+	playQueue.playMode.shuffle = false
+	setTimeout(() => {
+		playQueue.playMode.shuffle = true
+		playQueue.isPlaying = true
+		playQueue.isBuffering = true
+	}, 100)
+}
+
 </script>
 
 <template>
@@ -180,11 +191,7 @@ function playTheAlbum(from: number = 0) {
 
 								<button
 									class="text-white w-10 h-10 bg-neutral-800/80 border border-[#ffffff39] backdrop-blur-3xl rounded-full flex justify-center items-center hover:bg-neutral-700/80 transition-all"
-									@click="() => {
+									@click="shuffle">
-										playTheAlbum()
-										playQueue.shuffleCurrent = true
-										playQueue.playMode.shuffle = true
-									}">
 									<ShuffleIcon :size="4" />
 								</button>
 

src/components/Player.vue

@@ -260,33 +260,35 @@ watch(() => error.value, (newError) => {
 // 切换播放模式
 watch(() => playQueueStore.playMode.shuffle, (isShuffle) => {
 	if (isShuffle) {
-		// 提取当前歌曲的索引和队列中总项目数
 		const currentIndex = playQueueStore.currentIndex
 		const trackCount = playQueueStore.list.length
-		// 生成新的随机播放列表，该列表是原来列表的下标数组（保持原有的顺序不变，以便用户关闭随机播放时恢复原有队列）
+
-		// 将队列中剩余的项目随机排列，队列中更早的歌曲保持不变
+		// 1. 已播放部分：不变
 		let shuffledList = [...Array(currentIndex).keys()]
-		// 如果 shuffleCurrent 被指定为 false 或 undefined，那么将当前歌曲放在新列表的开头
+
+		// 2. 构建待打乱的列表
+		let shuffleSpace = [...Array(trackCount).keys()].filter(index =>
+			playQueueStore.shuffleCurrent ? index >= currentIndex : index > currentIndex
+		)
+
+		// 3. 随机打乱
+		shuffleSpace.sort(() => Math.random() - 0.5)
+
+		// 4. 如果当前曲目不参与打乱，插入回当前位置（即 currentIndex 处）
 		if (!playQueueStore.shuffleCurrent) {
 			shuffledList.push(currentIndex)
 		}
-		// 重置 shuffleCurrent 标签
-		playQueueStore.shuffleCurrent = undefined
 
-		// 将剩余的项目列出来
+		// 5. 拼接：已播放部分 + 当前（可选）+ 打乱后的剩余部分
-		let shuffleSpace = [...Array(trackCount).keys()]
-		shuffleSpace = shuffleSpace.filter((item) => item > currentIndex)
-		console.log(shuffleSpace)
-		// 随机打乱剩余的项目
-		shuffleSpace.sort(() => Math.random() - 0.5)
-
-		// 拼接新队列
 		shuffledList = shuffledList.concat(shuffleSpace)
 
-		// 应用新的随机播放列表
+		// 6. 应用 shuffleList
 		playQueueStore.shuffleList = shuffledList
+
+		// 清除 shuffleCurrent 状态
+		playQueueStore.shuffleCurrent = undefined
 	} else {
-		// 将当前播放的歌曲的原来的索引赋给 currentIndex
+		// 退出随机播放：恢复当前播放曲目的原索引
 		playQueueStore.currentIndex = playQueueStore.shuffleList[playQueueStore.currentIndex]
 	}
 

src/pages/AlbumDetail.vue

@@ -32,7 +32,7 @@ onMounted(async () => {
 
 function playTheAlbum(from: number = 0) {
 	if (playQueue.queueReplaceLock) {
-		if (!confirm("当前操作会将你的待播列表清空、放入这张专辑所有曲目，并从新待播清单的开头播放。继续吗？")) { return }
+		if (!confirm("当前操作会将你的播放队列清空、放入这张专辑所有曲目，并从头播放。继续吗？")) { return }
 		playQueue.queueReplaceLock = false
 	}
 
@@ -98,7 +98,8 @@ function playTheAlbum(from: number = 0) {
 				</div>
 			</div>
 			<div class="flex flex-col gap-2">
-				<TrackItem v-for="(track, index) in album?.songs" :key="track.cid" :album="album" :track="track" :index="index" :playfrom="playTheAlbum" />
+				<TrackItem v-for="(track, index) in album?.songs" :key="track.cid" :album="album" :track="track" :index="index"
+					:playfrom="playTheAlbum" />
 			</div>
 		</div>
 	</div>

src/pages/Library.vue

@@ -6,10 +6,47 @@ import ShuffleIcon from '../assets/icons/shuffle.vue'
 import { useFavourites } from '../stores/useFavourites'
 import { ref } from 'vue'
 import { artistsOrganize } from '../utils'
+import { usePlayQueueStore } from '../stores/usePlayQueueStore'
 
 const favourites = useFavourites()
+const playQueueStore = usePlayQueueStore()
 
 const currentList = ref<'favourites' | number>('favourites')
+
+function playTheList(list: 'favourites' | number) {
+	if (usePlayQueueStore().queueReplaceLock) {
+		if (!confirm("当前操作会将你的播放队列清空、放入这张歌单所有曲目，并从头播放。继续吗？")) { return }
+		usePlayQueueStore().queueReplaceLock = false
+	}
+	playQueueStore.list = []
+
+	if (list === 'favourites') {
+		if (favourites.favouritesCount === 0) return
+
+		let newPlayQueue = favourites.favourites.map(item => ({
+			song: item.song,
+			album: item.album
+		}))
+		playQueueStore.list = newPlayQueue.slice().reverse()
+		playQueueStore.currentIndex = 0
+		playQueueStore.isPlaying = true
+		playQueueStore.isBuffering = true
+	} else {
+		// Handle other lists if needed
+	}
+}
+
+function shuffle(list: 'favourites' | number) {
+	playTheList(list)
+	playQueueStore.shuffleCurrent = true
+	playQueueStore.playMode.shuffle = false
+	setTimeout(() => {
+		playQueueStore.playMode.shuffle = true
+		playQueueStore.isPlaying = true
+		playQueueStore.isBuffering = true
+	}, 100)
+}
+
 </script>
 
 <template>
@@ -66,14 +103,14 @@ const currentList = ref<'favourites' | number>('favourites')
 					<div class="flex gap-2">
 						<button
 							class="bg-sky-500/20 hover:bg-sky-500/30 active:bg-sky-600/30 active:shadow-inner backdrop-blur-3xl border border-[#ffffff39] rounded-full w-56 h-10 text-base text-white flex justify-center items-center gap-2 transition-all"
-							@click="">
+							@click="playTheList('favourites')">
 							<PlayIcon :size="4" />
 							<div>播放歌单</div>
 						</button>
 
 						<button
 							class="text-white w-10 h-10 bg-neutral-800/80 border border-[#ffffff39] backdrop-blur-3xl rounded-full flex justify-center items-center hover:bg-neutral-700/80 transition-all"
-							@click="">
+							@click="shuffle('favourites')">
 							<ShuffleIcon :size="4" />
 						</button>
 					</div>