Merge pull request #3529 from dataease/pr@dev@feat_tab-head-position

feat(组件): Tab组件支持设置头部位置

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

@@ -414,9 +414,10 @@ import StreamMediaLinks from '@/components/canvas/components/Editor/StreamMediaL
 import DateFormat from '@/components/canvas/components/Editor/DateFormat'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'
+import TitlePosition from '@/components/widget/DeWidget/TitlePosition'
 
 export default {
-  components: { FrameLinks, DateFormat, VideoLinks, StreamMediaLinks },
+  components: { TitlePosition, FrameLinks, DateFormat, VideoLinks, StreamMediaLinks },
   props: {
     canvasId: {
       type: String,

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

@@ -1,6 +1,8 @@
 <template>
-  <div class="de-tabs-div">
-
+  <div
+    class="de-tabs-div"
+    :class="headClass"
+  >
     <dataease-tabs
       v-model="activeTabName"
       type="card"
@@ -293,6 +295,9 @@ export default {
     }
   },
   computed: {
+    headClass() {
+      return 'tab-head-' + this.element.style.headPosition
+    },
     curCanvasScaleSelf() {
       return this.curCanvasScaleMap[this.canvasId]
     },
@@ -634,5 +639,20 @@ export default {
 .canvas_move_in {
   border-color: blueviolet;
 }
+::v-deep .el-tabs__nav{
+  width: 100%;
+}
+.tab-head-left ::v-deep .el-tabs__nav{
+  width: 100%;
+  text-align: left;
+}
+.tab-head-right ::v-deep .el-tabs__nav{
+  width: 100%;
+  text-align: right;
+}
+.tab-head-center ::v-deep .el-tabs__nav{
+  width: 100%;
+  text-align: center;
+}
 
 </style>

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

@@ -8,7 +8,7 @@
       ref="tabsStyleForm"
       :model="styleInfo"
       size="small"
-      class="demo-form-inline"
+      class="de-form-item"
     >
       <el-form-item
         label="头部字体颜色"
@@ -102,8 +102,17 @@
           </el-input>
         </div>
       </el-form-item>
+      <el-form-item :label="$t('detabs.head_position')">
+        <el-radio-group
+          v-model="styleInfo.headPosition"
+          size="mini"
+        >
+          <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+          <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+          <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
     </el-form>
-
     <i
       slot="reference"
       class="iconfont icon-tabs"
@@ -114,6 +123,7 @@
 
 <script>
 import { mapState } from 'vuex'
+
 export default {
   name: 'TabStyle',
   props: {
@@ -123,9 +133,7 @@ export default {
     }
   },
   data() {
-    return {
-
-    }
+    return {}
   },
   computed: {
 

frontend/src/lang/en.js

@@ -534,7 +534,8 @@ export default {
     selectview: 'Select View',
     selectOthers: 'Select Others',
     availableComponents: 'Available Components',
-    please: 'Please'
+    please: 'Please',
+    head_position: 'Head Position'
   },
   example: {
     warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'

frontend/src/lang/tw.js

@@ -534,7 +534,8 @@ export default {
     selectview: '選擇視圖',
     selectOthers: '選擇組件',
     availableComponents: '可選組件',
-    please: '未'
+    please: '未',
+    head_position: '頭部位置'
   },
   example: {
     warning: '創建和編輯頁面是不能被 keep-alive 緩存的，因爲keep-alive 的 include 目前不支持根據路由來緩存，所以目前都是基於 component name 來進行緩存的。如果妳想類似的實現緩存效果，可以使用 localStorage 等瀏覽器緩存方案。或者不要使用 keep-alive 的 include，直接緩存所有頁面。詳情見'

frontend/src/lang/zh.js

@@ -533,7 +533,8 @@ export default {
     selectview: '选择视图',
     selectOthers: '选择组件',
     availableComponents: '可选组件',
-    please: '未'
+    please: '未',
+    head_position: '头部位置'
   },
   example: {
     warning: '创建和编辑页面是不能被 keep-alive 缓存的，因为keep-alive 的 include 目前不支持根据路由来缓存，所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果，可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include，直接缓存所有页面。详情见'

frontend/src/views/chart/chart/chart.js

@@ -1,15 +1,17 @@
 export const DEFAULT_TAB_COLOR_CASE_DARK = {
   headFontColor: '#FFFFFF',
   headFontActiveColor: '#FFFFFF',
-  headBorderColor: '',
-  headBorderActiveColor: ''
+  headBorderColor: '#FFFFFF',
+  headBorderActiveColor: '#FFFFFF',
+  headPosition: 'left'
 }
 
 export const DEFAULT_TAB_COLOR_CASE_LIGHT = {
   headFontColor: '#OOOOOO',
   headFontActiveColor: '#OOOOOO',
-  headBorderColor: '',
-  headBorderActiveColor: ''
+  headBorderColor: '#OOOOOO',
+  headBorderActiveColor: '#OOOOOO',
+  headPosition: 'left'
 }
 
 export const DEFAULT_COLOR_CASE = {

frontend/src/views/panel/panel.js

@@ -5,8 +5,9 @@ import { COMMON_BACKGROUND_BASE } from '@/components/canvas/custom-component/com
 export const TAB_COMMON_STYLE = {
   headFontColor: '#000000',
   headFontActiveColor: '#000000',
-  headBorderColor: null,
-  headBorderActiveColor: null
+  headBorderColor: '#ffffff',
+  headBorderActiveColor: '#ffffff',
+  headPosition: 'left'
 }
 
 export const FILTER_COMMON_STYLE = {