refactor:仪表板矩形，文字组件，间隙等默认样

frontend/src/components/DeDrag/MoveInShadow.vue

+<template>
+  <div style="z-index:-1" :style="style" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  replace: true,
+  name: 'MoveInShadow',
+  props: {
+    w: {
+      type: Number,
+      required: true
+    },
+    h: {
+      type: Number,
+      required: true
+    },
+    x: {
+      type: Number,
+      required: true
+    },
+    y: {
+      type: Number,
+      required: true
+    },
+    z: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    style() {
+      // 当前默认为自适应
+      let left = this.x
+      let top = this.y
+      let width = this.w
+      let height = this.h
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+        width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+        top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+        height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+      }
+      const style = {
+        transform: `translate(${left}px, ${top}px) rotate(0deg)`,
+        width: width + 'px',
+        height: height + 'px',
+        opacity: 0.4,
+        background: 'gray',
+        position: 'absolute'
+      }
+      // console.log('style=>' + JSON.stringify(style))
+      return style
+    },
+    ...mapState([
+      'curComponent',
+      'editor',
+      'curCanvasScale',
+      'canvasStyleData',
+      'linkageSettingStatus'
+    ])
+  }
+
+}
+</script>
+<style scoped>
+
+</style>

frontend/src/components/DeDrag/shadow.vue

 <template>
-  <div style="z-index:-1" :style="style" />
+  <div style="z-index:1" :style="style" />
 </template>
 
 <script>

frontend/src/components/canvas/components/Editor/index.vue

@@ -670,7 +670,7 @@ export default {
 }
 
 .gap_class{
-   padding:5px;
+   padding:3px;
 }
 
 // 拖拽组件样式

frontend/src/store/index.js

@@ -58,7 +58,9 @@ const data = {
     // 和当前组件联动的目标组件
     targetLinkageInfo: [],
     // 当前仪表板联动 下钻 上卷等信息
-    nowPanelTrackInfo: {}
+    nowPanelTrackInfo: {},
+    // 拖拽的组件信息
+    dragComponentInfo: null
   },
   mutations: {
     ...animation.mutations,
@@ -254,6 +256,12 @@ const data = {
         }
       })
       // state.styleChangeTimes++
+    },
+    setDragComponentInfo(state, dragComponentInfo) {
+      state.dragComponentInfo = dragComponentInfo
+    },
+    clearDragComponentInfo(state) {
+      state.dragComponentInfo = null
     }
   },
   modules: {

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

@@ -105,11 +105,13 @@ export default {
       })
     },
     handleDragStart(node, ev) {
+      this.$store.commit('setDragComponentInfo', node)
       ev.dataTransfer.effectAllowed = 'copy'
       const dataTrans = {
         type: 'view',
         id: node.data.id
       }
+
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
     },
 

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

@@ -440,6 +440,7 @@ export default {
       return data
     },
     handleDrop(e) {
+      this.$store.commit('clearDragComponentInfo')
       this.currentDropElement = e
       e.preventDefault()
       e.stopPropagation()
@@ -509,6 +510,7 @@ export default {
     },
 
     handleDragOver(e) {
+      console.log('handleDragOver=>x:' + this.getPositionX(e.layerX) + ';y=' + this.getPositionY(e.layerY) + e.dataTransfer.getData('componentInfo'))
       e.preventDefault()
       e.dataTransfer.dropEffect = 'copy'
     },