feat: support mobile layout adaptation

src/layouts/default/sider/DragBar.vue

@@ -0,0 +1,67 @@
+<template>
+  <div :class="getClass" :style="getDragBarStyle" />
+</template>
+<script lang="ts">
+  import { defineComponent, computed, unref } from 'vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+
+  export default defineComponent({
+    name: 'DargBar',
+    props: {
+      mobile: Boolean,
+    },
+    setup(props) {
+      const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
+
+      const { prefixCls } = useDesign('darg-bar');
+      const getDragBarStyle = computed(() => {
+        if (unref(getCollapsed)) {
+          return { left: `${unref(getMiniWidthNumber)}px` };
+        }
+        return {};
+      });
+
+      const getClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--hide`]: !unref(getCanDrag) || props.mobile,
+          },
+        ];
+      });
+
+      return {
+        prefixCls,
+        getDragBarStyle,
+        getClass,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-darg-bar';
+
+  .@{prefix-cls} {
+    position: absolute;
+    top: 0;
+    right: -2px;
+    z-index: @side-drag-z-index;
+    width: 2px;
+    height: 100%;
+    cursor: col-resize;
+    border-top: none;
+    border-bottom: none;
+
+    &--hide {
+      display: none;
+    }
+
+    &:hover {
+      background: @primary-color;
+      box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
+    }
+  }
+</style>

src/layouts/default/sider/LayoutSider.tsx

@@ -12,6 +12,7 @@ import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
 import { useAppInject } from '/@/hooks/web/useAppInject';
 import { useDesign } from '/@/hooks/web/useDesign';
 
+import DragBar from './DragBar.vue';
 export default defineComponent({
   name: 'LayoutSideBar',
   setup() {
@@ -31,11 +32,11 @@ export default defineComponent({
 
     const { prefixCls } = useDesign('layout-sideBar');
 
-    const { getTriggerAttr, getTriggerSlot } = useTrigger();
-
     const { getIsMobile } = useAppInject();
 
-    const { renderDragLine } = useDragLine(sideRef, dragBarRef);
+    const { getTriggerAttr, getTriggerSlot } = useTrigger(getIsMobile);
+
+    useDragLine(sideRef, dragBarRef);
 
     const { getCollapsedWidth, onBreakpointChange, onCollapseChange } = useSiderEvent();
 
@@ -48,7 +49,7 @@ export default defineComponent({
     });
 
     const showClassSideBarRef = computed(() => {
-      return unref(getSplit) ? unref(getMenuHidden) : true;
+      return unref(getSplit) ? !unref(getMenuHidden) : true;
     });
 
     const getSiderClass = computed(() => {
@@ -57,7 +58,7 @@ export default defineComponent({
         {
           [`${prefixCls}--fixed`]: unref(getMenuFixed),
           hidden: !unref(showClassSideBarRef),
-          [`${prefixCls}--mix`]: unref(getIsMixMode),
+          [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
         },
       ];
     });
@@ -84,7 +85,7 @@ export default defineComponent({
             menuMode={unref(getMode)}
             splitType={unref(getSplitType)}
           />
-          {renderDragLine()}
+          <DragBar ref={dragBarRef} />
         </>
       );
     }
@@ -101,7 +102,7 @@ export default defineComponent({
             collapsible
             class={unref(getSiderClass)}
             width={unref(getMenuWidth)}
-            collapsed={unref(getCollapsed)}
+            collapsed={unref(getIsMobile) ? false : unref(getCollapsed)}
             collapsedWidth={unref(getCollapsedWidth)}
             theme={unref(getMenuTheme)}
             onCollapse={onCollapseChange}

src/layouts/default/sider/index.less

@@ -44,27 +44,6 @@
     z-index: 10;
   }
 
-  &__darg-bar {
-    position: absolute;
-    top: 0;
-    right: -2px;
-    z-index: @side-drag-z-index;
-    width: 2px;
-    height: 100%;
-    cursor: col-resize;
-    border-top: none;
-    border-bottom: none;
-
-    &.hide {
-      display: none;
-    }
-
-    &:hover {
-      background: @primary-color;
-      box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
-    }
-  }
-
   & .ant-layout-sider-trigger {
     height: 36px;
     line-height: 36px;

src/layouts/default/sider/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <Drawer
+    v-if="getIsMobile"
+    placement="left"
+    :class="prefixCls"
+    :width="getMenuWidth"
+    :getContainer="null"
+    :visible="!getCollapsed"
+    @close="handleClose"
+  >
+    <Sider />
+  </Drawer>
+  <Sider v-else />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  import Sider from './LayoutSider';
+  import { Drawer } from 'ant-design-vue';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  export default defineComponent({
+    name: 'SiderWrapper',
+    components: { Sider, Drawer },
+    setup() {
+      const { prefixCls } = useDesign('layout-sider-wrapper');
+      const { getIsMobile } = useAppInject();
+      const { setMenuSetting, getCollapsed, getMenuWidth } = useMenuSetting();
+
+      function handleClose() {
+        setMenuSetting({
+          collapsed: true,
+        });
+      }
+
+      return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth };
+    },
+  });
+</script>
+<style lang="less">
+  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-layout-sider-wrapper';
+  .@{prefix-cls} {
+    .ant-drawer-body {
+      height: 100vh;
+      padding: 0;
+    }
+
+    .ant-drawer-header-no-title {
+      display: none;
+    }
+  }
+</style>

src/layouts/default/sider/useLayoutSider.tsx

@@ -42,12 +42,17 @@ export function useSiderEvent() {
 /**
  * Handle related operations of menu folding
  */
-export function useTrigger() {
-  const { getTrigger } = useMenuSetting();
+export function useTrigger(getIsMobile: Ref<boolean>) {
+  const { getTrigger, getSplit } = useMenuSetting();
 
   const showTrigger = computed(() => {
     const trigger = unref(getTrigger);
-    return trigger !== TriggerEnum.NONE && trigger === TriggerEnum.FOOTER;
+
+    return (
+      trigger !== TriggerEnum.NONE &&
+      !unref(getIsMobile) &&
+      (trigger === TriggerEnum.FOOTER || unref(getSplit))
+    );
   });
 
   const getTriggerAttr = computed(() => {
@@ -77,14 +82,7 @@ export function useTrigger() {
  * @param dragBarRef
  */
 export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {
-  const { getMiniWidthNumber, getCollapsed, setMenuSetting, getCanDrag } = useMenuSetting();
-
-  const getDragBarStyle = computed(() => {
-    if (unref(getCollapsed)) {
-      return { left: `${unref(getMiniWidthNumber)}px` };
-    }
-    return {};
-  });
+  const { getMiniWidthNumber, getCollapsed, setMenuSetting } = useMenuSetting();
 
   onMounted(() => {
     nextTick(() => {
@@ -93,16 +91,6 @@ export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {
     });
   });
 
-  function renderDragLine() {
-    return (
-      <div
-        class={[`layout-sidebar__darg-bar`, { hide: !unref(getCanDrag) }]}
-        style={unref(getDragBarStyle)}
-        ref={dragBarRef}
-      />
-    );
-  }
-
   function handleMouseMove(ele: HTMLElement, wrap: HTMLElement, clientX: number) {
     document.onmousemove = function (innerE) {
       let iT = (ele as any).left + (innerE.clientX - clientX);
@@ -138,21 +126,22 @@ export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {
   }
 
   function changeWrapWidth() {
-    const ele = unref(dragBarRef) as any;
+    const ele = unref(dragBarRef)?.$el;
+    if (!ele) {
+      return;
+    }
     const side = unref(siderRef);
-
     const wrap = (side || {}).$el;
-    ele &&
-      (ele.onmousedown = (e: any) => {
-        wrap.style.transition = 'unset';
-        const clientX = e?.clientX;
-        ele.left = ele.offsetLeft;
-        handleMouseMove(ele, wrap, clientX);
-        removeMouseup(ele);
-        ele.setCapture?.();
-        return false;
-      });
+    ele.onmousedown = (e: any) => {
+      wrap.style.transition = 'unset';
+      const clientX = e?.clientX;
+      ele.left = ele.offsetLeft;
+      handleMouseMove(ele, wrap, clientX);
+      removeMouseup(ele);
+      ele.setCapture?.();
+      return false;
+    };
   }
 
-  return { renderDragLine };
+  return {};
 }