From 1dec0bf8a1a65ce28158a124d82b9fe970e16d22 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 10 Feb 2025 16:59:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF=E3=80=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20Tab=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=20#13384?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-component/common/CommonAttr.vue    | 34 +++++++++++
 .../src/custom-component/component-list.ts    |  8 +++
 .../custom-component/de-tabs/Component.vue    |  4 +-
 .../de-tabs/TabBackgroundOverall.vue          | 59 +++++++++++++++++++
 core/core-frontend/src/locales/en.ts          |  4 ++
 core/core-frontend/src/locales/tw.ts          |  4 ++
 core/core-frontend/src/locales/zh-CN.ts       |  4 ++
 7 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 core/core-frontend/src/custom-component/de-tabs/TabBackgroundOverall.vue

diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index 71ce524ce2..952ee96436 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -12,6 +12,7 @@ import CommonEvent from '@/custom-component/common/CommonEvent.vue'
 import CarouselSetting from '@/custom-component/common/CarouselSetting.vue'
 import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue'
 import CollapseSwitchItem from '../../components/collapse-switch-item/src/CollapseSwitchItem.vue'
+import TabBackgroundOverall from '@/custom-component/de-tabs/TabBackgroundOverall.vue'
 const snapshotStore = snapshotStoreWithOut()
 
 const { t } = useI18n()
@@ -57,6 +58,18 @@ const onBackgroundChange = val => {
   emits('onAttrChange', { custom: 'commonBackground' })
 }
 
+const onTitleBackgroundEnableChange = val => {
+  element.value.titleBackground.enable = val
+  snapshotStore.recordSnapshotCacheToMobile('titleBackground')
+  emits('onAttrChange', { custom: 'titleBackground' })
+}
+
+const onTitleBackgroundChange = val => {
+  element.value.titleBackground = val
+  snapshotStore.recordSnapshotCacheToMobile('titleBackground')
+  emits('onAttrChange', { custom: 'titleBackground' })
+}
+
 const onStyleAttrChange = ({ key, value }) => {
   snapshotStore.recordSnapshotCacheToMobile('style')
   emits('onAttrChange', { custom: 'style', property: key, value: value })
@@ -89,6 +102,11 @@ const backgroundCustomShow = computed(() => {
       !['CanvasBoard', 'CanvasIcon', 'CircleShape', 'RectShape'].includes(element.value.component))
   )
 })
+
+const titleBackgroundShow = computed(
+  () => ['DeTabs'].includes(element.value.component) && element.value.titleBackground
+)
+
 const tabTitleShow = computed(() => {
   return element.value && element.value.style && element.value.component === 'DeTabs'
 })
@@ -139,6 +157,22 @@ onMounted(() => {
           :background-border-select-width="backgroundBorderSelectWidth"
         />
       </el-collapse-item>
+
+      <collapse-switch-item
+        :effect="themes"
+        :title="t('visualization.title_background')"
+        name="titleBackground"
+        v-model="element.titleBackground.enable"
+        @modelChange="val => onTitleBackgroundEnableChange(val)"
+        v-if="element && titleBackgroundShow"
+      >
+        <tab-background-overall
+          :themes="themes"
+          :element="element"
+          component-position="component"
+          @onTitleBackgroundChange="onTitleBackgroundChange"
+        ></tab-background-overall>
+      </collapse-switch-item>
       <slot></slot>
       <collapse-switch-item
         v-if="tabTitleShow"
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 500dc15889..6616ea57c4 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -213,6 +213,13 @@ export const COMMON_COMPONENT_BACKGROUND_MAP = {
   dark: COMMON_COMPONENT_BACKGROUND_DARK
 }
 
+export const COMMON_TAB_TITLE_BACKGROUND = {
+  enable: false, // 是否启用tab标题背景
+  multiply: true, // 激活状态与非激活状态背景是否复用
+  active: COMMON_COMPONENT_BACKGROUND_LIGHT,
+  inActive: COMMON_COMPONENT_BACKGROUND_LIGHT
+}
+
 export const commonAttr = {
   animations: [],
   canvasId: 'canvas-main',
@@ -617,6 +624,7 @@ export function findNewComponentFromList(
       newComponent.innerType = innerType
       if (comp.component === 'DeTabs') {
         newComponent.propValue[0].name = guid()
+        newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND)
       }
     }
   })
diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue
index e2cae86e6e..42bceee91b 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@@ -29,7 +29,7 @@
           :name="tabItem.name"
         >
           <template #label>
-            <div @mousedown.stop>
+            <div class="custom-tab-title" @mousedown.stop>
               <span :style="titleStyle(tabItem.name)">{{ tabItem.title }}</span>
               <el-dropdown
                 v-if="isEditMode"
@@ -630,4 +630,6 @@ onBeforeMount(() => {
   width: 100%;
   height: 100%;
 }
+.custom-tab-title {
+}
 </style>
diff --git a/core/core-frontend/src/custom-component/de-tabs/TabBackgroundOverall.vue b/core/core-frontend/src/custom-component/de-tabs/TabBackgroundOverall.vue
new file mode 100644
index 0000000000..46bff45a8c
--- /dev/null
+++ b/core/core-frontend/src/custom-component/de-tabs/TabBackgroundOverall.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import BackgroundOverallCommon from '@/components/visualization/component-background/BackgroundOverallCommon.vue'
+import { toRefs } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+const emits = defineEmits(['onTitleBackgroundChange'])
+const { t } = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    themes?: EditorTheme
+    element: any
+  }>(),
+  {
+    showStyle: true,
+    themes: 'dark'
+  }
+)
+
+const { element } = toRefs(props)
+
+const onTitleBackgroundChange = (params, paramsName) => {
+  // do change
+  element.value.titleBackground[paramsName] = params
+  emits('onTitleBackgroundChange', element.value.titleBackground)
+}
+</script>
+
+<template>
+  <div class="tab-title-background">
+    <div class="background-label">{{ t('visualization.active_title_background') }}</div>
+    <background-overall-common
+      :themes="themes"
+      :common-background-pop="element.titleBackground.active"
+      component-position="component"
+      @onBackgroundChange="onTitleBackgroundChange($event, 'active')"
+    />
+    <div class="background-label">
+      <span>{{ t('visualization.inactive_title_background') }}</span>
+    </div>
+    <background-overall-common
+      :themes="themes"
+      :common-background-pop="element.titleBackground.inActive"
+      component-position="component"
+      @onBackgroundChange="onTitleBackgroundChange($event, 'inActive')"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.tab-title-background {
+  width: 100%;
+  height: 100%;
+}
+.background-label {
+  font-weight: 500;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+</style>
diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 78ba795ea9..3369891608 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -2815,6 +2815,10 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     column_name: 'Field name'
   },
   visualization: {
+    title_background: 'Title Background',
+    active_title_background: 'Active Title Background',
+    multiply_active_title_background: 'Reuse Active Title Background',
+    inactive_title_background: 'Inactive Title Background',
     no_hidden_components: 'No Hidden Components',
     hidden_components: 'Hidden Components',
     dashboard_adaptor: 'Zoom Mode',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index 719c4397d4..850200bed0 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -2743,6 +2743,10 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    title_background: '標題背景',
+    active_title_background: '激活標題背景',
+    multiply_active_title_background: '復用激活標題背景',
+    inactive_title_background: '非激活標題背景',
     no_hidden_components: '當前無隱藏組件',
     hidden_components: '已隱藏的組件',
     dashboard_adaptor: '縮放模式',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 9babc2cd34..54c8140cd6 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -2745,6 +2745,10 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    title_background: '标题背景',
+    active_title_background: '激活标题背景',
+    multiply_active_title_background: '复用激活标题背景',
+    inactive_title_background: '非激活标题背景',
     no_hidden_components: '当前无隐藏组件',
     hidden_components: '已隐藏的组件',
     dashboard_adaptor: '缩放模式',