refactor:仪表板设置有间隙时，视图移动触发按钮和边界线靠近视图排列

frontend/src/components/DeDrag/index.vue

@@ -3,14 +3,12 @@
     :style="style"
     :class="[
       {
-        [classNameActive]: enabled ,
         [classNameDragging]: dragging,
         [classNameResizing]: resizing,
         [classNameDraggable]: draggable,
         [classNameResizable]: resizable,
         [classNameRotating]: rotating,
         [classNameRotatable]: rotatable,
-        [classNameMouseOn]: mouseOn || active,
         ['linkageSetting']:linkageActive,
         ['positionChange']:!(dragging || resizing||rotating)
       },
@@ -20,6 +18,16 @@
     @touchstart="elementTouchDown"
     @mouseenter="enter"
     @mouseleave="leave"
+  >
+    <div
+      :class="[
+        {
+          [classNameActive]: enabled ,
+          [classNameMouseOn]: mouseOn || active
+        },
+        className
+      ]"
+      :style="mainSlotStyle"
     >
       <edit-bar v-if="curComponent&&(active||linkageSettingStatus)" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" />
       <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
@@ -33,7 +41,6 @@
       >
         <slot :name="handlei" />
       </div>
-    <div :style="mainSlotStyle" :class="{'gap_class':canvasStyleData.panel.gap==='yes'}">
       <slot />
     </div>
   </div>
@@ -437,6 +444,7 @@ export default {
     style() {
       // console.log('style-top:' + this.y + '--' + this.top)
       return {
+        padding: (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) + 'px',
         transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
         width: this.computedWidth,
         height: this.computedHeight,
@@ -479,6 +487,7 @@ export default {
 
     //  根据left right 算出元素的宽度
     computedMainSlotWidth() {
+      const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
       if (this.w === 'auto') {
         if (!this.widthTouched) {
           return 'auto'
@@ -486,13 +495,14 @@ export default {
       }
       if (this.element.auxiliaryMatrix) {
         const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-        return width + 'px'
+        return (width - gap) + 'px'
       } else {
-        return this.width + 'px'
+        return (this.width - gap) + 'px'
       }
     },
     // 根据top bottom 算出元素的宽度
     computedMainSlotHeight() {
+      const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
       if (this.h === 'auto') {
         if (!this.heightTouched) {
           return 'auto'
@@ -500,9 +510,9 @@ export default {
       }
       if (this.element.auxiliaryMatrix) {
         const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-        return height + 'px'
+        return (height - gap) + 'px'
       } else {
-        return this.height + 'px'
+        return (this.height - gap) + 'px'
       }
     },
 
@@ -522,7 +532,8 @@ export default {
       'editor',
       'curCanvasScale',
       'canvasStyleData',
-      'linkageSettingStatus'
+      'linkageSettingStatus',
+      'componentGap'
     ])
   },
   watch: {
@@ -1792,6 +1803,11 @@ export default {
   padding:5px;
 }
 
+.de-drag-active{
+  outline: 1px solid #70c0ff;
+  user-select: none;
+}
+
 /*.mouseOn >>> .icon-shezhi{*/
 /*  z-index: 2;*/
 /*  display:block!important;*/