perf: optimize devie tree, remove list rendering

src/pages/device-page.vue

@@ -17,8 +17,8 @@ import {
   NRadio,
   NRadioGroup,
   NScrollbar,
-  NTabPane,
   NTabs,
+  NTab,
   NTag,
   NTree,
   type TagProps,
@@ -217,8 +217,8 @@ const searchFilter = (pattern: string, node: TreeOption): boolean => {
 };
 
 // ========== 设备树交互 ==========
-// 定位到选中的设备
+// 将多实例改为单实例，便于直接获取 Tree 实例
-const deviceTreeInsts = useTemplateRef<TreeInst[]>('deviceTreeInsts');
+const deviceTreeInst = useTemplateRef<TreeInst>('deviceTreeInst');
 const onClickLocateDeviceTree = () => {
   selectedTab.value = (selectedDevice.value?.deviceType ?? selectedTab.value) as DeviceTypeCode;
   selectedKeys.value = selectedDevice.value?.id ? [selectedDevice.value.id] : undefined;
@@ -238,7 +238,7 @@ const onClickLocateDeviceTree = () => {
 };
 const scrollDeviceTreeToSelectedDevice = (timeout: number = 500) => {
   setTimeout(() => {
-    const inst = deviceTreeInsts.value?.at(0);
+    const inst = deviceTreeInst.value;
     inst?.scrollTo({ key: selectedDevice.value?.id, behavior: 'smooth' });
   }, timeout);
 };
@@ -262,27 +262,31 @@ const scrollDeviceTreeToSelectedDevice = (timeout: number = 500) => {
           </NFlex>
         </div>
 
-        <div style="flex: 1; min-height: 0">
+        <!-- 左侧为设备类型Tab，右侧为设备树 -->
-          <NTabs v-model:value="selectedTab" animated type="line" placement="left" style="height: 100%">
+        <div style="flex: 1; min-height: 0; display: flex; overflow: hidden">
-            <NTabPane v-for="pane in deviceTabPanes" :key="pane.name" :name="pane.name" :tab="pane.tab">
+          <div style="flex: 0 0 auto; height: 100%">
-              <NTree
+            <NTabs v-model:value="selectedTab" animated type="line" placement="left" style="height: 100%">
-                v-model:selected-keys="selectedKeys"
+              <NTab v-for="pane in deviceTabPanes" :key="pane.name" :name="pane.name" :tab="pane.tab" />
-                v-model:expanded-keys="expandedKeys"
+            </NTabs>
-                :ref="'deviceTreeInsts'"
+          </div>
-                :data="lineDeviceTreeData[pane.name]"
+          <div style="flex: 1; min-width: 0">
-                :show-irrelevant-nodes="false"
+            <NTree
-                :pattern="searchPattern"
+              v-model:selected-keys="selectedKeys"
-                :filter="searchFilter"
+              v-model:expanded-keys="expandedKeys"
-                :override-default-node-click-behavior="override"
+              :ref="'deviceTreeInst'"
-                default-expand-all
+              :data="lineDeviceTreeData[selectedTab]"
-                block-line
+              :show-irrelevant-nodes="false"
-                block-node
+              :pattern="searchPattern"
-                show-line
+              :filter="searchFilter"
-                virtual-scroll
+              :override-default-node-click-behavior="override"
-                style="height: 100%"
+              default-expand-all
-              />
+              block-line
-            </NTabPane>
+              block-node
-          </NTabs>
+              show-line
+              virtual-scroll
+              style="height: 100%"
+            />
+          </div>
         </div>
       </div>
     </NLayoutSider>