perf: reduce DeviceRenderer update timeout after device tree data updated

src/pages/device-page.vue

@@ -4,6 +4,7 @@ import { useLineDevicesQuery, type LineDevices } from '@/composables/query';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { useStationStore } from '@/stores/station';
 import { ChevronBack } from '@vicons/ionicons5';
+import { watchDebounced } from '@vueuse/core';
 import { NEmpty, NIcon, NLayout, NLayoutContent, NLayoutSider, NPageHeader, NScrollbar, NSpin } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { onMounted, ref, watch } from 'vue';
@@ -39,8 +40,6 @@ watch(
       window.$loadingBar.start();
     } else {
       window.$loadingBar.finish();
-      // 当设备数据更新时，需要重新配置设备树
-      initFromRoute(lineDevices.value);
     }
   },
   {
@@ -48,6 +47,18 @@ watch(
   },
 );
 
+// 当设备数据更新时，需要重新配置设备树
+watchDebounced(
+  lineDevices,
+  (newLineDevices) => {
+    initFromRoute(newLineDevices);
+  },
+  {
+    deep: true,
+    debounce: 500,
+  },
+);
+
 watch(lineDevicesQueryError, (newLineDevicesQueryError) => {
   if (newLineDevicesQueryError) {
     window.$message.error(newLineDevicesQueryError.message);