From 8eee570200f6ba3eec4b81bcf33022cb3a090908 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Tue, 27 May 2025 21:12:52 +1000
Subject: [PATCH] feat(PlayQueue): implement PlayQueueItem component for better
 queue management and UI

---
 src/assets/icons/downhyphen.vue  |  13 ++++
 src/assets/icons/uphypen.vue     |  13 ++++
 src/components/PlayQueueItem.vue | 121 +++++++++++++++++++++++++++++++
 src/pages/Playroom.vue           |  62 ++--------------
 4 files changed, 154 insertions(+), 55 deletions(-)
 create mode 100644 src/assets/icons/downhyphen.vue
 create mode 100644 src/assets/icons/uphypen.vue
 create mode 100644 src/components/PlayQueueItem.vue

diff --git a/src/assets/icons/downhyphen.vue b/src/assets/icons/downhyphen.vue
new file mode 100644
index 0000000..87c13bb
--- /dev/null
+++ b/src/assets/icons/downhyphen.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="M12 10.0858L7.20711 5.29291L5.79289 6.70712L12 12.9142L18.2071 6.70712L16.7929 5.29291L12 10.0858ZM18 17L6 17L6 15L18 15V17Z">
+		</path>
+	</svg>
+</template>
\ No newline at end of file
diff --git a/src/assets/icons/uphypen.vue b/src/assets/icons/uphypen.vue
new file mode 100644
index 0000000..1bd1aaf
--- /dev/null
+++ b/src/assets/icons/uphypen.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="M12 13.9142L16.7929 18.7071L18.2071 17.2929L12 11.0858L5.79289 17.2929L7.20711 18.7071L12 13.9142ZM6 7L18 7V9L6 9L6 7Z">
+		</path>
+	</svg>
+</template>
\ No newline at end of file
diff --git a/src/components/PlayQueueItem.vue b/src/components/PlayQueueItem.vue
new file mode 100644
index 0000000..bb89fca
--- /dev/null
+++ b/src/components/PlayQueueItem.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { usePlayQueueStore } from '../stores/usePlayQueueStore'
+import { artistsOrganize } from '../utils'
+
+import XIcon from '../assets/icons/x.vue'
+import UpHyphenIcon from '../assets/icons/uphypen.vue'
+import DownHyphenIcon from '../assets/icons/downhyphen.vue'
+
+import { ref } from 'vue'
+
+const props = defineProps<{
+	queueItem: QueueItem
+	isCurrent: boolean
+	index: number
+}>()
+
+const playQueueStore = usePlayQueueStore()
+
+const hover = ref(false)
+
+function removeItem() {
+	const queue = [...playQueueStore.list]
+
+	if (!playQueueStore.playMode.shuffle) {
+		// 非shuffle模式：直接操作原始列表
+		queue.splice(props.index, 1)
+		playQueueStore.list = queue
+
+		if (props.index < playQueueStore.currentIndex) {
+			playQueueStore.currentIndex--
+		} else if (props.index === playQueueStore.currentIndex) {
+			if (queue.length > 0) {
+				playQueueStore.currentIndex = Math.min(playQueueStore.currentIndex, queue.length - 1)
+			} else {
+				playQueueStore.currentIndex = 0
+			}
+		}
+	} else {
+		// Shuffle模式：需要同时维护两个列表
+		const originalIndex = playQueueStore.shuffleList[props.index]
+		const shuffleList = [...playQueueStore.shuffleList]
+
+		// 从原始列表中删除
+		queue.splice(originalIndex, 1)
+
+		// 从shuffle列表中删除当前项
+		shuffleList.splice(props.index, 1)
+
+		// 更新shuffle列表中所有大于被删除原始索引的值
+		for (let i = 0; i < shuffleList.length; i++) {
+			if (shuffleList[i] > originalIndex) {
+				shuffleList[i]--
+			}
+		}
+
+		playQueueStore.list = queue
+		playQueueStore.shuffleList = shuffleList
+
+		// 更新currentIndex
+		if (props.index < playQueueStore.currentIndex) {
+			playQueueStore.currentIndex--
+		} else if (props.index === playQueueStore.currentIndex) {
+			if (queue.length > 0) {
+				playQueueStore.currentIndex = Math.min(playQueueStore.currentIndex, queue.length - 1)
+			} else {
+				playQueueStore.currentIndex = 0
+			}
+		}
+	}
+}
+</script>
+
+<template>
+	<button class="p-4 w-full rounded-md hover:bg-white/5 first:mt-2 flex gap-2 items-center" @click="() => {
+		if (isCurrent) { return }
+		playQueueStore.currentIndex = index
+		playQueueStore.isPlaying = true
+	}" @mouseenter="hover = true" @mouseleave="hover = false">
+		<div class="flex gap-2 flex-auto w-0">
+			<div class="relative w-12 h-12 rounded-md shadow-xl overflow-hidden">
+				<img :src="queueItem.album?.coverUrl" />
+				<div class="w-full h-full absolute top-0 left-0 bg-neutral-900/75 flex justify-center items-center"
+					v-if="isCurrent">
+					<div style="height: 1rem;" class="flex justify-center items-center gap-[.125rem]">
+						<div class="bg-white w-[.125rem] rounded-full" v-for="(bar, index) in playQueueStore.visualizer"
+							:key="index" :style="{
+								height: `${Math.max(10, bar)}%`
+							}" />
+					</div>
+				</div>
+			</div>
+			<div class="flex flex-col text-left flex-auto w-0">
+				<div class="text-white text-base font-medium truncate">{{ queueItem.song.name }}</div>
+				<div class="text-white/75 text-sm truncate">
+					{{ artistsOrganize(queueItem.song.artists ?? []) }} —
+					{{ queueItem.album?.name ?? '未知专辑' }}
+				</div>
+			</div>
+		</div>
+
+		<div class="flex gap-1" v-if="hover">
+			<button
+				class="text-white/90 w-4 h-4 hover:scale-110 hover:text-white active:scale-95 active:text-white/85 transition-all"
+				@click.stop>
+				<UpHyphenIcon :size="4" />
+			</button>
+
+			<button
+				class="text-white/90 w-4 h-4 hover:scale-110 hover:text-white active:scale-95 active:text-white/85 transition-all"
+				@click.stop>
+				<DownHyphenIcon :size="4" />
+			</button>
+
+			<button
+				class="text-white/90 w-4 h-4 hover:scale-110 hover:text-white active:scale-95 active:text-white/85 transition-all"
+				@click.stop="removeItem">
+				<XIcon :size="4" />
+			</button>
+		</div>
+	</button>
+</template>
\ No newline at end of file
diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index 57c9e1c..debf6ba 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -45,6 +45,8 @@ const presentQueueListDialog = ref(false)
 const presentLyrics = ref(false)
 const showLyricsTooltip = ref(false)
 
