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

src/composables/device/use-device-selection.ts

@@ -1,39 +1,33 @@
 import type { LineDevices, NdmDeviceResultVO, Station } from '@/apis';
 import { tryGetDeviceType, type DeviceType } from '@/enums';
-import { useDeviceStore } from '@/stores';
-import { watchDebounced } from '@vueuse/core';
-import { storeToRefs } from 'pinia';
-import { onMounted, ref, toValue, watch, type MaybeRefOrGetter } from 'vue';
+import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-export const useDeviceSelection = (options?: { syncRoute?: MaybeRefOrGetter<boolean> }) => {
-  const { syncRoute } = options ?? {};
-
+export const useDeviceSelection = () => {
   const route = useRoute();
   const router = useRouter();
 
-  const deviceStore = useDeviceStore();
-  const { lineDevices } = storeToRefs(deviceStore);
-
   const selectedStationCode = ref<Station['code']>();
   const selectedDeviceType = ref<DeviceType>();
   const selectedDevice = ref<NdmDeviceResultVO>();
 
-  const initFromRoute = (lineDevices: LineDevices) => {
-    const { stationCode, deviceType, deviceDbId } = route.query;
-    if (stationCode) {
-      selectedStationCode.value = stationCode as Station['code'];
+  // 从路由参数同步选中的车站、设备类型以及设备
+  const syncFromRoute = (lineDevices: LineDevices) => {
+    // console.log('sync from route');
+    const { stationCode: routeStationCode, deviceType: routeDeviceType, deviceDbId: routeDeviceDbId } = route.query;
+    if (routeStationCode) {
+      selectedStationCode.value = routeStationCode as Station['code'];
     }
-    if (deviceType) {
-      selectedDeviceType.value = deviceType as DeviceType;
+    if (routeDeviceType) {
+      selectedDeviceType.value = routeDeviceType as DeviceType;
     }
-    if (deviceDbId && selectedStationCode.value && selectedDeviceType.value) {
-      const selectedDeviceDbId = deviceDbId as string;
+    if (routeDeviceDbId && selectedStationCode.value && selectedDeviceType.value) {
+      const selectedDeviceDbId = routeDeviceDbId as string;
       const stationDevices = lineDevices[selectedStationCode.value];
       if (stationDevices) {
-        const devices = stationDevices[selectedDeviceType.value];
-        if (devices) {
-          const device = devices.find((device) => device.id === selectedDeviceDbId);
+        const classifiedDevices = stationDevices[selectedDeviceType.value];
+        if (classifiedDevices) {
+          const device = classifiedDevices.find((device) => device.id === selectedDeviceDbId);
           if (device) {
             selectedDevice.value = device;
           }
@@ -51,7 +45,9 @@ export const useDeviceSelection = (options?: { syncRoute?: MaybeRefOrGetter<bool
     }
   };
 
+  // 将选中的车站、设备类型以及设备ID同步到路由参数
   const syncToRoute = () => {
+    // console.log('sync to route');
     const query = { ...route.query };
     // 当选中的设备发生变化时，删除fromPage参数
     if (selectedDevice.value?.id && route.query.deviceDbId !== selectedDevice.value.id) {
@@ -69,39 +65,13 @@ export const useDeviceSelection = (options?: { syncRoute?: MaybeRefOrGetter<bool
     router.replace({ query });
   };
 
-  watch(selectedDevice, () => {
-    if (toValue(syncRoute)) {
-      syncToRoute();
-    }
-  });
-
-  // lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
-  // 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
-  watchDebounced(
-    lineDevices,
-    (newLineDevices) => {
-      if (toValue(syncRoute)) {
-        initFromRoute(newLineDevices);
-      }
-    },
-    {
-      debounce: 500,
-      deep: true,
-    },
-  );
-
-  onMounted(() => {
-    if (toValue(syncRoute)) {
-      initFromRoute(lineDevices.value);
-    }
-  });
-
   return {
     selectedStationCode,
     selectedDeviceType,
     selectedDevice,
 
-    initFromRoute,
+    syncFromRoute,
+    syncToRoute,
     selectDevice,
   };
 };

src/composables/device/use-device-tree.ts

@@ -1,11 +1,8 @@
-import type { MaybeRefOrGetter } from 'vue';
 import { useDeviceManagement } from './use-device-management';
 import { useDeviceSelection } from './use-device-selection';
 
-export const useDeviceTree = (options?: { syncRoute?: MaybeRefOrGetter<boolean> }) => {
-  const { syncRoute } = options ?? {};
-
-  const deviceSelection = useDeviceSelection({ syncRoute });
+export const useDeviceTree = () => {
+  const deviceSelection = useDeviceSelection();
   const deviceManagement = useDeviceManagement();
 
   return {