feat: 在运动监控页面中添加播放模式逻辑，优化场景标题动态更新和路由配置

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"

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({