feat: 扩展设备树功能

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

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { initStationDevices, type NdmDeviceResultVO, type NdmNvrResultVO, type Station } from '@/apis';
-import { useDeviceTree } from '@/composables';
+import { useDeviceTree, type UseDeviceTreeReturn } from '@/composables';
 import { DEVICE_TYPE_NAMES, DEVICE_TYPE_LITERALS, tryGetDeviceType, type DeviceType } from '@/enums';
 import { isNvrCluster } from '@/helpers';
 import { useDeviceStore, useStationStore } from '@/stores';
@@ -30,14 +30,33 @@ import { storeToRefs } from 'pinia';
 import { computed, h, nextTick, onBeforeUnmount, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';
 
 const props = defineProps<{
-  station?: Station; // 支持渲染指定车站的设备树
+  /**
+   * 支持渲染指定车站的设备树
+   */
+  station?: Station;
+  /**
+   * 允许的事件类型
+   *
+   * - `select`：允许选择设备
+   * - `manage`：允许右键菜单管理设备
+   */
+  events?: ('select' | 'manage')[];
+  /**
+   * 是否同步路由参数
+   */
+  syncRoute?: boolean;
+  /**
+   * 设备节点的前缀按钮文字
+   */
+  devicePrefixLabel?: string;
 }>();
 
 const emit = defineEmits<{
-  selectDevice: [device: NdmDeviceResultVO, stationCode: Station['code']];
+  afterSelectDevice: [device: NdmDeviceResultVO, stationCode: Station['code']];
+  exposeSelectDeviceFn: [selectDeviceFn: UseDeviceTreeReturn['selectDevice']];
 }>();
 
-const { station } = toRefs(props);
+const { station, events, syncRoute, devicePrefixLabel } = toRefs(props);
 
 const themeVars = useThemeVars();
 
@@ -47,22 +66,25 @@ const {
   selectedDeviceType,
   selectedDevice,
   selectDevice,
-  routeDevice,
   // 设备管理
   exportDevice,
   exportDeviceTemplate,
   importDevice,
   deleteDevice,
-} = useDeviceTree();
+} = useDeviceTree({
+  syncRoute: computed(() => !!syncRoute.value),
+});
+
+// 将 `selectDevice` 函数暴露给父组件
+emit('exposeSelectDeviceFn', selectDevice);
 
 const onSelectDevice = (device: NdmDeviceResultVO, stationCode: Station['code']) => {
-  selectDevice(device, stationCode);
+  // 仅当事件列表包含 `select` 时才触发选择事件
-  emit('selectDevice', device, stationCode);
+  if (!events.value) return;
-};
+  if (!events.value.includes('select')) return;
 
-const onRouteDevice = (device: NdmDeviceResultVO, stationCode: Station['code']) => {
+  selectDevice(device, stationCode);
-  routeDevice(device, stationCode, { path: '/device' });
+  emit('afterSelectDevice', device, stationCode);
-  emit('selectDevice', device, stationCode);
 };
 
 const stationStore = useStationStore();
