center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #11200 from dataease/pr@dev-v2@feat_table_font_style

Browse Source 
feat(图表): 表格字体支持设置加粗和斜体 #9077
This commit is contained in:
wisonic-s 2024-07-26 19:17:24 +08:00 committed by GitHub
commit 295eb6b64e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 204 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
core/core-frontend/src/models/chart/chart-attr.d.ts vendored
View File

@ -340,6 +340,14 @@ declare interface ChartTableHeaderAttr {
* 表头纵边框线
*/
showVerticalBorder: boolean
/**
* 斜体
*/
isItalic: boolean
/**
* 加粗
*/
isBolder: boolean
}
/**
* 单元格属性
@ -386,6 +394,14 @@ declare interface ChartTableCellAttr {
* 单元格纵边框线
*/
showVerticalBorder: boolean
/**
* 斜体
*/
isItalic: boolean
/**
* 加粗
*/
isBolder: boolean
}
/**

69
core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
View File

@ -161,13 +161,60 @@ onMounted(() => {
/>
</el-select>
</el-form-item>
</el-space>
<el-space>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
:effect="themes"
class="icon-checkbox"
v-model="state.tableCellForm.isBolder"
@change="changeTableCell('isBolder')"
>
<el-tooltip effect="dark" placement="top">
<template #content>
{{ t('chart.bolder') }}
</template>
<div
class="icon-btn"
:class="{ dark: themes === 'dark', active: state.tableCellForm.isBolder }"
>
<el-icon>
<Icon name="icon_bold_outlined" />
</el-icon>
</div>
</el-tooltip>
</el-checkbox>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
:effect="themes"
class="icon-checkbox"
v-model="state.tableCellForm.isItalic"
@change="changeTableCell('isItalic')"
>
<el-tooltip effect="dark" placement="top">
<template #content>
{{ t('chart.italic') }}
</template>
<div
class="icon-btn"
:class="{ dark: themes === 'dark', active: state.tableCellForm.isItalic }"
>
<el-icon>
<Icon name="icon_italic_outlined" />
</el-icon>
</div>
</el-tooltip>
</el-checkbox>
</el-form-item>
<div class="position-divider" :class="'position-divider--' + themes"></div>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('tableItemAlign')"
>
<template #label>&nbsp;</template>
<el-radio-group
class="icon-radio-group"
v-model="state.tableCellForm.tableItemAlign"
@ -331,4 +378,22 @@ onMounted(() => {
padding: 0;
}
}
.position-divider {
width: 1px;
height: 18px;
margin-bottom: 8px;
background: rgba(31, 35, 41, 0.15);
&.position-divider--dark {
background: rgba(235, 235, 235, 0.15);
}
}
.icon-checkbox {
:deep(.ed-checkbox__input) {
display: none;
}
:deep(.ed-checkbox__label) {
padding: 0;
}
}
</style>

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

@ -132,14 +132,60 @@ onMounted(() => {
/>
</el-select>
</el-form-item>
</el-space>
<el-space>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
:effect="themes"
class="icon-checkbox"
v-model="state.tableHeaderForm.isBolder"
@change="changeTableHeader('isBolder')"
>
<el-tooltip effect="dark" placement="top">
<template #content>
{{ t('chart.bolder') }}
</template>
<div
class="icon-btn"
:class="{ dark: themes === 'dark', active: state.tableHeaderForm.isBolder }"
>
<el-icon>
<Icon name="icon_bold_outlined" />
</el-icon>
</div>
</el-tooltip>
</el-checkbox>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
:effect="themes"
class="icon-checkbox"
v-model="state.tableHeaderForm.isItalic"
@change="changeTableHeader('isItalic')"
>
<el-tooltip effect="dark" placement="top">
<template #content>
{{ t('chart.italic') }}
</template>
<div
class="icon-btn"
:class="{ dark: themes === 'dark', active: state.tableHeaderForm.isItalic }"
>
<el-icon>
<Icon name="icon_italic_outlined" />
</el-icon>
</div>
</el-tooltip>
</el-checkbox>
</el-form-item>
<div class="position-divider" :class="'position-divider--' + themes"></div>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('tableHeaderAlign')"
>
<template #label>&nbsp;</template>
<el-radio-group
class="icon-radio-group"
v-model="state.tableHeaderForm.tableHeaderAlign"
@ -202,7 +248,6 @@ onMounted(() => {
</el-radio-group>
</el-form-item>
</el-space>
<el-row :gutter="8">
<el-col :span="12">
<el-form-item
@ -339,4 +384,22 @@ onMounted(() => {
padding: 0;
}
}
.position-divider {
width: 1px;
height: 18px;
margin-bottom: 8px;
background: rgba(31, 35, 41, 0.15);
&.position-divider--dark {
background: rgba(235, 235, 235, 0.15);
}
}
.icon-checkbox {
:deep(.ed-checkbox__input) {
display: none;
}
:deep(.ed-checkbox__label) {
padding: 0;
}
}
</style>

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

@ -389,7 +389,9 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = {
showRowTooltip: false,
showTableHeader: true,
showHorizonBorder: true,
showVerticalBorder: true
showVerticalBorder: true,
isItalic: false,
isBolder: true
}
export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
tableFontColor: '#000000',
@ -401,7 +403,9 @@ export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
tableItemSubBgColor: '#EEEEEE',
showTooltip: false,
showHorizonBorder: true,
showVerticalBorder: true
showVerticalBorder: true,
isItalic: false,
isBolder: false
}
export const DEFAULT_TITLE_STYLE: ChartTextStyle = {
show: true,

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

@ -285,13 +285,15 @@ export class TablePivot extends S2ChartView<PivotSheet> {
}
protected configTheme(chart: Chart): S2Theme {
const theme = super.configTheme(chart)
const { basicStyle, tableHeader, tableCell } = parseJson(chart.customAttr)
const { basicStyle, tableHeader } = parseJson(chart.customAttr)
let tableHeaderBgColor = tableHeader.tableHeaderBgColor
if (!isAlphaColor(tableHeaderBgColor)) {
tableHeaderBgColor = hexColorToRGBA(tableHeaderBgColor, basicStyle.alpha)
}
const tableBorderColor = hexColorToRGBA(basicStyle.tableBorderColor, basicStyle.alpha)
const tableHeaderFontColor = hexColorToRGBA(tableHeader.tableHeaderFontColor, basicStyle.alpha)
const fontStyle = tableHeader.isItalic ? 'italic' : 'normal'
const fontWeight = tableHeader.isBolder === false ? 'normal' : 'bold'
const pivotTheme = {
rowCell: {
cell: {
@ -303,22 +305,30 @@ export class TablePivot extends S2ChartView<PivotSheet> {
fill: tableHeaderFontColor,
fontSize: tableHeader.tableTitleFontSize,
textAlign: tableHeader.tableHeaderAlign,
textBaseline: 'top'
textBaseline: 'top',
fontStyle,
fontWeight
},
bolderText: {
fill: tableHeaderFontColor,
fontSize: tableHeader.tableTitleFontSize,
textAlign: tableHeader.tableHeaderAlign
textAlign: tableHeader.tableHeaderAlign,
fontStyle,
fontWeight
},
measureText: {
fill: tableHeaderFontColor,
fontSize: tableHeader.tableTitleFontSize,
textAlign: tableHeader.tableHeaderAlign
textAlign: tableHeader.tableHeaderAlign,
fontStyle,
fontWeight
},
seriesText: {
fill: tableHeaderFontColor,
fontSize: tableHeader.tableTitleFontSize,
textAlign: tableHeader.tableHeaderAlign
textAlign: tableHeader.tableHeaderAlign,
fontStyle,
fontWeight
}
}
}

44
core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
View File

@ -192,6 +192,8 @@ export function getCustomTheme(chart: Chart): S2Theme {
if (!isAlphaColor(tableHeaderBgColor)) {
tableHeaderBgColor = hexColorToRGBA(tableHeaderBgColor, basicStyle.alpha)
}
const fontStyle = tableHeader.isItalic ? 'italic' : 'normal'
const fontWeight = tableHeader.isBolder === false ? 'normal' : 'bold'
const { tableHeaderAlign, tableTitleFontSize } = tableHeader
const tmpTheme: S2Theme = {
cornerCell: {
@ -201,17 +203,23 @@ export function getCustomTheme(chart: Chart): S2Theme {
bolderText: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
textAlign: tableHeaderAlign
textAlign: tableHeaderAlign,
fontStyle,
fontWeight
},
text: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
textAlign: tableHeaderAlign
textAlign: tableHeaderAlign,
fontStyle,
fontWeight
},
measureText: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
textAlign: tableHeaderAlign
textAlign: tableHeaderAlign,
fontStyle,
fontWeight
}
},
colCell: {
@ -221,17 +229,23 @@ export function getCustomTheme(chart: Chart): S2Theme {
bolderText: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
textAlign: tableHeaderAlign
textAlign: tableHeaderAlign,
fontStyle,
fontWeight
},
text: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
textAlign: tableHeaderAlign
textAlign: tableHeaderAlign,
fontStyle,
fontWeight
},
measureText: {
fill: tableHeaderFontColor,
fontSize: tableTitleFontSize,
textAlign: tableHeaderAlign
textAlign: tableHeaderAlign,
fontStyle,
fontWeight
}
}
}
@ -278,6 +292,8 @@ export function getCustomTheme(chart: Chart): S2Theme {
if (!isAlphaColor(tableItemSubBgColor)) {
tableItemSubBgColor = hexColorToRGBA(tableItemSubBgColor, basicStyle.alpha)
}
const fontStyle = tableCell.isItalic ? 'italic' : 'normal'
const fontWeight = tableCell.isBolder === false ? 'normal' : 'bold'
const { tableItemAlign, tableItemFontSize, enableTableCrossBG } = tableCell
const tmpTheme: S2Theme = {
rowCell: {
@ -315,22 +331,30 @@ export function getCustomTheme(chart: Chart): S2Theme {
bolderText: {
fill: tableFontColor,
textAlign: tableItemAlign,
fontSize: tableItemFontSize
fontSize: tableItemFontSize,
fontStyle,
fontWeight
},
text: {
fill: tableFontColor,
textAlign: tableItemAlign,
fontSize: tableItemFontSize
fontSize: tableItemFontSize,
fontStyle,
fontWeight
},
measureText: {
fill: tableFontColor,
textAlign: tableItemAlign,
fontSize: tableItemFontSize
fontSize: tableItemFontSize,
fontStyle,
fontWeight
},
seriesText: {
fill: tableFontColor,
textAlign: tableItemAlign,
fontSize: tableItemFontSize
fontSize: tableItemFontSize,
fontStyle,
fontWeight
}
}
}