diff --git a/.github/workflows/pr-auto-assign-reviewer.yml b/.github/workflows/pr-auto-assign-reviewer.yml
index 8dca9220ef..4610e2a550 100644
--- a/.github/workflows/pr-auto-assign-reviewer.yml
+++ b/.github/workflows/pr-auto-assign-reviewer.yml
@@ -21,5 +21,5 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           pr-emoji: '+1, rocket'
-          reviewers: 'xingwanying,qubaomingg,lcx-seima,YardWill,lijinke666,wjgogogo,zxc0328,stone-lyl,'
+          reviewers: 'xingwanying,serializedowen,lcx-seima,YardWill,lijinke666,wjgogogo,stone-lyl,GaoFuhong'
           review-creator: false
diff --git a/.github/workflows/sync-site-lock-changelog-with-pr.yml b/.github/workflows/release-success.yml
similarity index 94%
rename from .github/workflows/sync-site-lock-changelog-with-pr.yml
rename to .github/workflows/release-success.yml
index 05d072102b..1fa9a12c55 100644
--- a/.github/workflows/sync-site-lock-changelog-with-pr.yml
+++ b/.github/workflows/release-success.yml
@@ -1,4 +1,4 @@
-name: 🔁 Sync Site S2 Lock And Changelog With PR
+name: 🚀 After the release is successful
 
 # 自动发布 action 执行完成后再执行 (无论成功失败都会执行)
 on:
@@ -59,3 +59,7 @@ jobs:
           gh pr create --title "chore: 🤖 更新 lock 和 changelog 文件" --body "🤖 由 [[Sync Site S2 Lock And Changelog With PR](https://github.com/antvis/S2/blob/master/.github/workflows/sync-site-lock-changelog-with-pr.yml)] action 自动创建."
         env:
           GITHUB_TOKEN: ${{ secrets.JINKE_GITHUB_TOKEN }}
+
+      # 部署官网
+      - name: Delpoy Site
+        run: yarn site:deploy
diff --git a/packages/s2-core/CHANGELOG.md b/packages/s2-core/CHANGELOG.md
index cc7bd0233b..b190954242 100644
--- a/packages/s2-core/CHANGELOG.md
+++ b/packages/s2-core/CHANGELOG.md
@@ -1,6 +1,5 @@
 # [@antv/s2-v1.24.0-alpha.4](https://github.com/antvis/S2/compare/@antv/s2-v1.24.0-alpha.3...@antv/s2-v1.24.0-alpha.4) (2022-07-21)
 
-
 ### Bug Fixes
 
 * **strategysheet:** 修复子弹图颜色显示错误 & 百分比精度问题 ([#1588](https://github.com/antvis/S2/issues/1588)) ([c4bb48c](https://github.com/antvis/S2/commit/c4bb48cbe128b47e3574af903142934fd7452846))
diff --git a/packages/s2-core/__tests__/bugs/issue-1587-spec.ts b/packages/s2-core/__tests__/bugs/issue-1587-spec.ts
new file mode 100644
index 0000000000..b4e0028a7d
--- /dev/null
+++ b/packages/s2-core/__tests__/bugs/issue-1587-spec.ts
@@ -0,0 +1,28 @@
+/**
+ * @description spec for issue #1587
+ * https://github.com/antvis/S2/issues/1587
+ */
+
+import { getContainer } from '../util/helpers';
+import * as mockDataConfig from '../data/simple-data.json';
+import type { S2Options } from '../../src';
+import { PivotSheet } from '@/sheet-type';
+
+const s2Options: S2Options = {
+  width: 800,
+  height: 600,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  pagination: {
+    pageSize: 2,
+  },
+};
+
+describe('Pagination Tests', () => {
+  const s2 = new PivotSheet(getContainer(), mockDataConfig, s2Options);
+  s2.render();
+
+  test('should get correctly pagination scroll y if pagination.current is empty', () => {
+    expect(s2.facet.getPaginationScrollY()).toEqual(0);
+  });
+});
diff --git a/packages/s2-core/__tests__/bugs/issue-1624-spec.ts b/packages/s2-core/__tests__/bugs/issue-1624-spec.ts
new file mode 100644
index 0000000000..6d9f9f8f77
--- /dev/null
+++ b/packages/s2-core/__tests__/bugs/issue-1624-spec.ts
@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/**
+ * @description spec for issue #1624
+ * https://github.com/antvis/S2/issues/1624
+ */
+
+import { getContainer, sleep } from '../util/helpers';
+import * as mockDataConfig from '../data/simple-data.json';
+import { S2Event, type S2Options, DataCell } from '@/index';
+import { PivotSheet } from '@/sheet-type';
+
+const s2Options: S2Options = {
+  width: 800,
+  height: 600,
+};
+
+describe('Data Cell Border Tests', () => {
+  const borderWidth = 4;
+  const s2 = new PivotSheet(getContainer(), mockDataConfig, s2Options);
+  s2.setTheme({
+    dataCell: {
+      cell: {
+        verticalBorderWidth: borderWidth,
+        horizontalBorderWidth: borderWidth,
+      },
+    },
+  });
+  s2.render();
+
+  test('should draw correct data cell border when hover focus', async () => {
+    const dataCell = s2.panelScrollGroup.getChildren()[0] as DataCell;
+
+    s2.emit(S2Event.DATA_CELL_HOVER, {
+      target: dataCell,
+    } as any);
+
+    await sleep(40);
+
+    // @ts-ignore
+    const meta = dataCell.getCellArea();
+    const borderBbox = dataCell.getChildByIndex(2).getBBox();
+
+    expect(meta.x).toEqual(borderBbox.x - borderWidth / 2);
+    expect(meta.y).toEqual(borderBbox.y - borderWidth / 2);
+    expect(meta.width).toEqual(borderBbox.width + borderWidth);
+    expect(meta.height).toEqual(borderBbox.height + borderWidth);
+  });
+});
diff --git a/packages/s2-core/__tests__/bugs/issue-1668-spec.ts b/packages/s2-core/__tests__/bugs/issue-1668-spec.ts
new file mode 100644
index 0000000000..05aed9f9d0
--- /dev/null
+++ b/packages/s2-core/__tests__/bugs/issue-1668-spec.ts
@@ -0,0 +1,49 @@
+/**
+ * @description spec for issue #1668
+ * https://github.com/antvis/S2/issues/1668
+ */
+
+import type { IGroup } from '@antv/g-canvas';
+import { getContainer } from '../util/helpers';
+import * as mockDataConfig from '../data/data-issue-1668.json';
+import { type S2Options, KEY_GROUP_COL_RESIZE_AREA } from '@/index';
+import { PivotSheet } from '@/sheet-type';
+
+const s2Options: S2Options = {
+  width: 800,
+  height: 400,
+  totals: {
+    row: {
+      showGrandTotals: true,
+      showSubTotals: true,
+      reverseLayout: true,
+      reverseSubLayout: true,
+      subTotalsDimensions: ['province'],
+    },
+    col: {
+      showGrandTotals: true,
+      showSubTotals: true,
+      reverseLayout: true,
+      reverseSubLayout: true,
+      subTotalsDimensions: ['type'],
+    },
+  },
+};
+
+describe('Totals Cell Resize Tests', () => {
+  const s2 = new PivotSheet(getContainer(), mockDataConfig, s2Options);
+  s2.render();
+
+  test('should render extra resize id for resize area handler', () => {
+    const resizeArea = s2.foregroundGroup.findById(
+      KEY_GROUP_COL_RESIZE_AREA,
+    ) as IGroup;
+    const resizeAreaList = resizeArea.getChildren();
+
+    expect(resizeAreaList).not.toHaveLength(0);
+
+    resizeAreaList.forEach((shape) => {
+      expect(shape.attr('appendInfo').id).toBeTruthy();
+    });
+  });
+});
diff --git a/packages/s2-core/__tests__/data/data-issue-1668.json b/packages/s2-core/__tests__/data/data-issue-1668.json
new file mode 100644
index 0000000000..014b7a0658
--- /dev/null
+++ b/packages/s2-core/__tests__/data/data-issue-1668.json
@@ -0,0 +1,271 @@
+{
+  "data": [
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "笔",
+      "price": "1"
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "纸张",
+      "price": "2"
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "笔",
+      "price": "2"
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "纸张",
+      "price": "0.5"
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "笔",
+      "price": "3"
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "纸张",
+      "price": "2"
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "笔",
+      "price": "4"
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "纸张",
+      "price": "1"
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "笔",
+      "price": "1"
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "纸张",
+      "price": "2"
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "笔",
+      "price": "2"
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "纸张",
+      "price": "0.5"
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "笔",
+      "price": "3"
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "纸张",
+      "price": "2"
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "笔",
+      "price": "4"
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "纸张",
+      "price": "1"
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "笔",
+      "cost": "0.5"
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "纸张",
+      "cost": "1.5"
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "笔",
+      "cost": "1.5"
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "纸张",
+      "cost": "0.2"
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "笔",
+      "cost": "2"
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "纸张",
+      "cost": "1"
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "笔",
+      "cost": "3"
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "纸张",
+      "cost": "0.5"
+    },
+    {
+      "price": "15.5"
+    },
+    {
+      "province": "浙江",
+      "price": "5.5"
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "price": "3"
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "price": "2.5"
+    },
+    {
+      "province": "吉林",
+      "price": "10"
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "price": "5"
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "price": "5"
+    },
+    {
+      "type": "笔",
+      "price": "10"
+    },
+    {
+      "type": "笔",
+      "province": "浙江",
+      "price": "3"
+    },
+    {
+      "type": "笔",
+      "province": "吉林",
+      "price": "7"
+    },
+    {
+      "type": "纸张",
+      "price": "5.5"
+    },
+    {
+      "type": "纸张",
+      "province": "浙江",
+      "price": "2.5"
+    },
+    {
+      "type": "纸张",
+      "province": "吉林",
+      "price": "3"
+    },
+    {
+      "cost": "10.2"
+    },
+    {
+      "province": "浙江",
+      "cost": "3.7"
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "cost": "2"
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "cost": "1.7"
+    },
+    {
+      "province": "吉林",
+      "cost": "6.5"
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "cost": "3"
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "cost": "3.5"
+    },
+    {
+      "type": "笔",
+      "cost": "7"
+    },
+    {
+      "type": "笔",
+      "province": "浙江",
+      "cost": "2"
+    },
+    {
+      "type": "笔",
+      "province": "吉林",
+      "cost": "5"
+    },
+    {
+      "type": "纸张",
+      "cost": "3.2"
+    },
+    {
+      "type": "纸张",
+      "province": "浙江",
+      "cost": "1.7"
+    },
+    {
+      "type": "纸张",
+      "province": "吉林",
+      "cost": "1.5"
+    }
+  ],
+  "fields": {
+    "rows": ["province", "city"],
+    "columns": ["type"],
+    "values": ["price", "cost"]
+  }
+}
diff --git a/packages/s2-core/__tests__/spreadsheet/hidden-columns-spec.ts b/packages/s2-core/__tests__/spreadsheet/hidden-columns-spec.ts
index 40001ad256..e44d42f5bd 100644
--- a/packages/s2-core/__tests__/spreadsheet/hidden-columns-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/hidden-columns-spec.ts
@@ -39,7 +39,7 @@ describe('SpreadSheet Hidden Columns Tests', () => {
       ).toEqual(mockTableDataConfig.fields.columns);
     });
 
