feat: 设备树添加管理功能

- 新增设备导入、导出、删除功能及相关API
- 封装设备管理逻辑，拆分设备选择与设备管理逻辑
- 添加右键菜单支持设备管理操作

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

@@ -0,0 +1,112 @@
+import type { LineDevices, NdmDeviceResultVO } from '@/apis';
+import { tryGetDeviceType, type DeviceType } from '@/enums';
+import { useDeviceStore } from '@/stores';
+import { watchDebounced } from '@vueuse/core';
+import { storeToRefs } from 'pinia';
+import { onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+export const useDeviceSelection = () => {
+  const route = useRoute();
+  const router = useRouter();
+
+  const deviceStore = useDeviceStore();
+  const { lineDevices } = storeToRefs(deviceStore);
+
+  const selectedStationCode = ref<string>();
+  const selectedDeviceType = ref<DeviceType>();
+  const selectedDevice = ref<NdmDeviceResultVO>();
+
+  const initFromRoute = (lineDevices: LineDevices) => {
+    const { stationCode, deviceType, deviceDbId } = route.query;
+    if (stationCode) {
+      selectedStationCode.value = stationCode as string;
+    }
+    if (deviceType) {
+      selectedDeviceType.value = deviceType as DeviceType;
+    }
+    if (deviceDbId && selectedStationCode.value && selectedDeviceType.value) {
+      const selectedDeviceDbId = deviceDbId as string;
+      const stationDevices = lineDevices[selectedStationCode.value];
+      if (stationDevices) {
+        const devices = stationDevices[selectedDeviceType.value];
+        if (devices) {
+          const device = devices.find((device) => device.id === selectedDeviceDbId);
+          if (device) {
+            selectedDevice.value = device;
+          }
+        }
+      }
+    }
+  };
+
+  const selectDevice = (device: NdmDeviceResultVO, stationCode: string) => {
+    selectedDevice.value = device;
+    selectedStationCode.value = stationCode;
+    const deviceType = tryGetDeviceType(device.deviceType);
+    if (deviceType) {
+      selectedDeviceType.value = deviceType;
+    }
+  };
+
+  const routeDevice = (device: NdmDeviceResultVO, stationCode: string, to: { path: string }) => {
+    const deviceDbId = device.id;
+    const deviceType = tryGetDeviceType(device.deviceType);
+    router.push({
+      path: to.path,
+      query: {
+        stationCode,
+        deviceType,
+        deviceDbId,
+        from: route.path,
+      },
+    });
+  };
+
+  const syncToRoute = () => {
+    const query = { ...route.query };
+    // 当选中的设备发生变化时，删除from参数
+    if (selectedDevice.value?.id && route.query.deviceDbId !== selectedDevice.value.id) {
+      delete query['from'];
+    }
+    if (selectedStationCode.value) {
+      query['stationCode'] = selectedStationCode.value;
+    }
+    if (selectedDeviceType.value) {
+      query['deviceType'] = selectedDeviceType.value;
+    }
+    if (selectedDevice.value?.id) {
+      query['deviceDbId'] = selectedDevice.value.id;
+    }
+    router.replace({ query });
+  };
+
+  watch(selectedDevice, syncToRoute);
+
+  // lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
+  // 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
+  watchDebounced(
+    lineDevices,
+    (newLineDevices) => {
+      initFromRoute(newLineDevices);
+    },
+    {
+      debounce: 500,
+      deep: true,
+    },
+  );
+
+  onMounted(() => {
+    initFromRoute(lineDevices.value);
+  });
+
+  return {
+    selectedStationCode,
+    selectedDeviceType,
+    selectedDevice,
+
+    initFromRoute,
+    selectDevice,
+    routeDevice,
+  };
+};