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

feat(仪表板): Tab组件支持设置激活字体大小
2022-11-22 11:48:59 +08:00 · 2022-11-22 11:48:59 +08:00 · dedf013830
commit dedf013830
parent dc17f9c05f f920f1fe6a
17 changed files with 507 additions and 417 deletions
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/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: {
--- a/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/frontend/src/components/canvas/components/editor/Preview.vue
@ -208,6 +208,7 @@ export default {
        'left',
        'width',
        'fontSize',
+        'activeFontSize',
        'borderWidth',
        'letterSpacing'
      ],
--- a/frontend/src/components/canvas/customComponent/component-list.js
+++ b/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: [{
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/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
    }
--- a/frontend/src/components/widget/deWidget/DeTabs.vue
+++ b/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) {
--- a/frontend/src/components/widget/deWidget/TabStyle.vue
+++ b/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>
--- a/frontend/src/lang/en.js
+++ b/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',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -1875,6 +1875,7 @@ export default {
    back_parent: '返回上一級'
  },
  panel: {
+    active_font_size: '激活字體大小',
    carousel: '輪播',
    switch_time: '切換時間',
    position_adjust: '位置',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -1875,6 +1875,7 @@ export default {
    back_parent: '返回上一级'
  },
  panel: {
+    active_font_size: '激活字体大小',
    carousel: '轮播',
    switch_time: '切换时间',
    position_adjust: '位置',
--- a/frontend/src/styles/deicon/demo_index.html
+++ b/frontend/src/styles/deicon/demo_index.html
--- a/frontend/src/styles/deicon/iconfont.css
+++ b/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";
 }
--- a/frontend/src/styles/deicon/iconfont.js
+++ b/frontend/src/styles/deicon/iconfont.js
--- a/frontend/src/styles/deicon/iconfont.json
+++ b/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",
--- a/frontend/src/styles/deicon/iconfont.ttf
+++ b/frontend/src/styles/deicon/iconfont.ttf
--- a/frontend/src/styles/deicon/iconfont.woff
+++ b/frontend/src/styles/deicon/iconfont.woff
--- a/frontend/src/styles/deicon/iconfont.woff2
+++ b/frontend/src/styles/deicon/iconfont.woff2
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/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')
-                          }}</span>
+                          $t('chart.drag_block_table_data_column')
+                        }}</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')
-                          }}</span>
+                          $t('chart.drag_block_funnel_split')
+                        }}</span>
                        <span v-else-if="view.type && view.type.includes('radar')">{{
-                            $t('chart.drag_block_radar_label')
-                          }}</span>
+                          $t('chart.drag_block_radar_label')
+                        }}</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')
-                          }}</span>
+                          $t('chart.drag_block_treemap_label')
+                        }}</span>
                        <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                            $t('chart.drag_block_word_cloud_label')
-                          }}</span>
+                          $t('chart.drag_block_word_cloud_label')
+                        }}</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')
-                          }}</span>
+                          $t('chart.drag_block_table_data_column')
+                        }}</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')
-                          }}</span>
+                          $t('chart.drag_block_funnel_width')
+                        }}</span>
                        <span v-else-if="view.type && view.type.includes('radar')">{{
-                            $t('chart.drag_block_radar_length')
-                          }}</span>
+                          $t('chart.drag_block_radar_length')
+                        }}</span>
                        <span v-else-if="view.type && view.type.includes('gauge')">{{
-                            $t('chart.drag_block_gauge_angel')
-                          }}</span>
+                          $t('chart.drag_block_gauge_angel')
+                        }}</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')
-                          }}</span>
+                          $t('chart.drag_block_treemap_size')
+                        }}</span>
                        <span v-else-if="view.type && view.type === 'chart-mix'">{{
-                            $t('chart.drag_block_value_axis_main')
-                          }}</span>
+                          $t('chart.drag_block_value_axis_main')
+                        }}</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')
-                          }}</span>
+                          $t('chart.drag_block_word_cloud_size')
+                        }}</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"