From a1d4e8813809da5c65da206b7f0b96822ba8e5d8 Mon Sep 17 00:00:00 2001 From: Netfan Date: Tue, 31 Dec 2024 00:19:37 +0800 Subject: [PATCH] feat: new layout `sidebar nav with full header` --- packages/@core/base/typings/src/app.d.ts | 1 + .../ui-kit/layout-ui/src/hooks/use-layout.ts | 6 +- .../ui-kit/layout-ui/src/vben-layout.vue | 4 +- .../preferences/blocks/layout/layout.vue | 7 + .../preferences/icons/header-sidebar-nav.vue | 177 ++++++++++++++++++ .../src/widgets/preferences/icons/index.ts | 1 + .../locales/src/langs/en-US/preferences.json | 2 + .../locales/src/langs/zh-CN/preferences.json | 2 + 8 files changed, 198 insertions(+), 2 deletions(-) create mode 100644 packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue diff --git a/packages/@core/base/typings/src/app.d.ts b/packages/@core/base/typings/src/app.d.ts index ae49c786e3f..02da2466a71 100644 --- a/packages/@core/base/typings/src/app.d.ts +++ b/packages/@core/base/typings/src/app.d.ts @@ -2,6 +2,7 @@ type LayoutType = | 'full-content' | 'header-mixed-nav' | 'header-nav' + | 'header-sidebar-nav' | 'mixed-nav' | 'sidebar-mixed-nav' | 'sidebar-nav'; 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 7b758dc468e..2f2b82bb1b1 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 @@ -29,7 +29,11 @@ export function useLayout(props: VbenLayoutProps) { /** * 是否为混合导航模式 */ - const isMixedNav = computed(() => currentLayout.value === 'mixed-nav'); + const isMixedNav = computed( + () => + currentLayout.value === 'mixed-nav' || + currentLayout.value === 'header-sidebar-nav', + ); /** * 是否为头部混合模式 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 dee990b3c1e..8821bfab57a 100644 --- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue +++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue @@ -183,7 +183,8 @@ const isSideMode = computed( currentLayout.value === 'mixed-nav' || currentLayout.value === 'sidebar-mixed-nav' || currentLayout.value === 'sidebar-nav' || - currentLayout.value === 'header-mixed-nav', + currentLayout.value === 'header-mixed-nav' || + currentLayout.value === 'header-sidebar-nav', ); /** @@ -215,6 +216,7 @@ const mainStyle = computed(() => { headerFixed.value && currentLayout.value !== 'header-nav' && currentLayout.value !== 'mixed-nav' && + currentLayout.value !== 'header-sidebar-nav' && showSidebar.value && !props.isMobile ) { diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue b/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue index 5fd6fc7f9f9..c232d7c81c3 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue +++ b/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue @@ -11,6 +11,7 @@ import { FullContent, HeaderMixedNav, HeaderNav, + HeaderSidebarNav, MixedNav, SidebarMixedNav, SidebarNav, @@ -35,6 +36,7 @@ const components: Record = { 'sidebar-mixed-nav': SidebarMixedNav, 'sidebar-nav': SidebarNav, 'header-mixed-nav': HeaderMixedNav, + 'header-sidebar-nav': HeaderSidebarNav, }; const PRESET = computed((): PresetItem[] => [ @@ -53,6 +55,11 @@ const PRESET = computed((): PresetItem[] => [ tip: $t('preferences.horizontalTip'), type: 'header-nav', }, + { + name: $t('preferences.headerSidebarNav'), + tip: $t('preferences.headerSidebarNavTip'), + type: 'header-sidebar-nav', + }, { name: $t('preferences.mixedMenu'), tip: $t('preferences.mixedMenuTip'), diff --git a/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue b/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue new file mode 100644 index 00000000000..b44e249ec08 --- /dev/null +++ b/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue @@ -0,0 +1,177 @@ + diff --git a/packages/effects/layouts/src/widgets/preferences/icons/index.ts b/packages/effects/layouts/src/widgets/preferences/icons/index.ts index 39f8c7de327..7eec1b470d1 100644 --- a/packages/effects/layouts/src/widgets/preferences/icons/index.ts +++ b/packages/effects/layouts/src/widgets/preferences/icons/index.ts @@ -3,6 +3,7 @@ import HeaderNav from './header-nav.vue'; export { default as ContentCompact } from './content-compact.vue'; export { default as FullContent } from './full-content.vue'; export { default as HeaderMixedNav } from './header-mixed-nav.vue'; +export { default as HeaderSidebarNav } from './header-sidebar-nav.vue'; export { default as MixedNav } from './mixed-nav.vue'; export { default as SidebarMixedNav } from './sidebar-mixed-nav.vue'; export { default as SidebarNav } from './sidebar-nav.vue'; diff --git a/packages/locales/src/langs/en-US/preferences.json b/packages/locales/src/langs/en-US/preferences.json index 57b535c4946..51643de1b82 100644 --- a/packages/locales/src/langs/en-US/preferences.json +++ b/packages/locales/src/langs/en-US/preferences.json @@ -17,6 +17,8 @@ "horizontalTip": "Horizontal menu mode, all menus displayed at the top", "twoColumn": "Two Column", "twoColumnTip": "Vertical Two Column Menu Mode", + "headerSidebarNav": "Header Vertical", + "headerSidebarNavTip": "Header Full Width, Sidebar Navigation Mode", "mixedMenu": "Mixed Menu", "mixedMenuTip": "Vertical & Horizontal Menu Co-exists", "fullContent": "Full Content", diff --git a/packages/locales/src/langs/zh-CN/preferences.json b/packages/locales/src/langs/zh-CN/preferences.json index aeb455638d3..ca867695cdf 100644 --- a/packages/locales/src/langs/zh-CN/preferences.json +++ b/packages/locales/src/langs/zh-CN/preferences.json @@ -17,6 +17,8 @@ "horizontalTip": "水平菜单模式，菜单全部显示在顶部", "twoColumn": "双列菜单", "twoColumnTip": "垂直双列菜单模式", + "headerSidebarNav": "侧边导航", + "headerSidebarNavTip": "顶部通栏，侧边导航模式", "headerTwoColumn": "混合双列", "headerTwoColumnTip": "双列、水平菜单共存模式", "mixedMenu": "混合垂直",