feat(图表): 透视表表头分开设置背景颜色

#13538

core/core-frontend/src/locales/en.ts

@@ -1658,6 +1658,9 @@ export default {
     field: 'Field',
     textColor: 'Text',
     backgroundColor: 'Background',
+    rowBackgroundColor: 'Row Background',
+    colBackgroundColor: 'Column Background',
+    cornerBackgroundColor: 'Corner Background',
     field_can_not_empty: 'Field cannot be empty',
     conditions_can_not_empty:
       'Field conditions cannot be empty. If there are no conditions, please delete the field directly',

core/core-frontend/src/locales/tw.ts

@@ -1626,6 +1626,9 @@ export default {
     field: '字段',
     textColor: '文字',
     backgroundColor: '背景',
+    rowBackgroundColor: '行背景',
+    colBackgroundColor: '列背景',
+    cornerBackgroundColor: '角背景',
     field_can_not_empty: '欄位不能為空',
     conditions_can_not_empty: '欄位的條件不能為空，若無條件，請直接刪除該欄位',
     remark: '備註',

core/core-frontend/src/locales/zh-CN.ts

@@ -1628,6 +1628,9 @@ export default {
     field: '字段',
     textColor: '文字',
     backgroundColor: '背景',
+    rowBackgroundColor: '行背景',
+    colBackgroundColor: '列背景',
+    cornerBackgroundColor: '角背景',
     field_can_not_empty: '字段不能为空',
     conditions_can_not_empty: '字段的条件不能为空，若无条件，请直接删除该字段',
     remark: '备注',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -359,6 +359,8 @@ declare interface ChartTableHeaderAttr {
    * 表头背景颜色
    */
   tableHeaderBgColor: string
+  tableHeaderCornerBgColor: string
+  tableHeaderColBgColor: string
   /**
    * 表头字体大小
    */

core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue

@@ -94,22 +94,67 @@ onMounted(() => {
     ref="tableHeaderForm"
     label-position="top"
   >
-    <el-form-item
+    <el-row :gutter="8">
-      :label="t('chart.backgroundColor')"
+      <el-col :span="12">
-      class="form-item"
+        <el-form-item
-      :class="'form-item-' + themes"
+          :label="
-      v-if="showProperty('tableHeaderBgColor')"
+            chart.type === 'table-pivot'
-    >
+              ? t('chart.rowBackgroundColor')
-      <el-color-picker
+              : t('chart.backgroundColor')
-        :effect="themes"
+          "
-        v-model="state.tableHeaderForm.tableHeaderBgColor"
+          class="form-item"
-        is-custom
+          :class="'form-item-' + themes"
-        :trigger-width="108"
+          v-if="showProperty('tableHeaderBgColor')"
-        :predefine="predefineColors"
+        >
-        show-alpha
+          <el-color-picker
-        @change="changeTableHeader('tableHeaderBgColor')"
+            :effect="themes"
-      />
+            v-model="state.tableHeaderForm.tableHeaderBgColor"
-    </el-form-item>
+            is-custom
+            :trigger-width="108"
+            :predefine="predefineColors"
+            show-alpha
+            @change="changeTableHeader('tableHeaderBgColor')"
+          />
+        </el-form-item>
+      </el-col>
+
+      <template v-if="chart.type === 'table-pivot' && showProperty('tableHeaderBgColor')">
+        <el-col :span="12">
+          <el-form-item
+            :label="t('chart.colBackgroundColor')"
+            class="form-item"
+            :class="'form-item-' + themes"
+          >
+            <el-color-picker
+              :effect="themes"
+              v-model="state.tableHeaderForm.tableHeaderColBgColor"
+              is-custom
+              :trigger-width="108"
+              :predefine="predefineColors"
+              show-alpha
+              @change="changeTableHeader('tableHeaderColBgColor')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            :label="t('chart.cornerBackgroundColor')"
+            class="form-item"
+            :class="'form-item-' + themes"
+          >
+            <el-color-picker
+              :effect="themes"
+              v-model="state.tableHeaderForm.tableHeaderCornerBgColor"
+              is-custom
+              :trigger-width="108"
+              :predefine="predefineColors"
+              show-alpha
+              @change="changeTableHeader('tableHeaderCornerBgColor')"
+            />
+          </el-form-item>
+        </el-col>
+      </template>
+    </el-row>
 
     <el-space>
       <el-form-item

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -41,7 +41,9 @@ export const DEFAULT_COLOR_CASE: DeepPartial<ChartAttr> = {
     valueFontColor: '#5470c6'
   },
   tableHeader: {
-    tableHeaderBgColor: '#6D9A49',
+    tableHeaderBgColor: '#1E90FF',
+    tableHeaderCornerBgColor: '#1E90FF',
+    tableHeaderColBgColor: '#1E90FF',
     tableHeaderFontColor: '#000000'
   },
   tableCell: {
@@ -90,6 +92,8 @@ export const DEFAULT_COLOR_CASE_LIGHT: DeepPartial<ChartAttr> = {
   },
   tableHeader: {
     tableHeaderBgColor: '#1E90FF',
+    tableHeaderCornerBgColor: '#1E90FF',
+    tableHeaderColBgColor: '#1E90FF',
     tableHeaderFontColor: '#000000'
   },
   tableCell: {
@@ -137,6 +141,8 @@ export const DEFAULT_COLOR_CASE_DARK: DeepPartial<ChartAttr> = {
   },
   tableHeader: {
     tableHeaderBgColor: '#1E90FF',
+    tableHeaderCornerBgColor: '#1E90FF',
+    tableHeaderColBgColor: '#1E90FF',
     tableHeaderFontColor: '#FFFFFF'
   },
   tableCell: {
@@ -412,7 +418,9 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = {
   indexLabel: '序号',
   showIndex: false,
   tableHeaderAlign: 'left',
-  tableHeaderBgColor: '#6D9A49',
+  tableHeaderBgColor: '#1E90FF',
+  tableHeaderCornerBgColor: '#1E90FF',
+  tableHeaderColBgColor: '#1E90FF',
   tableHeaderFontColor: '#000000',
   tableTitleFontSize: 12,
   tableTitleHeight: 36,

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts

@@ -22,6 +22,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { isNumber, keys, maxBy, merge, minBy, some, isEmpty, get } from 'lodash-es'
 import { copyContent, CustomDataCell } from '../../common/common_table'
 import Decimal from 'decimal.js'
+import { DEFAULT_TABLE_HEADER } from '@/views/chart/components/editor/util/chart'
 
 type DataItem = Record<string, any>
 
@@ -372,6 +373,16 @@ export class TablePivot extends S2ChartView<PivotSheet> {
     if (!isAlphaColor(tableHeaderBgColor)) {
       tableHeaderBgColor = hexColorToRGBA(tableHeaderBgColor, basicStyle.alpha)
     }
+    let tableHeaderCornerBgColor =
+      tableHeader.tableHeaderCornerBgColor ?? DEFAULT_TABLE_HEADER.tableHeaderCornerBgColor
+    if (!isAlphaColor(tableHeaderCornerBgColor)) {
+      tableHeaderCornerBgColor = hexColorToRGBA(tableHeaderCornerBgColor, basicStyle.alpha)
+    }
+    let tableHeaderColBgColor =
+      tableHeader.tableHeaderColBgColor ?? DEFAULT_TABLE_HEADER.tableHeaderColBgColor
+    if (!isAlphaColor(tableHeaderColBgColor)) {
+      tableHeaderColBgColor = hexColorToRGBA(tableHeaderColBgColor, basicStyle.alpha)
+    }
     let tableBorderColor = basicStyle.tableBorderColor
     if (!isAlphaColor(tableBorderColor)) {
       tableBorderColor = hexColorToRGBA(tableBorderColor, basicStyle.alpha)
@@ -382,7 +393,7 @@ export class TablePivot extends S2ChartView<PivotSheet> {
     const pivotTheme = {
       rowCell: {
         cell: {
-          backgroundColor: tableHeaderBgColor,
+          backgroundColor: tableHeaderColBgColor,
           horizontalBorderColor: tableBorderColor,
           verticalBorderColor: tableBorderColor
         },
@@ -415,6 +426,11 @@ export class TablePivot extends S2ChartView<PivotSheet> {
           fontStyle,
           fontWeight
         }
+      },
+      cornerCell: {
+        cell: {
+          backgroundColor: tableHeaderCornerBgColor
+        }
       }
     }
     merge(theme, pivotTheme)