feature: 添加根据背景图调整尺寸功能；添加样式转rem功能；暴露delete方法

app/web/lib/DownloadGuide/index.vue

 <template>
-  <div class="top-bar" v-if="isShowTopBar">
+  <div class="top-bar">
     <img class="top-bar-left" :src="leftImg" />
     <div class="top-bar-right">
       <a :href="href">
         <button class="top-bar-button">打开APP</button>
       </a>
-      <img @click="isShowTopBar = false" class="top-bar-close" src="./images/close@2x.png" />
+      <img class="top-bar-close" @click="close" src="./images/close@2x.png" />
     </div>
   </div>
 </template>
@@ -16,9 +16,9 @@
       href: String,
       leftImg: String
     },
-    data() {
-      return {
-        isShowTopBar: true,
+    methods: {
+      close() {
+        this.$emit('delete');
       }
     }
   }

app/web/page/activity/component/FreedomContainer/index.ts

+import { cloneDeep } from 'lodash';
 import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Action, Mutation, State, Getter } from 'vuex-class';
 import LoginForm from '@/lib/Form/index.vue';
 import { ContextMenu } from '@editor/mixins/contextMenu.mixin';
-import { cloneDeep } from 'lodash';
-import { Action, Mutation, State } from 'vuex-class';
+import { resizeDiv } from '@/service/utils.service';
 
 @Component({ components: { LoginForm }, name: 'FreedomContainer' })
 export default class FreedomContainer extends Vue {
+  @Getter('pageData') pageData;
   @State(state => state.editor.curChildIndex) curChildIndex;
+  @Mutation('UPDATE_PAGE_INFO') updatePageInfo;
 
   @Prop({type: Object, default: () => ({ child: [] })}) childItem;
   @Prop(String) backgroundImage;
@@ -14,11 +17,26 @@ export default class FreedomContainer extends Vue {
   transformStyle(styleObj) {
     const style = {};
     for (const key of Object.keys(styleObj)) {
-      style[key] = typeof styleObj[key] !== 'string' ? `${styleObj[key]}px` : styleObj[key];
+      if ( typeof styleObj[key] === 'number') {
+        style[key] = `${(styleObj[key] / 37.5).toFixed(2)}rem`;
+      } else {
+        style[key] = styleObj[key].includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(2)}rem` : styleObj[key];
+      }
       if (key === 'backgroundImage') {
         style.backgroundImage = `url(${style.backgroundImage})`;
       }
     }
     return style;
   }
+
+  mounted() {
+    // 根据背景图设置元素高度
+    const index = this.pageData?.elements?.findIndex(v => v.point?.responsive);
+    const { props: { backgroundImage }, point } = this.pageData?.elements[index] || { props: {}};
+    if (backgroundImage) {
+      resizeDiv(backgroundImage, null, null, (height) => {
+        this.updatePageInfo({ containerIndex: index, data: { ...this.pageData?.elements[index], point: { ...point, h: height ?? point.h } } });
+      });
+    }
+  }
 }
\ No newline at end of file

app/web/page/activity/view/activity/index.ts

@@ -6,13 +6,14 @@ import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
 import GridItem from '../../component/VueGridLayout/GridItem.vue';
 import LoginForm from '@/lib/Form/index.vue';
 import DownloadGuide from '@/lib/DownloadGuide/index.vue';
-import { Getter, State } from 'vuex-class';
+import { Getter, State, Mutation } from 'vuex-class';
 
 @Component({ components: { FreedomContainer, GridLayout, GridItem, LoginForm, DownloadGuide }, name: 'Activity'})
 export default class Activity extends Vue {
   @Getter('pageData') pageData;
   @State(state => state.editor.pageInfo.pageName) pageName;
   @State(state => state.editor.gridLayout.rowHeight) rowHeight;
+  @Mutation('DEL_ELEMENTS') delPageInfo;
 
   isLayoutComReady = false;
 
@@ -45,7 +46,7 @@ export default class Activity extends Vue {
 
   createStyle({h}) {
     return EASY_ENV_IS_NODE ? {
-      height: `${h * 50 + Math.max(0, h - 1) * 10}px`,
+      height: `${h * this.rowHeight}px`,
     } : {};
   }
 }
\ No newline at end of file

app/web/page/activity/view/activity/index.vue

@@ -20,7 +20,7 @@
   	             :h="item.point.h"
   	             :i="item.point.i"
   	             :key="item.point.i">
-  	      <component class="Dcmc-panel-com" :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="index" v-bind="item.props"></component>
+  	      <component class="Dcmc-panel-com" :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="index" @delete="delPageInfo(index)" v-bind="item.props"></component>
   	  </grid-item>
   	</grid-layout>
   </div>

app/web/page/editor/component/DynamicForm/index.ts

@@ -4,6 +4,7 @@ import { reduce, ceil, subtract, divide } from 'lodash';
 import { ContextMenu } from '@editor/mixins/contextMenu.mixin';
 import Upload from './component/Upload/index.vue';
 import ColorSelector from './component/ColorSelector/index.vue';
+import { resizeDiv } from '@/service/utils.service';
 
 @Component({ components: { Upload, ColorSelector }, name: 'DynamicForm' })
 export default class DynamicForm extends Mixins(ContextMenu) {
@@ -17,7 +18,6 @@ export default class DynamicForm extends Mixins(ContextMenu) {
 
   @Watch('curElement', { immediate: true, deep: true })
   onElementChange(newVal) {
-    console.log('newVal', newVal);
     newVal?.schame?.forEach(schame => {
       this.$set(this.form, schame.key, newVal.props[schame.key]);
     });
@@ -36,9 +36,15 @@ export default class DynamicForm extends Mixins(ContextMenu) {
     return result;
   }
 
-  resizedEvent(h, w) {
+  resizedEvent(h, w, responsive) {
     const elements = this.pageData.elements[this.curEleIndex];
-    this.updatePageInfo({ containerIndex: this.curEleIndex, data: { ...elements, point: { ...elements.point, w: w ?? elements.point.w, h: h ?? elements.point.h } } });
+    if (responsive) {
+      resizeDiv(this.form.backgroundImage, 667, 375, (imgHeight) => {
+        this.updatePageInfo({ containerIndex: this.curEleIndex, data: { ...elements, point: { ...elements.point, w: w ?? elements.point.w, h: imgHeight ?? elements.point.h, responsive: true } } });
+      });
+    } else {
+      this.updatePageInfo({ containerIndex: this.curEleIndex, data: { ...elements, point: { ...elements.point, w: w ?? elements.point.w, h: h ?? elements.point.h } } });
+    }
   }
 
   getStyle(oElement, sName) {

app/web/page/editor/component/DynamicForm/index.vue

@@ -15,8 +15,11 @@
             <Tooltip placement="top" content="全屏">
               <Button type="ghost" icon="arrow-resize" @click="resizedEvent(667, 667)"></Button>
             </Tooltip>
+            <Tooltip placement="top" content="根据背景图片自动调整宽高">
+              <Button type="ghost" icon="image" @click="resizedEvent(667, 375, true)" ></Button>
+            </Tooltip>
             <Tooltip placement="top" content="宽100%">
-              <Button type="ghost" icon="arrow-swap" @click="resizedEvent(null, 667)"></Button>
+              <Button type="ghost" icon="arrow-swap" @click="resizedEvent(null, 375)"></Button>
             </Tooltip>
             <Tooltip placement="top" content="高100%">
               <Button type="ghost" icon="arrow-swap" @click="resizedEvent(667, null)" ></Button>

app/web/page/editor/component/FreedomContainer/index.ts

@@ -41,7 +41,11 @@ export default class FreedomContainer extends Mixins(ContextMenu) {
   transformStyle(styleObj) {
     const style = {};
     for (const key of Object.keys(styleObj)) {
-      style[key] = typeof styleObj[key] !== 'string' ? `${styleObj[key]}px` : styleObj[key];
+      if ( typeof styleObj[key] === 'number') {
+        style[key] = `${(styleObj[key] / 37.5).toFixed(2)}rem`;
+      } else {
+        style[key] = styleObj[key].includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(2)}rem` : styleObj[key];
+      }
       if (key === 'backgroundImage') {
         style.backgroundImage = `url(${style.backgroundImage})`;
       }

app/web/page/store/modules/editor/index.ts

@@ -6,7 +6,8 @@ import {
   SET_DRAGABLE,
   COPY_OR_DELETE_PAGE_INFO,
   UPDATE_PAGE_INFO,
-  ADD_ELEMENTS，
+  ADD_ELEMENTS,
+  DEL_ELEMENTS,
   SET_CUR_ELE_INDEX,
   SET_CUR_CHILD_INDEX,
   RESET_PAGE_DATA,
@@ -126,6 +127,10 @@ export default class EditorModule implements Module<EditorState, RootState> {
         page.push(data);
       }
     },
+    [DEL_ELEMENTS](state, { containerIndex }) {
+      const page = (state.pageInfo.page as Page).elements;
+      page.splice(containerIndex, 1);
+    },
   };
 
   constructor(initState: EditorState = cloneDeep(defaultState)) {

app/web/page/store/modules/editor/state.ts

@@ -8,9 +8,9 @@ interface Point {
   x: number;
   y: number;
   w: number;
-  moved: boolean;
   h: number;
   i: number | string;
+  responsive: boolean; // 自定义属性, 表示是否根据背景图片调整宽高
 }
 
 interface CommonStyle {

app/web/page/store/modules/editor/type.ts

@@ -4,6 +4,7 @@ export const SET_DRAGABLE = 'SET_DRAGABLE';
 export const COPY_OR_DELETE_PAGE_INFO = 'COPY_OR_DELETE_PAGE_INFO';
 export const UPDATE_PAGE_INFO = 'UPDATE_PAGE_INFO';
 export const ADD_ELEMENTS = 'ADD_ELEMENTS';
+export const DEL_ELEMENTS = 'DEL_ELEMENTS';
 export const SET_CUR_ELE_INDEX = 'SET_CUR_ELE_INDEX';
 export const SET_CUR_CHILD_INDEX = 'SET_CUR_CHILD_INDEX';
 export const RESET_PAGE_DATA = 'RESET_PAGE_DATA';

app/web/service/utils.service.ts

@@ -38,3 +38,17 @@ export function isPhone(str) {
   }
   return false;
 }
+
+export function resizeDiv(imgUrl, clientHeight = 0, clientWidth = 0, callback) {
+  const img = new Image();
+  clientHeight = clientHeight || document.body.clientHeight;
+  clientWidth = clientWidth || document.body.clientWidth;
+  img.onload = function() {
+    const imgRealHeight = clientWidth * img.height / img.width;
+    console.log(img.width, img.height, imgRealHeight, clientHeight);
+    if (imgRealHeight > clientWidth) {
+      callback(imgRealHeight);
+    }
+  };
+  img.src = imgUrl;
+}