From f81c401959dda4b8d568c00786b691c21abbb59c Mon Sep 17 00:00:00 2001 From: vben Date: Sun, 13 Dec 2020 23:06:20 +0800 Subject: [PATCH] perf(tabs): perf multiple-tabs --- src/layouts/default/index.less | 17 ------ src/layouts/default/index.tsx | 75 ------------------------- src/layouts/default/useLayoutContext.ts | 6 +- 3 files changed, 3 insertions(+), 95 deletions(-) delete mode 100644 src/layouts/default/index.less delete mode 100644 src/layouts/default/index.tsx diff --git a/src/layouts/default/index.less b/src/layouts/default/index.less deleted file mode 100644 index 8ea4aeb0..00000000 --- a/src/layouts/default/index.less +++ /dev/null @@ -1,17 +0,0 @@ -@import (reference) '../../design/index.less'; - -.default-layout { - display: flex; - width: 100%; - min-height: 100%; - background: @content-bg; - flex-direction: column; - - > .ant-layout { - min-height: 100%; - } - - &__main { - margin-left: 1px; - } -} diff --git a/src/layouts/default/index.tsx b/src/layouts/default/index.tsx deleted file mode 100644 index eca9bc47..00000000 --- a/src/layouts/default/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import './index.less'; - -import { defineComponent, unref, ref } from 'vue'; -import { Layout } from 'ant-design-vue'; -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; - -import LayoutHeader from './header/LayoutHeader'; -import LayoutContent from './content/index.vue'; -import LayoutSideBar from './sider'; -import LayoutMultipleHeader from './header/LayoutMultipleHeader'; - -import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; -import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; -import { createLayoutContext } from './useLayoutContext'; - -import { registerGlobComp } from '/@/components/registerGlobComp'; -import { createBreakpointListen } from '/@/hooks/event/useBreakpoint'; -import { isMobile } from '/@/utils/is'; - -const LayoutFeatures = createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')); -const LayoutFooter = createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')); - -export default defineComponent({ - name: 'DefaultLayout', - setup() { - const headerRef = ref(null); - const isMobileRef = ref(false); - - createLayoutContext({ fullHeader: headerRef, isMobile: isMobileRef }); - - createBreakpointListen(() => { - isMobileRef.value = isMobile(); - }); - - // ! Only register global components here - // ! Can reduce the size of the first screen code - // default layout It is loaded after login. So it won’t be packaged to the first screen - registerGlobComp(); - - const { getShowFullHeaderRef } = useHeaderSetting(); - - const { getShowSidebar } = useMenuSetting(); - - return () => { - return ( - - {() => ( - <> - - - {unref(getShowFullHeaderRef) && } - - - {() => ( - <> - {unref(getShowSidebar) && } - - {() => ( - <> - - - - - )} - - - )} - - - )} - - ); - }; - }, -}); diff --git a/src/layouts/default/useLayoutContext.ts b/src/layouts/default/useLayoutContext.ts index 93b65323..b6e7351d 100644 --- a/src/layouts/default/useLayoutContext.ts +++ b/src/layouts/default/useLayoutContext.ts @@ -6,12 +6,12 @@ export interface LayoutContextProps { isMobile: Ref; } -const layoutContextInjectKey: InjectionKey = Symbol(); +const key: InjectionKey = Symbol(); export function createLayoutContext(context: LayoutContextProps) { - return createContext(context, layoutContextInjectKey); + return createContext(context, key); } export function useLayoutContext() { - return useContext(layoutContextInjectKey); + return useContext(key); } -- GitLab