From 6fb243370d32f233f1e2a95e8a2bec9ebb9b4ee6 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Fri, 10 Oct 2025 10:22:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=E6=92=AD=E6=94=BE=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E5=99=A8=E4=B8=AD=E6=B7=BB=E5=8A=A0=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E7=AE=A1=E7=90=86=E5=92=8C=E5=AE=9A=E6=97=B6?=
 =?UTF-8?q?=E5=99=A8=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BC=98=E5=8C=96=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E5=90=8C=E6=AD=A5=E4=B8=8E=E7=94=A8=E6=88=B7=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PlaybackController.vue | 45 +++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/PlaybackController.vue b/src/components/PlaybackController.vue
index c0590ce..1a1a6c9 100644
--- a/src/components/PlaybackController.vue
+++ b/src/components/PlaybackController.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onUnmounted } from 'vue';
 
 import { useTimelineTicks } from '../hooks/useTimelineTicks';
 
@@ -21,6 +21,9 @@ const SLIDER_PADDING = 8; // Ant Design Slider has 8px padding on each side
 const HOUR_IN_MS = 3600 * 1000;
 
 // --- Internal State ---
+const localCurrentTime = ref(props.currentTime);
+let timer: number | undefined;
+
 const selectedHour = ref(Math.floor(props.currentTime / HOUR_IN_MS));
 const isUserInteracting = ref(false); // 标志位，防止 props 更新与用户操作冲突
 
@@ -32,14 +35,48 @@ const viewEndTime = computed(() => viewStartTime.value + HOUR_IN_MS);
 const { ticks } = useTimelineTicks(viewStartTime, viewEndTime);
 
 // --- Sync internal time with external prop ---
+watch(
+  () => props.isPlaying,
+  (playing) => {
+    if (playing) {
+      clearInterval(timer); // Clear any existing timer
+      timer = window.setInterval(() => {
+        localCurrentTime.value += 1000;
+      }, 1000);
+    } else {
+      clearInterval(timer);
+    }
+  },
+  { immediate: true },
+);
+
+onUnmounted(() => {
+  clearInterval(timer);
+});
+
 watch(
   () => props.currentTime,
+  (newValue) => {
+    // Only sync from prop if the difference is significant (e.g., > 1.5s)
+    // This prevents conflicts between the internal timer and external updates during playback.
+    const diff = Math.abs(newValue - localCurrentTime.value);
+    if (Number.isFinite(newValue) && newValue >= 0 && diff > 1500) {
+      localCurrentTime.value = newValue;
+    }
+  },
+);
+
+// --- Watch local time to sync UI components like hour selector ---
+watch(
+  localCurrentTime,
   (newValue) => {
     // 如果用户正在主动交互（如拖动、点击），则暂时不根据外部时间更新小时选择
     if (isUserInteracting.value) {
       return;
     }
 
+
+
     // 仅在有效范围内才同步小时；避免负数/异常 currentTime 破坏选择器
     if (Number.isFinite(newValue) && newValue >= 0 && props.totalDuration > 0) {
       const maxHour = Math.max(Math.ceil(props.totalDuration / HOUR_IN_MS) - 1, 0);
@@ -62,13 +99,13 @@ const formatTime = (ms: number): string => {
   return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
 };
 
-const currentTimeFormatted = computed(() => formatTime(props.currentTime));
+const currentTimeFormatted = computed(() => formatTime(localCurrentTime.value));
 const totalDurationFormatted = computed(() => formatTime(props.totalDuration));
 
 const playheadPosition = computed(() => {
   const viewDuration = viewEndTime.value - viewStartTime.value;
   if (viewDuration <= 0) return '0%';
-  const current = props.currentTime;
+  const current = localCurrentTime.value;
   const relativeTime = current - viewStartTime.value;
   const clamped = Math.min(Math.max(relativeTime, 0), viewDuration);
   return `${(clamped / viewDuration) * 100}%`;
@@ -105,6 +142,7 @@ const handleHourChange = (newHour: number) => {
   const newTime = newHour * HOUR_IN_MS;
   // 确保搜寻时间不超过总时长
   const clampedTime = Math.min(newTime, props.totalDuration);
+  localCurrentTime.value = clampedTime; // Immediately update local time
   emit('seek', clampedTime);
 };
 
@@ -128,6 +166,7 @@ const handleTimelineClick = (event: MouseEvent) => {
   const ratio = clampedX / effectiveWidth;
   const viewDuration = viewEndTime.value - viewStartTime.value;
   const targetTime = Math.floor(viewStartTime.value + ratio * viewDuration);
+  localCurrentTime.value = targetTime; // Immediately update local time
   emit('seek', targetTime);
   // 点击发生后，立即更新所选小时，保持左侧小时选择与视窗一致
   const clickedHour = Math.floor(targetTime / HOUR_IN_MS);