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

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"

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)
       }
     }
   })

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>

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>

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',

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: '縮放模式',

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: '缩放模式',