From d921b789518e0b86e425fdf16163111e9121c156 Mon Sep 17 00:00:00 2001
From: z9130 <984661593@qq.com>
Date: Wed, 9 Oct 2024 12:19:42 +0800
Subject: [PATCH] feat(layout): add sidebar-topbar layout

---
 packages/@core/base/typings/src/app.d.ts      |  3 +-
 packages/@core/preferences/src/types.ts       |  2 ++
 .../@core/ui-kit/layout-ui/src/vben-layout.ts |  1 +
 .../ui-kit/layout-ui/src/vben-layout.vue      | 30 +++++++++++++++----
 packages/effects/layouts/src/basic/layout.vue |  2 ++
 .../preferences/blocks/layout/layout.vue      |  6 ++++
 packages/preferences/src/index.ts             |  5 +++-
 7 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/packages/@core/base/typings/src/app.d.ts b/packages/@core/base/typings/src/app.d.ts
index e49a8657..aa6a1dc4 100644
--- a/packages/@core/base/typings/src/app.d.ts
+++ b/packages/@core/base/typings/src/app.d.ts
@@ -3,7 +3,8 @@ type LayoutType =
   | 'header-nav'
   | 'mixed-nav'
   | 'sidebar-mixed-nav'
-  | 'sidebar-nav';
+  | 'sidebar-nav'
+  | 'sidebar-topbar';
 
 type ThemeModeType = 'auto' | 'dark' | 'light';
 
diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts
index e3ad2bf5..9a9437db 100644
--- a/packages/@core/preferences/src/types.ts
+++ b/packages/@core/preferences/src/types.ts
@@ -104,6 +104,8 @@ interface HeaderPreferences {
   hidden: boolean;
   /** header显示模式 */
   mode: LayoutHeaderModeType;
+  /** header高度，适用于 layout 为 sidebar-topbar 模式 */
+  height: number;
 }
 
 interface LogoPreferences {
diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.ts b/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
index f7dd39cd..5e243940 100644
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
@@ -97,6 +97,7 @@ interface VbenLayoutProps {
    * header-nav 顶部菜单布局
    * mixed-nav 侧边&顶部菜单布局
    * sidebar-mixed-nav 侧边混合菜单布局
+   * sidebar-topbar 侧边菜单+顶部栏布局
    * full-content 全屏内容布局
    * @default 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 67c7278a..7d2dfa9e 100644
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -120,7 +120,11 @@ const sidebarEnableState = computed(() => {
  */
 const sidebarMarginTop = computed(() => {
   const { headerHeight, isMobile } = props;
-  return isMixedNav.value && !isMobile ? headerHeight : 0;
+  console.log(props);
+  return (isMixedNav.value && !isMobile) ||
+    currentLayout.value === 'sidebar-topbar'
+    ? headerHeight
+    : 0;
 });
 
 /**
@@ -167,7 +171,8 @@ const isSideMode = computed(
   () =>
     currentLayout.value === 'mixed-nav' ||
     currentLayout.value === 'sidebar-mixed-nav' ||
-    currentLayout.value === 'sidebar-nav',
+    currentLayout.value === 'sidebar-nav' ||
+    currentLayout.value === 'sidebar-topbar',
 );
 
 /**
@@ -199,6 +204,7 @@ const mainStyle = computed(() => {
     headerFixed.value &&
     currentLayout.value !== 'header-nav' &&
     currentLayout.value !== 'mixed-nav' &&
+    currentLayout.value !== 'sidebar-topbar' &&
     showSidebar.value &&
     !props.isMobile
   ) {
@@ -291,7 +297,10 @@ const headerWrapperStyle = computed((): CSSProperties => {
   const fixed = headerFixed.value;
   return {
     height: isFullContent.value ? '0' : `${headerWrapperHeight.value}px`,
-    left: isMixedNav.value ? 0 : mainStyle.value.sidebarAndExtraWidth,
+    left:
+      isMixedNav.value || currentLayout.value === 'sidebar-topbar'
+        ? 0
+        : mainStyle.value.sidebarAndExtraWidth,
     position: fixed ? 'fixed' : 'static',
     top:
       headerIsHidden.value || isFullContent.value
@@ -335,12 +344,18 @@ const showHeaderToggleButton = computed(() => {
       isSideMode.value &&
       !isSidebarMixedNav.value &&
       !isMixedNav.value &&
-      !props.isMobile)
+      !props.isMobile &&
+      currentLayout.value !== 'sidebar-topbar')
   );
 });
 
 const showHeaderLogo = computed(() => {
-  return !isSideMode.value || isMixedNav.value || props.isMobile;
+  return (
+    !isSideMode.value ||
+    isMixedNav.value ||
+    props.isMobile ||
+    currentLayout.value === 'sidebar-topbar'
+  );
 });
 
 watch(
@@ -454,7 +469,10 @@ function handleHeaderToggle() {
       :z-index="sidebarZIndex"
       @leave="() => emit('sideMouseLeave')"
     >
-      <template v-if="isSideMode && !isMixedNav" #logo>
+      <template
+        v-if="isSideMode && !isMixedNav && currentLayout !== 'sidebar-topbar'"
+        #logo
+      >
         <slot name="logo"></slot>
       </template>
 
diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue
index fb58ba6c..d791ba8d 100644
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -153,6 +153,7 @@ const headerSlots = computed(() => {
   <VbenAdminLayout
     v-model:sidebar-extra-visible="sidebarExtraVisible"
     :content-compact="preferences.app.contentCompact"
+    :header-height="preferences.header.height"
     :footer-enable="preferences.footer.enable"
     :footer-fixed="preferences.footer.fixed"
     :header-hidden="preferences.header.hidden"
@@ -211,6 +212,7 @@ const headerSlots = computed(() => {
           #breadcrumb
         >
           <Breadcrumb
+            v-if="preferences.app.layout !== 'sidebar-topbar'"
             :hide-when-only-one="preferences.breadcrumb.hideOnlyOne"
             :show-home="preferences.breadcrumb.showHome"
             :show-icon="preferences.breadcrumb.showIcon"
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 ec5d3cfb..82b3f1e4 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
@@ -33,6 +33,7 @@ const components: Record<LayoutType, Component> = {
   'mixed-nav': MixedNav,
   'sidebar-mixed-nav': SidebarMixedNav,
   'sidebar-nav': SidebarNav,
+  'sidebar-topbar': MixedNav,
 };
 
 const PRESET = computed((): PresetItem[] => [
@@ -61,6 +62,11 @@ const PRESET = computed((): PresetItem[] => [
     tip: $t('preferences.fullContentTip'),
     type: 'full-content',
   },
+  {
+    name: '侧边菜单 + 顶部栏布局',
+    tip: '顶部栏仅用于显示全局信息或操作，不包含菜单。',
+    type: 'sidebar-topbar',
+  },
 ]);
 
 function activeClass(theme: string): string[] {
diff --git a/packages/preferences/src/index.ts b/packages/preferences/src/index.ts
index d11fbed3..d84870fc 100644
--- a/packages/preferences/src/index.ts
+++ b/packages/preferences/src/index.ts
@@ -45,7 +45,7 @@ function defineOverridesPreferences(preferences: DeepPartial<Preferences>) {
       // 检查更新的时间间隔，单位为分钟
       checkUpdatesInterval: 1,
       // 开启布局设置按钮
-      enablePreferences: false,
+      enablePreferences: true,
       enableRefreshToken: false,
     },
     theme: {
@@ -59,6 +59,9 @@ function defineOverridesPreferences(preferences: DeepPartial<Preferences>) {
       semiDarkHeader: false,
       semiDarkSidebar: true,
     },
+    header: {
+      height: 50,
+    },
     footer: {
       enable: false,
       fixed: false,