fix: 简化设备树选中状态与路由同步的逻辑，修复选中的设备类型被异常还原的问题

src/components/device/device-tree/device-tree.vue

@@ -4,7 +4,7 @@ import { useDeviceTree, usePermission, type UseDeviceTreeReturn } from '@/compos
 import { DEVICE_TYPE_NAMES, DEVICE_TYPE_LITERALS, tryGetDeviceType, type DeviceType, PERMISSION_TYPE_LITERALS } from '@/enums';
 import { isNvrCluster } from '@/helpers';
 import { useDeviceStore, usePermissionStore } from '@/stores';
-import { watchImmediate } from '@vueuse/core';
+import { watchDebounced, watchImmediate } from '@vueuse/core';
 import destr from 'destr';
 import { isFunction } from 'es-toolkit';
 import {
@@ -27,7 +27,7 @@ import {
   type TreeProps,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, h, nextTick, onBeforeUnmount, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';
+import { computed, h, nextTick, onBeforeUnmount, onMounted, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';
 
 const props = defineProps<{
   /**
@@ -67,15 +67,15 @@ const {
   selectedStationCode,
   selectedDeviceType,
   selectedDevice,
+  syncFromRoute,
+  syncToRoute,
   selectDevice,
   // 设备管理
   exportDevice,
   exportDeviceTemplate,
   importDevice,
   deleteDevice,
-} = useDeviceTree({
-  syncRoute: computed(() => !!syncRoute.value),
-});
+} = useDeviceTree();
 
 // 将 `selectDevice` 函数暴露给父组件
 emit('exposeSelectDeviceFn', selectDevice);
@@ -484,11 +484,38 @@ const onLocateDeviceTree = async () => {
 
   animated.value = true;
 };
-// 渲染全线设备树时，当选择的设备发生变化，则定位设备树
+
+// 当选择的设备发生变化时，定位设备树，并同步选中状态到路由参数
 // 暂时不考虑多次执行的问题，因为当选择的设备在设备树视口内时，不会发生滚动
-watch(selectedDevice, async () => {
+watch(selectedDevice, async (newDevice, oldDevice) => {
   if (!!station.value) return;
-  await onLocateDeviceTree();
+  if (newDevice?.id === oldDevice?.id) return;
+  // console.log('selectedDevice changed');
+  onLocateDeviceTree();
+  syncToRoute();
+});
+
+// 当全线设备发生变化时，从路由参数同步选中状态
+// 但lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
+// 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
+watchDebounced(
+  lineDevices,
+  (newLineDevices) => {
+    if (syncRoute.value) {
+      // console.log('lineDevices changed');
+      syncFromRoute(newLineDevices);
+    }
+  },
+  {
+    debounce: 500,
+    deep: true,
+  },
+);
+
+onMounted(() => {
+  if (syncRoute.value) {
+    syncFromRoute(lineDevices.value);
+  }
 });
 </script>