|
|
|
@ -31,20 +31,20 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
|
|
|
|
|
<template> |
|
|
|
|
<div class="h-full w-full nc-container"> |
|
|
|
|
<div class="h-full w-full flex flex-col"> |
|
|
|
|
<div class="flex items-end !min-h-[var(--header-height)] !bg-primary nc-tab-bar"> |
|
|
|
|
<div class="flex items-end !min-h-[var(--header-height)] !bg-white-500 nc-tab-bar"> |
|
|
|
|
<div |
|
|
|
|
v-if="!isOpen" |
|
|
|
|
class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3" |
|
|
|
|
class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3 mb-1" |
|
|
|
|
> |
|
|
|
|
<MdiMenu |
|
|
|
|
v-e="['c:grid:toggle-navdraw']" |
|
|
|
|
class="cursor-pointer transform transition-transform duration-500 text-white" |
|
|
|
|
class="cursor-pointer transform transition-transform duration-500 text-gray-500/80 hover:text-gray-500" |
|
|
|
|
:class="{ 'rotate-180': !isOpen }" |
|
|
|
|
@click="toggle(!isOpen)" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit"> |
|
|
|
|
<a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs min-w-[500px]" type="editable-card" @edit="onEdit"> |
|
|
|
|
<a-tab-pane v-for="(tab, i) of tabs" :key="i"> |
|
|
|
|
<template #tab> |
|
|
|
|
<div class="flex items-center gap-2" data-testid="nc-tab-title"> |
|
|
|
@ -78,8 +78,8 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<LazyGeneralShareBaseButton /> |
|
|
|
|
<LazyGeneralFullScreen class="nc-fullscreen-icon" /> |
|
|
|
|
<LazyGeneralShareBaseButton class="mb-1px" /> |
|
|
|
|
<LazyGeneralFullScreen class="nc-fullscreen-icon mb-1px" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="w-full min-h-[300px] flex-auto"> |
|
|
|
@ -108,23 +108,39 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ant-tabs-nav-more { |
|
|
|
|
@apply text-white; |
|
|
|
|
@apply py-1.5; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
& > .ant-tabs-nav-wrap > .ant-tabs-nav-list { |
|
|
|
|
& > .ant-tabs-tab-active { |
|
|
|
|
@apply font-weight-medium; |
|
|
|
|
& > .ant-tabs-tab { |
|
|
|
|
@apply border-0 !text-sm py-2 font-weight-medium z-2; |
|
|
|
|
|
|
|
|
|
border-top-right-radius: 8px; |
|
|
|
|
border-top-left-radius: 8px; |
|
|
|
|
|
|
|
|
|
& + .ant-tabs-tab { |
|
|
|
|
@apply ml-1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
& > .ant-tabs-tab { |
|
|
|
|
@apply border-0; |
|
|
|
|
& > .ant-tabs-tab-active { |
|
|
|
|
@apply relative bg-white w-full h-full overflow-y-visible; |
|
|
|
|
|
|
|
|
|
border-top: 1px solid white; |
|
|
|
|
border-left: 1px solid white; |
|
|
|
|
border-right: 1px solid white; |
|
|
|
|
@apply !border-[var(--navbar-border)]; |
|
|
|
|
|
|
|
|
|
&:after { |
|
|
|
|
@apply absolute content-[''] left-0 -bottom-[1px] w-full h-[1px] bg-inherit z-100; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
& > .ant-tabs-tab:not(.ant-tabs-tab-active) { |
|
|
|
|
//@apply bg-gray-100 text-gray-500; |
|
|
|
|
@apply bg-white/10 text-white/90; |
|
|
|
|
@apply bg-gray-50 text-gray-500; |
|
|
|
|
|
|
|
|
|
.ant-tabs-tab-remove { |
|
|
|
|
@apply !text-white; |
|
|
|
|
@apply !text-default; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -141,7 +157,17 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
|
|
|
|
|
@apply !border-none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.nc-tab-bar { |
|
|
|
|
@apply border-gray-150 !bg-gray-50 relative z-1; |
|
|
|
|
|
|
|
|
|
:deep(.ant-tabs-tab-remove) { |
|
|
|
|
@apply flex mt-[2px]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
background: linear-gradient(0deg, var(--navbar-border) 1px, var(--navbar-bg) 1px) !important; |
|
|
|
|
|
|
|
|
|
:deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) { |
|
|
|
|
background: linear-gradient(0deg, var(--navbar-border) 1px, #f2f2f2 1px) !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|