github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-23 01:30:26 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat: new layout sidebar nav with full header (#5270)

Browse Source
This commit is contained in:
Netfan 2024-12-31 00:30:15 +08:00 committed by GitHub
parent 376aad5d26
commit 2135cb8ece
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 198 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/@core/base/typings/src/app.d.ts vendored
View File

@ -2,6 +2,7 @@ type LayoutType =
| 'full-content'
| 'header-mixed-nav'
| 'header-nav'
| 'header-sidebar-nav'
| 'mixed-nav'
| 'sidebar-mixed-nav'
| 'sidebar-nav';

6
packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts
View File

@ -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',
);
/**
* 是否为头部混合模式

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

@ -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
) {

7
packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
View File

@ -11,6 +11,7 @@ import {
FullContent,
HeaderMixedNav,
HeaderNav,
HeaderSidebarNav,
MixedNav,
SidebarMixedNav,
SidebarNav,
@ -35,6 +36,7 @@ const components: Record<LayoutType, Component> = {
'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'),

177
packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue Normal file
View File

@ -0,0 +1,177 @@
<template>
<svg
class="custom-radio-image"
fill="none"
height="66"
width="104"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<rect
id="svg_1"
fill="currentColor"
fill-opacity="0.02"
height="66"
rx="4"
stroke="null"
width="104"
x="0.13514"
y="0.13514"
/>
<rect
id="svg_8"
fill="currentColor"
fill-opacity="0.08"
height="9.07027"
stroke="null"
width="104.07934"
x="-0.07419"
y="-0.05773"
/>
<rect
id="svg_3"
fill="#b2b2b2"
height="1.689"
rx="1.395"
stroke="null"
width="6.52486"
x="10.08168"
y="3.50832"
/>
<rect
id="svg_10"
fill="#b2b2b2"
height="4.4"
rx="1"
stroke="null"
width="3.925"
x="80.75054"
y="2.89362"
/>
<rect
id="svg_11"
fill="#b2b2b2"
height="4.4"
rx="1"
stroke="null"
width="3.925"
x="87.58249"
y="2.89362"
/>
<path
id="svg_12"
d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
fill="#ffffff"
opacity="undefined"
stroke="null"
/>
<rect
id="svg_13"
fill="currentColor"
fill-opacity="0.08"
height="21.51892"
rx="2"
stroke="null"
width="44.13071"
x="53.37873"
y="13.45652"
/>
<path
id="svg_14"
d="m19.4393,15.74245c0,-1.08676 0.79001,-2 1.73013,-2l23.18605,0c0.94011,0 1.73013,0.91324 1.73013,2l0,17.24865c0,1.08676 -0.79001,2 -1.73013,2l-23.18605,0c-0.94011,0 -1.73013,-0.91324 -1.73013,-2l0,-17.24865z"
fill="currentColor"
fill-opacity="0.08"
opacity="undefined"
stroke="null"
/>
<rect
id="svg_15"
fill="currentColor"
fill-opacity="0.08"
height="21.65405"
rx="2"
stroke="null"
width="78.39372"
x="19.93575"
y="39.34689"
/>
<rect
id="svg_21"
fill="#e5e5e5"
height="2.789"
rx="1.395"
stroke="null"
width="7.52486"
x="28.14924"
y="3.07319"
/>
<rect
id="svg_22"
fill="#e5e5e5"
height="2.789"
rx="1.395"
stroke="null"
width="7.52486"
x="41.25735"
y="3.20832"
/>
<rect
id="svg_23"
fill="#e5e5e5"
height="2.789"
rx="1.395"
stroke="null"
width="7.52486"
x="54.23033"
y="3.07319"
/>
<rect
id="svg_4"
fill="#ffffff"
height="5.13843"
rx="2"
stroke="null"
width="5.78397"
x="1.5327"
y="1.081"
/>
<rect
id="svg_5"
fill="hsl(var(--primary))"
height="56.81191"
stroke="null"
width="15.44642"
x="-0.06423"
y="9.03113"
/>
<path
id="svg_2"
d="m2.38669,15.38074c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
fill="#fff"
opacity="undefined"
stroke="null"
/>
<path
id="svg_6"
d="m2.38669,28.43336c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
fill="#fff"
opacity="undefined"
stroke="null"
/>
<path
id="svg_7"
d="m2.17616,41.27545c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
fill="#fff"
opacity="undefined"
stroke="null"
/>
<path
id="svg_9"
d="m2.17616,54.32806c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
fill="#fff"
opacity="undefined"
stroke="null"
/>
</g>
</svg>
</template>

1
packages/effects/layouts/src/widgets/preferences/icons/index.ts
View File

@ -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';

2
packages/locales/src/langs/en-US/preferences.json
View File

@ -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",

2
packages/locales/src/langs/zh-CN/preferences.json
View File

@ -17,6 +17,8 @@
"horizontalTip": "水平菜单模式，菜单全部显示在顶部",
"twoColumn": "双列菜单",
"twoColumnTip": "垂直双列菜单模式",
"headerSidebarNav": "侧边导航",
"headerSidebarNavTip": "顶部通栏，侧边导航模式",
"headerTwoColumn": "混合双列",
"headerTwoColumnTip": "双列、水平菜单共存模式",
"mixedMenu": "混合垂直",