From b49d662e72fc5887509e417dd8209ab05d15c5bf Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Thu, 9 Oct 2025 18:07:43 +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=E5=9C=BA=E6=99=AF?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E9=80=BB=E8=BE=91=E5=92=8C=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E5=A4=84=E7=90=86=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/usePlaybackWebSocket.ts  | 11 ++++++++++-
 src/pages/movement-supervision.vue | 23 +++++++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/hooks/usePlaybackWebSocket.ts b/src/hooks/usePlaybackWebSocket.ts
index a22755f..6b8a4fb 100644
--- a/src/hooks/usePlaybackWebSocket.ts
+++ b/src/hooks/usePlaybackWebSocket.ts
@@ -13,6 +13,11 @@ type PlaybackMessage = {
   data: any;
 };
 
+type PlaybackSceneData = {
+  json: string;
+  totalDuration: number;
+};
+
 // Hook's return type definition
 export interface UsePlaybackWebSocketReturn {
   // Connection status
@@ -75,8 +80,9 @@ export function usePlaybackWebSocket(editorService: ShallowRef<EditorService | u
         }
 
         if (msg.type === 'SCENE') {
+          // For seamless scene switching, we only update the scene JSON.
+          // Time and playback state should continue uninterrupted.
           sceneJson.value = msg.data;
-          latestRobotData.clear();
         } else if (msg.type === 'AMR') {
           (msg.data as RobotRealtimeInfo[]).forEach(robot => {
             latestRobotData.set(robot.id, robot);
@@ -119,6 +125,9 @@ export function usePlaybackWebSocket(editorService: ShallowRef<EditorService | u
   };
 
   const play = () => {
+    // 双重保险：在播放前，强制发送一次SEEK指令，确保后端从正确的时间点开始。
+    // 这可以防止因后端状态不同步或时序问题导致的播放位置错乱。
+    sendCommand(`SEEK:${currentTime.value}`);
     sendCommand('PLAY');
     isPlaying.value = true;
   };
diff --git a/src/pages/movement-supervision.vue b/src/pages/movement-supervision.vue
index 63bcdc8..d8a79b3 100644
--- a/src/pages/movement-supervision.vue
+++ b/src/pages/movement-supervision.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { LockState } from '@meta2d/core';
 import { message } from 'ant-design-vue';
-import type { Dayjs } from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
 import { isNil } from 'lodash-es';
 import { computed, onMounted, onUnmounted, provide, ref, type ShallowRef, shallowRef, watch } from 'vue';
 import { useRoute } from 'vue-router';
@@ -97,6 +97,25 @@ const handleDateChange = (date: Dayjs) => {
   }
 };
 
+const handleSeek = (relativeTime: number) => {
+  if (selectedDate.value) {
+    const absoluteTimestamp = relativeTime + selectedDate.value.startOf('day').valueOf();
+    // 乐观更新，立即将前端时间状态同步到用户选择的时间点
+    playback.currentTime.value = absoluteTimestamp;
+    playback.seek(absoluteTimestamp);
+  }
+};
+
+// 监听后台推送的绝对时间戳，如果跨天，则自动更新UI上的日期选择器
+watch(playback.currentTime, (newTimestamp) => {
+  if (newTimestamp > 0 && selectedDate.value) {
+    const newDate = dayjs(newTimestamp);
+    if (!newDate.isSame(selectedDate.value, 'day')) {
+      selectedDate.value = newDate;
+    }
+  }
+});
+
 watch(playback.sceneJson, async (newJson) => {
   if (newJson) {
     await editor.value?.load(newJson);
@@ -662,7 +681,7 @@ const handleGlobalKeydown = (event: KeyboardEvent) => {
       :total-duration="playback.totalDuration.value"
       @play="playback.play"
       @pause="playback.pause"
-      @seek="(time) => playback.seek(time + (selectedDate?.startOf('day').valueOf() ?? 0))"
+      @seek="handleSeek"
     />
   </template>
 </template>