Merge pull request #11167 from dataease/pr@dev-v2@feat_table_bg_alpha_color

feat(图表): 表格表头、单元格背景颜色、斑马纹支持单独设置透明度 #10308

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

@@ -4,6 +4,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_TABLE_CELL } from '@/views/chart/components/editor/util/chart'
 import { ElSpace } from 'element-plus-secondary'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
+import { convertToAlphaColor, isAlphaColor } from '@/views/chart/components/js/util'
 
 const { t } = useI18n()
 
@@ -56,6 +57,19 @@ const init = () => {
   const tableCell = props.chart?.customAttr?.tableCell
   if (tableCell) {
     state.tableCellForm = defaultsDeep(cloneDeep(tableCell), cloneDeep(DEFAULT_TABLE_CELL))
+    const alpha = props.chart.customAttr.basicStyle.alpha
+    if (!isAlphaColor(state.tableCellForm.tableItemBgColor)) {
+      state.tableCellForm.tableItemBgColor = convertToAlphaColor(
+        state.tableCellForm.tableItemBgColor,
+        alpha
+      )
+    }
+    if (!isAlphaColor(state.tableCellForm.tableItemSubBgColor)) {
+      state.tableCellForm.tableItemSubBgColor = convertToAlphaColor(
+        state.tableCellForm.tableItemSubBgColor,
+        alpha
+      )
+    }
   }
 }
 const showProperty = prop => props.propertyInner?.includes(prop)
