github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-26 16:46:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: optimize interface color matching

Browse Source
This commit is contained in:
vince
2024-07-15 23:22:00 +08:00
parent b12266bb90
commit caf1fc4375
27 changed files with 270 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@@ -94,10 +94,7 @@ function handleUnpinTab(tab: TabConfig) {
</script>
<template>
<div
:style="style"
class="tabs-chrome bg-accent size-full flex-1 overflow-hidden pt-1"
>
<div :style="style" class="tabs-chrome size-full flex-1 overflow-hidden pt-1">
<!-- footer -> 4px -->
<div
ref="contentRef"
@@ -130,7 +127,7 @@ function handleUnpinTab(tab: TabConfig) {
<!-- divider -->
<div
v-if="i !== 0"
class="tabs-chrome__divider bg-accent absolute left-[var(--gap)] top-1/2 z-0 h-5 w-[1px] translate-y-[-50%]"
class="tabs-chrome__divider bg-foreground/80 absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
></div>
<!-- background -->
<div
@@ -157,24 +154,27 @@ function handleUnpinTab(tab: TabConfig) {
<!-- extra -->
<div
class="tabs-chrome__extra absolute right-[calc(var(--gap)*2)] top-1/2 z-[3] size-4 translate-y-[-50%] opacity-0 transition-opacity group-hover:opacity-100"
class="tabs-chrome__extra absolute right-[calc(var(--gap)*2)] top-1/2 z-[3] size-4 translate-y-[-50%]"
>
<!-- <div
class="tabs-chrome__extra absolute right-[calc(var(--gap)*2)] top-1/2 z-[3] size-4 translate-y-[-50%] opacity-0 transition-opacity group-hover:opacity-100"
> -->
<!-- close-icon -->
<IcRoundClose
v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground mt-[2px] size-3 cursor-pointer rounded-full transition-all"
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3 cursor-pointer rounded-full transition-all"
@click.stop="handleClose(tab.key)"
/>
<MdiPin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="hover:bg-accent hover:stroke-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
@click.stop="handleUnpinTab(tab)"
/>
</div>
<!-- tab-item-main -->
<div
class="tabs-chrome__item-main group-[.is-active]:text-primary text-accent-foreground absolute left-0 right-0 z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] duration-150 group-hover:pr-3"
class="tabs-chrome__item-main group-[.is-active]:text-primary text-accent-foreground absolute left-0 right-0 z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 duration-150 group-hover:pr-3 group-[.is-active]:font-semibold"
>
<VbenIcon
v-if="showIcon"
@@ -200,7 +200,7 @@ function handleUnpinTab(tab: TabConfig) {
</template>
<style scoped>
html.dark {
/* html.dark {
.tabs-chrome {
.is-active {
.tabs-chrome__item-main {
@@ -208,7 +208,7 @@ html.dark {
}
}
}
}
} */
.tabs-chrome {
.dragging {
@@ -235,12 +235,12 @@ html.dark {
.tabs-chrome__background {
&-content {
@apply bg-accent;
@apply bg-heavy;
}
&-before,
&-after {
@apply fill-accent;
@apply fill-heavy;
}
}
}
@@ -252,12 +252,12 @@ html.dark {
@apply opacity-100;
&-content {
@apply bg-background;
@apply bg-background-content;
}
&-before,
&-after {
@apply fill-background;
@apply fill-background-content;
}
}
}

22
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@@ -29,7 +29,8 @@ const typeWithClass = computed(() => {
content: `h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100`,
},
card: {
content: 'h-[90%] rounded-md mr-1',
content:
'h-[calc(100%-6px)] rounded-md mr-2 border-border [&.is-active]:border-primary border transition-all',
},
plain: {
content: 'h-full',
@@ -64,7 +65,7 @@ function handleUnpinTab(tab: TabConfig) {
</script>
<template>
<div class="bg-accent h-full flex-1 overflow-hidden">
<div class="h-full flex-1 overflow-hidden">
<VbenScrollbar class="h-full" horizontal>
<div
:class="contentClass"
@@ -76,7 +77,7 @@ function handleUnpinTab(tab: TabConfig) {
:key="tab.key"
:class="[
{
'tabs-item is-active bg-background': tab.key === active,
'tabs-item is-active bg-background-content': tab.key === active,
dragable: !tab.affixTab,
},
typeWithClass.content,
@@ -94,26 +95,29 @@ function handleUnpinTab(tab: TabConfig) {
<div class="relative flex size-full items-center">
<!-- extra -->
<div
class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden opacity-0 transition-opacity group-hover:opacity-100 group-[.is-active]:opacity-100"
class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden"
>
<!-- <div
class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden opacity-0 transition-opacity group-hover:opacity-100 group-[.is-active]:opacity-100"
> -->
<!-- close-icon -->
<IcRoundClose
v-show="
!tab.affixTab && tabsView.length > 1 && tab.closable
"
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground size-3 cursor-pointer rounded-full transition-all"
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
@click.stop="handleClose(tab.key)"
/>
<MdiPin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="hover:bg-accent hover:stroke-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
@click.stop="handleUnpinTab(tab)"
/>
</div>
<!-- tab-item-main -->
<div
class="tabs-item__main group-[.is-active]:text-primary text-accent-foreground mx-3 mr-3 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
class="tabs-item__main group-[.is-active]:text-primary text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
>
<!-- <div
class="mx-3 ml-3 mr-2 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] transition-all duration-300 group-hover:mr-2 group-hover:pr-4 group-[.is-active]:pr-4"
@@ -139,7 +143,7 @@ function handleUnpinTab(tab: TabConfig) {
</template>
<style scoped>
html.dark {
/* html.dark {
.tabs-item {
&.is-active {
.tabs-item__main {
@@ -147,5 +151,5 @@ html.dark {
}
}
}
}
} */
</style>

2
packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
View File

@@ -10,7 +10,7 @@ defineProps<DropdownMenuProps>();
<template>
<VbenDropdownMenu :menus="menus" :modal="false">
<div
class="flex-center hover:bg-muted bg-accent hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-1.5 text-lg font-semibold"
class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-1.5 text-lg font-semibold"
>
<IcRoundKeyboardArrowDown class="size-5" />
</div>

2
packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
View File

@@ -10,7 +10,7 @@ function toggleScreen() {
<template>
<div
class="flex-center hover:bg-muted bg-accent hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
@click="toggleScreen"
>
<IcTwotoneFitScreen v-if="screen" />