feat: support long page mode(alpha);

ly525 · ly525 · commit 722031c92535 · 2020-05-10T23:50:36.000+08:00
#!zh: 支持长页面(alpha)
diff --git a/back-end/h5-api/api/work/documentation/1.0.0/work.json b/back-end/h5-api/api/work/documentation/1.0.0/work.json
@@ -1002,6 +1002,18 @@
           },
           "is_template": {
             "type": "boolean"
+          },
+          "mode": {
+            "type": "string",
+            "enum": [
+              "h5_swipper",
+              "h5_long_page",
+              "h5_form"
+            ]
+          },
+          "height": {
+            "type": "integer",
+            "default": 568
           }
         }
       },
@@ -1024,6 +1036,18 @@
           },
           "is_template": {
             "type": "boolean"
+          },
+          "mode": {
+            "type": "string",
+            "enum": [
+              "h5_swipper",
+              "h5_long_page",
+              "h5_form"
+            ]
+          },
+          "height": {
+            "type": "integer",
+            "default": 568
           }
         }
       }
diff --git a/back-end/h5-api/api/work/models/Work.settings.json b/back-end/h5-api/api/work/models/Work.settings.json
@@ -31,6 +31,18 @@
     },
     "is_template": {
       "type": "boolean"
+    },
+    "mode": {
+      "type": "enumeration",
+      "enum": [
+        "h5_swipper",
+        "h5_long_page",
+        "h5_form"
+      ]
+    },
+    "height": {
+      "type": "integer",
+      "default": 568
     }
   }
-}
+}
diff --git a/back-end/h5-api/api/workform/documentation/1.0.0/workform.json b/back-end/h5-api/api/workform/documentation/1.0.0/workform.json
@@ -550,6 +550,12 @@
               },
               "is_template": {
                 "type": "boolean"
+              },
+              "mode": {
+                "type": "string"
+              },
+              "height": {
+                "type": "integer"
               }
             }
           }
diff --git a/back-end/h5-api/extensions/documentation/documentation/1.0.0/full_documentation.json b/back-end/h5-api/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -1,14 +1,20 @@
 {
   "openapi": "3.0.0",
   "info": {
-    "version": "0.0.1",
-    "title": "#!zh: 鲁班H5-后端API 文档",
-    "description": "#!zh: 鲁班H5-后端API 文档（#!en: API docs for luban-h5）",
+    "version": "1.0.0",
+    "title": "DOCUMENTATION",
+    "description": "",
+    "termsOfService": "YOUR_TERMS_OF_SERVICE_URL",
     "contact": {
-      "name": "Feedback",
-      "url": "https://github.com/ly525/luban-h5/issues/new?title=[api-docs-feedback]"
+      "name": "TEAM",
+      "email": "contact-email@something.io",
+      "url": "mywebsite.io"
     },
-    "x-generation-date": "01/26/2020 5:36:49 PM"
+    "license": {
+      "name": "Apache 2.0",
+      "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
+    },
+    "x-generation-date": "05/10/2020 10:31:59 PM"
   },
   "x-strapi-config": {
     "path": "/documentation",
@@ -29,8 +35,8 @@
     }
   ],
   "externalDocs": {
-    "description": "#!zh 鲁班H5完整文档(#!en Full Docs for Luban-H5)",
-    "url": "https://ly525.github.io/luban-h5/"
+    "description": "Find out more",
+    "url": "https://strapi.io/documentation/3.0.0-beta.x/"
   },
   "security": [
     {
@@ -3706,6 +3712,18 @@
           },
           "is_template": {
             "type": "boolean"
+          },
+          "mode": {
+            "type": "string",
+            "enum": [
+              "h5_swipper",
+              "h5_long_page",
+              "h5_form"
+            ]
+          },
+          "height": {
+            "type": "integer",
+            "default": 568
           }
         }
       },
@@ -3728,6 +3746,18 @@
           },
           "is_template": {
             "type": "boolean"
+          },
+          "mode": {
+            "type": "string",
+            "enum": [
+              "h5_swipper",
+              "h5_long_page",
+              "h5_form"
+            ]
+          },
+          "height": {
+            "type": "integer",
+            "default": 568
           }
         }
       },
