aa

src/layout/components/ToolHeader.vue

@@ -10,6 +10,7 @@ import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
 import RouterSearch from '@/components/RouterSearch/index.vue'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
+import { getCurrentSource } from '@/utils/currentSource'
 
 const { getPrefixCls, variables } = useDesign()
 
@@ -40,11 +41,13 @@ const locale = computed(() => appStore.getLocale)
 
 // 消息图标
 const message = computed(() => appStore.getMessage)
+const hideTopHeader = computed(() => getCurrentSource() === 'qhse')
 
 export default defineComponent({
   name: 'ToolHeader',
   setup() {
     return () => (
+      hideTopHeader.value ? null : (
       <div
         id={`${variables.namespace}-tool-header`}
         class={[
@@ -81,6 +84,7 @@ export default defineComponent({
           <UserInfo></UserInfo>
         </div>
       </div>
+      )
     )
   }
 })

src/layout/components/useRenderLayout.tsx

@@ -24,6 +24,7 @@ const fixedHeader = computed(() => appStore.getFixedHeader)
 const mobile = computed(() => appStore.getMobile)
 const fixedMenu = computed(() => appStore.getFixedMenu)
 const hideLeftMenu = computed(() => getCurrentSource() === 'qhse')
+const hideTopHeader = computed(() => getCurrentSource() === 'qhse')
 
 export const useRenderLayout = () => {
   const renderClassic = () => {
@@ -73,36 +74,40 @@ export const useRenderLayout = () => {
               `${prefixCls}-content-scrollbar`,
               {
                 '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
-                  fixedHeader.value
+                  fixedHeader.value && !hideTopHeader.value,
+                '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
+                  fixedHeader.value && hideTopHeader.value
               }
             ]}
           >
-            <div
-              class={[
-                {
-                  'fixed top-0 left-0 z-10': fixedHeader.value,
-                  'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
-                    !hideLeftMenu.value && collapse.value && fixedHeader.value && !mobile.value,
-                  'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
-                    !hideLeftMenu.value && !collapse.value && fixedHeader.value && !mobile.value,
-                  '!w-full !left-0': hideLeftMenu.value || mobile.value
-                }
-              ]}
-              style="transition: all var(--transition-time-02);"
-            >
-              <ToolHeader
+            {!hideTopHeader.value ? (
+              <div
                 class={[
-                  'bg-[var(--top-header-bg-color)]',
                   {
-                    'layout-border__bottom': !tagsView.value
+                    'fixed top-0 left-0 z-10': fixedHeader.value,
+                    'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
+                      !hideLeftMenu.value && collapse.value && fixedHeader.value && !mobile.value,
+                    'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
+                      !hideLeftMenu.value && !collapse.value && fixedHeader.value && !mobile.value,
+                    '!w-full !left-0': hideLeftMenu.value || mobile.value
                   }
                 ]}
-              ></ToolHeader>
+                style="transition: all var(--transition-time-02);"
+              >
+                <ToolHeader
+                  class={[
+                    'bg-[var(--top-header-bg-color)]',
+                    {
+                      'layout-border__bottom': !tagsView.value
+                    }
+                  ]}
+                ></ToolHeader>
 
-              {tagsView.value ? (
-                <TagsView class="layout-border__top layout-border__bottom"></TagsView>
-              ) : undefined}
-            </div>
+                {tagsView.value ? (
+                  <TagsView class="layout-border__top layout-border__bottom"></TagsView>
+                ) : undefined}
+              </div>
+            ) : undefined}
 
             <AppView></AppView>
           </ElScrollbar>
@@ -114,12 +119,20 @@ export const useRenderLayout = () => {
   const renderTopLeft = () => {
     return (
       <>
-        <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom dark:bg-[var(--el-bg-color)]">
-          {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
-
-          <ToolHeader class="flex-1"></ToolHeader>
-        </div>
-        <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex">
+        {!hideTopHeader.value ? (
+          <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom dark:bg-[var(--el-bg-color)]">
+            {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
+            <ToolHeader class="flex-1"></ToolHeader>
+          </div>
+        ) : undefined}
+        <div
+          class={[
+            'absolute left-0 w-full flex',
+            hideTopHeader.value
+              ? 'top-0 h-full'
+              : 'top-[var(--logo-height)] h-[calc(100%-var(--logo-height))]'
+          ]}
+        >
           {!hideLeftMenu.value ? <Menu class="relative layout-border__right !h-full"></Menu> : undefined}
           <div
             class={[
@@ -141,7 +154,9 @@ export const useRenderLayout = () => {
                 `${prefixCls}-content-scrollbar`,
                 {
                   '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
-                    fixedHeader.value && tagsView.value
+                    fixedHeader.value && tagsView.value && !hideTopHeader.value,
+                  '!h-[calc(100%)] mt-0':
+                    fixedHeader.value && hideTopHeader.value
                 }
               ]}
             >
@@ -150,12 +165,12 @@ export const useRenderLayout = () => {
                   class={[
                     'layout-border__bottom absolute',
                     {
-                      '!fixed top-0 left-0 z-10': fixedHeader.value,
+                      '!fixed top-0 left-0 z-10': fixedHeader.value && !hideTopHeader.value,
                       'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && collapse.value && fixedHeader.value,
+                        !hideLeftMenu.value && collapse.value && fixedHeader.value && !hideTopHeader.value,
                       'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && !collapse.value && fixedHeader.value,
-                      '!w-full !left-0': hideLeftMenu.value
+                        !hideLeftMenu.value && !collapse.value && fixedHeader.value && !hideTopHeader.value,
+                      '!w-full !left-0': hideLeftMenu.value || hideTopHeader.value
                     }
                   ]}
                   style="transition: width var(--transition-time-02), left var(--transition-time-02);"
@@ -173,26 +188,34 @@ export const useRenderLayout = () => {
   const renderTop = () => {
     return (
       <>
+        {!hideTopHeader.value ? (
+          <div
+            class={[
+              'flex items-center justify-between bg-[var(--top-header-bg-color)] relative',
+              {
+                'layout-border__bottom': !tagsView.value
+              }
+            ]}
+          >
+            {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
+            <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu>
+            <ToolHeader></ToolHeader>
+          </div>
+        ) : undefined}
         <div
           class={[
-            'flex items-center justify-between bg-[var(--top-header-bg-color)] relative',
-            {
-              'layout-border__bottom': !tagsView.value
-            }
+            `${prefixCls}-content`,
+            hideTopHeader.value ? 'w-full h-full' : 'w-full h-[calc(100%-var(--top-tool-height))]'
           ]}
         >
-          {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
-          {!hideLeftMenu.value ? <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu> : undefined}
-          <ToolHeader></ToolHeader>
-        </div>
-        <div class={[`${prefixCls}-content`, 'w-full h-[calc(100%-var(--top-tool-height))]']}>
           <ElScrollbar
             v-loading={pageLoading.value}
             class={[
               `${prefixCls}-content-scrollbar`,
               {
                 '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
-                  fixedHeader.value && tagsView.value
+                  fixedHeader.value && tagsView.value && !hideTopHeader.value,
+                '!h-full mt-0': hideTopHeader.value
               }
             ]}
           >
@@ -201,7 +224,8 @@ export const useRenderLayout = () => {
                 class={[
                   'layout-border__bottom layout-border__top relative',
                   {
-                    '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
+                    '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value && !hideTopHeader.value,
+                    '!fixed w-full top-0 left-0': hideTopHeader.value
                   }
                 ]}
                 style="transition: width var(--transition-time-02), left var(--transition-time-02);"
@@ -218,12 +242,20 @@ export const useRenderLayout = () => {
   const renderCutMenu = () => {
     return (
       <>
-        <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
-          {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
-
-          <ToolHeader class="flex-1"></ToolHeader>
-        </div>
-        <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex">
+        {!hideTopHeader.value ? (
+          <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
+            {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
+            <ToolHeader class="flex-1"></ToolHeader>
+          </div>
+        ) : undefined}
+        <div
+          class={[
+            'absolute left-0 w-full flex',
+            hideTopHeader.value
+              ? 'top-0 h-full'
+              : 'top-[var(--logo-height)] h-[calc(100%-var(--logo-height))]'
+          ]}
+        >
           {!hideLeftMenu.value ? <TabMenu></TabMenu> : undefined}
           <div
             class={[
@@ -249,7 +281,8 @@ export const useRenderLayout = () => {
                 `${prefixCls}-content-scrollbar`,
                 {
                   '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
-                    fixedHeader.value && tagsView.value
+                    fixedHeader.value && tagsView.value && !hideTopHeader.value,
+                  '!h-full mt-0': hideTopHeader.value
                 }
               ]}
             >
@@ -258,16 +291,16 @@ export const useRenderLayout = () => {
                   class={[
                     'relative layout-border__bottom',
                     {
-                      '!fixed top-0 left-0 z-10': fixedHeader.value,
+                      '!fixed top-0 left-0 z-10': fixedHeader.value && !hideTopHeader.value,
+                      '!fixed top-0 left-0 z-10 w-full': hideTopHeader.value,
                       'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && collapse.value && fixedHeader.value && !fixedMenu.value,
+                        !hideLeftMenu.value && collapse.value && fixedHeader.value && !fixedMenu.value && !hideTopHeader.value,
                       'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && !collapse.value && fixedHeader.value && !fixedMenu.value,
+                        !hideLeftMenu.value && !collapse.value && fixedHeader.value && !fixedMenu.value && !hideTopHeader.value,
                       'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] !left-[calc(var(--tab-menu-min-width)+var(--left-menu-max-width))] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && collapse.value && fixedHeader.value && fixedMenu.value,
+                        !hideLeftMenu.value && collapse.value && fixedHeader.value && fixedMenu.value && !hideTopHeader.value,
                       'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] !left-[calc(var(--tab-menu-max-width)+var(--left-menu-max-width))] mt-[var(--logo-height)]':
-                        !hideLeftMenu.value && !collapse.value && fixedHeader.value && fixedMenu.value,
-                      '!w-full !left-0': hideLeftMenu.value
+                        !hideLeftMenu.value && !collapse.value && fixedHeader.value && fixedMenu.value && !hideTopHeader.value
                     }
                   ]}
                   style="transition: width var(--transition-time-02), left var(--transition-time-02);"