Merge pull request #13262 from dataease/pr@dev-v2@feat_tab-hide-title

feat(仪表板、数据大屏): Tab组件支持隐藏标题 #12729 #13205

core/core-frontend/src/assets/svg/dv-style-tab-head.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1731382660397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7069" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M810.688 960H213.312A149.376 149.376 0 0 1 64 810.688V312.896a149.376 149.376 0 0 1 149.312-149.312h597.312A149.376 149.376 0 0 1 960 312.896v497.792A149.376 149.376 0 0 1 810.688 960z m99.584-647.104c0-54.976-44.608-99.52-99.584-99.52H213.312c-54.976 0-99.584 44.544-99.584 99.52v497.792c0 54.912 44.544 99.584 99.584 99.584h597.312c54.912 0 99.584-44.608 99.584-99.584V312.896z m-127.616 281.536l28.032 16.128v100.544h-149.376V462.208h149.376v116.032l-28.032 16.192zM760.896 512h-49.728v49.792h49.728V512z m0 99.584h-49.728v49.728h49.728v-49.728z m-199.104 0H462.208v99.584h-49.792v-248.96h199.104v248.896h-49.728V611.584z m0-99.584H462.208v49.792h99.584V512z m-248.896 199.104h-49.792V512h-49.792v-49.792h149.312V512h-49.728v199.104zM113.792 64h497.792v49.792H113.792V64z" p-id="7070"></path></svg>

core/core-frontend/src/custom-component/common/CommonStyleSet.vue

@@ -290,6 +290,7 @@ import dvStyleHeadFontActiveColor from '@/assets/svg/dv-style-headFontActiveColo
 import dvStyleHeadFontColor from '@/assets/svg/dv-style-headFontColor.svg'
 import dvStyleScrollSpeed from '@/assets/svg/dv-style-scroll-speed.svg'
 import dvStyleOpacity from '@/assets/svg/dv-style-opacity.svg'
+import dvStyleTabHead from '@/assets/svg/dv-style-tab-head.svg'
 import dvStyleFontSize from '@/assets/svg/dv-style-fontSize.svg'
 import dvStyleLetterSpacing from '@/assets/svg/dv-style-letterSpacing.svg'
 import dvStyleActiveFont from '@/assets/svg/dv-style-activeFont.svg'
@@ -371,6 +372,11 @@ const opacitySizeList = [
   { name: '1', value: 1 }
 ]
 
+const titleHideList = [
+  { name: '隐藏', value: true },
+  { name: '显示', value: false }
+]
+
 const styleForm = computed<any>(() => element.value.style)
 const state = reactive({
   fontSize: [],
@@ -466,6 +472,13 @@ const styleOptionKeyArray = [
     customOption: opacitySizeList,
     width: '90px',
     icon: dvStyleOpacity
+  },
+  {
+    value: 'titleHide',
+    label: '标题样式',
+    customOption: titleHideList,
+    width: '90px',
+    icon: dvStyleTabHead
   }
 ]
 

core/core-frontend/src/custom-component/de-tabs/Component.vue

@@ -2,7 +2,12 @@
   <div
     v-if="state.tabShow"
     style="width: 100%; height: 100%"
-    :class="[headClass, `ed-tabs-${curThemes}`]"
+    :class="[
+      headClass,
+      `ed-tabs-${curThemes}`,
+      { 'title-hidde-tab': hideTitle },
+      { 'title-show-tab': !hideTitle }
+    ]"
     class="custom-tabs-head"
     ref="tabComponentRef"
   >
@@ -14,6 +19,7 @@
       :active-color="activeColor"
       :border-color="noBorderColor"
       :border-active-color="borderActiveColor"
+      :hide-title="hideTitle"
     >
       <template :key="tabItem.name" v-for="tabItem in element.propValue">
         <el-tab-pane
@@ -211,6 +217,19 @@ const editableTabsValue = ref(null)
 const noBorderColor = ref('none')
 let currentInstance
 
+const hideTitle = computed(() => {
+  if (
+    element.value &&
+    element.value.style &&
+    element.value.style.titleHide &&
+    typeof element.value.style.titleHide === 'boolean'
+  ) {
+    return element.value.style.titleHide
+  } else {
+    return false
+  }
+})
+
 const isEditMode = computed(() => editMode.value === 'edit' && isEdit.value && !mobileInPc.value)
 const curThemes = isDashboard() ? 'light' : 'dark'
 const calcTabLength = () => {
@@ -537,9 +556,18 @@ onBeforeMount(() => {
 })
 </script>
 <style lang="less" scoped>
-:deep(.ed-tabs__content) {
-  height: calc(100% - 46px) !important;
+.title-hidde-tab {
+  :deep(.ed-tabs__content) {
+    height: 100% !important;
+  }
 }
+
+.title-show-tab {
+  :deep(.ed-tabs__content) {
+    height: calc(100% - 46px) !important;
+  }
+}
+
 .ed-tabs-dark {
   :deep(.ed-tabs__new-tab) {
     margin-right: 25px;

core/core-frontend/src/custom-component/de-tabs/DeCustomTab.vue

@@ -7,6 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 const props = defineProps({
+  hideTitle: Boolean,
   /* 颜色可以单词，如red；也可以是颜色值 */
   // 字体颜色
   fontColor: String,
@@ -37,7 +38,8 @@ const tabClassName = computed(() =>
         props.fontColor && 'fontColor',
         props.activeColor && 'activeColor',
         noBorder.value ? 'noBorder' : props.borderColor && 'borderColor',
-        props.borderActiveColor && 'borderActiveColor'
+        props.borderActiveColor && 'borderActiveColor',
+        props.hideTitle && 'no-header'
       ]
 )
 
@@ -47,6 +49,11 @@ const noBorder = computed(() => props.borderColor === 'none')
 <style lang="less">
 .de-tabs {
   height: 100%;
+  &.no-header {
+    .ed-tabs__header {
+      display: none;
+    }
+  }
   &.ed-tabs--card {
     > .ed-tabs__header {
       height: auto !important;

core/core-frontend/src/utils/canvasUtils.ts

@@ -147,6 +147,11 @@ export function historyItemAdaptor(
       }
     })
   }
+
+  if (componentItem.component === 'DeTabs') {
+    componentItem.style['titleHide'] = componentItem.style['titleHide'] || false
+  }
+
   if (componentItem.component === 'Group') {
     componentItem.expand = componentItem.expand || false
   }