@@ -3767,6 +3797,12 @@
               },
               "is_template": {
                 "type": "boolean"
+              },
+              "mode": {
+                "type": "string"
+              },
+              "height": {
+                "type": "integer"
               }
             }
           }
diff --git a/front-end/h5/src/components/core/editor/canvas/edit.js b/front-end/h5/src/components/core/editor/canvas/edit.js
@@ -10,15 +10,16 @@ export default {
     contextmenuPos: []
   }),
   computed: {
-    ...mapState('editor', ['editingElement'])
+    ...mapState('editor', ['editingElement', 'work'])
   },
   methods: {
     ...mapActions('editor', [
       'setEditingElement',
       'setElementPosition',
       'setElementShape',
       'recordElementRect',
-      'elementManager'
+      'elementManager',
+      'updateWork'
     ]),
     // TODO #!zh: 优化代码
     // generate vertical line
@@ -141,6 +142,43 @@ export default {
         this.setEditingElement()
       }
     },
+    /**
+     * 更新作品高度
+     * @param {Number} height
+     */
+    updateWorkHeight (height) {
+      this.updateWork({ height })
+    },
+    /**
+     * TODO 封装 adjust editor scale 组件
+     * scale: height/width
+     * @param {MouseEvent} e
+     */
+    mousedownForAdjustLine (e) {
+      let startY = e.clientY
+      let startHeight = this.work.height
+
+      const canvasOuterWrapper = document.querySelector('#canvas-outer-wrapper')
+
+      let move = moveEvent => {
+        // !#zh 移动的时候，不需要向后代元素传递事件，只需要单纯的移动就OK
+        moveEvent.stopPropagation()
+        moveEvent.preventDefault()
+
+        let currY = moveEvent.clientY
+        let currentHeight = currY - startY + startHeight
+        this.updateWorkHeight(currentHeight)
+        // 交互效果：滚动条同步滚动至底部
+        canvasOuterWrapper && (canvasOuterWrapper.scrollTop = canvasOuterWrapper.scrollHeight)
+      }
+
+      let up = moveEvent => {
+        document.removeEventListener('mousemove', move, true)
+        document.removeEventListener('mouseup', up, true)
+      }
+      document.addEventListener('mousemove', move, true)
+      document.addEventListener('mouseup', up, true)
+    },
     /**
      * #!zh: renderCanvas 渲染中间画布
      * elements
@@ -251,6 +289,26 @@ export default {
                 onHideMenu={this.hideContextMenu}
               /> : null
           }
+          <div style={{
+            position: 'absolute',
+            top: `${this.work.height}px`,
+            width: '100%'
+          }}>
+            <div class="long-page-adjust">
+              <div class="adjust-line"></div>
+              <div class="adjust-button" onMousedown={this.mousedownForAdjustLine}><div class="indicator"></div></div>
+              <div class="adjust-tip">
+                <span>320 x</span>
+                <a-input-number
+                  size="small"
+                  style="margin: 0 4px; width:60px;"
+                  value={this.work.height}
+                  onChange={height => { this.updateWork({ height }) }}
+                />
+                <span>px</span>
+              </div>
+            </div>
+          </div>
         </div>
       )
     }
diff --git a/front-end/h5/src/components/core/editor/edit-panel/props.js b/front-end/h5/src/components/core/editor/edit-panel/props.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
 import { getVM, getComponentsForPropsEditor } from '../../../../utils/element'
+import RenderGlobalWorkPropsEditor from './props/global-work.vue'
 
 export default {
   data: () => ({
@@ -141,11 +142,14 @@ export default {
           }
         </a-form>
       )
+    },
+    renderWorkGlobalPropsPanel (h) {
+      return <RenderGlobalWorkPropsEditor />
     }
   },
   render (h) {
     const ele = this.editingElement
-    if (!ele) return (<span>{this.$t('editor.editPanel.common.empty')}</span>)
+    if (!ele) return this.renderWorkGlobalPropsPanel(h)
     this.mixinEnhancedPropsEditor(ele)
     return this.renderPropsEditorPanel(h, ele)
   },
diff --git a/front-end/h5/src/components/core/editor/edit-panel/props/global-work.vue b/front-end/h5/src/components/core/editor/edit-panel/props/global-work.vue
@@ -0,0 +1,45 @@
+<!--
+ * @Author: ly525
+ * @Date: 2020-05-10 23:10:52
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-05-10 23:20:22
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/edit-panel/props/global-work.vue
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: Do not edit
+ * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ -->
+<template>
+  <a-form :layout="formLayout">
+    <a-form-item
+      label="H5类型"
+    >
+      <a-radio-group default-value="h5_swipper" @change="handleChangeMode" size="small">
+        <a-radio-button value="h5_swipper">
+          翻页H5
+        </a-radio-button>
+        <a-radio-button value="h5_long_page">
+          长页面H5
+        </a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  data () {
+    return {
+      formLayout: 'vertical'
+    }
+  },
+  methods: {
+    ...mapActions('editor', [
+      'updateWork'
+    ]),
+    handleModeChange (e) {
+      this.updateWork({ mode: e.target.value })
+    }
+  }
+}
+</script>
diff --git a/front-end/h5/src/components/core/editor/index.js b/front-end/h5/src/components/core/editor/index.js
@@ -311,7 +311,7 @@ export default {
           <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '12px' }}>
             { this._renderMenuContent() }
           </a-layout-sider>
-          <a-layout>
+          <a-layout id="canvas-outer-wrapper">
             <div class="mode-toggle-wrapper">
               <a-radio-group
                 size="small"
@@ -330,7 +330,9 @@ export default {
               </a-radio-group>
             </div>
             <a-layout-content style={{ transform: `scale(${this.scaleRate})`, 'transform-origin': 'center top' }}>
-              <div class='canvas-wrapper'>
+              <div class='canvas-wrapper' style={{
+                height: `${this.work.height}px`
+              }}>
                 {/* { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) } */}
                 { this.isPreviewMode
                   ? <RenderPreviewCanvas elements={this.elements}/>
diff --git a/front-end/h5/src/components/core/models/work.js b/front-end/h5/src/components/core/models/work.js
@@ -2,7 +2,7 @@
  * @Author: ly525
  * @Date: 2019-11-24 18:51:58
  * @LastEditors: ly525
- * @LastEditTime: 2019-12-15 16:24:33
+ * @LastEditTime: 2020-05-10 23:23:40
  * @FilePath: /luban-h5/front-end/h5/src/components/core/models/work.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: work model
@@ -12,6 +12,7 @@ import Page from './page.js'
 
 class Work {
   constructor (work = {}) {
+    this.id = work.id
     this.title = work.title || '标题'
     this.description = work.description || '描述'
     this.pages = work.pages || [new Page()]
@@ -30,6 +31,13 @@ class Work {
 
     this.is_publish = false
     this.is_template = false
+    this.height = work.height || 568
+    /**
+     * 页面模式，枚举值
+     * h5_swipper 翻页H5
+     * h5_long_page 长页面H5
+     */
+    this.mode = work.mode || 'h5_swipper'
   }
 }
 
diff --git a/front-end/h5/src/components/core/styles/canvas-wrapper.scss b/front-end/h5/src/components/core/styles/canvas-wrapper.scss
diff --git a/front-end/h5/src/engine-entry.js b/front-end/h5/src/engine-entry.js
diff --git a/front-end/h5/src/store/modules/work.js b/front-end/h5/src/store/modules/work.js

Original file line number	Diff line number	Diff line change
`@@ -550,6 +550,12 @@`
`550`	`550`	`},`
`551`	`551`	`"is_template": {`
`552`	`552`	`"type": "boolean"`
	`553`	`+ },`
	`554`	`+ "mode": {`
	`555`	`+ "type": "string"`
	`556`	`+ },`
	`557`	`+ "height": {`
	`558`	`+ "type": "integer"`
`553`	`559`	`}`
`554`	`560`	`}`
`555`	`561`	`}`