perf(tabs): perf multiple-tabs

src/layouts/default/index.less

-@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;
-  }
-}

src/layouts/default/index.tsx

-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<ComponentRef>(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 (
-        <Layout class="default-layout">
-          {() => (
-            <>
-              <LayoutFeatures />
-
-              {unref(getShowFullHeaderRef) && <LayoutHeader fixed={true} ref={headerRef} />}
-
-              <Layout>
-                {() => (
-                  <>
-                    {unref(getShowSidebar) && <LayoutSideBar />}
-                    <Layout class="default-layout__main">
-                      {() => (
-                        <>
-                          <LayoutMultipleHeader />
-                          <LayoutContent />
-                          <LayoutFooter />
-                        </>
-                      )}
-                    </Layout>
-                  </>
-                )}
-              </Layout>
-            </>
-          )}
-        </Layout>
-      );
-    };
-  },
-});

src/layouts/default/useLayoutContext.ts

@@ -6,12 +6,12 @@ export interface LayoutContextProps {
   isMobile: Ref<boolean>;
 }
 
-const layoutContextInjectKey: InjectionKey<LayoutContextProps> = Symbol();
+const key: InjectionKey<LayoutContextProps> = Symbol();
 
 export function createLayoutContext(context: LayoutContextProps) {
-  return createContext<LayoutContextProps>(context, layoutContextInjectKey);
+  return createContext<LayoutContextProps>(context, key);
 }
 
 export function useLayoutContext() {
-  return useContext<LayoutContextProps>(layoutContextInjectKey);
+  return useContext<LayoutContextProps>(key);
 }