From 9e527e4f2e331043a1f3bf7ef9f6eb92fdfbacd1 Mon Sep 17 00:00:00 2001
From: Oliver <1069035666@qq.com>
Date: Sat, 14 May 2022 06:35:23 +0000
Subject: [PATCH 1/3] =?UTF-8?q?Resizer=20=E7=A7=BB=E5=8A=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Resizer/Resizer.vue | 156 +++++++++++++++++++++++++++++
 src/components/Resizer/index.ts    |   4 +
 2 files changed, 160 insertions(+)
 create mode 100644 src/components/Resizer/Resizer.vue
 create mode 100644 src/components/Resizer/index.ts

diff --git a/src/components/Resizer/Resizer.vue b/src/components/Resizer/Resizer.vue
new file mode 100644
index 0000000..c709902
--- /dev/null
+++ b/src/components/Resizer/Resizer.vue
@@ -0,0 +1,156 @@
+<template>
+  <div @mousedown="onMouseDown" class="resizer" :style="getWrapStyleRef">
+    <div class="resiezer-toggler" @click="toggle" title="双击隐藏/显示">
+      <span class="resizer-content">
+        <slot v-if="$slots.default"></slot>
+        <span v-else>
+          <Icon :icon="getCaretIcon" />
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, reactive, ref, unref, watch } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { useEventListener } from '/@/hooks/event/useEventListener';
+  export default defineComponent({
+    name: 'Resizer',
+    components: { Icon },
+    props: {
+      position: {
+        type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
+        default: 'left',
+      },
+      collapsed: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['move', 'update:collapsed'],
+    setup(props, { emit }) {
+      const isCollapsed = ref<Boolean>(false);
+      const drift = reactive({
+        lastX: 0,
+        lastY: 0,
+      });
+
+      watch(
+        () => props.collapsed,
+        () => {
+          isCollapsed.value = props.collapsed;
+        },
+        { immediate: true },
+      );
+
+      const getWrapStyleRef = computed(() => {
+        if (props.position === 'top' || props.position === 'bottom') {
+          return { width: '100%', cursor: isCollapsed.value ? 'default' : 's-resize' };
+        } else {
+          return { cursor: isCollapsed.value ? 'default' : 'w-resize' };
+        }
+      });
+
+      const getCaretIcon = computed(() => {
+        if (!isCollapsed.value && props.position == 'top') {
+          return 'ant-design:caret-up-outlined';
+        }
+        if (!isCollapsed.value && props.position == 'bottom') {
+          return 'ant-design:caret-down-outlined';
+        }
+        if (!isCollapsed.value && props.position == 'left') {
+          return 'ant-design:caret-left-outlined';
+        }
+        if (!isCollapsed.value && props.position == 'right') {
+          return 'ant-design:caret-right-outlined';
+        }
+        if (isCollapsed.value && props.position == 'top') {
+          return 'ant-design:caret-down-outlined';
+        }
+        if (isCollapsed.value && props.position == 'bottom') {
+          return 'ant-design:caret-up-outlined';
+        }
+        if (isCollapsed.value && props.position == 'left') {
+          return 'ant-design:caret-right-outlined';
+        }
+        if (isCollapsed.value && props.position == 'right') {
+          return 'ant-design:caret-left-outlined';
+        }
+        return 'ant-design:caret-right-outlined';
+      });
+
+      useEventListener({
+        el: document,
+        name: 'mouseup',
+        listener: onMouseUp,
+        wait: 0,
+      });
+
+      // document.addEventListener('mouseup', onMouseUp);
+
+      function onMouseDown(event) {
+        if (isCollapsed.value) {
+          return;
+        }
+        drift.lastX = event.screenX;
+        drift.lastY = event.screenY;
+        document.addEventListener('mousemove', onMouseMove);
+      }
+
+      function onMouseMove(event) {
+        emit('move', event, drift.lastX - event.screenX, drift.lastY - event.screenY);
+        drift.lastX = event.screenX;
+        drift.lastY = event.screenY;
+      }
+
+      function onMouseUp() {
+        if (isCollapsed.value) {
+          return;
+        }
+        document.removeEventListener('mousemove', onMouseMove);
+        drift.lastX = 0;
+        drift.lastY = 0;
+      }
+
+      function toggle() {
+        isCollapsed.value = !isCollapsed.value;
+        emit('update:collapsed', isCollapsed.value);
+      }
+
+      return {
+        getWrapStyleRef,
+        ...unref(props),
+        getCaretIcon,
+        onMouseDown,
+        toggle,
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+  .resizer {
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2px;
+    .resiezer-toggler {
+      padding: 2px;
+      cursor: pointer;
+      .resizer-content {
+        font-size: 10px;
+        color: @text-color-secondary;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        -khtml-user-select: none;
+        user-select: none;
+      }
+      :hover {
+        background-color: @border-color-base;
+        border-radius: @border-radius-base;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Resizer/index.ts b/src/components/Resizer/index.ts
new file mode 100644
index 0000000..e67e708
--- /dev/null
+++ b/src/components/Resizer/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils/index';
+import resizer from './src/Resizer.vue';
+
+export const Resizer = withInstall(resizer);
\ No newline at end of file
-- 
Gitee


From 8d9521c88999b9e1b232cbc9c1aa1d498b927315 Mon Sep 17 00:00:00 2001
From: Oliver <1069035666@qq.com>
Date: Sat, 14 May 2022 06:36:32 +0000
Subject: [PATCH 2/3] =?UTF-8?q?sider=20=E5=8F=AF=E4=BB=A5=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E7=A7=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Page/src/PageWrapper.vue | 27 ++++++++++++++++---------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index b4c5bd7..0b26fc8 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -37,20 +37,15 @@
           :collapsedWidth="0"
           :collapsible="true"
           :trigger="null"
-          :width="sidebarWidth"
+          :width="getSidebarWidth"
           :breakpoint="sidebarBreakpoint"
           @breakpoint="onBreakpoint"
         >
           <div class="sidebar-content" :style="getSidebarContentStyle">
             <slot name="sidebar"></slot>
           </div>
-          <div class="sidebar-close" v-if="!collapsed" @click="collapsed = !collapsed">
-            <Icon icon="ant-design:double-left-outlined" />
-          </div>
-          <div class="sidebar-open" v-else @click="collapsed = !collapsed">
-            <Icon icon="ant-design:double-right-outlined" />
-          </div>
         </a-layout-sider>
+        <Resizer position="left" v-model:collapsed="collapsed" @move="onSiderMove" />
         <a-layout-content>
           <slot></slot>
         </a-layout-content>
@@ -82,11 +77,11 @@
   import { PageHeader } from 'ant-design-vue';
   import { useContentHeight } from '/@/hooks/web/useContentHeight';
   import { PageWrapperFixedHeightKey } from '..';
-  import { Icon } from '/@/components/Icon';
+  import { Resizer } from '/@/components/Resizer';
 
   export default defineComponent({
     name: 'PageWrapper',
-    components: { PageFooter, PageHeader, Icon },
+    components: { PageFooter, PageHeader, Resizer },
     inheritAttrs: false,
     props: {
       title: propTypes.string,
@@ -112,12 +107,17 @@
       const footerRef = ref(null);
       const { prefixCls } = useDesign('page-wrapper');
       const sidebar = !!slots.sidebar;
+      const offsetXmoved = ref(0);
 
       provide(
         PageWrapperFixedHeightKey,
         computed(() => props.fixedHeight),
       );
 
+      const getSidebarWidth = computed(() => {
+        return props.sidebarWidth + offsetXmoved.value;
+      });
+
       const getIsContentFullHeight = computed(() => {
         return props.contentFullHeight || sidebar;
       });
@@ -238,6 +238,11 @@
       function onBreakpoint(broken: boolean) {
         if (broken) collapsed.value = true;
       }
+      function onSiderMove(_event, offsetX: number) {
+        //向右移动是负数
+        console.log(offsetX);
+        offsetXmoved.value = offsetXmoved.value - offsetX;
+      }
 
       return {
         getContentStyle,
@@ -252,8 +257,10 @@
         omit,
         getContentClass,
         getSidebarContentStyle,
+        getSidebarWidth,
         sidebar,
         collapsed,
+        onSiderMove,
         onBreakpoint,
       };
     },
@@ -321,7 +328,7 @@
 
       &-content {
         // margin: 15px 0 0 15px;
-        margin-right: 15px;
+        // margin-right: 15px;
         height: calc(100% - 29px);
       }
 
-- 
Gitee


From 2908febb844f8cd74b7ed137c76e4f4b05c6a944 Mon Sep 17 00:00:00 2001
From: Oliver <1069035666@qq.com>
Date: Sat, 14 May 2022 06:40:58 +0000
Subject: [PATCH 3/3] console

---
 src/components/Page/src/PageWrapper.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index 0b26fc8..e6efee5 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -240,7 +240,6 @@
       }
       function onSiderMove(_event, offsetX: number) {
         //向右移动是负数
-        console.log(offsetX);
         offsetXmoved.value = offsetXmoved.value - offsetX;
       }
 
-- 
Gitee