feat: add `isMobile` mediaMatchs

src/BasicLayout.tsx

-import { computed, FunctionalComponent, CSSProperties, VNodeChild, VNode } from 'vue';
+import { computed, FunctionalComponent, CSSProperties, VNodeChild, VNode, unref } from 'vue';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import { withInstall } from 'ant-design-vue/es/_util/type';
@@ -8,10 +8,13 @@ import { WrapContent } from './WrapContent';
 import { default as Header, HeaderViewProps } from './Header';
 import { RenderVNodeType, WithFalse } from './typings';
 import { getComponentOrSlot, PropRenderType, PropTypes } from './utils';
+import useMediaQuery from './hooks/useMediaQuery';
 import './BasicLayout.less';
 
 const defaultI18nRender = (key: string) => key;
 
+
+
 export type BasicLayoutProps = SiderMenuWrapperProps &
   HeaderViewProps & {
     pure?: boolean;
@@ -60,7 +63,6 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
     matchMenuKeys,
     navTheme,
     menuData,
-    isMobile,
     // defaultCollapsed,
   } = props;
   const isTop = computed(() => layout === 'top');
@@ -68,6 +70,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
   // const isMix = computed(() => layout === 'mix');
 
   const handleCollapse = (collapsed: boolean) => {
+    console.log('handleCollapse', collapsed);
     propsOnCollapse && propsOnCollapse(collapsed);
     emit('update:collapsed', collapsed);
   };
@@ -77,6 +80,8 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
   const handleSelect = (selectedKeys: string[] | false): void => {
     selectedKeys && emit('update:selected-keys', selectedKeys);
   };
+  const colSize = useMediaQuery();
+  const isMobile = computed(() => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile);
   const baseClassName = computed(() => `${props.prefixCls}-basicLayout`);
   // gen className
   const className = computed(() => {
@@ -87,6 +92,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
       [`${baseClassName.value}-is-children`]: props.isChildrenLayout,
       [`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar,
       [`${baseClassName.value}-${props.layout}`]: props.layout,
+      [colSize.value]: colSize.value,
     };
   });
 
@@ -116,7 +122,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
       ...props,
       hasSiderMenu: !isTop.value,
       menuData,
-      isMobile,
+      isMobile: unref(isMobile),
       onCollapse: handleCollapse,
       onSelect: handleSelect,
       onOpenKeys: handleOpenKeys,
@@ -143,6 +149,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
             {!isTop.value && (
               <SiderMenuWrapper
                 {...props}
+                isMobile={isMobile.value}
                 menuHeaderRender={
                   menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot()))
                 }

src/SiderMenu/SiderMenu.tsx

@@ -109,6 +109,8 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
     props.collapsed ? props.collapsedWidth : props.siderWidth,
   );
 
+  console.log('runtimeSideWidth', runtimeSideWidth);
+
   const classNames = computed(() => {
     return {
       [baseClassName]: true,

src/SiderMenu/index.tsx

@@ -9,8 +9,23 @@ export type SiderMenuWrapperProps = SiderMenuProps & Partial<PrivateSiderMenuPro
 
 const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = props => {
   return props.isMobile ? (
-    <Drawer>
-      <SiderMenu {...props} />
+    <Drawer
+      visible={!props.collapsed}
+      closable={false}
+      placement={'left'}
+      style={{
+        padding: 0,
+        height: '100vh',
+      }}
+      onClose={() => props.onCollapse(true)}
+      width={props.siderWidth}
+      bodyStyle={{ height: '100vh', padding: 0, display: 'flex', flexDirection: 'row' }}
+    >
+      <SiderMenu
+        {...props}
+        collapsed={props.isMobile ? false : props.collapsed}
+        splitMenus={false}
+       />
     </Drawer>
   ) : (
     <SiderMenu {...props} />

src/hooks/useMediaQuery.ts

+import { ref } from 'vue';
+
+export const MediaQueryEnum = {
+  xs: {
+    maxWidth: 575,
+    matchMedia: '(max-width: 575px)',
+  },
+  sm: {
+    minWidth: 576,
+    maxWidth: 767,
+    matchMedia: '(min-width: 576px) and (max-width: 767px)',
+  },
+  md: {
+    minWidth: 768,
+    maxWidth: 991,
+    matchMedia: '(min-width: 768px) and (max-width: 991px)',
+  },
+  lg: {
+    minWidth: 992,
+    maxWidth: 1199,
+    matchMedia: '(min-width: 992px) and (max-width: 1199px)',
+  },
+  xl: {
+    minWidth: 1200,
+    maxWidth: 1599,
+    matchMedia: '(min-width: 1200px) and (max-width: 1599px)',
+  },
+  xxl: {
+    minWidth: 1600,
+    matchMedia: '(min-width: 1600px)',
+  },
+};
+
+export type MediaQueryKey = keyof typeof MediaQueryEnum;
+
+/**
+ * loop query screen className
+ * Array.find will throw a error
+ * `Rendered more hooks than during the previous render.`
+ * So should use Array.forEach
+ */
+export const getScreenClassName = () => {
+  let className: MediaQueryKey = 'md';
+  // support ssr
+  if (typeof window === 'undefined') {
+    return className;
+  }
+  const mediaQueryKey = (Object.keys(MediaQueryEnum) as MediaQueryKey[]).find(key => {
+    const { matchMedia } = MediaQueryEnum[key];
+    if (window.matchMedia(matchMedia).matches) {
+      return true;
+    }
+    return false;
+  });
+  className = (mediaQueryKey as unknown) as MediaQueryKey;
+  return className;
+};
+
+const useMedia = () => {
+  const colSpan = ref<string>(getScreenClassName());
+
+  Object.keys(MediaQueryEnum).forEach(key => {
+    const { matchMedia } = MediaQueryEnum[key];
+    const query = window.matchMedia(matchMedia);
+    if (query.matches) {
+      colSpan.value = key;
+    }
+    query.onchange = e => {
+      if (e.matches) {
+        colSpan.value = key;
+      }
+    };
+  });
+
+  return colSpan;
+};
+
+export default useMedia;