feat: support resize the props panel; !#zh: 支持拖动调整右侧编辑面板

Author: ly525

front-end/h5/src/components/core/editor/canvas/edit.js

@@ -294,8 +294,8 @@ export default {
             top: `${this.work.height}px`,
             width: '100%'
           }}>
-            <div class="long-page-adjust">
-              <div class="adjust-line"></div>
+            <div class="adjust-line-wrapper adjust-line-wrapper-h">
+              <div class="adjust-line adjust-line-h"></div>
               <div class="adjust-button" onMousedown={this.mousedownForAdjustLine}><div class="indicator"></div></div>
               <div class="adjust-tip">
                 <span>320 x</span>

front-end/h5/src/components/core/editor/index.js

@@ -20,6 +20,7 @@ import LogoOfHeader from '@/components/common/header/logo.js'
 import ExternalLinksOfHeader from '@/components/common/header/links.js'
 import LangSelect from '@/components/common/header/LangSelect.vue'
 import Feedback from '@/components/common/feedback/index'
+import AdjustLineV from '@/components/core/support/adjust-line/vertical'
 
 // const sidebarMenus = [
 //   {
@@ -113,7 +114,8 @@ export default {
     isPreviewMode: false,
     activeTabKey: '属性',
     previewVisible: false,
-    scaleRate: 1
+    scaleRate: 1,
+    propsPanelWidth: 320
   }),
   computed: {
     ...mapState('editor', {
@@ -349,6 +351,9 @@ export default {
               </div>
             </a-layout-content>
           </a-layout>
+          <AdjustLineV onLineMove={(offset) => {
+            this.propsPanelWidth += offset
+          }} />
           <a-layout-sider width="40" theme='light' style={{ background: '#fff', border: '1px solid #eee' }}>
             {/* <div>
               <a-button shape="circle" icon="search" type="link" />
@@ -366,7 +371,7 @@ export default {
               }
             </a-button-group>
           </a-layout-sider>
-          <a-layout-sider width="320" theme='light' style={{ background: '#fff', padding: '0 0 0 12px' }}>
+          <a-layout-sider width={this.propsPanelWidth} data-set-width={this.propsPanelWidth} theme='light' style={{ background: '#fff', padding: '0 0 0 12px' }}>
             <a-tabs
               style="height: 100%;"
               tabBarGutter={10}

front-end/h5/src/components/core/styles/canvas-wrapper.scss

@@ -35,40 +35,3 @@ $designerWidthHalf: $designerWidth / 2;
   text-align: center;
 }
 
-
-.long-page-adjust {
-  .adjust-line {
-    width: 100%;
-    height: 1px;
-    background-color: #1593ff;
-  }
-
-  .adjust-button {
-    margin: 0 auto;
-    width: 30px;
-    height: 10px;
-    border-radius: 2px;
-    padding-top: 4px;
-    cursor: ns-resize;
-    background-color: #1593ff;
-
-    .indicator {
-        margin: 0 auto;
-        width: 10px;
-        height: 1px;
-        background-color: #ccd5db;
-    }
-  }
-
-  .adjust-tip {
-    letter-spacing: 1px;
-    padding: 0;
-    height: 24px;
-    margin: 2px auto 0;
-    text-align: center;
-    line-height: 24px;
-    font-size: 12px;
-    color: #868484;
-    vertical-align: middle;
-  }
-}

front-end/h5/src/components/core/styles/index.scss

@@ -91,4 +91,80 @@
   border-left: .2rem solid #dfe2e5;
   // margin: 1rem 0;
   padding: .25rem 0 .25rem 0.5rem;
+}
+
+.ant-layout-sider {
+  // 防止拖动延迟
+  transition: none !important;
+}
+
+$activeHoverColor: #1593ff;
+.adjust-line-wrapper {
+  .adjust-line {
+    border: 1px solid #eee;
+  }
+
+  .adjust-line-h {
+    width: 100%;
+  }
+
+  .adjust-line-v {
+    height: 100%;
+  }
+
+  .adjust-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    width: 30px;
+    height: 10px;
+    background-color: #fff;
+
+    .indicator {
+      margin: 0 auto;
+      width: 10px;
+      height: 1px;
+      background-color: #ccd5db;
+    }
+  }
+
+  &:hover {
+    .adjust-button {
+      background-color: $activeHoverColor;
+    }
+
+    .adjust-line {
+      border-color: $activeHoverColor;
+    }
+  }
+}
+
+.adjust-line-wrapper-h {
+  cursor: ns-resize;
+
+  .adjust-tip {
+    letter-spacing: 1px;
+    padding: 0;
+    height: 24px;
+    margin: 2px auto 0;
+    text-align: center;
+    line-height: 24px;
+    font-size: 12px;
+    color: #868484;
+    vertical-align: middle;
+  }
+}
+
+.adjust-line-wrapper-v {
+  position: relative;
+  height: 100%;
+  cursor: ew-resize;
+
+  .adjust-button {
+    position: absolute;
+    right: -10px;
+    top: 50%;
+    transform: rotate(90deg);
+  }
 }

front-end/h5/src/components/core/support/adjust-line/vertical.js

@@ -0,0 +1,29 @@
+export default {
+  methods: {
+    onMousedown (e) {
+      let startX = e.clientX
+      let move = moveEvent => {
+        moveEvent.preventDefault()
+        moveEvent.stopPropagation()
+        const offset = startX - moveEvent.clientX
+        this.$emit('lineMove', offset)
+        startX -= offset
+      }
+
+      let up = moveEvent => {
+        document.removeEventListener('mousemove', move, true)
+        document.removeEventListener('mouseup', up, true)
+      }
+      document.addEventListener('mousemove', move, true)
+      document.addEventListener('mouseup', up, true)
+    }
+  },
+  render () {
+    return <div class="adjust-line-wrapper adjust-line-wrapper-v" onMousedown={this.onMousedown}>
+      <div class="adjust-line adjust-line-v"></div>
+      <div class="adjust-button">
+        <div class="indicator"></div>
+      </div>
+    </div>
+  }
+}