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

修改了alarm-tree.vue和camera-tree.vue两个组件,优化NTabs的样式配置,自定义标签尺寸与文本格式,调整内部布局细节
This commit is contained in:
yangsy
2026-06-01 20:14:44 +08:00
parent cbeddebbc0
commit fa44554593
2 changed files with 72 additions and 34 deletions
+36 -17
View File
@@ -127,23 +127,42 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
/> />
</template> </template>
<template v-if="lineTabPanes.length > 1"> <template v-if="lineTabPanes.length > 1">
<NTabs :type="'card'" :placement="'left'" style="height: 100%"> <NTabs
<NTabPane v-for="{ lineCode, lineName, alarmTree } in lineTabPanes" :key="lineCode" :name="lineName" :tab="lineName"> :type="'card'"
<NTree :placement="'left'"
block-line style="height: 100%"
block-node :tab-style="{
show-line width: '64px',
virtual-scroll height: '36px',
style="height: 100%" }"
:render-label="renderNodeLabel" :style="{
:render-suffix="renderNodeSuffix" '--n-bar-color': '#0000',
:override-default-node-click-behavior="overrideNodeClickBehavior" '--n-pane-padding-top': '0',
:default-expand-all="false" '--n-tab-gap-vertical': '0',
:show-irrelevant-nodes="false" // '--n-tab-padding-vertical': '14px 12px'
:data="alarmTree" }"
:pattern="searchPattern" >
:filter="searchFilter" <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> </NTabPane>
</NTabs> </NTabs>
</template> </template>
+36 -17
View File
@@ -130,23 +130,42 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
/> />
</template> </template>
<template v-if="lineTabPanes.length > 1"> <template v-if="lineTabPanes.length > 1">
<NTabs :type="'card'" :placement="'left'" style="height: 100%"> <NTabs
<NTabPane v-for="{ lineCode, lineName, cameraTree } in lineTabPanes" :key="lineCode" :name="lineName" :tab="lineName"> :type="'card'"
<NTree :placement="'left'"
block-line style="height: 100%"
block-node :tab-style="{
show-line width: '64px',
virtual-scroll height: '36px',
style="height: 100%" }"
:render-label="renderNodeLabel" :style="{
:render-suffix="renderNodeSuffix" '--n-bar-color': '#0000',
:override-default-node-click-behavior="overrideNodeClickBehavior" '--n-pane-padding-top': '0',
:default-expand-all="false" '--n-tab-gap-vertical': '0',
:show-irrelevant-nodes="false" // '--n-tab-padding-vertical': '14px 12px'
:data="cameraTree" }"
:pattern="searchPattern" >
:filter="searchFilter" <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> </NTabPane>
</NTabs> </NTabs>
</template> </template>