feat:增加背景图片

frontend/src/components/Editor/MarkLine.vue

 <template>
     <div class="mark-line">
-        <div 
+        <div
             v-for="line in lines"
             :key="line"
             class="line"
@@ -145,7 +145,7 @@ export default {
                         },
                     ],
                 }
-                
+
                 const needToShow = []
                 const { rotate } = this.curComponent.style
                 Object.keys(conditions).forEach(key => {
@@ -153,9 +153,9 @@ export default {
                     conditions[key].forEach((condition) => {
                         if (!condition.isNearly) return
                         // 修改当前组件位移
-                        this.$store.commit('setShapeSingleStyle', { 
+                        this.$store.commit('setShapeSingleStyle', {
                             key,
-                            value: rotate != 0? this.translatecurComponentShift(key, condition, curComponentStyle) : condition.dragShift,
+                            value: rotate !== 0? this.translatecurComponentShift(key, condition, curComponentStyle) : condition.dragShift,
                         })
 
                         condition.lineNode.style[key] = `${condition.lineShift}px`
@@ -165,7 +165,7 @@ export default {
 
                 // 同一方向上同时显示三条线可能不太美观，因此才有了这个解决方案
                 // 同一方向上的线只显示一条，例如多条横条只显示一条横线
-                if (needToShow.length) { 
+                if (needToShow.length) {
                     this.chooseTheTureLine(needToShow, isDownward, isRightward)
                 }
             })
@@ -173,7 +173,7 @@ export default {
 
         translatecurComponentShift(key, condition, curComponentStyle) {
             const { width, height } = this.curComponent.style
-            if (key == 'top') {
+            if (key === 'top') {
                 return Math.round(condition.dragShift - (height - curComponentStyle.height) / 2)
             }
 
@@ -246,4 +246,4 @@ export default {
     width: 1px;
     height: 100%;
 }
-</style>
\ No newline at end of file
+</style>

frontend/src/components/Editor/Shape.vue

@@ -199,7 +199,7 @@ export default {
 
     handleMouseDownOnShape(e) {
       this.$store.commit('setClickComponentStatus', true)
-      if (this.element.component != 'v-text' && this.element.component != 'rect-shape') {
+      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape') {
         e.preventDefault()
       }
 
@@ -329,7 +329,7 @@ export default {
     },
 
     isNeedLockProportion() {
-      if (this.element.component != 'Group') return false
+      if (this.element.component !== 'Group') return false
       const ratates = [0, 90, 180, 360]
       for (const component of this.element.propValue) {
         if (!ratates.includes(mod360(parseInt(component.style.rotate)))) {

frontend/src/components/Editor/index.vue

@@ -26,7 +26,7 @@
     >
       <component
         :is="item.component"
-        v-if="item.component != 'v-text'"
+        v-if="item.component !== 'v-text'"
         :id="'component' + item.id"
         class="component"
         :style="getComponentStyle(item.style)"
@@ -106,7 +106,7 @@ export default {
 
     handleMouseDown(e) {
       // 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件
-      if (!this.curComponent || (this.curComponent.component != 'v-text' && this.curComponent.component != 'rect-shape')) {
+      if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) {
         e.preventDefault()
       }
 
@@ -141,7 +141,7 @@ export default {
         document.removeEventListener('mousemove', move)
         document.removeEventListener('mouseup', up)
 
-        if (e.clientX == startX && e.clientY == startY) {
+        if (e.clientX === startX && e.clientY === startY) {
           this.hideArea()
           return
         }
@@ -173,7 +173,7 @@ export default {
       let right = -Infinity; let bottom = -Infinity
       areaData.forEach(component => {
         let style = {}
-        if (component.component == 'Group') {
+        if (component.component === 'Group') {
           component.propValue.forEach(item => {
             const rectInfo = $(`#component${item.id}`).getBoundingClientRect()
             style.left = rectInfo.left - this.editorX
@@ -255,7 +255,7 @@ export default {
     getShapeStyle(style) {
       const result = {};
       ['width', 'height', 'top', 'left', 'rotate'].forEach(attr => {
-        if (attr != 'rotate') {
+        if (attr !== 'rotate') {
           result[attr] = style[attr] + 'px'
         } else {
           result.transform = 'rotate(' + style[attr] + 'deg)'

frontend/src/custom-component/component-list.js

@@ -14,10 +14,12 @@ export const commonAttr = {
 // 编辑器左侧组件列表
 const list = [
   {
+    id: '10001',
     component: 'v-text',
     label: '文字',
     propValue: '双击编辑文字',
     icon: 'wenben',
+    type: 'other',
     style: {
       width: 200,
       height: 22,
@@ -30,10 +32,12 @@ const list = [
     }
   },
   {
+    id: '10002',
     component: 'v-button',
     label: '按钮',
     propValue: '按钮',
     icon: 'button',
+    type: 'other',
     style: {
       width: 100,
       height: 34,
@@ -50,9 +54,11 @@ const list = [
     }
   },
   {
+    id: '10003',
     component: 'Picture',
     label: '图片',
     icon: 'tupian',
+    type: 'other',
     propValue: require('@/assets/title.jpg'),
     style: {
       width: 300,
@@ -61,10 +67,25 @@ const list = [
     }
   },
   {
+    id: '10003-1',
+    component: 'Picture',
+    label: '背景-科技1',
+    icon: 'tupian',
+    type: 'other',
+    propValue: require('@/assets/bg-kj-1.jpg'),
+    style: {
+      width: 600,
+      height: 300,
+      borderRadius: ''
+    }
+  },
+  {
+    id: '10004',
     component: 'rect-shape',
     label: '矩形',
     propValue: ' ',
     icon: 'juxing',
+    type: 'other',
     style: {
       width: 200,
       height: 200,
@@ -82,6 +103,7 @@ const list = [
     }
   },
   {
+    id: '10005',
     component: 'user-view',
     label: '用户视图',
     propValue: '',

frontend/src/views/panel/canvas/index.vue

@@ -122,7 +122,7 @@ export default {
       }
 
       // 0 左击 1 滚轮 2 右击
-      if (e.button != 2) {
+      if (e.button !== 2) {
         this.$store.commit('hideContextMenu')
       }
     }

frontend/src/views/panel/edit/index.vue

@@ -110,12 +110,10 @@ import bus from '@/utils/bus'
 import Editor from '@/components/Editor/index'
 import { deepCopy } from '@/utils/utils'
 import componentList from '@/custom-component/component-list' // 左侧列表数据
-import generateID from '@/utils/generateID'
 import { listenGlobalKeyDown } from '@/utils/shortcutKey'
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
 
-
 export default {
   components: {
     DeMainContainer,
@@ -225,24 +223,38 @@ export default {
       return data
     },
     handleDrop(e) {
+      e.preventDefault()
+      e.stopPropagation()
       let component
+      const newComponentId = uuid.v1()
       console.log('handleDrop123')
       const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))
+
+      // 用户视图设置 复制一个模板
       if (componentInfo.type === 'view') {
         componentList.forEach(componentTemp => {
           if (componentTemp.type === 'view') {
             component = deepCopy(componentTemp)
-            component.style.top = e.offsetY
-            component.style.left = e.offsetX
-            component.id = uuid.v1()
             const propValue = {
-              id: component.id,
+              id: newComponentId,
               viewId: componentInfo.id
             }
             component.propValue = propValue
           }
         })
       }
+
+      debugger
+      // 其他组件设置
+      componentList.forEach(componentTemp => {
+        if (componentInfo.id === componentTemp.id) {
+          component = deepCopy(componentTemp)
+        }
+      })
+
+      component.style.top = e.offsetY
+      component.style.left = e.offsetX
+      component.id = newComponentId
       this.$store.commit('addComponent', { component })
       this.$store.commit('recordSnapshot')
     },
@@ -267,7 +279,7 @@ export default {
       }
 
       // 0 左击 1 滚轮 2 右击
-      if (e.button != 2) {
+      if (e.button !== 2) {
         this.$store.commit('hideContextMenu')
       }
     }

frontend/src/views/panel/filter/index.vue

@@ -5,11 +5,16 @@
       <div slot="header">
         <span>卡片名称</span>
       </div>
-      <div style="position: relative;margin-left: 5px;">
-        <div v-for="o in 4" :key="o" class="item">
-          <div draggable>
-            <el-button style="width: 90px;" size="mini" type="primary" icon="el-icon-edit" plain> {{ '条件 ' + o }}</el-button>
-          </div>
+      <div style="position: relative;margin-left: 5px;" @dragstart="handleDragStart">
+        <div
+          v-for="(item, index) in componentList"
+          :key="index"
+          :data-id="item.id"
+          draggable
+          :data-index="index"
+        >
+          <span class="iconfont" :class="'icon-' + item.icon" />
+          <span>{{ item.label }}</span>
         </div>
       </div>
 
@@ -18,16 +23,23 @@
 
 </template>
 
-<script>
+<script>import componentList from '@/custom-component/component-list'
 export default {
   name: 'FilterGroup',
   data() {
     return {
-
+      componentList
     }
   },
   methods: {
-
+    handleDragStart(ev) {
+      ev.dataTransfer.effectAllowed = 'copy'
+      const dataTrans = {
+        type: 'other',
+        id: ev.target.dataset.id
+      }
+      ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
+    }
   }
 }
 </script>