版本更新至2.11.5

Ben Lin

2024-06-18 ebbd788fbb2c0b45d4473798efc57eec8ba74a25

 src/layouts/default/header/MultipleHeader.vue

@@ -1,47 +1,47 @@
<template>
  <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
  <div
    :class="[`${prefixCls}__placeholder`]"
    :style="getPlaceholderDomStyle"
    v-if="getIsShowPlaceholderDom"
  ></div>
  <div :style="getWrapStyle" :class="getClass">
    <LayoutHeader v-if="getShowInsetHeaderRef" />
    <MultipleTabs v-if="getShowTabs" />
    <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, unref, computed, CSSProperties } from 'vue';
<script lang="ts" setup>
  import { unref, computed, CSSProperties } from 'vue';

  import LayoutHeader from './index.vue';
  import MultipleTabs from '../tabs/index.vue';

  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useFullContent } from '/@/hooks/web/useFullContent';
  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
  import { useFullContent } from '@/hooks/web/useFullContent';
  import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
  import { useAppInject } from '@/hooks/web/useAppInject';
  import { useDesign } from '@/hooks/web/useDesign';
  import { useLayoutHeight } from '../content/useContentViewHeight';
  import { useMultipleTabStore } from '@/store/modules/multipleTab';

  const HEADER_HEIGHT = 48;

  const TABS_HEIGHT = 32;
  export default defineComponent({
    name: 'LayoutMultipleHeader',
    components: { LayoutHeader, MultipleTabs },
    setup() {

  defineOptions({ name: 'LayoutMultipleHeader' });

      const { setHeaderHeight } = useLayoutHeight();
  const tabStore = useMultipleTabStore();
      const { prefixCls } = useDesign('layout-multiple-header');

      const { getCalcContentWidth, getSplit } = useMenuSetting();
  const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
      const { getIsMobile } = useAppInject();
      const {
        getFixed,
        getShowInsetHeaderRef,
        getShowFullHeaderRef,
        getHeaderTheme,
        getShowHeader,
      } = useHeaderSetting();
  const { getFixed, getShowInsetHeaderRef, getShowFullHeaderRef, getHeaderTheme, getShowHeader } =
    useHeaderSetting();

      const { getFullContent } = useFullContent();

      const { getShowMultipleTab } = useMultipleTabSetting();
  const { getShowMultipleTab, getAutoCollapse } = useMultipleTabSetting();

      const getShowTabs = computed(() => {
        return unref(getShowMultipleTab) && !unref(getFullContent);
@@ -66,8 +66,11 @@
        return unref(getFixed) || unref(getShowFullHeaderRef);
      });

  const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));

      const getPlaceholderDomStyle = computed((): CSSProperties => {
        let height = 0;
    if (!(unref(getAutoCollapse) && unref(getIsUnFold))) {
        if (
          (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
          unref(getShowHeader) &&
@@ -79,6 +82,7 @@
          height += TABS_HEIGHT;
        }
        setHeaderHeight(height);
    }
        return {
          height: `${height}px`,
        };
@@ -90,19 +94,6 @@
          `${prefixCls}--${unref(getHeaderTheme)}`,
          { [`${prefixCls}--fixed`]: unref(getIsFixed) },
        ];
      });

      return {
        getClass,
        prefixCls,
        getPlaceholderDomStyle,
        getIsFixed,
        getWrapStyle,
        getIsShowPlaceholderDom,
        getShowTabs,
        getShowInsetHeaderRef,
      };
    },
  });
</script>
<style lang="less" scoped>
@@ -122,5 +113,9 @@
      top: 0;
      width: 100%;
    }

    &__placeholder {
      transition: height 0.6s ease-in-out;
    }
  }
</style>