| 提交 | 用户 | age | ||
| 770283 | 1 | import { defineComponent, unref, computed } from 'vue'; |
| 2f6253 | 2 | import { Layout, BackTop } from 'ant-design-vue'; |
| 陈 | 3 | import LayoutHeader from './LayoutHeader'; |
| 4 | ||
| 5 | import { appStore } from '/@/store/modules/app'; | |
| 6 | import LayoutContent from './LayoutContent'; | |
| 7 | import LayoutSideBar from './LayoutSideBar'; | |
| 8 | import SettingBtn from './setting/index.vue'; | |
| 9 | import MultipleTabs from './multitabs/index'; | |
| 10 | import { FullLoading } from '/@/components/Loading/index'; | |
| 11 | ||
| 12 | import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum'; | |
| 13 | import { useFullContent } from '/@/hooks/web/useFullContent'; | |
| 14 | ||
| 15 | import LockPage from '/@/views/sys/lock/index.vue'; | |
| 968f79 | 16 | import { registerGlobComp } from '/@/components/registerGlobComp'; |
| 2f6253 | 17 | |
| 陈 | 18 | import './index.less'; |
| 19 | export default defineComponent({ | |
| 20 | name: 'DefaultLayout', | |
| 21 | setup() { | |
| 4ff6b7 | 22 | // ! Only register global components here |
| V | 23 | // ! Can reduce the size of the first screen code |
| 24 | // default layout It is loaded after login. So it won’t be packaged to the first screen | |
| 968f79 | 25 | registerGlobComp(); |
| V | 26 | |
| 2f6253 | 27 | const { getFullContent } = useFullContent(); |
| 陈 | 28 | |
| 29 | const getProjectConfigRef = computed(() => { | |
| 30 | return appStore.getProjectConfig; | |
| 31 | }); | |
| 770283 | 32 | |
| 2f6253 | 33 | const getLockMainScrollStateRef = computed(() => { |
| 陈 | 34 | return appStore.getLockMainScrollState; |
| 35 | }); | |
| 36 | ||
| 37 | const showHeaderRef = computed(() => { | |
| 38 | const { | |
| 39 | headerSetting: { show }, | |
| 40 | } = unref(getProjectConfigRef); | |
| 41 | return show; | |
| 42 | }); | |
| 770283 | 43 | |
| 2f6253 | 44 | const isShowMixHeaderRef = computed(() => { |
| 陈 | 45 | const { |
| 46 | menuSetting: { type }, | |
| 47 | } = unref(getProjectConfigRef); | |
| 48 | return type !== MenuTypeEnum.SIDEBAR && unref(showHeaderRef); | |
| 49 | }); | |
| 50 | ||
| 51 | const showSideBarRef = computed(() => { | |
| 52 | const { | |
| 96c10d | 53 | menuSetting: { show, mode, split }, |
| 2f6253 | 54 | } = unref(getProjectConfigRef); |
| 96c10d | 55 | return split || (show && mode !== MenuModeEnum.HORIZONTAL && !unref(getFullContent)); |
| 2f6253 | 56 | }); |
| 陈 | 57 | |
| 58 | function getTarget(): any { | |
| 59 | const { | |
| 60 | headerSetting: { fixed }, | |
| 61 | } = unref(getProjectConfigRef); | |
| 62 | return document.querySelector(`.default-layout__${fixed ? 'main' : 'content'}`); | |
| 63 | } | |
| 770283 | 64 | |
| 2f6253 | 65 | return () => { |
| 陈 | 66 | const { getPageLoading, getLockInfo } = appStore; |
| 67 | const { | |
| 68 | openPageLoading, | |
| 69 | useOpenBackTop, | |
| 70 | showSettingButton, | |
| 71 | multiTabsSetting: { show: showTabs }, | |
| 72 | headerSetting: { fixed }, | |
| 4f6b65 | 73 | menuSetting: { split, hidden }, |
| 2f6253 | 74 | } = unref(getProjectConfigRef); |
| 770283 | 75 | |
| 2f6253 | 76 | const fixedHeaderCls = fixed |
| 陈 | 77 | ? 'fixed' + (unref(getLockMainScrollStateRef) ? ' lock' : '') |
| 78 | : ''; | |
| 770283 | 79 | |
| 2f6253 | 80 | const { isLock } = getLockInfo; |
| 96c10d | 81 | |
| 4f6b65 | 82 | const showSideBar = split ? hidden : true; |
| 2f6253 | 83 | return ( |
| 陈 | 84 | <Layout class="default-layout relative"> |
| 85 | {() => ( | |
| 86 | <> | |
| 87 | {isLock && <LockPage />} | |
| 31e271 | 88 | |
| 2f6253 | 89 | {!unref(getFullContent) && unref(isShowMixHeaderRef) && unref(showHeaderRef) && ( |
| 陈 | 90 | <LayoutHeader /> |
| 91 | )} | |
| 31e271 | 92 | |
| 2f6253 | 93 | {showSettingButton && <SettingBtn />} |
| 31e271 | 94 | |
| 2f6253 | 95 | <Layout> |
| 陈 | 96 | {() => ( |
| 97 | <> | |
| 96c10d | 98 | {unref(showSideBarRef) && <LayoutSideBar class={showSideBar ? '' : 'hidden'} />} |
| 2f6253 | 99 | <Layout class={[`default-layout__content`, fixedHeaderCls]}> |
| 陈 | 100 | {() => ( |
| 101 | <> | |
| 102 | {!unref(getFullContent) && | |
| 103 | !unref(isShowMixHeaderRef) && | |
| 104 | unref(showHeaderRef) && <LayoutHeader />} | |
| 105 | ||
| 106 | {showTabs && !unref(getFullContent) && ( | |
| dc42d4 | 107 | <Layout.Header class={`default-layout__tabs`}> |
| V | 108 | {() => <MultipleTabs />} |
| 109 | </Layout.Header> | |
| 2f6253 | 110 | )} |
| 31e271 | 111 | |
| 2f6253 | 112 | {useOpenBackTop && <BackTop target={getTarget} />} |
| 31e271 | 113 | |
| 2f6253 | 114 | <div class={[`default-layout__main`, fixedHeaderCls]}> |
| 陈 | 115 | {openPageLoading && ( |
| 116 | <FullLoading | |
| 117 | class={[`default-layout__loading`, !getPageLoading && 'hidden']} | |
| 118 | /> | |
| 119 | )} | |
| 120 | <LayoutContent /> | |
| 121 | </div> | |
| 122 | </> | |
| 123 | )} | |
| 124 | </Layout> | |
| 125 | </> | |
| 126 | )} | |
| 127 | </Layout> | |
| 128 | </> | |
| 129 | )} | |
| 130 | </Layout> | |
| 131 | ); | |
| 132 | }; | |
| 133 | }, | |
| 134 | }); | |
