From de5802250851a9032b932a4fbb8ece61a13514de Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Thu, 9 Oct 2025 11:45:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=E8=BF=90=E5=8A=A8=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E9=A1=B5=E9=9D=A2=E4=B8=AD=E6=B7=BB=E5=8A=A0=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E6=A8=A1=E5=BC=8F=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=9C=BA=E6=99=AF=E6=A0=87=E9=A2=98=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=92=8C=E8=B7=AF=E7=94=B1=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/movement-supervision.vue | 37 ++++++++++++++++++------------
 src/services/router.ts             |  6 +++++
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/pages/movement-supervision.vue b/src/pages/movement-supervision.vue
index 1a29daa..09c1135 100644
--- a/src/pages/movement-supervision.vue
+++ b/src/pages/movement-supervision.vue
@@ -35,20 +35,30 @@ const props = defineProps<Props>();
 //#region 响应式状态定义
 // 获取路由信息以判断当前模式
 const route = useRoute();
+
+//#region Playback Mode
+const mode = computed(() => (route.path.includes('/playback') ? 'playback' : 'live'));
+const isPlaybackMode = computed(() => mode.value === 'playback');
 const isMonitorMode = computed(() => route.path.includes('/monitor'));
 
 // 场景标题
 const title = ref<string>('');
 
+const modeTitle = computed(() => {
+  if (isPlaybackMode.value) {
+    return '场景回放';
+  }
+  return isMonitorMode.value ? '场景监控' : '场景仿真';
+});
+
 // 左侧侧边栏折叠状态
 const leftCollapsed = ref<boolean>(false);
 
 // 监听标题变化，动态更新页面标题
 watch(
-  isMonitorMode,
-  (isMonitor) => {
-    const mode = isMonitor ? '场景监控' : '场景仿真';
-    document.title = mode;
+  modeTitle,
+  (newTitle) => {
+    document.title = newTitle;
   },
   { immediate: true },
 );
@@ -60,10 +70,6 @@ const storageLocationService = shallowRef<StorageLocationService>();
 const client = shallowRef<WebSocket>();
 // 左侧边栏元素引用（用于 Ctrl/Cmd+F 聚焦搜索框）
 const leftSiderEl = shallowRef<HTMLElement>();
-
-//#region Playback Mode
-const mode = ref<'live' | 'playback'>('live');
-const isPlaybackMode = computed(() => mode.value === 'playback');
 const isPlaybackControllerVisible = ref<boolean>(true);
 const selectedDate = ref<Dayjs | null>(null);
 
@@ -327,7 +333,13 @@ onMounted(() => {
 onMounted(async () => {
   await readScene();
   await editor.value?.initRobots();
-  await monitorScene();
+
+  if (mode.value === 'live') {
+    await monitorScene();
+  } else {
+    playback.connect(props.sid);
+  }
+
   storageLocationService.value?.startMonitoring({ interval: 1 });
   // 自动保存和恢复视图状态
   await handleAutoSaveAndRestoreViewState();
@@ -544,17 +556,12 @@ const handleGlobalKeydown = (event: KeyboardEvent) => {
   <a-layout class="full">
     <a-layout-header class="p-16" style="height: 64px">
       <a-flex justify="space-between" align="center">
-        <a-typography-text class="title">{{ title }}--{{ isMonitorMode ? '场景监控' : '场景仿真' }}</a-typography-text>
+        <a-typography-text class="title">{{ title }}--{{ modeTitle }}</a-typography-text>
         <a-space align="center">
           <a-button @click="backToCards"> 返回 </a-button>
           <a-button type="primary" :loading="isSaving" @click="handleSaveViewState"> 保存比例 </a-button>
           <a-divider type="vertical" />
 
-          <a-radio-group v-model:value="mode" button-style="solid">
-            <a-radio-button value="live">实时监控</a-radio-button>
-            <a-radio-button value="playback">历史回放</a-radio-button>
-          </a-radio-group>
-
           <a-date-picker
             v-if="isPlaybackMode"
             :value="selectedDate"
diff --git a/src/services/router.ts b/src/services/router.ts
index 7cf9b10..aa71cfe 100644
--- a/src/services/router.ts
+++ b/src/services/router.ts
@@ -33,6 +33,12 @@ export const ROUTES = Object.freeze<RouteRecordRaw[]>([
     props: true,
     component: () => import('@/movement-supervision.vue'),
   },
+  {
+    name: '场景回放',
+    path: '/movement-supervision/:sid/playback/:id?',
+    props: true,
+    component: () => import('@/movement-supervision.vue'),
+  },
 ]);
 
 export const router = createRouter({