From fa445545931a4441e57a5e2acf877e0c25bb88cc Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Mon, 1 Jun 2026 20:14:44 +0800
Subject: [PATCH] =?UTF-8?q?style(vimp-tree):=20=E4=BC=98=E5=8C=96=E7=BA=BF?=
 =?UTF-8?q?=E8=B7=AF=E6=A0=91=E7=BB=84=E4=BB=B6=E7=9A=84=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=A1=B5=E6=A0=B7=E5=BC=8F=E4=B8=8E=E6=96=87=E6=9C=AC=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改了alarm-tree.vue和camera-tree.vue两个组件，优化NTabs的样式配置，自定义标签尺寸与文本格式，调整内部布局细节
---
 src/pages/vimp/components/alarm-tree.vue  | 53 +++++++++++++++--------
 src/pages/vimp/components/camera-tree.vue | 53 +++++++++++++++--------
 2 files changed, 72 insertions(+), 34 deletions(-)

diff --git a/src/pages/vimp/components/alarm-tree.vue b/src/pages/vimp/components/alarm-tree.vue
index 391542d..f961c20 100644
--- a/src/pages/vimp/components/alarm-tree.vue
+++ b/src/pages/vimp/components/alarm-tree.vue
@@ -127,23 +127,42 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
     />
   </template>
   <template v-if="lineTabPanes.length > 1">
-    <NTabs :type="'card'" :placement="'left'" style="height: 100%">
-      <NTabPane v-for="{ lineCode, lineName, alarmTree } in lineTabPanes" :key="lineCode" :name="lineName" :tab="lineName">
-        <NTree
-          block-line
-          block-node
-          show-line
-          virtual-scroll
-          style="height: 100%"
-          :render-label="renderNodeLabel"
-          :render-suffix="renderNodeSuffix"
-          :override-default-node-click-behavior="overrideNodeClickBehavior"
-          :default-expand-all="false"
-          :show-irrelevant-nodes="false"
-          :data="alarmTree"
-          :pattern="searchPattern"
-          :filter="searchFilter"
-        />
+    <NTabs
+      :type="'card'"
+      :placement="'left'"
+      style="height: 100%"
+      :tab-style="{
+        width: '64px',
+        height: '36px',
+      }"
+      :style="{
+        '--n-bar-color': '#0000',
+        '--n-pane-padding-top': '0',
+        '--n-tab-gap-vertical': '0',
+        // '--n-tab-padding-vertical': '14px 12px'
+      }"
+    >
+      <NTabPane v-for="{ lineCode, lineName, alarmTree } in lineTabPanes" :key="lineCode" :name="lineName">
+        <template #tab>
+          <span style="font-size: 12px">{{ lineName }}</span>
+        </template>
+        <template #default>
+          <NTree
+            block-line
+            block-node
+            show-line
+            virtual-scroll
+            style="height: 100%"
+            :render-label="renderNodeLabel"
+            :render-suffix="renderNodeSuffix"
+            :override-default-node-click-behavior="overrideNodeClickBehavior"
+            :default-expand-all="false"
+            :show-irrelevant-nodes="false"
+            :data="alarmTree"
+            :pattern="searchPattern"
+            :filter="searchFilter"
+          />
+        </template>
       </NTabPane>
     </NTabs>
   </template>
diff --git a/src/pages/vimp/components/camera-tree.vue b/src/pages/vimp/components/camera-tree.vue
index 97bc24e..0ecffc4 100644
--- a/src/pages/vimp/components/camera-tree.vue
+++ b/src/pages/vimp/components/camera-tree.vue
@@ -130,23 +130,42 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
     />
   </template>
   <template v-if="lineTabPanes.length > 1">
-    <NTabs :type="'card'" :placement="'left'" style="height: 100%">
-      <NTabPane v-for="{ lineCode, lineName, cameraTree } in lineTabPanes" :key="lineCode" :name="lineName" :tab="lineName">
-        <NTree
-          block-line
-          block-node
-          show-line
-          virtual-scroll
-          style="height: 100%"
-          :render-label="renderNodeLabel"
-          :render-suffix="renderNodeSuffix"
-          :override-default-node-click-behavior="overrideNodeClickBehavior"
-          :default-expand-all="false"
-          :show-irrelevant-nodes="false"
-          :data="cameraTree"
-          :pattern="searchPattern"
-          :filter="searchFilter"
-        />
+    <NTabs
+      :type="'card'"
+      :placement="'left'"
+      style="height: 100%"
+      :tab-style="{
+        width: '64px',
+        height: '36px',
+      }"
+      :style="{
+        '--n-bar-color': '#0000',
+        '--n-pane-padding-top': '0',
+        '--n-tab-gap-vertical': '0',
+        // '--n-tab-padding-vertical': '14px 12px'
+      }"
+    >
+      <NTabPane v-for="{ lineCode, lineName, cameraTree } in lineTabPanes" :key="lineCode" :name="lineName">
+        <template #tab>
+          <span style="font-size: 12px">{{ lineName }}</span>
+        </template>
+        <template #default>
+          <NTree
+            block-line
+            block-node
+            show-line
+            virtual-scroll
+            style="height: 100%"
+            :render-label="renderNodeLabel"
+            :render-suffix="renderNodeSuffix"
+            :override-default-node-click-behavior="overrideNodeClickBehavior"
+            :default-expand-all="false"
+            :show-irrelevant-nodes="false"
+            :data="cameraTree"
+            :pattern="searchPattern"
+            :filter="searchFilter"
+          />
+        </template>
       </NTabPane>
     </NTabs>
   </template>