diff --git a/packages/@core/base/typings/src/app.d.ts b/packages/@core/base/typings/src/app.d.ts index f783c8b5..ae49c786 100644 --- a/packages/@core/base/typings/src/app.d.ts +++ b/packages/@core/base/typings/src/app.d.ts @@ -1,5 +1,6 @@ type LayoutType = | 'full-content' + | 'header-mixed-nav' | 'header-nav' | 'mixed-nav' | 'sidebar-mixed-nav' diff --git a/packages/@core/preferences/src/use-preferences.ts b/packages/@core/preferences/src/use-preferences.ts index fc1e2de5..ecd2bc74 100644 --- a/packages/@core/preferences/src/use-preferences.ts +++ b/packages/@core/preferences/src/use-preferences.ts @@ -82,6 +82,10 @@ function usePreferences() { () => appPreferences.value.layout === 'header-nav', ); + const isHeaderMixedNav = computed( + () => appPreferences.value.layout === 'header-mixed-nav', + ); + /** * @zh_CN 是否为混合导航模式 */ @@ -93,7 +97,12 @@ function usePreferences() { * @zh_CN 是否包含侧边导航模式 */ const isSideMode = computed(() => { - return isMixedNav.value || isSideMixedNav.value || isSideNav.value; + return ( + isMixedNav.value || + isSideMixedNav.value || + isSideNav.value || + isHeaderMixedNav.value + ); }); const sidebarCollapsed = computed(() => { @@ -214,6 +223,7 @@ function usePreferences() { globalSearchShortcutKey, isDark, isFullContent, + isHeaderMixedNav, isHeaderNav, isMixedNav, isMobile, diff --git a/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts b/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts index 354fcb44..7b758dc4 100644 --- a/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts +++ b/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts @@ -31,9 +31,17 @@ export function useLayout(props: VbenLayoutProps) { */ const isMixedNav = computed(() => currentLayout.value === 'mixed-nav'); + /** + * 是否为头部混合模式 + */ + const isHeaderMixedNav = computed( + () => currentLayout.value === 'header-mixed-nav', + ); + return { currentLayout, isFullContent, + isHeaderMixedNav, isHeaderNav, isMixedNav, isSidebarMixedNav, diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue index fe9b1d85..dee990b3 100644 --- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue +++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue @@ -87,6 +87,7 @@ const { y: mouseY } = useMouse({ target: contentRef, type: 'client' }); const { currentLayout, isFullContent, + isHeaderMixedNav, isHeaderNav, isMixedNav, isSidebarMixedNav, @@ -112,7 +113,9 @@ const getSideCollapseWidth = computed(() => { const { sidebarCollapseShowTitle, sidebarMixedWidth, sideCollapseWidth } = props; - return sidebarCollapseShowTitle || isSidebarMixedNav.value + return sidebarCollapseShowTitle || + isSidebarMixedNav.value || + isHeaderMixedNav.value ? sidebarMixedWidth : sideCollapseWidth; }); @@ -145,12 +148,15 @@ const getSidebarWidth = computed(() => { if ( !sidebarEnableState.value || - (sidebarHidden && !isSidebarMixedNav.value && !isMixedNav.value) + (sidebarHidden && + !isSidebarMixedNav.value && + !isMixedNav.value && + !isHeaderMixedNav.value) ) { return width; } - if (isSidebarMixedNav.value && !isMobile) { + if ((isHeaderMixedNav.value || isSidebarMixedNav.value) && !isMobile) { width = sidebarMixedWidth; } else if (sidebarCollapse.value) { width = isMobile ? 0 : getSideCollapseWidth.value; @@ -176,7 +182,8 @@ const isSideMode = computed( () => currentLayout.value === 'mixed-nav' || currentLayout.value === 'sidebar-mixed-nav' || - currentLayout.value === 'sidebar-nav', + currentLayout.value === 'sidebar-nav' || + currentLayout.value === 'header-mixed-nav', ); /** @@ -213,7 +220,7 @@ const mainStyle = computed(() => { ) { // fixed模式下生效 const isSideNavEffective = - isSidebarMixedNav.value && + (isSidebarMixedNav.value || isHeaderMixedNav.value) && sidebarExpandOnHover.value && sidebarExtraVisible.value; @@ -476,7 +483,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT; :extra-width="sidebarExtraWidth" :fixed-extra="sidebarExpandOnHover" :header-height="isMixedNav ? 0 : headerHeight" - :is-sidebar-mixed="isSidebarMixedNav" + :is-sidebar-mixed="isSidebarMixedNav || isHeaderMixedNav" :margin-top="sidebarMarginTop" :mixed-width="sidebarMixedWidth" :show="showSidebar" @@ -489,7 +496,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT; -