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