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

1 year ago · 2135cb8ece
8 changed files with 198 additions and 2 deletions
--- 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';
--- 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',
+  );

  /**
   * 是否为头部混合模式
--- 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
  ) {
--- 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<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'),
--- a/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue
+++ b/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue
@ -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>
--- 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';
--- 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",
--- 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": "混合垂直",