feat: 交叉表行头叶子节点支持斑马纹风格 (#2332)

* feat: 行头叶子节点支持crossBackgroundColor

* feat: 行头叶子节点支持crossBackgroundColor

* refactor: 函数命名getCrossBackgroundColor、测试用例使用createPivotSheet

---------

Co-authored-by: huiyu.zjt <[email protected]>

packages/s2-core/__tests__/unit/cell/row-cell-spec.ts

@@ -113,4 +113,37 @@ describe('Row Cell Tests', () => {
       expect(get(rowCell, 'backgroundShape.attrs.fill')).toEqual('#F7B46F');
     });
   });
+
+  describe('Cross Background Color Tests', () => {
+    const s2 = createPivotSheet({
+      width: 800,
+      height: 600,
+    });
+    const crossColor = '#FFFFFF';
+    const defaultColor = '#F5F8FF';
+    const cellColorConfig = {
+      crossBackgroundColor: crossColor,
+      backgroundColor: defaultColor,
+    };
+    s2.setTheme({
+      rowCell: {
+        cell: cellColorConfig,
+      },
+      dataCell: {
+        cell: cellColorConfig,
+      },
+    });
+    s2.render();
+    test('should draw right condition background shape', () => {
+      const rowCell0 = s2.facet.rowHeader.getChildByIndex(0);
+      const rowCell1 = s2.facet.rowHeader.getChildByIndex(1);
+      const rowCell2 = s2.facet.rowHeader.getChildByIndex(2);
+      expect(get(rowCell0, 'actualText')).toEqual('浙江');
+      expect(get(rowCell0, 'backgroundShape.attrs.fill')).toEqual(defaultColor);
+      expect(get(rowCell1, 'actualText')).toEqual('义乌');
+      expect(get(rowCell1, 'backgroundShape.attrs.fill')).toEqual(crossColor);
+      expect(get(rowCell2, 'actualText')).toEqual('杭州');
+      expect(get(rowCell2, 'backgroundShape.attrs.fill')).toEqual(defaultColor);
+    });
+  });
 });

packages/s2-core/src/cell/base-cell.ts

@@ -462,4 +462,20 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     }
     return fillResult;
   }
+
+  protected getCrossBackgroundColor(rowIndex: number) {
+    const { crossBackgroundColor, backgroundColorOpacity } =
+      this.getStyle().cell;
+
+    if (crossBackgroundColor && rowIndex % 2 === 0) {
+      // 隔行颜色的配置
+      // 偶数行展示灰色背景，因为index是从0开始的
+      return { backgroundColorOpacity, backgroundColor: crossBackgroundColor };
+    }
+
+    return {
+      backgroundColorOpacity,
+      backgroundColor: this.getStyle().cell.backgroundColor,
+    };
+  }
 }

packages/s2-core/src/cell/data-cell.ts

@@ -308,16 +308,12 @@ export class DataCell extends BaseCell<ViewMeta> {
   }
 
   public getBackgroundColor() {
-    const { crossBackgroundColor, backgroundColorOpacity } =
-      this.getStyle().cell;
-
-    let backgroundColor = this.getStyle().cell.backgroundColor;
-
-    if (crossBackgroundColor && this.meta.rowIndex % 2 === 0) {
-      // 隔行颜色的配置
-      // 偶数行展示灰色背景，因为index是从0开始的
-      backgroundColor = crossBackgroundColor;
-    }
+    const backgroundColorByCross = this.getCrossBackgroundColor(
+      this.meta.rowIndex,
+    );
+    let backgroundColor = backgroundColorByCross.backgroundColor;
+    const backgroundColorOpacity =
+      backgroundColorByCross.backgroundColorOpacity;
 
     if (this.shouldHideRowSubtotalData()) {
       return { backgroundColor, backgroundColorOpacity };

packages/s2-core/src/cell/header-cell.ts

@@ -365,6 +365,16 @@ export abstract class HeaderCell extends BaseCell<Node> {
   public getBackgroundColor() {
     const { backgroundColor, backgroundColorOpacity } =
       this.getStyle()?.cell || {};
+    return this.getBackgroundColorByCondition(
+      backgroundColor,
+      backgroundColorOpacity,
+    );
+  }
+
+  protected getBackgroundColorByCondition(
+    backgroundColor: string,
+    backgroundColorOpacity: number,
+  ) {
     let fill = backgroundColor;
     // get background condition fill color
     const bgCondition = this.findFieldCondition(this.conditions?.background);

packages/s2-core/src/cell/row-cell.ts

@@ -70,6 +70,15 @@ export class RowCell extends HeaderCell {
     this.update();
   }
 
+  public getBackgroundColor() {
+    const { backgroundColor, backgroundColorOpacity } =
+      this.getCrossBackgroundColor(this.meta.rowIndex);
+    return this.getBackgroundColorByCondition(
+      backgroundColor,
+      backgroundColorOpacity,
+    );
+  }
+
   /**
    * 绘制hover悬停，刷选的外框
    */