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;
-
+
diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue
index abfb9add..62288453 100644
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -1,7 +1,7 @@