Pr@dev v2@feat tab title background2 (#14884)

* feat(仪表板、数据大屏): Tab组件标题支持设置背景 #13384

* feat(仪表板、数据大屏): Tab组件标题支持设置背景

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

@@ -59,9 +59,7 @@ const onBackgroundChange = val => {
 }
 
 const onTitleBackgroundEnableChange = val => {
-  element.value.titleBackground.enable = val
   snapshotStore.recordSnapshotCacheToMobile('titleBackground')
-  emits('onAttrChange', { custom: 'titleBackground' })
 }
 
 const onTitleBackgroundChange = val => {

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

@@ -30,7 +30,7 @@
         >
           <template #label>
             <div class="custom-tab-title" @mousedown.stop>
-              <span :style="titleStyle(tabItem.name)">{{ tabItem.title }}</span>
+              <span class="title-inner" :style="titleStyle(tabItem.name)">{{ tabItem.title }}</span>
               <el-dropdown
                 v-if="isEditMode"
                 :effect="curThemes"
@@ -144,12 +144,12 @@ import eventBus from '@/utils/eventBus'
 import { canvasChangeAdaptor, findComponentIndexById, isDashboard } from '@/utils/canvasUtils'
 import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
-import { useEmitt } from '@/hooks/web/useEmitt'
 import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
 import { dataVTabComponentAdd, groupSizeStyleAdaptor } from '@/utils/style'
 import { deepCopyTabItemHelper } from '@/store/modules/data-visualization/copy'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { useI18n } from '@/hooks/web/useI18n'
+import { imgUrlTrans } from '@/utils/imgUtils'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
@@ -430,22 +430,78 @@ const headClass = computed(() => {
   }
 })
 
+const backgroundStyle = backgroundParams => {
+  if (backgroundParams) {
+    const {
+      backdropFilterEnable,
+      backdropFilter,
+      backgroundColorSelect,
+      backgroundColor,
+      backgroundImageEnable,
+      backgroundType,
+      outerImage,
+      innerPadding,
+      borderRadius
+    } = backgroundParams
+    let style = {
+      padding: innerPadding * scale.value + 'px',
+      borderRadius: borderRadius + 'px'
+    }
+    let colorRGBA = ''
+    if (backgroundColorSelect && backgroundColor) {
+      colorRGBA = backgroundColor
+    }
+    if (backgroundImageEnable) {
+      if (backgroundType === 'outerImage' && typeof outerImage === 'string') {
+        style['background'] = `url(${imgUrlTrans(outerImage)}) no-repeat ${colorRGBA}`
+      } else {
+        style['background-color'] = colorRGBA
+      }
+    } else {
+      style['background-color'] = colorRGBA
+    }
+    if (backdropFilterEnable) {
+      style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)'
+    }
+    return style
+  }
+  return {}
+}
+
 const titleStyle = itemName => {
+  let style = {}
   if (editableTabsValue.value === itemName) {
-    return {
+    style = {
       textDecoration: element.value.style.textDecoration,
       fontStyle: element.value.style.fontStyle,
       fontWeight: element.value.style.fontWeight,
       fontSize: (element.value.style.activeFontSize || 18) * scale.value + 'px'
     }
+    if (element.value.titleBackground?.enable) {
+      style = {
+        ...style,
+        ...backgroundStyle(element.value.titleBackground.active)
+      }
+    }
   } else {
-    return {
+    style = {
       textDecoration: element.value.style.textDecoration,
       fontStyle: element.value.style.fontStyle,
       fontWeight: element.value.style.fontWeight,
       fontSize: (element.value.style.fontSize || 16) * scale.value + 'px'
     }
+    if (element.value.titleBackground?.enable) {
+      style = {
+        ...style,
+        ...backgroundStyle(
+          element.value.titleBackground.multiply
+            ? element.value.titleBackground.active
+            : element.value.titleBackground.inActive
+        )
+      }
+    }
   }
+  return style
 }
 
 const fontColor = computed(() => {
@@ -631,5 +687,8 @@ onBeforeMount(() => {
   height: 100%;
 }
 .custom-tab-title {
+  .title-inner {
+    background-size: 100% 100% !important;
+  }
 }
 </style>

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

@@ -20,7 +20,9 @@ const { element } = toRefs(props)
 
 const onTitleBackgroundChange = (params, paramsName) => {
   // do change
-  element.value.titleBackground[paramsName] = params
+  if (params) {
+    element.value.titleBackground[paramsName] = params
+  }
   emits('onTitleBackgroundChange', element.value.titleBackground)
 }
 </script>
@@ -36,8 +38,21 @@ const onTitleBackgroundChange = (params, paramsName) => {
     />
     <div class="background-label">
       <span>{{ t('visualization.inactive_title_background') }}</span>
+      <span style="margin: -2px 0 0 24px">
+        <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+          <el-checkbox
+            size="small"
+            :effect="themes"
+            v-model="element.titleBackground.multiply"
+            @change="onTitleBackgroundChange(null, null)"
+          >
+            {{ t('visualization.multiply_active_title_background') }}
+          </el-checkbox>
+        </el-form-item>
+      </span>
     </div>
     <background-overall-common
+      v-show="!element.titleBackground.multiply"
       :themes="themes"
       :common-background-pop="element.titleBackground.inActive"
       component-position="component"
@@ -55,5 +70,6 @@ const onTitleBackgroundChange = (params, paramsName) => {
   font-weight: 500;
   font-size: 12px;
   margin-bottom: 8px;
+  display: flex;
 }
 </style>