feat(config): 滚动时隐藏header,当面包屑存在时将面包屑提升到header上

src/config/style.ts

@@ -13,4 +13,5 @@ export default {
   isUseTabsRouter: false,
   showHeader: true,
   brandTheme: '#0052D9',
+  toggleHeadVisible: false,
 };

src/layouts/index.vue

@@ -4,15 +4,19 @@
       <t-layout key="side" :class="mainLayoutCls">
         <t-aside><layout-side-nav /></t-aside>
         <t-layout>
-          <t-header><layout-header /></t-header>
+          <Transition>
+            <t-header><layout-header /></t-header>
+          </Transition>
           <t-content><layout-content /></t-content>
         </t-layout>
       </t-layout>
     </template>
 
     <template v-else>
       <t-layout key="no-side">
-        <t-header><layout-header /> </t-header>
+        <Transition>
+          <t-header><layout-header /> </t-header>
+        </Transition>
         <t-layout :class="mainLayoutCls">
           <layout-side-nav />
           <layout-content />
@@ -27,7 +31,7 @@
 import '@/style/layout.less';
 
 import { storeToRefs } from 'pinia';
-import { computed, onMounted, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { prefix } from '@/config/global';
@@ -59,8 +63,73 @@ const appendNewRoute = () => {
   tabsRouterStore.appendTabRouterList({ path, query, title: title as string, name, isAlive: true, meta: route.meta });
 };
 
+const toggleHeadVisibleScrollListener = () => {
+  const targetElement = document.querySelector(`.${prefix}-layout`);
+  const headerElement = document.querySelector(`header`);
+
+  const toggleHeadVisible = () => {
+    const layoutElement = document.querySelector(`.${prefix}-layout`);
+    const headerMenuElement = document.querySelector(`.${prefix}-header-menu-fixed`);
+
+    if (layoutElement) {
+      const { scrollTop } = layoutElement;
+
+      // 当面包屑存在时 面包屑存在时fixed在头部
+      if (settingStore.showBreadcrumb) {
+        const headerMenuFixedElementHeight = headerMenuElement?.scrollHeight || 0;
+        document.querySelector(`.t-layout__header`)?.setAttribute('style', `position:relative;`);
+        const breadcrumbElement = document.querySelector(`.t-breadcrumb`);
+
+        if (scrollTop > headerMenuFixedElementHeight && settingStore.toggleHeadVisible) {
+          headerMenuElement.setAttribute('style', 'display: none;');
+          breadcrumbElement.setAttribute('style', 'position:absolute;top:18px;');
+        } else {
+          headerMenuElement.setAttribute('style', null);
+          breadcrumbElement.setAttribute('style', null);
+        }
+      } else {
+        const sideNavMixFixedElement = document.querySelector(`.${prefix}-side-nav-mix-fixed`);
+
+        if (scrollTop > 50 && settingStore.toggleHeadVisible) {
+          headerElement.style.transform = 'translate3d(0, -100%, 0)';
+          headerElement.style.height = '0px';
+          headerElement.style.overflow = 'hidden';
+
+          (layoutElement as HTMLElement).style.height = '100vh';
+          const htmlElement = document.querySelector('html');
+          htmlElement.style.overflowY = 'hidden';
+
+          if (sideNavMixFixedElement) {
+            (sideNavMixFixedElement as HTMLElement).style.top = '0';
+          }
+        } else {
+          headerElement?.setAttribute('style', null);
+          if (sideNavMixFixedElement) {
+            sideNavMixFixedElement?.setAttribute('style', null);
+          }
+        }
+      }
+    }
+  };
+
+  if (targetElement) {
+    targetElement.addEventListener('scroll', toggleHeadVisible);
+  }
+};
+
 onMounted(() => {
   appendNewRoute();
+
+  toggleHeadVisibleScrollListener();
+  const observer = new MutationObserver(() => {
+    toggleHeadVisibleScrollListener();
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  onBeforeUnmount(() => {
+    observer.disconnect();
+  });
 });
 
 watch(
@@ -72,4 +141,12 @@ watch(
 );
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+header {
+  transition:
+    height 0.3s ease-in-out,
+    transform 0.6s,
+    opacity 0.6s;
+  // transform: translateZ(0);
+}
+</style>

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>

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',

src/locales/lang/zh_CN/layout.ts

@@ -40,6 +40,7 @@ export default {
       title: '元素开关',
       showHeader: '显示顶栏',
       showBreadcrumb: '显示面包屑',
+      toggleHeadVisible: '切换顶栏显示',
       showFooter: '显示页脚',
       useTagTabs: '展示多标签Tab页',
       menuAutoCollapsed: '菜单自动折叠',