重构代码提升性能

webapp/src/components/BgPanel.vue

@@ -1,68 +0,0 @@
-<template>
-  <div class="panel panel-bg">
-    <div class="clearfix"
-         v-if="panelTabState !== 1">
-      <el-button class="btn"
-                 type="success"
-                 @click="panelTabState = 1">更换背景</el-button>
-      <el-button class="btn"
-                 type="danger"
-                 @click="cleanBG">移除背景</el-button>
-    </div>
-    <div class="clearfix"
-         v-if="panelTabState === 1">
-      <PicPicker class="bgs"
-                 @uploaded="uploadImage"
-                 @style="style"></PicPicker>
-      <div class="bgs"
-           :style="{ backgroundImage: 'url(' + http + element.filePath + ')' }"
-           @click="addBG(element.filePath)"
-           v-for="element in picList"></div>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.panel-bg {
-  .btn {
-    float: left;
-    width: 48%;
-    margin-left: 1%;
-    margin-right: 1%;
-  }
-  .bgs {
-    float: left;
-    width: 80px;
-    height: 80px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    margin: 5px 5px;
-    &:hover {
-      border: 2px solid #18ccc0;
-      cursor: pointer;
-    }
-  }
-}
-</style>
-
-<script>
-export default {
-  props: {
-    element: {
-      type: Object
-    },
-    addBG: {
-      type: Function
-    },
-    cleanBG: {
-      type: Function
-    }
-  },
-  data () {
-    return {
-      panelTabState: 0
-    }
-  }
-}
-</script>

webapp/src/components/EditPanel.vue

@@ -4,30 +4,33 @@
       <div class="tab"
            :class="{ active: panelTabState === 0 }"
            @click="function () { panelTabState = 0 }">
-        <span v-if="panelState === 11">文本</span>
-        <span v-if="panelState === 12">元素</span>
+        <span v-show="panelState === 11">文本</span>
+        <span v-show="panelState === 12">元素</span>
       </div>
       <div class="tab"
            :class="{ active: panelTabState === 1 }"
            @click="function () { panelTabState = 1 }">动作</div>
     </div>
-    <el-form label-width="5em">
-      <div v-if="panelTabState === 0">
-        <!-- 文字编辑界面特有控件 -->
-        <template v-if="panelState === 11">
-          <el-form-item label="跳转链接">
-            <el-input v-model="element.href"></el-input>
-          </el-form-item>
-          <el-form-item label="文本内容">
-            <el-input v-model="element.text"
+    <div v-show="panelTabState === 0">
+      <!-- 文字编辑界面特有控件 -->
+      <div v-show="panelState === 11">
+        <div class="item">
+          <label>文本内容</label>
+          <div class="content">
+            <el-input class="input"
+                      v-model="element.text"
                       type="textarea"></el-input>
-          </el-form-item>
-          <el-form-item>
+          </div>
+        </div>
+        <div class="item">
+          <div class="content">
             <el-checkbox v-model="element.fontWeight"
                          true-label="bold"
                          false-label="normal">加粗</el-checkbox>
-          </el-form-item>
-          <el-form-item>
+          </div>
+        </div>
+        <div class="item">
+          <div class="content">
             <el-button size="small"
                        type="primary"
                        @click="element.textAlign = 'left'">左对齐</el-button>
@@ -37,53 +40,94 @@
             <el-button size="small"
                        type="primary"
                        @click="element.textAlign = 'right'">右对齐</el-button>
-          </el-form-item>
-          <el-form-item label="颜色">
-            <el-input type="color"
+          </div>
+        </div>
+        <div class="item">
+          <label>颜色</label>
+          <div class="content">
+            <el-input class="input"
+                      type="color"
                       v-model="element.color"></el-input>
-          </el-form-item>
-          <el-form-item label="字体大小">
+          </div>
+        </div>
+        <div class="item">
+          <label>字体大小</label>
+          <div class="content">
             <el-input-number v-model="element.fontSize"></el-input-number>
