fix: fix some known problems

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

@@ -92,7 +92,7 @@ const props = withDefaults(defineProps<Props>(), {
   domVisible: true,
   extraWidth: 180,
   fixedExtra: false,
-  isSideMixed: false,
+  isSidebarMixed: false,
   mixedWidth: 80,
   paddingTop: 60,
   show: true,
@@ -118,13 +118,13 @@ const hiddenSideStyle = computed((): CSSProperties => {
 });
 
 const style = computed((): CSSProperties => {
-  const { isSideMixed, paddingTop, zIndex } = props;
+  const { isSidebarMixed, paddingTop, zIndex } = props;
 
   return {
     ...calcMenuWidthStyle(false),
     paddingTop: `${paddingTop}px`,
     zIndex,
-    ...(isSideMixed && extraVisible.value ? { transition: 'none' } : {}),
+    ...(isSidebarMixed && extraVisible.value ? { transition: 'none' } : {}),
   };
 });
 
@@ -147,8 +147,8 @@ const extraTitleStyle = computed((): CSSProperties => {
 });
 
 const contentWidthStyle = computed((): CSSProperties => {
-  const { collapseWidth, fixedExtra, isSideMixed, mixedWidth } = props;
-  if (isSideMixed && fixedExtra) {
+  const { collapseWidth, fixedExtra, isSidebarMixed, mixedWidth } = props;
+  if (isSidebarMixed && fixedExtra) {
     return { width: `${collapse.value ? collapseWidth : mixedWidth}px` };
   }
   return {};
@@ -165,10 +165,10 @@ const contentStyle = computed((): CSSProperties => {
 });
 
 const headerStyle = computed((): CSSProperties => {
-  const { headerHeight, isSideMixed } = props;
+  const { headerHeight, isSidebarMixed } = props;
 
   return {
-    ...(isSideMixed ? { display: 'flex', justifyContent: 'center' } : {}),
+    ...(isSidebarMixed ? { display: 'flex', justifyContent: 'center' } : {}),
     height: `${headerHeight}px`,
     ...contentWidthStyle.value,
   };
@@ -195,10 +195,16 @@ watchEffect(() => {
 });
 
 function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
-  const { backgroundColor, extraWidth, fixedExtra, isSideMixed, show, width } =
-    props;
+  const {
+    backgroundColor,
+    extraWidth,
+    fixedExtra,
+    isSidebarMixed,
+    show,
+    width,
+  } = props;
 
-  let widthValue = `${width + (isSideMixed && fixedExtra && extraVisible.value ? extraWidth : 0)}px`;
+  let widthValue = `${width + (isSidebarMixed && fixedExtra && extraVisible.value ? extraWidth : 0)}px`;
 
   const { collapseWidth } = props;
 

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

@@ -27,10 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   contentPaddingRight: 0,
   contentPaddingTop: 0,
   footerEnable: false,
-  // footerBackgroundColor: '#fff',
   footerFixed: true,
   footerHeight: 32,
-  // headerBackgroundColor: 'hsl(var(--background))',
   headerHeight: 50,
   headerHeightOffset: 10,
   headerHidden: false,
@@ -39,7 +37,6 @@ const props = withDefaults(defineProps<Props>(), {
   headerVisible: true,
   isMobile: false,
   layout: 'sidebar-nav',
-  // sideCollapse: false,
   sideCollapseWidth: 60,
   sidebarCollapseShowTitle: false,
   sidebarHidden: false,
@@ -48,7 +45,6 @@ const props = withDefaults(defineProps<Props>(), {
   sidebarTheme: 'dark',
   sidebarWidth: 180,
   tabbarEnable: true,
-  // tabsBackgroundColor: 'hsl(var(--background))',
   tabsHeight: 36,
   zIndex: 200,
 });
@@ -134,6 +130,7 @@ const headerWrapperHeight = computed(() => {
 const getSideCollapseWidth = computed(() => {
   const { sideCollapseWidth, sidebarCollapseShowTitle, sidebarMixedWidth } =
     props;
+
   return sidebarCollapseShowTitle || isSidebarMixedNav.value
     ? sidebarMixedWidth
     : sideCollapseWidth;
@@ -187,6 +184,7 @@ const getSidebarWidth = computed(() => {
  */
 const getExtraWidth = computed(() => {
   const { sidebarWidth } = props;
+
   return sidebarExtraCollapse.value ? getSideCollapseWidth.value : sidebarWidth;
 });