From de71db19922f9e5fc9625af25bd4cf5df7d57d56 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 25 May 2025 10:38:13 +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=E6=92=AD=E6=94=BE=E8=BF=9B=E5=BA=A6=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在播放器组件中添加了对播放进度的监听和同步功能，确保进度条与播放时间保持一致。同时，在播放队列存储中添加了`updatedCurrentTime`字段，用于更新播放时间。这些改动提升了用户体验，使播放进度控制更加直观和准确。
---
 src/components/Player.vue       |  6 ++++++
 src/pages/Playroom.vue          | 19 ++++++++++++++++---
 src/stores/usePlayQueueStore.ts |  3 ++-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 4acace0..3547b00 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -44,6 +44,12 @@ function setMetadata() {
 		playQueueStore.duration = player.value?.duration?? 0
 		playQueueStore.currentTime = player.value?.currentTime?? 0
 	}
+
+	watch(() => playQueueStore.updatedCurrentTime, (newValue) => {
+		if (!newValue) { return }
+		if (player.value) player.value.currentTime = newValue
+		playQueueStore.updatedCurrentTime = null
+	})
 }
 
 function playNext() {
diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index b53f83e..8d52d7a 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -5,7 +5,7 @@ import gsap from 'gsap'
 import { Draggable } from "gsap/Draggable"
 import { onMounted } from 'vue'
 import { useTemplateRef } from 'vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const playQueueStore = usePlayQueueStore()
 gsap.registerPlugin(Draggable)
@@ -18,7 +18,13 @@ const displayTimeLeft = ref(false)
 onMounted(() => {
 	Draggable.create(progressBarThumb.value, {
 		type: 'x',
-		bounds: progressBarContainer.value
+		bounds: progressBarContainer.value,
+		onDrag: function() {
+			const thumbPosition = this.x
+			const containerWidth = progressBarContainer.value?.clientWidth || 0
+			const newTime = (thumbPosition / containerWidth) * playQueueStore.duration
+			playQueueStore.updatedCurrentTime = newTime
+		}
 	})
 
 })
@@ -31,7 +37,14 @@ function timeFormatter(time: number) {
 	return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
 }
 
-
+// 监听播放进度，更新进度条
+watch(() => playQueueStore.currentTime, () => {
+	const progress = playQueueStore.currentTime / playQueueStore.duration
+	const containerWidth = progressBarContainer.value?.clientWidth || 0
+	const thumbWidth = progressBarThumb.value?.clientWidth || 0
+	const newPosition = (containerWidth - thumbWidth) * progress
+	gsap.to(progressBarThumb.value, { x: newPosition, duration: 0.1 })
+})
 </script>
 
 <template>
diff --git a/src/stores/usePlayQueueStore.ts b/src/stores/usePlayQueueStore.ts
index b13afac..400a8e3 100644
--- a/src/stores/usePlayQueueStore.ts
+++ b/src/stores/usePlayQueueStore.ts
@@ -9,6 +9,7 @@ export const usePlayQueueStore = defineStore('queue', () =>{
 	const isBuffering = ref<boolean>(false)
 	const currentTime = ref<number>(0)
 	const duration = ref<number>(0)
+	const updatedCurrentTime = ref<number | null>(null)
 
-  return { list, currentIndex, isPlaying, queueReplaceLock, isBuffering, currentTime, duration }
+  return { list, currentIndex, isPlaying, queueReplaceLock, isBuffering, currentTime, duration, updatedCurrentTime }
 })
\ No newline at end of file