<template>
|
<div
|
:class="[`${prefixCls}__placeholder`]"
|
:style="getPlaceholderDomStyle"
|
v-if="getIsShowPlaceholderDom"
|
></div>
|
<div :style="getWrapStyle" :class="getClass">
|
<LayoutHeader v-if="getShowInsetHeaderRef" />
|
<MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
|
</div>
|
</template>
|
<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 { useLayoutHeight } from '../content/useContentViewHeight';
|
import { useMultipleTabStore } from '@/store/modules/multipleTab';
|
|
const HEADER_HEIGHT = 48;
|
|
const TABS_HEIGHT = 32;
|
|
defineOptions({ name: 'LayoutMultipleHeader' });
|
|
const { setHeaderHeight } = useLayoutHeight();
|
const tabStore = useMultipleTabStore();
|
const { prefixCls } = useDesign('layout-multiple-header');
|
|
const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
|
const { getIsMobile } = useAppInject();
|
const { getFixed, getShowInsetHeaderRef, getShowFullHeaderRef, getHeaderTheme, getShowHeader } =
|
useHeaderSetting();
|
|
const { getFullContent } = useFullContent();
|
|
const { getShowMultipleTab, getAutoCollapse } = useMultipleTabSetting();
|
|
const getShowTabs = computed(() => {
|
return unref(getShowMultipleTab) && !unref(getFullContent);
|
});
|
|
const getIsShowPlaceholderDom = computed(() => {
|
return unref(getFixed) || unref(getShowFullHeaderRef);
|
});
|
|
const getWrapStyle = computed((): CSSProperties => {
|
const style: CSSProperties = {};
|
if (unref(getFixed)) {
|
style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
|
}
|
if (unref(getShowFullHeaderRef)) {
|
style.top = `${HEADER_HEIGHT}px`;
|
}
|
return style;
|
});
|
|
const getIsFixed = computed(() => {
|
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) &&
|
!unref(getFullContent)
|
) {
|
height += HEADER_HEIGHT;
|
}
|
if (unref(getShowMultipleTab) && !unref(getFullContent)) {
|
height += TABS_HEIGHT;
|
}
|
setHeaderHeight(height);
|
}
|
return {
|
height: `${height}px`,
|
};
|
});
|
|
const getClass = computed(() => {
|
return [
|
prefixCls,
|
`${prefixCls}--${unref(getHeaderTheme)}`,
|
{ [`${prefixCls}--fixed`]: unref(getIsFixed) },
|
];
|
});
|
</script>
|
<style lang="less" scoped>
|
@prefix-cls: ~'@{namespace}-layout-multiple-header';
|
|
.@{prefix-cls} {
|
flex: 0 0 auto;
|
transition: width 0.2s;
|
|
&--dark {
|
margin-left: -1px;
|
}
|
|
&--fixed {
|
position: fixed;
|
z-index: @multiple-tab-fixed-z-index;
|
top: 0;
|
width: 100%;
|
}
|
|
&__placeholder {
|
transition: height 0.6s ease-in-out;
|
}
|
}
|
</style>
|
