Merge pull request #3558 from dataease/pr@dev@refactor_tab-font-size

refactor(组件): Tab组件支持设置字体大小

frontend/src/components/canvas/components/TextAttr.vue

@@ -518,6 +518,7 @@ export default {
       ],
       // tab组件显示的属性
       'de-tabs': [
+        'fontSize',
         'borderStyle',
         'borderWidth',
         'borderColor',
@@ -718,39 +719,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .attr-list {
-    overflow: auto;
-    padding: 20px;
-    padding-top: 0;
-    height: 100%;
-  }
-  .el-card-main {
-    height: 34px;
-    z-index: 10;
-    padding-right: 2px;
-    position: absolute;
+.attr-list {
+  overflow: auto;
+  padding: 20px;
+  padding-top: 0;
+  height: 100%;
+}
 
-  }
-  .el-card-main ::v-deep .el-card__body {
-    padding: 0px!important;
+.el-card-main {
+  height: 34px;
+  z-index: 10;
+  padding-right: 2px;
+  position: absolute;
 
-  }
+}
 
-  ::v-deep .el-radio-button__inner{
-    padding: 5px!important;
-    width: 30px!important;
-  }
+.el-card-main ::v-deep .el-card__body {
+  padding: 0px !important;
 
-  ::v-deep .el-color-dropdown__link-btn {
-    display: inline!important;
-  }
+}
 
-  ::v-deep input::-webkit-outer-spin-button,
-  ::v-deep input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-  }
-  ::v-deep input[type='number'] {
-    -moz-appearance: textfield !important;
-  }
+::v-deep .el-radio-button__inner {
+  padding: 5px !important;
+  width: 30px !important;
+}
+
+::v-deep .el-color-dropdown__link-btn {
+  display: inline !important;
+}
+
+::v-deep input::-webkit-outer-spin-button,
+::v-deep input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+
+::v-deep input[type='number'] {
+  -moz-appearance: textfield !important;
+}
 
 </style>

frontend/src/components/canvas/custom-component/component-list.js

@@ -388,7 +388,8 @@ const list = [
       height: 200,
       borderStyle: 'solid',
       borderWidth: 0,
-      borderColor: '#000000'
+      borderColor: '#000000',
+      fontSize: 16
     },
     options: {
       tabList: [{

frontend/src/components/canvas/utils/utils.js

@@ -99,6 +99,9 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
         item.options.attrs.accuracy = 'HH:mm'
       }
     }
+    if (item.type === 'de-tabs') {
+      item.style.fontSize = item.style.fontSize || 16
+    }
     if (item.type === 'custom') {
       item.options.manualModify = false
     }

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

@@ -25,8 +25,7 @@
         :name="item.name"
       >
         <span slot="label">
-          <span>{{ item.title }}</span>
-
+          <span :style="titleStyle">{{ item.title }}</span>
           <el-dropdown
             v-if="dropdownShow"
             slot="label"
@@ -35,7 +34,6 @@
             @command="handleCommand"
           >
             <span class="el-dropdown-link">
-
               <i
                 v-if="isEdit"
                 class="de-tab-i el-icon-arrow-down el-icon--right"
@@ -295,6 +293,11 @@ export default {
     }
   },
   computed: {
+    titleStyle() {
+      return {
+        fontSize: (this.element.style.fontSize || 16) + 'px'
+      }
+    },
     headClass() {
       return 'tab-head-' + this.element.style.headPosition
     },