feat: migrate id and improve interaction

- use DB id of device to mark tree node key
- dblclick offlien device node to jump to DevicePage
- dblclick device node to view device detail

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NInput, NModal, NTree } from 'naive-ui';
+import { NButton, NInput, NModal, NTree } from 'naive-ui';
 import { computed, ref, toRefs, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import type { TreeOption, TreeOverrideNodeClickBehavior } from 'naive-ui';
@@ -17,6 +17,7 @@ import type {
 import { useQueryControlStore } from '@/stores/query-control';
 import { DeviceType, DeviceTypeName } from '@/enums/device-type';
 import type { Station } from '@/apis/domains';
+import { h } from 'vue';
 
 interface Props {
   station: Station;
@@ -51,8 +52,8 @@ watch(show, (newValue) => {
 
 const searchPattern = ref('');
 const searchFilter: (pattern: string, node: TreeOption) => boolean = (pattern, node) => {
-  const device = node['device'] as NdmDeviceVO;
-  const { name, ipAddress } = device;
+  const device = node['device'] as NdmDeviceVO | undefined;
+  const { name, ipAddress } = device ?? {};
   return (name ?? '').includes(pattern) || (ipAddress ?? '').includes(pattern);
 };
 
@@ -75,12 +76,38 @@ const treeData = computed<TreeOption[]>(() => {
         label: `${device.name}`,
         key: device.id,
         suffix: () => `${device.ipAddress ?? '未知IP地址'}`,
+        prefix: () => {
+          return h(
+            NButton,
+            {
+              text: true,
+              size: 'tiny',
+              type: 'info',
+              onClick: () => {
+                const queryControlStore = useQueryControlStore();
+                queryControlStore.enablePolling();
+                const dev = device as NdmDeviceVO;
+                router.push({
+                  path: '/device',
+                  query: {
+                    stationCode: station.value.code,
+                    deviceType: dev.deviceType,
+                    deviceDBId: dev.id,
+                    from: route.path,
+                  },
+                });
+              },
+            },
+            { default: () => h('span', '查看') },
+          );
+        },
         device,
       })),
     };
   });
 });
 
+// 双击设备节点，跳转到`实时设备状`态页面
 const nodeProps = ({ option }: { option: TreeOption }) => {
   return {
     ondblclick: () => {
@@ -93,7 +120,7 @@ const nodeProps = ({ option }: { option: TreeOption }) => {
           query: {
             stationCode: station.value.code,
             deviceType: device.deviceType,
-            deviceId: device.deviceId,
+            deviceDBId: device.id,
             from: route.path,
           },
         });
@@ -103,7 +130,7 @@ const nodeProps = ({ option }: { option: TreeOption }) => {
 };
 
 const override: TreeOverrideNodeClickBehavior = ({ option }) => {
-  if (option.children) {
+  if (!option['device']) {
     return 'toggleExpand';
   }
   return 'default';