-          </el-form-item>
-          <el-form-item label="行高">
+          </div>
+        </div>
+        <div class="item">
+          <label>行高</label>
+          <div class="content">
             <el-input-number v-model="element.lineHeight"></el-input-number>
-          </el-form-item>
-          <el-form-item label="字体">
+          </div>
+        </div>
+        <div class="item">
+          <label>字体</label>
+          <div class="content">
             <el-input v-model="element.fontFamily"></el-input>
-          </el-form-item>
-        </template>
-        <!-- 通用控件-->
-        <el-form-item label="透明度">
+          </div>
+        </div>
+      </div>
+      <!-- 通用控件-->
+
+      <div class="item">
+        <label>跳转链接</label>
+        <div class="content">
+          <el-input v-model="element.href"></el-input>
+        </div>
+      </div>
+      <div class="item">
+        <label>透明度</label>
+        <div class="content">
           <el-slider v-model="element.opacity"></el-slider>
-        </el-form-item>
-        <el-form-item label="旋转">
+        </div>
+      </div>
+      <div class="item">
+        <label>旋转</label>
+        <div class="content">
           <el-slider v-model="element.transform"
-                     :max="359"></el-slider>
-        </el-form-item>
-        <el-form-item label="高"
-                      v-if="panelState !== 11">
+                    :max="359"></el-slider>
+        </div>
+      </div>
+      <div class="item"
+           v-show="panelState !== 11">
+        <label>高</label>
+        <div class="content">
           <el-input v-model="element.height">
             <template slot="append">px</template>
           </el-input>
-        </el-form-item>
-        <el-form-item label="宽">
+        </div>
+      </div>
+      <div class="item">
+        <label>宽</label>
+        <div class="content">
           <el-input v-model="element.width">
             <template slot="append">px</template>
           </el-input>
-        </el-form-item>
-        <el-form-item label="X轴坐标">
+        </div>
+      </div>
+      <div class="item">
+        <label>X轴坐标</label>
+        <div class="content">
           <el-input v-model="element.left">
             <template slot="append">px</template>
           </el-input>
-        </el-form-item>
-        <el-form-item label="Y轴坐标">
+        </div>
+      </div>
+      <div class="item">
+        <label>Y轴坐标</label>
+        <div class="content">
           <el-input v-model="element.top">
             <template slot="append">px</template>
           </el-input>
-        </el-form-item>
+        </div>
       </div>
-      <div v-if="panelTabState === 1">
-        <el-form-item label="动画库">
+    </div>
+    <div v-show="panelTabState === 1">
+      <div class="item">
+        <label>动画库</label>
+        <div class="content">
           <el-select placeholder="daneden/animate.css"
                      v-model="element.animatedName"
                      clearable>
@@ -91,30 +135,56 @@
                        :label="item"
                        :value="item"></el-option>
           </el-select>
-        </el-form-item>
-        <el-form-item label="是否循环">
-          <el-checkbox v-model="element.loop"></el-checkbox>
-        </el-form-item>
-        <el-form-item label="速度">
+        </div>
+      </div>
+      <div class="item">
+        <label>是否循环</label>
+        <div class="content">
+          <el-checkbox v-model="element.loop">循环</el-checkbox>
+        </div>
+      </div>
+      <div class="item">
+        <label>速度</label>
+        <div class="content">
           <el-slider v-model="element.duration"
                      :step="0.1"
                      :min="0"
                      :max="10"></el-slider>
-        </el-form-item>
-        <el-form-item label="延迟">
+        </div>
+      </div>
+      <div class="item">
+        <label>延迟</label>
+        <div class="content">
           <el-slider v-model="element.delay"
                      :step="0.1"
                      :min="0"
                      :max="10"></el-slider>
-        </el-form-item>
+        </div>
       </div>