-    test('should hidden column correctly', () => {
+    test('should hide column correctly', () => {
       const hiddenColumns = ['cost'];
 
       tableSheet.interaction.hideColumns(hiddenColumns);
@@ -62,7 +62,7 @@ describe('SpreadSheet Hidden Columns Tests', () => {
       expect(costDetail.hideColumnNodes[0].field).toEqual('cost');
     });
 
-    test('should hidden multiple columns correctly', () => {
+    test('should hide multiple columns correctly', () => {
       const hiddenColumns = ['price', 'city'];
 
       tableSheet.interaction.hideColumns(hiddenColumns);
@@ -98,7 +98,7 @@ describe('SpreadSheet Hidden Columns Tests', () => {
       expect(cityDetail.hideColumnNodes[0].field).toEqual('city');
     });
 
-    test('should hidden closer group columns correctly', () => {
+    test('should hide closer group columns correctly', () => {
       const hiddenColumns = ['cost', 'province'];
 
       tableSheet.interaction.hideColumns(hiddenColumns);
@@ -125,7 +125,7 @@ describe('SpreadSheet Hidden Columns Tests', () => {
       expect(groupDetail.hideColumnNodes[1].field).toEqual('province');
     });
 
-    test('should default hidden columns by interaction hiddenColumnFields config', () => {
+    test('should hide columns by interaction hiddenColumnFields config by default', () => {
       const hiddenColumns = ['cost'];
       const sheet = new TableSheet(getContainer(), mockTableDataConfig, {
         ...s2Options,
@@ -184,7 +184,7 @@ describe('SpreadSheet Hidden Columns Tests', () => {
       ).toEqual([typePriceColumnId, cityPriceColumnId]);
     });
 
-    test('should hidden column correctly', () => {
+    test('should hide column correctly', () => {
       const hiddenColumns = [typePriceColumnId];
 
       pivotSheet.interaction.hideColumns(hiddenColumns);
@@ -207,7 +207,7 @@ describe('SpreadSheet Hidden Columns Tests', () => {
       expect(priceDetail.hideColumnNodes[0].id).toEqual(typePriceColumnId);
     });
 
-    test('should hidden multiple columns correctly', () => {
+    test('should hide multiple columns correctly', () => {
       const hiddenColumns = [typePriceColumnId, cityPriceColumnId];
 
       pivotSheet.interaction.hideColumns(hiddenColumns);
diff --git a/packages/s2-core/__tests__/spreadsheet/spread-sheet-resize-spec.ts b/packages/s2-core/__tests__/spreadsheet/spread-sheet-resize-spec.ts
index a193347ade..ba8a9da1a0 100644
--- a/packages/s2-core/__tests__/spreadsheet/spread-sheet-resize-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/spread-sheet-resize-spec.ts
@@ -91,6 +91,32 @@ describe('SpreadSheet Resize Active Tests', () => {
     expect(group.findById(KEY_GROUP_COL_RESIZE_AREA)).toBeNull();
   });
 
+  // https://github.com/antvis/S2/issues/1603
+  test('should disable col cell resize area if col is hidden', () => {
+    const s2 = renderSheet({
+      interaction: {
+        resize: {
+          colCellHorizontal: false,
+          colCellVertical: true,
+        },
+      },
+    } as S2Options);
+
+    s2.setOptions({
+      style: {
+        colCfg: {
+          height: 0,
+        },
+      },
+    });
+
+    s2.render(false);
+
+    const group = s2.facet.foregroundGroup;
+
+    expect(group.findById(KEY_GROUP_COL_RESIZE_AREA)).toBeNull();
+  });
+
   test('should disable col cell vertical direction resize area', () => {
     const s2 = renderSheet({
       interaction: {
diff --git a/packages/s2-core/__tests__/spreadsheet/table-resize-spec.ts b/packages/s2-core/__tests__/spreadsheet/table-resize-spec.ts
new file mode 100644
index 0000000000..4988788cbf
--- /dev/null
+++ b/packages/s2-core/__tests__/spreadsheet/table-resize-spec.ts
@@ -0,0 +1,37 @@
+import type { IGroup } from '@antv/g-canvas';
+import { getContainer } from '../util/helpers';
+import * as mockDataConfig from '../data/simple-table-data.json';
+import { TableSheet } from '@/sheet-type';
+import { KEY_GROUP_ROW_RESIZE_AREA } from '@/common/constant';
+
+describe('Table Sheet Resize Test', () => {
+  test('should draw resize area in series cell when show series', () => {
+    const s2 = new TableSheet(getContainer(), mockDataConfig, {
+      width: 800,
+      height: 600,
+      showSeriesNumber: true,
+    });
+    s2.render();
+
+    const resizeGroup = s2.foregroundGroup.findById(
+      KEY_GROUP_ROW_RESIZE_AREA,
+    ) as IGroup;
+
+    expect(resizeGroup.getChildren().length).toBeGreaterThan(0);
+  });
+
+  test('should draw resize area in data cell when hide series', () => {
+    const s2 = new TableSheet(getContainer(), mockDataConfig, {
+      width: 800,
+      height: 600,
+      showSeriesNumber: false,
+    });
+    s2.render();
+
+    const resizeGroup = s2.foregroundGroup.findById(
+      KEY_GROUP_ROW_RESIZE_AREA,
+    ) as IGroup;
+
+    expect(resizeGroup.getChildren().length).toBeGreaterThan(0);
+  });
+});
diff --git a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
index 9cc3fbf499..c91a6f1800 100644
--- a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
@@ -4,6 +4,7 @@ import {
   type S2Options,
   type S2DataConfig,
   ResizeType,
+  ColCell,
 } from '@/index';
 
 const data = getMockData(
@@ -96,6 +97,7 @@ const options: S2Options = {
 };
 
 describe('TableSheet normal spec', () => {
+
   test('scrollWithAnimation with duration and callback', async () => {
     const s2 = new TableSheet(getContainer(), dataCfg, options);
     s2.render();
@@ -123,5 +125,68 @@ describe('TableSheet normal spec', () => {
       hRowScrollX: 0,
     });
     expect(onScrollFinish).toBeCalled();
+
+    s2.destroy();
   });
+
+  test('should be able to resize frozen col when there is a vertical scroll width', async () => {
+    const s2 = new TableSheet(getContainer(), dataCfg, options);
+    s2.render();
+
+    const onScrollFinish = jest.fn();
+    s2.facet.scrollWithAnimation(
+      {
+        offsetX: {
+          value: 100,
+          animate: true,
+        },
+      },
+      10,
+      onScrollFinish,
+    );
+    await sleep(30);
+
+
+    const firstColCell = s2.getColumnNodes()[1].belongsCell as any
+
+    expect(firstColCell.shouldAddVerticalResizeArea()).toBe(true)
+    expect(firstColCell.getVerticalResizeAreaOffset()).toEqual({ x: 80, y: 0 })
+
+    s2.destroy();
+  });
+
+  test('should be able to resize last column', async () => {
+    const s2 = new TableSheet(getContainer(), dataCfg, options);
+    s2.render();
+
+    await sleep(30);
+
+    const { x, width, top } = s2.getCanvasElement().getBoundingClientRect()
+    s2.getCanvasElement().dispatchEvent(new MouseEvent('mousedown', {
+      clientX: x + width - 1,
+      clientY: top + 25,
+    }))
+
+
+    window.dispatchEvent(new MouseEvent('mousemove', {
+      clientX: x+ width + 100,
+      clientY: top + 25,
+
+    }))
+    await sleep(300);
+
+    window.dispatchEvent(new MouseEvent('mouseup', {
+      clientX: x + width + 100,
+      clientY: top + 25
+    }))
+
+    await sleep(300);
+
+    const columnNodes = s2.getColumnNodes()
+    const lastColumnCell = columnNodes[columnNodes.length - 1].belongsCell as ColCell
+    
+    expect(lastColumnCell.getMeta().width).toBe(199)
+  });
+
+
 });
diff --git a/packages/s2-core/__tests__/unit/cell/col-cell-spec.ts b/packages/s2-core/__tests__/unit/cell/col-cell-spec.ts
index c70e2f138a..ec90997f93 100644
--- a/packages/s2-core/__tests__/unit/cell/col-cell-spec.ts
+++ b/packages/s2-core/__tests__/unit/cell/col-cell-spec.ts
@@ -2,8 +2,8 @@ import _ from 'lodash';
 import type { Node } from '@/facet/layout/node';
 import { PivotDataSet } from '@/data-set';
 import { SpreadSheet, PivotSheet } from '@/sheet-type';
+import type { Formatter, TextAlign } from '@/common';
 import { ColCell } from '@/cell';
-import type { TextAlign } from '@/common';
 
 const MockPivotSheet = PivotSheet as unknown as jest.Mock<PivotSheet>;
 const MockPivotDataSet = PivotDataSet as unknown as jest.Mock<PivotDataSet>;
@@ -105,4 +105,35 @@ describe('Col Cell Tests', () => {
       },
     );
   });
+
+  describe('Col Cell Formatter Test', () => {
+    const node = {
+      id: 1,
+      label: 'label',
+      fieldValue: 'fieldValue',
+      value: 'value',
+    } as unknown as Node;
+
+    test('should get correct col cell formatter', () => {
+      const formatter = jest.fn();
+      jest.spyOn(s2.dataSet, 'getFieldFormatter').mockReturnValue(formatter);
+
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const colCell = new ColCell(node, s2);
+
+      expect(formatter).toHaveBeenCalledWith(node.label, undefined, node);
+    });
+
+    test('should return correct formatted value', () => {
+      const formatter: Formatter = jest.fn(() => 'test');
+
+      jest.spyOn(s2.dataSet, 'getFieldFormatter').mockReturnValue(formatter);
+
+      const colCell = new ColCell(node, s2);
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(colCell.textShape.attr('text')).toEqual('test');
+    });
+  });
 });
diff --git a/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts b/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts
index 3a51656f2b..d0cb73dc13 100644
--- a/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts
+++ b/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts
@@ -7,8 +7,12 @@ import { DataCell } from '@/cell';
 
 const MockPivotSheet = PivotSheet as unknown as jest.Mock<PivotSheet>;
 const MockPivotDataSet = PivotDataSet as unknown as jest.Mock<PivotDataSet>;
+
 describe('data cell formatter test', () => {
   const meta = {
+    fieldValue: 'fieldValue',
+    label: 'label',
+    value: 'value',
     data: {
       city: 'chengdu',
       value: 12,
@@ -27,18 +31,14 @@ describe('data cell formatter test', () => {
     s2.dataSet = dataSet;
   });
 
-  test('should pass complete data into formater', () => {
+  test('should pass complete data into formatter', () => {
     const formatter = jest.fn();
     jest.spyOn(s2.dataSet, 'getFieldFormatter').mockReturnValue(formatter);
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const dataCell = new DataCell(meta, s2);
 
-    expect(formatter).toHaveBeenCalledWith(undefined, {
-      city: 'chengdu',
-      value: 12,
-      [VALUE_FIELD]: 'value',
-      [EXTRA_FIELD]: 12,
-    });
+    expect(formatter).toHaveBeenCalledWith(meta.fieldValue, meta.data, meta);
   });
 
   test('should return correct formatted value', () => {
diff --git a/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts b/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts
index d55757e813..275f0ec92a 100644
--- a/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts
+++ b/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts
@@ -4,6 +4,7 @@
 import { Canvas, Group } from '@antv/g-canvas';
 import { assembleDataCfg, assembleOptions } from 'tests/util';
 import { size, get, find } from 'lodash';
+import { DEFAULT_TREE_ROW_WIDTH } from './../../../src/common/constant/options';
 import { getMockPivotMeta } from './util';
 import type { PanelScrollGroup } from '@/group/panel-scroll-group';
 import { SpreadSheet } from '@/sheet-type';
@@ -67,6 +68,8 @@ jest.mock('@/sheet-type', () => {
         interaction: {
           clearHoverTimer: jest.fn(),
         },
+        measureTextWidth:
+          jest.fn() as unknown as SpreadSheet['measureTextWidth'],
       };
     }),
   };
@@ -188,6 +191,7 @@ describe('Pivot Mode Facet Test', () => {
 
   describe('should get correct result when tree mode', () => {
     s2.isHierarchyTreeType = jest.fn().mockReturnValue(true);
+    const spy = jest.spyOn(s2, 'measureTextWidth').mockReturnValue(30); // 小于 DEFAULT_TREE_ROW_WIDTH
     const mockDataSet = new MockPivotDataSet(s2);
     const treeFacet = new PivotFacet({
       spreadsheet: s2,
@@ -199,6 +203,10 @@ describe('Pivot Mode Facet Test', () => {
     });
     const { rowsHierarchy } = treeFacet.layoutResult;
 
+    afterAll(() => {
+      spy.mockRestore();
+    });
+
     test('row hierarchy when tree mode', () => {
       const { cellCfg, spreadsheet } = facet.cfg;
       const rowCellStyle = spreadsheet.theme.rowCell.cell;
@@ -206,10 +214,11 @@ describe('Pivot Mode Facet Test', () => {
 
       expect(rowsHierarchy.getLeaves()).toHaveLength(8);
       expect(rowsHierarchy.getNodes()).toHaveLength(10);
-      expect(rowsHierarchy.width).toBe(width);
+      expect(rowsHierarchy.width).toBe(DEFAULT_TREE_ROW_WIDTH);
+      expect(width).toBeUndefined();
 
       rowsHierarchy.getNodes().forEach((node, index) => {
-        expect(node.width).toBe(width);
+        expect(node.width).toBe(DEFAULT_TREE_ROW_WIDTH);
         expect(node.height).toBe(
           cellCfg.height +
             rowCellStyle.padding?.top +
@@ -314,4 +323,30 @@ describe('Pivot Mode Facet Test', () => {
       }
     },
   );
+
+  // https://github.com/antvis/S2/issues/1622
+  test('should render custom column leaf node width and use treeRowsWidth first for tree mode', () => {
+    const mockDataSet = new MockPivotDataSet(s2);
+    const customWidthFacet = new PivotFacet({
+      spreadsheet: s2,
+      dataSet: mockDataSet,
+      ...assembleDataCfg().fields,
+      ...assembleOptions(),
+      hierarchyType: 'tree',
+      cellCfg: {},
+      colCfg: {},
+      rowCfg: {
+        // 行头宽度
+        width: 200,
+        // 已废弃
+        treeRowsWidth: 300,
+      },
+      // 树状结构下行头宽度 (优先级最高)
+      treeRowsWidth: 400,
+    });
+
+    customWidthFacet.layoutResult.rowNodes.forEach((node) => {
+      expect(node.width).toStrictEqual(400);
+    });
+  });
 });
diff --git a/packages/s2-core/__tests__/unit/facet/table-facet-spec.ts b/packages/s2-core/__tests__/unit/facet/table-facet-spec.ts
index cd1c73a68e..7ad52864c6 100644
--- a/packages/s2-core/__tests__/unit/facet/table-facet-spec.ts
+++ b/packages/s2-core/__tests__/unit/facet/table-facet-spec.ts
@@ -173,11 +173,33 @@ describe('Table Mode Facet Test With Adaptive Layout', () => {
 
 describe('Table Mode Facet Test With Compact Layout', () => {
   describe('should get correct col layout', () => {
+    const LABEL_WIDTH = [36, 36, 48, 24, 56]; // 采样的文本宽度
     const ss: SpreadSheet = new MockSpreadSheet();
     const dataSet: TableDataSet = new MockTableDataSet(ss);
     ss.getLayoutWidthType = () => {
       return 'compact';
     };
+
+    const mockMeasureFunc = (text: string | number) => {
+      switch (text) {
+        case '浙江省':
+          return LABEL_WIDTH[0];
+        case '杭州市':
+          return LABEL_WIDTH[1];
+        case '办公用品':
+          return LABEL_WIDTH[2];
+        case '沙发':
+          return LABEL_WIDTH[3];
+        case 'undefined':
+          return LABEL_WIDTH[4];
+        default:
+          return 0;
+      }
+    };
+    ss.measureTextWidth =
+      mockMeasureFunc as unknown as SpreadSheet['measureTextWidth'];
+    ss.measureTextWidthRoughly = mockMeasureFunc;
+
     const facet: TableFacet = new TableFacet({
       spreadsheet: ss,
       dataSet,
@@ -190,7 +212,6 @@ describe('Table Mode Facet Test With Compact Layout', () => {
 
     test('col hierarchy coordinate with compact layout', () => {
       const { colLeafNodes } = facet.layoutResult;
-
       const COMPACT_WIDTH = [53, 53, 65, 41, 73];
 
       let lastX = 0;
@@ -205,11 +226,32 @@ describe('Table Mode Facet Test With Compact Layout', () => {
   });
 
   describe('should get correct col layout with seriesNumber', () => {
+    const LABEL_WIDTH = [36, 36, 48, 24, 56]; // 采样的文本宽度
     const ss: SpreadSheet = new MockSpreadSheet();
     const dataSet: TableDataSet = new MockTableDataSet(ss);
     ss.getLayoutWidthType = () => {
       return 'compact';
     };
+    const mockMeasureFunc = (text: string | number) => {
+      switch (text) {
+        case '浙江省':
+          return LABEL_WIDTH[0];
+        case '杭州市':
+          return LABEL_WIDTH[1];
+        case '办公用品':
+          return LABEL_WIDTH[2];
+        case '沙发':
+          return LABEL_WIDTH[3];
+        case 'undefined': // seriesnumber & price
+          return LABEL_WIDTH[4];
+        default:
+          return 0;
+      }
+    };
+    ss.measureTextWidth =
+      mockMeasureFunc as unknown as SpreadSheet['measureTextWidth'];
+    ss.measureTextWidthRoughly = mockMeasureFunc;
+
     const facet: TableFacet = new TableFacet({
       spreadsheet: ss,
       dataSet,
diff --git a/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts b/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts
index bc14438738..9fcd62919f 100644
--- a/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts
+++ b/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts
@@ -15,6 +15,7 @@ import {
   type S2Options,
   SpreadSheet,
   type ThemeCfg,
+  customMerge,
 } from '@/index';
 import type { BaseFacet } from '@/facet/base-facet';
 
@@ -233,6 +234,8 @@ describe('Interaction Row Column Resize Tests', () => {
       isResizeArea: true,
       effect: ResizeAreaEffect.Cell,
       id: '',
+      resizedWidth: 5,
+      resizedHeight: 0,
     } as ResizeInfo;
 
     emitResizeEvent(
@@ -343,6 +346,8 @@ describe('Interaction Row Column Resize Tests', () => {
       isResizeArea: true,
       effect: ResizeAreaEffect.Cell,
       id: '',
+      resizedWidth: 0,
+      resizedHeight: 2,
     } as ResizeInfo;
 
     emitResizeEvent(
@@ -409,31 +414,81 @@ describe('Interaction Row Column Resize Tests', () => {
   });
 
   test('should get horizontal tree resize style', () => {
+    const resize = jest.fn();
+    const treeWidthResize = jest.fn();
+
+    s2.on(S2Event.LAYOUT_RESIZE_TREE_WIDTH, treeWidthResize);
+    s2.on(S2Event.LAYOUT_RESIZE, resize);
+
     const resizeInfo = emitResize(
       ResizeDirectionType.Horizontal,
       ResizeAreaEffect.Tree,
     );
 
+    const newResizeInfo = {
+      info: { ...resizeInfo, resizedWidth: 5, resizedHeight: 0 },
+      style: {
+        rowCfg: {
+          treeRowsWidth: 5,
+        },
+        treeRowsWidth: 5,
+      },
+    };
+    expect(resize).toHaveBeenCalledWith(newResizeInfo);
+    expect(treeWidthResize).toHaveBeenCalledWith(newResizeInfo);
     expect(s2.options.style.rowCfg.treeRowsWidth).toEqual(resizeInfo.width);
+    expect(s2.options.style.treeRowsWidth).toEqual(resizeInfo.width);
   });
 
   test('should get horizontal filed resize style', () => {
+    const resize = jest.fn();
+    const rowWidthResize = jest.fn();
+
+    s2.on(S2Event.LAYOUT_RESIZE_ROW_WIDTH, rowWidthResize);
+    s2.on(S2Event.LAYOUT_RESIZE, resize);
+
     const resizeInfo = emitResize(
       ResizeDirectionType.Horizontal,
       ResizeAreaEffect.Field,
     );
 
+    const newResizeInfo = {
+      info: { ...resizeInfo, resizedWidth: 5, resizedHeight: 0 },
+      style: {
+        rowCfg: {
+          widthByField: {
+            [resizeInfo.id]: 5,
+          },
+        },
+      },
+    };
+
+    expect(resize).toHaveBeenCalledWith(newResizeInfo);
+    expect(rowWidthResize).toHaveBeenCalledWith(newResizeInfo);
     expect(s2.options.style.rowCfg.widthByField).toEqual({
       [resizeInfo.id]: resizeInfo.width,
     });
   });
 
   test('should get horizontal series resize style', () => {
+    const resize = jest.fn();
+    const seriesWidthResize = jest.fn();
+
+    s2.on(S2Event.LAYOUT_RESIZE_SERIES_WIDTH, seriesWidthResize);
+    s2.on(S2Event.LAYOUT_RESIZE, resize);
+
     const resizeInfo = emitResize(
       ResizeDirectionType.Horizontal,
       ResizeAreaEffect.Series,
     );
 
+    const newResizeInfo = {
+      info: { ...resizeInfo, resizedWidth: 5, resizedHeight: 0 },
+      style: undefined,
+    };
+
+    expect(resize).toHaveBeenCalledWith(newResizeInfo);
+    expect(seriesWidthResize).toHaveBeenCalledWith(newResizeInfo);
     expect(s2.theme.rowCell.seriesNumberWidth).toEqual(resizeInfo.width);
   });
 
diff --git a/packages/s2-core/__tests__/unit/interaction/selected-cell-move-spec.ts b/packages/s2-core/__tests__/unit/interaction/selected-cell-move-spec.ts
index 615a44a2a9..6ca5e22826 100644
--- a/packages/s2-core/__tests__/unit/interaction/selected-cell-move-spec.ts
+++ b/packages/s2-core/__tests__/unit/interaction/selected-cell-move-spec.ts
@@ -30,6 +30,12 @@ describe('Interaction Keyboard Move Tests', () => {
         },
       },
     } as S2Options;
+    s2.theme = {
+      splitLine: {
+        verticalBorderWidth: 1,
+        horizontalBorderWidth: 1,
+      },
+    };
     s2.isTableMode = jest.fn(() => true);
     s2.dataSet = {
       fields: { columns: ['0', '1'] },
@@ -43,8 +49,16 @@ describe('Interaction Keyboard Move Tests', () => {
         ],
       },
       getTotalHeightForRange: (start, end) => 0,
-      scrollWithAnimation: (data) => {},
-      getScrollOffset: () => ({ scrollX: 0, scrollY: 0 }),
+      scrollWithAnimation: (data) => {
+        s2.store.set('scrollX', data?.offsetX?.value);
+        s2.store.set('scrollY', data?.offsetY?.value);
+      },
+      getScrollOffset: () => {
+        return {
+          scrollX: s2.store.get('scrollX', 0),
+          scrollY: s2.store.get('scrollY', 0),
+        };
+      },
       panelBBox: {
         viewportHeight: 200,
         viewportWidth: 200,
@@ -309,4 +323,34 @@ describe('Interaction Keyboard Move Tests', () => {
 
     s2.interaction.eventController.isCanvasEffect = true;
   });
+
+  test('should scroll to active cell', () => {
+    s2.interaction.changeState = jest.fn((state) => {});
+    s2.interaction.getCells = () => [mockCell01.mockCell as any];
+    // select cell
+    keyboardMove.startCell = mockCell01.mockCell;
+    keyboardMove.endCell = mockCell01.mockCell;
+    s2.facet.scrollWithAnimation({
+      offsetX: {
+        value: 1,
+      },
+      offsetY: {
+        value: 1,
+      },
+    });
+
+    expect(s2.facet.getScrollOffset()).toEqual({
+      scrollX: 1,
+      scrollY: 1,
+    });
+
+    s2.emit(S2Event.GLOBAL_KEYBOARD_DOWN, {
+      key: InteractionKeyboardKey.ARROW_LEFT,
+    } as KeyboardEvent);
+
+    expect(s2.facet.getScrollOffset()).toEqual({
+      scrollX: 0,
+      scrollY: 1,
+    });
+  });
 });
diff --git a/packages/s2-core/__tests__/unit/utils/export/copy-spec.ts b/packages/s2-core/__tests__/unit/utils/export/copy-spec.ts
index 4526edff29..bc2c23e2e7 100644
--- a/packages/s2-core/__tests__/unit/utils/export/copy-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/export/copy-spec.ts
@@ -1,6 +1,7 @@
 import { assembleDataCfg, assembleOptions, TOTALS_OPTIONS } from 'tests/util';
 import { getContainer } from 'tests/util/helpers';
 import { data as originalData, totalData } from 'tests/data/mock-dataset.json';
+import { map } from 'lodash';
 import { TableSheet, PivotSheet } from '@/sheet-type';
 
 import {
@@ -10,6 +11,7 @@ import {
 } from '@/common/constant/interaction';
 import {
   convertString,
+  CopyMIMEType,
   getCopyData,
   getSelectedData,
 } from '@/utils/export/copy';
@@ -102,6 +104,25 @@ describe('List Table Core Data Process', () => {
     expect(getSelectedData(s2).split('\n')[2].split('\t').length).toBe(5);
   });
 
+  it('should copy normal data with header in table mode', () => {
+    s2.setOptions({
+      interaction: {
+        copyWithHeader: true,
+      },
+    });
+    s2.render();
+
+    const cell = s2.interaction
+      .getAllCells()
+      .filter(({ cellType }) => cellType === CellTypes.DATA_CELL)[0];
+
+    s2.interaction.changeState({
+      cells: [getCellMeta(cell)],
+      stateName: InteractionStateName.SELECTED,
+    });
+    expect(getSelectedData(s2)).toEqual('province\r\n浙江省');
+  });
+
   it('should copy format data', () => {
     const ss = new TableSheet(
       getContainer(),
@@ -131,6 +152,13 @@ describe('List Table Core Data Process', () => {
   });
 
   it('should copy correct data with data filtered', () => {
+    s2.setOptions({
+      interaction: {
+        copyWithHeader: false,
+      },
+    });
+    s2.render();
+
     s2.emit(S2Event.RANGE_FILTER, {
       filterKey: 'province',
       filteredValues: ['浙江省'],
@@ -221,6 +249,10 @@ describe('Pivot Table Core Data Process', () => {
   const ROW_COUNT = 7;
   // 11 = 8(维度节点) + 2(小计) + 1(总计)
   const COL_COUNT = 11;
+  // 3 = ['type', 'sub_type', 'number'].length 行头高度
+  const COL_HEADER_HEIGHT = 3;
+  // 2 = ['province', 'city'].length 列头宽度
+  const ROW_HEADER_WIDTH = 2;
 
   const s2 = new PivotSheet(
     getContainer(),
@@ -363,11 +395,133 @@ describe('Pivot Table Core Data Process', () => {
     expect(getSelectedData(ss)).toEqual(`${originalData[0].number}元`);
   });
 
+  it('should copy normal data with header in grid mode', () => {
+    s2.setOptions({
+      interaction: {
+        copyWithHeader: true,
+      },
+    });
+    s2.render();
+
+    const allDataCells = s2.interaction
+      .getAllCells()
+      .filter(({ cellType }) => cellType === CellTypes.DATA_CELL);
+
+    const hangzhouDeskCell = allDataCells[0];
+    const zhejiangCityDeskSubTotalCell = allDataCells[4];
+
+    // 普通数据节点
+    s2.interaction.changeState({
+      cells: [getCellMeta(hangzhouDeskCell)],
+      stateName: InteractionStateName.SELECTED,
+    });
+
+    expect(getSelectedData(s2)).toEqual(
+      `\t\t家具\r\n\t\t桌子\r\n\t\tnumber\r\n浙江省\t杭州市\t7789`,
+    );
+
+    // 小计节点
+    s2.interaction.changeState({
+      cells: [getCellMeta(zhejiangCityDeskSubTotalCell)],
+      stateName: InteractionStateName.SELECTED,
+    });
+    expect(getSelectedData(s2)).toEqual(
+      `\t\t家具\r\n\t\t桌子\r\n\t\tnumber\r\n浙江省\t小计\t18375`,
+    );
+  });
+
+  // 看图更清晰 https://gw.alipayobjects.com/zos/antfincdn/zK68PhcnX/d852ffb8-603a-43e5-b841-dbf3c7577638.png
+  it('should copy col data with header in grid mode', () => {
+    s2.setOptions({
+      interaction: {
+        copyWithHeader: true,
+      },
+    });
+    s2.render();
+
+    const cell = s2.interaction
+      .getAllCells()
+      .filter(({ cellType }) => cellType === CellTypes.COL_CELL)[0];
+
+    s2.interaction.changeState({
+      cells: [getCellMeta(cell)],
+      stateName: InteractionStateName.SELECTED,
+    });
+
+    // 复制的数据高度 = 列头高度 + 数据高度
+    expect(getSelectedData(s2).split('\n')).toHaveLength(
+      COL_COUNT + COL_HEADER_HEIGHT,
+    );
+    // 复制的数据宽度 = 行头宽度 + 数据宽度
+    expect(getSelectedData(s2).split('\n')[0].split('\t')).toHaveLength(5);
+  });
+
+  // https://gw.alipayobjects.com/zos/antfincdn/q3mBlV9Ii/1d68499a-b529-4594-93ce-8b04f8b4c4bc.png
+  it('should copy row data with header in grid mode', () => {
+    s2.setOptions({
+      interaction: {
+        copyWithHeader: true,
+      },
+    });
+    s2.render();
+
+    const allRowCells = s2.interaction
+      .getAllCells()
+      .filter(({ cellType }) => cellType === CellTypes.ROW_CELL);
+
+    const hangzhouDeskCell = allRowCells[1];
+    const zhejiangCityDeskSubTotalCell = allRowCells[0];
+
+    // 选择某一行, city 维度下
+    s2.interaction.changeState({
+      cells: [getCellMeta(hangzhouDeskCell)],
+      stateName: InteractionStateName.SELECTED,
+    });
+
+    expect(getSelectedData(s2).split('\n')).toHaveLength(4);
+    expect(getSelectedData(s2).split('\n')[0].split('\t')).toHaveLength(9);
+
+    // 选择某几行，province 维度
+    s2.interaction.changeState({
+      cells: [getCellMeta(zhejiangCityDeskSubTotalCell)],
+      stateName: InteractionStateName.SELECTED,
+    });
+
+    expect(getSelectedData(s2).split('\n')).toHaveLength(8);
+    expect(getSelectedData(s2).split('\n')[0].split('\t')).toHaveLength(9);
+  });
+
+  it('should copy all data with header in grid mode', () => {
+    s2.setOptions({
+      interaction: {
+        copyWithHeader: true,
+      },
+    });
+    s2.render();
+
+    s2.interaction.changeState({
+      stateName: InteractionStateName.ALL_SELECTED,
+    });
+
+    expect(getSelectedData(s2).split('\n').length).toBe(
+      COL_COUNT + COL_HEADER_HEIGHT,
+    );
+    expect(getSelectedData(s2).split('\n')[1].split('\t').length).toBe(
+      ROW_COUNT + ROW_HEADER_WIDTH,
+    );
+  });
+
   it('should copy correct data with data sorted in grid mode', () => {
+    s2.setOptions({
+      interaction: {
+        copyWithHeader: false,
+      },
+    });
     const node = s2.getColumnNodes().find((node) => node.isLeaf);
     s2.groupSortByMethod('ASC' as SortMethodType, node);
     s2.setDataCfg(s2.dataCfg);
     s2.render();
+
     const cell = s2.interaction
       .getAllCells()
       .filter(({ cellType }) => cellType === CellTypes.ROW_CELL)
@@ -386,8 +540,6 @@ describe('Pivot Table Core Data Process', () => {
   });
 
   it('should copy correct data with \n data in grid mode', () => {
-    const newLineText = `1
-    2`;
     const sss = new PivotSheet(
       getContainer(),
       assembleDataCfg({
@@ -536,4 +688,12 @@ describe('List Table getCopyData', () => {
     expect(data.split('\n').length).toBe(2);
     expect(data.split('\t').length).toBe(5);
   });
+
+  it('should copy in multiple format', () => {
+    const data = getCopyData(s2, CopyType.ROW, [
+      CopyMIMEType.PLAIN,
+      CopyMIMEType.HTML,
+    ]) as string[];
+    expect(data.length).toBe(2);
+  });
 });
diff --git a/packages/s2-core/__tests__/unit/utils/export/export-spec.ts b/packages/s2-core/__tests__/unit/utils/export/export-spec.ts
index 0644720030..8845f7511e 100644
--- a/packages/s2-core/__tests__/unit/utils/export/export-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/export/export-spec.ts
@@ -8,7 +8,13 @@ describe('TableSheet Export Test', () => {
     const s2 = new TableSheet(
       getContainer(),
       assembleDataCfg({
-        meta: [],
+        meta: [
+          {
+            field: 'type',
+            name: '产品类型',
+            formatter: (type) => `${type}产品`,
+          },
+        ],
         fields: {
           columns: ['province', 'city', 'type', 'sub_type', 'number'],
         },
@@ -18,7 +24,9 @@ describe('TableSheet Export Test', () => {
       }),
     );
     s2.render();
-    const data = copyData(s2, '\t');
+    const data = copyData(s2, '\t', {
+      isFormatHeader: true,
+    });
     const rows = data.split('\n');
     const headers = rows[0].split('\t');
     // 33行数据 包括一行列头
@@ -31,7 +39,7 @@ describe('TableSheet Export Test', () => {
       '序号',
       'province',
       'city',
-      'type',
+      '产品类型',
       'sub_type',
       'number',
     ]);
diff --git a/packages/s2-core/__tests__/unit/utils/sort-action-spec.tsx b/packages/s2-core/__tests__/unit/utils/sort-action-spec.tsx
index debef10ae5..5b90bdb267 100644
--- a/packages/s2-core/__tests__/unit/utils/sort-action-spec.tsx
+++ b/packages/s2-core/__tests__/unit/utils/sort-action-spec.tsx
@@ -35,6 +35,16 @@ describe('Sort Action Test', () => {
       expect(sortAction(data2, 'DESC')).toEqual(['3', '2', '11']);
     });
 
+    test('sort action with zero and number arr', () => {
+      const data1 = [1, 6, -2, 0];
+      expect(sortAction(data1, 'ASC')).toEqual([-2, 0, 1, 6]);
+      expect(sortAction(data1, 'DESC')).toEqual([6, 1, 0, -2]);
+
+      const data2 = ['0', 0, 2, -2];
+      expect(sortAction(data2, 'ASC')).toEqual([-2, '0', 0, 2]);
+      expect(sortAction(data2, 'DESC')).toEqual([2, '0', 0, -2]);
+    });
+
     test('sort action with string arr', () => {
       const data = ['a', 'c', 'b'];
       expect(sortAction(data, 'ASC')).toEqual(['a', 'b', 'c']);
@@ -49,6 +59,22 @@ describe('Sort Action Test', () => {
       expect(sortAction(data2, 'DESC')).toEqual(['啊', '2', '11']);
     });
 
+    test('object data sorted by key with zero', () => {
+      const data1 = [{ a: 1 }, { a: 0 }, { a: -3 }, { a: 2 }];
+      expect(sortAction(data1, 'ASC', 'a')).toEqual([
+        { a: -3 },
+        { a: 0 },
+        { a: 1 },
+        { a: 2 },
+      ]);
+      expect(sortAction(data1, 'DESC', 'a')).toEqual([
+        { a: 2 },
+        { a: 1 },
+        { a: 0 },
+        { a: -3 },
+      ]);
+    });
+
     test('sort action with object arr', () => {
       const data1 = [{ a: 1 }, { a: 3 }, { a: 2 }];
       expect(sortAction(data1, 'ASC', 'a')).toEqual([
@@ -93,6 +119,7 @@ describe('Sort Action Test', () => {
           'a',
         ),
       ).toEqual([{ a: undefined }, { a: '-' }, { a: 2 }, { a: '3' }]);
+
       expect(
         sortAction(
           [{ a: '-' }, { a: '3' }, { a: 2 }, { a: undefined }],
@@ -194,9 +221,33 @@ describe('Sort By Func Tests', () => {
     expect(result).toEqual(originValues);
   });
 
-  test('should return sortFunc result', () => {
+  test('should return merged result', () => {
+    const originValues = ['四川[&]成都', '四川[&]绵阳', '浙江[&]杭州'];
+
     const result = sortByFunc({
+      originValues,
+      sortParam: {
+        sortFieldId: 'city',
+        sortFunc: () => ['浙江[&]杭州'],
+      },
+      dataSet: {
+        fields: {
+          rows: ['province', 'city'],
+        },
+      } as unknown as PivotDataSet,
+    });
+
+    // sortFunc 返回的值在前，未返回的值在后
+    expect(result).toEqual(['浙江[&]杭州', '四川[&]成都', '四川[&]绵阳']);
+  });
+
+  test('should return merged result when sorting by ASC', () => {
+    const originValues = ['四川[&]成都', '四川[&]绵阳', '浙江[&]杭州'];
+
+    const result = sortByFunc({
+      originValues,
       sortParam: {
+        sortMethod: 'ASC',
         sortFieldId: 'city',
         sortFunc: () => ['浙江[&]杭州'],
       },
@@ -207,7 +258,9 @@ describe('Sort By Func Tests', () => {
       } as unknown as PivotDataSet,
     });
 
-    expect(result).toEqual(['浙江[&]杭州']);
+    // asc 升序时
+    // sortFunc 没返回的值在前，返回的值在后
+    expect(result).toEqual(['四川[&]成都', '四川[&]绵阳', '浙江[&]杭州']);
   });
 
   test('should return fallback result', () => {
diff --git a/packages/s2-core/__tests__/unit/utils/text-spec.ts b/packages/s2-core/__tests__/unit/utils/text-spec.ts
index 682ea47ce9..0c0d0662f8 100644
--- a/packages/s2-core/__tests__/unit/utils/text-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/text-spec.ts
@@ -1,8 +1,8 @@
+import { createPivotSheet } from 'tests/util/helpers';
 import {
   getEllipsisText,
   getEllipsisTextInner,
   isUpDataValue,
-  measureTextWidth,
   getCellWidth,
   getEmptyPlaceholder,
 } from '@/utils/text';
@@ -16,74 +16,91 @@ describe('Text Utils Tests', () => {
     fontWeight: 'normal',
   } as unknown as CSSStyleDeclaration;
 
-  test('should get correct text', () => {
-    const text = getEllipsisText({
-      text: '12',
-      maxWidth: 200,
-      placeholder: '--',
+  describe('Test Widths Tests', () => {
+    let measureTextWidth: (text: number | string, font: unknown) => number;
+
+    beforeEach(() => {
+      measureTextWidth = createPivotSheet(
+        {},
+        { useSimpleData: true },
+      ).measureTextWidth;
     });
 
-    expect(text).toEqual('12');
-  });
+    test('should get correct text', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: '12',
+        maxWidth: 200,
+        placeholder: '--',
+      });
 
-  test('should get correct text ellipsis', () => {
-    const text = getEllipsisText({
-      text: '12121212121212121212',
-      maxWidth: 20,
-      placeholder: '--',
+      expect(text).toEqual('12');
     });
 
-    expect(text).toEndWith('...');
-    expect(text.length).toBeLessThanOrEqual(5);
-  });
+    test('should get correct text ellipsis', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: '12121212121212121212',
+        maxWidth: 20,
+        placeholder: '--',
+      });
 
-  test('should get correct placeholder text with ""', () => {
-    const text = getEllipsisText({
-      text: '',
-      maxWidth: 20,
-      placeholder: '--',
+      expect(text).toEndWith('...');
+      expect(text.length).toBeLessThanOrEqual(5);
     });
-    expect(text).toEqual('--');
-  });
 
-  test('should get correct placeholder text with 0', () => {
-    const text = getEllipsisText({
-      text: 0 as unknown as string,
-      maxWidth: 20,
-      placeholder: '--',
+    test('should get correct placeholder text with ""', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: '',
+        maxWidth: 20,
+        placeholder: '--',
+      });
+      expect(text).toEqual('--');
     });
 
-    expect(text).toEqual('0');
-  });
+    test('should get correct placeholder text with 0', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: 0 as unknown as string,
+        maxWidth: 20,
+        placeholder: '--',
+      });
 
-  test('should get correct placeholder text with null', () => {
-    const text = getEllipsisText({
-      text: null,
-      maxWidth: 20,
-      placeholder: '--',
+      expect(text).toEqual('0');
     });
 
-    expect(text).toEqual('--');
-  });
+    test('should get correct placeholder text with null', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: null,
+        maxWidth: 20,
+        placeholder: '--',
+      });
 
-  test('should get correct ellipsis text', () => {
-    const text = getEllipsisText({
-      text: '长度测试',
-      maxWidth: 24,
+      expect(text).toEqual('--');
     });
 
-    expect(text).toEndWith('...');
-    expect(text.length).toBeLessThanOrEqual(4);
-  });
+    test('should get correct ellipsis text', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: '长度测试',
+        maxWidth: 24,
+      });
 
-  test('should get correct text width', () => {
-    const width = measureTextWidth('test', font);
-    expect(Math.floor(width)).toEqual(isHD ? 21 : 16);
-  });
+      expect(text).toEndWith('...');
+      expect(text.length).toBeLessThanOrEqual(4);
+    });
 
-  test('should get correct ellipsis text inner', () => {
-    const text = getEllipsisTextInner('test', 15, font);
-    expect(text).toEqual('t...');
+    test('should get correct text width', () => {
+      const width = measureTextWidth('test', font);
+      expect(Math.floor(width)).toEqual(isHD ? 21 : 16);
+    });
+
+    test('should get correct ellipsis text inner', () => {
+      const text = getEllipsisTextInner(measureTextWidth, 'test', 15, font);
+      expect(text).toEqual('t...');
+    });
   });
 
   test.each`
diff --git a/packages/s2-core/package.json b/packages/s2-core/package.json
index 73046098a1..bc6a0f9701 100644
--- a/packages/s2-core/package.json
+++ b/packages/s2-core/package.json
@@ -69,13 +69,14 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "csstype": "^3.0.11",
+    "@testing-library/dom": "^8.16.0",
     "@types/d3-interpolate": "^3.0.1",
     "@types/d3-timer": "^3.0.0",
+    "csstype": "^3.0.11",
     "d3-dsv": "^1.1.1",
-    "tinycolor2": "^1.4.2",
     "inquirer": "^8.2.0",
-    "inquirer-autocomplete-prompt": "^2.0.0"
+    "inquirer-autocomplete-prompt": "^2.0.0",
+    "tinycolor2": "^1.4.2"
   },
   "sideEffects": [
     "*.css",
diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
index 7dec33e242..f8c7e37b0d 100644
--- a/packages/s2-core/src/cell/base-cell.ts
+++ b/packages/s2-core/src/cell/base-cell.ts
@@ -34,11 +34,7 @@ import {
 } from '../utils/cell/cell';
 import { renderLine, renderText, updateShapeAttr } from '../utils/g-renders';
 import { isMobile } from '../utils/is-mobile';
-import {
-  getEllipsisText,
-  getEmptyPlaceholder,
-  measureTextWidth,
-} from '../utils/text';
+import { getEllipsisText, getEmptyPlaceholder } from '../utils/text';
 
 export abstract class BaseCell<T extends SimpleBBox> extends Group {
   // cell's data meta info
@@ -201,9 +197,13 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     const { formattedValue } = this.getFormattedFieldValue();
     const maxTextWidth = this.getMaxTextWidth();
     const textStyle = this.getTextStyle();
-    const { placeholder } = this.spreadsheet.options;
+    const {
+      options: { placeholder },
+      measureTextWidth,
+    } = this.spreadsheet;
     const emptyPlaceholder = getEmptyPlaceholder(this, placeholder);
     const ellipsisText = getEllipsisText({
+      measureTextWidth,
       text: formattedValue,
       maxWidth: maxTextWidth,
       fontParam: textStyle,
@@ -233,13 +233,13 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     const device = this.spreadsheet.options.style.device;
     // 配置了链接跳转
     if (!isMobile(device)) {
-      const { minX, maxX, maxY }: BBox = this.textShape.getBBox();
+      const { minX, maxY }: BBox = this.textShape.getBBox();
       this.linkFieldShape = renderLine(
         this,
         {
           x1: minX,
           y1: maxY + 1,
-          x2: maxX,
+          x2: minX + this.actualTextWidth, // 不用 bbox 的 maxX，因为 g-base 文字宽度预估偏差较大
           y2: maxY + 1,
         },
         { stroke: linkFillColor, lineWidth: 1 },
@@ -287,11 +287,14 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
           styleKey === 'borderWidth'
         ) {
           if (isNumber(style)) {
+            const { horizontalBorderWidth, verticalBorderWidth } =
+              this.theme.dataCell.cell;
+
             const marginStyle = {
-              x: x + style / 2,
-              y: y + style / 2,
-              width: width - style - 1,
-              height: height - style - 1,
+              x: x + verticalBorderWidth / 2 + style / 2,
+              y: y + horizontalBorderWidth / 2 + style / 2,
+              width: width - verticalBorderWidth - style,
+              height: height - horizontalBorderWidth - style,
             };
             each(marginStyle, (currentStyle, currentStyleKey) => {
               updateShapeAttr(shape, currentStyleKey, currentStyle);
diff --git a/packages/s2-core/src/cell/col-cell.ts b/packages/s2-core/src/cell/col-cell.ts
index 1a331126e5..ca48b9e3e8 100644
--- a/packages/s2-core/src/cell/col-cell.ts
+++ b/packages/s2-core/src/cell/col-cell.ts
@@ -256,7 +256,13 @@ export class ColCell extends HeaderCell {
   }
 
   protected drawHorizontalResizeArea() {
-    if (!this.shouldDrawResizeAreaByType('colCellVertical', this)) {
+    // 隐藏列头时不绘制水平热区 https://github.com/antvis/S2/issues/1603
+    const isHiddenCol = this.spreadsheet.options.style?.colCfg?.height === 0;
+
+    if (
+      isHiddenCol ||
+      !this.shouldDrawResizeAreaByType('colCellVertical', this)
+    ) {
       return;
     }
 
@@ -349,7 +355,7 @@ export class ColCell extends HeaderCell {
       return;
     }
 
-    const { label, width, height, parent } = this.meta;
+    const { label, width, height } = this.meta;
 
     const resizeStyle = this.getResizeAreaStyle();
     const resizeArea = this.getColResizeArea();
@@ -368,7 +374,7 @@ export class ColCell extends HeaderCell {
           theme: resizeStyle,
           type: ResizeDirectionType.Horizontal,
           effect: ResizeAreaEffect.Cell,
-          id: parent.isTotals ? '' : label,
+          id: label,
           offsetX,
           offsetY,
           width,
diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts
index 7bdaff60d8..d86f1e37b1 100644
--- a/packages/s2-core/src/cell/corner-cell.ts
+++ b/packages/s2-core/src/cell/corner-cell.ts
@@ -38,11 +38,7 @@ import {
   getResizeAreaAttrs,
 } from '../utils/interaction/resize';
 import { isIPhoneX } from '../utils/is-mobile';
-import {
-  getEllipsisText,
-  getEmptyPlaceholder,
-  measureTextWidth,
-} from '../utils/text';
+import { getEllipsisText, getEmptyPlaceholder } from '../utils/text';
 import { i18n } from './../common/i18n';
 import { shouldAddResizeArea } from './../utils/interaction/resize';
 import { HeaderCell } from './header-cell';
@@ -86,7 +82,9 @@ export class CornerCell extends HeaderCell {
       this.meta,
       this.spreadsheet.options.placeholder,
     );
+    const { measureTextWidth } = this.spreadsheet;
     const text = getEllipsisText({
+      measureTextWidth,
       text: cornerText,
       maxWidth,
       fontParam: textStyle,
@@ -106,6 +104,7 @@ export class CornerCell extends HeaderCell {
       secondLine = cornerText.slice(lastIndex);
       // 第二行重新计算...逻辑
       secondLine = getEllipsisText({
+        measureTextWidth,
         text: secondLine,
         maxWidth,
         fontParam: textStyle,
diff --git a/packages/s2-core/src/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts
index 2ae56e35e7..93737ef30e 100644
--- a/packages/s2-core/src/cell/data-cell.ts
+++ b/packages/s2-core/src/cell/data-cell.ts
@@ -13,7 +13,6 @@ import type {
   Condition,
   Conditions,
   FormatResult,
-  Formatter,
   IconCfg,
   IconCondition,
   MappingResult,
@@ -219,15 +218,11 @@ export class DataCell extends BaseCell<ViewMeta> {
   protected getFormattedFieldValue(): FormatResult {
     const { rowId, valueField, fieldValue, data } = this.meta;
     const rowMeta = this.spreadsheet.dataSet.getFieldMeta(rowId);
-    let formatter: Formatter;
-    if (rowMeta) {
-      // format by row field
-      formatter = this.spreadsheet.dataSet.getFieldFormatter(rowId);
-    } else {
-      // format by value field
-      formatter = this.spreadsheet.dataSet.getFieldFormatter(valueField);
-    }
-    const formattedValue = formatter(fieldValue, data);
+    const fieldId = rowMeta ? rowId : valueField;
+    const formatter = this.spreadsheet.dataSet.getFieldFormatter(fieldId);
+    // TODO: 这里只用 formatter(fieldValue, this.meta) 即可, 为了保持兼容, 暂时在第三个参入传入 meta 信息
+    const formattedValue = formatter(fieldValue, data, this.meta);
+
     return {
       value: fieldValue,
       formattedValue,
diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts
index c7f7f1cb59..53de6358bd 100644
--- a/packages/s2-core/src/cell/header-cell.ts
+++ b/packages/s2-core/src/cell/header-cell.ts
@@ -64,10 +64,8 @@ export abstract class HeaderCell extends BaseCell<Node> {
     this.actionIcons = [];
   }
 
-  // 这个的 getFormattedFieldValue 主要是 row 和 col header 的格式化，这里不需要传递 data info
   protected getFormattedFieldValue(): FormatResult {
     const { label } = this.meta;
-    let content = label;
 
     const formatter = this.spreadsheet.dataSet.getFieldFormatter(
       this.meta.field,
@@ -75,12 +73,13 @@ export abstract class HeaderCell extends BaseCell<Node> {
 
     const isTableMode = this.spreadsheet.isTableMode();
     // 如果是 table mode，列头不需要被格式化
-    if (formatter && !isTableMode) {
-      content = formatter(label);
-    }
+    const formattedValue =
+      formatter && !isTableMode
+        ? formatter(label, undefined, this.meta)
+        : label;
 
     return {
-      formattedValue: content,
+      formattedValue,
       value: label,
     };
   }
diff --git a/packages/s2-core/src/cell/table-col-cell.ts b/packages/s2-core/src/cell/table-col-cell.ts
index 9690b58f06..090895ba3f 100644
--- a/packages/s2-core/src/cell/table-col-cell.ts
+++ b/packages/s2-core/src/cell/table-col-cell.ts
@@ -50,12 +50,32 @@ export class TableColCell extends ColCell {
     );
   }
 
-  protected getColResizeArea() {
-    const isFrozenCell = this.isFrozenCell();
+  protected shouldAddVerticalResizeArea() {
+    if (this.isFrozenCell()) {
+      return true;
+    }
+    return super.shouldAddVerticalResizeArea();
+  }
+
+  protected getVerticalResizeAreaOffset() {
+    const { x, y } = this.meta;
+    const { scrollX, position } = this.headerConfig;
 
-    if (!isFrozenCell) {
-      return super.getColResizeArea();
+    if (this.isFrozenCell()) {
+      return {
+        x,
+        y,
+      };
     }
+    return {
+      x: position.x + x - scrollX,
+      y: position.y + y,
+    };
+  }
+
+  protected getColResizeArea() {
+    const isFrozenCell = this.isFrozenCell();
+    if (!isFrozenCell) return super.getColResizeArea();
     return getOrCreateResizeAreaGroupById(
       this.spreadsheet,
       KEY_GROUP_FROZEN_COL_RESIZE_AREA,
diff --git a/packages/s2-core/src/cell/table-data-cell.ts b/packages/s2-core/src/cell/table-data-cell.ts
index 1eba82faef..bb2de2c3c9 100644
--- a/packages/s2-core/src/cell/table-data-cell.ts
+++ b/packages/s2-core/src/cell/table-data-cell.ts
@@ -1,5 +1,18 @@
 import { DataCell } from '../cell/data-cell';
-
+import {
+  KEY_GROUP_FROZEN_ROW_RESIZE_AREA,
+  KEY_GROUP_ROW_RESIZE_AREA,
+  ResizeAreaEffect,
+  ResizeDirectionType,
+} from '../common/constant';
+import {
+  isFrozenRow as isFrozenRowUtil,
+  isFrozenTrailingRow as isFrozenTrailingRowUtil,
+} from '../facet/utils';
+import {
+  getOrCreateResizeAreaGroupById,
+  getResizeAreaAttrs,
+} from '../utils/interaction/resize';
 export class TableDataCell extends DataCell {
   protected drawTextShape() {
     super.drawTextShape();
@@ -22,4 +35,67 @@ export class TableDataCell extends DataCell {
       this.drawLeftBorder();
     }
   }
+
+  public shouldDrawResizeArea() {
+    // 只有最左侧的单元格需要绘制resize区域
+    return this.meta.colIndex === 0;
+  }
+
+  public drawResizeArea() {
+    if (!this.shouldDrawResizeArea()) {
+      return;
+    }
+    const { x, y, width, height } = this.getCellArea();
+    const rowIndex = this.meta.rowIndex;
+    const resizeStyle = this.getResizeAreaStyle();
+    const { frozenRowCount, frozenTrailingRowCount } = this.spreadsheet.options;
+    const cellRange = this.spreadsheet.facet.getCellRange();
+    const isFrozenRow = isFrozenRowUtil(
+      rowIndex,
+      cellRange.start,
+      frozenRowCount,
+    );
+    const isFrozenTrailingRow = isFrozenTrailingRowUtil(
+      rowIndex,
+      cellRange.end,
+      frozenTrailingRowCount,
+    );
+    const isFrozen = isFrozenRow || isFrozenTrailingRow;
+    const resizeAreaId = isFrozen
+      ? KEY_GROUP_FROZEN_ROW_RESIZE_AREA
+      : KEY_GROUP_ROW_RESIZE_AREA;
+    const resizeArea = getOrCreateResizeAreaGroupById(
+      this.spreadsheet,
+      resizeAreaId,
+    );
+    const colHeight = this.spreadsheet.facet.layoutResult.colsHierarchy.height;
+    const { scrollY: sy } = this.spreadsheet.facet.getScrollOffset();
+    const paginationSy = this.spreadsheet.facet.getPaginationScrollY();
+    const scrollY = sy + paginationSy;
+
+    let yOffset = y + (isFrozenTrailingRow ? 0 : colHeight);
+
+    if (!isFrozenTrailingRow) {
+      yOffset -= isFrozenRow ? paginationSy : scrollY;
+    }
+
+    resizeArea.addShape('rect', {
+      attrs: {
+        ...getResizeAreaAttrs({
+          id: String(this.meta.rowIndex),
+          theme: resizeStyle,
+          type: ResizeDirectionType.Vertical,
+          effect: ResizeAreaEffect.Cell,
+          offsetX: x,
+          offsetY: yOffset,
+          width,
+          height,
+          meta: this.meta,
+        }),
+        x,
+        y: yOffset + height - resizeStyle.size / 2,
+        width,
+      },
+    });
+  }
 }
diff --git a/packages/s2-core/src/cell/table-series-cell.ts b/packages/s2-core/src/cell/table-series-cell.ts
index 9b600531a4..506c3818d5 100644
--- a/packages/s2-core/src/cell/table-series-cell.ts
+++ b/packages/s2-core/src/cell/table-series-cell.ts
@@ -1,22 +1,8 @@
-import { DataCell } from '../cell/data-cell';
-import {
-  CellTypes,
-  KEY_GROUP_FROZEN_ROW_RESIZE_AREA,
-  KEY_GROUP_ROW_RESIZE_AREA,
-  ResizeAreaEffect,
-  ResizeDirectionType,
-} from '../common/constant';
+import { CellTypes } from '../common/constant';
 import type { TextTheme } from '../common/interface';
-import {
-  isFrozenRow as isFrozenRowUtil,
-  isFrozenTrailingRow as isFrozenTrailingRowUtil,
-} from '../facet/utils';
-import {
-  getOrCreateResizeAreaGroupById,
-  getResizeAreaAttrs,
-} from '../utils/interaction/resize';
+import { TableDataCell } from './table-data-cell';
 
-export class TableSeriesCell extends DataCell {
+export class TableSeriesCell extends TableDataCell {
   public get cellType() {
     return CellTypes.ROW_CELL;
   }
@@ -24,66 +10,4 @@ export class TableSeriesCell extends DataCell {
   protected getTextStyle(): TextTheme {
     return this.theme.rowCell.seriesText;
   }
-
-  protected drawBorderShape() {
-    super.drawBorderShape();
-    if (this.meta.colIndex === 0) {
-      this.drawLeftBorder();
-    }
-  }
-
-  public drawResizeArea() {
-    const { x, y, width, height } = this.getCellArea();
-    const rowIndex = this.meta.rowIndex;
-    const resizeStyle = this.getResizeAreaStyle();
-    const { frozenRowCount, frozenTrailingRowCount } = this.spreadsheet.options;
-    const cellRange = this.spreadsheet.facet.getCellRange();
-    const isFrozenRow = isFrozenRowUtil(
-      rowIndex,
-      cellRange.start,
-      frozenRowCount,
-    );
-    const isFrozenTrailingRow = isFrozenTrailingRowUtil(
-      rowIndex,
-      cellRange.end,
-      frozenTrailingRowCount,
-    );
-    const isFrozen = isFrozenRow || isFrozenTrailingRow;
-    const resizeAreaId = isFrozen
-      ? KEY_GROUP_FROZEN_ROW_RESIZE_AREA
-      : KEY_GROUP_ROW_RESIZE_AREA;
-    const resizeArea = getOrCreateResizeAreaGroupById(
-      this.spreadsheet,
-      resizeAreaId,
-    );
-    const colHeight = this.spreadsheet.facet.layoutResult.colsHierarchy.height;
-    const { scrollY: sy } = this.spreadsheet.facet.getScrollOffset();
-    const paginationSy = this.spreadsheet.facet.getPaginationScrollY();
-    const scrollY = sy + paginationSy;
-
-    let yOffset = y + (isFrozenTrailingRow ? 0 : colHeight);
-
-    if (!isFrozenTrailingRow) {
-      yOffset -= isFrozenRow ? paginationSy : scrollY;
-    }
-
-    resizeArea.addShape('rect', {
-      attrs: {
-        ...getResizeAreaAttrs({
-          id: String(this.meta.rowIndex),
-          theme: resizeStyle,
-          type: ResizeDirectionType.Vertical,
-          effect: ResizeAreaEffect.Cell,
-          offsetX: x,
-          offsetY: yOffset,
-          width,
-          height,
-          meta: this.meta,
-        }),
-        x,
-        y: yOffset + height - resizeStyle.size / 2,
-        width,
-      },
-    });
-  }
 }
diff --git a/packages/s2-core/src/common/constant/index.ts b/packages/s2-core/src/common/constant/index.ts
index c8c2af6880..bde765ca76 100644
--- a/packages/s2-core/src/common/constant/index.ts
+++ b/packages/s2-core/src/common/constant/index.ts
@@ -11,3 +11,4 @@ export * from './theme';
 export * from './tooltip';
 export * from './resize';
 export * from './copy';
+export * from './pagination';
diff --git a/packages/s2-core/src/common/constant/options.ts b/packages/s2-core/src/common/constant/options.ts
index 8eb533bf34..9b8097534d 100644
--- a/packages/s2-core/src/common/constant/options.ts
+++ b/packages/s2-core/src/common/constant/options.ts
@@ -15,10 +15,11 @@ export enum LayoutWidthTypes {
   Compact = 'compact',
 }
 
+export const DEFAULT_TREE_ROW_WIDTH = 120;
+
 export const DEFAULT_STYLE: Readonly<Style> = {
   layoutWidthType: LayoutWidthTypes.Adaptive,
   showTreeLeafNodeAlignDot: false,
-  treeRowsWidth: 120,
   collapsedRows: {},
   collapsedCols: {},
   cellCfg: {
diff --git a/packages/s2-core/src/common/constant/pagination.ts b/packages/s2-core/src/common/constant/pagination.ts
new file mode 100644
index 0000000000..d0c742965a
--- /dev/null
+++ b/packages/s2-core/src/common/constant/pagination.ts
@@ -0,0 +1 @@
+export const DEFAULT_PAGE_INDEX = 1;
diff --git a/packages/s2-core/src/common/icons/gui-icon.ts b/packages/s2-core/src/common/icons/gui-icon.ts
index a27874f369..5d27be0300 100644
--- a/packages/s2-core/src/common/icons/gui-icon.ts
+++ b/packages/s2-core/src/common/icons/gui-icon.ts
@@ -69,12 +69,13 @@ export class GuiIcon extends Group {
           svg = svg.replace(/fill=[\'\"]#?\w+[\'\"]/g, ''); // 移除 fill="red|#fff"
           svg = svg.replace(/fill>/g, '>'); // fill> 替换为 >
         }
+        svg = svg.replace(
+          STYLE_PLACEHOLDER,
+          `${STYLE_PLACEHOLDER} fill="${fill}"`,
+        );
+        // 兼容 Firefox: https://github.com/antvis/S2/issues/1571 https://stackoverflow.com/questions/30733607/svg-data-image-not-working-as-a-background-image-in-a-pseudo-element/30733736#30733736
         // https://www.chromestatus.com/features/5656049583390720
-        // # 井号不能当做svg的body，这个bug在chrome72已经修复.
-        svg = svg
-          .replace(STYLE_PLACEHOLDER, `${STYLE_PLACEHOLDER} fill="${fill}"`)
-          .replace(/#/g, '%23');
-        img.src = `data:image/svg+xml;utf-8,${svg}`;
+        img.src = `data:image/svg+xml;utf-8,${encodeURIComponent(svg)}`;
       }
     });
   }
diff --git a/packages/s2-core/src/common/interface/basic.ts b/packages/s2-core/src/common/interface/basic.ts
index ce08fdbdcb..a10de927a4 100644
--- a/packages/s2-core/src/common/interface/basic.ts
+++ b/packages/s2-core/src/common/interface/basic.ts
@@ -19,7 +19,11 @@ import type { DataItem } from './s2DataConfig';
 // 1. data cell 格式化
 // 2. copy/export
 // 3. tooltip, 且仅在选择多个单元格时，data 类型为数组
-export type Formatter = (v: unknown, data?: Data | Data[]) => string;
+export type Formatter = (
+  v: unknown,
+  data?: Data | Data[],
+  meta?: Node | ViewMeta,
+) => string;
 
 export interface FormatResult {
   formattedValue: string;
@@ -186,7 +190,7 @@ export interface Style {
   layoutWidthType?: LayoutWidthType;
   // 是否展示树状分层下的层级占位点
   showTreeLeafNodeAlignDot?: boolean;
-  // row cell's height in tree mode
+  // 树状结构下行头宽度
   treeRowsWidth?: number;
   // 树状分层模式下的全局收起展开属性，对应角头收起展开按钮
   hierarchyCollapse?: boolean;
@@ -303,7 +307,9 @@ export interface RowCfg {
   // specific some row field's width
   widthByField?: Record<string, number>;
   heightByField?: Record<string, number>;
-  // tree row width(拖拽产生的，无需主动设置)
+  /**
+   * @deprecated (已废弃, 请使用 style.treeRowsWidth 代替) tree row width(拖拽产生的，无需主动设置)
+   */
   treeRowsWidth?: number;
 }
 
diff --git a/packages/s2-core/src/common/interface/interaction.ts b/packages/s2-core/src/common/interface/interaction.ts
index 976eb53a61..a7af0330a3 100644
--- a/packages/s2-core/src/common/interface/interaction.ts
+++ b/packages/s2-core/src/common/interface/interaction.ts
@@ -121,6 +121,8 @@ export interface InteractionOptions {
   enableCopy?: boolean;
   // copy with filed format
   copyWithFormat?: boolean;
+  // copy with header info
+  copyWithHeader?: boolean;
   // auto reset sheet style when click outside or press ecs key, default true
   autoResetSheetStyle?: boolean;
   hiddenColumnFields?: string[];
diff --git a/packages/s2-core/src/common/interface/resize.ts b/packages/s2-core/src/common/interface/resize.ts
index abd0f0f0bc..50a9731d5c 100644
--- a/packages/s2-core/src/common/interface/resize.ts
+++ b/packages/s2-core/src/common/interface/resize.ts
@@ -43,8 +43,8 @@ export interface ResizeDetail {
 }
 
 export interface ResizeParams {
-  resizeInfo?: ResizeInfo;
-  style?: Style;
+  info: ResizeInfo;
+  style: Style;
 }
 
 export interface ResizeInfo {
diff --git a/packages/s2-core/src/common/interface/scroll.ts b/packages/s2-core/src/common/interface/scroll.ts
index 1d016b132a..66008a9caa 100644
--- a/packages/s2-core/src/common/interface/scroll.ts
+++ b/packages/s2-core/src/common/interface/scroll.ts
@@ -4,11 +4,6 @@ export interface ScrollOffset {
   hRowScrollX?: number;
 }
 
-export interface S2WheelEvent extends WheelEvent {
-  layerX: number;
-  layerY: number;
-}
-
 export interface AreaRange {
   start: number;
   width: number;
@@ -18,3 +13,8 @@ export interface CellScrollPosition {
   scrollX: number;
   scrollY: number;
 }
+
+export interface CellScrollOffset {
+  offsetX: number;
+  offsetY: number;
+}
diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
index c43faf2124..d6bb8a8cdc 100644
--- a/packages/s2-core/src/facet/base-facet.ts
+++ b/packages/s2-core/src/facet/base-facet.ts
@@ -42,9 +42,9 @@ import type {
   ViewMeta,
 } from '../common/interface';
 import type {
-  S2WheelEvent,
   ScrollOffset,
   CellScrollPosition,
+  CellScrollOffset,
 } from '../common/interface/scroll';
 import type { SpreadSheet } from '../sheet-type';
 import { ScrollBar, ScrollType } from '../ui/scrollbar';
@@ -52,8 +52,8 @@ import { getAdjustedRowScrollX, getAdjustedScrollOffset } from '../utils/facet';
 import { getAllChildCells } from '../utils/get-all-child-cells';
 import { getColsForGrid, getRowsForGrid } from '../utils/grid';
 import { diffPanelIndexes, type PanelIndexes } from '../utils/indexes';
-import { updateMergedCells } from '../utils/interaction/merge-cell';
 import { isMobile } from '../utils/is-mobile';
+import { DEFAULT_PAGE_INDEX } from '../common/constant/pagination';
 import { CornerBBox } from './bbox/cornerBBox';
 import { PanelBBox } from './bbox/panelBBox';
 import {
@@ -200,9 +200,9 @@ export abstract class BaseFacet {
         ...originEvent,
         deltaX,
         deltaY,
-        layerX: x,
-        layerY: y,
-      } as unknown as S2WheelEvent);
+        offsetX: x,
+        offsetY: y,
+      } as unknown as WheelEvent);
     });
   };
 
@@ -281,7 +281,7 @@ export abstract class BaseFacet {
   public getPaginationScrollY(): number {
     const { pagination } = this.cfg;
     if (pagination) {
-      const { current, pageSize } = pagination;
+      const { current = DEFAULT_PAGE_INDEX, pageSize } = pagination;
       const heights = this.viewCellHeights;
       const offset = Math.max((current - 1) * pageSize, 0);
       return heights.getCellOffsetY(offset);
@@ -317,7 +317,7 @@ export abstract class BaseFacet {
   emitPaginationEvent = () => {
     const { pagination } = this.cfg;
     if (pagination) {
-      const { current, pageSize } = pagination;
+      const { current = DEFAULT_PAGE_INDEX, pageSize } = pagination;
       const total = this.viewCellHeights.getTotalLength();
 
       const pageCount = Math.floor((total - 1) / pageSize) + 1;
@@ -712,36 +712,36 @@ export abstract class BaseFacet {
     return (offset * (trackLen - thumbLen)) / scrollTargetMaxOffset;
   };
 
-  isScrollOverThePanelArea = ({ layerX, layerY }: Partial<S2WheelEvent>) => {
+  isScrollOverThePanelArea = ({ offsetX, offsetY }: CellScrollOffset) => {
     return (
-      layerX > this.panelBBox.minX &&
-      layerX < this.panelBBox.maxX &&
-      layerY > this.panelBBox.minY &&
-      layerY < this.panelBBox.maxY
+      offsetX > this.panelBBox.minX &&
+      offsetX < this.panelBBox.maxX &&
+      offsetY > this.panelBBox.minY &&
+      offsetY < this.panelBBox.maxY
     );
   };
 
-  isScrollOverTheCornerArea = ({ layerX, layerY }: Partial<S2WheelEvent>) => {
+  isScrollOverTheCornerArea = ({ offsetX, offsetY }: CellScrollOffset) => {
     return (
-      layerX > this.cornerBBox.minX &&
-      layerX < this.cornerBBox.maxX &&
-      layerY > this.cornerBBox.minY &&
-      layerY < this.cornerBBox.maxY + this.panelBBox.height
+      offsetX > this.cornerBBox.minX &&
+      offsetX < this.cornerBBox.maxX &&
+      offsetY > this.cornerBBox.minY &&
+      offsetY < this.cornerBBox.maxY + this.panelBBox.height
     );
   };
 
-  updateHorizontalRowScrollOffset = ({ offset, layerX, layerY }) => {
+  updateHorizontalRowScrollOffset = ({ offset, offsetX, offsetY }) => {
     // 在行头区域滚动时 才更新行头水平滚动条
-    if (this.isScrollOverTheCornerArea({ layerX, layerY })) {
+    if (this.isScrollOverTheCornerArea({ offsetX, offsetY })) {
       this.hRowScrollBar?.emitScrollChange(offset);
     }
   };
 
-  updateHorizontalScrollOffset = ({ offset, layerX, layerY }) => {
+  updateHorizontalScrollOffset = ({ offset, offsetX, offsetY }) => {
     // 1.行头没有滚动条 2.在数值区域滚动时 才更新数值区域水平滚动条
     if (
       !this.hRowScrollBar ||
-      this.isScrollOverThePanelArea({ layerX, layerY })
+      this.isScrollOverThePanelArea({ offsetX, offsetY })
     ) {
       this.hScrollBar?.emitScrollChange(offset);
     }
@@ -816,9 +816,9 @@ export abstract class BaseFacet {
   isScrollOverTheViewport = (
     deltaX: number,
     deltaY: number,
-    layerY: number,
+    offsetY: number,
   ) => {
-    const isScrollOverTheHeader = layerY <= this.cornerBBox.maxY;
+    const isScrollOverTheHeader = offsetY <= this.cornerBBox.maxY;
     // 光标在角头或列头时, 不触发表格自身滚动
     if (isScrollOverTheHeader) {
       return false;
@@ -854,7 +854,7 @@ export abstract class BaseFacet {
     2. none => 临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止
     所以只要不为 `auto`, 或者表格内, 都需要阻止外部容器滚动
   */
-  private stopScrollChainingIfNeeded = (event: S2WheelEvent) => {
+  private stopScrollChainingIfNeeded = (event: WheelEvent) => {
     const { interaction } = this.spreadsheet.options;
 
     if (interaction.overscrollBehavior !== 'auto') {
@@ -862,15 +862,15 @@ export abstract class BaseFacet {
     }
   };
 
-  private stopScrollChaining = (event: S2WheelEvent) => {
+  private stopScrollChaining = (event: WheelEvent) => {
     event?.preventDefault?.();
     // 移动端的 prevent 存在于 originalEvent上
     (event as unknown as GraphEvent)?.originalEvent?.preventDefault?.();
   };
 
-  onWheel = (event: S2WheelEvent) => {
+  onWheel = (event: WheelEvent) => {
     const { interaction } = this.spreadsheet.options;
-    const { deltaX, deltaY, layerX, layerY } = event;
+    const { deltaX, deltaY, offsetX, offsetY } = event;
     const [optimizedDeltaX, optimizedDeltaY] = optimizeScrollXY(
       deltaX,
       deltaY,
@@ -881,7 +881,7 @@ export abstract class BaseFacet {
     this.spreadsheet.interaction.clearHoverTimer();
 
     if (
-      !this.isScrollOverTheViewport(optimizedDeltaX, optimizedDeltaY, layerY)
+      !this.isScrollOverTheViewport(optimizedDeltaX, optimizedDeltaY, offsetY)
     ) {
       this.stopScrollChainingIfNeeded(event);
       return;
@@ -905,13 +905,13 @@ export abstract class BaseFacet {
       if (optimizedDeltaX !== 0) {
         this.showHorizontalScrollBar();
         this.updateHorizontalRowScrollOffset({
-          layerX,
-          layerY,
+          offsetX,
+          offsetY,
           offset: optimizedDeltaX + hRowScrollX,
         });
         this.updateHorizontalScrollOffset({
-          layerX,
-          layerY,
+          offsetX,
+          offsetY,
           offset: optimizedDeltaX + currentScrollX,
         });
       }
diff --git a/packages/s2-core/src/facet/header/series-number.ts b/packages/s2-core/src/facet/header/series-number.ts
index 64c04a181c..c0ca50c06a 100644
--- a/packages/s2-core/src/facet/header/series-number.ts
+++ b/packages/s2-core/src/facet/header/series-number.ts
@@ -1,14 +1,9 @@
 import type { Group, IGroup, IShape } from '@antv/g-canvas';
 import { each } from 'lodash';
-import {
-  CellBorderPosition,
-  type Padding,
-  type ViewMeta,
-} from '../../common/interface';
+import { CellBorderPosition, type Padding } from '../../common/interface';
 import type { SpreadSheet } from '../../sheet-type/index';
 import { getBorderPositionAndStyle } from '../../utils/cell/cell';
 import { renderLine, renderRect } from '../../utils/g-renders';
-import { measureTextWidth } from '../../utils/text';
 import { getAdjustPosition } from '../../utils/text-absorption';
 import type { PanelBBox } from '../bbox/panelBBox';
 import { Node } from '../layout/node';
@@ -198,7 +193,10 @@ export class SeriesNumberHeader extends BaseHeader<BaseHeaderConfig> {
 
   private getTextPadding(text: string, cellWidth: number): Padding {
     const rowCellTheme = this.getStyle();
-    const textWidth = measureTextWidth(text, rowCellTheme.seriesText);
+    const textWidth = this.headerConfig.spreadsheet.measureTextWidth(
+      text,
+      rowCellTheme.seriesText,
+    );
     const padding = Math.max(Math.abs((cellWidth - textWidth) / 2), 4);
     return {
       ...rowCellTheme.cell.padding,
diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts
index bd934c55a3..bb2f9214de 100644
--- a/packages/s2-core/src/facet/pivot-facet.ts
+++ b/packages/s2-core/src/facet/pivot-facet.ts
@@ -4,7 +4,6 @@ import {
   get,
   isArray,
   isEmpty,
-  isFunction,
   isNil,
   keys,
   last,
@@ -14,12 +13,10 @@ import {
   size,
 } from 'lodash';
 import {
+  DEFAULT_TREE_ROW_WIDTH,
   LAYOUT_SAMPLE_COUNT,
-  type CellCustomWidth,
-  type ColCfg,
   type IconTheme,
   type MultiData,
-  type RowCfg,
 } from '../common';
 import { EXTRA_FIELD, LayoutWidthTypes, VALUE_FIELD } from '../common/constant';
 import { CellTypes } from '../common/constant/interaction';
@@ -32,12 +29,7 @@ import {
   getIndexRangeWithOffsets,
   getSubTotalNodeWidthOrHeightByLevel,
 } from '../utils/facet';
-import {
-  getCellWidth,
-  measureTextWidth,
-  measureTextWidthRoughly,
-  safeJsonParse,
-} from '../utils/text';
+import { getCellWidth, safeJsonParse } from '../utils/text';
 import { BaseFacet } from './base-facet';
 import { buildHeaderHierarchy } from './layout/build-header-hierarchy';
 import type { Hierarchy } from './layout/hierarchy';
@@ -288,7 +280,7 @@ export class PivotFacet extends BaseFacet {
         colIconStyle,
       );
       const leafNodeRoughWidth =
-        measureTextWidthRoughly(leafNodeLabel) + iconWidth;
+        this.spreadsheet.measureTextWidthRoughly(leafNodeLabel) + iconWidth;
 
       // 采样 50 个 label，逐个计算找出最长的 label
       let maxDataLabel: string;
@@ -312,7 +304,8 @@ export class PivotFacet extends BaseFacet {
               cellData,
               filterDisplayDataItem,
             )}`;
-            const cellLabelWidth = measureTextWidthRoughly(cellLabel);
+            const cellLabelWidth =
+              this.spreadsheet.measureTextWidthRoughly(cellLabel);
 
             if (cellLabelWidth > maxDataLabelWidth) {
               maxDataLabel = cellLabel;
@@ -334,7 +327,7 @@ export class PivotFacet extends BaseFacet {
       );
 
       return (
-        measureTextWidth(maxLabel, colCellTextStyle) +
+        this.spreadsheet.measureTextWidth(maxLabel, colCellTextStyle) +
         colCellStyle.padding?.left +
         colCellStyle.padding?.right +
         appendedWidth
@@ -729,8 +722,10 @@ export class PivotFacet extends BaseFacet {
     const { rows, dataSet, rowCfg, treeRowsWidth } = this.cfg;
 
     // 1. 用户拖拽或手动指定的行头宽度优先级最高
-    if (rowCfg?.treeRowsWidth) {
-      return rowCfg?.treeRowsWidth;
+    // TODO: 由于历史原因, 存在两个行头宽度, (1. style.rowCfg.treeRowsWidth  2.style.treeRowsWidth) 暂时保持兼容
+    const currentTreeRowsWidth = treeRowsWidth ?? rowCfg?.treeRowsWidth;
+    if (currentTreeRowsWidth) {
+      return currentTreeRowsWidth;
     }
 
     // 2. 其次是自定义
@@ -747,14 +742,17 @@ export class PivotFacet extends BaseFacet {
       this.spreadsheet.theme.cornerCell;
     // 初始化角头时，保证其在树形模式下不换行，给与两个icon的宽度空余（tree icon 和 action icon），减少复杂的 action icon 判断
     const maxLabelWidth =
-      measureTextWidth(treeHeaderLabel, cornerCellTextStyle) +
+      this.spreadsheet.measureTextWidth(treeHeaderLabel, cornerCellTextStyle) +
       cornerIconStyle.size * 2 +
       cornerIconStyle.margin?.left +
       cornerIconStyle.margin?.right +
       this.rowCellTheme.padding?.left +
       this.rowCellTheme.padding?.right;
 
-    return Math.max(treeRowsWidth, maxLabelWidth);
+    return Math.max(
+      currentTreeRowsWidth ?? DEFAULT_TREE_ROW_WIDTH,
+      maxLabelWidth,
+    );
   }
 
   /**
@@ -801,7 +799,7 @@ export class PivotFacet extends BaseFacet {
       );
     const maxLabel = maxBy(allLabels, (label) => `${label}`.length);
     const rowNodeWidth =
-      measureTextWidth(maxLabel, rowTextStyle) +
+      spreadsheet.measureTextWidth(maxLabel, rowTextStyle) +
       rowIconWidth +
       rowCellStyle.padding.left +
       rowCellStyle.padding.right;
@@ -814,7 +812,7 @@ export class PivotFacet extends BaseFacet {
       cornerIconStyle,
     );
     const fieldNameNodeWidth =
-      measureTextWidth(fieldName, cornerTextStyle) +
+      spreadsheet.measureTextWidth(fieldName, cornerTextStyle) +
       cornerIconWidth +
       cornerCellStyle.padding.left +
       cornerCellStyle.padding.right;
diff --git a/packages/s2-core/src/facet/table-facet.ts b/packages/s2-core/src/facet/table-facet.ts
index d1b2f9bec6..70754ff8b2 100644
--- a/packages/s2-core/src/facet/table-facet.ts
+++ b/packages/s2-core/src/facet/table-facet.ts
@@ -1,6 +1,6 @@
 import type { Group, IElement, IGroup } from '@antv/g-canvas';
 import { get, isBoolean, isNil, last, maxBy, set, values } from 'lodash';
-import { TableSeriesCell } from '../cell';
+import { TableDataCell } from '../cell';
 import {
   FRONT_GROUND_GROUP_COL_FROZEN_Z_INDEX,
   FrozenGroup,
@@ -35,7 +35,6 @@ import {
 } from '../utils/grid';
 import type { PanelIndexes } from '../utils/indexes';
 import { getValidFrozenOptions } from '../utils/layout/frozen';
-import { measureTextWidth, measureTextWidthRoughly } from '../utils/text';
 import { BaseFacet } from './base-facet';
 import { CornerBBox } from './bbox/cornerBBox';
 import type { SeriesNumberHeader } from './header';
@@ -178,12 +177,6 @@ export class TableFacet extends BaseFacet {
     this.cornerBBox.maxY = height;
   }
 
-  public destroy() {
-    super.destroy();
-    this.spreadsheet.off(S2Event.RANGE_SORT);
-    this.spreadsheet.off(S2Event.RANGE_FILTER);
-  }
-
   protected doLayout(): LayoutResult {
     const { dataSet, spreadsheet } = this.cfg;
 
@@ -375,7 +368,7 @@ export class TableFacet extends BaseFacet {
         datas?.map((data) => `${data[col.key]}`)?.slice(0, 50) || []; // 采样取了前50
       allLabels.push(colLabel);
       const maxLabel = maxBy(allLabels, (label) =>
-        measureTextWidthRoughly(label),
+        spreadsheet.measureTextWidthRoughly(label),
       );
 
       const { bolderText: colCellTextStyle } = spreadsheet.theme.colCell;
@@ -391,7 +384,7 @@ export class TableFacet extends BaseFacet {
       // 最长的 Label 如果是列名，按列名的标准计算宽度
       if (colLabel === maxLabel) {
         colWidth =
-          measureTextWidth(maxLabel, colCellTextStyle) +
+          spreadsheet.measureTextWidth(maxLabel, colCellTextStyle) +
           getOccupiedWidthForTableCol(
             this.spreadsheet,
             col,
@@ -401,7 +394,7 @@ export class TableFacet extends BaseFacet {
         // 额外添加一像素余量，防止 maxLabel 有多个同样长度情况下，一些 label 不能展示完全
         const EXTRA_PIXEL = 1;
         colWidth =
-          measureTextWidth(maxLabel, dataCellTextStyle) +
+          spreadsheet.measureTextWidth(maxLabel, dataCellTextStyle) +
           cellStyle.padding.left +
           cellStyle.padding.right +
           EXTRA_PIXEL;
@@ -885,10 +878,10 @@ export class TableFacet extends BaseFacet {
     if (rowResizeFrozenGroup) {
       rowResizeFrozenGroup.set('children', []);
     }
-    const allCells: TableSeriesCell[] = getAllChildCells(
+    const allCells = getAllChildCells<TableDataCell>(
       this.panelGroup.getChildren() as IElement[],
-      TableSeriesCell,
-    );
+      TableDataCell,
+    ).filter((cell: TableDataCell) => cell.shouldDrawResizeArea());
 
     allCells.forEach((cell) => {
       cell.drawResizeArea();
diff --git a/packages/s2-core/src/facet/utils.ts b/packages/s2-core/src/facet/utils.ts
index 72237d8277..8c18285b78 100644
--- a/packages/s2-core/src/facet/utils.ts
+++ b/packages/s2-core/src/facet/utils.ts
@@ -5,6 +5,7 @@ import { FrozenCellType } from '../common/constant/frozen';
 import type { FrozenCellIndex, FrozenOpts } from '../common/constant/frozen';
 import type { Pagination, ScrollSpeedRatio } from '../common/interface';
 import type { Indexes } from '../utils/indexes';
+import { DEFAULT_PAGE_INDEX } from '../common/constant/pagination';
 import type { ViewCellHeights } from './layout/interface';
 
 export const isFrozenCol = (colIndex: number, frozenCount: number) => {
@@ -356,7 +357,7 @@ export const getCellRange = (
   let end = heights.getTotalLength() - 1;
 
   if (pagination) {
-    const { current, pageSize } = pagination;
+    const { current = DEFAULT_PAGE_INDEX, pageSize } = pagination;
 
     start = Math.max((current - 1) * pageSize, 0);
     end = Math.min(current * pageSize - 1, heights.getTotalLength() - 1);
diff --git a/packages/s2-core/src/interaction/event-controller.ts b/packages/s2-core/src/interaction/event-controller.ts
index d2d81f8229..83f5c2a74d 100644
--- a/packages/s2-core/src/interaction/event-controller.ts
+++ b/packages/s2-core/src/interaction/event-controller.ts
@@ -268,6 +268,26 @@ export class EventController {
 
     if (this.isResizeArea(event)) {
       this.spreadsheet.emit(S2Event.LAYOUT_RESIZE_MOUSE_DOWN, event);
+
+      // 仅捕获在canvas之外触发的事件     https://github.com/antvis/S2/issues/1592
+      const resizeMouseMoveCapture = (mouseEvent: MouseEvent) => {
+        if (!this.spreadsheet.getCanvasElement()) return false;
+        if (this.spreadsheet.getCanvasElement() !== mouseEvent.target) {
+          event.clientX = mouseEvent.clientX;
+          event.clientY = mouseEvent.clientY;
+          event.originalEvent = mouseEvent;
+          this.spreadsheet.emit(S2Event.LAYOUT_RESIZE_MOUSE_MOVE, event);
+        }
+      };
+
+      window.addEventListener('mousemove', resizeMouseMoveCapture);
+      window.addEventListener(
+        'mouseup',
+        () => {
+          window.removeEventListener('mousemove', resizeMouseMoveCapture);
+        },
+        { once: true },
+      );
       return;
     }
 
diff --git a/packages/s2-core/src/interaction/root.ts b/packages/s2-core/src/interaction/root.ts
index 301901326a..73d9a73c46 100644
--- a/packages/s2-core/src/interaction/root.ts
+++ b/packages/s2-core/src/interaction/root.ts
@@ -445,8 +445,9 @@ export class RootInteraction {
   }
 
   public clearState() {
-    clearState(this.spreadsheet);
-    this.draw();
+    if (clearState(this.spreadsheet)) {
+      this.draw();
+    }
   }
 
   public changeState(interactionStateInfo: InteractionStateInfo) {
diff --git a/packages/s2-core/src/interaction/row-column-resize.ts b/packages/s2-core/src/interaction/row-column-resize.ts
index 6faaaefa41..fbfcbb75b5 100644
--- a/packages/s2-core/src/interaction/row-column-resize.ts
+++ b/packages/s2-core/src/interaction/row-column-resize.ts
@@ -5,7 +5,7 @@ import type {
   ShapeAttrs,
 } from '@antv/g-canvas';
 import { clone, isEmpty, throttle } from 'lodash';
-import type { ResizeInteractionOptions, Style } from '../common';
+import type { ResizeInteractionOptions, ResizeParams, Style } from '../common';
 import {
   InterceptType,
   MIN_CELL_HEIGHT,
@@ -204,18 +204,17 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
   private getDisAllowResizeInfo() {
     const resizeInfo = this.getResizeInfo();
     const { resize } = this.spreadsheet.options.interaction;
-    const { start, end } = this.getResizeGuideLinePosition();
-    const resizedWidth = Math.floor(end.x - start.x);
-    const resizedHeight = Math.floor(end.y - start.y);
 
-    const originalWidth = resizeInfo.width;
-    const originalHeight = resizeInfo.height;
-
-    const isDisabled = (resize as ResizeInteractionOptions)?.disable?.({
-      ...resizeInfo,
+    const {
+      width: originalWidth,
+      height: originalHeight,
       resizedWidth,
       resizedHeight,
-    });
+    } = resizeInfo;
+
+    const isDisabled = (resize as ResizeInteractionOptions)?.disable?.(
+      resizeInfo,
+    );
 
     const displayWidth = isDisabled ? originalWidth : resizedWidth;
     const displayHeight = isDisabled ? originalHeight : resizedHeight;
@@ -248,7 +247,11 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
         return {
           eventType: S2Event.LAYOUT_RESIZE_TREE_WIDTH,
           style: {
+            treeRowsWidth: displayWidth,
             rowCfg: {
+              /**
+               * @deprecated 已废弃, 以 style.treeRowsWidth 为准, 保持兼容, 暂时保留
+               */
               treeRowsWidth: displayWidth,
             },
           },
@@ -468,10 +471,11 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
       eventType: resizeEventType,
     } = this.getResizeDetail() || {};
 
-    const resizeDetail = {
+    const resizeDetail: ResizeParams = {
       info: resizeInfo,
       style,
     };
+
     this.spreadsheet.emit(S2Event.LAYOUT_RESIZE, resizeDetail);
     this.spreadsheet.emit(resizeEventType, resizeDetail);
 
@@ -492,7 +496,18 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
   }
 
   private getResizeInfo(): ResizeInfo {
-    return this.getCellAppendInfo<ResizeInfo>(this.resizeTarget);
+    const defaultResizeInfo = this.getCellAppendInfo<ResizeInfo>(
+      this.resizeTarget,
+    );
+    const { start, end } = this.getResizeGuideLinePosition();
+    const resizedWidth = Math.floor(end.x - start.x);
+    const resizedHeight = Math.floor(end.y - start.y);
+
+    return {
+      ...defaultResizeInfo,
+      resizedWidth,
+      resizedHeight,
+    };
   }
 
   private render() {
diff --git a/packages/s2-core/src/interaction/selected-cell-move.ts b/packages/s2-core/src/interaction/selected-cell-move.ts
index 68f8311ac6..37e7a004a6 100644
--- a/packages/s2-core/src/interaction/selected-cell-move.ts
+++ b/packages/s2-core/src/interaction/selected-cell-move.ts
@@ -1,4 +1,5 @@
 import type { Event } from '@antv/g-canvas';
+import { get } from 'lodash';
 import { type CellMeta, CellTypes, type ViewMeta } from '../common';
 import { InteractionKeyboardKey, S2Event } from '../common/constant';
 import { calculateInViewIndexes } from '../facet/utils';
@@ -235,14 +236,21 @@ export class SelectedCellMove extends BaseEvent implements BaseEventImplement {
     const { colLeafNodes } = facet.layoutResult;
     const { scrollX, scrollY } = facet.getScrollOffset();
     const { viewportHeight: height, viewportWidth: width } = facet.panelBBox;
+    const splitLineStyle = get(spreadsheet, 'theme.splitLine');
     const frozenColWidth = frozenColGroup
-      ? Math.floor(frozenColGroup.getBBox().width)
+      ? Math.floor(
+          frozenColGroup.getBBox().width -
+            splitLineStyle.verticalBorderWidth / 2,
+        )
       : 0;
     const frozenTrailingColWidth = frozenTrailingColGroup
       ? Math.floor(frozenTrailingColGroup.getBBox().width)
       : 0;
     const frozenRowHeight = frozenRowGroup
-      ? Math.floor(frozenRowGroup.getBBox().height)
+      ? Math.floor(
+          frozenRowGroup.getBBox().height -
+            splitLineStyle.horizontalBorderWidth / 2,
+        )
       : 0;
     const frozenTrailingRowHeight = frozenTrailingRowGroup
       ? Math.floor(frozenTrailingRowGroup.getBBox().height)
diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
index 15148970fb..812d27d8cb 100644
--- a/packages/s2-core/src/sheet-type/spread-sheet.ts
+++ b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -1,10 +1,5 @@
 import EE from '@antv/event-emitter';
-import {
-  Canvas,
-  Event as CanvasEvent,
-  Group,
-  type IGroup,
-} from '@antv/g-canvas';
+import { Canvas, Event as CanvasEvent, type IGroup } from '@antv/g-canvas';
 import {
   forEach,
   forIn,
@@ -13,6 +8,8 @@ import {
   isEmpty,
   isFunction,
   isString,
+  memoize,
+  values,
 } from 'lodash';
 import { BaseCell } from '../cell';
 import {
@@ -681,4 +678,61 @@ export abstract class SpreadSheet extends EE {
       this.off(event);
     });
   }
+
+  /**
+   * 计算文本在画布中的宽度
+   * @param text 待计算的文本
+   * @param font 文本 css 样式
+   * @returns 文本宽度
+   */
+  public measureTextWidth = memoize(
+    (text: number | string = '', font: unknown): number => {
+      if (!font) {
+        return 0;
+      }
+
+      const ctx = this.getCanvasElement()?.getContext('2d');
+      const { fontSize, fontFamily, fontWeight, fontStyle, fontVariant } =
+        font as CSSStyleDeclaration;
+
+      ctx.font = [
+        fontStyle,
+        fontVariant,
+        fontWeight,
+        `${fontSize}px`,
+        fontFamily,
+      ]
+        .join(' ')
+        .trim();
+
+      return ctx.measureText(String(text)).width;
+    },
+    (text: any, font) => [text, ...values(font)].join(''),
+  );
+
+  /**
+   * 粗略计算文本在画布中的宽度
+   * @param text 待计算的文本
+   * @param font 文本 css 样式
+   * @returns 文本宽度
+   */
+  public measureTextWidthRoughly = (text: any, font: any = {}): number => {
+    const alphaWidth = this.measureTextWidth('a', font);
+    const chineseWidth = this.measureTextWidth('蚂', font);
+
+    let w = 0;
+    if (!text) {
+      return w;
+    }
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const char of text) {
+      const code = char.charCodeAt(0);
+
+      // /[\u0000-\u00ff]/
+      w += code >= 0 && code <= 255 ? alphaWidth : chineseWidth;
+    }
+
+    return w;
+  };
 }
diff --git a/packages/s2-core/src/sheet-type/table-sheet.ts b/packages/s2-core/src/sheet-type/table-sheet.ts
index c1bff083aa..73013b52a3 100644
--- a/packages/s2-core/src/sheet-type/table-sheet.ts
+++ b/packages/s2-core/src/sheet-type/table-sheet.ts
@@ -152,6 +152,8 @@ export class TableSheet extends SpreadSheet {
   public destroy() {
     super.destroy();
     this.clearFrozenGroups();
+    this.off(S2Event.RANGE_SORT);
+    this.off(S2Event.RANGE_FILTER);
   }
 
   public onSortTooltipClick = ({ key }, meta) => {
diff --git a/packages/s2-core/src/utils/export/copy.ts b/packages/s2-core/src/utils/export/copy.ts
index 52266e12cb..e6b05d5e0b 100644
--- a/packages/s2-core/src/utils/export/copy.ts
+++ b/packages/s2-core/src/utils/export/copy.ts
@@ -1,7 +1,10 @@
+import { map, zip, escape } from 'lodash';
 import {
   type CellMeta,
   CellTypes,
   CopyType,
+  EMPTY_PLACEHOLDER,
+  ID_SEPARATOR,
   InteractionStateName,
   VALUE_FIELD,
 } from '../../common';
@@ -96,21 +99,147 @@ export const convertString = (v: string) => {
   return v;
 };
 
+/**
+ * 根据 id 计算出行头或者列头展示的文本数组
+ * 将 id : root[&]家具[&]桌子[&]price"
+ * 转换为 List: ['四川省', '成都市']
+ * @param headerId
+ */
+const getHeaderList = (headerId: string) => {
+  const headerList = headerId.split(ID_SEPARATOR);
+  headerList.shift(); // 去除 root
+  return headerList;
+};
+
+type MatrixTransformer = (data: string[][]) => CopyableItem;
+
+export enum CopyMIMEType {
+  PLAIN = 'text/plain',
+  HTML = 'text/html',
+}
+
+export type CopyableItem = {
+  type: CopyMIMEType;
+  content: string;
+};
+
+export type Copyable = CopyableItem | CopyableItem[];
+
+function pickDataFromCopyable(
+  copyable: Copyable,
+  type: CopyMIMEType[],
+): string[];
+function pickDataFromCopyable(copyable: Copyable, type: CopyMIMEType): string;
+function pickDataFromCopyable(
+  copyable: Copyable,
+  type: CopyMIMEType | CopyMIMEType[],
+): string | string[];
+function pickDataFromCopyable(
+  copyable: Copyable,
+  type: CopyMIMEType[] | CopyMIMEType = CopyMIMEType.PLAIN,
+): string[] | string {
+  if (Array.isArray(type)) {
+    return ([].concat(copyable) as CopyableItem[])
+      .filter((item) => type.includes(item.type))
+      .map((item) => item.content);
+  }
+  return (
+    ([].concat(copyable) as CopyableItem[])
+      .filter((item) => item.type === type)
+      .map((item) => item.content)[0] || ''
+  );
+}
+
+// 把 string[][] 矩阵转换成 CopyableItem
+const matrixPlainTextTransformer: MatrixTransformer = (dataMatrix) => {
+  return {
+    type: CopyMIMEType.PLAIN,
+    content: map(dataMatrix, (line) => line.join(newTab)).join(newLine),
+  };
+};
+
+// 把 string[][] 矩阵转换成 CopyableItem
+const matrixHtmlTransformer: MatrixTransformer = (dataMatrix) => {
+  function createTableData(data: string[], tagName: string) {
+    return data
+      .map((cell) => `<${tagName}>${escape(cell)}</${tagName}>`)
+      .join('');
+  }
+
+  function createBody(data: string[][], tagName: string) {
+    return data
+      .map((row) => `<${tagName}>${createTableData(row, 'td')}</${tagName}>`)
+      .join('');
+  }
+
+  return {
+    type: CopyMIMEType.HTML,
+    content: `<meta charset="utf-8"><table><tbody>${createBody(
+      dataMatrix,
+      'tr',
+    )}</tbody></table>`,
+  };
+};
+
+// 生成矩阵：https://gw.alipayobjects.com/zos/antfincdn/bxBVt0nXx/a182c1d4-81bf-469f-b868-8b2e29acfc5f.png
+const assembleMatrix = (
+  rowMatrix: string[][],
+  colMatrix: string[][],
+  dataMatrix: string[][],
+): Copyable => {
+  const rowWidth = rowMatrix[0]?.length ?? 0;
+  const colHeight = colMatrix?.length ?? 0;
+  const dataWidth = dataMatrix[0]?.length ?? 0;
+  const dataHeight = dataMatrix.length ?? 0;
+  const matrixWidth = rowWidth + dataWidth;
+  const matrixHeight = colHeight + dataHeight;
+
+  let matrix = Array.from(Array(matrixHeight), () => new Array(matrixWidth));
+
+  matrix = map(matrix, (heightArr, y) => {
+    return map(heightArr, (w, x) => {
+      if (x >= 0 && x < rowWidth && y >= 0 && y < colHeight) {
+        return '';
+      }
+      if (x >= rowWidth && x <= matrixWidth && y >= 0 && y < colHeight) {
+        return colMatrix[y][x - rowWidth];
+      }
+      if (x >= 0 && x < rowWidth && y >= colHeight && y < matrixHeight) {
+        return rowMatrix[y - colHeight][x];
+      }
+      if (
+        x >= rowWidth &&
+        x <= matrixWidth &&
+        y >= colHeight &&
+        y < matrixHeight
+      ) {
+        return dataMatrix[y - colHeight][x - rowWidth];
+      }
+      return undefined;
+    });
+  }) as string[][];
+
+  return [matrixPlainTextTransformer(matrix), matrixHtmlTransformer(matrix)];
+};
+
 export const processCopyData = (
   displayData: DataType[],
   cells: CellMeta[][],
   spreadsheet: SpreadSheet,
-): string => {
-  const getRowString = (pre: string, cur: CellMeta) =>
-    pre +
-    (cur ? convertString(format(cur, displayData, spreadsheet)) : '') +
-    newTab;
-  const getColString = (pre: string, cur: CellMeta[]) =>
-    pre + cur.reduce(getRowString, '').slice(0, -1) + newLine;
-  return cells.reduce(getColString, '').slice(0, -2);
+): Copyable => {
+  const matrix = cells.map((cols) =>
+    cols.map((item) => convertString(format(item, displayData, spreadsheet))),
+  );
+
+  return [matrixPlainTextTransformer(matrix), matrixHtmlTransformer(matrix)];
 };
 
-export const getTwoDimData = (cells: CellMeta[]) => {
+/**
+ * 返回选中数据单元格生成的二维数组（ CellMeta[][]）
+ * @param { CellMeta[] } cells
+ * @return { CellMeta[][] }
+ */
+export const getSelectedCellsMeta = (cells: CellMeta[]) => {
   if (!cells?.length) return [];
   const [minCell, maxCell] = [
     { row: Infinity, col: Infinity },
@@ -144,54 +273,84 @@ const processTableColSelected = (
   displayData: DataType[],
   spreadsheet: SpreadSheet,
   selectedCols: CellMeta[],
-) => {
+): Copyable => {
   const selectedFiled = selectedCols.length
     ? selectedCols.map((e) => getColNodeField(spreadsheet, e.id))
     : spreadsheet.dataCfg.fields.columns;
-  return displayData
-    .map((row) => {
-      return selectedFiled
-        .map((filed) => convertString(row[filed]))
-        .join(newTab);
-    })
-    .join(newLine);
+
+  const dataMatrix = displayData.map((row) => {
+    return selectedFiled.map((filed) => convertString(row[filed]));
+  });
+
+  return [
+    matrixPlainTextTransformer(dataMatrix),
+    matrixHtmlTransformer(dataMatrix),
+  ];
 };
 
-const getPivotCopyData = (
+const getDataMatrix = (
+  leafRowNodes: Node[],
+  leafColNodes: Node[],
+  spreadsheet: SpreadSheet,
+) => {
+  return map(leafRowNodes, (rowNode) => {
+    return leafColNodes.map((colNode) => {
+      const cellData = spreadsheet.dataSet.getCellData({
+        query: {
+          ...rowNode.query,
+          ...colNode.query,
+        },
+        rowNode,
+        isTotals:
+          rowNode.isTotals ||
+          rowNode.isTotalMeasure ||
+          colNode.isTotals ||
+          colNode.isTotalMeasure,
+      });
+      return getFormat(colNode.colIndex, spreadsheet)(cellData[VALUE_FIELD]);
+    });
+  });
+};
+
+const getPivotWithoutHeaderCopyData = (
   spreadsheet: SpreadSheet,
   leafRows: Node[],
   leafCols: Node[],
-) => {
-  return leafRows
-    .map((rowNode) =>
-      leafCols
-        .map((colNode) => {
-          const cellData = spreadsheet.dataSet.getCellData({
-            query: {
-              ...rowNode.query,
-              ...colNode.query,
-            },
-            rowNode,
-            isTotals:
-              rowNode.isTotals ||
-              rowNode.isTotalMeasure ||
-              colNode.isTotals ||
-              colNode.isTotalMeasure,
-          });
-          return getFormat(
-            colNode.colIndex,
-            spreadsheet,
-          )(cellData[VALUE_FIELD]);
-        })
-        .join(newTab),
-    )
-    .join(newLine);
+): Copyable => {
+  const dataMatrix = getDataMatrix(leafRows, leafCols, spreadsheet);
+  return [
+    matrixPlainTextTransformer(dataMatrix),
+    matrixHtmlTransformer(dataMatrix),
+  ];
 };
 
+const getPivotWithHeaderCopyData = (
+  spreadsheet: SpreadSheet,
+  leafRowNodes: Node[],
+  leafColNodes: Node[],
+): Copyable => {
+  const rowMatrix = map(leafRowNodes, (n) => getHeaderList(n.id));
+  const colMatrix = zip(...map(leafColNodes, (n) => getHeaderList(n.id)));
+  const dataMatrix = getDataMatrix(leafRowNodes, leafColNodes, spreadsheet);
+  return assembleMatrix(rowMatrix, colMatrix, dataMatrix);
+};
+
+function getPivotCopyData(
+  spreadsheet: SpreadSheet,
+  allRowLeafNodes: Node[],
+  colNodes: Node[],
+): Copyable {
+  const { copyWithHeader } = spreadsheet.options.interaction;
+
+  return copyWithHeader
+    ? getPivotWithHeaderCopyData(spreadsheet, allRowLeafNodes, colNodes)
+    : getPivotWithoutHeaderCopyData(spreadsheet, allRowLeafNodes, colNodes);
+}
+
 const processPivotColSelected = (
   spreadsheet: SpreadSheet,
   selectedCols: CellMeta[],
-) => {
+): Copyable => {
   const allRowLeafNodes = spreadsheet
     .getRowNodes()
     .filter((node) => node.isLeaf);
@@ -205,13 +364,14 @@ const processPivotColSelected = (
         return arr;
       }, [])
     : allColLeafNodes;
+
   return getPivotCopyData(spreadsheet, allRowLeafNodes, colNodes);
 };
 const processColSelected = (
   displayData: DataType[],
   spreadsheet: SpreadSheet,
   selectedCols: CellMeta[],
-) => {
+): Copyable => {
   if (spreadsheet.isPivotMode()) {
     return processPivotColSelected(spreadsheet, selectedCols);
   }
@@ -221,22 +381,18 @@ const processColSelected = (
 const processTableRowSelected = (
   displayData: DataType[],
   selectedRows: CellMeta[],
-) => {
+): Copyable => {
   const selectedIndex = selectedRows.map((e) => e.rowIndex);
-  return displayData
+  const matrix = displayData
     .filter((e, i) => selectedIndex.includes(i))
-    .map((e) =>
-      Object.keys(e)
-        .map((key) => convertString(e[key]))
-        .join(newTab),
-    )
-    .join(newLine);
+    .map((e) => Object.keys(e).map((key) => convertString(e[key])));
+  return [matrixPlainTextTransformer(matrix), matrixHtmlTransformer(matrix)];
 };
 
 const processPivotRowSelected = (
   spreadsheet: SpreadSheet,
   selectedRows: CellMeta[],
-) => {
+): Copyable => {
   const allRowLeafNodes = spreadsheet
     .getRowNodes()
     .filter((node) => node.isLeaf);
@@ -254,18 +410,42 @@ const processRowSelected = (
   displayData: DataType[],
   spreadsheet: SpreadSheet,
   selectedRows: CellMeta[],
-) => {
+): Copyable => {
   if (spreadsheet.isPivotMode()) {
     return processPivotRowSelected(spreadsheet, selectedRows);
   }
   return processTableRowSelected(displayData, selectedRows);
 };
 
-export const getCopyData = (spreadsheet: SpreadSheet, copyType: CopyType) => {
+export function getCopyData(
+  spreadsheet: SpreadSheet,
+  copyType: CopyType,
+  copyFormat: CopyMIMEType,
+): string;
+
+export function getCopyData(
+  spreadsheet: SpreadSheet,
+  copyType: CopyType,
+  copyFormat: CopyMIMEType[],
+): string[];
+
+export function getCopyData(
+  spreadsheet: SpreadSheet,
+  copyType: CopyType,
+): string;
+
+export function getCopyData(
+  spreadsheet: SpreadSheet,
+  copyType: CopyType,
+  copyFormat: CopyMIMEType[] | CopyMIMEType = CopyMIMEType.PLAIN,
+): string[] | string {
   const displayData = spreadsheet.dataSet.getDisplayDataSet();
   const cells = spreadsheet.interaction.getState().cells || [];
   if (copyType === CopyType.ALL) {
-    return processColSelected(displayData, spreadsheet, []);
+    return pickDataFromCopyable(
+      processColSelected(displayData, spreadsheet, []),
+      copyFormat,
+    );
   }
   if (copyType === CopyType.COL) {
     const colIndexes = cells.reduce<number[]>((pre, cur) => {
@@ -282,7 +462,10 @@ export const getCopyData = (spreadsheet: SpreadSheet, copyType: CopyType) => {
         rowIndex: node.rowIndex,
         type: CellTypes.COL_CELL,
       }));
-    return processColSelected(displayData, spreadsheet, colNodes);
+    return pickDataFromCopyable(
+      processColSelected(displayData, spreadsheet, colNodes),
+      copyFormat,
+    );
   }
   if (copyType === CopyType.ROW) {
     const rowIndexes = cells.reduce<number[]>((pre, cur) => {
@@ -299,14 +482,50 @@ export const getCopyData = (spreadsheet: SpreadSheet, copyType: CopyType) => {
         type: CellTypes.ROW_CELL,
       };
     });
-    return processRowSelected(displayData, spreadsheet, rowNodes);
+    return pickDataFromCopyable(
+      processRowSelected(displayData, spreadsheet, rowNodes),
+      copyFormat,
+    );
   }
+}
+
+/**
+ * 生成包含行列头的导出数据。查看👇🏻图效果展示，更容易理解代码：
+ * https://gw.alipayobjects.com/zos/antfincdn/bxBVt0nXx/a182c1d4-81bf-469f-b868-8b2e29acfc5f.png
+ * @param cellMetaMatrix
+ * @param displayData
+ * @param spreadsheet
+ */
+const getDataWithHeaderMatrix = (
+  cellMetaMatrix: CellMeta[][],
+  displayData: DataType[],
+  spreadsheet: SpreadSheet,
+): Copyable => {
+  const colMatrix = zip(
+    ...map(cellMetaMatrix[0], (cellMeta) => {
+      const colId = cellMeta.id.split(EMPTY_PLACEHOLDER)?.[1] ?? '';
+      return getHeaderList(colId);
+    }),
+  );
+
+  const rowMatrix = map(cellMetaMatrix, (cellsMeta) => {
+    const rowId = cellsMeta[0].id.split(EMPTY_PLACEHOLDER)?.[0] ?? '';
+    return getHeaderList(rowId);
+  });
+
+  const dataMatrix = map(cellMetaMatrix, (cellsMeta) => {
+    return map(cellsMeta, (it) => format(it, displayData, spreadsheet));
+  });
+
+  return assembleMatrix(rowMatrix, colMatrix, dataMatrix);
 };
 
-export const getSelectedData = (spreadsheet: SpreadSheet) => {
+export const getSelectedData = (spreadsheet: SpreadSheet): string => {
   const interaction = spreadsheet.interaction;
+  const { copyWithHeader } = spreadsheet.options.interaction;
+
   const cells = interaction.getState().cells || [];
-  let data: string;
+  let data: Copyable;
   const selectedCols = cells.filter(({ type }) => type === CellTypes.COL_CELL);
   const selectedRows = cells.filter(({ type }) => type === CellTypes.ROW_CELL);
 
@@ -327,11 +546,21 @@ export const getSelectedData = (spreadsheet: SpreadSheet) => {
       return;
     }
     // normal selected
-    data = processCopyData(displayData, getTwoDimData(cells), spreadsheet);
+    const selectedCellsMeta = getSelectedCellsMeta(cells);
+
+    if (copyWithHeader) {
+      data = getDataWithHeaderMatrix(
+        selectedCellsMeta,
+        displayData,
+        spreadsheet,
+      );
+    } else {
+      data = processCopyData(displayData, selectedCellsMeta, spreadsheet);
+    }
   }
 
   if (data) {
     copyToClipboard(data);
   }
-  return data;
+  return pickDataFromCopyable(data, CopyMIMEType.PLAIN);
 };
diff --git a/packages/s2-core/src/utils/export/index.ts b/packages/s2-core/src/utils/export/index.ts
index b090da189e..3568e030fa 100644
--- a/packages/s2-core/src/utils/export/index.ts
+++ b/packages/s2-core/src/utils/export/index.ts
@@ -2,6 +2,7 @@ import {
   clone,
   flatten,
   forEach,
+  get,
   isArray,
   isEmpty,
   isObject,
@@ -23,12 +24,24 @@ import {
 import type { Node } from '../../facet/layout/node';
 import type { SpreadSheet } from '../../sheet-type';
 import { safeJsonParse } from '../../utils/text';
+import { CopyMIMEType, type Copyable, type CopyableItem } from './copy';
 import { getCsvString } from './export-worker';
 
-export const copyToClipboardByExecCommand = (str: string): Promise<void> => {
+export const copyToClipboardByExecCommand = (data: Copyable): Promise<void> => {
   return new Promise((resolve, reject) => {
+    let content: string;
+    if (Array.isArray(data)) {
+      content = get(
+        data.filter((item) => item.type === CopyMIMEType.PLAIN),
+        '[0].content',
+        '',
+      );
+    } else {
+      content = data.content || '';
+    }
+
     const textarea = document.createElement('textarea');
-    textarea.value = str;
+    textarea.value = content;
     document.body.appendChild(textarea);
     // 开启 preventScroll, 防止页面有滚动条时触发滚动
     textarea.focus({ preventScroll: true });
@@ -45,17 +58,42 @@ export const copyToClipboardByExecCommand = (str: string): Promise<void> => {
   });
 };
 
-export const copyToClipboardByClipboard = (str: string): Promise<void> => {
-  return navigator.clipboard.writeText(str).catch(() => {
-    return copyToClipboardByExecCommand(str);
-  });
+export const copyToClipboardByClipboard = (data: Copyable): Promise<void> => {
+  return navigator.clipboard
+    .write([
+      new ClipboardItem(
+        [].concat(data).reduce((prev, copyable: CopyableItem) => {
+          const { type, content } = copyable;
+          return {
+            ...prev,
+            [type]: new Blob([content], { type }),
+          };
+        }, {}),
+      ),
+    ])
+    .catch(() => {
+      return copyToClipboardByExecCommand(data);
+    });
 };
 
-export const copyToClipboard = (str: string, sync = false): Promise<void> => {
+export const copyToClipboard = (
+  data: Copyable | string,
+  sync = false,
+): Promise<void> => {
+  let copyableItem: Copyable;
+  if (typeof data === 'string') {
+    copyableItem = {
+      content: data,
+      type: CopyMIMEType.PLAIN,
+    };
+  } else {
+    copyableItem = data;
+  }
+
   if (!navigator.clipboard || sync) {
-    return copyToClipboardByExecCommand(str);
+    return copyToClipboardByExecCommand(copyableItem);
   }
-  return copyToClipboardByClipboard(str);
+  return copyToClipboardByClipboard(copyableItem);
 };
 
 export const download = (str: string, fileName: string) => {
@@ -358,7 +396,10 @@ export const copyData = (
           arrayLength = max([arrayLength, size(label)]);
         } else {
           // label 为数组时不进行格式化
-          label = isFormatHeader ? getNodeFormatLabel(curColItem) : label;
+          label =
+            isFormatHeader && sheetInstance.isPivotMode()
+              ? getNodeFormatLabel(curColItem)
+              : label;
         }
         tempCol.push(label);
         curColItem = curColItem.parent;
diff --git a/packages/s2-core/src/utils/g-mini-charts.ts b/packages/s2-core/src/utils/g-mini-charts.ts
index b17d25d86a..70376e1848 100644
--- a/packages/s2-core/src/utils/g-mini-charts.ts
+++ b/packages/s2-core/src/utils/g-mini-charts.ts
@@ -19,7 +19,7 @@ import {
   renderText,
 } from '../utils/g-renders';
 import { CellTypes, MiniChartTypes } from '../common/constant';
-import { getEllipsisText, measureTextWidth } from './text';
+import { getEllipsisText } from './text';
 
 interface FractionDigitsOptions {
   min: number;
@@ -231,7 +231,7 @@ export const drawBullet = (value: BulletValue, cell: S2CellType) => {
 
   const dataCellStyle = cell.getStyle(CellTypes.DATA_CELL);
   const bulletStyle = dataCellStyle.miniChart.bullet;
-  const { x, y, height, width } = cell.getMeta();
+  const { x, y, height, width, spreadsheet } = cell.getMeta();
   const { progressBar, comparativeMeasure, rangeColors, backgroundColor } =
     bulletStyle;
 
@@ -245,7 +245,7 @@ export const drawBullet = (value: BulletValue, cell: S2CellType) => {
   // 对于负数, 进度条计算按照 0 处理, 但是展示还是要显示原来的百分比
   const measurePercent = transformRatioToPercent(measure, 2);
   const measurePercentWidth = Math.ceil(
-    measureTextWidth(measurePercent, dataCellStyle),
+    spreadsheet.measureTextWidth(measurePercent, dataCellStyle),
   );
 
   const bulletWidth = progressBar.widthPercent * width - measurePercentWidth;
@@ -316,6 +316,7 @@ export const drawBullet = (value: BulletValue, cell: S2CellType) => {
     positionX - padding.right,
     y + height / 2,
     getEllipsisText({
+      measureTextWidth: spreadsheet.measureTextWidth,
       text: measurePercent,
       maxWidth: measureWidth,
       fontParam: dataCellStyle.text,
diff --git a/packages/s2-core/src/utils/interaction/state-controller.ts b/packages/s2-core/src/utils/interaction/state-controller.ts
index 822198918f..0365fdaf52 100644
--- a/packages/s2-core/src/utils/interaction/state-controller.ts
+++ b/packages/s2-core/src/utils/interaction/state-controller.ts
@@ -7,31 +7,37 @@ import type { SpreadSheet } from '../../sheet-type';
  * @desc clear the interaction state information
  * @param spreadsheet sheet instance
  */
-export const clearState = (spreadsheet: SpreadSheet) => {
+export const clearState = (spreadsheet: SpreadSheet): boolean => {
   const activeIcons = spreadsheet.store.get('visibleActionIcons');
+  const allInteractedCells = spreadsheet.interaction.getInteractedCells();
+  const cellMetas = spreadsheet.interaction.getState().cells;
+  // 如果都处于初始化状态 不需要clear
+  if (
+    isEmpty(allInteractedCells) &&
+    isEmpty(cellMetas) &&
+    isEmpty(activeIcons)
+  ) {
+    return false;
+  }
   forEach(activeIcons, (icon) => {
     icon.set('visible', false);
   });
   spreadsheet.store.set('visibleActionIcons', []);
 
-  const allInteractedCells = spreadsheet.interaction.getInteractedCells();
-  const cellMetas = spreadsheet.interaction.getState().cells;
-
-  if (!isEmpty(allInteractedCells) || !isEmpty(cellMetas)) {
-    forEach(allInteractedCells, (cell: S2CellType) => {
-      cell.hideInteractionShape();
-    });
+  forEach(allInteractedCells, (cell: S2CellType) => {
+    cell.hideInteractionShape();
+  });
 
-    spreadsheet.interaction.resetState();
-    if (spreadsheet.options.interaction.selectedCellsSpotlight) {
-      const unSelectedCells =
-        spreadsheet.interaction.getPanelGroupAllUnSelectedDataCells() || [];
+  spreadsheet.interaction.resetState();
+  if (spreadsheet.options.interaction.selectedCellsSpotlight) {
+    const unSelectedCells =
+      spreadsheet.interaction.getPanelGroupAllUnSelectedDataCells() || [];
 
-      forEach(unSelectedCells, (cell) => {
-        cell.clearUnselectedState();
-      });
-    }
+    forEach(unSelectedCells, (cell) => {
+      cell.clearUnselectedState();
+    });
   }
+  return true;
 };
 
 /**
diff --git a/packages/s2-core/src/utils/sort-action.ts b/packages/s2-core/src/utils/sort-action.ts
index a4507bd060..ac0096f720 100644
--- a/packages/s2-core/src/utils/sort-action.ts
+++ b/packages/s2-core/src/utils/sort-action.ts
@@ -5,6 +5,8 @@ import {
   includes,
   indexOf,
   isEmpty,
+  isNaN,
+  isNil,
   keys,
   map,
   split,
@@ -22,6 +24,8 @@ export const isAscSort = (sortMethod) => toUpper(sortMethod) === 'ASC';
 
 export const isDescSort = (sortMethod) => toUpper(sortMethod) === 'DESC';
 
+const canTobeNumber = (a?: string | number) => !isNaN(Number(a));
+
 /**
  * 执行排序
  * @param list - 待排序数组
@@ -37,12 +41,12 @@ export const sortAction = (
   const specialValues = ['-', undefined];
   return list?.sort(
     (pre: string | number | DataType, next: string | number | DataType) => {
-      let a = pre;
-      let b = next;
+      let a = pre as string | number;
+      let b = next as string | number;
       if (key) {
-        a = pre[key];
-        b = next[key];
-        if (Number(a) && Number(b)) {
+        a = pre[key] as string | number;
+        b = next[key] as string | number;
+        if (canTobeNumber(a) && canTobeNumber(b)) {
           return (Number(a) - Number(b)) * sort;
         }
         if (a && specialValues?.includes(a?.toString())) {
@@ -52,7 +56,8 @@ export const sortAction = (
           return sort;
         }
       }
-      if (a && b) {
+      // 没有参数 key 时，需要理解成按字典序（首字母）进行排序，用于排维度值的。（我也不理解为啥要把这两个逻辑写在一起，很容易误解
+      if (!isNil(a) && !isNil(b)) {
         // 数据健全兼容，用户数据不全时，能够展示.
         return a.toString().localeCompare(b.toString(), 'zh') * sort;
       }
@@ -119,7 +124,7 @@ export const sortByCustom = (params: SortActionParams): string[] => {
 
 export const sortByFunc = (params: SortActionParams): string[] => {
   const { originValues, measureValues, sortParam, dataSet } = params;
-  const { sortFunc, sortFieldId } = sortParam;
+  const { sortFunc, sortFieldId, sortMethod } = sortParam;
 
   const sortResult = sortFunc({
     data: measureValues,
@@ -145,7 +150,9 @@ export const sortByFunc = (params: SortActionParams): string[] => {
       originValues,
     });
   }
-  return sortResult;
+
+  // 用户返回的 sortResult 可能是不全的，需要用原始数据补全
+  return mergeDataWhenASC(sortResult, originValues, isAscSort(sortMethod));
 };
 
 export const sortByMethod = (params: SortActionParams): string[] => {
diff --git a/packages/s2-core/src/utils/text.ts b/packages/s2-core/src/utils/text.ts
index d2e70ddd8d..e7d45b6e09 100644
--- a/packages/s2-core/src/utils/text.ts
+++ b/packages/s2-core/src/utils/text.ts
@@ -8,10 +8,12 @@ import {
   isString,
   memoize,
   reverse,
+  size,
   toString,
   trim,
   values,
 } from 'lodash';
+import type { SimpleBBox } from '@antv/g-canvas';
 import type { ColCell } from '../cell';
 import { CellTypes, EMPTY_PLACEHOLDER } from '../common/constant';
 import type {
@@ -19,15 +21,18 @@ import type {
   Condition,
   MultiData,
   S2CellType,
+  SimpleDataItem,
   ViewMeta,
 } from '../common/interface';
 import type { Padding, TextTheme } from '../common/interface/theme';
-import { renderText } from '../utils/g-renders';
+import { renderIcon, renderRect, renderText } from '../utils/g-renders';
 import { getOffscreenCanvas } from './canvas';
 import { renderMiniChart } from './g-mini-charts';
+import { getMaxTextWidth, getTextAndFollowingIconPosition } from './cell/cell';
 
 /**
  * 计算文本在画布中的宽度
+ * @deprecated 已废弃，1.30.0 版本后移除。该方法计算宽度不准确，请使用 spreadsheet 实例上的同名方法
  */
 export const measureTextWidth = memoize(
   (text: number | string = '', font: unknown): number => {
@@ -53,11 +58,13 @@ export const measureTextWidth = memoize(
  * 算法（减少每次 measureText 的长度，measureText 的性能跟字符串时间相关）：
  * 1. 先通过 STEP 逐步计算，找到最后一个小于 maxWidth 的字符串
  * 2. 然后对最后这个字符串二分计算
+ * @param measureTextWidth 文本宽度预估函数
  * @param text 需要计算的文本, 由于历史原因 除了支持string，还支持空值,number和数组等
  * @param maxWidth
  * @param font
  */
 export const getEllipsisTextInner = (
+  measureTextWidth: (text: number | string, font: unknown) => number,
   text: any,
   maxWidth: number,
   font: CSSStyleDeclaration,
@@ -148,6 +155,7 @@ export const getEllipsisTextInner = (
  * 然后分别乘以中文、符号的宽度
  * @param text
  * @param font
+ * @deprecated 已废弃，1.30.0 版本后移除。该方法计算宽度不准确，请使用 spreadsheet 实例上的同名方法
  */
 export const measureTextWidthRoughly = (text: any, font: any = {}): number => {
   const alphaWidth = measureTextWidth('a', font);
@@ -171,18 +179,21 @@ export const measureTextWidthRoughly = (text: any, font: any = {}): number => {
 
 /**
  * @desc 改良版 获取文本的 ... 文本（可传入 优先文本片段）
+ * @param measureTextWidth 文本长度计算函数
  * @param text 需要计算的文本
  * @param maxWidth
  * @param font optional 文本字体 或 优先显示的文本
  * @param priority optional 优先显示的文本
  */
 export const getEllipsisText = ({
+  measureTextWidth,
   text,
   maxWidth,
   fontParam,
   priorityParam,
   placeholder,
 }: {
+  measureTextWidth: (text: number | string, font: unknown) => number;
   text: string | number;
   maxWidth: number;
   fontParam?: unknown;
@@ -201,6 +212,7 @@ export const getEllipsisText = ({
   }
   if (!priority || !priority.length) {
     return getEllipsisTextInner(
+      measureTextWidth,
       finalText,
       maxWidth,
       font as CSSStyleDeclaration,
@@ -253,6 +265,7 @@ export const getEllipsisText = ({
       // fix-边界处理: when subWidth <= DOT_WIDTH 不做 ... 处理
       if (remainWidth < subWidth && subWidth > DOT_WIDTH) {
         const ellipsis = getEllipsisTextInner(
+          measureTextWidth,
           subText,
           remainWidth,
           font as CSSStyleDeclaration,
@@ -372,6 +385,54 @@ export const getEmptyPlaceholder = (
   return isFunction(placeHolder) ? placeHolder(meta) : placeHolder;
 };
 
+/**
+ * @desc 获取多指标情况下每一个指标的内容包围盒
+ * --------------------------------------------
+ * |  text icon  |  text icon  |  text icon  |
+ * |-------------|-------------|-------------|
+ * |  text icon  |  text icon  |  text icon  |
+ * --------------------------------------------
+ * @param box SimpleBBox 整体绘制内容包围盒
+ * @param texts  SimpleDataItem[][] 指标集合
+ * @param widthPercent number[] 每行指标的宽度百分比
+ */
+export const getContentAreaForMultiData = (
+  box: SimpleBBox,
+  textValues: SimpleDataItem[][],
+  widthPercent: number[],
+) => {
+  const { x, y, width, height } = box;
+  const avgHeight = height / size(textValues);
+  const boxes: SimpleBBox[][] = [];
+  let curX: number;
+  let curY: number;
+  let avgWidth: number;
+  let totalWidth = 0;
+
+  for (let i = 0; i < size(textValues); i++) {
+    curY = y + avgHeight * i;
+    const rows: SimpleBBox[] = [];
+    curX = x;
+    totalWidth = 0;
+    for (let j = 0; j < size(textValues[i]); j++) {
+      avgWidth = !isEmpty(widthPercent)
+        ? width * (widthPercent[j] / 100)
+        : width / size(textValues[0]); // 指标个数相同，任取其一即可
+
+      curX = calX(x, { left: 0, right: 0 }, totalWidth, 'left');
+      totalWidth += avgWidth;
+      rows.push({
+        x: curX,
+        y: curY,
+        width: avgWidth,
+        height: avgHeight,
+      });
+    }
+    boxes.push(rows);
+  }
+  return boxes;
+};
+
 /**
  * @desc draw text shape of object
  * @param cell
@@ -383,18 +444,19 @@ export const drawObjectText = (
   multiData?: MultiData,
   useCondition = true,
 ) => {
-  const { x } = cell.getTextAndIconPosition(0).text;
   const {
+    x,
     y,
     height: totalTextHeight,
     width: totalTextWidth,
   } = cell.getContentArea();
   const text = multiData || (cell.getMeta().fieldValue as MultiData);
   const { values: textValues } = text;
-  const { options } = cell?.getMeta().spreadsheet;
+  const { options, measureTextWidth } = cell.getMeta().spreadsheet;
   const { valuesCfg } = options.style.cellCfg;
   // 趋势分析表默认只作用一个条件（因为指标挂行头，每列都不一样，直接在回调里判断是否需要染色即可）
   const textCondition = options?.conditions?.text?.[0];
+  const iconCondition = options?.conditions?.icon?.[0];
 
   if (!isArray(textValues)) {
     renderMiniChart(textValues, cell);
@@ -403,21 +465,22 @@ export const drawObjectText = (
 
   const widthPercent = valuesCfg?.widthPercent;
 
-  const realHeight = totalTextHeight / (textValues.length + 1);
   let labelHeight = 0;
   // 绘制单元格主标题
   if (text?.label) {
     const dataCellStyle = cell.getStyle(CellTypes.DATA_CELL);
     const labelStyle = dataCellStyle.bolderText;
-    const { padding } = dataCellStyle.cell;
-    labelHeight = realHeight / 2;
+    // TODO 把padding计算在内
+    // const { padding } = dataCellStyle.cell;
+    labelHeight = totalTextHeight / (textValues.length + 1);
 
     renderText(
       cell,
       [],
-      calX(x, padding),
-      y + labelHeight,
+      x,
+      y + labelHeight / 2,
       getEllipsisText({
+        measureTextWidth,
         text: text.label,
         maxWidth: totalTextWidth,
         fontParam: labelStyle,
@@ -428,21 +491,30 @@ export const drawObjectText = (
 
   // 绘制指标
   const { cellStyle, textStyle } = getDrawStyle(cell);
-  const { textAlign } = textStyle;
-  const { padding } = cellStyle.cell;
+
+  const iconStyle = cellStyle?.icon;
+  const iconCfg = iconCondition &&
+    iconCondition.mapping && {
+      size: iconStyle?.size,
+      margin: iconStyle?.margin,
+      position: iconCondition?.position,
+    };
 
   let curText: string | number;
-  let curX: number;
-  let curY: number = y + realHeight / 2;
-  let avgWidth: number;
-  let totalWidth = 0;
+
+  const contentBoxes = getContentAreaForMultiData(
+    {
+      x,
+      y: y + labelHeight,
+      height: totalTextHeight - labelHeight,
+      width: totalTextWidth,
+    },
+    textValues,
+    widthPercent,
+  );
+
   for (let i = 0; i < textValues.length; i++) {
-    curY = y + realHeight * (i + 1) + labelHeight; // 加上label的高度
-    totalWidth = 0;
     const measures = clone(textValues[i]);
-    if (textAlign === 'right') {
-      reverse(measures); // 右对齐拿到的x坐标为最右坐标，指标顺序需要反过来
-    }
 
     for (let j = 0; j < measures.length; j++) {
       curText = measures[j];
@@ -456,30 +528,55 @@ export const drawObjectText = (
             textCondition,
           })
         : textStyle;
-      avgWidth = !isEmpty(widthPercent)
-        ? totalTextWidth * (widthPercent[j] / 100)
-        : totalTextWidth / text.values[0].length; // 指标个数相同，任取其一即可
-
-      curX = calX(x, padding, totalWidth, textAlign);
-      totalWidth += avgWidth;
       const { placeholder } = cell?.getMeta().spreadsheet.options;
       const emptyPlaceholder = getEmptyPlaceholder(
         cell?.getMeta(),
         placeholder,
       );
+
+      const maxTextWidth = getMaxTextWidth(contentBoxes[i][j].width, iconStyle);
+      const ellipsisText = getEllipsisText({
+        measureTextWidth,
+        text: curText,
+        maxWidth: maxTextWidth,
+        fontParam: curStyle,
+        placeholder: emptyPlaceholder,
+      });
+      const actualTextWidth = measureTextWidth(ellipsisText, textStyle);
+
+      const position = getTextAndFollowingIconPosition(
+        contentBoxes[i][j],
+        textStyle,
+        actualTextWidth,
+        iconCfg,
+        iconCondition ? 1 : 0,
+      );
+
       renderText(
         cell,
         [],
-        curX,
-        curY,
-        getEllipsisText({
-          text: curText,
-          maxWidth: avgWidth,
-          fontParam: curStyle,
-          placeholder: emptyPlaceholder,
-        }),
+        position.text.x,
+        position.text.y,
+        ellipsisText,
         curStyle,
       );
+
+      if (iconCondition && useCondition) {
+        const attrs = iconCondition?.mapping(curText, {
+          rowIndex: i,
+          colIndex: j,
+          meta: cell?.getMeta() as ViewMeta,
+        });
+        if (attrs) {
+          renderIcon(cell, {
+            ...position.icon,
+            name: attrs.icon,
+            width: iconStyle?.size,
+            height: iconStyle?.size,
+            fill: attrs.fill,
+          });
+        }
+      }
     }
   }
 };
diff --git a/packages/s2-react/CHANGELOG.md b/packages/s2-react/CHANGELOG.md
index d099ca13ec..19b490b26f 100644
--- a/packages/s2-react/CHANGELOG.md
+++ b/packages/s2-react/CHANGELOG.md
@@ -1,6 +1,5 @@
 # [@antv/s2-react-v1.22.0-alpha.4](https://github.com/antvis/S2/compare/@antv/s2-react-v1.22.0-alpha.3...@antv/s2-react-v1.22.0-alpha.4) (2022-07-21)
 
-
 ### Bug Fixes
 
 * **strategysheet:** 修复子弹图颜色显示错误 & 百分比精度问题 ([#1588](https://github.com/antvis/S2/issues/1588)) ([c4bb48c](https://github.com/antvis/S2/commit/c4bb48cbe128b47e3574af903142934fd7452846))
diff --git a/packages/s2-react/__tests__/data/strategy-data.ts b/packages/s2-react/__tests__/data/strategy-data.ts
index 2d0d236b02..8a6309cc5a 100644
--- a/packages/s2-react/__tests__/data/strategy-data.ts
+++ b/packages/s2-react/__tests__/data/strategy-data.ts
@@ -265,7 +265,7 @@ export const StrategySheetDataConfig: S2DataConfig = {
   meta: [
     {
       field: 'date',
-      name: '时间',
+      name: '日期',
     },
   ],
   fields: {
@@ -398,6 +398,23 @@ export const StrategyOptions: S2Options = {
         },
       },
     ],
+    icon: [
+      {
+        position: 'right',
+        mapping(value, cellInfo) {
+          return isUpDataValue(value)
+            ? {
+                // icon 用于指定图标条件格式所使用的 icon 类型
+                icon: 'CellUp',
+                fill: '#29A294',
+              }
+            : {
+                icon: 'CellDown',
+                fill: '#FF4D4F',
+              };
+        },
+      },
+    ],
   },
   style: {
     cellCfg: {
diff --git a/packages/s2-react/__tests__/spreadsheet/strategy-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/strategy-sheet-spec.tsx
index a19fe51ef7..c747015c1c 100644
--- a/packages/s2-react/__tests__/spreadsheet/strategy-sheet-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/strategy-sheet-spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
-import { copyData, type PivotSheet } from '@antv/s2';
+import { copyData, SpreadSheet } from '@antv/s2';
 import {
   StrategySheetDataConfig,
   StrategyOptions,
@@ -21,7 +21,8 @@ describe('Spread Sheet Tests', () => {
     });
 
     test('should export correct data of strategy sheet', () => {
-      let s2Instance: PivotSheet;
+      let s2Instance: SpreadSheet;
+
       act(() => {
         ReactDOM.render(
           <SheetComponent
@@ -37,14 +38,14 @@ describe('Spread Sheet Tests', () => {
       });
 
       // 角头部分展示如下：
-      // ["", "","时间"]
+      // ["", "","日期"]
       // ["", "","数值"]
       const result = copyData(s2Instance, '\t');
 
       const rows = result.split('\n');
       const corner1 = rows[0].split('\t').slice(0, 3);
       const corner2 = rows[1].split('\t').slice(0, 3);
-      expect(corner1).toEqual(['', '', `"时间"`]);
+      expect(corner1).toEqual(['', '', `"日期"`]);
       expect(corner2).toEqual(['', '', `"数值"`]);
     });
   });
diff --git a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx
index 37384b776a..627739a3b3 100644
--- a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx
@@ -10,7 +10,6 @@ import {
   S2Event,
   type S2Options,
   SpreadSheet,
-  type S2WheelEvent,
   TableSheet,
 } from '@antv/s2';
 import { getContainer, getMockData, sleep } from '../util/helpers';
@@ -255,9 +254,9 @@ describe('table sheet normal spec', () => {
       s2.facet.onWheel({
         deltaX: 0,
         deltaY: 0,
-        layerX: 0,
-        layerY: 0,
-      } as S2WheelEvent);
+        offsetX: 0,
+        offsetY: 0,
+      } as unknown as WheelEvent);
     });
   });
 });
diff --git a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx
index 76cdcfee38..e0d1508e3f 100644
--- a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx
+++ b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx
@@ -35,7 +35,7 @@ describe('<SheetComponent/> Tests', () => {
             <SheetComponent
               sheetType={sheetType}
               options={{ width: 200, height: 200 }}
-              dataCfg={null}
+              dataCfg={null as unknown as S2DataConfig}
             />,
             container,
           );
@@ -48,8 +48,8 @@ describe('<SheetComponent/> Tests', () => {
 
   describe('<StrategySheet/> Tests', () => {
     const renderStrategySheet = (
-      options: SheetComponentsProps['options'],
-      dataCfg: S2DataConfig = null,
+      options: SheetComponentsProps['options'] | null,
+      dataCfg?: S2DataConfig,
     ) => {
       act(() => {
         ReactDOM.render(
@@ -62,7 +62,7 @@ describe('<SheetComponent/> Tests', () => {
               },
               options,
             )}
-            dataCfg={dataCfg}
+            dataCfg={dataCfg as S2DataConfig}
             getSpreadSheet={(instance) => {
               s2 = instance;
             }}
@@ -94,6 +94,7 @@ describe('<SheetComponent/> Tests', () => {
       };
 
       const s2DataConfig: S2DataConfig = {
+        data: [],
         fields: {
           rows: [],
           customTreeItems: [
@@ -116,6 +117,7 @@ describe('<SheetComponent/> Tests', () => {
       };
 
       const s2DataConfig: S2DataConfig = {
+        data: [],
         fields: {
           values: ['a'],
         },
@@ -191,5 +193,29 @@ describe('<SheetComponent/> Tests', () => {
         '9.78%',
       ]);
     });
+
+    test('should format corner date field', () => {
+      renderStrategySheet(
+        {
+          width: 600,
+          height: 600,
+        },
+        {
+          ...StrategySheetDataConfig,
+          meta: [
+            {
+              field: 'date',
+              name: '日期',
+            },
+          ],
+        },
+      );
+
+      const textList = s2.facet.cornerHeader
+        .getChildren()
+        .map((element) => (element as any).actualText);
+
+      expect(textList).toEqual(['数值', '日期']);
+    });
   });
 });
diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
index a4fb64dacc..7282bab73b 100644
--- a/packages/s2-react/playground/config.ts
+++ b/packages/s2-react/playground/config.ts
@@ -2,7 +2,6 @@ import { isUpDataValue } from '@antv/s2';
 import type { S2DataConfig, S2Options } from '@antv/s2';
 import { getBaseSheetComponentOptions } from '@antv/s2-shared';
 import type { SliderSingleProps } from 'antd';
-import { isNil } from 'lodash';
 import {
   data,
   totalData,
@@ -41,7 +40,11 @@ export const s2Options: S2Options = {
       trend: true,
     },
   },
+  hierarchyType: 'grid',
   style: {
+    rowCfg: {
+      width: 200,
+    },
     cellCfg: {
       height: 50,
     },
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
index e927f72251..24c929c3bc 100644
--- a/packages/s2-react/playground/index.tsx
+++ b/packages/s2-react/playground/index.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable no-console */
 import {
   customMerge,
@@ -14,6 +16,7 @@ import {
   type TooltipAutoAdjustBoundary,
   getLang,
   type InteractionOptions,
+  DEFAULT_STYLE,
 } from '@antv/s2';
 import type { Adaptive, SheetType } from '@antv/s2-shared';
 import corePkg from '@antv/s2/package.json';
@@ -59,6 +62,9 @@ import {
 import './index.less';
 import { ResizeConfig } from './resize';
 
+// @ts-ignore
+window.__g_instances__ = [];
+
 const { TabPane } = Tabs;
 
 const fieldMap = {
@@ -770,7 +776,7 @@ function MainLayout() {
                 <Switch
                   checkedChildren="打开链接跳转"
                   unCheckedChildren="无链接跳转"
-                  checked={mergedOptions.interaction.linkFields.length}
+                  checked={!!mergedOptions.interaction.linkFields.length}
                   onChange={(checked) => {
                     updateOptions({
                       interaction: {
@@ -779,6 +785,20 @@ function MainLayout() {
                     });
                   }}
                 />
+                <Switch
+                  checkedChildren="隐藏列头"
+                  unCheckedChildren="显示列头"
+                  checked={mergedOptions.style?.colCfg?.height === 0}
+                  onChange={(checked) => {
+                    updateOptions({
+                      style: {
+                        colCfg: {
+                          height: checked ? 0 : DEFAULT_STYLE.colCfg.height,
+                        },
+                      },
+                    });
+                  }}
+                />
               </Space>
             </Collapse.Panel>
             <Collapse.Panel header="交互配置" key="interaction">
@@ -887,6 +907,7 @@ function MainLayout() {
               ref={s2Ref}
               themeCfg={themeCfg}
               partDrillDown={partDrillDown}
+              showPagination={showPagination}
               header={{
                 title: (
                   <a href="https://github.com/antvis/S2">
@@ -910,8 +931,15 @@ function MainLayout() {
                 exportCfg: { open: true },
                 advancedSortCfg: { open: true },
               }}
+              getSpreadSheet={(s2) => {
+                // @ts-ignore
+                window.s2 = s2;
+                // @ts-ignore
+                window.__g_instances__ = [s2.container];
+              }}
               onDataCellTrendIconClick={logHandler('onDataCellTrendIconClick')}
               onAfterRender={logHandler('onAfterRender')}
+              onRangeSort={logHandler('onRangeSort')}
               onDestroy={logHandler('onDestroy')}
               onColCellClick={onColCellClick}
               onRowCellClick={logHandler('onRowCellClick')}
@@ -934,8 +962,7 @@ function MainLayout() {
                 });
               }}
               onDataCellClick={logHandler('onDataCellClick')}
-              onLayoutResizeMouseDown={logHandler('onLayoutResizeMouseDown')}
-              onLayoutResizeMouseUp={logHandler('onLayoutResizeMouseUp')}
+              onLayoutResize={logHandler('onLayoutResize')}
               onCopied={logHandler('onCopied')}
               onLayoutColsHidden={logHandler('onLayoutColsHidden')}
               onLayoutColsExpanded={logHandler('onLayoutColsExpanded')}
@@ -952,7 +979,10 @@ function MainLayout() {
         </TabPane>
         <TabPane tab="自定义目录树" key="customTree">
           <SheetComponent
-            dataCfg={{ data: dataCustomTrees, fields: customTreeFields }}
+            dataCfg={{
+              data: dataCustomTrees,
+              fields: customTreeFields,
+            }}
             options={{ width: 600, height: 480, hierarchyType: 'customTree' }}
           />
         </TabPane>
@@ -962,6 +992,10 @@ function MainLayout() {
             dataCfg={strategyDataCfg}
             options={StrategyOptions}
             onRowCellClick={logHandler('onRowCellClick')}
+            getSpreadSheet={(s2) => {
+              // @ts-ignore
+              window.__g_instances__ = [s2.container];
+            }}
             header={{
               title: '趋势分析表',
               description: '支持子弹图',
@@ -994,6 +1028,10 @@ function MainLayout() {
             sheetType="gridAnalysis"
             dataCfg={mockGridAnalysisDataCfg}
             options={mockGridAnalysisOptions}
+            getSpreadSheet={(s2) => {
+              // @ts-ignore
+              window.__g_instances__ = [s2.container];
+            }}
           />
         </TabPane>
       </Tabs>
diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-col-cell.ts b/packages/s2-react/src/components/sheets/strategy-sheet/custom-col-cell.ts
index 6a7b2f1079..9ecd47021e 100644
--- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-col-cell.ts
+++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-col-cell.ts
@@ -5,6 +5,7 @@ import {
   Node,
   safeJsonParse,
   SpreadSheet,
+  type MultiData,
 } from '@antv/s2';
 import { isArray } from 'lodash';
 
@@ -25,12 +26,17 @@ export class CustomColCell extends ColCell {
   }
 
   protected drawTextShape() {
-    const fieldValue = this.getMeta()?.value;
-    const values = safeJsonParse(fieldValue);
-    if (isArray(values)) {
-      drawObjectText(this, { values: [values] }, false);
-    } else {
-      super.drawTextShape();
+    const meta = this.getMeta();
+    const value = safeJsonParse(meta?.value) as MultiData;
+
+    if (!isArray(value)) {
+      return super.drawTextShape();
     }
+
+    const { formattedValue } = this.getFormattedFieldValue();
+    const displayValues =
+      formattedValue !== meta?.value ? [[formattedValue]] : [value];
+
+    drawObjectText(this, { values: displayValues }, false);
   }
 }
diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.less b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.less
index adda298f5c..3c439dd35a 100644
--- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.less
+++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.less
@@ -44,6 +44,7 @@
 
     .header-label {
       font-weight: 700;
+      margin-right: 20px;
     }
   }
 
diff --git a/packages/s2-shared/src/utils/resize.ts b/packages/s2-shared/src/utils/resize.ts
index 95ad9b5468..3c94d95a0c 100644
--- a/packages/s2-shared/src/utils/resize.ts
+++ b/packages/s2-shared/src/utils/resize.ts
@@ -1,20 +1,24 @@
-import { debounce } from 'lodash';
+import { debounce, isBoolean } from 'lodash';
 import { RESIZE_RENDER_DELAY } from '../constant/resize';
 import type { Adaptive, ResizeEffectParams } from '../interface';
 
 export const analyzeAdaptive = (
-  paramsContainer: HTMLElement,
+  defaultContainer: HTMLElement,
   adaptive?: Adaptive,
 ) => {
-  let container = paramsContainer;
-  let adaptiveWidth = true;
-  let adaptiveHeight = false;
-  if (typeof adaptive !== 'boolean') {
-    container = adaptive?.getContainer?.() || paramsContainer;
-    adaptiveWidth = adaptive?.width ?? true;
-    adaptiveHeight = adaptive?.height ?? true;
+  if (isBoolean(adaptive)) {
+    return {
+      container: defaultContainer,
+      adaptiveWidth: true,
+      adaptiveHeight: false,
+    };
   }
-  return { container, adaptiveWidth, adaptiveHeight };
+
+  return {
+    container: adaptive?.getContainer?.() || defaultContainer,
+    adaptiveWidth: adaptive?.width ?? true,
+    adaptiveHeight: adaptive?.height ?? true,
+  };
 };
 
 export const createResizeObserver = (params: ResizeEffectParams) => {
diff --git a/packages/s2-vue/CHANGELOG.md b/packages/s2-vue/CHANGELOG.md
index ffccb7b94e..4e5deb13b4 100644
--- a/packages/s2-vue/CHANGELOG.md
+++ b/packages/s2-vue/CHANGELOG.md
@@ -1,6 +1,5 @@
 # [@antv/s2-vue-v1.2.0-alpha.1](https://github.com/antvis/S2/compare/@antv/s2-vue-v1.1.0...@antv/s2-vue-v1.2.0-alpha.1) (2022-07-18)
 
-
 ### Bug Fixes
 
 * s2-vue 保持和react组件一致的tooltip summary渲染逻辑 ([#1576](https://github.com/antvis/S2/issues/1576)) ([32135f7](https://github.com/antvis/S2/commit/32135f7f5a3cb2be8183d313bccdfaef2d3ceebd))
diff --git a/packages/s2-vue/playground/App.vue b/packages/s2-vue/playground/App.vue
index b94c05130c..690685f601 100644
--- a/packages/s2-vue/playground/App.vue
+++ b/packages/s2-vue/playground/App.vue
@@ -639,7 +639,12 @@ export default defineComponent({
     const onRowCellClick = (params: any) => {
       console.log('row cell click: ', params);
     };
-
+    const onDataCellClick = (params: any) => {
+      console.log('data Cell Click: ', params)
+    }
+    const onColCellClick = (params: any) => {
+      console.log('col cell click: ', params)
+    }
     const onGetSpreadsheet = (params: any) => {
       console.log('getSpreadsheet: ', params);
     };
@@ -668,6 +673,8 @@ export default defineComponent({
       options,
       themeCfg,
       onRowCellClick,
+      onDataCellClick,
+      onColCellClick,
       onGetSpreadsheet,
       togglePagination,
       partDrillDown,
@@ -728,6 +735,8 @@ export default defineComponent({
     :partDrillDown="partDrillDown"
     @rowCellClick="onRowCellClick"
     @getSpreadSheet="onGetSpreadsheet"
+    @dataCellClick="onDataCellClick"
+    @colCellClick="onColCellClick"
   />
 </template>
 
diff --git a/packages/s2-vue/src/components/sheets/pivot-sheet.vue b/packages/s2-vue/src/components/sheets/pivot-sheet.vue
index be1d4339cb..700437824d 100644
--- a/packages/s2-vue/src/components/sheets/pivot-sheet.vue
+++ b/packages/s2-vue/src/components/sheets/pivot-sheet.vue
@@ -5,17 +5,15 @@ import { buildDrillDownOptions, handleDrillDown } from '@antv/s2-shared';
 import type { SpreadSheet, S2Options } from '@antv/s2';
 import type { PartDrillDown, ActionIconCallbackParams } from '@antv/s2-shared';
 import { useExpose } from '../../hooks/useExpose';
-import {
-  initBaseSheetEmits,
-  initBaseSheetProps,
-} from '../../utils/initPropAndEmits';
+import type { BaseSheetInitEmits } from '../../interface';
+import { initBaseSheetProps } from '../../utils/initPropAndEmits';
 import DrillDown from '../drill-down/index.vue';
 import BaseSheet from './base-sheet.vue';
 
 export default defineComponent({
   name: 'PivotSheet',
   props: initBaseSheetProps(),
-  emits: initBaseSheetEmits(),
+  emits: [] as unknown as BaseSheetInitEmits,
   setup(props, ctx) {
     const s2Ref = useExpose(ctx.expose);
     const { options: pivotOptions } = toRefs(props);
diff --git a/packages/s2-vue/src/utils/initPropAndEmits.ts b/packages/s2-vue/src/utils/initPropAndEmits.ts
index e7326113d0..4592106ebc 100644
--- a/packages/s2-vue/src/utils/initPropAndEmits.ts
+++ b/packages/s2-vue/src/utils/initPropAndEmits.ts
@@ -169,7 +169,8 @@ export const initBaseSheetEmits = () => {
     'selected',
     'reset',
     'linkFieldJump',
-
+    'click',
+    'doubleClick',
     'scroll',
   ];
   return keys as unknown as BaseSheetInitEmits;
diff --git a/s2-site/docs/api/basic-class/base-facet.zh.md b/s2-site/docs/api/basic-class/base-facet.zh.md
index fe6ce84434..a685ae22ae 100644
--- a/s2-site/docs/api/basic-class/base-facet.zh.md
+++ b/s2-site/docs/api/basic-class/base-facet.zh.md
@@ -51,15 +51,15 @@ s2.facet.xx()
 | getRealWidth | 获取实际渲染的宽度 | () => number |
 | getRealHeight | 获取实际渲染的高度 | () => number |
 | clearAllGroup | 清空所有 Group | () => void |
-| isScrollOverThePanelArea | 是否在数值区域滚动 | (options: { layerX: number, layerY: number }) => boolean |
-| isScrollOverTheCornerArea | 是否在角头区域滚动 | (options: { layerX: number, layerY: number }) => boolean |
+| isScrollOverThePanelArea | 是否在数值区域滚动 | (options: { offsetX: number, offsetY: number }) => boolean |
+| isScrollOverTheCornerArea | 是否在角头区域滚动 | (options: { offsetX: number, offsetY: number }) => boolean |
 | isScrollToLeft | 是否滚动到了最左边 | (deltaX: number) => boolean |
 | isScrollToRight | 是否滚动到了最右边 | (deltaX: number) => boolean |
 | isScrollToTop | 是否滚动到了顶部 | (deltaY: number) => boolean |
 | isScrollToBottom | 是否滚动到了底部 |  (deltaY: number) => boolean|
 | isVerticalScrollOverTheViewport | 是否在数值单元格区域垂直滚动 | (deltaY: number) => boolean |
 | isHorizontalScrollOverTheViewport | 是否在数值单元格区域水平滚动 | (deltaX: number) => boolean |
-| isScrollOverTheViewport | 是否在数值单元格区域滚动 | (deltaX: number, deltaY: number, layerY: number) => boolean |
+| isScrollOverTheViewport | 是否在数值单元格区域滚动 | (deltaX: number, deltaY: number, offsetY: number) => boolean |
 | cancelScrollFrame | 取消当前滚动帧 | () => void |
 | clearScrollFrameIdOnMobile | 取消当前滚动帧 （移动端） | () => void |
 | addCell | 添加单元格 | (cell: [BaseCell](/zh/docs/api/basic-class/base-cell)) => void |
diff --git a/s2-site/docs/api/basic-class/interaction.zh.md b/s2-site/docs/api/basic-class/interaction.zh.md
index a92fa049b3..c0b673905f 100644
--- a/s2-site/docs/api/basic-class/interaction.zh.md
+++ b/s2-site/docs/api/basic-class/interaction.zh.md
@@ -9,48 +9,48 @@ order: 2
 s2.interaction.xx()
 ```
 
-| 参数 | 说明 | 类型 |
-| --- | --- | --- |
-| spreadsheet | 表格实例 | [SpreadSheet](/zh/docs/api/basic-class/spreadsheet) |
-| interactions | 当前已注册的交互 | `Map<string, BaseEvent>` |
-| intercept | 当前拦截的交互，防止不同交互之间冲突 | `Set<Intercept>` |
-| destroy | 卸载所有交互实例，并重置为初始状态 | `() => void` |
-| reset | 重置所有交互 | `() => void` |
-| setState | 设置状态 | (data: [InteractionStateInfo](#interactionstateinfo)) => void |
-| getState | 获取当前状态 | `() => void` |
-| resetState | 重置为初始状态 | `() => void` |
-| clearState | 清空状态，并重绘 | `() => void` |
-| changeState | 更新状态 |  (data: [InteractionStateInfo](#interactionstateinfo)) => void |
-| setInteractedCells | 设置当前发生改变的单元格 | (cell: [S2CellType](#s2celltype)) => void |
-| getInteractedCells | 获取当前发生改变的单元格 | () => [S2CellType](#s2celltype)[] |
-| getCurrentStateName | 获取当前状态名 | `() => void` |
-| isEqualStateName | 是否是相同的状态名 | `(name: InteractionStateName) => void` |
-| isSelectedState | 是否是选中状态 | `() => void` |
-| isHoverState | 是否是悬停状态 | `() => void` |
-| isHoverFocusState | 是否是悬停聚焦状态 （悬停在单元格 `focusTime`: 默认 800ms 后） | `() => void` |
-| isSelectedCell | 是否是选中的单元格 | (cell: [S2CellType](#s2celltype)) => void |
-| isActiveCell | 是否是激活的单元格 | (cell: [S2CellType](#s2celltype)) => void |
-| getCells | 获取当前 interaction 记录的 Cells 元信息列表，包括不在视口内的格子 | `() => Partial<ViewMeta>[]` |
-| getActiveCells | 获取当前在可视区域的单元格实例 | `() => S2CellType[]` |
-| clearStyleIndependent | 清除单元格样式 | `() => void` |
-| getPanelGroupAllUnSelectedDataCells | 获取可视区域内选中的数值单元格 | `() => DataCell[]` |
-| getPanelGroupAllDataCells | 获取可视区域内的所有数值单元格 | `() => DataCell[]` |
-| getAllRowHeaderCells | 获取行头单元格 | `() => RowCell[]` |
-| getAllColHeaderCells | 获取列头单元格 | `() => ColCell[]` |
-| getRowColActiveCells | 获取行头和列头激活的单元格 | `() => RowCell[] | ColCell[]` |
-| getAllCells | 获取所有单元格 | () => [S2CellType](#s2celltype)[] |
-| selectAll | 选中所有单元格 | `() => void` |
-| selectHeaderCell | 选中指定行列头单元格 | (selectHeaderCellInfo: [SelectHeaderCellInfo](#selectheadercellinfo)) => boolean |
-| getCellChildrenNodes | 获取当前单元格的所以子节点 | (cell: [S2CellType](#s2celltype)) => [Node]((/zh/docs/api/basic-class/node))[] |
+| 参数 | 说明                                               | 类型 |
+| --- |--------------------------------------------------| --- |
+| spreadsheet | 表格实例                                             | [SpreadSheet](/zh/docs/api/basic-class/spreadsheet) |
+| interactions | 当前已注册的交互                                         | `Map<string, BaseEvent>` |
+| intercept | 当前拦截的交互，防止不同交互之间冲突                               | `Set<Intercept>` |
+| destroy | 卸载所有交互实例，并重置为初始状态                                | `() => void` |
+| reset | 重置所有交互                                           | `() => void` |
+| setState | 设置状态                                             | (data: [InteractionStateInfo](#interactionstateinfo)) => void |
+| getState | 获取当前状态                                           | `() => void` |
+| resetState | 重置为初始状态                                          | `() => void` |
+| clearState | 清空状态，并重绘                                         | `() => void` |
+| changeState | 更新状态                                             |  (data: [InteractionStateInfo](#interactionstateinfo)) => void |
+| setInteractedCells | 设置当前发生改变的单元格                                     | (cell: [S2CellType](#s2celltype)) => void |
+| getInteractedCells | 获取当前发生改变的单元格                                     | () => [S2CellType](#s2celltype)[] |
+| getCurrentStateName | 获取当前状态名                                          | `() => void` |
+| isEqualStateName | 是否是相同的状态名                                        | `(name: InteractionStateName) => void` |
+| isSelectedState | 是否是选中状态                                          | `() => void` |
+| isHoverState | 是否是悬停状态                                          | `() => void` |
+| isHoverFocusState | 是否是悬停聚焦状态 （悬停在单元格 `focusTime`: 默认 800ms 后）       | `() => void` |
+| isSelectedCell | 是否是选中的单元格                                        | (cell: [S2CellType](#s2celltype)) => void |
+| isActiveCell | 是否是激活的单元格                                        | (cell: [S2CellType](#s2celltype)) => void |
+| getCells | 获取当前 interaction 记录的 Cells 元信息列表，包括不在视口内的格子      | `() => Partial<ViewMeta>[]` |
+| getActiveCells | 获取当前在可视区域的单元格实例                                  | `() => S2CellType[]` |
+| clearStyleIndependent | 清除单元格样式                                          | `() => void` |
+| getPanelGroupAllUnSelectedDataCells | 获取可视区域内选中的数值单元格                                  | `() => DataCell[]` |
+| getPanelGroupAllDataCells | 获取可视区域内的所有数值单元格                                  | `() => DataCell[]` |
+| getAllRowHeaderCells | 获取行头单元格                                          | `() => RowCell[]` |
+| getAllColHeaderCells | 获取列头单元格                                          | `() => ColCell[]` |
+| getRowColActiveCells | 获取行头和列头激活的单元格                                    | `() => RowCell[] | ColCell[]` |
+| getAllCells | 获取所有可视区域内的单元格                                    | () => [S2CellType](#s2celltype)[] |
+| selectAll | 选中所有单元格                                          | `() => void` |
+| selectHeaderCell | 选中指定行列头单元格                                       | (selectHeaderCellInfo: [SelectHeaderCellInfo](#selectheadercellinfo)) => boolean |
+| getCellChildrenNodes | 获取当前单元格的所以子节点                                    | (cell: [S2CellType](#s2celltype)) => [Node]((/zh/docs/api/basic-class/node))[] |
 | hideColumns | 隐藏列 (forceRender 为 `false` 时，隐藏列为空的情况下，不再触发表格更新） | `(hiddenColumnFields: string[], forceRender?: boolean = true) => void` |
-| mergeCells | 合并单元格 | (cellsInfo?: [MergedCellInfo](#mergedcellinfo)[], hideData?: boolean) => void |
-| unmergeCells | 取消合并单元格 | `(removedCells: MergedCell[]) => void` |
-| updatePanelGroupAllDataCells | 更新所有数值单元格 | `() => void` |
-| updateCells | 更新指定单元格 | (cells: [S2CellType](#s2celltype)[]) => void |
-| addIntercepts | 新增交互拦截 | (interceptTypes: [InterceptType](#intercepttype)[]) => void |
-| hasIntercepts | 是否有指定拦截的交互 | (interceptTypes: [InterceptType](#intercepttype)[]) => boolean |
-| removeIntercepts | 移除指定交互拦截 | (interceptTypes: [InterceptType](#intercepttype)[]) => void |
-| highlightNodes | 高亮节点对应的单元格 | (nodes: [Node](/zh/docs/api/basic-class/node)[]) => void |
+| mergeCells | 合并单元格                                            | (cellsInfo?: [MergedCellInfo](#mergedcellinfo)[], hideData?: boolean) => void |
+| unmergeCells | 取消合并单元格                                          | `(removedCells: MergedCell[]) => void` |
+| updatePanelGroupAllDataCells | 更新所有数值单元格                                        | `() => void` |
+| updateCells | 更新指定单元格                                          | (cells: [S2CellType](#s2celltype)[]) => void |
+| addIntercepts | 新增交互拦截                                           | (interceptTypes: [InterceptType](#intercepttype)[]) => void |
+| hasIntercepts | 是否有指定拦截的交互                                       | (interceptTypes: [InterceptType](#intercepttype)[]) => boolean |
+| removeIntercepts | 移除指定交互拦截                                         | (interceptTypes: [InterceptType](#intercepttype)[]) => void |
+| highlightNodes | 高亮节点对应的单元格                                       | (nodes: [Node](/zh/docs/api/basic-class/node)[]) => void |
 
 `markdown:docs/common/interaction.zh.md`
 
diff --git a/s2-site/docs/api/components/header.en.md b/s2-site/docs/api/components/header.en.md
index 2c8e7ce09e..ade73e7d38 100644
--- a/s2-site/docs/api/components/header.en.md
+++ b/s2-site/docs/api/components/header.en.md
@@ -1,5 +1,5 @@
 ---
-title: header
+title: Header
 order: 4
 ---
 
diff --git a/s2-site/docs/api/components/sheet-component.zh.md b/s2-site/docs/api/components/sheet-component.zh.md
index 14330daa40..013964a1b3 100644
--- a/s2-site/docs/api/components/sheet-component.zh.md
+++ b/s2-site/docs/api/components/sheet-component.zh.md
@@ -24,7 +24,7 @@ order: 0
 | loading | 控制表格的加载状态 | `boolean` |  |  |
 | header | 表头配置项 | [HeaderCfgProps](/zh/docs/api/components/header) |  |  |
 | getSpreadSheet | 获取表实例 [详情](/zh/docs/manual/advanced/get-instance) | (spreadsheet: [SpreadSheet](/zh/docs/api/basic-class/spreadsheet)) => void; |  |  |
-| onRangeSort | 组内排序时触发回调事件 | (params: [SortParams](#sortparams) ) => void; |  |  |
+| onRangeSort | 组内排序时触发回调事件 | (params: [SortParam[]](#sortparam) ) => void; |  |  |
 | onRowCellHover | 行头鼠标悬停事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | onRowCellClick | 行头鼠标单击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | onRowCellDoubleClick | 行头鼠标双击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
@@ -60,7 +60,7 @@ order: 0
 | onMergedCellsMouseDown | 合并单元格按下事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | onMergedCellsMouseUp | 合并单元格松开事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | onMergedCellsMouseMove | 合并单元格移动事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
-| onRangeSort | 组内排序时触发回调事件（暂只支持透视表） | (params: [SortParams](#sortparams) ) => void; |  |  |
+| onRangeSort | 组内排序时触发回调事件（暂只支持透视表） | (params: [SortParam[]](#sortparam) ) => void; |  |  |
 | onRangeSorted | 组内排序结束触发回调事件（暂只支持透视表） | (event: CanvasEvent ) => void; |  |  |
 | onRangeFilter | 筛选时触发回调事件 | (data: { filterKey: string; filteredValues: string[] } ) => void; |  |  |
 | onRangeFiltered | 筛选结束触发回调事件 | (data: DataType[] ) => void; |  |  |
@@ -123,7 +123,7 @@ order: 0
 | :-- | :-- | :-- | :-- | :-: |
 | spreadsheet | 自定义表 | (container: `HTMLElement | string`, dataCfg:  [S2DataConfig](/zh/docs/api/general/S2DataConfig), options: [S2Options](/zh/docs/api/general/S2Options)) => [SpreadSheet](/zh/docs/api/basic-class/spreadsheet) |  |  |
 | getSpreadSheet | 获取表实例 [详情](/zh/docs/manual/advanced/get-instance) | (spreadsheet: [SpreadSheet](/zh/docs/api/basic-class/spreadsheet)) => void; |  |  |
-| rangeSort | 组内排序时触发回调事件 | (params: [SortParams](#sortparams) ) => void; |  |  |
+| rangeSort | 组内排序时触发回调事件 | (params: [SortParam[]](#sortparam) ) => void; |  |  |
 | rowCellClick | 行头鼠标单击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | rowCellHover | 行头鼠标悬停事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | rowCellClick | 行头鼠标单击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
@@ -160,7 +160,7 @@ order: 0
 | mergedCellsMouseDown | 合并单元格按下事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | mergedCellsMouseUp | 合并单元格松开事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | mergedCellsMouseMove | 合并单元格移动事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
-| rangeSort | 组内排序时触发回调事件（暂只支持透视表） | (params: [SortParams](#sortparams) ) => void; |  |  |
+| rangeSort | 组内排序时触发回调事件（暂只支持透视表） | (params: [SortParam[]](#sortparam) ) => void; |  |  |
 | rangeSorted | 组内排序结束触发回调事件（暂只支持透视表） | (event: CanvasEvent ) => void; |  |  |
 | rangeFilter | 筛选时触发回调事件 | (data: { filterKey: string; filteredValues: string[] } ) => void; |  |  |
 | rangeFiltered | 筛选结束触发回调事件 | (data: DataType[] ) => void; |  |  |
@@ -209,7 +209,7 @@ order: 0
 | event | 事件 | [Event](#) |  |  |
 | viewMeta | 当前节点信息 | [Node](/zh/docs/api/basic-class/node) |  |  |
 
-`markdown:docs/common/sort-params.zh.md`
+`markdown:docs/common/sort-param.zh.md`
 
 ## CellScrollPosition
 
@@ -217,8 +217,8 @@ order: 0
 
 | 参数        | 说明         | 类型   | 默认值 | 必选 |
 | :---------- | :----------- | :----- | :----- | :--: |
-| scrollX     | 水平方向滚动偏移量  | `number` |        |      |
-| scrollY     | 垂直方向滚动偏移量  | `number` |        |      |
+| scrollX     | 水平方向滚动偏移量(相对滚动条轨道长度)  | `number` |        |      |
+| scrollY     | 垂直方向滚动偏移量(相对滚动条轨道长度)  | `number` |        |      |
 
 ## HiddenColumnsInfo
 
@@ -231,28 +231,27 @@ order: 0
 
 ## ResizeParams
 
-功能描述：表格 resize（ 表体尺寸大小变化、单元格行高列宽拖动变化） 信息
+功能描述：表格 resize（单元格行高列宽拖动变化）和单元格样式信息
 
 | 参数 | 说明 | 类型 | 默认值 | 必选 |
 | :-- | :-- | :-- | :-- | :-: |
-| resizeInfo | resize 配置信息 | [ResizeInfo](#resizeinfo) |  |  |
+| info | resize 配置信息 | [ResizeInfo](#resizeinfo) |  |  |
 | style | options 中样式相关配置 | [style](/zh/docs/api/general/S2Options#style) |  |  |
 
 ## ResizeInfo
 
-功能描述：表格 resize（ 表体尺寸大小变化、单元格行高列宽拖动变化） 配置信息
+功能描述：表格 resize（ 单元格行高列宽拖动变化）配置信息
 
 | 参数 | 说明 | 类型 | 默认值 | 必选 |
 | :-- | :-- | :-- | :-- | :-: |
-| theme | resize 热区配置 | [ResizeArea](#resizearea) |  | ✓ |
-| type | resize 方向 | `Horizontal` \| `Vertical` |  | ✓ |
-| offsetX | 横向偏移量 | `number` |  | ✓ |
-| offsetY | 纵向偏移量 | `number` |  | ✓ |
-| offsetX | 横向偏移量 | `number` |  | ✓ |
-| width | 拖拽的宽度 | `number` |  | ✓ |
-| height | 拖拽 | `number` |  | ✓ |
-| size | 热区尺寸 | `number` |  | ✓ |
-| effect | 拖拽更改影响的区域 | `Field` \| `Cell` \| `Tree` \| `Series` |  | ✓ |
+| theme | resize 热区配置 | [ResizeArea](#resizearea) |  |  |
+| type | resize 方向 | `Horizontal` \| `Vertical` |  |  |
+| offsetX | 横向偏移量 | `number` |  |  |
+| offsetY | 纵向偏移量 | `number` |  |  |
+| width | 拖拽的宽度 | `number` |  |  |
+| height | 拖拽 | `number` |  |  |
+| size | 热区尺寸 | `number` |  |  |
+| effect | 拖拽更改影响的区域 | `Field` \| `Cell` \| `Tree` \| `Series` |  |  |
 | isResizeArea | 是否属于 resize 热区 | [style](/zh/docs/api/general/S2Options#style) |  |  |
 | id | 字段 id | `string` |  |  |
 | meta | resize 热区对应单元格节点信息 | [Node](/zh/docs/api/basic-class/node) |  |  |
diff --git a/s2-site/docs/api/general/S2DataConfig.zh.md b/s2-site/docs/api/general/S2DataConfig.zh.md
index e9adcd7205..1cf3806079 100644
--- a/s2-site/docs/api/general/S2DataConfig.zh.md
+++ b/s2-site/docs/api/general/S2DataConfig.zh.md
@@ -5,7 +5,7 @@ redirect_from:
   - /zh/docs/api
 ---
 
-数据映射，description
+表格数据配置
 
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | :------------- | :----------------- | :--------- | :----- | :--- |
@@ -13,7 +13,7 @@ redirect_from:
 | fields         | 维度指标       | [Fields](#fields) |    |   ✓     |
 | totalData        | 总计/小计数据       | [Data[]](#data) |    |      |
 | meta    | 字段元数据，可配置字段别名和数值格式化 | [Meta[]](#meta)  |  |       |
-| sortParams    | 排序参数配置 | [SortParams](#sortparams)  |  |       |
+| sortParams    | 排序参数配置 | [SortParam[]](#sortparam)  |  |       |
 
 ### Data
 
@@ -68,7 +68,7 @@ array object **必选**,_default：null_
 | field  | 字段 id | `string` | |    |
 | name | 字段名称 | `string`|  |   |
 | description | 字段描述，会显示在行头、列头、单元格对应的 tooltip 中 | `string`|  |   |
-| formatter | 格式化 <br/> 单元格、行头和列头支持格式化，角头不支持格式化。只有单元格存在第二个参数。 <br/>数值字段：一般用于格式化数字单位<br/>文本字段：一般用于做字段枚举值的别名<br/> 第二个参数在以下情况会传入：data cell 格式化，复制/导出，tooltip 展示（**且仅在选择多个单元格时，data 类型为数组**） | `(value: unknown, data?: Data | Data[]) => string` | | |
+| formatter | 格式化 <br/> 单元格、行头和列头支持格式化，角头不支持格式化。只有单元格存在第二个参数。 <br/>数值字段：一般用于格式化数字单位<br/>文本字段：一般用于做字段枚举值的别名<br/> 第二个参数在以下情况会传入：data cell 格式化，复制/导出，tooltip 展示（**且仅在选择多个单元格时，data 类型为数组**） | `(value: unknown, data?: Data | Data[], meta?: Node | ViewMeta) => string` | | |
 
 ### MultiData
 
@@ -83,6 +83,6 @@ object **必选**,_default：null_
 | label        | 用作单元格小标题，单独占一行展示    | `string` |    |      |
 | [key: string]       | 其他透传字段，用于自定义单元格的定制化展示       | `unknown` | ``   |      |
 
-`markdown:docs/common/sort-params.zh.md`
+`markdown:docs/common/sort-param.zh.md`
 
 `markdown:docs/common/custom/customTreeItem.zh.md`
diff --git a/s2-site/docs/api/general/S2Event.en.md b/s2-site/docs/api/general/S2Event.en.md
new file mode 100644
index 0000000000..9d03069a80
--- /dev/null
+++ b/s2-site/docs/api/general/S2Event.en.md
@@ -0,0 +1,6 @@
+---
+title: S2Event
+order: 4
+---
+
+`markdown:docs/api/general/S2Event.zh.md`
diff --git a/s2-site/docs/api/general/S2Event.zh.md b/s2-site/docs/api/general/S2Event.zh.md
new file mode 100644
index 0000000000..0d6d12675b
--- /dev/null
+++ b/s2-site/docs/api/general/S2Event.zh.md
@@ -0,0 +1,101 @@
+---
+title: S2Event
+order: 4
+redirect_from:
+  - /zh/docs/api
+---
+
+表格事件列表，可以根据实际需要，监听所需事件，实现自定义业务。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/common/constant/events/basic.ts)
+
+```ts
+s2.on(S2Event.ROW_CELL_CLICK, () => {
+  ...
+});
+```
+
+### 行头
+
+| 名称         | 事件名                                | 描述                       |
+| :----------- | :------------------------------------ | :------------------------- |
+| 展开树状结构 | `S2Event.ROW_CELL_COLLAPSE_TREE_ROWS` | 树状结构下，行头单元格展开 |
+| 点击         | `S2Event.ROW_CELL_CLICK`              | 行头单元格点击             |
+| 双击         | `S2Event.ROW_CELL_DOUBLE_CLICK`       | 行头单元格双击             |
+| 右键         | `S2Event.ROW_CELL_CONTEXT_MENU`       | 行头单元格右键             |
+| 悬停         | `S2Event.ROW_CELL_HOVER`              | 行头单元格悬停             |
+| 鼠标按下     | `S2Event.ROW_CELL_MOUSE_DOWN`         | 行头单元格鼠标按下         |
+| 鼠标移动     | `S2Event.ROW_CELL_MOUSE_MOVE`         | 行头单元格鼠标移动         |
+| 鼠标松开     | `S2Event.ROW_CELL_MOUSE_UP`           | 行头单元格鼠标松开         |
+| 滚动         | `S2Event.ROW_CELL_SCROLL`            | 行头单元格滚动         |
+
+### 列头
+
+| 名称     | 事件名                          | 描述               |
+| :------- | :------------------------------ | :----------------- |
+| 点击     | `S2Event.COL_CELL_CLICK`        | 列头单元格点击     |
+| 双击     | `S2Event.COL_CELL_DOUBLE_CLICK` | 列头单元格双击     |
+| 右键     | `S2Event.COL_CELL_CONTEXT_MENU` | 列头单元格右键     |
+| 悬停     | `S2Event.COL_CELL_HOVER`        | 列头单元格悬停     |
+| 鼠标按下 | `S2Event.COL_CELL_MOUSE_DOWN`   | 列头单元格鼠标按下 |
+| 鼠标移动 | `S2Event.COL_CELL_MOUSE_MOVE`   | 列头单元格鼠标移动 |
+| 鼠标松开 | `S2Event.COL_CELL_MOUSE_UP`     | 列头单元格鼠标松开 |
+
+### 数值单元格
+
+| 名称           | 事件名                               | 描述                                    |
+| :------------- | :----------------------------------- | :-------------------------------------- |
+| 点击           | `S2Event.DATA_CELL_CLICK`            | 数值单元格点击                          |
+| 双击           | `S2Event.DATA_CELL_DOUBLE_CLICK`     | 数值单元格双击                          |
+| 右键           | `S2Event.DATA_CELL_CONTEXT_MENU`      | 数值单元格右键                          |
+| 悬停           | `S2Event.DATA_CELL_HOVER`            | 数值单元格悬停                          |
+| 鼠标按下       | `S2Event.DATA_CELL_MOUSE_DOWN`       | 数值单元格鼠标按下                      |
+| 鼠标移动       | `S2Event.DATA_CELL_MOUSE_MOVE`       | 数值单元格鼠标移动                      |
+| 鼠标松开       | `S2Event.DATA_CELL_MOUSE_UP`         | 数值单元格鼠标松开                      |
+| 趋势 icon 点击 | `S2Event.DATA_CELL_TREND_ICON_CLICK` | 数值单元格 tooltip 里面的趋势 icon 点击 |
+| 刷选           | `S2Event.DATA_CELL_BRUSH_SELECTION`  | 数值单元格刷选                          |
+
+### 角头
+
+| 名称     | 事件名                             | 描述               |
+| :------- | :--------------------------------- | :----------------- |
+| 点击     | `S2Event.CORNER_CELL_CLICK`        | 角头单元格点击     |
+| 双击     | `S2Event.CORNER_CELL_DOUBLE_CLICK` | 角头单元格双击     |
+| 右键     | `S2Event.CORNER_CELL_CONTEXT_MENU` | 角头单元格右键     |
+| 悬停     | `S2Event.CORNER_CELL_HOVER`        | 角头单元格悬停     |
+| 鼠标按下 | `S2Event.CORNER_CELL_MOUSE_DOWN`   | 角头单元格鼠标按下 |
+| 鼠标移动 | `S2Event.CORNER_CELL_MOUSE_MOVE`   | 角头单元格鼠标移动 |
+| 鼠标松开 | `S2Event.CORNER_CELL_MOUSE_UP`     | 角头单元格鼠标松开 |
+
+### 布局
+
+| 名称                     | 事件名                             | 描述                                        |
+| :----------------------- | :--------------------------------- | :------------------------------------------ |
+| 单元格调整               | `S2Event.LAYOUT_RESIZE`            | 单元格宽高发生改变                          |
+| 调整单元格大小时鼠标按下 | `S2Event.LAYOUT_RESIZE_MOUSE_DOWN` | 调整单元格大小鼠标按下，目前仅 行/列 头有效 |
+| 调整单元格大小时鼠标移动 | `S2Event.LAYOUT_RESIZE_MOUSE_MOVE` | 调整单元格大小鼠标移动，目前仅 行/列 头有效 |
+| 调整单元格大小时鼠标松开 | `S2Event.LAYOUT_RESIZE_MOUSE_UP`   | 调整单元格大小鼠标松开，目前仅 行/列 头有效 |
+| 行头宽度改变             | `S2Event.LAYOUT_RESIZE_ROW_WIDTH`  |                                             |
+| 行头高度改变             | `S2Event.LAYOUT_RESIZE_ROW_HEIGHT` |                                             |
+| 列头宽度改变             | `S2Event.LAYOUT_RESIZE_COL_WIDTH`  |                                             |
+| 列头高度改变             | `S2Event.LAYOUT_RESIZE_COL_HEIGHT` |                                             |
+| 树状结构宽度改变         | `S2Event.LAYOUT_RESIZE_TREE_WIDTH` | 树状模式下，单元格宽度发生改变时触发        |
+| 列头展开                 | `S2Event.LAYOUT_COLS_EXPANDED`     | 列头展开时触发                  |
+| 列头隐藏                 | `S2Event.LAYOUT_COLS_HIDDEN`       | 列头隐藏时触发                  |
+| 单元格虚拟滚动                 | `S2Event.LAYOUT_CELL_SCROLL`       | 已废弃，请使用 `S2Event.GLOBAL_SCROLL` 替代               |
+
+### 全局
+
+| 名称      | 事件名                             | 描述                                         |
+| :-------- | :--------------------------------- | :------------------------------------------- |
+| 键盘按下  | `S2Event.GLOBAL_KEYBOARD_DOWN`     | 键盘按下                                     |
+| 键盘松开  | `S2Event.GLOBAL_KEYBOARD_UP`       | 键盘松开                                     |
+| 复制      | `S2Event.GLOBAL_COPIED`            | 对选中的单元格复制                           |
+| 鼠标松开  | `S2Event.GLOBAL_MOUSE_UP`          | 图表区域鼠标松开                             |
+| 点击      | `S2Event.GLOBAL_CLICK`             | 图表区域点击                                 |
+| 右键      | `S2Event.GLOBAL_CONTEXT_MENU`      | 图表区域按下右键                             |
+| 选中      | `S2Event.GLOBAL_SELECTED`          | 选中单元格时，如：刷选，多选，单选           |
+| 悬停      | `S2Event.GLOBAL_HOVER`             | 鼠标悬停在单元格                             |
+| 重置      | `S2Event.GLOBAL_RESET`             | 点击空白处，按下 Esc 键 重置交互样式时       |
+| 链接跳转  | `S2Event.GLOBAL_LINK_FIELD_JUMP`   | 点击行列头被编辑为链接字段的文本时           |
+| icon 点击 | `S2Event.GLOBAL_ACTION_ICON_CLICK` | 单元格右侧的操作 icon 点击时，比如：排序图标 |
+| icon 悬停 | `S2Event.GLOBAL_ACTION_ICON_HOVER` | 单元格右侧的操作 icon 悬停时，比如：排序图标 |
+| 滚动      | `S2Event.GLOBAL_SCROLL`            | 表格滚动 （含数值和行头单元格） |
diff --git a/s2-site/docs/api/general/S2Options.zh.md b/s2-site/docs/api/general/S2Options.zh.md
index 0bd4481414..aa5db85a13 100644
--- a/s2-site/docs/api/general/S2Options.zh.md
+++ b/s2-site/docs/api/general/S2Options.zh.md
@@ -3,6 +3,8 @@ title: S2Options
 order: 1
 ---
 
+表格参数配置
+
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | :-- | :-- | :-: | :--  | :-- | --- |
 | width | `number` |    | 600  | 表格宽度 |
@@ -180,8 +182,4 @@ DataSet = (spreadsheet: SpreadSheet) => BaseDataSet;
 
 ## MergedCellInfo
 
-| 参数            | 说明                 | 类型                   | 默认值 | 必选 |
-| --------------- | ------------------ | ---------------------- | ------ | ---- |
-| colIndex        | 单元格的列索引        | `number`               | -      |      |
-| rowIndex        | 单元格的行索引        | `number`               | -      |      |
-| showText        | 合并单元格是否展示当前单元格的 meta 信息，只需要对一个单元格进行标识，</br>若未对单元格进行标识，会默认使用第一个选中点击的单元格的 meta 信息 | `booelan`      | -      |      |
+`markdown:docs/common/merged-cell.zh.md`
diff --git a/s2-site/docs/api/graphic.zh.md b/s2-site/docs/api/graphic.zh.md
index 0222570847..7c92aff545 100644
--- a/s2-site/docs/api/graphic.zh.md
+++ b/s2-site/docs/api/graphic.zh.md
@@ -5,7 +5,7 @@ redirect_from:
   - /en/docs/api
 ---
 
-S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图引擎。一些图形的样式配置，如单元格的 `fill`属性，`stroke`属性，以及绘制字体的`fontFamily`和`fontSize`等，都是直接透传 [AntV/G 的绘图属性](https://g.antv.vision/zh/docs/api/shape/attrs)。
+S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图引擎。一些图形的样式配置，如单元格的 `fill` 属性，`stroke` 属性，以及绘制字体的 `fontFamily` 和 `fontSize` 等，都是直接透传 [AntV/G 的绘图属性](https://g.antv.vision/zh/docs/api/shape/attrs)。
 
 这里对 S2 常用的绘图属性进行简单介绍：
 
@@ -13,9 +13,9 @@ S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图
 
 | 属性名        | 类型            |    功能描述                                                                                                      |
 | ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ |
-| fill          | `string`          | 图形背景的填充颜色，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理)                                                                                               |
+| fill          | `string`          | 图形背景的填充颜色，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                                                               |
 | fillOpacity   | `number`          | 图形背景的填充透明度                                                                                             |
-| stroke        | `string`          | 图形描边，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理)                                                  |
+| stroke        | `string`          | 图形描边，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                  |
 | lineWidth     | `number`          | 图形描边宽度                                                                                               |
 | lineDash      | `[number,number]` | 图形描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离 |
 | lineOpacity   | `number`          | 图形描边描边透明度                                                                                                   |
@@ -30,7 +30,7 @@ S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图
 
 | 属性名        | 类型              | 功能描述                                                                                                   |
 | ------------- | ----------------- | ------------------------------------------------------------------------------------------------------ |
-| stroke        | `string`          | 线段颜色，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理)                                                |
+| stroke        | `string`          | 线段颜色，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                |
 | lineWidth     | `number`          | 线段宽度                                                                                                   |
 | lineDash      | `[number,number]` | 线段虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离|
 | opacity       | `number`          | 线段透明度                                                                                                 |
@@ -50,9 +50,9 @@ S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图
 | lineHeight    | `number`          | 文字的行高                                                                                                   |
 | textAlign     | `center` \| `left` \| `right` \| `start` \| `end`          | 设置文本内容的对齐方式 |
 | textBaseline  | `top` \| `middle` \| `bottom` \| `alphabetic` \| `hanging`          | 设置在绘制文本时使用的当前文本基线|
-| fill          | `string`          | 文字填充颜色，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理)                                                                             |
+| fill          | `string`          | 文字填充颜色，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                                             |
 | fillOpacity   | `number`          | 文字填充透明度                                                                                             |
-| stroke        | `string`          | 文字描边，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理)                                                                            |
+| stroke        | `string`          | 文字描边，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                                            |
 | lineWidth     | `number`          | 文字描边宽度                                                                                               |
 | lineDash      | `[number,number]` | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离 |
 | lineOpacity   | `number`          | 描边透明度                                                                                                   |
@@ -71,7 +71,7 @@ S2 提供线性渐变，环形渐变两种形式
 
 <img alt="linear" src="https://gw.alipayobjects.com/zos/rmsportal/ieWkhtoHOijxweuNFWdz.png" width="600">
 
-* `l` 表示使用线性渐变，即*linear gradient*，绿色的字体为变量，可自定义
+* `l` 表示使用线性渐变，即 *linear gradient*，绿色的字体为变量，可自定义
 * 颜色变量可采用 16 进制或者 rgb(a) 形式
 
 示例：
@@ -89,7 +89,7 @@ fill: `l(0) 0:#95F0FF 1:#3A9DBF`,
 
 <img alt="radial" src="https://gw.alipayobjects.com/zos/rmsportal/qnvmbtSBGxQlcuVOWkdu.png" width="600">
 
-* `r` 表示使用放射状渐变，即*radial gradient*，绿色的字体为变量，可自定义
+* `r` 表示使用放射状渐变，即 *radial gradient*，绿色的字体为变量，可自定义
 * 圆的 `x`， `y`， `r` 值均为相对值，0 至 1 范围
 * 颜色变量可采用 16 进制或者 rgb(a) 形式
 
@@ -110,8 +110,8 @@ fill: 'r(0.5, 0.5, 1) 0:#ffffff 0.5:#1890ff';
 
 <img alt="radial" src="https://gw.alipayobjects.com/zos/rmsportal/NjtjUimlJtmvXljsETAJ.png" width="600">
 
-* `p`表示使用纹理，即*pattern*，绿色的字体为变量，可自定义
-* 重复方式有以下4种：
+* `p`表示使用纹理，即 *pattern*，绿色的字体为变量，可自定义
+* 重复方式有以下 4 种：
   * `a`: 该模式在水平和垂直方向重复
   * `x`: 该模式只在水平方向重复
   * `y`: 该模式只在垂直方向重复
diff --git a/s2-site/docs/common/interaction.zh.md b/s2-site/docs/common/interaction.zh.md
index 0f667532aa..7f19faa01e 100644
--- a/s2-site/docs/common/interaction.zh.md
+++ b/s2-site/docs/common/interaction.zh.md
@@ -5,26 +5,27 @@ order: 5
 
 ## Interaction
 
-| 参数                   | 说明                                                  | 类型                                                                                     | 默认值  | 必选  |
-| :--------------------- | ----------------------------------------------------- | :--------------------------------------------------------------------------------------- | :------ | :---: |
-| linkFields             | 标记字段为链接样式，用于外链跳转                      | `string[]`                                                                               |         |       |
-| selectedCellsSpotlight | 是否开启选中高亮聚光灯效果                            | `boolean`                                                                                | `false` |       |
-| hoverHighlight         | 鼠标悬停时高亮当前单元格，以及所对应的行头，列头      | `boolean`                                                                                | `true`  |       |
-| hoverFocus             | 鼠标悬停在当前单元格超过默认 800ms 后，保持当前高亮，显示 tooltip，悬停时间通过设置 `duration` 来控制     | `boolean | {duration: number}`                                                                                | `true`  |       |
-| hiddenColumnFields     | 用于配置默认隐藏的列，透视表需要配置列头唯一 id, 明细表配置列头 field 字段即可                                | `string[]`                                                                               |         |       |
-| enableCopy             | 是否允许复制                                          | `boolean`                                                                                | `false` |       |
-| copyWithFormat         | 是否使用 field format 格式复制                        | `boolean`                                                                                | `false` |       |
-| customInteractions     | 自定义交互 [详情](/zh/docs/manual/advanced/interaction/custom)                                          | [CustomInteraction[]](#custominteraction)                                                |         |       |
-| scrollSpeedRatio       | 用于控制滚动速率，分水平和垂直两个方向，默认为 1      | [ScrollSpeedRatio](#scrollspeedratio)                                |         |       |
-| autoResetSheetStyle    | 用于控制点击表格外区域和按下 esc 键时是否重置交互状态 | `boolean`                                                                                | `true`  |       |
-| resize                 | 用于控制 resize 热区是否显示                          | `boolean`   \| [ResizeInteractionOptions](#resizeinteractionoptions) | `true`  |       |
-| brushSelection                 | 是否允许刷选                         | `boolean` | `true`  |       |
-| multiSelection                 | 是否允许多选 （包含行头，列头，数值单元格）                         | `boolean` | `true`  |       |
-| rangeSelection                 | 是否允许区间快捷多选                         | `boolean` | `true`  |       |
-| scrollbarPosition | 用于控制滚动条展示在内容区边缘还是画布边缘 | `content`\| `canvas`  | `content`  |   |
-| eventListenerOptions | 事件监听函数 `addEventListener` 的 [可选项配置](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener), 可控制事件从冒泡阶段还是捕获阶段触发 | `false`  |   |
-| selectedCellHighlight                 | 是否高亮选中格子所在的行列头                         | `boolean` | `false`  |       |
-| overscrollBehavior | 控制滚动至边界的行为，可禁用浏览器的默认滚动行为。[详情](/zh/docs/manual/advanced/interaction/basic/#修改滚动至边界行为) | `auto` \| `contain` \| `none` \| null  |  `auto` |
+| 参数                                   | 说明                                                  | 类型                                                                                     | 默认值  | 必选  |
+|:-------------------------------------| ----------------------------------------- | :--------------------------------------------------------------------------------------- | :------ | :---: |
+| linkFields                           | 标记字段为链接样式，用于外链跳转                      | `string[]`                                                                               |         |       |
+| selectedCellsSpotlight               | 是否开启选中高亮聚光灯效果                            | `boolean`                                                                                | `false` |       |
+| hoverHighlight                       | 鼠标悬停时高亮当前单元格，以及所对应的行头，列头      | `boolean`                                                                                | `true`  |       |
+| hoverFocus                           | 鼠标悬停在当前单元格超过默认 800ms 后，保持当前高亮，显示 tooltip，悬停时间通过设置 `duration` 来控制     | `boolean | {duration: number}`                                                                                | `true`  |       |
+| hiddenColumnFields                   | 用于配置默认隐藏的列，透视表需要配置列头唯一 id, 明细表配置列头 field 字段即可                                | `string[]`                                                                               |         |       |
+| enableCopy                           | 是否允许复制                                          | `boolean`                                                                                | `false` |       |
+| copyWithHeader                       | 复制数据是否带表头信息                               | `boolean`                                                                                | `false` |       |
+| copyWithFormat                       | 是否使用 field format 格式复制                        | `boolean`                                                                                | `false` |       |
+| customInteractions                   | 自定义交互 [详情](/zh/docs/manual/advanced/interaction/custom)                                          | [CustomInteraction[]](#custominteraction)                                                |         |       |
+| scrollSpeedRatio                     | 用于控制滚动速率，分水平和垂直两个方向，默认为 1      | [ScrollSpeedRatio](#scrollspeedratio)                                |         |       |
+| autoResetSheetStyle                  | 用于控制点击表格外区域和按下 esc 键时是否重置交互状态 | `boolean`                                                                                | `true`  |       |
+| resize                               | 用于控制 resize 热区是否显示                          | `boolean`   \| [ResizeInteractionOptions](#resizeinteractionoptions) | `true`  |       |
+| brushSelection                       | 是否允许刷选                         | `boolean` | `true`  |       |
+| multiSelection                       | 是否允许多选 （包含行头，列头，数值单元格）                         | `boolean` | `true`  |       |
+| rangeSelection                       | 是否允许区间快捷多选                         | `boolean` | `true`  |       |
+| scrollbarPosition                    | 用于控制滚动条展示在内容区边缘还是画布边缘 | `content`\| `canvas`  | `content`  |   |
+| eventListenerOptions                 | 事件监听函数 `addEventListener` 的 [可选项配置](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener), 可控制事件从冒泡阶段还是捕获阶段触发 | `false`  |   |
+| selectedCellHighlight                | 是否高亮选中格子所在的行列头                         | `boolean` | `false`  |       |
+| overscrollBehavior                   | 控制滚动至边界的行为，可禁用浏览器的默认滚动行为。[详情](/zh/docs/manual/advanced/interaction/basic/#修改滚动至边界行为) | `auto` \| `contain` \| `none` \| null  |  `auto` |
 
 ### CustomInteraction
 
@@ -51,7 +52,7 @@ interface ScrollSpeedRatio {
 | rowCellVertical      | 是否开启行头垂直方向 resize 热区                                                   | `boolean`         | true   |       |
 | cornerCellHorizontal | 是否开启角头水平方向 resize 热区                                                   | `boolean`         | true   |       |
 | colCellHorizontal    | 是否开启列头水平方向 resize 热区                                                   | `boolean`         | true   |       |
-| colCellVertical      | 是否开启列头垂直方向 resize 热区                                                   | `boolean`         | true   |       |
+| colCellVertical      | 是否开启列头垂直方向 resize 热区 （列头隐藏时该配置无效）                                                   | `boolean`         | true   |       |
 | rowResizeType        | 用于控制行高 resize 时是同时对所有 Cell 生效，还是只对当前行生效。默认对所有行生效 | `all`\| `current` | `all`  |       |
 | disable        | 用于控制行高 resize 是否生效 查看例子 | (resizeInfo: [S2CellType](/zh/docs/api/components/sheet-component#resizeinfo)) => boolean |   |       |
 | visible        | 自定义当前单元格是否显示 resize 热区 | (cell: [S2CellType](/zh/docs/api/basic-class/base-cell)) => boolean |   |       |
diff --git a/s2-site/docs/common/merged-cell.en.md b/s2-site/docs/common/merged-cell.en.md
new file mode 100644
index 0000000000..a15c661413
--- /dev/null
+++ b/s2-site/docs/common/merged-cell.en.md
@@ -0,0 +1,5 @@
+---
+title: Merge-Cell
+order: 10
+---
+`markdown:docs/common/merge-cell.zh.md`
diff --git a/s2-site/docs/common/merged-cell.zh.md b/s2-site/docs/common/merged-cell.zh.md
new file mode 100644
index 0000000000..f8caf5a6f7
--- /dev/null
+++ b/s2-site/docs/common/merged-cell.zh.md
@@ -0,0 +1,14 @@
+---
+title: 合并单元
+order: 10
+---
+
+<description> **optional**  _MergedCellInfo[][]_   default: `undefined` </description>
+
+设置默认合并的单元格信息
+
+| 参数            | 说明                                                                             | 类型                   | 默认值 | 必选 |
+| --------------- |--------------------------------------------------------------------------------| ---------------------- | ------ | ---- |
+| colIndex        | 单元格的列索引                                                                        | `number`               | -      |      |
+| rowIndex        | 单元格的行索引                                                                        | `number`               | -      |      |
+| showText        | 设置 `showText: true` 时，则展示当前格子的 `meta` 信息为合并后单元格的 `meta`。<br/> 默认使用第一个选中点击的单元格。 | `booelan`      | -      |      |
diff --git a/s2-site/docs/common/pagination.zh.md b/s2-site/docs/common/pagination.zh.md
index 589ad4978d..757c29086e 100644
--- a/s2-site/docs/common/pagination.zh.md
+++ b/s2-site/docs/common/pagination.zh.md
@@ -10,5 +10,5 @@ boolean ｜ object **必选**,_default: null_ 功能描述： 分页配置
 | 参数      | 说明          | 类型   | 默认值 | 必选  |
 | --------- | ------------------- | ------ | ------ | :--:  |
 | pageSize  | 每页数量            | `number` | - |  ✓   |
-| current   | 当前页（从 1 开始） | `number` |       1      |     |
+| current   | 当前页（从 1 开始） | `number` |       1      |  ✓   |
 | total     | 数据总条数          | `number` | - |      |
diff --git a/s2-site/docs/common/sort-param.en.md b/s2-site/docs/common/sort-param.en.md
new file mode 100644
index 0000000000..32b4f014ae
--- /dev/null
+++ b/s2-site/docs/common/sort-param.en.md
@@ -0,0 +1,6 @@
+---
+title: SortParam
+order: 7
+---
+
+`markdown:docs/common/sort-param.zh.md`
diff --git a/s2-site/docs/common/sort-params.zh.md b/s2-site/docs/common/sort-param.zh.md
similarity index 98%
rename from s2-site/docs/common/sort-params.zh.md
rename to s2-site/docs/common/sort-param.zh.md
index 4f1483b390..1176d5047b 100644
--- a/s2-site/docs/common/sort-params.zh.md
+++ b/s2-site/docs/common/sort-param.zh.md
@@ -1,9 +1,9 @@
 ---
-title: SortParams
+title: SortParam
 order: 7
 ---
 
-### SortParams
+### SortParam
 
 | 参数          | 说明                                        | 类型                                  | 默认值 | 必选 |
 | :------------ | :------------------------------------------ | :------------------------------------ | ------ | :--- |
diff --git a/s2-site/docs/common/sort-params.en.md b/s2-site/docs/common/sort-params.en.md
deleted file mode 100644
index b0d943ad42..0000000000
--- a/s2-site/docs/common/sort-params.en.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: SortParams
-order: 7
----
-
-`markdown:docs/common/sort-params.zh.md`
diff --git a/s2-site/docs/common/style.zh.md b/s2-site/docs/common/style.zh.md
index 61b01abe17..7496236797 100644
--- a/s2-site/docs/common/style.zh.md
+++ b/s2-site/docs/common/style.zh.md
@@ -11,7 +11,7 @@ object **必选**,_default：null_ 功能描述：样式设置
 | --- | --- | :-:  | --- | --- | --- |
 | layoutWidthType | `adaptive` \| `colAdaptive`  \| `compact` |    |  | 单元格宽度布局类型<br> `adaptive` : 行列等宽，均分整个 `Canvas` 画布宽度 <br> `colAdaptive`：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度<br> `compact`：行列紧凑布局，指标维度少的时候无法布满整个画布 |
 | showTreeLeafNodeAlignDot | `boolean` |  |  false  | 树状模式下叶子节点是否显示层级占位点 |
-| treeRowsWidth | `number` |  |  120  | 树状模式行单元格宽度 （优先级大于 `rowCfg.width`) |
+| treeRowsWidth | `number` |  |  120  | 树状模式行单元格宽度 （优先级大于 `rowCfg.width` 和 `rowCfg.treeRowsWidth （已废弃）`) |
 | hierarchyCollapse | `boolean` |  |   `false` | 在树状结构模式下行头是否默认展开。 |
 | collapsedRows | `Record<string, boolean>` |  |  | 树状模式下行头自定义折叠、收起状态（透视表使用）。<br> key 值的生成需遵守指定的规则：'root[&] 行头维度值'。 [查看 demo](/zh/examples/basic/pivot#tree) |
 | cellCfg | [CellCfg](#cellcfg) |  |  |   单元格配置 |
@@ -48,6 +48,6 @@ object **必选**,_default：null_ 功能描述： 行样式配置
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --- | --- | --- | --- | :-:  |
 | width | 行单元格宽度，可根据当前行头节点动态设置宽度，如果是树状结构，请使用 `styles.treeRowsWidth` | `number | (rowNode: Node) => number` | 96 |  |
-| treeRowsWidth | 树状结构下，行单元格宽度 | `number` | 120 |  |
+| treeRowsWidth | 树状结构下，行单元格宽度 (**已废弃，请使用 `style.treeRowsWidth` 代替**) | `number` | 120 |  |
 | withByField | 根据 `field` 设置每行的宽度。`field` 是行的 id, [查看详情](/zh/docs/manual/advanced/custom/cell-size#%E8%B0%83%E6%95%B4%E8%A1%8C%E5%A4%B4%E5%8D%95%E5%85%83%E6%A0%BC%E5%AE%BD%E9%AB%98) | `Record<string, number>` | - |  |
 | heightByField | 根据 `field` 设置每行的高度。`field` 是行的 id, [查看详情](/zh/docs/manual/advanced/custom/cell-size#%E8%B0%83%E6%95%B4%E8%A1%8C%E5%A4%B4%E5%8D%95%E5%85%83%E6%A0%BC%E5%AE%BD%E9%AB%98) | `Record<string, number>` | - |  |
diff --git a/s2-site/docs/manual/advanced/interaction/basic.zh.md b/s2-site/docs/manual/advanced/interaction/basic.zh.md
index bc64d45343..13aca832fa 100644
--- a/s2-site/docs/manual/advanced/interaction/basic.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/basic.zh.md
@@ -40,104 +40,11 @@ order: 0
 - `layout:xx`: 布局改变事件
 - `cell:xx`:  单元格级别的事件，整个表格分为不同的单元格类型，你可以对特定的单元格进行事件监听，实现自定义需求
 
-[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/common/constant/events/basic.ts)
-
-<details>
-<summary>点击查看所有交互事件</summary>
-
-### 行头
-
-| 名称         | 事件名                                | 描述                       |
-| :----------- | :------------------------------------ | :------------------------- |
-| 展开树状结构 | `S2Event.ROW_CELL_COLLAPSE_TREE_ROWS` | 树状结构下，行头单元格展开 |
-| 点击         | `S2Event.ROW_CELL_CLICK`              | 行头单元格点击             |
-| 双击         | `S2Event.ROW_CELL_DOUBLE_CLICK`       | 行头单元格双击             |
-| 右键         | `S2Event.ROW_CELL_CONTEXT_MENU`       | 行头单元格右键             |
-| 悬停         | `S2Event.ROW_CELL_HOVER`              | 行头单元格悬停             |
-| 鼠标按下     | `S2Event.ROW_CELL_MOUSE_DOWN`         | 行头单元格鼠标按下         |
-| 鼠标移动     | `S2Event.ROW_CELL_MOUSE_MOVE`         | 行头单元格鼠标移动         |
-| 鼠标松开     | `S2Event.ROW_CELL_MOUSE_UP`           | 行头单元格鼠标松开         |
-| 滚动         | `S2Event.ROW_CELL_SCROLL`            | 行头单元格滚动         |
-
-### 列头
-
-| 名称     | 事件名                          | 描述               |
-| :------- | :------------------------------ | :----------------- |
-| 点击     | `S2Event.COL_CELL_CLICK`        | 列头单元格点击     |
-| 双击     | `S2Event.COL_CELL_DOUBLE_CLICK` | 列头单元格双击     |
-| 右键     | `S2Event.COL_CELL_CONTEXT_MENU` | 列头单元格右键     |
-| 悬停     | `S2Event.COL_CELL_HOVER`        | 列头单元格悬停     |
-| 鼠标按下 | `S2Event.COL_CELL_MOUSE_DOWN`   | 列头单元格鼠标按下 |
-| 鼠标移动 | `S2Event.COL_CELL_MOUSE_MOVE`   | 列头单元格鼠标移动 |
-| 鼠标松开 | `S2Event.COL_CELL_MOUSE_UP`     | 列头单元格鼠标松开 |
-
-### 数值单元格
-
-| 名称           | 事件名                               | 描述                                    |
-| :------------- | :----------------------------------- | :-------------------------------------- |
-| 点击           | `S2Event.DATA_CELL_CLICK`            | 数值单元格点击                          |
-| 双击           | `S2Event.DATA_CELL_DOUBLE_CLICK`     | 数值单元格双击                          |
-| 右键           | `S2Event.DATA_CELL_CONTEXT_MENU`      | 数值单元格右键                          |
-| 悬停           | `S2Event.DATA_CELL_HOVER`            | 数值单元格悬停                          |
-| 鼠标按下       | `S2Event.DATA_CELL_MOUSE_DOWN`       | 数值单元格鼠标按下                      |
-| 鼠标移动       | `S2Event.DATA_CELL_MOUSE_MOVE`       | 数值单元格鼠标移动                      |
-| 鼠标松开       | `S2Event.DATA_CELL_MOUSE_UP`         | 数值单元格鼠标松开                      |
-| 趋势 icon 点击 | `S2Event.DATA_CELL_TREND_ICON_CLICK` | 数值单元格 tooltip 里面的趋势 icon 点击 |
-| 刷选           | `S2Event.DATA_CELL_BRUSH_SELECTION`  | 数值单元格刷选                          |
-
-### 角头
-
-| 名称     | 事件名                             | 描述               |
-| :------- | :--------------------------------- | :----------------- |
-| 点击     | `S2Event.CORNER_CELL_CLICK`        | 角头单元格点击     |
-| 双击     | `S2Event.CORNER_CELL_DOUBLE_CLICK` | 角头单元格双击     |
-| 右键     | `S2Event.CORNER_CELL_CONTEXT_MENU` | 角头单元格右键     |
-| 悬停     | `S2Event.CORNER_CELL_HOVER`        | 角头单元格悬停     |
-| 鼠标按下 | `S2Event.CORNER_CELL_MOUSE_DOWN`   | 角头单元格鼠标按下 |
-| 鼠标移动 | `S2Event.CORNER_CELL_MOUSE_MOVE`   | 角头单元格鼠标移动 |
-| 鼠标松开 | `S2Event.CORNER_CELL_MOUSE_UP`     | 角头单元格鼠标松开 |
-
-### 布局
-
-| 名称                     | 事件名                             | 描述                                        |
-| :----------------------- | :--------------------------------- | :------------------------------------------ |
-| 单元格调整               | `S2Event.LAYOUT_RESIZE`            | 单元格宽高发生改变                          |
-| 调整单元格大小时鼠标按下 | `S2Event.LAYOUT_RESIZE_MOUSE_DOWN` | 调整单元格大小鼠标按下，目前仅 行/列 头有效 |
-| 调整单元格大小时鼠标移动 | `S2Event.LAYOUT_RESIZE_MOUSE_MOVE` | 调整单元格大小鼠标移动，目前仅 行/列 头有效 |
-| 调整单元格大小时鼠标松开 | `S2Event.LAYOUT_RESIZE_MOUSE_UP`   | 调整单元格大小鼠标松开，目前仅 行/列 头有效 |
-| 行头宽度改变             | `S2Event.LAYOUT_RESIZE_ROW_WIDTH`  |                                             |
-| 行头高度改变             | `S2Event.LAYOUT_RESIZE_ROW_HEIGHT` |                                             |
-| 列头宽度改变             | `S2Event.LAYOUT_RESIZE_COL_WIDTH`  |                                             |
-| 行头宽度改变             | `S2Event.LAYOUT_RESIZE_COL_HEIGHT` |                                             |
-| 树状结构宽度改变         | `S2Event.LAYOUT_RESIZE_TREE_WIDTH` | 树状模式下，单元格宽度发生改变时触发        |
-| 列头展开                 | `S2Event.LAYOUT_COLS_EXPANDED`     | 列头展开时触发，明细表有效                  |
-| 列头隐藏                 | `S2Event.LAYOUT_COLS_HIDDEN`       | 列头隐藏时触发，明细表有效                  |
-| 单元格虚拟滚动                 | `S2Event.LAYOUT_CELL_SCROLL`       | 已废弃，请使用 `S2Event.GLOBAL_SCROLL` 替代               |
-
-### 全局
-
-| 名称      | 事件名                             | 描述                                         |
-| :-------- | :--------------------------------- | :------------------------------------------- |
-| 键盘按下  | `S2Event.GLOBAL_KEYBOARD_DOWN`     | 键盘按下                                     |
-| 键盘松开  | `S2Event.GLOBAL_KEYBOARD_UP`       | 键盘松开                                     |
-| 复制      | `S2Event.GLOBAL_COPIED`            | 对选中的单元格复制                           |
-| 鼠标松开  | `S2Event.GLOBAL_MOUSE_UP`          | 图表区域鼠标松开                             |
-| 点击      | `S2Event.GLOBAL_CLICK`             | 图表区域点击                                 |
-| 右键      | `S2Event.GLOBAL_CONTEXT_MENU`      | 图表区域按下右键                             |
-| 选中      | `S2Event.GLOBAL_SELECTED`          | 选中单元格时，如：刷选，多选，单选           |
-| 悬停      | `S2Event.GLOBAL_HOVER`             | 鼠标悬停在单元格                             |
-| 重置      | `S2Event.GLOBAL_RESET`             | 点击空白处，按下 Esc 键 重置交互样式时       |
-| 链接跳转  | `S2Event.GLOBAL_LINK_FIELD_JUMP`   | 点击行列头被编辑为链接字段的文本时           |
-| icon 点击 | `S2Event.GLOBAL_ACTION_ICON_CLICK` | 单元格右侧的操作 icon 点击时，比如：排序图标 |
-| icon 悬停 | `S2Event.GLOBAL_ACTION_ICON_HOVER` | 单元格右侧的操作 icon 悬停时，比如：排序图标 |
-| 滚动      | `S2Event.GLOBAL_SCROLL`            | 表格滚动 （含数值和行头单元格） |
-
-</details>
-
-可以根据实际需要，监听所需事件，实现自定义业务
+[查看完整事件列表](/zh/docs/api/general/S2Event)
 
 ```ts
 import { PivotSheet, S2Event } from '@antv/s2';
+
 const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
 s2.on(S2Event.DATA_CELL_BRUSH_SELECTION, (cells) => {
@@ -154,7 +61,27 @@ s2.on(S2Event.GLOBAL_KEYBOARD_DOWN, (event) => {
 })
 ```
 
-如果使用的是 `@antv/s2-react`, 可以拿到 [S2 表格实例](/zh/docs/manual/advanced/get-instance/) 后对所需事件进行监听，和 `@antv/s2` 使用方式完全一致，同时 `react` 版本提供了事件的隐射，也可以使用更符合使用习惯的 `onXX` 的方式 ([查看所有 API](/zh/docs/api/components/sheet-component))
+如果使用的是 `@antv/s2-react` 或 `@antv/s2-vue`, 可以拿到 [S2 表格实例](/zh/docs/manual/advanced/get-instance/) 后对所需事件进行监听，和 `@antv/s2` **使用方式完全一致**
+
+```ts
+import { S2Event, SpreadSheet } from '@antv/s2'
+import { SheetComponent } from '@antv/s2-react';
+
+function App() {
+  const s2Ref = React.useRef<SpreadSheet>();
+
+  React.useEffect(() => {
+    s2Ref.current?.on(S2Event.DATA_CELL_CLICK, (event) => {
+      console.log('onDataCellClick: ', event)
+    })
+  }, [s2Ref])
+
+  return <SheetComponent ref={s2Ref}/>
+}
+
+```
+
+同时 `React`, `Vue` 版本提供了事件的隐射，也可以方便的使用更符合使用习惯的 `onDataCellClick`, `@dataCellClick` 的方式 ([查看所有 API](/zh/docs/api/components/sheet-component))
 
 ```ts
 import { SheetComponent } from '@antv/s2-react';
@@ -164,6 +91,14 @@ const onDataCellClick = () => {}
 <SheetComponent onDataCellClick={onDataCellClick} />
 ```
 
+```ts
+import { SheetComponent } from '@antv/s2-vue';
+
+const onDataCellClick = () => {}
+
+<SheetComponent @dataCellClick={onDataCellClick} />
+```
+
 对于全局图表事件，底层通过浏览器的 [EventTarget.addEventListener()](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener) API 实现，如需配置其第三个可选参数，可通过 `eventListenerOptions` 进行透传，从而控制事件从 `冒泡阶段` 还是 `捕获阶段` 触发，或者只触发一次等配置。
 
 ```ts
@@ -434,9 +369,9 @@ const s2Options = {
 };
 ```
 
-## 调用交互方法
+## 调用 API
 
-`S2` 内置了一些交互相关的方法，统一挂载在 `interaction` 命名空间下，你可以在拿到 [SpreadSheet 实例](/zh/docs/api/basic-class/spreadsheet) 后调用它们来实现你的效果，比如 `选中所有单元格`, `获取列头单元格` 等常用方法，具体请查看 [Interaction 实例类](/zh/docs/api/basic-class/interaction)
+`S2` 内置了一些交互相关的 `API`，统一挂载在 `s2.interaction` 命名空间下，你可以在拿到 [SpreadSheet 实例](/zh/docs/api/basic-class/spreadsheet) 后调用它们来实现你的效果，比如 `选中所有单元格`, `获取列头单元格` 等常用方法，具体请查看 [Interaction 实例类](/zh/docs/api/basic-class/interaction)
 
 ```ts
 const s2 = new PivotSheet()
diff --git a/s2-site/docs/manual/advanced/interaction/merge-cell.zh.md b/s2-site/docs/manual/advanced/interaction/merge-cell.zh.md
index f030e76c10..1bfb656b05 100644
--- a/s2-site/docs/manual/advanced/interaction/merge-cell.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/merge-cell.zh.md
@@ -343,17 +343,11 @@ s2.render();
 
 ## 配置和方法说明
 
-### mergedCellsInfo
+### MergedCellInfo
 
-<description> **optional**  _MergedCellInfo[][]_   default: `undefined` </description>
+`markdown:docs/common/merged-cell.zh.md`
 
-设置默认合并的单元格信息
-
-| 参数            | 说明                 | 类型                   | 默认值 | 必选 |
-| --------------- | ------------------ | ---------------------- | ------ | ---- |
-| colIndex        | 单元格的列索引        | `number`               | -      |      |
-| rowIndex        | 单元格的行索引        | `number`               | -      |      |
-| showText        | 合并单元格是否展示当前单元格的 meta 信息，只需要对一个单元格进行标识，</br>若未对单元格进行标识，会默认使用第一个选中点击的单元格的 meta 信息 | `booelan`      | -      |      |
+![合并单元格](https://gw.alipayobjects.com/zos/antfincdn/kHAYfFaJA/ae92e636-6574-487b-8d78-57dcae21e1d4.png)
 
 ### mergeCells
 
diff --git a/s2-site/docs/manual/basic/analysis/export.zh.md b/s2-site/docs/manual/basic/analysis/export.zh.md
index f50a7f3e6b..a8bc2cde78 100644
--- a/s2-site/docs/manual/basic/analysis/export.zh.md
+++ b/s2-site/docs/manual/basic/analysis/export.zh.md
@@ -23,6 +23,19 @@ const s2Options = {
 
 ![复制](https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*oL8_S5zBKSYAAAAAAAAAAAAAARQnAQ)
 
+**copyWithHeader**: 复制数据是否带表头信息，默认为 `false`
+
+```ts
+const s2Options = {
+  interaction: {
+    enableCopy: true,
+    copyWithHeader: true,
+  }
+};
+```
+
+![带表头复制](https://gw.alipayobjects.com/zos/antfincdn/wSBjSYKSM/3eee7bc2-7f8e-4dd9-8836-52a978d9718a.png)
+
 ### 导出
 
 `@antv/s2-react` 组件层提供了导出功能
diff --git a/s2-site/docs/manual/basic/analysis/pagination.zh.md b/s2-site/docs/manual/basic/analysis/pagination.zh.md
index d86d119cd6..a91bd72dc8 100644
--- a/s2-site/docs/manual/basic/analysis/pagination.zh.md
+++ b/s2-site/docs/manual/basic/analysis/pagination.zh.md
@@ -9,13 +9,13 @@ S2 内置提供了分页能力。本质上是前端分页，点击下一页滚
 
 ### 快速上手
 
-首先需要在 `S2Options 中配置 Pagination
+首先需要在 `S2Options` 中配置 `pagination` 属性
 
-markdown:docs/common/pagination.zh.md
+`markdown:docs/common/pagination.zh.md`
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/LVw2QOvjgW/b1563a7b-4070-4d61-a18b-6558e2c5b27b.png" width="600"  alt="preview" />
 
-如果基于 `@antv/s2-core` 开发，需要自己引入或实现分页组件，参考示例
+如果基于 `@antv/s2-core` 开发，需要自行引入或实现分页组件，`core` 层仅提供分页能力，参考示例
 
 * [React](https://github.com/antvis/S2/blob/master/packages/s2-react/src/components/pagination/index.tsx)
 * [Vue 3.0](https://github.com/antvis/S2/blob/master/packages/s2-vue/src/components/pagination/index.vue)
@@ -30,12 +30,12 @@ markdown:docs/common/pagination.zh.md
 
 ### React 版
 
-> 使用的是 [Ant Design](https://ant.design/components/pagination-cn/) 分页组件, 透传 `onChange` 和 `onShowSizeChange` 回调。需要修改样式直接写 CSS 覆盖即可。
+> 使用的是 [Ant Design](https://ant.design/components/pagination-cn/) 分页组件，透传 `onChange` 和 `onShowSizeChange` 回调。需要修改样式直接写 CSS 覆盖即可。
 
 <playground path='react-component/pagination/demo/pivot.tsx' rid='container'></playground>
 
 ### Vue 3.0 版
 
-> 使用的是 [Ant Design Vue](https://antdv.com/components/pagination) 分页组件, 透传 `change` 和 `showSizeChange` 回调。需要修改样式直接写 CSS 覆盖即可。
+> 使用的是 [Ant Design Vue](https://antdv.com/components/pagination) 分页组件，透传 `change` 和 `showSizeChange` 回调。需要修改样式直接写 CSS 覆盖即可。
 
 [Demo 地址](https://codesandbox.io/embed/nice-dijkstra-hzycy6?fontsize=14&hidenavigation=1&theme=dark)
diff --git a/s2-site/docs/manual/basic/sort/basic.zh.md b/s2-site/docs/manual/basic/sort/basic.zh.md
index 08ad32ccc1..2a7c64e222 100644
--- a/s2-site/docs/manual/basic/sort/basic.zh.md
+++ b/s2-site/docs/manual/basic/sort/basic.zh.md
@@ -7,7 +7,7 @@ order: 0
 
 根据 `数值升/降序` 对 `行头/列头` 进行排序
 
-`组内排序` 代表只影响一个分组内部的排序，例如下图中 `笔-价格` 选择 `组内升序` 时，`province` 的排序方式不会更改，只会更改每个 `province` 内部 `city` 的顺序
+`组内排序` 代表只影响一个分组内部的排序，例如下图中 `笔-价格` 选择 `组内升序` 时，`省份` 的排序方式不会更改，只会更改每个 `省份` 内部 `城市` 的顺序
 
 <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*SszqS7EGaXkAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
 
diff --git a/s2-site/docs/manual/basic/sort/custom.zh.md b/s2-site/docs/manual/basic/sort/custom.zh.md
index ad9460091a..139479bdc3 100644
--- a/s2-site/docs/manual/basic/sort/custom.zh.md
+++ b/s2-site/docs/manual/basic/sort/custom.zh.md
@@ -12,6 +12,8 @@ order: 2
 通过在 [dataConfig](https://s2.antv.vision/zh/docs/api/general/S2DataConfig)
 中传入 [sortParams](https://s2.antv.vision/zh/docs/api/general/S2DataConfig#SortParams) 数据驱动
 
+### sortParam
+
 | 参数          | 说明                                        | 类型                                  | 默认值 | 必选 |
 | ------------- | ------------------------------------------- | ------------------------------------- | ------ | ---- |
 | sortFieldId   | 度量 Id，即要被排序的 Id                    | `string`                              | -      | ✓   |
diff --git a/s2-site/docs/manual/basic/theme.zh.md b/s2-site/docs/manual/basic/theme.zh.md
index 1b9dbf847b..bf1ff58651 100644
--- a/s2-site/docs/manual/basic/theme.zh.md
+++ b/s2-site/docs/manual/basic/theme.zh.md
@@ -121,7 +121,7 @@ const customTheme = {
   },
 };
 
-s2.setThemeCfg({ theme: customTheme }); // 也可以使用：s2.setTheme(customTheme)
+s2.setTheme(customTheme)
 s2.render(false);
 ```
 
diff --git a/s2-site/docs/manual/contribution.zh.md b/s2-site/docs/manual/contribution.zh.md
index ee2232c865..b53282a808 100644
--- a/s2-site/docs/manual/contribution.zh.md
+++ b/s2-site/docs/manual/contribution.zh.md
@@ -34,6 +34,8 @@ order: 7
 
 ## Pull Request
 
+> 示例 [PR](https://github.com/antvis/S2/pull/1652) (pr 描述参考)
+
 1. fork 项目 并 clone 下来 （或者使用 GitHub 的 Codespace 功能，非常方便）
 2. 安装依赖：`yarn bootstrap` 或者 `yarn`
 3. 提交你的改动，commit 请遵守 [AngularJS Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.uyo6cb12dt6w)
diff --git a/s2-site/docs/manual/getting-started.zh.md b/s2-site/docs/manual/getting-started.zh.md
index d12b83f0cc..8852367e8e 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -186,7 +186,7 @@ s2.render();
 
 ### `React` 版本
 
-`S2` 提供了开箱即用的 `React` 版本 [表格组件](/zh/examples/gallery#category-表格组件）, 还有丰富的配套 [分析组件](/zh/examples/gallery#category-Tooltip), 帮助开发者快速满足业务看数分析需求。
+`S2` 提供了开箱即用的 `React` 版本 [表格组件](/zh/examples/gallery#category-表格组件), 还有丰富的配套 [分析组件](/zh/examples/gallery#category-Tooltip), 帮助开发者快速满足业务看数分析需求。
 
 #### 表格组件使用
 
diff --git a/s2-site/examples/analysis/sort/API.en.md b/s2-site/examples/analysis/sort/API.en.md
index a4daa25a8c..e324c01e5d 100644
--- a/s2-site/examples/analysis/sort/API.en.md
+++ b/s2-site/examples/analysis/sort/API.en.md
@@ -3,4 +3,4 @@ title: API
 order: 3
 ---
 
-`markdown:docs/common/sort-params.en.md`
+`markdown:docs/common/sort-param.en.md`
diff --git a/s2-site/examples/analysis/sort/API.zh.md b/s2-site/examples/analysis/sort/API.zh.md
index 66d8cca06b..f82a693283 100644
--- a/s2-site/examples/analysis/sort/API.zh.md
+++ b/s2-site/examples/analysis/sort/API.zh.md
@@ -3,4 +3,4 @@ title: API
 order: 3
 ---
 
-`markdown:docs/common/sort-params.zh.md`
+`markdown:docs/common/sort-param.zh.md`
diff --git a/s2-site/examples/case/comparison/demo/measure-comparison.tsx b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
index 780f4d1f7e..87c58ecfaf 100644
--- a/s2-site/examples/case/comparison/demo/measure-comparison.tsx
+++ b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
@@ -424,7 +424,7 @@ fetch('../data/index-comparison.json')
         },
         {
           field: 'price',
-          name: '金额',
+          name: '销售量',
         },
         {
           field: 'uv',
diff --git a/s2-site/examples/data/index-comparison.json b/s2-site/examples/data/index-comparison.json
index 64dee6156b..1a2bb32360 100644
--- a/s2-site/examples/data/index-comparison.json
+++ b/s2-site/examples/data/index-comparison.json
@@ -2,7 +2,7 @@
   {
     "tag": "本周成交情况",
     "type": "女装",
-    "price": "200"
+    "price": "500"
   },
   {
     "tag": "本周成交情况",
@@ -22,7 +22,7 @@
   {
     "tag": "本周成交情况",
     "type": "男装",
-    "price": "300"
+    "price": "200"
   },
   {
     "tag": "本周成交情况",
@@ -62,7 +62,7 @@
   {
     "tag": "本周成交情况",
     "type": "男/女鞋",
-    "price": "600"
+    "price": "60"
   },
   {
     "tag": "本周成交情况",
@@ -82,7 +82,7 @@
   {
     "tag": "本周成交情况",
     "type": "箱包配饰",
-    "price": "3000"
+    "price": "1000"
   },
   {
     "tag": "本周成交情况",
diff --git a/s2-site/examples/theme/custom/demo/custom-schema.ts b/s2-site/examples/theme/custom/demo/custom-schema.ts
index 45383093ab..b30ffcbe26 100644
--- a/s2-site/examples/theme/custom/demo/custom-schema.ts
+++ b/s2-site/examples/theme/custom/demo/custom-schema.ts
@@ -194,7 +194,7 @@ fetch(
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.setThemeCfg({ theme: customTheme });
+    s2.setTheme(customTheme);
 
     s2.render();
   });
diff --git a/s2-site/package.json b/s2-site/package.json
index 583f8261f0..097759f4fb 100644
--- a/s2-site/package.json
+++ b/s2-site/package.json
@@ -36,8 +36,8 @@
   "dependencies": {
     "@antv/g-canvas": "^0.5.12",
     "@antv/gatsby-theme-antv": "1.1.18-beta.0",
-    "@antv/s2": "1.21.1",
-    "@antv/s2-react": "1.19.0",
+    "@antv/s2": "1.24.0",
+    "@antv/s2-react": "1.22.0",
     "copy-to-clipboard": "^3.3.1",
     "gatsby": "^2.24.2",
     "gh-pages": "^3.1.0",
diff --git a/s2-site/yarn.lock b/s2-site/yarn.lock
index 154bc0b8c2..5030c93027 100644
--- a/s2-site/yarn.lock
+++ b/s2-site/yarn.lock
@@ -318,20 +318,20 @@
     "@antv/util" "^2.0.9"
     tslib "^2.0.3"
 
-"@antv/s2-react@1.19.0":
-  version "1.19.0"
-  resolved "https://registry.npmmirror.com/@antv/s2-react/-/s2-react-1.19.0.tgz#0b104bc1a98dd1cbe851df21039642b57e1309c5"
-  integrity sha512-ECCqSGJz8xtQbvqLIBidN6xinEk/KdEpsJR02y6oAbX7ZFH8D4bDYD4s9HYK7wzqtfXq0Xn9uE1F8r996zKHNA==
+"@antv/s2-react@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.npmmirror.com/@antv/s2-react/-/s2-react-1.22.0.tgz#27fcbd17b5d5128bef4f32157a3eaa3cff800900"
+  integrity sha512-iQQE1uHAP6EcbYTSFslJDZ07FrlEbgHezGTjqgYsEH9WzuKEcKIHgUpvKr/n+LOj/qf32bXz3x0VYqMd2/Mc4g==
   dependencies:
     ahooks "^3.1.13"
     classnames "^2.3.1"
     lodash "^4.17.21"
     react-beautiful-dnd "^13.1.0"
 
-"@antv/s2@1.21.1":
-  version "1.21.1"
-  resolved "https://registry.npmmirror.com/@antv/s2/-/s2-1.21.1.tgz#ebd70ef26b86ac1c353b869655fe4527f44ee2c3"
-  integrity sha512-F9d0IUvF6J1BsKul+WAICUoLhbVdvEfeN4zoZiqr864iqt3VJLlm1IpC9430vkqCjre7jMXnhgIb2HV2hBNqZw==
+"@antv/s2@1.24.0":
+  version "1.24.0"
+  resolved "https://registry.npmmirror.com/@antv/s2/-/s2-1.24.0.tgz#bd60da29e372e90396da40a7d6d1464c9be53870"
+  integrity sha512-6zwHYrWl7iJ4LN73fuIWDzTIltFTda1njIZj8Y8uE/rJZp7Qc44LpksqyGOCjZ3RcxA3EfXeGUp3vcUke/ZkSA==
   dependencies:
     "@antv/event-emitter" "^0.1.3"
     "@antv/g-canvas" "^0.5.12"
diff --git a/yarn.lock b/yarn.lock
index 8c301b40b4..a9a160804c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2746,6 +2746,20 @@
     lz-string "^1.4.4"
     pretty-format "^27.0.2"
 
+"@testing-library/dom@^8.16.0":
+  version "8.16.0"
+  resolved "https://registry.npmmirror.com/@testing-library/dom/-/dom-8.16.0.tgz#d6fc50250aed17b1035ca1bd64655e342db3936a"
+  integrity sha512-uxF4zmnLHHDlmW4l+0WDjcgLVwCvH+OVLpD8Dfp+Bjfz85prwxWGbwXgJdLtkgjD0qfOzkJF9SmA6YZPsMYX4w==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^5.0.0"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.4.4"
+    pretty-format "^27.0.2"
+
 "@testing-library/react-hooks@^7.0.2":
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz#3388d07f562d91e7f2431a4a21b5186062ecfee0"