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 87bc04310c..e225245851 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -365,10 +365,14 @@ declare interface ChartTableHeaderAttr { * 表头字体大小 */ tableTitleFontSize: number + tableTitleCornerFontSize: number + tableTitleColFontSize: number /** * 表头字体颜色 */ tableHeaderFontColor: string + tableHeaderCornerFontColor: string + tableHeaderColFontColor: string /** * 表头行高 */ @@ -377,6 +381,8 @@ declare interface ChartTableHeaderAttr { * 表头对齐方式 */ tableHeaderAlign: 'left' | 'center' | 'right' + tableHeaderCornerAlign: 'left' | 'center' | 'right' + tableHeaderColAlign: 'left' | 'center' | 'right' /** * 显示序号 */ @@ -415,10 +421,14 @@ declare interface ChartTableHeaderAttr { * 斜体 */ isItalic: boolean + isCornerItalic: boolean + isColItalic: boolean /** * 加粗 */ isBolder: boolean + isCornerBolder: boolean + isColBolder: boolean } /** * 单元格属性 diff --git a/core/core-frontend/src/utils/canvasStyle.ts b/core/core-frontend/src/utils/canvasStyle.ts index 77542b376d..0936cac276 100644 --- a/core/core-frontend/src/utils/canvasStyle.ts +++ b/core/core-frontend/src/utils/canvasStyle.ts @@ -117,7 +117,12 @@ export function colorRgb(color, opacity) { export const customAttrTrans = { basicStyle: ['barWidth', 'lineWidth', 'lineSymbolSize', 'tableColumnWidth'], - tableHeader: ['tableTitleFontSize', 'tableTitleHeight'], + tableHeader: [ + 'tableTitleFontSize', + 'tableTitleColFontSize', + 'tableTitleCornerFontSize', + 'tableTitleHeight' + ], tableCell: ['tableItemFontSize', 'tableItemHeight'], misc: [ 'nameFontSize', diff --git a/core/core-frontend/src/utils/sizeAdaptor.ts b/core/core-frontend/src/utils/sizeAdaptor.ts index a54f210c0c..6e854af6cd 100644 --- a/core/core-frontend/src/utils/sizeAdaptor.ts +++ b/core/core-frontend/src/utils/sizeAdaptor.ts @@ -7,6 +7,8 @@ export const customAttrTrans = { 'lineSymbolSize', 'funnelWidth', // 漏斗图 最大宽度 'tableTitleFontSize', + 'tableTitleColFontSize', + 'tableTitleCornerFontSize', 'tableItemFontSize', 'tableTitleHeight', 'tableItemHeight', 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 c38ea05da4..3931d8f226 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 @@ -7,7 +7,7 @@ import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outl import { computed, onMounted, PropType, reactive, watch } from 'vue' import { useI18n } from '@/hooks/web/useI18n' import { COLOR_PANEL, DEFAULT_TABLE_HEADER } from '@/views/chart/components/editor/util/chart' -import { ElSpace } from 'element-plus-secondary' +import { ElDivider, ElSpace } from 'element-plus-secondary' import { cloneDeep, defaultsDeep } from 'lodash-es' import { convertToAlphaColor, isAlphaColor } from '@/views/chart/components/js/util' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' @@ -94,67 +94,24 @@ onMounted(() => { ref="tableHeaderForm" label-position="top" > - - - - - - - - - + + + { + + + { .mobile-style { margin-top: 25px; } +.m-divider { + margin: 0 0 16px; + border-color: rgba(31, 35, 41, 0.15); + + &.divider-dark { + border-color: rgba(255, 255, 255, 0.15); + } +} diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index 96491e194a..2007e15529 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -44,7 +44,9 @@ export const DEFAULT_COLOR_CASE: DeepPartial = { tableHeaderBgColor: '#1E90FF', tableHeaderCornerBgColor: '#1E90FF', tableHeaderColBgColor: '#1E90FF', - tableHeaderFontColor: '#000000' + tableHeaderFontColor: '#000000', + tableHeaderCornerFontColor: '#000000', + tableHeaderColFontColor: '#000000' }, tableCell: { tableItemBgColor: '#FFFFFF', @@ -94,7 +96,9 @@ export const DEFAULT_COLOR_CASE_LIGHT: DeepPartial = { tableHeaderBgColor: '#1E90FF', tableHeaderCornerBgColor: '#1E90FF', tableHeaderColBgColor: '#1E90FF', - tableHeaderFontColor: '#000000' + tableHeaderFontColor: '#000000', + tableHeaderCornerFontColor: '#000000', + tableHeaderColFontColor: '#000000' }, tableCell: { tableItemBgColor: '#FFFFFF', @@ -143,7 +147,9 @@ export const DEFAULT_COLOR_CASE_DARK: DeepPartial = { tableHeaderBgColor: '#1E90FF', tableHeaderCornerBgColor: '#1E90FF', tableHeaderColBgColor: '#1E90FF', - tableHeaderFontColor: '#FFFFFF' + tableHeaderFontColor: '#FFFFFF', + tableHeaderCornerFontColor: '#FFFFFF', + tableHeaderColFontColor: '#FFFFFF' }, tableCell: { tableItemBgColor: '#131E42', @@ -418,11 +424,17 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = { indexLabel: t('relation.index'), showIndex: false, tableHeaderAlign: 'left', + tableHeaderCornerAlign: 'left', + tableHeaderColAlign: 'left', tableHeaderBgColor: '#1E90FF', tableHeaderCornerBgColor: '#1E90FF', tableHeaderColBgColor: '#1E90FF', tableHeaderFontColor: '#000000', + tableHeaderCornerFontColor: '#000000', + tableHeaderColFontColor: '#000000', tableTitleFontSize: 12, + tableTitleCornerFontSize: 12, + tableTitleColFontSize: 12, tableTitleHeight: 36, tableHeaderSort: false, showColTooltip: false, @@ -431,7 +443,11 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = { showHorizonBorder: true, showVerticalBorder: true, isItalic: false, - isBolder: true + isCornerItalic: false, + isColItalic: false, + isBolder: true, + isCornerBolder: true, + isColBolder: true } export const DEFAULT_TABLE_CELL: ChartTableCellAttr = { tableFontColor: '#000000', 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 3cd930c124..d60c3e467a 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 @@ -388,8 +388,20 @@ export class TablePivot extends S2ChartView { tableBorderColor = hexColorToRGBA(tableBorderColor, basicStyle.alpha) } const tableHeaderFontColor = hexColorToRGBA(tableHeader.tableHeaderFontColor, basicStyle.alpha) + const tableHeaderColFontColor = hexColorToRGBA( + tableHeader.tableHeaderColFontColor, + basicStyle.alpha + ) + const tableHeaderCornerFontColor = hexColorToRGBA( + tableHeader.tableHeaderCornerFontColor, + basicStyle.alpha + ) const fontStyle = tableHeader.isItalic ? 'italic' : 'normal' + const colFontStyle = tableHeader.isColItalic ? 'italic' : 'normal' + const cornerFontStyle = tableHeader.isCornerItalic ? 'italic' : 'normal' const fontWeight = tableHeader.isBolder === false ? 'normal' : 'bold' + const colFontWeight = tableHeader.isColBolder === false ? 'normal' : 'bold' + const cornerFontWeight = tableHeader.isCornerBolder === false ? 'normal' : 'bold' const pivotTheme = { rowCell: { cell: { @@ -398,38 +410,59 @@ export class TablePivot extends S2ChartView { verticalBorderColor: tableBorderColor }, text: { - fill: tableHeaderFontColor, - fontSize: tableHeader.tableTitleFontSize, - textAlign: tableHeader.tableHeaderAlign, + fill: tableHeaderColFontColor, + fontSize: tableHeader.tableTitleColFontSize, + textAlign: tableHeader.tableHeaderColAlign, textBaseline: 'top', - fontStyle, - fontWeight + fontStyle: colFontStyle, + fontWeight: colFontWeight }, bolderText: { - fill: tableHeaderFontColor, - fontSize: tableHeader.tableTitleFontSize, - textAlign: tableHeader.tableHeaderAlign, - fontStyle, - fontWeight + fill: tableHeaderColFontColor, + fontSize: tableHeader.tableTitleColFontSize, + textAlign: tableHeader.tableHeaderColAlign, + fontStyle: colFontStyle, + fontWeight: colFontWeight }, measureText: { - fill: tableHeaderFontColor, - fontSize: tableHeader.tableTitleFontSize, - textAlign: tableHeader.tableHeaderAlign, - fontStyle, - fontWeight + fill: tableHeaderColFontColor, + fontSize: tableHeader.tableTitleColFontSize, + textAlign: tableHeader.tableHeaderColAlign, + fontStyle: colFontStyle, + fontWeight: colFontWeight }, seriesText: { - fill: tableHeaderFontColor, - fontSize: tableHeader.tableTitleFontSize, - textAlign: tableHeader.tableHeaderAlign, - fontStyle, - fontWeight + fill: tableHeaderColFontColor, + fontSize: tableHeader.tableTitleColFontSize, + textAlign: tableHeader.tableHeaderColAlign, + fontStyle: colFontStyle, + fontWeight: colFontWeight } }, cornerCell: { cell: { backgroundColor: tableHeaderCornerBgColor + }, + text: { + fill: tableHeaderCornerFontColor, + fontSize: tableHeader.tableTitleCornerFontSize, + textAlign: tableHeader.tableHeaderCornerAlign, + fontStyle: cornerFontStyle, + fontWeight: cornerFontWeight + }, + bolderText: { + fill: tableHeaderCornerFontColor, + fontSize: tableHeader.tableTitleCornerFontSize, + textAlign: tableHeader.tableHeaderCornerAlign, + fontStyle: cornerFontStyle, + fontWeight: cornerFontWeight + }, + measureText: { + fill: tableHeaderCornerFontColor, + fontSize: tableHeader.tableTitleCornerFontSize, + textAlign: tableHeader.tableHeaderCornerAlign, + fontStyle: cornerFontStyle, + fontWeight: cornerFontWeight } } }