-    </el-form>
+    </div>
   </div>
 </template>
 
 <style lang="less" scoped>
 .panel-edit {
   z-index: 1;
+  .item {
+    padding: 5px 0;
+    clear: both;
+    .content {
+      margin-left: 70px;
+    }
+  }
+  label {
+    text-align: right;
+    vertical-align: middle;
+    font-size: 14px;
+    color: #48576a;
+    line-height: 1;
+    width: 70px;
+    float: left;
+    padding: 11px 12px 11px 0;
+  }
 }
 
 .panel-tab {

webapp/src/components/ImgPanel.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <PicPicker class="ele"
+               @uploaded="uploadImage"></PicPicker>
+    <div class="ele"
+         :style="{ backgroundImage: 'url(' + http + element.filePath + ')' }"
+         @click="selectedImg(element)"
+         v-for="element in picList"></div>
+  </div>
+</template>
+
+<script>
+import appConst from '../util/appConst'
+import PicPicker from './PicturePicker'
+export default {
+  props: {
+    selectedImg: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      http: appConst.BACKEND_DOMAIN
+    }
+  },
+  computed: {
+    picList () {
+      return this.$store.state.editor.picList
+    }
+  },
+  methods: {
+    uploadImage (data) {
+      this.$store.dispatch('savePic', {
+        'imgData': data['base64'],
+        'themeId': this.themeId,
+        'width': data['width'],
+        'height': data['height']
+      })
+    }
+  },
+  components: {
+    PicPicker
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ele {
+  float: left;
+  width: 80px;
+  height: 80px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  margin: 5px 5px;
+  &:hover {
+    border: 2px solid #18ccc0;
+    cursor: pointer;
+  }
+}
+</style>

webapp/src/views/h5editor/index.vue

@@ -10,7 +10,7 @@
             <button class="func el-icon-edit" @click="togglePanel(1)" :class="{ active: panelState === 1 }"></button>
           </el-tooltip>
           <el-tooltip  effect="dark" content="新建素材" placement="left">
-            <button class="func el-icon-picture" @click="togglePanel(2)":class="{ active: panelState === 2 }"></button>
+            <button class="func el-icon-picture" @click="togglePanel(2)" :class="{ active: panelState === 2 }"></button>
           </el-tooltip>
           <el-tooltip  effect="dark" content="播放动画" placement="left">
             <button class="func el-icon-caret-right" @click="playAnimate"></button>
@@ -21,19 +21,32 @@
         </div>
         <div class="wrapper custom-scrollbar">
           <!-- 设置背景 0 -->
-          <BgPanel :addBG="addBG" :cleanBG="cleanBG"/>
+        <div class="panel panel-bg">
+          <div class="clearfix"
+              v-if="panelTabState !== 1">
+            <el-button class="btn"
+                      type="success"
+                      @click="panelTabState = 1">更换背景</el-button>
+            <el-button class="btn"
+                      type="danger"
+                      @click="cleanBG">移除背景</el-button>
+          </div>
+          <div class="clearfix"
+              v-if="panelTabState === 1">
+            <ImgPanel  :selectedImg="addBG"/>
+          </div>
+        </div>
           <!-- 添加文字 1 -->
-          <div class="panel panel-text" v-if="panelState === 1">
+          <div class="panel panel-text" v-show="panelState === 1">
             <div class="btn" @click="addTextElement('title')" style="font-size: 32px; font-weight: bold;">插入标题</div>
             <div class="btn" @click="addTextElement('plain')">插入文本</div>
           </div>
           <!-- 添加元素 2 -->
-          <div class="panel panel-element clearfix" v-if="panelState === 2">
-            <PicPicker class="ele" @uploaded="uploadImage"></PicPicker>
-            <div class="ele" :style="{ backgroundImage: 'url(' + http + element.filePath + ')' }" @click="addPicElement(element)" v-for="element in picList"></div>
+          <div class="panel panel-element clearfix" v-show="panelState === 2">
+            <ImgPanel :selectedImg="addPicElement"/>
           </div>
           <!-- 图层编辑面板 -->
-          <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10"/>
+          <EditPanel :element="element" :panelState="panelState" v-show="panelState > 10"/>
         </div>
       </div>
     </section>
@@ -50,7 +63,7 @@
   import HeaderEdit from '../../components/HeaderEdit'
   import EditPanel from '../../components/EditPanel'
   import SvgPanel from '../../components/SvgPanel'
-  import BgPanel from '../../components/BgPanel'
+  import ImgPanel from '../../components/ImgPanel'
   import appConst from '../../util/appConst'
   export default {
     data () {
@@ -60,6 +73,7 @@
         canvasWidth: 320,
         canvasHeight: 504,
         dialogSaveBeforeBack: false,
+        panelTabState: 0,
         picBase64: '',
         http: appConst.BACKEND_DOMAIN,
         releaseUrl: '',
@@ -68,8 +82,6 @@
       }
     },
     watch: {
-      picBase64 () {
-      },
       element () {
         let ele = this.$store.state.editor.editorElement
         let type = ele ? ele.type : 'null'
@@ -97,9 +109,6 @@
       element () {
         let ele = this.$store.state.editor.editorElement
         return ele || {}
-      },
-      picList () {
-        return this.$store.state.editor.picList
       }
     },
     methods: {
@@ -109,14 +118,6 @@
       getPicList (_id) {
         this.$store.dispatch('getPicListByThemeId', _id)
       },
-      uploadImage (data) {
-        this.$store.dispatch('savePic', {
-          'imgData': data['base64'],
-          'themeId': this.themeId,
-          'width': data['width'],
-          'height': data['height']
-        })
-      },
       addPicElement (ele) {
         // if (ele) {
         let obj = {}
@@ -134,8 +135,8 @@
         this.element.type = 'pic'
       },
 
-      addBG (src) {
-        this.$store.dispatch('addBGElement', { type: 'bg', imgSrc: src })
+      addBG (file) {
+        this.$store.dispatch('addBGElement', { type: 'bg', imgSrc: file.filePath })
       },
       cleanBG () {
         this.$store.dispatch('cleanBG')
@@ -192,16 +193,13 @@
       deleteElement () {
         this.$store.dispatch('deleteSelectedElement')
       },
-      style (obj) {
-        this.element.width = obj.width
-        this.element.height = obj.height
-      },
       togglePanel (code) {
+        console.log(code)
         this.panelState = code
       }
     },
     components: {
-      Overview, Page, PicPicker, appConst, PreView, HeaderEdit, EditPanel, SvgPanel, BgPanel
+      Overview, Page, PicPicker, appConst, PreView, HeaderEdit, EditPanel, SvgPanel, ImgPanel
     },
     mounted () {
       this.itemId = this.$route.query.itemId
@@ -312,20 +310,14 @@
       z-index: 2;
       background-color: #ececec;
     }
-    .panel-text {
+    .panel-bg {
       .btn {
-        height: 50px;
-        line-height: 50px;
-        text-align: center;
-        border: 2px solid transparent;
-        &:hover {
-          cursor: pointer;
-          border-color: #04b9c4;
-        }
+        float: left;
+        width: 48%;
+        margin-left: 1%;
+        margin-right: 1%;
       }
-    }
-    .panel-element {
-      .ele {
+      .bgs {
         float: left;
         width: 80px;
         height: 80px;
@@ -339,5 +331,17 @@
         }
       }
     }
+    .panel-text {
+      .btn {
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        border: 2px solid transparent;
+        &:hover {
+          cursor: pointer;
+          border-color: #04b9c4;
+        }
+      }
+    }
   }
 </style>

webapp/src/views/spaeditor/index.vue

@@ -24,7 +24,21 @@
         </div>
         <div class="wrapper custom-scrollbar">
           <!-- 设置背景 0 -->
-          <BgPanel :addBG="addBG" :cleanBG="cleanBG"/>
+        <div class="panel panel-bg">
+          <div class="clearfix"
+              v-if="panelTabState !== 1">
+            <el-button class="btn"
+                      type="success"
+                      @click="panelTabState = 1">更换背景</el-button>
+            <el-button class="btn"
+                      type="danger"
+                      @click="cleanBG">移除背景</el-button>
+          </div>
+          <div class="clearfix"
+              v-if="panelTabState === 1">
+            <ImgPanel :selectedImg="addBG"/>
+          </div>
+        </div>
           <!-- 添加文字 1 -->
           <div class="panel panel-text" v-if="panelState === 1">
             <div class="btn" @click="addTextElement('title')" style="font-size: 32px; font-weight: bold;">插入标题</div>
@@ -32,8 +46,7 @@
           </div>
           <!-- 添加元素 2 -->
           <div class="panel panel-element clearfix" v-if="panelState === 2">
-            <PicPicker class="ele" @uploaded="uploadImage"></PicPicker>
-            <div class="ele" :style="{ backgroundImage: 'url(' + http + element.filePath + ')' }" @click="addPicElement(element)" v-for="element in picList"></div>
+            <ImgPanel :selectedImg="addPicElement"/>
           </div>
           <!-- 图层编辑面板 -->
           <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10"/>
@@ -53,7 +66,7 @@
   import HeaderEdit from '../../components/HeaderEdit'
   import EditPanel from '../../components/EditPanel'
   import SvgPanel from '../../components/SvgPanel'
-  import BgPanel from '../../components/BgPanel'
+  import ImgPanel from '../../components/ImgPanel'
   import appConst from '../../util/appConst'
   export default {
     data () {
@@ -67,7 +80,8 @@
         http: appConst.BACKEND_DOMAIN,
         releaseUrl: '',
         showPreView: false,
-        isLoadingPreview: false
+        isLoadingPreview: false,
+        panelTabState: 0
       }
     },
     watch: {
@@ -195,16 +209,12 @@
       deleteElement () {
         this.$store.dispatch('deleteSelectedElement')
       },
-      style (obj) {
-        this.element.width = obj.width
-        this.element.height = obj.height
-      },
       togglePanel (code) {
         this.panelState = code
       }
     },
     components: {
-      Overview, Page, PicPicker, appConst, PreView, HeaderEdit, EditPanel, SvgPanel, BgPanel
+      Overview, Page, PicPicker, appConst, PreView, HeaderEdit, EditPanel, SvgPanel, ImgPanel
     },
     mounted () {
       this.itemId = this.$route.query.itemId

webapp/src/vuex/editor/actions.js

@@ -129,7 +129,6 @@ export const delPage = ({commit}, page) => {
 
 export const getPageByThemeId = ({dispatch, commit}, id) => {
   api.getPageByThemeId(id).then((res) => {
-    console.log(id)
     commit(types.SET_CUR_EDITOR_THEME, res)
     commit(types.SET_CUR_EDITOR_PAGE, res.pages[0])
   }).then(() => {

webapp/src/vuex/editor/getters.js

@@ -11,8 +11,6 @@ export const editingPage = state => {
 }
 
 export const editingPageElements = state => {
-  console.log(state['editorPage'])
-  console.log(state['editorPage']['elements'])
   return state['editorPage']['elements']
 }
 

webapp/src/vuex/editor/mutations.js

@@ -39,7 +39,6 @@ const mutations = {
   },
   // 停止播放动画
   [types.STOP_ANIMATE] (state, data) {
-    console.log(data)
     if (data instanceof Array) {
       // 该页元素
       data.forEach(v => {
@@ -94,7 +93,6 @@ const mutations = {
     state.editorTheme._id = data._id
   },
   [types.UPDATE_THEME_SUCCESS] (state, data) {
-    console.log('成功！！！！！')
   },
   [types.SAVE_PIC] (state, data) {
     state.editorElement.imgSrc = app.APP_MALL_API_URL + data.filePath