perf: optimize interface color matching

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

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

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

@@ -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>

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

@@ -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))';
   }