diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts index 7b69c701ed..7fbaeb9b59 100644 --- a/core/core-frontend/src/locales/en.ts +++ b/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', diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts index 02366c3fdc..445c041141 100644 --- a/core/core-frontend/src/locales/tw.ts +++ b/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: '備註', diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index 5b7ab64779..72434fad6b 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/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: '备注', diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index db806757be..87bc04310c 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -359,6 +359,8 @@ declare interface ChartTableHeaderAttr { * 表头背景颜色 */ tableHeaderBgColor: string + tableHeaderCornerBgColor: string + tableHeaderColBgColor: string /** * 表头字体大小 */ diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue index c6c9c08663..c38ea05da4 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue @@ -94,22 +94,67 @@ onMounted(() => { ref="tableHeaderForm" label-position="top" > - - - + + + + + + + + + = { 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 = { }, tableHeader: { tableHeaderBgColor: '#1E90FF', + tableHeaderCornerBgColor: '#1E90FF', + tableHeaderColBgColor: '#1E90FF', tableHeaderFontColor: '#000000' }, tableCell: { @@ -137,6 +141,8 @@ export const DEFAULT_COLOR_CASE_DARK: DeepPartial = { }, 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, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts index 515a8c7684..3cd930c124 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts +++ b/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 @@ -372,6 +373,16 @@ export class TablePivot extends S2ChartView { 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 { const pivotTheme = { rowCell: { cell: { - backgroundColor: tableHeaderBgColor, + backgroundColor: tableHeaderColBgColor, horizontalBorderColor: tableBorderColor, verticalBorderColor: tableBorderColor }, @@ -415,6 +426,11 @@ export class TablePivot extends S2ChartView { fontStyle, fontWeight } + }, + cornerCell: { + cell: { + backgroundColor: tableHeaderCornerBgColor + } } } merge(theme, pivotTheme)