feat: support mobile layout adaptation

src/layouts/default/index.vue

@@ -1,9 +1,9 @@
 <template>
   <Layout :class="prefixCls">
     <LayoutFeatures />
-    <LayoutHeader fixed ref="headerRef" v-if="getShowFullHeaderRef" />
+    <LayoutHeader fixed v-if="getShowFullHeaderRef" />
     <Layout>
-      <LayoutSideBar v-if="getShowSidebar" />
+      <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
       <Layout :class="`${prefixCls}__main`">
         <LayoutMultipleHeader />
         <LayoutContent />
@@ -14,21 +14,21 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent } from 'vue';
   import { Layout } from 'ant-design-vue';
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
   import LayoutHeader from './header/index.vue';
   import LayoutContent from './content/index.vue';
-  import LayoutSideBar from './sider';
-  import LayoutMultipleHeader from './header/LayoutMultipleHeader';
+  import LayoutSideBar from './sider/index.vue';
+  import LayoutMultipleHeader from './header/MultipleHeader.vue';
 
   import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { createLayoutContext } from './useLayoutContext';
 
   import { registerGlobComp } from '/@/components/registerGlobComp';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
 
   export default defineComponent({
     name: 'DefaultLayout',
@@ -47,11 +47,9 @@
       // default layout It is loaded after login. So it won’t be packaged to the first screen
       registerGlobComp();
 
-      const headerRef = ref<ComponentRef>(null);
-
       const { prefixCls } = useDesign('default-layout');
 
-      createLayoutContext({ fullHeader: headerRef });
+      const { getIsMobile } = useAppInject();
 
       const { getShowFullHeaderRef } = useHeaderSetting();
 
@@ -60,8 +58,8 @@
       return {
         getShowFullHeaderRef,
         getShowSidebar,
-        headerRef,
         prefixCls,
+        getIsMobile,
       };
     },
   });