Merge pull request #4030 from dataease/pr@dev@fix_mobile-tab

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{
+.bar-main {
-    position: absolute;
+  position: absolute;
-    float:right;
+  float: right;
-    z-index: 10000;
+  z-index: 10000;
-    border-radius:2px;
+  border-radius: 2px;
-    padding-left: 1px;
+  padding-left: 1px;
-    padding-right: 1px;
+  padding-right: 1px;
-    cursor:pointer!important;
+  cursor: pointer !important;
-    text-align: center;
+  text-align: center;
-    background-color: var(--primary,#3370ff);
+  background-color: var(--primary, #3370ff);
-  }
+}
-  .bar-main i{
-    color: white;
-    float: right;
-    margin-right: 3px;
-  }
 
-  .bar-main ::v-deep .el-checkbox__inner{
+.bar-main i {
-    width: 16px;
+  color: white;
-    height: 16px;
+  float: right;
-  }
+  margin-right: 3px;
+}
 
-  .bar-main ::v-deep .el-checkbox__inner::after{
+.bar-main ::v-deep .el-checkbox__inner {
-    width: 4.5px;
+  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)
+      if (curComponent) {
-      // 上移图层 index，表示元素在数组中越往后
+        const curComponentIndex = findCurComponentIndex(componentData, curComponent)
-      if (curComponentIndex < componentData.length - 1) {
+        // 上移图层 index，表示元素在数组中越往后
-        moveUp(componentData, curComponentIndex)
+        if (curComponentIndex < componentData.length - 1) {
-      } else {
+          moveUp(componentData, curComponentIndex)
-        toast('已经到顶了')
+        } else {
+          toast('已经到顶了')
+        }
       }
+
     },
 
     downComponent({ componentData, curComponent }) {
-      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
+      if (curComponent) {
-      // 下移图层 index，表示元素在数组中越往前
+        const curComponentIndex = findCurComponentIndex(componentData, curComponent)
-      if (curComponentIndex > 0) {
+        // 下移图层 index，表示元素在数组中越往前
-        moveDown(componentData, curComponentIndex)
+        if (curComponentIndex > 0) {
-      } else {
+          moveDown(componentData, curComponentIndex)
-        toast('已经到底了')
+        } else {
+          toast('已经到底了')
+        }
       }
     },
 
     topComponent({ componentData, curComponent }) {
-      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
+      if (curComponent) {
-      // 置顶
+        const curComponentIndex = findCurComponentIndex(componentData, curComponent)
-      if (curComponentIndex < componentData.length - 1) {
+        // 置顶
-        toTop(componentData, curComponentIndex)
+        if (curComponentIndex < componentData.length - 1) {
+          toTop(componentData, curComponentIndex)
+        }
       }
     },
 
     bottomComponent({ componentData, curComponent }) {
-      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
+      if (curComponent) {
-      // 置底
+        const curComponentIndex = findCurComponentIndex(componentData, curComponent)
-      if (curComponentIndex > 0) {
+        // 置底
-        toBottom(componentData, curComponentIndex)
+        if (curComponentIndex > 0) {
-      } else {
+          toBottom(componentData, curComponentIndex)
-        toast('已经到底了')
+        } 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;
 }

frontend/src/store/index.js

@@ -232,8 +232,8 @@ const data = {
       }
     },
     setShapeStyle({ curComponent, canvasStyleData, curCanvasScaleMap }, { top, left, width, height, rotate }) {
-      const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId]
       if (curComponent) {
+        const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId]
         if (top || top === 0) curComponent.style.top = Math.round((top / curCanvasScaleSelf.scalePointHeight))
         if (left || left === 0) curComponent.style.left = Math.round((left / curCanvasScaleSelf.scalePointWidth))
         if (width || width === 0) curComponent.style.width = Math.round((width / curCanvasScaleSelf.scalePointWidth))
@@ -569,7 +569,7 @@ const data = {
       // 移动端布局转换
       state.componentData.forEach(item => {
         item.mobileStyle = (item.mobileStyle || BASE_MOBILE_STYLE)
-        if (item.mobileSelected || item.canvasId !== 'canvas-main') {
+        if (item.mobileSelected && item.canvasId === 'canvas-main') {
           item.style.width = item.mobileStyle.style.width
           item.style.height = item.mobileStyle.style.height
           item.style.top = item.mobileStyle.style.top
@@ -581,6 +581,8 @@ const data = {
           item.sizey = item.mobileStyle.sizey
           item.auxiliaryMatrix = item.mobileStyle.auxiliaryMatrix
           mainComponentData.push(item)
+        } else if (item.canvasId !== 'canvas-main') {
+          mainComponentData.push(item)
         }
       })
       state.componentData = mainComponentData

frontend/src/views/chart/components/ChartComponentS2.vue

@@ -67,8 +67,8 @@
           >
             {{ $t('chart.total') }}
             <span>{{
-              (chart.datasetMode === 0 && !not_support_page_dataset.includes(chart.datasourceType)) ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
+                (chart.datasetMode === 0 && !not_support_page_dataset.includes(chart.datasourceType)) ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
-            }}</span>
+              }}</span>
             {{ $t('chart.items') }}
           </span>
           <de-pagination
@@ -101,10 +101,15 @@ import { DEFAULT_TITLE_STYLE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/cha
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
 import { mapState } from 'vuex'
 import DePagination from '@/components/deCustomCm/pagination.js'
+
 export default {
   name: 'ChartComponentS2',
   components: { TitleRemark, ViewTrackBar, ChartTitleUpdate, DePagination },
   props: {
+    terminalType: {
+      type: String,
+      default: 'pc'
+    },
     chart: {
       type: Object,
       required: true
@@ -183,13 +188,18 @@ export default {
       return this.previewCanvasScale.scalePointWidth
     },
     autoStyle() {
-      return {
+      if (this.terminalType === 'pc') {
-        height: (100 / this.scale) + '%!important',
+        return {
-        width: (100 / this.scale) + '%!important',
+          height: (100 / this.scale) + '%!important',
-        left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
+          width: (100 / this.scale) + '%!important',
-        top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
+          left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
-        transform: 'scale(' + this.scale + ')'
+          top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
+          transform: 'scale(' + this.scale + ')'
+        }
+      } else {
+        return {}
       }
+
     },
     trackBarStyleTime() {
       return this.trackBarStyle

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

@@ -1,6 +1,7 @@
 <template>
   <el-row class="component-wait">
     <el-tabs
+      class="wait-tab"
       v-model="activeName"
       style="padding-left: 10px"
     >
@@ -36,7 +37,7 @@
       class="component-wait-main"
       style="padding:10px"
     >
-      <mobile-background-selector />
+      <mobile-background-selector/>
     </el-row>
   </el-row>
 </template>
@@ -141,7 +142,8 @@ export default {
   height: 100%;
 }
 
-::v-deep .el-tabs--top {
+
+.wait-tab {
   height: 40px !important;
   background-color: #9ea6b2;
 }