| 提交 | 用户 | age | ||
| 2f6253 | 1 | import { defineComponent, unref, onMounted, computed } from 'vue'; |
| 陈 | 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() { | |
| 968f79 | 22 | // ! 在这里才注册全局组件 |
| V | 23 | // ! 可以减少首屏代码体积 |
| 24 | // default layout是在登录后才加载的。所以不会打包到首屏去 | |
| 25 | registerGlobComp(); | |
| 26 | ||
| 2f6253 | 27 | // 获取项目配置 |
| 陈 | 28 | const { getFullContent } = useFullContent(); |
| 29 | ||
| 30 | const getProjectConfigRef = computed(() => { | |
| 31 | return appStore.getProjectConfig; | |
| 32 | }); | |
| 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 | }); | |
| 43 | const isShowMixHeaderRef = computed(() => { | |
| 44 | const { | |
| 45 | menuSetting: { type }, | |
| 46 | } = unref(getProjectConfigRef); | |
| 47 | return type !== MenuTypeEnum.SIDEBAR && unref(showHeaderRef); | |
| 48 | }); | |
| 49 | ||
| 50 | const showSideBarRef = computed(() => { | |
| 51 | const { | |
| 52 | menuSetting: { show, mode }, | |
| 53 | } = unref(getProjectConfigRef); | |
| 54 | return show && mode !== MenuModeEnum.HORIZONTAL && !unref(getFullContent); | |
| 55 | }); | |
| 56 | ||
| 57 | // const { currentRoute } = useRouter(); | |
| 58 | onMounted(() => { | |
| 59 | // Each refresh will request the latest user information, if you don’t need it, you can delete it | |
| 21d0ed | 60 | // userStore.getUserInfoAction({ userId: userStore.getUserInfoState.userId }); |
| 2f6253 | 61 | }); |
| 陈 | 62 | |
| 63 | // Get project configuration | |
| 64 | // const { getFullContent } = useFullContent(currentRoute); | |
| 65 | function getTarget(): any { | |
| 66 | const { | |
| 67 | headerSetting: { fixed }, | |
| 68 | } = unref(getProjectConfigRef); | |
| 69 | return document.querySelector(`.default-layout__${fixed ? 'main' : 'content'}`); | |
| 70 | } | |
| 71 | return () => { | |
| 72 | const { getPageLoading, getLockInfo } = appStore; | |
| 73 | const { | |
| 74 | openPageLoading, | |
| 75 | useOpenBackTop, | |
| 76 | showSettingButton, | |
| 77 | multiTabsSetting: { show: showTabs }, | |
| 78 | headerSetting: { fixed }, | |
| 79 | } = unref(getProjectConfigRef); | |
| 80 | // const fixedHeaderCls = fixed ? ('fixed' + getLockMainScrollState ? ' lock' : '') : ''; | |
| 81 | const fixedHeaderCls = fixed | |
| 82 | ? 'fixed' + (unref(getLockMainScrollStateRef) ? ' lock' : '') | |
| 83 | : ''; | |
| 84 | const { isLock } = getLockInfo; | |
| 85 | return ( | |
| 86 | <Layout class="default-layout relative"> | |
| 87 | {() => ( | |
| 88 | <> | |
| 89 | {isLock && <LockPage />} | |
| 31e271 | 90 | |
| 2f6253 | 91 | {!unref(getFullContent) && unref(isShowMixHeaderRef) && unref(showHeaderRef) && ( |
| 陈 | 92 | <LayoutHeader /> |
| 93 | )} | |
| 31e271 | 94 | |
| 2f6253 | 95 | {showSettingButton && <SettingBtn />} |
| 31e271 | 96 | |
| 2f6253 | 97 | <Layout> |
| 陈 | 98 | {() => ( |
| 99 | <> | |
| 100 | {unref(showSideBarRef) && <LayoutSideBar />} | |
| 101 | <Layout class={[`default-layout__content`, fixedHeaderCls]}> | |
| 102 | {() => ( | |
| 103 | <> | |
| 104 | {!unref(getFullContent) && | |
| 105 | !unref(isShowMixHeaderRef) && | |
| 106 | unref(showHeaderRef) && <LayoutHeader />} | |
| 107 | ||
| 108 | {showTabs && !unref(getFullContent) && ( | |
| 109 | <Layout.Header class={`default-layout__tabs`}> | |
| 110 | {() => <MultipleTabs />} | |
| 111 | </Layout.Header> | |
| 112 | )} | |
| 31e271 | 113 | |
| 2f6253 | 114 | {useOpenBackTop && <BackTop target={getTarget} />} |
| 31e271 | 115 | |
| 2f6253 | 116 | <div class={[`default-layout__main`, fixedHeaderCls]}> |
| 陈 | 117 | {openPageLoading && ( |
| 118 | <FullLoading | |
| 119 | class={[`default-layout__loading`, !getPageLoading && 'hidden']} | |
| 120 | /> | |
| 121 | )} | |
| 122 | <LayoutContent /> | |
| 123 | </div> | |
| 124 | </> | |
| 125 | )} | |
| 126 | </Layout> | |
| 127 | </> | |
| 128 | )} | |
| 129 | </Layout> | |
| 130 | </> | |
| 131 | )} | |
| 132 | </Layout> | |
| 133 | ); | |
| 134 | }; | |
| 135 | }, | |
| 136 | }); | |
