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/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe63d;</span>
+                <div class="name">font</div>
+                <div class="code-name">&amp;#xe63d;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xea16;</span>
                 <div class="name">WATERMARK</div>
@@ -798,9 +804,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1668397590143') format('woff2'),
-       url('iconfont.woff?t=1668397590143') format('woff'),
-       url('iconfont.ttf?t=1668397590143') format('truetype');
+  src: url('iconfont.woff2?t=1669087400468') format('woff2'),
+       url('iconfont.woff?t=1669087400468') format('woff'),
+       url('iconfont.ttf?t=1669087400468') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -826,6 +832,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-font"></span>
+            <div class="name">
+              font
+            </div>
+            <div class="code-name">.icon-font
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-WATERMARK"></span>
             <div class="name">
@@ -1942,6 +1957,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-font"></use>
+                </svg>
+                <div class="name">font</div>
+                <div class="code-name">#icon-font</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-WATERMARK"></use>

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'),
-       url('iconfont.woff?t=1668397590143') format('woff'),
-       url('iconfont.ttf?t=1668397590143') format('truetype');
+  src: url('iconfont.woff2?t=1669087400468') format('woff2'),
+       url('iconfont.woff?t=1669087400468') format('woff'),
+       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",