|
|
|
@ -46,7 +46,7 @@ const icon = (tab: TabItem) => {
|
|
|
|
|
<div class="h-full w-full nc-container pt-[9px]"> |
|
|
|
|
<div class="h-full w-full flex flex-col"> |
|
|
|
|
<div> |
|
|
|
|
<a-tabs v-model:activeKey="activeTabIndex" type="editable-card" @edit="closeTab"> |
|
|
|
|
<a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab"> |
|
|
|
|
<a-tab-pane v-for="(tab, i) in tabs" :key="i"> |
|
|
|
|
<template #tab> |
|
|
|
|
<div class="flex align-center gap-2"> |
|
|
|
@ -154,14 +154,29 @@ const icon = (tab: TabItem) => {
|
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.nc-container { |
|
|
|
|
height: calc(100% - var(--header-height)); |
|
|
|
|
flex: 1 1 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.ant-tabs-nav) { |
|
|
|
|
@apply !mb-0; |
|
|
|
|
:deep(.nc-root-tabs) { |
|
|
|
|
& > .ant-tabs-nav { |
|
|
|
|
@apply !mb-0; |
|
|
|
|
|
|
|
|
|
& > .ant-tabs-nav-wrap > .ant-tabs-nav-list { |
|
|
|
|
& > .ant-tabs-nav-add { |
|
|
|
|
@apply !hidden; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
& > .ant-tabs-tab-active { |
|
|
|
|
@apply font-weight-medium; |
|
|
|
|
} |
|
|
|
|
& > .ant-tabs-tab:not(.ant-tabs-tab-active) { |
|
|
|
|
@apply bg-gray-100; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.ant-menu-item-selected) { |
|
|
|
@ -173,16 +188,4 @@ const icon = (tab: TabItem) => {
|
|
|
|
|
:deep(.ant-menu-submenu::after) { |
|
|
|
|
@apply !border-none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.ant-tabs-nav-add) { |
|
|
|
|
@apply !hidden; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.ant-tabs-tab-active) { |
|
|
|
|
@apply font-weight-medium; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) { |
|
|
|
|
@apply bg-gray-100; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|