Merge pull request #3820 from dataease/pr@dev@feat_tab-active

feat(仪表板): Tab组件支持设置激活字体大小

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

@@ -99,6 +99,30 @@
         />
       </div>
 
+      <el-tooltip
+        v-if="attrShow('fontSize')"
+        :content="$t('panel.active_font_size')"
+      >
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="iconfont icon-font"
+        />
+      </el-tooltip>
+
+      <div
+        v-if="attrShow('activeFontSize')"
+        style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
+        <el-input
+          v-model="initActiveFontSize"
+          type="number"
+          size="mini"
+          :min="miniFontSize"
+          :max="maxFontSize"
+          @change="styleChange"
+        />
+      </div>
+
       <el-tooltip
         v-if="attrShow('fontWeight')"
         :content="$t('panel.fontWeight')"
@@ -440,6 +464,7 @@ export default {
       innerOpacity: 0,
       mainWidthOffset: 600,
       initFontSize: 12,
+      initActiveFontSize: 18,
       miniFontSize: 0,
       maxFontSize: 128,
       textAlignOptions: [
@@ -520,6 +545,7 @@ export default {
       // tab组件显示的属性
       'de-tabs': [
         'fontSize',
+        'activeFontSize',
         'borderStyle',
         'borderWidth',
         'borderColor',
@@ -623,6 +649,7 @@ export default {
       handler(newVal, oldVla) {
         if (newVal.fontSize) {
           this.initFontSize = newVal.fontSize
+          this.initActiveFontSize = newVal.activeFontSize
         }
       },
       deep: true
@@ -632,6 +659,17 @@ export default {
         this.styleInfo['opacity'] = this.innerOpacity / 100
       }
     },
+    initActiveFontSize: {
+      handler(newVal) {
+        if (newVal < this.miniFontSize) {
+          this.styleInfo.activeFontSize = this.miniFontSize
+        } else if (newVal > this.maxFontSize) {
+          this.styleInfo.activeFontSize = this.maxFontSize
+        } else {
+          this.styleInfo.activeFontSize = newVal
+        }
+      }
+    },
     initFontSize: {
       handler(newVal) {
         if (newVal < this.miniFontSize) {
@@ -656,6 +694,9 @@ export default {
     if (this.attrShow('fontSize')) {
       this.initFontSize = this.styleInfo.fontSize
     }
+    if (this.attrShow('activeFontSize')) {
+      this.initActiveFontSize = this.styleInfo.activeFontSize
+    }
   },
 
   methods: {

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

@@ -208,6 +208,7 @@ export default {
         'left',
         'width',
         'fontSize',
+        'activeFontSize',
         'borderWidth',
         'letterSpacing'
       ],

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

@@ -94,8 +94,7 @@ export const VIDEOLINKS = {
       fullscreenToggle: false,
       pause: false
     },
-    sources: [{
+    sources: [{}]
-    }]
   },
   rtmp: {
     sources: [{
@@ -389,7 +388,10 @@ const list = [
       borderStyle: 'solid',
       borderWidth: 0,
       borderColor: '#000000',
-      fontSize: 16
+      fontSize: 16,
+      activeFontSize: 18,
+      carouselEnable: false,
+      switchTime: 5
     },
     options: {
       tabList: [{

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

@@ -103,6 +103,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
     }
     if (item.type === 'de-tabs') {
       item.style.fontSize = item.style.fontSize || 16
+      item.style.activeFontSize = item.style.activeFontSize || 18
       item.style.carouselEnable = item.style.carouselEnable || false
       item.style.switchTime = item.style.switchTime || 5
     }

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

@@ -29,7 +29,7 @@
         :name="item.name"
       >
         <span slot="label">
-          <span :style="titleStyle">{{ item.title }}</span>
+          <span :style="titleStyle(item.name)">{{ item.title }}</span>
           <el-dropdown
             v-if="dropdownShow"
             slot="label"
@@ -305,11 +305,6 @@ export default {
     maskShow() {
       return Boolean(this.$store.state.dragComponentInfo)
     },
-    titleStyle() {
-      return {
-        fontSize: (this.element.style.fontSize || 16) + 'px'
-      }
-    },
     headClass() {
       return 'tab-head-' + this.element.style.headPosition
     },
@@ -457,6 +452,17 @@ export default {
     bus.$off('add-new-tab', this.addNewTab)
   },
   methods: {
+    titleStyle(itemName) {
+      if (this.activeTabName === itemName) {
+        return {
+          fontSize: (this.element.style.activeFontSize || 18) + 'px'
+        }
+      } else {
+        return {
+          fontSize: (this.element.style.fontSize || 16) + 'px'
+        }
+      }
+    },
     initCarousel() {
       this.timer && clearInterval(this.timer)
       if (this.element.style.carouselEnable) {

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

@@ -118,14 +118,15 @@
             <el-checkbox
               v-model="styleInfo.carouselEnable"
               size="mini"
-            >{{ $('common.enable') }}
+              @change="styleChange"
+            >{{ $t('commons.enable') }}
             </el-checkbox>
           </el-col>
           <el-col
             :span="8"
             style="text-align: right;padding-right: 10px"
           >
-            {{ $('panel.switch_time') }}
+            {{ $t('panel.switch_time') }}
           </el-col>
           <el-col :span="10">
             <el-input
@@ -135,6 +136,7 @@
               size="mini"
               :min="2"
               class="hide-icon-number"
+              @change="styleChange"
             >
               <template slot="append">S</template>
             </el-input>

frontend/src/lang/en.js

@@ -1875,6 +1875,7 @@ export default {
     back_parent: 'Back to previous'
   },
   panel: {
+    active_font_size: 'Active font size',
     carousel: 'Carousel',
     switch_time: 'Switch time',
     position_adjust: 'Position',

frontend/src/lang/tw.js

@@ -1875,6 +1875,7 @@ export default {
     back_parent: '返回上一級'
   },
   panel: {
+    active_font_size: '激活字體大小',
     carousel: '輪播',
     switch_time: '切換時間',
     position_adjust: '位置',

frontend/src/lang/zh.js

@@ -1875,6 +1875,7 @@ export default {
     back_parent: '返回上一级'
   },
   panel: {
+    active_font_size: '激活字体大小',
     carousel: '轮播',
     switch_time: '切换时间',
     position_adjust: '位置',

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1668397590143') format('woff2'),
+  src: url('iconfont.woff2?t=1669087400468') format('woff2'),
-       url('iconfont.woff?t=1668397590143') format('woff'),
+       url('iconfont.woff?t=1669087400468') format('woff'),
-       url('iconfont.ttf?t=1668397590143') format('truetype');
+       url('iconfont.ttf?t=1669087400468') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-font:before {
+  content: "\e63d";
+}
+
 .icon-WATERMARK:before {
   content: "\ea16";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "109745",
+      "name": "font",
+      "font_class": "font",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
     {
       "icon_id": "23072499",
       "name": "WATERMARK",

frontend/src/views/chart/view/ChartEdit.vue

@@ -192,7 +192,7 @@
                               @command="chartFieldEdit"
                             >
                               <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools"/>
+                                <i class="el-icon-s-tools" />
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item
@@ -267,7 +267,7 @@
                               @command="chartFieldEdit"
                             >
                               <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools"/>
+                                <i class="el-icon-s-tools" />
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item
@@ -362,7 +362,7 @@
                           style="padding: 6px;"
                         >
                           {{ $t('chart.change_chart_type') }}
-                          <i class="el-icon-caret-bottom"/>
+                          <i class="el-icon-caret-bottom" />
                         </el-button>
                       </el-popover>
                     </span>
@@ -490,8 +490,8 @@
                     >
                       <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
-                            $t('chart.drag_block_table_data_column')
+                          $t('chart.drag_block_table_data_column')
-                          }}</span>
+                        }}</span>
                         <span
                           v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')"
                         >{{ $t('chart.drag_block_type_axis') }}</span>
@@ -499,18 +499,18 @@
                           v-else-if="view.type && view.type.includes('pie')"
                         >{{ $t('chart.drag_block_pie_label') }}</span>
                         <span v-else-if="view.type && view.type.includes('funnel')">{{
-                            $t('chart.drag_block_funnel_split')
+                          $t('chart.drag_block_funnel_split')
-                          }}</span>
+                        }}</span>
                         <span v-else-if="view.type && view.type.includes('radar')">{{
-                            $t('chart.drag_block_radar_label')
+                          $t('chart.drag_block_radar_label')
-                          }}</span>
+                        }}</span>
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
                         <span v-else-if="view.type && view.type.includes('treemap')">{{
-                            $t('chart.drag_block_treemap_label')
+                          $t('chart.drag_block_treemap_label')
-                          }}</span>
+                        }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                            $t('chart.drag_block_word_cloud_label')
+                          $t('chart.drag_block_word_cloud_label')
-                          }}</span>
+                        }}</span>
                         <span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
@@ -633,8 +633,8 @@
                     >
                       <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
-                            $t('chart.drag_block_table_data_column')
+                          $t('chart.drag_block_table_data_column')
-                          }}</span>
+                        }}</span>
                         <span
                           v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
                         >{{ $t('chart.drag_block_value_axis') }}</span>
@@ -642,30 +642,30 @@
                           v-else-if="view.type && view.type.includes('pie')"
                         >{{ $t('chart.drag_block_pie_angel') }}</span>
                         <span v-else-if="view.type && view.type.includes('funnel')">{{
-                            $t('chart.drag_block_funnel_width')
+                          $t('chart.drag_block_funnel_width')
-                          }}</span>
+                        }}</span>
                         <span v-else-if="view.type && view.type.includes('radar')">{{
-                            $t('chart.drag_block_radar_length')
+                          $t('chart.drag_block_radar_length')
-                          }}</span>
+                        }}</span>
                         <span v-else-if="view.type && view.type.includes('gauge')">{{
-                            $t('chart.drag_block_gauge_angel')
+                          $t('chart.drag_block_gauge_angel')
-                          }}</span>
+                        }}</span>
                         <span
                           v-else-if="view.type && view.type.includes('text')"
                         >{{ $t('chart.drag_block_label_value') }}</span>
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
                         <span v-else-if="view.type && view.type.includes('tree')">{{
-                            $t('chart.drag_block_treemap_size')
+                          $t('chart.drag_block_treemap_size')
-                          }}</span>
+                        }}</span>
                         <span v-else-if="view.type && view.type === 'chart-mix'">{{
-                            $t('chart.drag_block_value_axis_main')
+                          $t('chart.drag_block_value_axis_main')
-                          }}</span>
+                        }}</span>
                         <span
                           v-else-if="view.type && view.type === 'liquid'"
                         >{{ $t('chart.drag_block_progress') }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                            $t('chart.drag_block_word_cloud_size')
+                          $t('chart.drag_block_word_cloud_size')
-                          }}</span>
+                        }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span>{{ $t('chart.quota') }}</span>
                         <i
@@ -1116,7 +1116,7 @@
           class="padding-tab"
           style="width: 350px;"
         >
-          <position-adjust/>
+          <position-adjust />
         </el-tab-pane>
 
       </el-tabs>
@@ -1268,7 +1268,7 @@
       width="800px"
       class="dialog-css"
     >
-      <quota-filter-editor :item="quotaItem"/>
+      <quota-filter-editor :item="quotaItem" />
       <div
         slot="footer"
         class="dialog-footer"
@@ -1295,7 +1295,7 @@
       width="800px"
       class="dialog-css"
     >
-      <dimension-filter-editor :item="dimensionItem"/>
+      <dimension-filter-editor :item="dimensionItem" />
       <div
         slot="footer"
         class="dialog-footer"