refactor: 优化仪表板展示边界间隙，保持常有间隙

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

@@ -5,7 +5,7 @@
     @click="handleClick"
     @mousedown="elementMouseDown"
   >
-    <edit-bar v-if="curComponent && config === curComponent" :element="config" @showViewDetails="showViewDetails" />
+    <edit-bar v-if="editBarShow" :element="config" @showViewDetails="showViewDetails" />
     <de-out-widget
       v-if="config.type==='custom'"
       :id="'component' + config.id"
@@ -15,7 +15,6 @@
       :element="config"
       :in-screen="inScreen"
     />
-
     <component
       :is="config.component"
       v-else
@@ -65,6 +64,9 @@ export default {
     }
   },
   computed: {
+    editBarShow() {
+      return this.curComponent && this.config === this.curComponent
+    },
     curGap() {
       return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0
     },
@@ -79,7 +81,6 @@ export default {
   },
   methods: {
     getStyle,
-
     getShapeStyleIntDeDrag(style, prop) {
       if (prop === 'rotate') {
         return style['rotate']
@@ -114,17 +115,11 @@ export default {
         result[attr] = style[attr] + 'px'
       })
       result['rotate'] = style['rotate']
-      // result['opacity'] = style['opacity']
-
       return result
-      // return style
     },
 
     getComponentStyleDefault(style) {
       return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
-      // console.log('styleInfo', JSON.stringify(styleInfo))
-      // return styleInfo
-      // return style
     },
 
     handleClick() {
@@ -151,19 +146,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.component {
+  .component {
     position: absolute;
-}
+  }
 
-.component:hover {
-  box-shadow:0px 0px 7px #0a7be0;
-}
-.gap_class{
-  padding:5px;
-}
-.component-custom {
+  .component:hover {
+    box-shadow: 0px 0px 7px #0a7be0;
+  }
+
+  .gap_class {
+    padding: 5px;
+  }
+
+  .component-custom {
     outline: none;
     width: 100% !important;
     height: 100%;
-}
+  }
 </style>

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

 <template>
-  <div id="canvasInfoMain" ref="canvasInfoMain" :style="customStyle" class="bg">
-    <div id="canvasInfoTemp" ref="canvasInfoTemp" class="main-class" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
+  <div class="bg" :style="customStyle">
+    <div id="canvasInfoMain" ref="canvasInfoMain" style="width: 100%;height: 100%">
+      <div
+        id="canvasInfoTemp"
+        ref="canvasInfoTemp"
+        class="main-class"
+        @mouseup="deselectCurComponent"
+        @mousedown="handleMouseDown"
+      >
         <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
           {{ $t('panel.panelNull') }}
         </el-row>
@@ -30,6 +37,7 @@
         </el-dialog>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -94,9 +102,7 @@ export default {
   },
   computed: {
     customStyle() {
-      let style = {
-        padding: this.componentGap + 'px'
-      }
+      let style = {}
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
@@ -110,16 +116,6 @@ export default {
           }
         }
       }
-      // if (this.canvasStyleData.selfAdaption) {
-      //   style = {
-      //     overflow: 'hidden',
-      //     ...style
-      //   }
-      // }
-      // style = {
-      //   overflow-x :'hidden',
-      //   ...style
-      // }
       return style
     },
     // 此处单独计算componentData的值 不放入全局mapState中
@@ -152,17 +148,17 @@ export default {
     const _this = this
     const erd = elementResizeDetectorMaker()
     // 监听div变动事件
-    const tempDom = document.getElementById('canvasInfoMain')
-    erd.listenTo(tempDom, element => {
+    const mainDom = document.getElementById('canvasInfoMain')
+    erd.listenTo(mainDom, element => {
       _this.$nextTick(() => {
         _this.restore()
         // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
-        _this.mainHeight = tempDom.scrollHeight + 'px!important'
+        _this.mainHeight = mainDom.scrollHeight + 'px!important'
       })
     })
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
-    this.$store.commit('clearLinkageSettingInfo', false)
-    this.canvasStyleDataInit()
+    _this.$store.commit('clearLinkageSettingInfo', false)
+    _this.canvasStyleDataInit()
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -235,8 +231,6 @@ export default {
       }
     },
     handleMouseDown() {
-      // console.log('handleMouseDown123')
-
       this.$store.commit('setClickComponentStatus', false)
     }
   }
@@ -244,28 +238,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.bg {
+  .bg {
+    padding: 5px;
     min-width: 600px;
     min-height: 300px;
     width: 100%;
     height: 100%;
     overflow-x: hidden;
-    /*border: 1px solid #E6E6E6;*/
     background-size: 100% 100% !important;
-    .canvas-container {
-        width: 100%;
-        height: 100%;
-      .canvas {
-            position: relative;
-            margin: auto;
   }
-    }
-}
-.main-class {
+
+  .main-class {
     width: 100%;
     height: 100%;
-}
-.custom-position {
+  }
+
+  .custom-position {
     flex: 1;
     display: flex;
     align-items: center;
@@ -273,18 +261,22 @@ export default {
     font-size: 14px;
     flex-flow: row nowrap;
     color: #9ea6b2;
-}
-.gap_class{
-  padding:5px;
-}
-.dialog-css>>>.el-dialog__title {
+  }
+
+  .gap_class {
+    padding: 5px;
+  }
+
+  .dialog-css > > > .el-dialog__title {
     font-size: 14px;
-}
-.dialog-css >>> .el-dialog__header {
+  }
+
+  .dialog-css > > > .el-dialog__header {
     padding: 20px 20px 0;
-}
-.dialog-css >>> .el-dialog__body {
+  }
+
+  .dialog-css > > > .el-dialog__body {
     padding: 10px 20px 20px;
-}
+  }
 
 </style>

frontend/src/components/dataease/DeOutWidget.vue

 <template>
+  <div class="outside-container">
     <div ref="myContainer" class="my-container">
       <div ref="conditionMain" class="condition-main" :class="mainClass">
         <div v-if="element.options.attrs.title" ref="deTitleContainer" class="condition-title">
@@ -30,6 +31,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -97,12 +99,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .outside-container {
+    width: 100%;
+    height: 100%;
+  }
   .my-container {
     position: absolute;
     overflow: auto;
     inset: 0px;
   }
-  .ccondition-main {
+  .condition-main {
     position: absolute;
     overflow: auto;
     inset: 0px;