| 提交 | 用户 | age | ||
| c774a6 | 1 | <template> |
| 9edc28 | 2 | <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div> |
| c774a6 | 3 | <div :style="getWrapStyle" :class="getClass"> |
| V | 4 | <LayoutHeader v-if="getShowInsetHeaderRef" /> |
| b43d30 | 5 | <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" /> |
| c774a6 | 6 | </div> |
| V | 7 | </template> |
| 8 | <script lang="ts"> | |
| 9 | import { defineComponent, unref, computed, CSSProperties } from 'vue'; | |
| 10 | ||
| 11 | import LayoutHeader from './index.vue'; | |
| 12 | import MultipleTabs from '../tabs/index.vue'; | |
| 13 | ||
| 14 | import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; | |
| 15 | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; | |
| 16 | import { useFullContent } from '/@/hooks/web/useFullContent'; | |
| 17 | import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; | |
| 18 | import { useAppInject } from '/@/hooks/web/useAppInject'; | |
| 19 | import { useDesign } from '/@/hooks/web/useDesign'; | |
| 33cd8f | 20 | import { useLayoutHeight } from '../content/useContentViewHeight'; |
| b43d30 | 21 | import { useMultipleTabStore } from '/@/store/modules/multipleTab'; |
| c774a6 | 22 | |
| V | 23 | const HEADER_HEIGHT = 48; |
| 24 | ||
| 25 | const TABS_HEIGHT = 32; | |
| 26 | export default defineComponent({ | |
| 27 | name: 'LayoutMultipleHeader', | |
| 28 | components: { LayoutHeader, MultipleTabs }, | |
| 29 | setup() { | |
| 33cd8f | 30 | const { setHeaderHeight } = useLayoutHeight(); |
| b43d30 | 31 | const tabStore = useMultipleTabStore(); |
| c774a6 | 32 | const { prefixCls } = useDesign('layout-multiple-header'); |
| V | 33 | |
| 34 | const { getCalcContentWidth, getSplit } = useMenuSetting(); | |
| 35 | const { getIsMobile } = useAppInject(); | |
| 36 | const { | |
| 37 | getFixed, | |
| 38 | getShowInsetHeaderRef, | |
| 39 | getShowFullHeaderRef, | |
| 40 | getHeaderTheme, | |
| da76f3 | 41 | getShowHeader, |
| c774a6 | 42 | } = useHeaderSetting(); |
| V | 43 | |
| 44 | const { getFullContent } = useFullContent(); | |
| 45 | ||
| 46 | const { getShowMultipleTab } = useMultipleTabSetting(); | |
| 47 | ||
| 48 | const getShowTabs = computed(() => { | |
| 49 | return unref(getShowMultipleTab) && !unref(getFullContent); | |
| 50 | }); | |
| 51 | ||
| 52 | const getIsShowPlaceholderDom = computed(() => { | |
| 53 | return unref(getFixed) || unref(getShowFullHeaderRef); | |
| 54 | }); | |
| 55 | ||
| 8e3f84 | 56 | const getWrapStyle = computed((): CSSProperties => { |
| V | 57 | const style: CSSProperties = {}; |
| 58 | if (unref(getFixed)) { | |
| 59 | style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth); | |
| c774a6 | 60 | } |
| 8e3f84 | 61 | if (unref(getShowFullHeaderRef)) { |
| V | 62 | style.top = `${HEADER_HEIGHT}px`; |
| 63 | } | |
| 64 | return style; | |
| 65 | }); | |
| c774a6 | 66 | |
| V | 67 | const getIsFixed = computed(() => { |
| 68 | return unref(getFixed) || unref(getShowFullHeaderRef); | |
| 69 | }); | |
| 70 | ||
| 8e3f84 | 71 | const getPlaceholderDomStyle = computed((): CSSProperties => { |
| V | 72 | let height = 0; |
| 73 | if ( | |
| 74 | (unref(getShowFullHeaderRef) || !unref(getSplit)) && | |
| 75 | unref(getShowHeader) && | |
| 76 | !unref(getFullContent) | |
| 77 | ) { | |
| 78 | height += HEADER_HEIGHT; | |
| c774a6 | 79 | } |
| 8e3f84 | 80 | if (unref(getShowMultipleTab) && !unref(getFullContent)) { |
| V | 81 | height += TABS_HEIGHT; |
| 82 | } | |
| 33cd8f | 83 | setHeaderHeight(height); |
| 8e3f84 | 84 | return { |
| V | 85 | height: `${height}px`, |
| 86 | }; | |
| 87 | }); | |
| c774a6 | 88 | |
| V | 89 | const getClass = computed(() => { |
| 90 | return [ | |
| 91 | prefixCls, | |
| 92 | `${prefixCls}--${unref(getHeaderTheme)}`, | |
| 93 | { [`${prefixCls}--fixed`]: unref(getIsFixed) }, | |
| 94 | ]; | |
| 95 | }); | |
| 96 | ||
| 97 | return { | |
| 98 | getClass, | |
| 99 | prefixCls, | |
| 100 | getPlaceholderDomStyle, | |
| 101 | getIsFixed, | |
| 102 | getWrapStyle, | |
| 103 | getIsShowPlaceholderDom, | |
| 104 | getShowTabs, | |
| 105 | getShowInsetHeaderRef, | |
| b43d30 | 106 | tabStore, |
| c774a6 | 107 | }; |
| V | 108 | }, |
| 109 | }); | |
| 110 | </script> | |
| 111 | <style lang="less" scoped> | |
| 112 | @prefix-cls: ~'@{namespace}-layout-multiple-header'; | |
| 113 | ||
| 114 | .@{prefix-cls} { | |
| 115 | flex: 0 0 auto; | |
| ba2415 | 116 | transition: width 0.2s; |
| c774a6 | 117 | |
| V | 118 | &--dark { |
| 8e3f84 | 119 | margin-left: -1px; |
| c774a6 | 120 | } |
| V | 121 | |
| 122 | &--fixed { | |
| 123 | position: fixed; | |
| 124 | z-index: @multiple-tab-fixed-z-index; | |
| ba2415 | 125 | top: 0; |
| c774a6 | 126 | width: 100%; |
| V | 127 | } |
| 128 | } | |
| 129 | </style> | |
