by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: improve overall theme color matching

Browse Source
This commit is contained in:
vince
2024-07-15 23:53:58 +08:00
parent caf1fc4375
commit f95d9aa609
39 changed files with 525 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,11 +2,9 @@
import type { ContentCompactType } from '@vben-core/typings';
import type { CSSProperties } from 'vue';
import { computed, onMounted, ref, watch } from 'vue';
import { computed } from 'vue';
import { getElementVisibleHeight } from '@vben-core/toolkit';
import { useCssVar, useDebounceFn, useWindowSize } from '@vueuse/core';
import { useContentHeightListener } from '@vben-core/hooks';
interface Props {
/**
@@ -56,13 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
paddingTop: 16,
});
const contentElement = ref<HTMLDivElement | null>();
const { height, width } = useWindowSize();
const contentClientHeight = useCssVar('--vben-content-client-height');
const debouncedCalcHeight = useDebounceFn(() => {
contentClientHeight.value = `${getElementVisibleHeight(contentElement.value)}px`;
}, 200);
const { contentElement } = useContentHeightListener();
const style = computed((): CSSProperties => {
const {
@@ -88,14 +80,6 @@ const style = computed((): CSSProperties => {
paddingTop: `${paddingTop}px`,
};
});
watch([height, width], () => {
debouncedCalcHeight();
});
onMounted(() => {
debouncedCalcHeight();
});
</script>
<template>

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

@@ -7,10 +7,6 @@ import { VbenScrollbar } from '@vben-core/shadcn-ui';
import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
interface Props {
/**
* 背景颜色
*/
backgroundColor: string;
/**
* 折叠区域高度
* @default 32
@@ -26,10 +22,6 @@ interface Props {
* @default true
*/
domVisible?: boolean;
/**
* 扩展区域背景颜色
*/
extraBackgroundColor: string;
/**
* 扩展区域宽度
* @default 180
@@ -113,15 +105,15 @@ const slots = useSlots();
const asideRef = shallowRef<HTMLDivElement | null>();
const hiddenSideStyle = computed((): CSSProperties => {
return calcMenuWidthStyle(true);
});
const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true));
const isDark = computed(() => props.theme === 'dark');
const style = computed((): CSSProperties => {
const { isSidebarMixed, paddingTop, theme, zIndex } = props;
const { isSidebarMixed, paddingTop, zIndex } = props;
return {
'--scroll-shadow': theme === 'dark' ? 'var(--menu-dark)' : 'var(--menu)',
'--scroll-shadow': isDark.value ? 'var(--menu-dark)' : 'var(--menu)',
...calcMenuWidthStyle(false),
paddingTop: `${paddingTop}px`,
zIndex,
@@ -130,9 +122,14 @@ const style = computed((): CSSProperties => {
});
const extraStyle = computed((): CSSProperties => {
const { extraBackgroundColor, extraWidth, show, width, zIndex } = props;
const { extraWidth, show, width, zIndex } = props;
const backgroundColor = isDark.value
? 'hsl(var(--menu-dark))'
: 'hsl(var(--menu))';
return {
backgroundColor: extraBackgroundColor,
backgroundColor,
left: `${width}px`,
width: extraVisible.value && show ? `${extraWidth}px` : 0,
zIndex,
@@ -196,14 +193,7 @@ watchEffect(() => {
});
function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
const {
backgroundColor,
extraWidth,
fixedExtra,
isSidebarMixed,
show,
width,
} = props;
const { extraWidth, fixedExtra, isSidebarMixed, show, width } = props;
let widthValue = `${width + (isSidebarMixed && fixedExtra && extraVisible.value ? extraWidth : 0)}px`;
@@ -213,6 +203,18 @@ function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
widthValue = `${collapseWidth}px`;
}
let backgroundColor = '';
if (isDark.value) {
backgroundColor = isSidebarMixed
? 'hsl(var(--menu-dark-deep))'
: 'hsl(var(--menu-dark))';
} else {
backgroundColor = isSidebarMixed
? 'hsl(var(--menu-deep))'
: 'hsl(var(--menu))';
}
return {
...(widthValue === '0px' ? { overflow: 'hidden' } : {}),
backgroundColor,
@@ -254,8 +256,9 @@ function handleMouseleave() {
class="h-full transition-all duration-200"
></div>
<aside
:data-theme="theme"
:style="style"
class="border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
class="data-[theme=dark]:border-border-dark border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave"
>
@@ -280,8 +283,9 @@ function handleMouseleave() {
<div
v-if="isSidebarMixed"
ref="asideRef"
:data-theme="theme"
:style="extraStyle"
class="fixed top-0 h-full overflow-hidden transition-all duration-200"
class="data-[theme=dark]:border-border-dark border-border fixed top-0 h-full overflow-hidden border-x transition-all duration-200"
>
<SidebarCollapseButton
v-if="isSidebarMixed && expandOnHover"
@@ -294,10 +298,15 @@ function handleMouseleave() {
v-model:expand-on-hover="expandOnHover"
:theme="theme"
/>
<div v-if="!extraCollapse" :style="extraTitleStyle">
<div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
<slot name="extra-title"></slot>
</div>
<VbenScrollbar :style="extraContentStyle" class="py-4" shadow>
<VbenScrollbar
:data-theme="theme"
:style="extraContentStyle"
class="data-[theme=dark]:border-border-dark border-border border-t py-2"
shadow
>
<slot name="extra"></slot>
</VbenScrollbar>
</div>

4
packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
View File

@@ -5,7 +5,7 @@ interface Props {
theme: string;
}
withDefaults(defineProps<Props>(), {});
defineProps<Props>();
const collapsed = defineModel<boolean>('collapsed');
@@ -17,7 +17,7 @@ function handleCollapsed() {
<template>
<div
:data-theme="theme"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--dark-accent))] data-[theme=dark]:text-[hsl(var(--dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--dark-foreground))]"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent data-[theme=dark]:hover:bg-accent-dark-hover data-[theme=dark]:bg-accent-dark data-[theme=dark]:text-foreground-dark/60 data-[theme=dark]:hover:text-foreground-dark absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
@click.stop="handleCollapsed"
>
<MdiMenuClose v-if="collapsed" />

4
packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
View File

@@ -5,7 +5,7 @@ interface Props {
theme: string;
}
withDefaults(defineProps<Props>(), {});
defineProps<Props>();
const expandOnHover = defineModel<boolean>('expandOnHover');
@@ -17,7 +17,7 @@ function toggleFixed() {
<template>
<div
:data-theme="theme"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--dark-accent))] data-[theme=dark]:text-[hsl(var(--dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--dark-foreground))]"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent data-[theme=dark]:hover:bg-accent-dark-hover data-[theme=dark]:bg-accent-dark data-[theme=dark]:text-foreground-dark/60 data-[theme=dark]:hover:text-foreground-dark absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
@click="toggleFixed"
>
<MdiPinOff v-if="!expandOnHover" />

16
packages/@core/ui-kit/layout-ui/src/vben-layout.ts
View File

@@ -41,11 +41,6 @@ interface VbenLayoutProps {
* @default 16
*/
contentPaddingTop?: number;
/**
* footer背景颜色
* @default #fff
*/
footerBackgroundColor?: string;
/**
* footer 是否可见
* @default false
@@ -61,11 +56,7 @@ interface VbenLayoutProps {
* @default 32
*/
footerHeight?: number;
/**
* 背景颜色
* @default #fff
*/
headerBackgroundColor?: string;
/**
* header高度
* @default 48
@@ -157,11 +148,6 @@ interface VbenLayoutProps {
* @default 210
*/
sidebarWidth?: number;
/**
* footer背景颜色
* @default #fff
*/
tabbarBackgroundColor?: string;
/**
* tab是否可见
* @default true

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

@@ -205,25 +205,7 @@ const showSidebar = computed(() => {
const sidebarFace = computed(() => {
const { sidebarSemiDark, sidebarTheme } = props;
const isDark = sidebarTheme === 'dark' || sidebarSemiDark;
let backgroundColor = '';
let extraBackgroundColor = '';
if (isDark) {
backgroundColor = isSidebarMixedNav.value
? 'hsl(var(--menu-dark-deep))'
: 'hsl(var(--menu-dark))';
} else {
backgroundColor = isSidebarMixedNav.value
? 'hsl(var(--menu-deep))'
: 'hsl(var(--menu))';
}
extraBackgroundColor = isDark ? 'hsl(var(--menu-dark))' : 'hsl(var(--menu))';
return {
backgroundColor,
extraBackgroundColor,
theme: isDark ? 'dark' : 'light',
};
});
@@ -476,9 +458,9 @@ function handleOpenMenu() {
:mixed-width="sidebarMixedWidth"
:padding-top="sidePaddingTop"
:show="showSidebar"
:theme="sidebarFace.theme"
:width="getSidebarWidth"
:z-index="sidebarZIndex"
v-bind="sidebarFace"
@leave="() => emit('sideMouseLeave')"
>
<template v-if="isSideMode && !isMixedNav" #logo>