feat: 扩展设备树功能

- 支持控制是否同步路由参数
- 支持配置允许的事件类型 (select/manage)
- 支持自定义设备节点前缀按钮文字
- 支持向外暴露设备选择逻辑
- 不再封装跳转设备逻辑，由外部实现
- 在车站模式下也支持选择设备

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

@@ -1,13 +1,13 @@
 import { deleteDeviceApi, exportDeviceApi, importDeviceApi, type ImportMsg, type NdmDevicePageQuery, type PageParams, type Station } from '@/apis';
+import { useStationDevicesMutation } from '@/composables';
 import { DEVICE_TYPE_NAMES, type DeviceType } from '@/enums';
 import { useDeviceStore, useStationStore } from '@/stores';
 import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
+import { isCancel } from 'axios';
 import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
 import { h, onBeforeUnmount } from 'vue';
-import { useStationDevicesMutation } from '../query';
-import { isCancel } from 'axios';
 
 export const useDeviceManagement = () => {
   const stationStore = useStationStore();
@@ -182,3 +182,5 @@ export const useDeviceManagement = () => {
     deleteDevice,
   };
 };
+
+export type UseDeviceManagementReturn = ReturnType<typeof useDeviceManagement>;

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

@@ -1,26 +1,28 @@
-import type { LineDevices, NdmDeviceResultVO } from '@/apis';
+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, watch } from 'vue';
+import { onMounted, ref, toValue, watch, type MaybeRefOrGetter } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-export const useDeviceSelection = () => {
+export const useDeviceSelection = (options?: { syncRoute?: MaybeRefOrGetter<boolean> }) => {
+  const { syncRoute } = options ?? {};
+
   const route = useRoute();
   const router = useRouter();
 
   const deviceStore = useDeviceStore();
   const { lineDevices } = storeToRefs(deviceStore);
 
-  const selectedStationCode = ref<string>();
+  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 string;
+      selectedStationCode.value = stationCode as Station['code'];
     }
     if (deviceType) {
       selectedDeviceType.value = deviceType as DeviceType;
@@ -40,7 +42,7 @@ export const useDeviceSelection = () => {
     }
   };
 
-  const selectDevice = (device: NdmDeviceResultVO, stationCode: string) => {
+  const selectDevice = (device: NdmDeviceResultVO, stationCode: Station['code']) => {
     selectedDevice.value = device;
     selectedStationCode.value = stationCode;
     const deviceType = tryGetDeviceType(device.deviceType);
@@ -49,20 +51,6 @@ export const useDeviceSelection = () => {
     }
   };
 
-  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,
-        fromPage: route.path,
-      },
-    });
-  };
-
   const syncToRoute = () => {
     const query = { ...route.query };
     // 当选中的设备发生变化时，删除fromPage参数
@@ -81,14 +69,20 @@ export const useDeviceSelection = () => {
     router.replace({ query });
   };
 
-  watch(selectedDevice, syncToRoute);
+  watch(selectedDevice, () => {
+    if (toValue(syncRoute)) {
+      syncToRoute();
+    }
+  });
 
   // lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
   // 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
   watchDebounced(
     lineDevices,
     (newLineDevices) => {
-      initFromRoute(newLineDevices);
+      if (toValue(syncRoute)) {
+        initFromRoute(newLineDevices);
+      }
     },
     {
       debounce: 500,
@@ -97,7 +91,9 @@ export const useDeviceSelection = () => {
   );
 
   onMounted(() => {
-    initFromRoute(lineDevices.value);
+    if (toValue(syncRoute)) {
+      initFromRoute(lineDevices.value);
+    }
   });
 
   return {
@@ -107,6 +103,7 @@ export const useDeviceSelection = () => {
 
     initFromRoute,
     selectDevice,
-    routeDevice,
   };
 };
+
+export type UseDeviceSelectionReturn = ReturnType<typeof useDeviceSelection>;

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

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