perf: optimize query and device tree

src/pages/device-page.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useDeviceSelection } from '@/composables/device';
-import { useLineDevicesQuery } from '@/composables/query';
+import { useLineDevicesQuery, type LineDevices } from '@/composables/query';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { useStationStore } from '@/stores/station';
 import { ChevronBack } from '@vicons/ionicons5';
 import { NEmpty, NIcon, NLayout, NLayoutContent, NLayoutSider, NPageHeader, NScrollbar } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { onMounted, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import DeviceTree from '@/components/device-page/device-tree.vue';
@@ -19,6 +19,20 @@ const { stationList } = storeToRefs(stationStore);
 const lineDevicesStore = useLineDevicesStore();
 const { lineDevices } = storeToRefs(lineDevicesStore);
 
+const route = useRoute();
+const router = useRouter();
+
+const onClickBack = () => router.push({ path: `${route.query['from']}` });
+
+const { selectedStationCode, selectedDeviceType, selectedDevice, selectDevice, initFromRoute } = useDeviceSelection();
+
+const localLineDevices = ref<LineDevices>({});
+
+// 页面初始化
+onMounted(() => {
+  initFromRoute(lineDevices.value);
+});
+
 // 加载条控制
 watch(
   lineDevicesFetching,
@@ -27,35 +41,15 @@ watch(
       window.$loadingBar.start();
     } else {
       window.$loadingBar.finish();
+      // 当设备数据更新时，需要重新配置设备树及其属性
+      localLineDevices.value = lineDevices.value;
+      initFromRoute(lineDevices.value);
     }
   },
   {
     immediate: true,
   },
 );
-
-const route = useRoute();
-const router = useRouter();
-
-const onClickBack = () => router.push({ path: `${route.query['from']}` });
-
-const { selectedStationCode, selectedDeviceType, selectedDevice, selectDevice, initFromRoute } = useDeviceSelection();
-
-// 页面初始化
-onMounted(() => {
-  initFromRoute(lineDevices.value);
-});
-
-// 当设备数据更新时，需要重新配置设备树
-watch(
-  lineDevices,
-  () => {
-    initFromRoute(lineDevices.value);
-  },
-  {
-    deep: true,
-  },
-);
 </script>
 
 <template>
@@ -63,7 +57,7 @@ watch(
     <NLayoutSider bordered :width="600" :collapsed-width="0" show-trigger="bar">
       <DeviceTree
         :station-list="stationList"
-        :line-devices="lineDevices"
+        :line-devices="localLineDevices"
         :selected-station-code="selectedStationCode"
         :selected-device-type="selectedDeviceType"
         :selected-device="selectedDevice"