feat: 支持自动高度

client/config/index.js

@@ -9,7 +9,7 @@ const configDict = {
         baseURL: 'http://localhost:3333'
     },
     production: {
-        baseURL: 'http://localhost:3333'
+        baseURL: 'https://h5-editor.jydev.jianyu360.com'
     }
 }
 

client/mixins/elementEvents.js

@@ -11,7 +11,11 @@ export default {
     _event_link(eventData) {
       return new Promise((resolve) => {
         if (eventData.url) {
-          window.location.href = eventData.url;
+          if (eventData.target === '_blank') {
+            window.open(eventData.url)
+          } else {
+            window.location.href = eventData.url
+          }
         }
         resolve()
       })

client/pages/editor/DataModel.js

@@ -42,6 +42,90 @@ let elementConfig = {
     value: '', // 绑定值
     valueType: 'String' // 值类型
   }
+
+let pcElementConfig = {
+  elName: '', // 组件名
+  animations: [], // 图层的动画,可以支持多个动画
+  commonStyle: { //公共样式，默认样式
+    position: 'unset',
+    width: '100%',
+    height: 'auto',
+    top: 0,
+    left: 0,
+    rotate: 0,
+    paddingTop: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingBottom: 0,
+    marginTop: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    borderWidth: 0,
+    borderColor: '',
+    borderStyle: 'solid',
+    borderRadius: 0,
+    boxShadow: '',
+    fontSize: 16,
+    fontWeight: 500,
+    lineHeight: 1.4,
+    letterSpacing: 0,
+    textAlign: 'center',
+    color: '#000000',
+    backgroundColor: '',
+    backgroundImage: '',
+    backgroundSize: 'cover',
+    opacity: 1,
+    zIndex: 1
+  },
+  events: [], // 事件
+  propsValue: {}, // 属性参数
+  value: '', // 绑定值
+  valueType: 'String' // 值类型
+}
+
+let longElementConfig = {
+  elName: '', // 组件名
+  animations: [], // 图层的动画,可以支持多个动画
+  commonStyle: { //公共样式，默认样式
+    position: 'unset',
+    width: '100%',
+    height: 'auto',
+    top: 0,
+    left: 0,
+    rotate: 0,
+    paddingTop: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingBottom: 0,
+    marginTop: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    borderWidth: 0,
+    borderColor: '',
+    borderStyle: 'solid',
+    borderRadius: 0,
+    boxShadow: '',
+    fontSize: 16,
+    fontWeight: 500,
+    lineHeight: 1.4,
+    letterSpacing: 0,
+    textAlign: 'center',
+    color: '#000000',
+    backgroundColor: '',
+    backgroundImage: '',
+    backgroundSize: 'cover',
+    opacity: 1,
+    zIndex: 1
+  },
+  events: [], // 事件
+  propsValue: {}, // 属性参数
+  value: '', // 绑定值
+  valueType: 'String' // 值类型
+}
+
+
   // 页面配置信息字段
 let pageConfig = {
     name: '',
@@ -73,7 +157,7 @@ let projectConfig = {
 }
 
 
-let getElementConfig = function(element, extendStyle = {}) {
+let getElementConfig = function(element, extendStyle = {}, pageMode) {
   let elementData = cloneDeep(element)
   let type = elementData.valueType || 'String' // 默认string类型
   let dict = {
@@ -84,7 +168,18 @@ let getElementConfig = function(element, extendStyle = {}) {
     'Number': 0
       // 待扩展数据类型
   }
-  let elementConfigData = cloneDeep(elementConfig)
+  let modeElementConfig = elementConfig
+  switch (pageMode) {
+    case 'pc': {
+      modeElementConfig = pcElementConfig
+      break
+    }
+    case 'longPage': {
+      modeElementConfig = longElementConfig
+      break
+    }
+  }
+  let elementConfigData = cloneDeep(modeElementConfig)
   let config = {
       uuid: createUUID(),
       ...elementConfigData,
@@ -132,10 +227,12 @@ let getProjectConfig = function(pageType) {
   })
   switch (pageType) {
     case 'longPage': {
+      project.height = 'auto'
       break
     }
     case 'pc': {
       project.width = 1200
+      project.height = 'auto'
       break
     }
   }

client/pages/editor/Index.vue

@@ -401,6 +401,7 @@ export default {
       html2canvas(el, {
         logging: true,
         proxy: `${this.$config.baseURL}/html2canvas/corsproxy`,
+        scale: this.projectData.pageMode === 'pc' ? 0.1 : 0.5
       }).then((canvas) => {
         let url = canvas.toDataURL("image/jpeg");
         this.$store.commit("updateCoverImage", url);

client/pages/editor/components/editor-panel/Index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="editor-pane" @click="handleClickCanvas" ref="editorPane">
+  <div class="editor-pane" @click="handleClickCanvas" ref="editorPane" :class="'is-' + projectData.pageMode">
     <div class="editor-pane-inner">
-      <div class="editor-main" :style="{transform: 'scale('+scale+')', width: computedPage.width + 'px', height: computedPage.height + 'px'}">
+      <div class="editor-main" :style="{transform: 'scale('+scale+')', width: computedPage.width + 'px', height: computedPage.height, 'min-height': computedPage.minHeight }">
      <!-- //画布标尺未启用 -->
       <!-- <rule :w="ruleWidth" :h="ruleHeight" ref="rule" style="z-index:0;" /> -->
         <div class="page-preview-wrapper" ref="canvas-panel" id="canvas-panel" :style="getCommonStyle(activePage.commonStyle)">
@@ -132,10 +132,13 @@
 				}
       },
       computedPage () {
-        return {
+        const pageStyle = {
           width: this.projectData.width,
-          height: this.projectData.height
+          minHeight: '644px',
+          height: typeof this.projectData.height === Number ? (this.projectData.height + 'px') : 'auto'
         }
+
+        return pageStyle
       },
       computedMaxPageHeight () {
         const maxHeights = this.activePage.elements.map(v => v.commonStyle.top + v.commonStyle.height).sort((a, b) => b - a)
@@ -202,6 +205,21 @@
     background-size: 26px 26px;
     display: flex;
     justify-content: center;
+
+    &.is-pc {
+      .source-form {
+        max-width: 375px;
+      }
+      //.components-edit-shape {
+      //  position: unset !important;
+      //  width: 100% !important;
+      //}
+      //.element-on-edit-pane {
+      //  position: unset !important;
+      //  width: 100% !important;
+      //  height: auto !important;
+      //}
+    }
   }
 
   .editor-pane-inner {

client/plugins/SourceForm/src/index.vue

@@ -170,9 +170,11 @@ import $axios from "@/service/httpServer";
   flex-direction: column;
 }
 .source-form {
-
+  max-width: 375px;
+  margin: 0 auto;
   width: 100%;
   height: 100%;
+  padding: 16px 0;
 
   ::v-deep {
     .van-cell {

client/store/modules/editor.js

@@ -143,7 +143,22 @@ const actions = {
         elData.defaultStyle.top = getters.computedActivePageMaxHeight() || 0
       }
     }
-    let data = editorProjectConfig.getElementConfig(elData, { zIndex: activePage.elements.length + 1 })
+
+    const pageMode = getters.activePageMode()
+    switch (pageMode) {
+      case 'pc': {
+        elData.defaultStyle.width = '100%'
+        elData.defaultStyle.height = 'auto'
+        break
+      }
+      case 'longPage': {
+        elData.defaultStyle.width = '100%'
+        elData.defaultStyle.height = 'auto'
+        break
+      }
+    }
+
+    let data = editorProjectConfig.getElementConfig(elData, { zIndex: activePage.elements.length + 1 }, pageMode)
     commit('addElement', data);
     commit('setActiveElementUUID', data.uuid)
     commit('addHistoryCache', data.elName)
@@ -579,6 +594,9 @@ const getters = {
     }
     return state.projectData.pages.find(v => { return v.uuid === state.activePageUUID })
   },
+  activePageMode () {
+    return state.projectData.pageMode || 'h5'
+  },
   computedActivePageMaxHeight () {
     const maxHeights = this.activePage().elements.map(v => v.commonStyle.top + v.commonStyle.height).sort((a, b) => b - a)
     return maxHeights[0]

engine-template/engine-pc/src/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="engine-template-wrapper">
+  <div class="engine-template-wrapper is-pc">
     <div class="relative" v-for="(page, i) in pageData.pages" :key="i"
          :style="getCommonStyle(page.commonStyle)">
       <!--页面内容区域-->
       <div class="quark-page-wrapper"
-           :style="getCommonStyle({...page.commonStyle, top: pageTop, height: pageData.height, width: pageData.width, position: 'relative'}, scalingRatio)">
+           :style="getCommonStyle({...page.commonStyle, position: 'relative'}, scalingRatio)">
         <componentsTemplate
             v-for="(item, index) in page.elements"
             :key="index"

service/model/page.js

@@ -19,7 +19,7 @@ module.exports = app => {
       ref: "user"
     },
     width: { type: Number, default: 375 }, // 页面宽
-    height: { type: Number, default: 611 }, // 页面高度
+    height: { type: Schema.Types.Mixed, default: 644 }, // 页面高度
     pageMode: { type: String, default: 'h5' }, // 渲染模式
     flipType: { type: Number, default: 0 }, // 翻页模式
     slideNumber: { type: Boolean, default: false }, // 翻页是否显示页码翻页指示
@@ -38,4 +38,4 @@ module.exports = app => {
     }
   }, { timestamps: { createdAt: 'created', updatedAt: 'updated' } })
   return mongoose.model('page', schema);
-};
+};