chore: update deps

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

@@ -112,7 +112,7 @@ function handleOpenMenu() {
 <template>
   <header
     :style="style"
-    class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b"
+    class="border-border 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/@vben-core/uikit/layout-ui/src/components/layout-side.vue

@@ -136,11 +136,11 @@ const style = computed((): CSSProperties => {
 });
 
 const extraStyle = computed((): CSSProperties => {
-  const { extraBackgroundColor, extraWidth, width, zIndex } = props;
+  const { extraBackgroundColor, extraWidth, show, width, zIndex } = props;
   return {
     backgroundColor: extraBackgroundColor,
     left: `${width}px`,
-    width: extraVisible.value ? `${extraWidth}px` : 0,
+    width: extraVisible.value && show ? `${extraWidth}px` : 0,
     zIndex,
   };
 });
@@ -156,9 +156,6 @@ const extraTitleStyle = computed((): CSSProperties => {
 const contentWidthStyle = computed((): CSSProperties => {
   const { collapseWidth, fixedExtra, isSideMixed, mixedWidth } = props;
   if (isSideMixed && fixedExtra) {
-    // if (!extraVisible.value) {
-    //   return {};
-    // }
     return { width: `${collapse.value ? collapseWidth : mixedWidth}px` };
   }
   return {};
@@ -204,14 +201,6 @@ watchEffect(() => {
   extraVisible.value = props.fixedExtra ? true : extraVisible.value;
 });
 
-// onClickOutside(asideRef, (event) => {
-//   const { fixedExtra, width } = props;
-//   // 防止点击 aside 区域关闭
-//   if (!fixedExtra && event.clientX >= width && extraVisible.value) {
-//     extraVisible.value = false;
-//   }
-// });
-
 function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
   const { backgroundColor, extraWidth, fixedExtra, isSideMixed, show, width } =
     props;
@@ -294,6 +283,7 @@ function handleScroll(event: Event) {
       v-if="isSideMixed"
       ref="asideRef"
       :class="e('extra')"
+      class="transition-[width] duration-200"
       :style="extraStyle"
     >
       <SideCollapseButton

packages/@vben-core/uikit/layout-ui/src/vben-layout.ts

@@ -77,6 +77,11 @@ interface VbenLayoutProps {
    * @default 10
    */
   headerHeightOffset?: number;
+  /**
+   * 顶栏是否隐藏
+   * @default false
+   */
+  headerHidden?: boolean;
   /**
    * header 显示模式
    * @default 'fixed'
@@ -117,6 +122,11 @@ interface VbenLayoutProps {
    * @default 48
    */
   sideCollapseWidth?: number;
+  /**
+   * 侧边栏是否隐藏
+   * @default false
+   */
+  sideHidden?: boolean;
   /**
    * 混合侧边扩展区域是否可见
    * @default false

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

@@ -33,6 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
   // headerBackgroundColor: 'hsl(var(--color-background))',
   headerHeight: 50,
   headerHeightOffset: 10,
+  headerHidden: false,
 
   headerMode: 'fixed',
   headerVisible: true,
@@ -41,6 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
   sideCollapseShowTitle: false,
   // sideCollapse: false,
   sideCollapseWidth: 60,
+  sideHidden: false,
   sideMixedWidth: 80,
   sideSemiDark: true,
   sideTheme: 'dark',
@@ -68,7 +70,7 @@ const { y: mouseY } = useMouse({ type: 'client' });
 
 // side是否处于hover状态展开菜单中
 const sideExpandOnHovering = ref(false);
-const sideHidden = ref(false);
+// const sideHidden = ref(false);
 const headerIsHidden = ref(false);
 
 const realLayout = computed(() => {
@@ -104,11 +106,11 @@ const isHeaderAuto = computed(() => props.headerMode === 'auto');
  * header区域高度
  */
 const getHeaderHeight = computed(() => {
-  const { headerHeight, headerHeightOffset, headerVisible } = props;
+  const { headerHeight, headerHeightOffset } = props;
 
-  if (!headerVisible) {
-    return 0;
-  }
+  // if (!headerVisible) {
+  //   return 0;
+  // }
 
   // 顶部存在导航时，增加10
   const offset = isMixedNav.value || isHeaderNav.value ? headerHeightOffset : 0;
@@ -118,7 +120,7 @@ const getHeaderHeight = computed(() => {
 
 const headerWrapperHeight = computed(() => {
   let height = 0;
-  if (props.headerVisible) {
+  if (props.headerVisible && !props.headerHidden) {
     height += getHeaderHeight.value;
   }
   if (props.tabsVisible) {
@@ -154,12 +156,16 @@ const sidePaddingTop = computed(() => {
  * 动态获取侧边宽度
  */
 const getSideWidth = computed(() => {
-  const { isMobile, sideMixedWidth, sideWidth } = props;
+  const { isMobile, sideHidden, sideMixedWidth, sideWidth } = props;
   let width = 0;
 
+  if (sideHidden) {
+    return width;
+  }
+
   if (
     !sideVisibleState.value ||
-    (sideHidden.value && !isSideMixedNav.value && !isMixedNav.value)
+    (sideHidden && !isSideMixedNav.value && !isMixedNav.value)
   ) {
     return width;
   }
@@ -190,6 +196,9 @@ const isSideMode = computed(() =>
 );
 
 const showSide = computed(() => {
+  // if (isMixedNav.value && !props.sideHidden) {
+  //   return false;
+  // }
   return isSideMode.value && sideVisible.value;
 });
 
@@ -441,7 +450,7 @@ function handleClickMask() {
 
 function handleToggleMenu() {
   // sideVisible.value = !sideVisible.value;
-  sideHidden.value = !sideHidden.value;
+  // sideHidden.value = !sideHidden.value;
 }
 
 function handleOpenMenu() {
@@ -452,7 +461,7 @@ function handleOpenMenu() {
 <template>
   <div class="relative flex min-h-full w-full">
     <slot name="preference"></slot>
-    <slot name="back-top"></slot>
+    <slot name="floating-button-group"></slot>
     <LayoutSide
       v-if="sideVisibleState"
       v-model:collapse="sideCollapse"
@@ -498,13 +507,13 @@ function handleOpenMenu() {
     >
       <div
         :style="headerWrapperStyle"
-        class="overflow-hidden transition-all duration-200 ease-in-out"
+        class="overflow-hidden transition-all duration-200"
       >
         <LayoutHeader
           v-if="headerVisible"
           :full-width="!isSideMode"
           :height="getHeaderHeight"
-          :show="!fullContent"
+          :show="!fullContent && !headerHidden"
           :side-hidden="sideHidden"
           :show-toggle-btn="showHeaderToggleButton"
           :width="mainStyle.width"
@@ -531,7 +540,7 @@ function handleOpenMenu() {
 
       <!-- </div> -->
       <LayoutContent
-        class="transition-[margin-top] duration-300 ease-in"
+        class="transition-[margin-top] duration-200"
         :style="contentStyle"
         :content-compact="contentCompact"
         :content-compact-width="contentCompactWidth"