@@ -79,6 +93,7 @@ onMounted(() => {
         :trigger-width="108"
         v-model="state.tableCellForm.tableItemBgColor"
         :predefine="predefineColors"
+        show-alpha
         @change="changeTableCell('tableItemBgColor')"
       />
     </el-form-item>
@@ -107,6 +122,7 @@ onMounted(() => {
         :predefine="predefineColors"
         :disabled="!state.tableCellForm.enableTableCrossBG"
         is-custom
+        show-alpha
         @change="changeTableCell('tableItemSubBgColor')"
       />
     </el-form-item>

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

@@ -4,6 +4,7 @@ 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 { cloneDeep, defaultsDeep } from 'lodash-es'
+import { convertToAlphaColor, isAlphaColor } from '@/views/chart/components/js/util'
 
 const { t } = useI18n()
 
@@ -56,6 +57,13 @@ const init = () => {
   const tableHeader = props.chart?.customAttr?.tableHeader
   if (tableHeader) {
     state.tableHeaderForm = defaultsDeep(cloneDeep(tableHeader), cloneDeep(DEFAULT_TABLE_HEADER))
+    if (!isAlphaColor(state.tableHeaderForm.tableHeaderBgColor)) {
+      const alpha = props.chart.customAttr.basicStyle.alpha
+      state.tableHeaderForm.tableHeaderBgColor = convertToAlphaColor(
+        state.tableHeaderForm.tableHeaderBgColor,
+        alpha
+      )
+    }
   }
 }
 const showProperty = prop => props.propertyInner?.includes(prop)
@@ -84,6 +92,7 @@ onMounted(() => {
         is-custom
         :trigger-width="108"
         :predefine="predefineColors"
+        show-alpha
         @change="changeTableHeader('tableHeaderBgColor')"
       />
     </el-form-item>

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

@@ -1,6 +1,6 @@
 import { EXTRA_FIELD, PivotSheet, S2Event, S2Options, TOTAL_VALUE, S2Theme, Totals } from '@antv/s2'
 import { formatterItem, valueFormatter } from '../../../formatter'
-import { hexColorToRGBA, parseJson } from '../../../util'
+import { hexColorToRGBA, isAlphaColor, parseJson } from '../../../util'
 import { S2ChartView, S2DrawOptions } from '../../types/impl/s2'
 import { TABLE_EDITOR_PROPERTY_INNER } from './common'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -284,7 +284,10 @@ export class TablePivot extends S2ChartView<PivotSheet> {
   protected configTheme(chart: Chart): S2Theme {
     const theme = super.configTheme(chart)
     const { basicStyle, tableHeader } = parseJson(chart.customAttr)
-    const tableHeaderBgColor = hexColorToRGBA(tableHeader.tableHeaderBgColor, basicStyle.alpha)
+    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 pivotTheme = {

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

@@ -1,4 +1,4 @@
-import { copyString, hexColorToRGBA, parseJson, resetRgbOpacity } from '../..//util'
+import { copyString, hexColorToRGBA, isAlphaColor, parseJson, resetRgbOpacity } from '../..//util'
 import {
   DEFAULT_BASIC_STYLE,
   DEFAULT_TABLE_CELL,
@@ -192,7 +192,10 @@ export function getCustomTheme(chart: Chart): S2Theme {
         tableHeader.tableHeaderFontColor,
         basicStyle.alpha
       )
-      const tableHeaderBgColor = hexColorToRGBA(tableHeader.tableHeaderBgColor, basicStyle.alpha)
+      let tableHeaderBgColor = tableHeader.tableHeaderBgColor
+      if (!isAlphaColor(tableHeaderBgColor)) {
+        tableHeaderBgColor = hexColorToRGBA(tableHeaderBgColor, basicStyle.alpha)
+      }
       const { tableHeaderAlign, tableTitleFontSize } = tableHeader
       const tmpTheme: S2Theme = {
         cornerCell: {
@@ -241,8 +244,14 @@ export function getCustomTheme(chart: Chart): S2Theme {
     // cell
     if (tableCell) {
       const tableFontColor = hexColorToRGBA(tableCell.tableFontColor, basicStyle.alpha)
-      const tableItemBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
-      const tableItemSubBgColor = hexColorToRGBA(tableCell.tableItemSubBgColor, basicStyle.alpha)
+      let tableItemBgColor = tableCell.tableItemBgColor
+      if (!isAlphaColor(tableItemBgColor)) {
+        tableItemBgColor = hexColorToRGBA(tableItemBgColor, basicStyle.alpha)
+      }
+      let tableItemSubBgColor = tableCell.tableItemSubBgColor
+      if (!isAlphaColor(tableItemSubBgColor)) {
+        tableItemSubBgColor = hexColorToRGBA(tableItemSubBgColor, basicStyle.alpha)
+      }
       const { tableItemAlign, tableItemFontSize, enableTableCrossBG } = tableCell
       const tmpTheme: S2Theme = {
         rowCell: {

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

@@ -1350,3 +1350,41 @@ export const sliderHandleExtremumPoint = (ev, chart, options) => {
   }
   configExtremum(chart)
 }
+
+export function isAlphaColor(color: string): boolean {
+  if (!color?.trim()) {
+    return false
+  }
+  if (color.startsWith('#')) {
+    return color.length === 9
+  }
+  if (color.startsWith('rgb')) {
+    return color.split(',').length === 4
+  }
+  return false
+}
+
+export function convertToAlphaColor(color: string, alpha: number): string {
+  if (!color?.trim()) {
+    return 'rgba(255,255,255,1)'
+  }
+  if (color.startsWith('#')) {
+    let colorStr = color.trim().substring(1)
+    if (colorStr.length === 3) {
+      const tmp = colorStr.split('')
+      colorStr = `${tmp[0]}${tmp[0]}${tmp[1]}${tmp[1]}${tmp[2]}${tmp[2]}`
+    }
+    if (colorStr.length !== 6) {
+      return '#FFFFFFFF'
+    }
+    const alphaHex = parseInt((alpha * 2.55).toFixed(0))
+      .toString(16)
+      .toUpperCase()
+    return `#${colorStr}${alphaHex}`
+  }
+  if (color.startsWith('rgb')) {
+    const rgb = color.match(/\d+/g)
+    return `rgba(${rgb.join(',')},${alpha / 100})`
+  }
+  return 'rgba(255,255,255,1)'
+}