feat:增加背景图片

frontend/src/components/Editor/MarkLine.vue

@@ -1,6 +1,6 @@
 <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>
+</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)'