style(vimp-tree): 优化线路树组件的标签页样式与文本展示

修改了alarm-tree.vue和camera-tree.vue两个组件，优化NTabs的样式配置，自定义标签尺寸与文本格式，调整内部布局细节

src/pages/vimp/components/alarm-tree.vue

@@ -127,8 +127,26 @@ 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">
+    <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
@@ -144,6 +162,7 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
             :pattern="searchPattern"
             :filter="searchFilter"
           />
+        </template>
       </NTabPane>
     </NTabs>
   </template>

src/pages/vimp/components/camera-tree.vue

@@ -130,8 +130,26 @@ 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">
+    <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
@@ -147,6 +165,7 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
             :pattern="searchPattern"
             :filter="searchFilter"
           />
+        </template>
       </NTabPane>
     </NTabs>
   </template>