@@ -187,20 +209,20 @@ const nodeProps: TreeProps['nodeProps'] = ({ option }) => {
     onDblclick: (payload) => {
       if (option['device']) {
         payload.stopPropagation();
+
         const device = option['device'] as NdmDeviceResultVO;
         const stationCode = option['stationCode'] as Station['code'];
-        // 区分是否需要跳转路由
+
-        // 当 props.station 存在时，说明当前是单独渲染车站的设备树，需要跳转路由到设备诊断页面
+        onSelectDevice(device, stationCode);
-        if (!station.value) {
-          onSelectDevice(device, stationCode);
-        } else {
-          onRouteDevice(device, stationCode);
-        }
       }
     },
     onContextmenu: (payload) => {
       payload.stopPropagation();
       payload.preventDefault();
+
+      // 仅当事件列表包含 `manage` 时才显示右键菜单
+      if (!events.value?.includes('manage')) return;
+
       const { clientX, clientY } = payload;
       const stationCode = option['stationCode'] as Station['code'];
       const deviceType = option['deviceType'] as DeviceType | undefined;
@@ -231,6 +253,7 @@ const renderIcmpStatistics = (onlineCount: number, offlineCount: number, count:
 };
 const renderDeviceNodePrefix = (device: NdmDeviceResultVO, stationCode: Station['code']) => {
   const renderViewDeviceButton = (device: NdmDeviceResultVO, stationCode: string) => {
+    if (!devicePrefixLabel.value) return null;
     return h(
       NButton,
       {
@@ -242,17 +265,11 @@ const renderDeviceNodePrefix = (device: NdmDeviceResultVO, stationCode: Station[
         } as CSSProperties,
         onClick: (e: MouseEvent) => {
           e.stopPropagation();
-          // 选择设备
+
-          // 区分是否需要跳转路由
+          onSelectDevice(device, stationCode);
-          // 当 props.station 存在时，说明当前是单独渲染车站的设备树，需要跳转路由到设备诊断页面
-          if (!station.value) {
-            onSelectDevice(device, stationCode);
-          } else {
-            onRouteDevice(device, stationCode);
-          }
         },
       },
-      () => '查看',
+      () => devicePrefixLabel.value,
     );
   };
   const renderDeviceStatusTag = (device: NdmDeviceResultVO) => {
@@ -529,6 +546,7 @@ watch(selectedDevice, async () => {
           virtual-scroll
           :data="stationDeviceTreeData"
           :animated="animated"
+          :selected-keys="selectedKeys"
           :show-irrelevant-nodes="false"
           :pattern="searchPattern"
           :filter="searchFilter"

src/components/station/device-detail-modal/device-detail-modal.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { Station } from '@/apis';
-import { DeviceTree } from '@/components';
+import { DeviceTree, type DeviceTreeProps } from '@/components';
+import { tryGetDeviceType } from '@/enums';
 import { NModal } from 'naive-ui';
 import { toRefs } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 const props = defineProps<{
   station?: Station;
@@ -10,13 +12,30 @@ const props = defineProps<{
 
 const show = defineModel<boolean>('show', { default: false });
 
+const route = useRoute();
+const router = useRouter();
+
 const { station } = toRefs(props);
+
+const onAfterSelectDevice: DeviceTreeProps['onAfterSelectDevice'] = (device, stationCode) => {
+  const deviceDbId = device.id;
+  const deviceType = tryGetDeviceType(device.deviceType);
+  router.push({
+    path: '/device',
+    query: {
+      stationCode,
+      deviceType,
+      deviceDbId,
+      fromPage: route.path,
+    },
+  });
+};
 </script>
 
 <template>
   <NModal v-model:show="show" preset="card" style="width: 600px; height: 600px" :title="`${station?.name} - 设备详情`" :content-style="{ height: '100%', overflow: 'hidden' }">
     <template #default>
-      <DeviceTree :station="station" />
+      <DeviceTree :station="station" :events="['select', 'manage']" :device-prefix-label="'查看'" @after-select-device="onAfterSelectDevice" />
     </template>
   </NModal>
 </template>

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 = () => {
+export const useDeviceTree = (options?: { syncRoute?: MaybeRefOrGetter<boolean> }) => {
-  const deviceSelection = useDeviceSelection();
+  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>;

src/pages/device-page.vue

@@ -12,7 +12,7 @@ const { stations } = storeToRefs(stationStore);
 const selectedStation = ref<Station>();
 const selectedDevice = ref<NdmDeviceResultVO>();
 
-const onSelectDevice: DeviceTreeProps['onSelectDevice'] = (device, stationCode) => {
+const onAfterSelectDevice: DeviceTreeProps['onAfterSelectDevice'] = (device, stationCode) => {
   selectedDevice.value = device;
   selectedStation.value = stations.value.find((station) => station.code === stationCode);
 };
@@ -21,7 +21,7 @@ const onSelectDevice: DeviceTreeProps['onSelectDevice'] = (device, stationCode)
 <template>
   <NLayout has-sider style="height: 100%">
     <NLayoutSider bordered :width="600" :collapsed-width="0" show-trigger="bar">
-      <DeviceTree @select-device="onSelectDevice" />
+      <DeviceTree :events="['select', 'manage']" :sync-route="true" :device-prefix-label="'查看'" @after-select-device="onAfterSelectDevice" />
     </NLayoutSider>
     <NLayoutContent :content-style="{ padding: '8px 8px 8px 24px' }">
       <template v-if="selectedStation && selectedDevice">