From 3d56017e81f08d51783640edba19c24004c8e29d Mon Sep 17 00:00:00 2001
From: wisonic <shaochuan.wu@fit2cloud.com>
Date: Fri, 26 Jul 2024 19:16:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=AD=97=E4=BD=93=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E5=8A=A0?=
 =?UTF-8?q?=E7=B2=97=E5=92=8C=E6=96=9C=E4=BD=93=20#9077?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/models/chart/chart-attr.d.ts          | 16 +++++
 .../components/table/TableCellSelector.vue    | 69 ++++++++++++++++++-
 .../components/table/TableHeaderSelector.vue  | 69 ++++++++++++++++++-
 .../chart/components/editor/util/chart.ts     |  8 ++-
 .../js/panel/charts/table/table-pivot.ts      | 20 ++++--
 .../js/panel/common/common_table.ts           | 44 +++++++++---
 6 files changed, 204 insertions(+), 22 deletions(-)

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 7ae99dce75..50fd49a5d3 100644
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@@ -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
 }
 
 /**
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
index be9521021d..ed73c30a07 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
@@ -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>
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 518348d91f..c1b7cdfc4d 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
@@ -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>
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 896f342781..71d49bda2a 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
@@ -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,
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 95bcc38a7b..a61a3cba4a 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
@@ -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
         }
       }
     }
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
index 8aff7fee25..75b944ef64 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
@@ -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
           }
         }
       }