by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 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

2
packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
View File

@@ -99,7 +99,7 @@ onMounted(() => {
</script>
<template>
<main ref="contentElement" :style="style">
<main ref="contentElement" :style="style" class="bg-background-content">
<slot></slot>
</main>
</template>

13
packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
View File

@@ -3,10 +3,6 @@ import type { CSSProperties } from 'vue';
import { computed } from 'vue';
interface Props {
/**
* 背景颜色
*/
backgroundColor?: string;
/**
* 是否固定在顶部
* @default true
@@ -35,7 +31,6 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--background))',
fixed: true,
height: 32,
show: true,
@@ -44,9 +39,8 @@ const props = withDefaults(defineProps<Props>(), {
});
const style = computed((): CSSProperties => {
const { backgroundColor, fixed, height, show, width, zIndex } = props;
const { fixed, height, show, width, zIndex } = props;
return {
backgroundColor,
height: `${height}px`,
marginBottom: show ? '0' : `-${height}px`,
position: fixed ? 'fixed' : 'static',
@@ -57,7 +51,10 @@ const style = computed((): CSSProperties => {
</script>
<template>
<footer :style="style" class="bottom-0 w-full transition-all duration-200">
<footer
:style="style"
class="bg-background-content bottom-0 w-full transition-all duration-200"
>
<slot></slot>
</footer>
</template>

12
packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
View File

@@ -6,11 +6,6 @@ import { IcRoundMenu } from '@vben-core/icons';
import { VbenIconButton } from '@vben-core/shadcn-ui';
interface Props {
/**
* 背景颜色
*/
backgroundColor?: string;
/**
* 横屏
* @default false
@@ -60,8 +55,6 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--background))',
// fixed: true,
height: 60,
isMixedNav: false,
show: true,
@@ -76,12 +69,11 @@ const emit = defineEmits<{ openMenu: []; toggleSidebar: [] }>();
const slots = useSlots();
const style = computed((): CSSProperties => {
const { backgroundColor, fullWidth, height, show } = props;
const { fullWidth, height, show } = props;
const right = !show || !fullWidth ? undefined : 0;
return {
// ...(props.isMixedNav ? { left: 0, position: `fixed` } : {}),
backgroundColor,
height: `${height}px`,
marginTop: show ? 0 : `-${height}px`,
right,
@@ -106,7 +98,7 @@ function handleToggleMenu() {
<template>
<header
:style="style"
class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
class="border-border bg-background top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
>
<div v-if="slots.logo" :style="logoStyle">
<slot name="logo"></slot>

2
packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
View File

@@ -255,7 +255,7 @@ function handleMouseleave() {
></div>
<aside
:style="style"
class="fixed left-0 top-0 h-full transition-all duration-200"
class="border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave"
>

20
packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
View File

@@ -3,10 +3,6 @@ import type { CSSProperties } from 'vue';
import { computed } from 'vue';
interface Props {
/**
* 背景颜色
*/
backgroundColor?: string;
/**
* 高度
* @default 30
@@ -15,29 +11,23 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--background))',
fixed: true,
height: 30,
});
const hiddenStyle = computed((): CSSProperties => {
const style = computed((): CSSProperties => {
const { height } = props;
return {
height: `${height}px`,
};
});
const style = computed((): CSSProperties => {
const { backgroundColor } = props;
return {
...hiddenStyle.value,
backgroundColor,
};
});
</script>
<template>
<section :style="style" class="border-border flex w-full">
<section
:style="style"
class="border-border bg-background flex w-full border-b"
>
<slot></slot>
</section>
</template>

6
packages/@core/ui-kit/layout-ui/src/vben-layout.vue
View File

@@ -45,7 +45,7 @@ const props = withDefaults(defineProps<Props>(), {
sidebarTheme: 'dark',
sidebarWidth: 180,
tabbarEnable: true,
tabbarHeight: 36,
tabbarHeight: 38,
zIndex: 200,
});
@@ -211,11 +211,11 @@ const sidebarFace = computed(() => {
if (isDark) {
backgroundColor = isSidebarMixedNav.value
? 'hsl(var(--menu-dark-darken))'
? 'hsl(var(--menu-dark-deep))'
: 'hsl(var(--menu-dark))';
} else {
backgroundColor = isSidebarMixedNav.value
? 'hsl(var(--menu-darken))'
? 'hsl(var(--menu-deep))'
: 'hsl(var(--menu))';
}

4
packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenu.vue
View File

@@ -3,7 +3,9 @@ import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue';
import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue';
const props = defineProps<ContextMenuRootProps>();
const props = withDefaults(defineProps<ContextMenuRootProps>(), {
modal: false,
});
const emits = defineEmits<ContextMenuRootEmits>();
const forwarded = useForwardPropsEmits(props, emits);

4
packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenu.vue
View File

@@ -6,7 +6,9 @@ import {
useForwardPropsEmits,
} from 'radix-vue';
const props = defineProps<DropdownMenuRootProps>();
const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
modal: false,
});
const emits = defineEmits<DropdownMenuRootEmits>();
const forwarded = useForwardPropsEmits(props, emits);

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" />