+import PlayQueueItem from '../components/PlayQueueItem.vue'
+
 onMounted(async () => {
 	Draggable.create(progressBarThumb.value, {
 		type: 'x',
@@ -569,63 +571,13 @@ watch(() => playQueueStore.currentIndex, () => {
 			<hr class="border-[#ffffff39]" />
 
 			<div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-if="playQueueStore.playMode.shuffle">
-				<button v-for="(oriIndex, shuffledIndex) in playQueueStore.shuffleList"
-					class="p-4 w-full rounded-md hover:bg-white/5 first:mt-2" :key="oriIndex" @click="() => {
-						if (playQueueStore.currentIndex === shuffledIndex) { return }
-						playQueueStore.currentIndex = shuffledIndex
-						playQueueStore.isPlaying = true
-					}">
-					<div class="flex gap-2">
-						<div class="relative w-12 h-12 rounded-md shadow-xl overflow-hidden">
-							<img :src="playQueueStore.list[oriIndex].album?.coverUrl" />
-							<div class="w-full h-full absolute top-0 left-0 bg-neutral-900/75 flex justify-center items-center"
-								v-if="shuffledIndex === playQueueStore.currentIndex">
-								<div style="height: 1rem;" class="flex justify-center items-center gap-[.125rem]">
-									<div class="bg-white w-[.125rem] rounded-full" v-for="(bar, index) in playQueueStore.visualizer"
-										:key="index" :style="{
-											height: `${Math.max(10, bar)}%`
-										}" />
-								</div>
-							</div>
-						</div>
-						<div class="flex flex-col text-left flex-auto w-0">
-							<div class="text-white text-base font-medium truncate">{{ playQueueStore.list[oriIndex].song.name }}</div>
-							<div class="text-white/75 text-sm truncate">
-								{{ artistsOrganize(playQueueStore.list[oriIndex].song.artists ?? []) }} —
-								{{ playQueueStore.list[oriIndex].album?.name ?? '未知专辑' }}
-							</div>
-						</div>
-					</div>
-				</button>
+				<PlayQueueItem v-for="(oriIndex, shuffledIndex) in playQueueStore.shuffleList"
+					:queueItem="playQueueStore.list[oriIndex]" :isCurrent="playQueueStore.currentIndex === shuffledIndex"
+					:key="playQueueStore.list[oriIndex].song.cid" :index="shuffledIndex" />
 			</div>
 			<div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-else>
-				<button v-for="(track, index) in playQueueStore.list" class="p-4 w-full rounded-md hover:bg-white/5 first:mt-2"
-					:key="track.song.cid" @click="() => {
-						if (playQueueStore.currentIndex === index) { return }
-						playQueueStore.currentIndex = index
-						playQueueStore.isPlaying = true
-					}">
-					<div class="flex gap-2">
-						<div class="relative w-12 h-12 rounded-md shadow-xl overflow-hidden">
-							<img :src="track.album?.coverUrl" />
-							<div class="w-full h-full absolute top-0 left-0 bg-neutral-900/75 flex justify-center items-center"
-								v-if="index === playQueueStore.currentIndex">
-								<div style="height: 1rem;" class="flex justify-center items-center gap-[.125rem]">
-									<div class="bg-white w-[.125rem] rounded-full" v-for="(bar, index) in playQueueStore.visualizer"
-										:key="index" :style="{
-											height: `${Math.max(10, bar)}%`
-										}" />
-								</div>
-							</div>
-						</div>
-						<div class="flex flex-col text-left flex-auto w-0">
-							<div class="text-white text-base font-medium truncate">{{ track.song.name }}</div>
-							<div class="text-white/75 text-sm truncate">{{ artistsOrganize(track.song.artists ?? []) }} —
-								{{ track.album?.name ?? '未知专辑' }}
-							</div>
-						</div>
-					</div>
-				</button>
+				<PlayQueueItem :queueItem="track" :isCurrent="playQueueStore.currentIndex === index"
+					v-for="(track, index) in playQueueStore.list" :index="index" :key="track.song.cid" />
 			</div>
 		</div>
 	</dialog>