fix(移动端): 修复移动端Tab组件激活字体大小显示较小,视图可能存在空白区域问题

frontend/src/components/canvas/components/editor/MobileCheckBar.vue

@@ -13,6 +13,7 @@
 <script>
 
 import { mapState } from 'vuex'
+
 export default {
   props: {
     element: {
@@ -55,7 +56,7 @@ export default {
     },
     deleteComponent() {
       this.$emit('amRemoveItem')
-      this.$store.commit('deleteComponent')
+      this.$store.commit('deleteComponentWithId', this.element.id)
       this.$store.commit('setCurComponent', { component: null, index: null })
     },
     updateMobileSelected(id, mobileSelected) {
@@ -70,29 +71,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .bar-main{
-    position: absolute;
-    float:right;
-    z-index: 10000;
-    border-radius:2px;
-    padding-left: 1px;
-    padding-right: 1px;
-    cursor:pointer!important;
-    text-align: center;
-    background-color: var(--primary,#3370ff);
-  }
-  .bar-main i{
-    color: white;
-    float: right;
-    margin-right: 3px;
-  }
+.bar-main {
+  position: absolute;
+  float: right;
+  z-index: 10000;
+  border-radius: 2px;
+  padding-left: 1px;
+  padding-right: 1px;
+  cursor: pointer !important;
+  text-align: center;
+  background-color: var(--primary, #3370ff);
+}
 
-  .bar-main ::v-deep .el-checkbox__inner{
-    width: 16px;
-    height: 16px;
-  }
+.bar-main i {
+  color: white;
+  float: right;
+  margin-right: 3px;
+}
 
-  .bar-main ::v-deep .el-checkbox__inner::after{
-    width: 4.5px;
-  }
+.bar-main ::v-deep .el-checkbox__inner {
+  width: 16px;
+  height: 16px;
+}
+
+.bar-main ::v-deep .el-checkbox__inner::after {
+  width: 4.5px;
+}
 </style>

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

@@ -635,7 +635,7 @@ export default {
               component.style[key] = this.format(component.style[key], this.scaleHeight)
             }
             if (this.needToChangeWidth.includes(key)) {
-              if (key === 'fontSize' && (this.terminal === 'mobile' || component.type === 'custom')) {
+              if ((key === 'fontSize' || key === 'activeFontSize') && (this.terminal === 'mobile' || component.type === 'custom')) {
                 // do nothing 移动端字符大小无需按照比例缩放，当前保持不变(包括 v-text 和 过滤组件)
               } else {
                 component.style[key] = this.format(component.style[key], this.scaleWidth)

frontend/src/components/canvas/customComponent/UserView.vue

@@ -85,6 +85,7 @@
       :ref="element.propValue.id"
       class="chart-class"
       :chart="chart"
+      :terminal-type="scaleCoefficientType"
       :track-menu="trackMenu"
       :search-count="searchCount"
       @onChartClick="chartClick"

frontend/src/components/canvas/store/layer.js

@@ -5,40 +5,49 @@ export default {
   mutations: {
 
     upComponent({ componentData, curComponent }) {
-      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
-      // 上移图层 index，表示元素在数组中越往后
-      if (curComponentIndex < componentData.length - 1) {
-        moveUp(componentData, curComponentIndex)
-      } else {
-        toast('已经到顶了')
+      if (curComponent) {
+        const curComponentIndex = findCurComponentIndex(componentData, curComponent)
+        // 上移图层 index，表示元素在数组中越往后
+        if (curComponentIndex < componentData.length - 1) {
+          moveUp(componentData, curComponentIndex)
+        } else {
+          toast('已经到顶了')
+        }
       }
+
     },
 
     downComponent({ componentData, curComponent }) {
-      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
-      // 下移图层 index，表示元素在数组中越往前
-      if (curComponentIndex > 0) {
-        moveDown(componentData, curComponentIndex)
-      } else {
-        toast('已经到底了')
+      if (curComponent) {
+        const curComponentIndex = findCurComponentIndex(componentData, curComponent)
+        // 下移图层 index，表示元素在数组中越往前
+        if (curComponentIndex > 0) {
+          moveDown(componentData, curComponentIndex)
+        } else {
+          toast('已经到底了')
+        }
       }
     },
 
     topComponent({ componentData, curComponent }) {
-      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
-      // 置顶
-      if (curComponentIndex < componentData.length - 1) {
-        toTop(componentData, curComponentIndex)
+      if (curComponent) {
+        const curComponentIndex = findCurComponentIndex(componentData, curComponent)
+        // 置顶
+        if (curComponentIndex < componentData.length - 1) {
+          toTop(componentData, curComponentIndex)
+        }
       }
     },
 
     bottomComponent({ componentData, curComponent }) {
-      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
-      // 置底
-      if (curComponentIndex > 0) {
-        toBottom(componentData, curComponentIndex)
-      } else {
-        toast('已经到底了')
+      if (curComponent) {
+        const curComponentIndex = findCurComponentIndex(componentData, curComponent)
+        // 置底
+        if (curComponentIndex > 0) {
+          toBottom(componentData, curComponentIndex)
+        } else {
+          toast('已经到底了')
+        }
       }
     }
   }

frontend/src/components/widget/deWidget/DeTabs.vue

@@ -17,7 +17,7 @@
       :active-color="activeColor"
       :border-color="borderColor"
       :border-active-color="borderActiveColor"
-      :addable="isEdit"
+      :addable="isEdit && !mobileLayoutStatus"
       @tab-add="addTab"
       @tab-click="handleClick"
     >
@@ -710,6 +710,7 @@ export default {
 ::v-deep .el-tabs__nav-prev {
   line-height: 25px;
 }
+
 ::v-deep .el-tabs__nav-next {
   line-height: 25px;
 }