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,14 +262,19 @@ const scrollDeviceTreeToSelectedDevice = (timeout: number = 500) => {
           </NFlex>
         </div>
 
-        <div style="flex: 1; min-height: 0">
+        <!-- 左侧为设备类型Tab，右侧为设备树 -->
+        <div style="flex: 1; min-height: 0; display: flex; overflow: hidden">
+          <div style="flex: 0 0 auto; height: 100%">
             <NTabs v-model:value="selectedTab" animated type="line" placement="left" style="height: 100%">
-            <NTabPane v-for="pane in deviceTabPanes" :key="pane.name" :name="pane.name" :tab="pane.tab">
+              <NTab v-for="pane in deviceTabPanes" :key="pane.name" :name="pane.name" :tab="pane.tab" />
+            </NTabs>
+          </div>
+          <div style="flex: 1; min-width: 0">
             <NTree
               v-model:selected-keys="selectedKeys"
               v-model:expanded-keys="expandedKeys"
-                :ref="'deviceTreeInsts'"
+              :ref="'deviceTreeInst'"
-                :data="lineDeviceTreeData[pane.name]"
+              :data="lineDeviceTreeData[selectedTab]"
               :show-irrelevant-nodes="false"
               :pattern="searchPattern"
               :filter="searchFilter"
@@ -281,8 +286,7 @@ const scrollDeviceTreeToSelectedDevice = (timeout: number = 500) => {
               virtual-scroll
               style="height: 100%"
             />
-            </NTabPane>
+          </div>
-          </NTabs>
         </div>
       </div>
     </NLayoutSider>