feat: tab组件标题可以隐藏展示

#6447

core/frontend/src/components/dataeaseTabs/index.vue

@@ -14,7 +14,7 @@
 export default {
   name: 'DataeaseTabs',
   props: {
-
+    hideTitle: Boolean,
     fontColor: String,
     activeColor: String,
     borderColor: String,
@@ -43,7 +43,8 @@ export default {
         this.fontColor && 'fontColor',
         this.activeColor && 'activeColor',
         this.noBorder ? 'noBorder' : this.borderColor && 'borderColor',
-        this.borderActiveColor && 'borderActiveColor'
+        this.borderActiveColor && 'borderActiveColor',
+        this.hideTitle && 'no-header'
       ]
       return classes
     },

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

@@ -14,6 +14,7 @@
       style-type="radioGroup"
       class="de-tabs-height"
       :class="isCurrentEdit ? 'de-tabs-edit' : ''"
+      :hide-title="hideTitle"
       :font-color="fontColor"
       :active-color="activeColor"
       :border-color="borderColor"
@@ -391,6 +392,13 @@ export default {
         return 'none'
       }
     },
+    hideTitle() {
+      if (this.element && this.element.style && this.element.style.titleHide && typeof this.element.style.titleHide === 'boolean') {
+        return this.element.style.titleHide
+      } else {
+        return false
+      }
+    },
     titleValid() {
       return !!this.textarea && !!this.textarea.trim()
     },

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

@@ -10,6 +10,12 @@
       size="small"
       class="de-form-item"
     >
+      <el-form-item
+        label="选项卡标题"
+        prop="titleShow"
+      >
+        <el-checkbox v-model="styleInfo.titleHide">隐藏</el-checkbox>
+      </el-form-item>
       <el-form-item
         label="头部字体颜色"
         prop="headFrontColor"

core/frontend/src/styles/de-tabs.scss

@@ -3,128 +3,134 @@
    @import "./variables";
 
    .de-tabs {
+     &.no-header {
+       .el-tabs__header {
+         display: none;
+       }
+     }
+
      &.fontColor {
        .el-tabs__item {
          color: var(--font-color);
-   
+
          &.is-active {
            color: $--color-primary;
          }
-   
+
          &:hover {
            color: $--color-primary;
          }
        }
      }
-   
+
      &.activeColor {
        .el-tabs__item {
          &.is-active {
            color: var(--active-color);
          }
-   
+
          &:hover {
            color: var(--active-color);
          }
        }
-   
+
        .el-tabs__active-bar {
          background-color: var(--active-color);
        }
      }
-   
+
      // card样式的边框
      &.noBorder.el-tabs--card {
        >.el-tabs__header {
          border-bottom: none;
-   
+
          .el-tabs__nav {
            border: none;
          }
-   
+
          .el-tabs__item {
            border-left: none;
          }
-   
+
          .el-tabs__item.is-active {
            border-bottom: none;
          }
        }
      }
-   
+
      &.borderActiveColor.el-tabs--card {
        >.el-tabs__header .el-tabs__item.is-active {
          border-bottom-color: var(--border-active-color);
        }
      }
-   
+
      &.borderColor.el-tabs--card {
        >.el-tabs__header {
          border-bottom-color: var(--border-color);
-   
+
          .el-tabs__nav {
            border-color: var(--border-color);
          }
-   
+
          .el-tabs__item {
            border-left-color: var(--border-color);
          }
        }
-   
+
        .el-tabs__item {
          &.is-active {
            color: var(--active-color);
          }
-   
+
          &:hover {
            color: var(--active-color);
          }
        }
-   
+
        .el-tabs__active-bar {
          background-color: var(--active-color);
        }
      }
-   
+
      // 简洁样式的边框
      &.noBorder {
        .el-tabs__nav-wrap::after {
          background: none;
        }
      }
-   
+
      &.borderColor {
        .el-tabs__nav-wrap::after {
          background: var(--border-color);
        }
      }
-   
+
      // radioGroup 类型
      &.radioGroup.borderColor.el-tabs--card {
        >.el-tabs__header {
          border-bottom: none;
-   
+
          .el-tabs__nav {
            border: none;
          }
-   
+
          .el-tabs__item {
            border: 1px solid var(--border-color);
            border-right: 0;
-   
+
            &:first-child {
              border-left: 1px solid var(--border-color);
              border-radius: 4px 0 0 4px;
            }
-   
+
            &:last-child {
              border-right: 1px solid var(--border-color);
              border-radius: 0 4px 4px 0;
            }
-   
+
            &.is-active {
              border: 1px solid var(--border-active-color);
-   
+
              &+.el-tabs__item {
                border-left: 0;
              }
@@ -133,4 +139,3 @@
        }
      }
    }
-   

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

@@ -1,4 +1,5 @@
 export const DEFAULT_TAB_COLOR_CASE_DARK = {
+  titleHide: false,
   headFontColor: '#FFFFFF',
   headFontActiveColor: '#FFFFFF',
   headBorderColor: '#131E42',
@@ -7,6 +8,7 @@ export const DEFAULT_TAB_COLOR_CASE_DARK = {
 }
 
 export const DEFAULT_TAB_COLOR_CASE_LIGHT = {
+  titleHide: false,
   headFontColor: '#OOOOOO',
   headFontActiveColor: '#OOOOOO',
   headBorderColor: '#OOOOOO',

core/frontend/src/views/panel/panel.js

@@ -4,6 +4,7 @@ import { deepCopy } from '@/components/canvas/utils/utils'
 import { COMMON_BACKGROUND } from '@/components/canvas/customComponent/component-list'
 
 export const TAB_COMMON_STYLE = {
+  titleHide: false,
   headFontColor: '#000000',
   headFontActiveColor: '#000000',
   headBorderColor: '#ffffff',