fix(图表)：修复透视表在大屏中行头宽度渲染错误

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -389,6 +389,10 @@ declare interface ChartBasicStyle {
    * 透视表行头宽度
    */
   tableRowHeaderWidth: number
+  /**
+   * 透视表行头宽度百分比
+   */
+  tableRowHeaderWidthPercent: number
 }
 /**
  * 表头属性

core/core-frontend/src/utils/canvasStyle.ts

@@ -121,7 +121,8 @@ export const customAttrTrans = {
     'lineSymbolSize',
     'leftLineWidth',
     'leftLineSymbolSize',
-    'tableColumnWidth'
+    'tableColumnWidth',
+    'tableRowHeaderWidth'
   ],
   tableHeader: [
     'tableTitleFontSize',

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

@@ -65,12 +65,27 @@ const state = reactive({
     fieldId: '',
     width: 0
   },
-  fileList: []
+  fileList: [],
+  treeRowWidth: 10
 })
 const emit = defineEmits(['onBasicStyleChange', 'onMiscChange'])
 const changeBasicStyle = (prop?: string, requestData = false, render = true) => {
   emit('onBasicStyleChange', { data: state.basicStyleForm, requestData, render }, prop)
 }
+
+const changeTreeRowWidth = () => {
+  if (state.basicStyleForm.tableRowHeaderMode === 'percent') {
+    state.basicStyleForm.tableRowHeaderWidthPercent = state.treeRowWidth
+  }
+  if (state.basicStyleForm.tableRowHeaderMode === 'fixed') {
+    state.basicStyleForm.tableRowHeaderWidth = state.treeRowWidth
+  }
+  changeBasicStyle(
+    state.basicStyleForm.tableRowHeaderMode === 'percent'
+      ? 'tableRowHeaderWidthPercent'
+      : 'tableRowHeaderWidth'
+  )
+}
 const onAlphaChange = v => {
   const _v = parseInt(v)
   if (_v >= 0 && _v <= 100) {
@@ -146,13 +161,15 @@ const init = () => {
       tableExpandLevelOptions.push({ name, value: i })
     }
     if (basicStyle.tableRowHeaderMode === 'percent') {
-      if (basicStyle.tableRowHeaderWidth > 50) {
+      state.treeRowWidth = basicStyle.tableRowHeaderWidthPercent
-        state.basicStyleForm.tableRowHeaderWidth = 20
+      if (basicStyle.tableRowHeaderWidthPercent > 80) {
+        state.treeRowWidth = 80
       }
     }
     if (basicStyle.tableRowHeaderMode === 'fixed') {
+      state.treeRowWidth = basicStyle.tableRowHeaderWidth
       if (basicStyle.tableRowHeaderWidth < 10) {
-        state.basicStyleForm.tableRowHeaderWidth = 120
+        state.treeRowWidth = 120
       }
     }
   }
@@ -1029,11 +1046,11 @@ onMounted(async () => {
     >
       <el-input-number
         :effect="themes"
-        v-model.number="state.basicStyleForm.tableRowHeaderWidth"
+        v-model.number="state.treeRowWidth"
         :min="state.basicStyleForm.tableRowHeaderMode === 'percent' ? 1 : 10"
-        :max="state.basicStyleForm.tableRowHeaderMode === 'percent' ? 50 : 100000"
+        :max="state.basicStyleForm.tableRowHeaderMode === 'percent' ? 80 : 100000"
         controls-position="right"
-        @change="changeBasicStyle('tableRowHeaderWidth')"
+        @change="changeTreeRowWidth"
       />
     </el-form-item>
     <el-form-item v-if="showProperty('autoWrap')" class="form-item" :class="'form-item-' + themes">

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

@@ -1733,7 +1733,8 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   quotaPosition: 'col',
   quotaColLabel: t('dataset.value'),
   tableRowHeaderMode: 'adapt',
-  tableRowHeaderWidth: 10
+  tableRowHeaderWidth: 120,
+  tableRowHeaderWidthPercent: 20
 }
 
 export const BASE_VIEW_CONFIG = {

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

@@ -267,7 +267,12 @@ export class TablePivot extends S2ChartView<PivotSheet> {
     // options
     s2Options.style = this.configStyle(chart, s2DataConfig)
     if (basicStyle.tableLayoutMode === 'tree') {
-      const { defaultExpandLevel, tableRowHeaderMode, tableRowHeaderWidth } = basicStyle
+      const {
+        defaultExpandLevel,
+        tableRowHeaderMode,
+        tableRowHeaderWidth,
+        tableRowHeaderWidthPercent
+      } = basicStyle
       // 默认展开层级
       if (isNumeric(defaultExpandLevel)) {
         if ((defaultExpandLevel as number) >= chart.xAxis.length) {
@@ -292,11 +297,11 @@ export class TablePivot extends S2ChartView<PivotSheet> {
         s2Options.style.treeRowsWidth = treeRowsWidth
       }
       if (tableRowHeaderMode === 'percent') {
-        let treeRowsWidth = tableRowHeaderWidth
+        let treeRowsWidthPercent = tableRowHeaderWidthPercent
-        if (treeRowsWidth > 50) {
+        if (treeRowsWidthPercent > 80) {
-          treeRowsWidth = 20
+          treeRowsWidthPercent = 20
         }
-        const width = containerDom.offsetWidth * (treeRowsWidth / 100)
+        const width = containerDom.offsetWidth * (treeRowsWidthPercent / 100)
         s2Options.style.treeRowsWidth = width
       }
     }