From fbab0c7126ab02c21156d23e9eb2f7a06283f409 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= <jimmyrss1102@gmail.com>
Date: Wed, 28 Aug 2024 06:42:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=BB=9A=E5=8A=A8=E6=97=B6=E9=9A=90?=
 =?UTF-8?q?=E8=97=8Fheader,=E5=BD=93=E9=9D=A2=E5=8C=85=E5=B1=91=E5=AD=98?=
 =?UTF-8?q?=E5=9C=A8=E6=97=B6=E5=B0=86=E9=9D=A2=E5=8C=85=E5=B1=91=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E5=88=B0header=E4=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close#362
---
 src/config/style.ts              |  1 +
 src/layouts/index.vue            | 38 ++++++++++++++++++++++++++++++++
 src/layouts/setting.vue          |  3 +++
 src/locales/lang/en_US/layout.ts |  1 +
 src/locales/lang/zh_CN/layout.ts |  1 +
 5 files changed, 44 insertions(+)

diff --git a/src/config/style.ts b/src/config/style.ts
index 1d2e1f8a..ff8688bf 100644
--- a/src/config/style.ts
+++ b/src/config/style.ts
@@ -13,4 +13,5 @@ export default {
   isUseTabsRouter: false,
   showHeader: true,
   brandTheme: '#0052D9',
+  toggleHeadVisible: false,
 };
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 82e8961f..2f8309d4 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -59,8 +59,46 @@ const appendNewRoute = () => {
   tabsRouterStore.appendTabRouterList({ path, query, title: title as string, name, isAlive: true, meta: route.meta });
 };
 
+const toggleHeadVisible = () => {
+  const layoutElement = document.querySelector(`.${prefix}-layout`);
+
+  if (layoutElement) {
+    const { scrollTop } = layoutElement;
+    const headerMenuFixedElement = document.querySelector(`.${prefix}-header-menu-fixed`);
+    const headerMenuFixedElementHeight = headerMenuFixedElement.scrollHeight;
+
+    // 面包屑fixed在头部
+    if (settingStore.showBreadcrumb) {
+      document.querySelector(`.t-layout__header`)?.setAttribute('style', `position:relative;`);
+      const breadcrumbElement = document.querySelector(`.t-breadcrumb`);
+
+      if (scrollTop > headerMenuFixedElementHeight && settingStore.toggleHeadVisible) {
+        headerMenuFixedElement.setAttribute('style', 'display: none;');
+        breadcrumbElement.setAttribute('style', 'position:absolute;top:18px;');
+      } else {
+        headerMenuFixedElement.setAttribute('style', null);
+        breadcrumbElement.setAttribute('style', null);
+      }
+    } else {
+      const headerElement = document.querySelector(`.t-layout__header`);
+
+      if (scrollTop > headerMenuFixedElementHeight && settingStore.toggleHeadVisible) {
+        headerElement.setAttribute('style', 'display: none;');
+        (layoutElement as HTMLElement).style.height = '100vh';
+      } else {
+        headerElement.setAttribute('style', null);
+        (layoutElement as HTMLElement).style.height = 'calc(100vh - var(--td-comp-size-xxxl))';
+      }
+    }
+  }
+};
+
 onMounted(() => {
   appendNewRoute();
+  const targetElement = document.querySelector(`.${prefix}-layout`);
+  if (targetElement) {
+    targetElement.addEventListener('scroll', toggleHeadVisible);
+  }
 });
 
 watch(
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index 35757690..498bb779 100644
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@@ -98,6 +98,9 @@
         <t-form-item :label="$t('layout.setting.element.menuAutoCollapsed')" name="menuAutoCollapsed">
           <t-switch v-model="formData.menuAutoCollapsed"></t-switch>
         </t-form-item>
+        <t-form-item :label="$t('layout.setting.element.toggleHeadVisible')" name="toggleHeadVisible">
+          <t-switch v-model="formData.toggleHeadVisible"></t-switch>
+        </t-form-item>
       </t-form>
       <div class="setting-info">
         <p>{{ $t('layout.setting.tips') }}</p>
diff --git a/src/locales/lang/en_US/layout.ts b/src/locales/lang/en_US/layout.ts
index 5c4a1d52..ad9e28e4 100644
--- a/src/locales/lang/en_US/layout.ts
+++ b/src/locales/lang/en_US/layout.ts
@@ -40,6 +40,7 @@ export default {
       title: 'Element Switch',
       showHeader: 'Show Header',
       showBreadcrumb: 'Show Breadcrumb',
+      toggleHeadVisible: 'Toggle Header Display',
       showFooter: 'Show Footer',
       useTagTabs: 'Use Tag Tabs',
       menuAutoCollapsed: 'Menu Auto Collapsed',
diff --git a/src/locales/lang/zh_CN/layout.ts b/src/locales/lang/zh_CN/layout.ts
index caca0552..beb908e7 100644
--- a/src/locales/lang/zh_CN/layout.ts
+++ b/src/locales/lang/zh_CN/layout.ts
@@ -40,6 +40,7 @@ export default {
       title: '元素开关',
       showHeader: '显示顶栏',
       showBreadcrumb: '显示面包屑',
+      toggleHeadVisible: '切换顶栏显示',
       showFooter: '显示页脚',
       useTagTabs: '展示多标签Tab页',
       menuAutoCollapsed: '菜单自动折叠',