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 {
-  outline: none;
-  width: 100% !important;
-  height: 100%;
-}
+  .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">
-      <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
-        {{ $t('panel.panelNull') }}
-      </el-row>
-      <canvas-opt-bar />
-      <ComponentWrapper
-        v-for="(item, index) in componentDataInfo"
-        :key="index"
-        :config="item"
-        :search-count="searchCount"
-        :in-screen="inScreen"
-      />
-      <!--视图详情-->
-      <el-dialog
-        :title="'['+showChartInfo.name+']'+$t('chart.chart_details')"
-        :visible.sync="chartDetailsVisible"
-        width="70%"
-        class="dialog-css"
-        :destroy-on-close="true"
+  <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"
       >
-        <span style="position: absolute;right: 70px;top:15px">
-          <el-button size="mini" @click="exportExcel">
-            <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
-            {{ $t('chart.export_details') }}
-          </el-button>
-        </span>
-        <UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
-      </el-dialog>
+        <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
+          {{ $t('panel.panelNull') }}
+        </el-row>
+        <canvas-opt-bar />
+        <ComponentWrapper
+          v-for="(item, index) in componentDataInfo"
+          :key="index"
+          :config="item"
+          :search-count="searchCount"
+          :in-screen="inScreen"
+        />
+        <!--视图详情-->
+        <el-dialog
+          :title="'['+showChartInfo.name+']'+$t('chart.chart_details')"
+          :visible.sync="chartDetailsVisible"
+          width="70%"
+          class="dialog-css"
+          :destroy-on-close="true"
+        >
+          <span style="position: absolute;right: 70px;top:15px">
+            <el-button size="mini" @click="exportExcel">
+              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
+              {{ $t('chart.export_details') }}
+            </el-button>
+          </span>
+          <UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+        </el-dialog>
+      </div>
     </div>
   </div>
 </template>
@@ -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,47 +238,45 @@ 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 {
-  width: 100%;
-  height: 100%;
-}
-.custom-position {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  flex-flow: row nowrap;
-  color: #9ea6b2;
-}
-.gap_class{
-  padding:5px;
-}
-.dialog-css>>>.el-dialog__title {
-  font-size: 14px;
-}
-.dialog-css >>> .el-dialog__header {
-  padding: 20px 20px 0;
-}
-.dialog-css >>> .el-dialog__body {
-  padding: 10px 20px 20px;
-}
+  }
+
+  .main-class {
+    width: 100%;
+    height: 100%;
+  }
+
+  .custom-position {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    flex-flow: row nowrap;
+    color: #9ea6b2;
+  }
+
+  .gap_class {
+    padding: 5px;
+  }
+
+  .dialog-css > > > .el-dialog__title {
+    font-size: 14px;
+  }
+
+  .dialog-css > > > .el-dialog__header {
+    padding: 20px 20px 0;
+  }
+
+  .dialog-css > > > .el-dialog__body {
+    padding: 10px 20px 20px;
+  }
 
 </style>

frontend/src/components/dataease/DeOutWidget.vue

 <template>
-  <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">
-        <div class="condition-title-absolute">
-          <div class="first-title">
-            <div class="span-container">
-              <span ref="deTitle">{{ element.options.attrs.title }}</span>
+  <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">
+          <div class="condition-title-absolute">
+            <div class="first-title">
+              <div class="span-container">
+                <span ref="deTitle">{{ element.options.attrs.title }}</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div ref="deContentContainer" class="condition-content" :class="element.options.attrs.title ? '' : 'condition-content-default'">
-        <div class="condition-content-container">
-          <div class="first-element">
-            <div :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''" class="first-element-contaner">
-              <component
-                :is="element.component"
-                v-if="element.type==='custom'"
-                :id="'component' + element.id"
-                class="component-custom"
-                :out-style="element.style"
-                :element="element"
-                :in-draw="inDraw"
-                :in-screen="inScreen"
-              />
+        <div ref="deContentContainer" class="condition-content" :class="element.options.attrs.title ? '' : 'condition-content-default'">
+          <div class="condition-content-container">
+            <div class="first-element">
+              <div :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''" class="first-element-contaner">
+                <component
+                  :is="element.component"
+                  v-if="element.type==='custom'"
+                  :id="'component' + element.id"
+                  class="component-custom"
+                  :out-style="element.style"
+                  :element="element"
+                  :in-draw="inDraw"
+                  :in-screen="inScreen"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -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;