From 5f81d2a02a2944aa5923c571cd557d600b022540 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Tue, 26 Dec 2023 10:23:31 +0800
Subject: [PATCH 01/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=202.0=20?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.en-US.md                               |  28 +-
 README.md                                     |  50 ++-
 packages/s2-core/README.en-US.md              |  28 +-
 packages/s2-core/README.md                    |  70 +--
 .../s2-core/src/common/interface/tooltip.ts   |   6 +-
 pnpm-lock.yaml                                | 172 +++++++-
 s2-site/.dumirc.ts                            |   7 +
 s2-site/docs/api/general/S2DataConfig.zh.md   |   2 +
 s2-site/docs/common/browser.zh.md             |   5 +-
 s2-site/docs/common/contact-us.zh.md          |   9 +-
 s2-site/docs/common/development.zh.md         |   6 +-
 s2-site/docs/common/mini-chart.zh.md          |   4 +-
 s2-site/docs/manual/advanced/adaptive.zh.md   |  27 +-
 ...stom-g2-chart.en.md => custom-chart.en.md} |   0
 .../manual/advanced/custom/custom-chart.zh.md | 413 ++++++++++++++++++
 .../advanced/custom/custom-g2-chart.zh.md     | 175 --------
 .../manual/advanced/interaction/custom.zh.md  |  16 +-
 .../advanced/interaction/link-jump.zh.md      |   4 +-
 .../advanced/interaction/merge-cell.zh.md     |   2 +-
 .../manual/basic/analysis/copy-export.zh.md   |   4 +-
 s2-site/docs/manual/basic/formatter.en.md     |   4 +
 s2-site/docs/manual/basic/formatter.zh.md     |  97 ++++
 s2-site/docs/manual/basic/i18n.zh.md          |   4 +-
 .../manual/basic/sheet-type/pivot-mode.zh.md  |   3 +-
 .../manual/basic/sheet-type/table-mode.zh.md  |   3 +-
 s2-site/docs/manual/basic/theme.zh.md         |  15 +-
 s2-site/docs/manual/faq.zh.md                 |  14 +-
 s2-site/docs/manual/getting-started.zh.md     |   4 +-
 s2-site/docs/manual/introduction.zh.md        |  84 +++-
 .../analysis/conditions/demo/background.ts    |   9 +-
 .../conditions/demo/bidirectional-interval.ts |   9 +-
 .../conditions/demo/gradient-interval.ts      |  12 +-
 .../examples/analysis/conditions/demo/icon.ts |   9 +-
 .../conditions/demo/intelligent-background.ts |   8 +-
 .../analysis/conditions/demo/interval.ts      |   9 +-
 .../conditions/demo/multi-background.ts       |  26 +-
 .../conditions/demo/multi-conditions.ts       |  17 +-
 .../analysis/conditions/demo/table-text.ts    |  11 +-
 .../examples/analysis/conditions/demo/text.ts |   9 +-
 .../analysis/sort/demo/custom-list.ts         |  11 +-
 .../analysis/sort/demo/custom-measure.ts      |  11 +-
 .../analysis/sort/demo/custom-method.ts       |  11 +-
 .../analysis/sort/demo/custom-sort-func.ts    |  15 +-
 .../analysis/sort/demo/custom-totals.ts       |  17 +-
 .../analysis/sort/demo/group-sort.tsx         |   5 +-
 .../analysis/sort/demo/table-sort.tsx         |  24 +-
 .../examples/analysis/totals/demo/basic.ts    |  15 +-
 .../analysis/totals/demo/calculate.ts         |  11 +-
 .../examples/analysis/totals/demo/custom.ts   |  11 +-
 .../analysis/totals/demo/multiple-values.ts   |  15 +-
 s2-site/examples/analysis/totals/demo/tree.ts |  11 +-
 s2-site/examples/basic/pivot/demo/grid.ts     |  45 +-
 s2-site/examples/basic/pivot/demo/tree.ts     |   4 +-
 s2-site/examples/basic/table/demo/table.ts    |   4 +-
 s2-site/examples/case/art/demo/mosaic.tsx     |   3 +-
 .../case/art/demo/time-spend-abstract.tsx     |  13 +-
 .../comparison/demo/measure-comparison.tsx    |  28 +-
 .../demo/multiple-people-comparison.tsx       |   5 +
 .../case/comparison/demo/philosophers.tsx     |  32 +-
 .../case/comparison/demo/time-spend.tsx       |   8 +-
 .../examples/case/data-preview/demo/excel.tsx |  14 +-
 .../examples/case/data-preview/demo/house.tsx |  37 +-
 .../examples/case/data-preview/demo/index.tsx |  11 +-
 .../examples/case/kpi-strategy/demo/basic.tsx |  12 +-
 .../case/kpi-strategy/demo/covid-trend.tsx    |   2 +
 .../case/performance-compare/demo/basic.tsx   |  16 +-
 .../case/performance-compare/demo/pivot.tsx   |  22 +-
 .../case/performance-compare/demo/table.tsx   |  23 +-
 .../case/proportion/demo/group-drill-down.tsx |  14 +-
 .../custom/custom-cell/demo/col-cell.ts       |  13 +-
 .../custom/custom-cell/demo/corner-cell.ts    |  13 +-
 .../custom/custom-cell/demo/corner-header.ts  |  17 +-
 .../custom-cell/demo/custom-merged-cell.ts    |  16 +-
 .../custom-cell/demo/custom-specified-cell.ts |  19 +-
 .../custom/custom-cell/demo/data-cell.ts      |  16 +-
 .../custom/custom-cell/demo/row-cell.ts       |  13 +-
 .../custom-cell/demo/series-number-cell.ts    |  21 +-
 .../custom/custom-cell/demo/totals-cell.ts    |  20 +-
 .../custom-g2-chart/demo/custom-g2-chart.ts   |  36 +-
 .../demo/custom-data-cell-icon.tsx            |   9 +-
 .../custom-icon/demo/custom-svg-icon.ts       |  13 +-
 .../custom-layout/demo/custom-coordinate.ts   |   9 +-
 .../demo/custom-data-position.ts              |   5 +-
 .../demo/custom-layout-arrange.ts             |  13 +-
 .../demo/custom-layout-hierarchy.ts           |  23 +-
 .../custom-layout/demo/custom-value-order.ts  |  10 +-
 .../custom/custom-order/demo/custom-order.tsx |  25 +-
 .../custom-plugins/demo/custom-plugins.ts     |   8 +-
 .../demo/custom-pivot-col-header.ts           |   6 +-
 .../demo/custom-pivot-row-header.ts           |   6 +-
 .../demo/custom-table-col-header.ts           |   4 +-
 .../custom/custom-tree/demo/custom-tree.ts    |   4 +-
 .../advanced/demo/custom-tree-link-jump.ts    |  28 +-
 .../interaction/advanced/demo/merge-cell.ts   |  45 +-
 .../advanced/demo/overscroll-behavior.ts      |   8 +-
 .../advanced/demo/pivot-hide-columns.ts       |   9 +-
 .../advanced/demo/pivot-link-jump.ts          |  18 +-
 .../advanced/demo/resize-active.ts            |  25 +-
 .../advanced/demo/resize-disable.ts           |   9 +-
 .../advanced/demo/row-expand-depth.ts         |  22 +-
 .../interaction/advanced/demo/scroll-loop.ts  |  22 +-
 .../advanced/demo/scroll-speed-ratio.ts       |  22 +-
 .../advanced/demo/scroll-to-cell.ts           |  38 +-
 .../advanced/demo/table-hide-columns.ts       |  17 +-
 .../advanced/demo/table-link-jump.ts          |  17 +-
 .../basic/demo/auto-reset-sheet-style.ts      |   8 +-
 .../interaction/basic/demo/brush-header.ts    |   7 +-
 .../interaction/basic/demo/brush-selection.ts |   5 +-
 .../basic/demo/data-cell-click-selection.ts   |   5 +-
 .../basic/demo/data-cell-range-selection.ts   |   5 +-
 .../examples/interaction/basic/demo/frozen.ts |  16 +-
 .../basic/demo/header-cell-click-selection.ts |   4 +-
 .../examples/interaction/basic/demo/hover.ts  |   5 +-
 .../examples/interaction/basic/demo/resize.ts |   7 +-
 .../custom/demo/double-click-hide-columns.ts  |  17 +-
 .../custom/demo/row-col-hover-tooltip.ts      |   8 +-
 .../adaptive/demo/container-adaptation.ts     |  38 +-
 .../layout/adaptive/demo/react-adaptive.tsx   |  15 +-
 .../layout/adaptive/demo/window-adaptation.ts |  37 +-
 .../examples/layout/basic/demo/colAdaptive.ts |   9 +-
 s2-site/examples/layout/basic/demo/compact.ts |   9 +-
 .../layout/custom/demo/custom-pivot-size.ts   |   5 +-
 .../custom/demo/custom-row-col-cell-width.ts  |   7 +-
 .../layout/custom/demo/custom-table-size.ts   |   5 +-
 .../custom/demo/custom-tree-collapse-nodes.ts |   5 +-
 .../custom/demo/custom-tree-row-width.ts      |   5 +-
 .../layout/custom/demo/hide-columns.ts        |  11 +-
 .../examples/layout/custom/demo/hide-value.ts |   9 +-
 .../custom/demo/only-show-row-header.ts       |   9 +-
 .../drill-dwon/demo/for-pivot.tsx             |  13 +-
 .../react-component/export/demo/export.tsx    |   7 +-
 .../react-component/pagination/demo/pivot.tsx |   4 +-
 .../react-component/pagination/demo/table.tsx |   7 +-
 .../react-component/sheet/demo/editable.tsx   |  12 +-
 .../react-component/sheet/demo/pivot.tsx      |   8 +-
 .../sheet/demo/strategy-mini-chart.tsx        |   4 +-
 .../react-component/sheet/demo/table.tsx      |  11 +-
 .../switcher/demo/pivot-header.tsx            |   4 +-
 .../switcher/demo/pivot-with-children.tsx     |  10 +-
 .../react-component/switcher/demo/pivot.tsx   |   8 +-
 .../react-component/switcher/demo/table.tsx   |   8 +-
 .../demo/custom-click-show-tooltip.tsx        |   3 +
 .../tooltip/demo/custom-content.tsx           |   8 +-
 .../tooltip/demo/custom-operation.tsx         |  10 +-
 .../custom/demo/custom-generate-palette.tsx   |   8 +-
 .../custom/demo/custom-manual-palette.tsx     |   8 +-
 .../theme/custom/demo/custom-palette.ts       |  18 +-
 .../theme/custom/demo/custom-schema.ts        |  15 +-
 .../demo/custom-transparent-background.ts     |  13 +-
 .../examples/theme/default/demo/colorful.ts   |  10 +-
 .../examples/theme/default/demo/default.ts    |  10 +-
 s2-site/examples/theme/default/demo/gray.ts   |  10 +-
 s2-site/package.json                          |  10 +-
 s2-site/playground/sheet-component/index.tsx  |  15 +
 154 files changed, 1932 insertions(+), 977 deletions(-)
 rename s2-site/docs/manual/advanced/custom/{custom-g2-chart.en.md => custom-chart.en.md} (100%)
 create mode 100644 s2-site/docs/manual/advanced/custom/custom-chart.zh.md
 delete mode 100644 s2-site/docs/manual/advanced/custom/custom-g2-chart.zh.md
 create mode 100644 s2-site/docs/manual/basic/formatter.en.md
 create mode 100644 s2-site/docs/manual/basic/formatter.zh.md

diff --git a/README.en-US.md b/README.en-US.md
index 1b93f73601..c471d63a2b 100644
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -12,35 +12,44 @@ A practical visualization library for tabular analysis.
     <img src="https://img.shields.io/npm/dm/@antv/s2.svg" alt="npm"/>
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/latest.svg" alt="version">
+    <img src="https://img.shields.io/npm/v/@antv/s2/latest.svg?logo=npm" alt="latest version">
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/beta.svg" alt="version">
+    <img  src="https://img.shields.io/npm/v/@antv/s2/next.svg?logo=npm" alt="next version">
   </a>
    <a href="https://github.com/antvis/S2/actions/workflows/test.yml" target="_blank">
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
   </a>
   <a href="https://codecov.io/gh/antvis/S2" target="_blank">
-    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="Coverage"/>
+    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="test coverage"/>
   </a>
   <a href="https://github.com/antvis/S2/releases" target="_blank">
-    <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release-date"/>
+    <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/>
   </a>
 </p>
 
 <p>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="npm bundle size" src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="bundle size"/>
+    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
   </a>
   <a href="https://github.com/antvis/S2/discussions" target="_blank">
-    <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="Discussions"/>
+    <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>
   </a>
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
-    <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues-helper"/>
+    <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
   <a href="https://github.com/antvis/S2/blob/master/LICENSE" target="_blank" target="_blank">
-    <img alt="License: MIT@AntV" src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="license"/>
+    <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
+  <a href="https://github.com/antvis/S2/graphs/contributors">
+    <img src="https://img.shields.io/github/contributors/antvis/S2" alt="contributors"/>
+  <a/>
+  <a href="https://github.com/antvis/S2/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed">
+    <img src="https://img.shields.io/github/issues-closed/antvis/S2" alt="issues closed"/>
+  <a/>
+  <a href="https://github.com/antvis/S2/pulls">
+    <img src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg" alt="pr welcome"/>
+  <a/>
 </p>
 
 </div>
@@ -229,9 +238,6 @@ pnpm site:start
   <a>
     <img width="300" height="auto" alt="S2" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2VvTSZmI4vYAAAAAAAAAAAAADmJ7AQ/original">
   </a>
-  <a>
-    <img width="300" height="auto" alt="S2" src="https://gw.alipayobjects.com/zos/antfincdn/v4TlwgORE/qq_qr_code.JPG">
-  </a>
 </p>
 
 ## 👬 Contributors
diff --git a/README.md b/README.md
index 5b32f0d71a..89eb8805c1 100644
--- a/README.md
+++ b/README.md
@@ -11,35 +11,44 @@
     <img src="https://img.shields.io/npm/dm/@antv/s2.svg" alt="npm"/>
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/latest.svg" alt="version">
+    <img src="https://img.shields.io/npm/v/@antv/s2/latest.svg?logo=npm" alt="latest version">
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/next.svg" alt="version">
+    <img  src="https://img.shields.io/npm/v/@antv/s2/next.svg?logo=npm" alt="next version">
   </a>
    <a href="https://github.com/antvis/S2/actions/workflows/test.yml" target="_blank">
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
   </a>
   <a href="https://codecov.io/gh/antvis/S2" target="_blank">
-    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="Coverage"/>
+    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="test coverage"/>
   </a>
   <a href="https://github.com/antvis/S2/releases" target="_blank">
-    <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release-date"/>
+    <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/>
   </a>
 </p>
 
 <p>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="npm bundle size" src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="bundle size"/>
+    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
   </a>
   <a href="https://github.com/antvis/S2/discussions" target="_blank">
-    <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="Discussions"/>
+    <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>
   </a>
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
-    <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues-helper"/>
+    <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
   <a href="https://github.com/antvis/S2/blob/master/LICENSE" target="_blank" target="_blank">
-    <img alt="License: MIT@AntV" src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="license"/>
+    <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
+  <a href="https://github.com/antvis/S2/graphs/contributors">
+    <img src="https://img.shields.io/github/contributors/antvis/S2" alt="contributors"/>
+  <a/>
+  <a href="https://github.com/antvis/S2/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed">
+    <img src="https://img.shields.io/github/issues-closed/antvis/S2" alt="issues closed"/>
+  <a/>
+  <a href="https://github.com/antvis/S2/pulls">
+    <img src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg" alt="pr welcome"/>
+  <a/>
 </p>
 
 </div>
@@ -175,13 +184,11 @@ s2.render();
 | [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
 | [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
 
-## 👤 作者
-
-[**@AntV**](https://github.com/orgs/antvis/people)
+## 🙋‍♂️ 问题反馈
 
-## 🤝 参与贡献
+有任何问题请严格按照模版 [提交 Issue](https://github.com/antvis/S2/issues/new/choose), 在这之前强烈建议阅读 [《⚠️ 提 Issue 前必读》](https://github.com/antvis/S2/issues/1904)
 
-> S2 使用 pnpm 作为包管理器
+## ⌨️ 本地开发
 
 ```bash
 git clone git@github.com:antvis/S2.git
@@ -213,25 +220,32 @@ pnpm lint
 pnpm site:start
 ```
 
-## 👁️ 洞察
+## 🤝 参与贡献
+
+请查看 [贡献指南](https://s2.antv.antgroup.com/manual/contribution)
+
+## 👁️ 项目洞察
 
 ![Alt](https://repobeats.axiom.co/api/embed/ebb7eecb994dc0e3980044aefe43eb81302e3632.svg "Repobeats analytics image")
 
 ## 📧 联系我们
 
+群聊仅供交流，不提供任何答疑，有任何问题请 [提交 Issue](https://github.com/antvis/S2/issues/new/choose).
+
 <p>
   <a>
     <img width="300" height="auto" alt="DingTalk" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2VvTSZmI4vYAAAAAAAAAAAAADmJ7AQ/original">
   </a>
-  <a>
-    <img width="300" height="auto" alt="qq" src="https://gw.alipayobjects.com/zos/antfincdn/v4TlwgORE/qq_qr_code.JPG">
-  </a>
 </p>
 
-## 👬 Contributors
+## 👬 贡献者们
 
 ![https://github.com/antvis/s2/graphs/contributors](https://contrib.rocks/image?repo=antvis/s2)
 
+## 👤 作者
+
+[**@AntV**](https://github.com/orgs/antvis/people)
+
 ## 📄 License
 
 MIT@[AntV](https://github.com/antvis)
diff --git a/packages/s2-core/README.en-US.md b/packages/s2-core/README.en-US.md
index 599cf62fb4..7cf5dc406f 100644
--- a/packages/s2-core/README.en-US.md
+++ b/packages/s2-core/README.en-US.md
@@ -12,35 +12,44 @@ Data-driven multi-dimensional analysis table.
     <img src="https://img.shields.io/npm/dm/@antv/s2.svg" alt="npm"/>
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/latest.svg" alt="version">
+    <img src="https://img.shields.io/npm/v/@antv/s2/latest.svg?logo=npm" alt="latest version">
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/next.svg" alt="next version">
+    <img  src="https://img.shields.io/npm/v/@antv/s2/next.svg?logo=npm" alt="next version">
   </a>
    <a href="https://github.com/antvis/S2/actions/workflows/test.yml" target="_blank">
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
   </a>
   <a href="https://codecov.io/gh/antvis/S2" target="_blank">
-    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="Coverage"/>
+    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="test coverage"/>
   </a>
   <a href="https://github.com/antvis/S2/releases" target="_blank">
-    <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release-date"/>
+    <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/>
   </a>
 </p>
 
 <p>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="npm bundle size" src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="bundle size"/>
+    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
   </a>
   <a href="https://github.com/antvis/S2/discussions" target="_blank">
-    <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="Discussions"/>
+    <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>
   </a>
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
-    <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues-helper"/>
+    <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
   <a href="https://github.com/antvis/S2/blob/master/LICENSE" target="_blank" target="_blank">
-    <img alt="License: MIT@AntV" src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="license"/>
+    <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
+  <a href="https://github.com/antvis/S2/graphs/contributors">
+    <img src="https://img.shields.io/github/contributors/antvis/S2" alt="contributors"/>
+  <a/>
+  <a href="https://github.com/antvis/S2/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed">
+    <img src="https://img.shields.io/github/issues-closed/antvis/S2" alt="issues closed"/>
+  <a/>
+  <a href="https://github.com/antvis/S2/pulls">
+    <img src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg" alt="pr welcome"/>
+  <a/>
 </p>
 
 </div>
@@ -225,9 +234,6 @@ pnpm site:start
   <a>
     <img width="300" height="auto" alt="DingTalk" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2VvTSZmI4vYAAAAAAAAAAAAADmJ7AQ/original">
   </a>
-  <a>
-    <img width="300" height="auto" alt="qq" src="https://gw.alipayobjects.com/zos/antfincdn/v4TlwgORE/qq_qr_code.JPG">
-  </a>
 </p>
 
 ## 👬 Contributors
diff --git a/packages/s2-core/README.md b/packages/s2-core/README.md
index 80a489c909..6c95fdc7eb 100644
--- a/packages/s2-core/README.md
+++ b/packages/s2-core/README.md
@@ -4,42 +4,51 @@
 
 <div align="center">
 
-数据驱动的多维分析表格。
+开箱即用的多维可视分析表格。
 
 <p>
   <a href="https://www.npmjs.com/package/@antv/s2" title="npm">
     <img src="https://img.shields.io/npm/dm/@antv/s2.svg" alt="npm"/>
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/latest.svg" alt="version">
+    <img src="https://img.shields.io/npm/v/@antv/s2/latest.svg?logo=npm" alt="latest version">
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/next.svg" alt="next version">
+    <img  src="https://img.shields.io/npm/v/@antv/s2/next.svg?logo=npm" alt="next version">
   </a>
    <a href="https://github.com/antvis/S2/actions/workflows/test.yml" target="_blank">
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
   </a>
   <a href="https://codecov.io/gh/antvis/S2" target="_blank">
-    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="Coverage"/>
+    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="test coverage"/>
   </a>
   <a href="https://github.com/antvis/S2/releases" target="_blank">
-    <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release-date"/>
+    <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/>
   </a>
 </p>
 
 <p>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="npm bundle size" src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="bundle size"/>
+    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
   </a>
   <a href="https://github.com/antvis/S2/discussions" target="_blank">
-    <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="Discussions"/>
+    <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>
   </a>
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
-    <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues-helper"/>
+    <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
   <a href="https://github.com/antvis/S2/blob/master/LICENSE" target="_blank" target="_blank">
-    <img alt="License: MIT@AntV" src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="license"/>
+    <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
+  <a href="https://github.com/antvis/S2/graphs/contributors">
+    <img src="https://img.shields.io/github/contributors/antvis/S2" alt="contributors"/>
+  <a/>
+  <a href="https://github.com/antvis/S2/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed">
+    <img src="https://img.shields.io/github/issues-closed/antvis/S2" alt="issues closed"/>
+  <a/>
+  <a href="https://github.com/antvis/S2/pulls">
+    <img src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg" alt="pr welcome"/>
+  <a/>
 </p>
 
 </div>
@@ -58,7 +67,7 @@ S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数
 1. 多维交叉分析： 告别单一分析维度，全面拥抱任意维度的自由组合分析。
 2. 高性能：能支持全量百万数据下 `<8s` 渲染，也能通过局部下钻来实现秒级渲染。
 3. 高扩展性：支持任意的自定义扩展（包括但不局限于布局，样式，交互，数据 hook 流等）。
-4. 开箱即用：提供不同分析场景下开箱即用的 `React` `Vue3` 版本表组件及配套分析组件，只需要简单的配置即可轻松实现复杂场景的表渲染。
+4. 开箱即用：提供不同分析场景下开箱即用的 `React`, `Vue3` 版本表组件及配套分析组件，只需要简单的配置即可轻松实现复杂场景的表渲染。
 5. 可交互：支持丰富的交互形式（单选、圈选、行选、列选、冻结行头、宽高拖拽，自定义交互等）
 
 ## 📦 安装
@@ -66,7 +75,7 @@ S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数
 ```bash
 $ npm install @antv/s2
 # yarn add @antv/s2
-# pnpm add @antv/s2
+# pnpm install @antv/s2
 ```
 
 ## 🔨 使用
@@ -167,21 +176,19 @@ s2.render();
 
 ![result](https://gw.alipayobjects.com/zos/antfincdn/vCukbtVNvl/616f7ef1-e626-4225-99f8-dc8f6ca630dd.png)
 
-### 📦 Packages
+### 📦 版本
 
-| Package                                                                      | Latest                                                            | Beta                                                          | Alpha                                                           | Next                                                          | Size                                                                                                                          | Download                                                      |
-| ---------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
-| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)       | ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)       | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
-| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) | ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
-| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)   | ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg)   | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
+| Package  | Latest   | Beta   | Alpha   | Next | Size   | Download     |
+| - | - | - | - | - | - | - |
+| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
+| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
 
-## 👤 Author
+## 问题反馈
 
-[**@AntV**](https://github.com/orgs/antvis/people)
-
-## 🤝 参与贡献
+有任何问题请严格按照模版 [提交 Issue](https://github.com/antvis/S2/issues/new/choose), 在这之前强烈建议阅读 [《⚠️ 提 Issue 前必读》](https://github.com/antvis/S2/issues/1904)
 
-> S2 使用 pnpm 作为包管理器
+## ⌨️ 本地开发
 
 ```bash
 git clone git@github.com:antvis/S2.git
@@ -213,21 +220,32 @@ pnpm lint
 pnpm site:start
 ```
 
+## 🤝 参与贡献
+
+请查看 [贡献指南](https://s2.antv.antgroup.com/manual/contribution)
+
+## 👁️ 项目洞察
+
+![Alt](https://repobeats.axiom.co/api/embed/ebb7eecb994dc0e3980044aefe43eb81302e3632.svg "Repobeats analytics image")
+
 ## 📧 联系我们
 
+仅供交流，不提供任何答疑，有任何问题请 [提交 Issue](https://github.com/antvis/S2/issues/new/choose).
+
 <p>
   <a>
     <img width="300" height="auto" alt="DingTalk" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2VvTSZmI4vYAAAAAAAAAAAAADmJ7AQ/original">
   </a>
-  <a>
-    <img width="300" height="auto" alt="qq" src="https://gw.alipayobjects.com/zos/antfincdn/v4TlwgORE/qq_qr_code.JPG">
-  </a>
 </p>
 
-## 👬 Contributors
+## 👬 贡献者们
 
 ![https://github.com/antvis/s2/graphs/contributors](https://contrib.rocks/image?repo=antvis/s2)
 
+## 👤 作者
+
+[**@AntV**](https://github.com/orgs/antvis/people)
+
 ## 📄 License
 
 MIT@[AntV](https://github.com/antvis)
diff --git a/packages/s2-core/src/common/interface/tooltip.ts b/packages/s2-core/src/common/interface/tooltip.ts
index 2b8f8db802..c62e7b73fb 100644
--- a/packages/s2-core/src/common/interface/tooltip.ts
+++ b/packages/s2-core/src/common/interface/tooltip.ts
@@ -26,7 +26,11 @@ export interface TooltipOperatorMenuItem<Icon, Text> {
   /** 点击回调 */
   onClick?: TooltipOperatorClickHandler;
   /** 是否显示 */
-  visible?: boolean | ((cell: S2CellType) => boolean);
+  visible?:
+    | boolean
+    | null
+    | undefined
+    | ((cell: S2CellType) => boolean | null | undefined);
   /** 子菜单 */
   children?: TooltipOperatorMenuItem<Icon, Text>[];
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 499653def3..412d2a81cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -444,8 +444,8 @@ importers:
         specifier: ^5.2.6
         version: 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@antv/dumi-theme-antv':
-        specifier: ^0.4.4
-        version: 0.4.4(@babel/core@7.23.2)(dumi@2.2.15)
+        specifier: ^0.4.5
+        version: 0.4.5(@babel/core@7.23.2)(dumi@2.2.16)
       '@antv/g-canvas':
         specifier: ^1.11.25
         version: 1.11.25
@@ -456,8 +456,8 @@ importers:
         specifier: ^1.9.25
         version: 1.9.25
       '@antv/g2':
-        specifier: ^5.1.11
-        version: 5.1.11
+        specifier: ^5.1.13
+        version: 5.1.13
       '@antv/s2':
         specifier: next
         version: link:../packages/s2-core
@@ -465,17 +465,17 @@ importers:
         specifier: next
         version: link:../packages/s2-react
       antd:
-        specifier: ^5.12.2
-        version: 5.12.2(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.12.5
+        version: 5.12.5
       copy-to-clipboard:
         specifier: ^3.3.3
         version: 3.3.3
       dumi:
-        specifier: ^2.2.15
-        version: 2.2.15(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
+        specifier: ^2.2.16
+        version: 2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
       gh-pages:
-        specifier: ^6.1.0
-        version: 6.1.0
+        specifier: ^6.1.1
+        version: 6.1.1
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -753,6 +753,16 @@ packages:
       '@antv/scale': 0.4.13
       '@antv/util': 3.3.5
       svg-path-parser: 1.1.0
+    dev: true
+
+  /@antv/component@1.0.1-beta.0:
+    resolution: {integrity: sha512-syonGLy7bcpe+4qqKjtwBZMUUfZU8TKJRQAeYOB4pEiz2kr1Ky/qZLteT12QDQRugeMz9KnrUXMF+nAvUErKww==}
+    dependencies:
+      '@antv/g': 5.18.23
+      '@antv/scale': 0.4.13
+      '@antv/util': 3.3.5
+      svg-path-parser: 1.1.0
+    dev: false
 
   /@antv/coord@0.4.7:
     resolution: {integrity: sha512-UTbrMLhwJUkKzqJx5KFnSRpU3BqrdLORJbwUbHK2zHSCT3q3bjcFA//ZYLVfIlwqFDXp/hzfMyRtp0c77A9ZVA==}
@@ -761,8 +771,8 @@ packages:
       '@antv/util': 2.0.17
       gl-matrix: 3.4.3
 
-  /@antv/dumi-theme-antv@0.4.4(@babel/core@7.23.2)(dumi@2.2.15):
-    resolution: {integrity: sha512-/5eB2bn9pZZmORcYFmQQ8xjgD22/W879E3XfHKvgYDNkYlxNUMmOknxiNbV5Pdf0s8oUgLEerKnSWqdkQc6Tvg==}
+  /@antv/dumi-theme-antv@0.4.5(@babel/core@7.23.2)(dumi@2.2.16):
+    resolution: {integrity: sha512-TMbgp+DhnXiTt63xf1iu/6Go/k5SZ4J//i9u5IHRA7n8kwL8iq3nQPmR27lOAahri/F0sTnihLUtDCgWymn0gQ==}
     peerDependencies:
       dumi: ^2.0.0
     dependencies:
@@ -778,7 +788,7 @@ packages:
       codesandbox: 2.2.3
       d3-dsv: 3.0.1
       docsearch.js: 2.6.3
-      dumi: 2.2.15(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
+      dumi: 2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
       front-matter: 4.0.2
       fs-extra: 10.1.0
       glob: 8.1.0
@@ -980,6 +990,34 @@ packages:
       flru: 1.0.2
       fmin: 0.0.2
       pdfast: 0.2.0
+    dev: true
+
+  /@antv/g2@5.1.13:
+    resolution: {integrity: sha512-Ak2QY9buhScqoII1pSlmtM4V6ubkp14IF5mYumiBun11sblKBtBFemBV/mmsYaWw/Eoq+hz3jmYbRX2zdb7pQw==}
+    dependencies:
+      '@antv/component': 1.0.1-beta.0
+      '@antv/coord': 0.4.7
+      '@antv/event-emitter': 0.1.3
+      '@antv/g': 5.18.23
+      '@antv/g-canvas': 1.11.25
+      '@antv/g-plugin-dragndrop': 1.8.19
+      '@antv/path-util': 3.0.1
+      '@antv/scale': 0.4.13
+      '@antv/util': 3.3.5
+      d3-array: 3.2.4
+      d3-dsv: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.0
+      d3-hierarchy: 3.1.2
+      d3-path: 3.1.0
+      d3-scale-chromatic: 3.0.0
+      d3-shape: 3.2.0
+      d3-voronoi: 1.1.4
+      flru: 1.0.2
+      fmin: 0.0.2
+      pdfast: 0.2.0
+    dev: false
 
   /@antv/g@5.18.23:
     resolution: {integrity: sha512-6O+ODt1w0FC4w98J00Ao7rtqztkV7AWqKF69kog3RqQWh40rYpM7JIfR0cFUAdHf8GLRyr4m+RQR+TZlt+QVEw==}
@@ -6143,6 +6181,67 @@ packages:
       - date-fns
       - luxon
       - moment
+    dev: true
+
+  /antd@5.12.5:
+    resolution: {integrity: sha512-m9r9VhTmANS4kdBwHcxI4QWIGoZh3LspXNb2SxoezRSUZ9RUFpf+gO0AjPx8EPeO/nLKsHAoCSLza9r041bAgw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@ant-design/colors': 7.0.0
+      '@ant-design/cssinjs': 1.18.1(react-dom@18.2.0)(react@18.2.0)
+      '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0)
+      '@ant-design/react-slick': 1.0.2(react@18.2.0)
+      '@babel/runtime': 7.23.5
+      '@ctrl/tinycolor': 3.6.1
+      '@rc-component/color-picker': 1.4.1(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/mutate-observer': 1.1.0(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/tour': 1.11.1(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.3.2
+      copy-to-clipboard: 3.3.3
+      dayjs: 1.11.7
+      qrcode.react: 3.1.0(react@18.2.0)
+      rc-cascader: 3.20.0(react-dom@18.2.0)(react@18.2.0)
+      rc-checkbox: 3.1.0(react-dom@18.2.0)(react@18.2.0)
+      rc-collapse: 3.7.2(react-dom@18.2.0)(react@18.2.0)
+      rc-dialog: 9.3.4(react-dom@18.2.0)(react@18.2.0)
+      rc-drawer: 6.5.2(react-dom@18.2.0)(react@18.2.0)
+      rc-dropdown: 4.1.0(react-dom@18.2.0)(react@18.2.0)
+      rc-field-form: 1.41.0(react-dom@18.2.0)(react@18.2.0)
+      rc-image: 7.5.1(react-dom@18.2.0)(react@18.2.0)
+      rc-input: 1.3.11
+      rc-input-number: 8.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-mentions: 2.9.1(react-dom@18.2.0)(react@18.2.0)
+      rc-menu: 9.12.4(react-dom@18.2.0)(react@18.2.0)
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-notification: 5.3.0(react-dom@18.2.0)(react@18.2.0)
+      rc-pagination: 4.0.3(react-dom@18.2.0)(react@18.2.0)
+      rc-picker: 3.14.6(dayjs@1.11.7)(react-dom@18.2.0)(react@18.2.0)
+      rc-progress: 3.5.1(react-dom@18.2.0)(react@18.2.0)
+      rc-rate: 2.12.0(react-dom@18.2.0)(react@18.2.0)
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-segmented: 2.2.2(react-dom@18.2.0)(react@18.2.0)
+      rc-select: 14.10.0(react-dom@18.2.0)(react@18.2.0)
+      rc-slider: 10.5.0(react-dom@18.2.0)(react@18.2.0)
+      rc-steps: 6.0.1(react-dom@18.2.0)(react@18.2.0)
+      rc-switch: 4.1.0(react-dom@18.2.0)(react@18.2.0)
+      rc-table: 7.36.1
+      rc-tabs: 12.14.1(react-dom@18.2.0)(react@18.2.0)
+      rc-textarea: 1.5.3(react-dom@18.2.0)(react@18.2.0)
+      rc-tooltip: 6.1.3
+      rc-tree: 5.8.2(react-dom@18.2.0)(react@18.2.0)
+      rc-tree-select: 5.15.0(react-dom@18.2.0)(react@18.2.0)
+      rc-upload: 4.3.5(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      scroll-into-view-if-needed: 3.1.0
+      throttle-debounce: 5.0.0
+    transitivePeerDependencies:
+      - date-fns
+      - luxon
+      - moment
+    dev: false
 
   /anymatch@1.3.2:
     resolution: {integrity: sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==}
@@ -8961,8 +9060,8 @@ packages:
     resolution: {integrity: sha512-a/Y5lf0G6gwsEQ9hop/n03CcjmHsGBk384Cz/AEX6mRYrfSpUx/lQvP9HLoXkCzScl9PL1sSmLPnMkgaXDCZLA==}
     dev: false
 
-  /dumi@2.2.15(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-O6bUZvqYictU1p5kuwD26Vrn4g5HuMaw41GBhjEEG0rjAveNvnQdgJBJS6YarNCTTLJ9fUZ4t86aBt31MUCTHw==}
+  /dumi@2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-r2x/CY0fR8/YZOwEnG4JsLEpn8jOg94Qyd1u+7pRD9SCx7dF9It+GwkGbdNEsyenGsO/ZU9wD+Kz7KO+HU7/EA==}
     hasBin: true
     peerDependencies:
       react: '>=16.8'
@@ -11134,8 +11233,8 @@ packages:
       globby: 6.1.0
     dev: true
 
-  /gh-pages@6.1.0:
-    resolution: {integrity: sha512-MdXigvqN3I66Y+tAZsQJMzpBWQOI1snD6BYuECmP+GEdryYMMOQvzn4AConk/+qNg/XIuQhB1xNGrl3Rmj1iow==}
+  /gh-pages@6.1.1:
+    resolution: {integrity: sha512-upnohfjBwN5hBP9w2dPE7HO5JJTHzSGMV1JrLrHvNuqmjoYHg6TBrCcnEoorjG/e0ejbuvnwyKMdTyM40PEByw==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -18593,6 +18692,17 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /rc-input@1.3.11:
+    resolution: {integrity: sha512-jhH7QP5rILanSHCGSUkdoFE5DEtpv8FIseYhuYkOZzUBeiVAiwM3q26YqZ6xBB0QFEZ/yUAgms4xW4iuub3xFQ==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@babel/runtime': 7.23.5
+      classnames: 2.3.2
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
   /rc-input@1.3.6(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-/HjTaKi8/Ts4zNbYaB5oWCquxFyFQO4Co1MnMgoCeGJlpe7k8Eir2HN0a0F9IHDmmo+GYiGgPpz7w/d/krzsJA==}
     peerDependencies:
@@ -19032,6 +19142,22 @@ packages:
       rc-virtual-list: 3.11.3(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /rc-table@7.36.1:
+    resolution: {integrity: sha512-9qMxEm/3Y8ukdW8I8ZvmhX0QImfNKzH0JEUlSbyaUlsYTB+/tQEbfaB8YkG4sHVZ1io4pxqK/BXoZYqebi/TIQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.5
+      '@rc-component/context': 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.3.2
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      rc-virtual-list: 3.11.3(react-dom@18.2.0)(react@18.2.0)
+    dev: false
 
   /rc-tabs@12.14.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-1xlE7JQNYxD5RwBsM7jf2xSdUrkmTSDFLFEm2gqAgnsRlOGydEzXXNAVTOT6QcgM1G/gCm+AgG+FYPUGb4Hs4g==}
@@ -19121,6 +19247,18 @@ packages:
       classnames: 2.3.2
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /rc-tooltip@6.1.3:
+    resolution: {integrity: sha512-HMSbSs5oieZ7XddtINUddBLSVgsnlaSb3bZrzzGWjXa7/B7nNedmsuz72s7EWFEro9mNa7RyF3gOXKYqvJiTcQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.5
+      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.3.2
+    dev: false
 
   /rc-tree-select@5.15.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-YJHfdO6azFnR0/JuNBZLDptGE4/RGfVeHAafUIYcm2T3RBkL1O8aVqiHvwIyLzdK59ry0NLrByd+3TkfpRM+9Q==}
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 02bb941894..3bd1dc5b1d 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'dumi';
+// import { version } from '@antv/s2';
 import { repository } from './package.json';
 
 export default defineConfig({
@@ -31,6 +32,12 @@ export default defineConfig({
     showChartResize: true, // 是否在 demo 页展示图表视图切换
     showAPIDoc: true, // 是否在 demo 页展示API文档
     themeSwitcher: 'g2',
+    versions: {
+      // 历史版本以及切换下拉菜单
+      // [version || '2.x']: 'https://s2.antv.antgroup.com',
+      '2.x': 'https://s2.antv.antgroup.com',
+      '1.x': 'https://s2-v1.antv.vision',
+    },
     docsearchOptions: {
       // 头部搜索框配置
       versionV3: true,
diff --git a/s2-site/docs/api/general/S2DataConfig.zh.md b/s2-site/docs/api/general/S2DataConfig.zh.md
index d4c62940cf..dbcc6186ef 100644
--- a/s2-site/docs/api/general/S2DataConfig.zh.md
+++ b/s2-site/docs/api/general/S2DataConfig.zh.md
@@ -119,6 +119,8 @@ object **必选**,_default：null_
 
 ### MiniChartData
 
+[了解更多](/manual/advanced/custom/custom-chart#1-%E7%BB%98%E5%88%B6-mini-%E5%9B%BE%E8%A1%A8)
+
 <embed src="@/docs/common/mini-chart.zh.md"></embed>
 
 ### MultiData
diff --git a/s2-site/docs/common/browser.zh.md b/s2-site/docs/common/browser.zh.md
index 5a77535180..61857de531 100644
--- a/s2-site/docs/common/browser.zh.md
+++ b/s2-site/docs/common/browser.zh.md
@@ -12,11 +12,12 @@ order: 5
 ```ts
 <script src="./dist/index.min.js"></script>
 <script>
-   async function run() { 
+   async function bootstrap() {
       const s2 = new S2.PivotSheet(container, s2DataConfig, s2Options);
       await s2.render();
    }
-   run();
+
+   bootstrap();
 </script>
 ```
 
diff --git a/s2-site/docs/common/contact-us.zh.md b/s2-site/docs/common/contact-us.zh.md
index 59ae6f1dba..ffa8f7f142 100644
--- a/s2-site/docs/common/contact-us.zh.md
+++ b/s2-site/docs/common/contact-us.zh.md
@@ -3,11 +3,14 @@ title: 联系我们
 order: 5
 ---
 
+:::info{title="注意"}
+
+群聊仅供交流，不提供任何答疑，有任何问题请 [提交 Issue](https://github.com/antvis/S2/issues/new/choose).
+
+:::
+
 <p>
   <a>
     <img width="300" height="auto" alt="DingTalk" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2VvTSZmI4vYAAAAAAAAAAAAADmJ7AQ/original">
   </a>
-  <a>
-    <img width="300" height="auto" alt="qq" src="https://gw.alipayobjects.com/zos/antfincdn/v4TlwgORE/qq_qr_code.JPG">
-  </a>
 </p>
diff --git a/s2-site/docs/common/development.zh.md b/s2-site/docs/common/development.zh.md
index b284351730..037a89feb8 100644
--- a/s2-site/docs/common/development.zh.md
+++ b/s2-site/docs/common/development.zh.md
@@ -1,6 +1,8 @@
-跃跃欲试想贡献？[查看贡献指南](https://s2.antv.antgroup.com/manual/contribution)
+:::info{title="跃跃欲试想贡献?"}
 
-> S2 使用 pnpm 作为包管理器
+[查看贡献指南](/manual/contribution)
+
+:::
 
 ```bash
 git clone git@github.com:antvis/S2.git
diff --git a/s2-site/docs/common/mini-chart.zh.md b/s2-site/docs/common/mini-chart.zh.md
index c0cbed655b..e751c68e3d 100644
--- a/s2-site/docs/common/mini-chart.zh.md
+++ b/s2-site/docs/common/mini-chart.zh.md
@@ -5,7 +5,7 @@ order: 6
 
 #### renderMiniChart
 
-在单元格内绘制 mini 图（支持 折线图、子弹图、柱状图）. [查看示例](/examples/react-component/sheet/#strategy-mini-chart)
+在单元格内绘制 `mini` 图（支持 折线图、子弹图、柱状图）. [查看示例](/zh/examples/custom/custom-cell/#mini-chart)
 
 ```ts
  renderMiniChart = (cell: S2CellType, data?: BaseChartData | BulletValue) => void;
@@ -13,7 +13,7 @@ order: 6
 
 #### BaseChartData
 
-折线图、柱状图数据配置项，数据格式参考 `g2`
+折线图、柱状图数据配置项，数据格式参考 [`G2`](https://g2.antv.antgroup.com/manual/core/api)
 
 | 参数 | 说明 | 类型 | 必选  | 默认值 |
 | --- | ---- | --- | ---- | ------ |
diff --git a/s2-site/docs/manual/advanced/adaptive.zh.md b/s2-site/docs/manual/advanced/adaptive.zh.md
index c5c9083f53..ddf795e593 100644
--- a/s2-site/docs/manual/advanced/adaptive.zh.md
+++ b/s2-site/docs/manual/advanced/adaptive.zh.md
@@ -12,7 +12,8 @@ const s2Options = {
 }
 ```
 
-需要注意的是，表格基于 `Canvas` 渲染，配置的宽高其实就是设置 `canvas` 的 `width` 和 `height`, 也就是意味着 `100%`, `80vw` 之类的配置是不生效的：
+:::warning{title="注意"}
+表格基于 `Canvas` 渲染，配置的宽高其实就是设置 `<canvas/>` 的 `width` 和 `height`, 也就是意味着 `100%`, `80vw` 之类的配置是不生效的：
 
 ```ts
 const s2Options = {
@@ -21,11 +22,13 @@ const s2Options = {
 }
 ```
 
+:::
+
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/WmM9%24SLfu/2396a53f-8946-497a-9e68-fd89f01077ff.png)
 
 ### 窗口自适应
 
-如果想让表格撑满整个父容器，可以监听 窗口的 `resize` 事件，或使用 [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver) 监听容器大小变化，然后更新表格宽高：
+如果想让表格撑满整个父容器，可以监听窗口的 `resize` 事件，或使用 [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver) 监听容器大小变化，然后更新表格宽高：
 
 ```ts
 import { PivotSheet } from '@antv/s2'
@@ -33,15 +36,19 @@ import { debounce } from 'lodash'
 
 const s2 = new PivotSheet(...)
 
-const debounceRender = debounce((width, height) => {
+const debounceRender = debounce(async (width, height) => {
   s2.changeSheetSize(width, height)
-  s2.render(false) // 不重新加载数据
+  await s2.render(false) // 不重新加载数据
 }, 200)
 
-new ResizeObserver(([entry] = []) => {
-    const [size] = entry.borderBoxSize || [];
-    debounceRender(size.inlineSize, size.blockSize)
-}).observe(document.body); // 通过监听 document.body 来实现监听窗口大小变化
+const resizeObserver = new ResizeObserver(([entry] = []) => {
+  const [size] = entry.borderBoxSize || [];
+  debounceRender(size.inlineSize, size.blockSize)
+})
+
+// 通过监听 document.body 来实现监听窗口大小变化
+resizeObserver.observe(document.body);
+
 ```
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/8kmgXX%267U/Kapture%2525202021-11-23%252520at%25252017.59.16.gif)
@@ -60,9 +67,9 @@ const s2 = new PivotSheet(...)
 
 const parent = /* 你的容器节点 */
 
-const debounceRender = debounce((width, height) => {
+const debounceRender = debounce(async (width, height) => {
   s2.changeSheetSize(width, height)
-  s2.render(false) // 不重新加载数据
+  await s2.render(false) // 不重新加载数据
 }, 200)
 
 const resizeObserver = new ResizeObserver(([entry] = []) => {
diff --git a/s2-site/docs/manual/advanced/custom/custom-g2-chart.en.md b/s2-site/docs/manual/advanced/custom/custom-chart.en.md
similarity index 100%
rename from s2-site/docs/manual/advanced/custom/custom-g2-chart.en.md
rename to s2-site/docs/manual/advanced/custom/custom-chart.en.md
diff --git a/s2-site/docs/manual/advanced/custom/custom-chart.zh.md b/s2-site/docs/manual/advanced/custom/custom-chart.zh.md
new file mode 100644
index 0000000000..24bdcd4816
--- /dev/null
+++ b/s2-site/docs/manual/advanced/custom/custom-chart.zh.md
@@ -0,0 +1,413 @@
+---
+title: 单元格内绘制图表
+order: 8
+---
+
+如果纯文本的表格不够直观，S2 支持 [自定义单元格](/examples#custom-custom-cell)，也内置了 [简单的 mini 图绘制](/examples/custom/custom-cell/#mini-chart)
+
+### 数据格式
+
+将普通数值替换成 { values: [G2 图表数据 (Spec)](https://g2.antv.antgroup.com/examples/general/interval/#column) }
+
+```diff
+{
+-  number: string
++  number: {
++    values: { ...G2 Spec }
++  }
+}
+```
+
+```diff
+const s2DataConfig = {
+  data: [
+    {
+-     number: 123,
++     number: {
++        values: {
++          type: 'line',
++          data: [
++            {
++              year: '2017',
++             value: -368,
++            },
++         ],
++          encode: { x: 'year', y: 'value' },
++        }
++      },
+    }
+  ]
+}
+```
+
+### 1. 绘制 mini 图表
+
+<Playground path='custom/custom-cell/demo/mini-chart.ts' rid='mini' height='400'></playground>
+
+#### 1.1 数据准备
+
+```ts
+const s2DataConfig = {
+  fields: {
+    rows: ['province', 'city'],
+    columns: ['type', 'sub_type'],
+    values: ['number'],
+  },
+  data: [
+    // 用于绘制 mini 图的数据
+    {
+      province: '海南省',
+      city: '三亚市',
+      type: '家具',
+      sub_type: '桌子',
+      number: {
+        // 折线图
+        values: {
+          type: 'line',
+          data: [
+            {
+              year: '2017',
+              value: -368,
+            },
+            {
+              year: '2018',
+              value: 368,
+            },
+            {
+              year: '2019',
+              value: 368,
+            },
+            {
+              year: '2020',
+              value: 368,
+            },
+            {
+              year: '2021',
+              value: 268,
+            },
+            {
+              year: '2022',
+              value: 168,
+            },
+          ],
+          encode: { x: 'year', y: 'value' },
+        },
+      },
+    },
+    {
+      province: '海南省',
+      city: '三亚市',
+      type: '家具',
+      sub_type: '沙发',
+      number: {
+        // 柱状图
+        values: {
+          type: 'bar',
+          data: [
+            {
+              year: '2017',
+              value: -368,
+            },
+            {
+              year: '2018',
+              value: 328,
+            },
+            {
+              year: '2019',
+              value: 38,
+            },
+            {
+              year: '2020',
+              value: 168,
+            },
+            {
+              year: '2021',
+              value: 268,
+            },
+            {
+              year: '2022',
+              value: 368,
+            },
+          ],
+          encode: { x: 'year', y: 'value' },
+        },
+      },
+    },
+    {
+      province: '海南省',
+      city: '三亚市',
+      type: '办公用品',
+      sub_type: '笔',
+      number: {
+        // 多列文本
+        values: [
+          [3877, -4324, '42%'],
+          [3877, 4324, '-42%'],
+        ],
+      },
+    },
+    {
+      province: '海南省',
+      city: '三亚市',
+      type: '办公用品',
+      sub_type: '纸张',
+      number: {
+        // 子弹图
+        values: {
+          type: 'bullet',
+          measure: 0.3,
+          target: 0.76,
+        },
+      },
+    },
+  ],
+};
+```
+
+#### 1.2 自定义单元格
+
+自定义 `DataCell`, 然后使用 `drawObjectText` 接管绘制逻辑
+
+```ts
+import { DataCell, drawObjectText } from '@antv/s2';
+
+class CustomDataCell extends DataCell {
+  // 当数值为对象时，完全接管绘制，使用内置的 `drawObjectText` 根据不同的数据结构 （见下方） 绘制不同的图形
+  drawTextShape() {
+    if (this.isMultiData()) {
+      drawObjectText(this);
+      return;
+    }
+
+    super.drawTextShape();
+  }
+}
+
+const s2Options = {
+  dataCell: (viewMeta) => {
+    return new CustomDataCell(viewMeta, viewMeta?.spreadsheet);
+  },
+};
+```
+
+#### 1.3 图表类型
+
+:::info{title="提示"}
+
+S2 内置了一些基于 [`AntV/G`](https://g.antv.antgroup.com/) 简单的图形绘制能力，适用于轻量简单使用，不希望有额外依赖的场景。
+
+:::
+
+- `line`: 折线图
+- `bar`: 柱状图
+- `bullet`: 子弹图
+
+```ts
+{
+  number: {
+    values: {
+      measure: 0.3,
+      target: 0.76,
+    }
+  }
+}
+```
+
+- `多列文本`
+
+```ts
+{
+  number: {
+  values: [
+    [3877, -4324, '42%'],
+    [3877, 4324, '-42%'],
+  ]
+}
+```
+
+#### 1.4 效果
+
+[查看示例](/examples/custom/custom-cell/#mini-chart)
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*apnIT4KXP3YAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="800"/>
+
+#### 1.5 数据格式
+
+<embed src="@/docs/common/mini-chart.zh.md"></embed>
+
+### 2. 绘制 G2 图表
+
+如果上诉功能都无法满足使用，那么还可以使用专业的可视化图表库 [`AntV/G2`](https://g2.antv.antgroup.com/).
+
+:::info{title="提示"}
+`S2` 和 `G2` 底层都使用 [AntV/G](https://g.antv.antgroup.com/) 渲染引擎绘制，也就意味着可以**共享渲染引擎**, 实现在 `S2` 表格中绘制 `G2` 图表的梦幻联动，实现真 `图·表`.
+:::
+
+<Playground path='custom/custom-g2-chart/demo/custom-g2-chart.ts' rid='container' height='400'></playground>
+
+<br/>
+
+#### 2.1 数据准备
+
+:::info{title="提示"}
+数据源类型为 [MultiData](https://s2.antv.antgroup.com/api/general/s2-data-config#multidata) 支持 `普通数值单元格` 和 `图表单元格` 共存。图表数据源为标准的 [G2 Spec](https://g2.antv.antgroup.com/examples/general/interval/#column).
+:::
+
+```ts
+const s2DataConfig = {
+  data: [
+    // 普通数据
+    {
+      number: 1343,
+      province: '浙江省',
+      city: '杭州市',
+      type: '办公用品',
+      sub_type: '纸张',
+    },
+    {
+      number: {
+        // G2 图表数据 (Spec) https://g2.antv.antgroup.com/examples/general/interval/#column
+        values: {
+          type: 'view',
+          autoFit: true,
+          padding: 0,
+          axis: false,
+          children: [
+            {
+              type: 'image',
+              style: {
+                src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png',
+                x: '50%',
+                y: '50%',
+                width: '100%',
+                height: '100%',
+              },
+              tooltip: false,
+            },
+            {
+              type: 'heatmap',
+              data: {
+                type: 'fetch',
+                value: 'https://assets.antv.antgroup.com/g2/heatmap.json',
+              },
+              encode: { x: 'g', y: 'l', color: 'tmp' },
+              style: { opacity: 0 },
+              tooltip: false,
+            },
+          ],
+        },
+      },
+      province: '浙江省',
+      city: '舟山市',
+      type: '办公用品',
+      sub_type: '笔',
+    },
+  ],
+};
+```
+
+#### 2.2 安装 G2
+
+:::warning{title="该功能依赖 G2 的 `5.x` 版本，请确保使用了正确的版本 "}
+
+```bash
+yarn add @antv/g2 --save
+```
+
+使用 `G2` 提供的 `renderToMountedElement` 方法
+
+```ts
+import { renderToMountedElement } from '@antv/g2';
+```
+
+:::
+
+#### 2.3 在 `@antv/s2` 中使用
+
+##### 1. 自定义 `DataCell`, 如果是图表数据，则不渲染默认的文本
+
+```ts
+import { PivotSheet, DataCell } from '@antv/s2';
+
+class ChartSheetDataCell extends DataCell {
+  public drawTextShape(options) {
+    if (this.isMultiData()) {
+      return null;
+    }
+
+    super.drawTextShape(options);
+  }
+}
+
+const s2 = new PivotSheet(container, s2DataConfig, {
+  dataCell: (viewMeta) => new ChartSheetDataCell(viewMeta, viewMeta.spreadsheet)
+});
+
+await s2.render();
+
+```
+
+##### 2. 监听数值单元格渲染完成后，使用 `G2` 提供的 `renderToMountedElement` 将图表挂载在 `S2` 单元格实例上
+
+:::warning{title="提示"}
+由于 `G2` 按需加载的特性，请根据你渲染的图表，自行选择适合的 [`library`](https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib)
+:::
+
+```ts
+import { renderToMountedElement, stdlib } from '@antv/g2';
+
+s2.on(S2Event.DATA_CELL_RENDER, (cell) => {
+  // 如果是普通数值单元格正常展示
+  if (!cell.isChartData()) {
+    return;
+  }
+
+  const chartOptions = cell.getRenderChartOptions();
+
+  renderToMountedElement(chartOptions, {
+    group: cell,
+    // https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib
+    library: stdlib(),
+  });
+});
+```
+
+#### 2.4 在 `@antv/s2-react` 使用
+
+如果希望在 `React` 中使用，除了上诉的方式外，也可以直接使用 `<SheetComponent sheetType="chart" />`, 内部封装了 `自定义 DateCell` 的步骤
+
+```tsx
+import { SheetComponent } from '@antv/s2-react';
+import { renderToMountedElement, stdlib } from '@antv/g2';
+
+function App() {
+  const onDataCellRender = (cell) => {
+    // 如果是普通数值单元格正常展示
+    if (!cell.isChartData()) {
+      return;
+    }
+
+    const chartOptions = cell.getRenderChartOptions();
+
+    renderToMountedElement(chartOptions, {
+      group: cell,
+      // 根据实际需要渲染的图表，选择 library：https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib
+      library: stdlib(),
+    });
+  };
+
+  return (
+    <SheetComponent
+      sheetType="chart"
+      dataCfg={s2DataConfig}
+      onDataCellRender={onDataCellRender}
+    />
+  )
+}
+```
+
+#### 2.5 效果
+
+[查看示例](/examples/custom/custom-cell#custom-g2-chart)
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*y9mfQqk9XwYAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="800"/>
diff --git a/s2-site/docs/manual/advanced/custom/custom-g2-chart.zh.md b/s2-site/docs/manual/advanced/custom/custom-g2-chart.zh.md
deleted file mode 100644
index 8ca9ef3283..0000000000
--- a/s2-site/docs/manual/advanced/custom/custom-g2-chart.zh.md
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: 自定义单元格内绘制 G2 图表
-order: 8
----
-
-S2 支持 [自定义单元格](https://s2.antv.antgroup.com/examples#custom-custom-cell)，也内置了 [简单的 mini 图绘制](https://s2.antv.antgroup.com/examples/custom/custom-cell/#mini-chart), 如果上诉功能都无法满足使用，那么还可以使用专业的可视化图表库 [`AntV/G2`](https://g2.antv.antgroup.com/).
-
-`S2` 和 `G2` 底层都使用 [AntV/G](https://g.antv.antgroup.com/) 渲染引擎绘制，也就意味着可以**共享渲染引擎**, 实现在 `S2` 表格中绘制 `G2` 图表的梦幻联动，实现真 `图·表`.
-
-<Playground path='custom/custom-g2-chart/demo/custom-g2-chart.ts' rid='container' height='400'></playground>
-
-<br/>
-
-## 数据准备
-
-数据源类型为 [MultiData](https://s2.antv.antgroup.com/api/general/s2-data-config#multidata) 支持 `普通数值单元格` 和 `图表单元格` 共存。图表数据源为标准的 [G2 Spec](https://g2.antv.antgroup.com/examples/general/interval/#column).
-
-```ts
-const s2DataConfig = {
-  data: [
-    // 普通数据
-    {
-      number: 1343,
-      province: '浙江省',
-      city: '杭州市',
-      type: '办公用品',
-      sub_type: '纸张',
-    },
-    {
-      number: {
-        // G2 图表数据 (Spec) https://g2.antv.antgroup.com/examples/general/interval/#column
-        values: {
-          type: 'view',
-          autoFit: true,
-          padding: 0,
-          axis: false,
-          children: [
-            {
-              type: 'image',
-              style: {
-                src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png',
-                x: '50%',
-                y: '50%',
-                width: '100%',
-                height: '100%',
-              },
-              tooltip: false,
-            },
-            {
-              type: 'heatmap',
-              data: {
-                type: 'fetch',
-                value: 'https://assets.antv.antgroup.com/g2/heatmap.json',
-              },
-              encode: { x: 'g', y: 'l', color: 'tmp' },
-              style: { opacity: 0 },
-              tooltip: false,
-            },
-          ],
-        },
-      },
-      province: '浙江省',
-      city: '舟山市',
-      type: '办公用品',
-      sub_type: '笔',
-    },
-  ],
-};
-```
-
-### 安装 G2
-
-:::warning{title="该功能依赖 G2 的 `5.x` 版本，请确保使用了正确的版本 "}
-
-```bash
-yarn add @antv/g2 --save
-```
-
-使用 `G2` 提供的 `renderToMountedElement` 方法
-
-```ts
-import { renderToMountedElement } from '@antv/g2';
-```
-
-:::
-
-### 在 `@antv/s2` 中使用
-
-#### 1. 自定义 `DataCell`, 如果是图表数据，则不渲染默认的文本
-
-```ts
-import { PivotSheet, DataCell } from '@antv/s2';
-
-class ChartSheetDataCell extends DataCell {
-  public drawTextShape(options) {
-    if (this.isMultiData()) {
-      return null;
-    }
-
-    super.drawTextShape(options);
-  }
-}
-
-const s2 = new PivotSheet(container, s2DataConfig, {
-  dataCell: (viewMeta) => new ChartSheetDataCell(viewMeta, viewMeta.spreadsheet)
-});
-
-s2.render();
-
-```
-
-#### 2. 监听数值单元格渲染完成后，使用 `G2` 提供的 `renderToMountedElement` 将图表挂载在 `S2` 单元格实例上
-
-:::warning{title="提示"}
-由于 `G2` 按需加载的特性，请根据你渲染的图表，自行选择适合的 [`library`](https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib)
-:::
-
-```ts
-import { renderToMountedElement, stdlib } from '@antv/g2';
-
-s2.on(S2Event.DATA_CELL_RENDER, (cell) => {
-  // 如果是普通数值单元格正常展示
-  if (!cell.isChartData()) {
-    return;
-  }
-
-  const chartOptions = cell.getRenderChartOptions();
-
-  renderToMountedElement(chartOptions, {
-    group: cell,
-    // https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib
-    library: stdlib(),
-  });
-});
-```
-
-### 在 `@antv/s2-react` 使用
-
-如果希望在 `React` 中使用，除了上诉的方式外，也可以直接使用 `<SheetComponent sheetType="chart" />`, 内部封装了 `自定义 DateCell` 的步骤
-
-```tsx
-import { SheetComponent } from '@antv/s2-react';
-import { renderToMountedElement, stdlib } from '@antv/g2';
-
-function App() {
-  const onDataCellRender = (cell) => {
-    // 如果是普通数值单元格正常展示
-    if (!cell.isChartData()) {
-      return;
-    }
-
-    const chartOptions = cell.getRenderChartOptions();
-
-    renderToMountedElement(chartOptions, {
-      group: cell,
-      // 根据实际需要渲染的图表，选择 library：https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib
-      library: stdlib(),
-    });
-  };
-
-  return (
-    <SheetComponent
-      sheetType="chart"
-      dataCfg={s2DataConfig}
-      onDataCellRender={onDataCellRender}
-    />
-  )
-}
-```
-
-### 效果
-
-[查看示例](/examples#custom-custom-g2-chart)
-
-<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*y9mfQqk9XwYAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="600"/>
diff --git a/s2-site/docs/manual/advanced/interaction/custom.zh.md b/s2-site/docs/manual/advanced/interaction/custom.zh.md
index 6e6bfed0f2..287fdd8579 100644
--- a/s2-site/docs/manual/advanced/interaction/custom.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/custom.zh.md
@@ -16,8 +16,7 @@ import { BaseEvent } from '@antv/s2';
 
 // 继承 BaseEvent, 可以拿到 this.spreadsheet
 class HiddenInteraction extends BaseEvent {
-  bindEvents() {
-  }
+  bindEvents() { }
 }
 ```
 
@@ -54,15 +53,16 @@ const s2Options = {
     customInteractions: [
       {
         // 交互的唯一标识，需要保证和已有交互不冲突
-        key: 'MyInteraction',
-        interaction: MyInteraction,
+        key: 'HiddenInteraction',
+        interaction: HiddenInteraction,
       },
     ],
   }
 };
+
 const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-s2.render();
+await s2.render();
 ```
 
 ## 3. 多个自定义交互
@@ -87,8 +87,8 @@ const s2Options = {
   interaction: {
     customInteractions: [
       {
-        key: 'MyInteraction',
-        interaction: MyInteraction,
+        key: 'HiddenInteraction',
+        interaction: HiddenInteraction,
       },
       {
         key: 'ContextMenuInteraction',
@@ -100,7 +100,7 @@ const s2Options = {
 
 const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-s2.render();
+await s2.render();
 ```
 
 <Playground path='interaction/advanced/demo/double-click-hide-columns.ts' rid='container' height='400'></playground>
diff --git a/s2-site/docs/manual/advanced/interaction/link-jump.zh.md b/s2-site/docs/manual/advanced/interaction/link-jump.zh.md
index 6837239add..bcdd7c0d0e 100644
--- a/s2-site/docs/manual/advanced/interaction/link-jump.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/link-jump.zh.md
@@ -70,7 +70,7 @@ s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
   location.href = `https://path/to/${key}=${value}}`;
 });
 
-s2.render();
+await s2.render();
 ```
 
 <Playground path='interaction/advanced/demo/pivot-link-jump.ts' rid='container' height='400'></playground>
@@ -105,7 +105,7 @@ s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
   location.href = `https://path/to/${key}=${value}}`;
 });
 
-s2.render();
+await s2.render();
 ```
 
 <Playground path='interaction/advanced/demo/table-link-jump.ts' rid='container2' height='400'></playground>
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 6085f010c8..0571e6898c 100644
--- a/s2-site/docs/manual/advanced/interaction/merge-cell.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/merge-cell.zh.md
@@ -335,7 +335,7 @@ s2.on(S2Event.MERGED_CELLS_CLICK, (event) => {
   });
 });
 
-s2.render();
+await s2.render();
 ```
 
 ## demo 演示
diff --git a/s2-site/docs/manual/basic/analysis/copy-export.zh.md b/s2-site/docs/manual/basic/analysis/copy-export.zh.md
index ed3d130023..89baf8636a 100644
--- a/s2-site/docs/manual/basic/analysis/copy-export.zh.md
+++ b/s2-site/docs/manual/basic/analysis/copy-export.zh.md
@@ -26,7 +26,7 @@ S2 的导出组件，分别提供了原始数据的复制和格式化后数据
 
 #### 局部复制
 
-使用快捷键 `command/ctrl + c` 即可复制选中区域（局部复制）
+使用快捷键 `Command/Ctrl + C` 即可复制选中区域（局部复制）
 
 ```ts
 const s2Options = {
@@ -77,7 +77,7 @@ const s2Options = {
 
 `@antv/s2-react` 组件层提供了导出功能
 
-```ts
+```tsx
 import { SheetComponent } from '@antv/s2-react'
 
 <SheetComponent
diff --git a/s2-site/docs/manual/basic/formatter.en.md b/s2-site/docs/manual/basic/formatter.en.md
new file mode 100644
index 0000000000..e43c39d569
--- /dev/null
+++ b/s2-site/docs/manual/basic/formatter.en.md
@@ -0,0 +1,4 @@
+---
+title: 数据格式化
+order: 9
+---
diff --git a/s2-site/docs/manual/basic/formatter.zh.md b/s2-site/docs/manual/basic/formatter.zh.md
new file mode 100644
index 0000000000..e05a646eb7
--- /dev/null
+++ b/s2-site/docs/manual/basic/formatter.zh.md
@@ -0,0 +1,97 @@
+---
+title: 数据格式化
+order: 9
+---
+
+`s2DataConfig` 支持配置 `meta` 对数据进行格式化
+
+<Playground path="basic/pivot/demo/grid.ts" rid='grid' height="200"></playground>
+
+## 自定义行列头维值名称
+
+```ts {7,10}
+ const s2DataConfig = {
+  fields: {
+    rows: ['province', 'city'],
+    columns: ['type', 'sub_type'],
+    values: ['number'],
+  },
+  meta: [
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '商品类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+    {
+      field: 'number',
+      name: '数量',
+    },
+  ]
+};
+```
+
+## 自定义数值格式
+
+可以通过 `formatter` 自定义数值的格式，可以拿到
+
+- `value`: 当前单元格数值
+- `record`: 当前单元格整行数据
+- `meta`: 当前单元格原信息
+
+```ts {7,27-29}
+ const s2DataConfig = {
+  fields: {
+    rows: ['province', 'city'],
+    columns: ['type', 'sub_type'],
+    values: ['number'],
+  },
+  meta: [
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '商品类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+    {
+      field: 'number',
+      name: '数量',
+      formatter: (value, record, meta) => {
+        return `${value / 100} %`
+      },
+    },
+  ]
+};
+```
+
+## 复制导出时保留格式化信息
+
+复制导出默认使用原数据进行处理，开启 `copyWithFormat` 后，则以 `meta` 中的 `name` 和 `formatter` 进行复制导出。
+
+```ts
+const s2Options = {
+  interaction: {
+    copyWithFormat: true
+  }
+}
+```
diff --git a/s2-site/docs/manual/basic/i18n.zh.md b/s2-site/docs/manual/basic/i18n.zh.md
index 23ead6051b..f90c34cfaf 100644
--- a/s2-site/docs/manual/basic/i18n.zh.md
+++ b/s2-site/docs/manual/basic/i18n.zh.md
@@ -15,8 +15,8 @@ import { setLang, PivotSheet } from '@antv/s2'
 setLang('en_US')
 // setLang('zh_CN')
 
-const s2 = new PivotSheet()
-s2.render()
+const s2 = new PivotSheet(...)
+await s2.render()
 ```
 
 ## 扩展国际化文案
diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
index cc6e38d1dc..2f550dcbee 100644
--- a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
@@ -92,7 +92,8 @@ import { PivotSheet } from "@antv/s2";
 
 const container = document.getElementById('container');
 const s2 = new PivotSheet(container, dataCfg, options);
-s2.render();
+
+await s2.render();
 ```
 
 ​📊 查看 [类方式透视表示例](/examples/basic/pivot#grid) 和 [API 文档](/api/general/s2options)。
diff --git a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
index ef69c7c391..bf4e70f983 100644
--- a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
@@ -94,7 +94,8 @@ import { TableSheet } from "@antv/s2";
 
 const container = document.getElementById('container');
 const s2 = new TableSheet(container, dataCfg, options);
-s2.render();
+
+await s2.render();
 ```
 
 ## 特性
diff --git a/s2-site/docs/manual/basic/theme.zh.md b/s2-site/docs/manual/basic/theme.zh.md
index e0953d51b0..aa9d5fe1b5 100644
--- a/s2-site/docs/manual/basic/theme.zh.md
+++ b/s2-site/docs/manual/basic/theme.zh.md
@@ -46,7 +46,7 @@ s2.setTheme({
     color: '#353c59',
   },
 });
-s2.render(false);
+await s2.render(false);
 ```
 
 ## 自定义主题
@@ -55,7 +55,7 @@ s2 实例上的 `setThemeCfg` 方法是一切主题配置的入口，该方法
 
 - 通过 ThemeCfg.name 使用预置主题
 - 通过 ThemeCfg.palette 自定义色板生成主题
-- 通过 ThemeCfg.theme 自定义 schema 生成主题（可与上两个属性同时使用，即覆盖由它们生成的主题）
+- 通过 ThemeCfg.theme (`s2.setTheme(...)`) 自定义 schema 生成主题（可与上两个属性同时使用，即覆盖由它们生成的主题）
 
 ### 选择预置主题
 
@@ -66,7 +66,7 @@ const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
 // name 可为 default, colorful, gray
 s2.setThemeCfg({ name: 'colorful' });
-s2.render(false);
+await s2.render(false);
 ```
 
 S2 内置 3 套主题效果：
@@ -121,9 +121,9 @@ const customTheme = {
   },
 };
 
-// s2.setThemeCfg({ theme: customTheme })
+// 等价与：s2.setThemeCfg({ theme: customTheme })
 s2.setTheme(customTheme)
-s2.render(false);
+await s2.render(false);
 ```
 
 <Playground path="theme/custom/demo/custom-schema.ts" rid='custom-schema'></playground>
@@ -209,8 +209,9 @@ const s2Palette = {
     green: '#29A294',
   },
 };
+
 s2.setThemeCfg({ palette: s2Palette });
-s2.render(false);
+await s2.render(false);
 ```
 
 <Playground path="theme/custom/demo/custom-manual-palette.tsx" height="500" rid='custom-manual-palette'></playground>
@@ -236,7 +237,7 @@ const newPalette = generatePalette({ ...palette, brandColor: themeColor });
 s2.setThemeCfg({
   palette: newPalette,
 });
-s2.render(false);
+await s2.render(false);
 ```
 
 <Playground path="theme/custom/demo/custom-generate-palette.tsx" rid='custom-generate-palette'></playground>
diff --git a/s2-site/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md
index e398b58424..8d2e14bd46 100644
--- a/s2-site/docs/manual/faq.zh.md
+++ b/s2-site/docs/manual/faq.zh.md
@@ -51,7 +51,7 @@ const s2Options = {
 ```ts
 const scale = 0.8
 s2.changeSheetSize(width * scale, height * scale)
-s2.render(false)
+await s2.render(false)
 ```
 
 可参考 issue [#808](https://github.com/antvis/S2/issues/808) [#990](https://github.com/antvis/S2/pull/990) （感谢 [@cylnet](https://github.com/cylnet) [@xiaochong44](https://github.com/xiaochong44))
@@ -66,35 +66,35 @@ const pivotSheet = new PivotSheet(document.getElementById('container'), dataCfg,
 
 ```ts
 pivotSheet.setOptions({ ... })
-pivotSheet.render(false) // 重新渲染，不更新数据
+await pivotSheet.render(false) // 重新渲染，不更新数据
 ```
 
 重置 options: [可选项](/docs/api/general/S2Options)，直接使用传入的 option，不会与上次的数据进行合并
 
 ```ts
 pivotSheet.setOptions({ ... }, true)
-pivotSheet.render(false) // 重新渲染，不更新数据
+await pivotSheet.render(false) // 重新渲染，不更新数据
 ```
 
 更新 dataCfg: [可选项](/docs/api/general/S2DataConfig)，会与上次的数据进行合并
 
 ```ts
 pivotSheet.setDataCfg({ ... })
-pivotSheet.render(true) // 重新渲染，且更新数据
+await pivotSheet.render(true) // 重新渲染，且更新数据
 ```
 
 重置 dataCfg: [可选项](/docs/api/general/S2DataConfig)，直接使用传入的 dataCfg，不会与上次的数据进行合并
 
 ```ts
 pivotSheet.setDataCfg({ ... }, true)
-pivotSheet.render(true) // 重新渲染，且更新数据
+await pivotSheet.render(true) // 重新渲染，且更新数据
 ```
 
 更新 theme: [可选项](/docs/api/general/S2Theme)
 
 ```ts
 pivotSheet.setThemeCfg({ ... })
-pivotSheet.render(false)  // 重新渲染，不更新数据
+await pivotSheet.render(false)  // 重新渲染，不更新数据
 ```
 
 ### 图表渲染不出来，怎么回事？
@@ -124,7 +124,7 @@ const pivotSheet = new PivotSheet('#container > div[title="xx"]', dataCfg, optio
 
 ```ts
 s2.changeSheetSize(200, 200)
-s2.render(false)
+await s2.render(false)
 ```
 
 ### 表格可以根据外部容器的宽高自动撑满吗？
diff --git a/s2-site/docs/manual/getting-started.zh.md b/s2-site/docs/manual/getting-started.zh.md
index 03f0b4bf31..a749bddf6e 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -171,7 +171,7 @@ const s2Options = {
 ```ts
 import { PivotSheet } from '@antv/s2';
 
-async function run() {
+async function bootstrap() {
   const container = document.getElementById('container');
 
   const s2 = new PivotSheet(container, s2DataConfig, s2Options);
@@ -179,7 +179,7 @@ async function run() {
   await s2.render(); // 返回 Promise
 }
 
-run();
+bootstrap();
 ```
 
 #### 4. 结果
diff --git a/s2-site/docs/manual/introduction.zh.md b/s2-site/docs/manual/introduction.zh.md
index 9b982f76fb..fe9dfb192e 100644
--- a/s2-site/docs/manual/introduction.zh.md
+++ b/s2-site/docs/manual/introduction.zh.md
@@ -6,23 +6,52 @@ redirect_from:
 ---
 
 <div>
+
 <p>
+  <a href="https://www.npmjs.com/package/@antv/s2" title="npm">
+    <img src="https://img.shields.io/npm/dm/@antv/s2.svg" alt="npm"/>
+  </a>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2.svg" alt="version">
+    <img src="https://img.shields.io/npm/v/@antv/s2/latest.svg?logo=npm" alt="latest version">
   </a>
-    <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/beta.svg" alt="version">
+  <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
+    <img  src="https://img.shields.io/npm/v/@antv/s2/next.svg?logo=npm" alt="next version">
   </a>
    <a href="https://github.com/antvis/S2/actions/workflows/test.yml" target="_blank">
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
   </a>
   <a href="https://codecov.io/gh/antvis/S2" target="_blank">
-    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="Coverage"/>
+    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="test coverage"/>
   </a>
   <a href="https://github.com/antvis/S2/releases" target="_blank">
-    <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release-date"/>
+    <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/>
+  </a>
+</p>
+
+<p>
+  <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
+    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
+  </a>
+  <a href="https://github.com/antvis/S2/discussions" target="_blank">
+    <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>
   </a>
+  <a href="https://github.com/actions-cool/issues-helper" target="_blank">
+    <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
+  </a>
+  <a href="https://github.com/antvis/S2/blob/master/LICENSE" target="_blank" target="_blank">
+    <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
+  </a>
+  <a href="https://github.com/antvis/S2/graphs/contributors">
+    <img src="https://img.shields.io/github/contributors/antvis/S2" alt="contributors"/>
+  <a/>
+  <a href="https://github.com/antvis/S2/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed">
+    <img src="https://img.shields.io/github/issues-closed/antvis/S2" alt="issues closed"/>
+  <a/>
+  <a href="https://github.com/antvis/S2/pulls">
+    <img src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg" alt="pr welcome"/>
+  <a/>
 </p>
+
 </div>
 
 ## ❓ 什么是 S2
@@ -33,17 +62,18 @@ redirect_from:
 
 ## ✨ 特性
 
-1. 开箱即用：提供不同场景下开箱即用的 `React`, `Vue3` 表组件及配套分析组件，只需要简单的配置即可轻松实现复杂场景。
-2. 多维交叉分析： 告别单一分析维度，全面拥抱任意维度的自由组合分析。
-3. 高性能：能支持全量百万数据下 `<4s` 渲染，也能通过局部下钻来实现秒级渲染。
-4. 高扩展性：支持任意的自定义扩展（包括但不局限于布局，样式，交互，数据流等）。
-5. 交互友好：支持丰富的交互形式（单选、圈选、行选、列选、冻结行头、宽高拖拽，自定义交互等）
+1. **开箱即用**：提供不同场景下开箱即用的 `React`, `Vue3` 表组件及配套分析组件，只需要简单的配置即可轻松实现复杂场景。
+2. **多维交叉分析**： 告别单一分析维度，全面拥抱任意维度的自由组合分析。
+3. **高性能**：能支持全量百万数据下 `<4s` 渲染，也能通过局部下钻来实现秒级渲染。
+4. **高扩展性**：支持任意的自定义扩展（包括但不局限于布局，样式，交互，数据流等）。
+5. **交互友好**：支持丰富的交互形式（单选、圈选、行选、列选、冻结行头、宽高拖拽，自定义交互等）
 
 ## 📦 安装
 
 ```bash
-npm install @antv/s2
-# yarn add @antv/s2
+pnpm install @antv/s2 --save
+# npm install @antv/s2 --save
+# yarn add @antv/s2 --save
 ```
 
 ## 🔨 使用
@@ -181,41 +211,53 @@ const s2Options = {
 ```ts
 import { PivotSheet } from '@antv/s2';
 
-async function run() {
+async function bootstrap() {
   const container = document.getElementById('container');
 
   const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-  await s2.render(); // 返回 Promise
+  await s2.render(); // 异步渲染
 }
 
-run();
+bootstrap();
 ```
 
 ### 4. 结果
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*Ln3cTY_Rk1cAAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*Ln3cTY_Rk1cAAAAAAAAAAAAAARQnAQ" width="1000" alt="preview" />
 
 ## 📦 版本
 
 <embed src="@/docs/common/packages.zh.md"></embed>
 
-## 👤 作者
+## 🙋‍♂️ 问题反馈
 
-[**@AntV**](https://github.com/orgs/antvis/people)
+有任何问题请严格按照模版 [提交 Issue](https://github.com/antvis/S2/issues/new/choose), 在这之前强烈建议阅读 [《⚠️ 提 Issue 前必读》](https://github.com/antvis/S2/issues/1904)
 
-## 🤝 参与贡献
+## ⌨️ 本地开发
 
 <embed src="@/docs/common/development.zh.md"></embed>
 
+## 🤝 参与贡献
+
+请查看 [贡献指南](https://s2.antv.antgroup.com/manual/contribution)
+
+## 👁️ 项目洞察
+
+![Alt](https://repobeats.axiom.co/api/embed/ebb7eecb994dc0e3980044aefe43eb81302e3632.svg "Repobeats analytics image")
+
 ## 📧 联系我们
 
 <embed src="@/docs/common/contact-us.zh.md"></embed>
 
-## 👬 Contributors
+## 👬 贡献者们
 
 ![https://github.com/antvis/s2/graphs/contributors](https://contrib.rocks/image?repo=antvis/s2)
 
+## 👤 作者
+
+[**@AntV**](https://github.com/orgs/antvis/people)
+
 ## 📄 License
 
-MIT@[AntV](https://github.com/antvis).
+MIT@[AntV](https://github.com/antvis)
diff --git a/s2-site/examples/analysis/conditions/demo/background.ts b/s2-site/examples/analysis/conditions/demo/background.ts
index 4213ad03d3..45ac837055 100644
--- a/s2-site/examples/analysis/conditions/demo/background.ts
+++ b/s2-site/examples/analysis/conditions/demo/background.ts
@@ -1,13 +1,13 @@
-import { PivotSheet, EXTRA_FIELD } from '@antv/s2';
+import { PivotSheet, EXTRA_FIELD, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -66,7 +66,8 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/conditions/demo/bidirectional-interval.ts b/s2-site/examples/analysis/conditions/demo/bidirectional-interval.ts
index 11edd7e502..df0f7cdcb5 100644
--- a/s2-site/examples/analysis/conditions/demo/bidirectional-interval.ts
+++ b/s2-site/examples/analysis/conditions/demo/bidirectional-interval.ts
@@ -1,13 +1,13 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4e49b398-5121-4f00-9607-4854aedd5a21.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -26,7 +26,8 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/conditions/demo/gradient-interval.ts b/s2-site/examples/analysis/conditions/demo/gradient-interval.ts
index 2a2394fcba..d56edf53fb 100644
--- a/s2-site/examples/analysis/conditions/demo/gradient-interval.ts
+++ b/s2-site/examples/analysis/conditions/demo/gradient-interval.ts
@@ -1,12 +1,13 @@
 import { PivotSheet } from '@antv/s2';
 
 // 可借助 tinygradient 完成功能更全面的颜色过渡
-function getGradient(rate, startColor, endColor) {
-  function toGgb(color) {
+function getGradient(rate: number, startColor: string, endColor: string) {
+  function toGgb(color: string) {
     color = color.slice(1);
     const r = parseInt(color.substring(0, 2), 16);
     const g = parseInt(color.substring(2, 4), 16);
     const b = parseInt(color.substring(4, 6), 16);
+
     return [r, g, b];
   }
   const start = toGgb(startColor);
@@ -14,6 +15,7 @@ function getGradient(rate, startColor, endColor) {
   const r = start[0] + (end[0] - start[0]) * rate;
   const g = start[1] + (end[1] - start[1]) * rate;
   const b = start[2] + (end[2] - start[2]) * rate;
+
   return `rgb(${r},${g},${b})`;
 }
 
@@ -21,7 +23,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options = {
@@ -40,6 +42,7 @@ fetch(
               const rage = (fieldValue - minValue) / (maxValue - minValue);
 
               const color = getGradient(rage, '#95F0FF', '#3A9DBF');
+
               return {
                 fill: `l(0) 0:#95F0FF 1:${color}`,
                 isCompare: true,
@@ -50,7 +53,8 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/conditions/demo/icon.ts b/s2-site/examples/analysis/conditions/demo/icon.ts
index 35483b0fe9..c87407699c 100644
--- a/s2-site/examples/analysis/conditions/demo/icon.ts
+++ b/s2-site/examples/analysis/conditions/demo/icon.ts
@@ -1,13 +1,13 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -52,7 +52,8 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/conditions/demo/intelligent-background.ts b/s2-site/examples/analysis/conditions/demo/intelligent-background.ts
index 18e8f53d3c..ce421fba5e 100644
--- a/s2-site/examples/analysis/conditions/demo/intelligent-background.ts
+++ b/s2-site/examples/analysis/conditions/demo/intelligent-background.ts
@@ -1,13 +1,13 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -30,5 +30,5 @@ fetch(
     };
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/conditions/demo/interval.ts b/s2-site/examples/analysis/conditions/demo/interval.ts
index 2dce6f6e74..a31a322ae7 100644
--- a/s2-site/examples/analysis/conditions/demo/interval.ts
+++ b/s2-site/examples/analysis/conditions/demo/interval.ts
@@ -1,13 +1,13 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -31,7 +31,8 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/conditions/demo/multi-background.ts b/s2-site/examples/analysis/conditions/demo/multi-background.ts
index 0d04d7ba69..81a48c8f31 100644
--- a/s2-site/examples/analysis/conditions/demo/multi-background.ts
+++ b/s2-site/examples/analysis/conditions/demo/multi-background.ts
@@ -1,13 +1,13 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -34,23 +34,32 @@ fetch(
                 return {
                   fill: '#B8E1FF',
                 };
-              } else if (fieldValue <= 2797) {
+              }
+
+              if (fieldValue <= 2797) {
                 return {
                   fill: '#9AC5FF',
                 };
-              } else if (fieldValue <= 4191) {
+              }
+
+              if (fieldValue <= 4191) {
                 return {
                   fill: '#7DAAFF',
                 };
-              } else if (fieldValue <= 5588) {
+              }
+
+              if (fieldValue <= 5588) {
                 return {
                   fill: '#5B8FF9',
                 };
-              } else if (fieldValue <= 6985) {
+              }
+
+              if (fieldValue <= 6985) {
                 return {
                   fill: '#3D76DD',
                 };
               }
+
               return {
                 fill: '#085EC0',
               };
@@ -59,7 +68,8 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/conditions/demo/multi-conditions.ts b/s2-site/examples/analysis/conditions/demo/multi-conditions.ts
index 9cff6c0aee..915de528a9 100644
--- a/s2-site/examples/analysis/conditions/demo/multi-conditions.ts
+++ b/s2-site/examples/analysis/conditions/demo/multi-conditions.ts
@@ -1,12 +1,13 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 // 可借助 tinygradient 完成功能更全面的颜色过渡
-function getGradient(rate, startColor, endColor) {
-  function toGgb(color) {
+function getGradient(rate: number, startColor: string, endColor: string) {
+  function toGgb(color: string) {
     color = color.slice(1);
     const r = parseInt(color.substring(0, 2), 16);
     const g = parseInt(color.substring(2, 4), 16);
     const b = parseInt(color.substring(4, 6), 16);
+
     return [r, g, b];
   }
   const start = toGgb(startColor);
@@ -14,6 +15,7 @@ function getGradient(rate, startColor, endColor) {
   const r = start[0] + (end[0] - start[0]) * rate;
   const g = start[1] + (end[1] - start[1]) * rate;
   const b = start[2] + (end[2] - start[2]) * rate;
+
   return `rgb(${r},${g},${b})`;
 }
 
@@ -21,11 +23,11 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
     const s2DataConfig = dataCfg;
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -73,6 +75,7 @@ fetch(
               const rage = (fieldValue - minValue) / (maxValue - minValue);
 
               const color = getGradient(rage, '#5083F5', '#F7B46F');
+
               return {
                 fill: `l(0) 0:#5083F5 1:${color}`,
                 isCompare: true,
@@ -83,7 +86,9 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
     s2.setThemeCfg({ name: 'colorful' });
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/conditions/demo/table-text.ts b/s2-site/examples/analysis/conditions/demo/table-text.ts
index 25c99f29eb..ac421e5bca 100644
--- a/s2-site/examples/analysis/conditions/demo/table-text.ts
+++ b/s2-site/examples/analysis/conditions/demo/table-text.ts
@@ -1,12 +1,12 @@
-import { TableSheet } from '@antv/s2';
+import { S2DataConfig, S2Options, S2Options, TableSheet } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/986d48ce-cfdf-475d-980c-553762770928.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['province', 'city', 'type', 'price', 'cost'],
       },
@@ -35,7 +35,7 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -62,7 +62,8 @@ fetch(
         ],
       },
     };
+
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/conditions/demo/text.ts b/s2-site/examples/analysis/conditions/demo/text.ts
index 4de67376e7..3bda6b622c 100644
--- a/s2-site/examples/analysis/conditions/demo/text.ts
+++ b/s2-site/examples/analysis/conditions/demo/text.ts
@@ -1,13 +1,13 @@
-import { PivotSheet, EXTRA_FIELD } from '@antv/s2';
+import { PivotSheet, EXTRA_FIELD, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -66,7 +66,8 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/sort/demo/custom-list.ts b/s2-site/examples/analysis/sort/demo/custom-list.ts
index 67ea91caa4..ce21eed818 100644
--- a/s2-site/examples/analysis/sort/demo/custom-list.ts
+++ b/s2-site/examples/analysis/sort/demo/custom-list.ts
@@ -1,10 +1,10 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -40,11 +40,12 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       ],
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/sort/demo/custom-measure.ts b/s2-site/examples/analysis/sort/demo/custom-measure.ts
index 4508d5c7ea..1028b4247a 100644
--- a/s2-site/examples/analysis/sort/demo/custom-measure.ts
+++ b/s2-site/examples/analysis/sort/demo/custom-measure.ts
@@ -1,10 +1,10 @@
-import { PivotSheet, EXTRA_FIELD } from '@antv/s2';
+import { PivotSheet, EXTRA_FIELD, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -58,11 +58,12 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       ],
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/sort/demo/custom-method.ts b/s2-site/examples/analysis/sort/demo/custom-method.ts
index f4a3c3d22f..32600cbd9b 100644
--- a/s2-site/examples/analysis/sort/demo/custom-method.ts
+++ b/s2-site/examples/analysis/sort/demo/custom-method.ts
@@ -1,10 +1,10 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -40,11 +40,12 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       ],
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/sort/demo/custom-sort-func.ts b/s2-site/examples/analysis/sort/demo/custom-sort-func.ts
index fd46142a81..86a5fc8610 100644
--- a/s2-site/examples/analysis/sort/demo/custom-sort-func.ts
+++ b/s2-site/examples/analysis/sort/demo/custom-sort-func.ts
@@ -1,10 +1,10 @@
-import { PivotSheet, EXTRA_FIELD } from '@antv/s2';
+import { PivotSheet, EXTRA_FIELD, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -39,6 +39,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
           sortFieldId: 'province',
           sortFunc: (params) => {
             const { data } = params;
+
             return data?.sort((a, b) => a?.localeCompare(b));
           },
         },
@@ -48,8 +49,9 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
           sortByMeasure: 'price',
           // 当使用 sortByMeasure 时，可以传入 query 定位数值列表
           // 如下方限定 params.data 为 type=纸张, 数值=price 的数据
-          sortFunc: function (params) {
+          sortFunc(params) {
             const { data, sortByMeasure, sortFieldId } = params || {};
+
             return data
               ?.sort((a, b) => b[sortByMeasure] - a[sortByMeasure])
               ?.map((item) => item[sortFieldId]);
@@ -59,11 +61,12 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       ],
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/sort/demo/custom-totals.ts b/s2-site/examples/analysis/sort/demo/custom-totals.ts
index fe8d1f5602..b958e952b3 100644
--- a/s2-site/examples/analysis/sort/demo/custom-totals.ts
+++ b/s2-site/examples/analysis/sort/demo/custom-totals.ts
@@ -1,12 +1,18 @@
-import { PivotSheet, EXTRA_FIELD, TOTAL_VALUE } from '@antv/s2';
+import {
+  PivotSheet,
+  EXTRA_FIELD,
+  TOTAL_VALUE,
+  S2DataConfig,
+  S2Options,
+} from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4347c2dd-6554-451b-9d44-15b04e5de657.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -54,7 +60,7 @@ fetch(
       ],
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       totals: {
@@ -74,7 +80,8 @@ fetch(
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/sort/demo/group-sort.tsx b/s2-site/examples/analysis/sort/demo/group-sort.tsx
index bd2ec1d21a..29760ada2f 100644
--- a/s2-site/examples/analysis/sort/demo/group-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/group-sort.tsx
@@ -2,13 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import { S2DataConfig } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/21ffc284-50a2-4a30-8bb0-b2f9ac4a8fbc.json',
 )
   .then((res) => res.json())
   .then((data) => {
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -38,7 +39,7 @@ fetch(
     const s2Options = {
       width: 600,
       height: 480,
-      showDefaultHeaderActionIcon: true, // 默认打开
+      showDefaultHeaderActionIcon: true,
     };
 
     ReactDOM.render(
diff --git a/s2-site/examples/analysis/sort/demo/table-sort.tsx b/s2-site/examples/analysis/sort/demo/table-sort.tsx
index 7313e461d7..905ee0086f 100644
--- a/s2-site/examples/analysis/sort/demo/table-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/table-sort.tsx
@@ -1,20 +1,21 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { orderBy } from 'lodash';
+import { S2DataConfig } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import '@antv/s2-react/dist/style.min.css';
 import { Button } from 'antd';
-import { SheetComponent } from '@antv/s2-react';
 import insertCss from 'insert-css';
-import '@antv/s2-react/dist/style.min.css';
+import { orderBy } from 'lodash';
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
   .then((res) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['province', 'city', 'type', 'price', 'cost'],
       },
@@ -51,6 +52,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
 
     const App = () => {
       const [dataCfg, setDataCfg] = useState(s2DataConfig);
+
       return (
         <>
           <Button
@@ -136,8 +138,8 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
 // 推荐将样式添加到自己的样式文件中
 // 若拷贝官方代码，别忘了 npm install insert-css
 insertCss(`
-.ant-btn {
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
+  .ant-btn {
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
 `);
diff --git a/s2-site/examples/analysis/totals/demo/basic.ts b/s2-site/examples/analysis/totals/demo/basic.ts
index a95a2e33f2..f4f39b9aa9 100644
--- a/s2-site/examples/analysis/totals/demo/basic.ts
+++ b/s2-site/examples/analysis/totals/demo/basic.ts
@@ -1,12 +1,12 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4347c2dd-6554-451b-9d44-15b04e5de657.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -33,15 +33,15 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
-      selectedCellsSpotlight: true,
-      hoverHighlight: true,
       tooltip: {
         enable: true,
       },
       interaction: {
+        selectedCellsSpotlight: true,
+        hoverHighlight: true,
         enableCopy: true,
       },
       // 配置小计总计显示
@@ -62,7 +62,8 @@ fetch(
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/totals/demo/calculate.ts b/s2-site/examples/analysis/totals/demo/calculate.ts
index f76e0b1495..4fbbeb7852 100644
--- a/s2-site/examples/analysis/totals/demo/calculate.ts
+++ b/s2-site/examples/analysis/totals/demo/calculate.ts
@@ -1,10 +1,10 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -31,7 +31,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       // 配置小计总计显示
@@ -64,7 +64,8 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/totals/demo/custom.ts b/s2-site/examples/analysis/totals/demo/custom.ts
index b65ab5ace4..ed76ea085d 100644
--- a/s2-site/examples/analysis/totals/demo/custom.ts
+++ b/s2-site/examples/analysis/totals/demo/custom.ts
@@ -1,10 +1,10 @@
-import { PivotSheet, EXTRA_FIELD } from '@antv/s2';
+import { PivotSheet, EXTRA_FIELD, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -39,7 +39,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       return sum * 2;
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       // 配置小计总计显示
@@ -72,7 +72,8 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/totals/demo/multiple-values.ts b/s2-site/examples/analysis/totals/demo/multiple-values.ts
index 3162452b82..6d2d1beb59 100644
--- a/s2-site/examples/analysis/totals/demo/multiple-values.ts
+++ b/s2-site/examples/analysis/totals/demo/multiple-values.ts
@@ -1,12 +1,12 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/6eede6eb-8021-4da8-bb12-67891a5705b7.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -37,16 +37,16 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
-      selectedCellsSpotlight: true,
-      hoverHighlight: true,
       tooltip: {
         enable: true,
       },
       interaction: {
         enableCopy: true,
+        selectedCellsSpotlight: true,
+        hoverHighlight: true,
       },
       // 配置小计总计显示
       totals: {
@@ -66,7 +66,8 @@ fetch(
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/totals/demo/tree.ts b/s2-site/examples/analysis/totals/demo/tree.ts
index daeaa19521..5afb41b85e 100644
--- a/s2-site/examples/analysis/totals/demo/tree.ts
+++ b/s2-site/examples/analysis/totals/demo/tree.ts
@@ -1,12 +1,12 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4347c2dd-6554-451b-9d44-15b04e5de657.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -33,7 +33,7 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       hierarchyType: 'tree',
@@ -62,7 +62,8 @@ fetch(
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/basic/pivot/demo/grid.ts b/s2-site/examples/basic/pivot/demo/grid.ts
index bd3947c201..af160d5f3c 100644
--- a/s2-site/examples/basic/pivot/demo/grid.ts
+++ b/s2-site/examples/basic/pivot/demo/grid.ts
@@ -1,17 +1,52 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
+    const s2DataConfig = {
+      ...dataCfg,
+      meta: [
+        {
+          field: 'province',
+          name: '省份',
+        },
+        {
+          field: 'city',
+          name: '城市',
+        },
+        {
+          field: 'type',
+          name: '商品类别',
+        },
+        {
+          field: 'sub_type',
+          name: '子类别',
+        },
+        {
+          field: 'number',
+          name: '数量',
+          // 自定义格式化
+          // formatter: (value, record, meta) => {
+          //   return `${value / 100} %`;
+          // },
+        },
+      ],
+    };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
+      interaction: {
+        enableCopy: true,
+        copyWithFormat: true,
+        copyWithHeader: true,
+      },
     };
-    const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    await s2.render();
   });
diff --git a/s2-site/examples/basic/pivot/demo/tree.ts b/s2-site/examples/basic/pivot/demo/tree.ts
index c0d893c038..0c6e44f1bd 100644
--- a/s2-site/examples/basic/pivot/demo/tree.ts
+++ b/s2-site/examples/basic/pivot/demo/tree.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
@@ -15,5 +15,5 @@ fetch(
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/basic/table/demo/table.ts b/s2-site/examples/basic/table/demo/table.ts
index 1333265372..627c4bfc8f 100644
--- a/s2-site/examples/basic/table/demo/table.ts
+++ b/s2-site/examples/basic/table/demo/table.ts
@@ -2,7 +2,7 @@ import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
       fields: {
@@ -41,5 +41,5 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/case/art/demo/mosaic.tsx b/s2-site/examples/case/art/demo/mosaic.tsx
index 9ab898b317..fe8d561371 100644
--- a/s2-site/examples/case/art/demo/mosaic.tsx
+++ b/s2-site/examples/case/art/demo/mosaic.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import { ThemeCfg } from '@antv/s2';
 
 // more Info https://observablehq.com/@pearmini/mosaic-antv-s2
 
@@ -42,7 +43,7 @@ fetch(
       },
     };
 
-    const customTheme = {
+    const customTheme: ThemeCfg['theme'] = {
       rowCell: {
         cell: {
           backgroundColor: dataCfg.data[0].color,
diff --git a/s2-site/examples/case/art/demo/time-spend-abstract.tsx b/s2-site/examples/case/art/demo/time-spend-abstract.tsx
index 04c76d2696..8bdcf77441 100644
--- a/s2-site/examples/case/art/demo/time-spend-abstract.tsx
+++ b/s2-site/examples/case/art/demo/time-spend-abstract.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import insertCss from 'insert-css';
-import { SheetComponent } from '@antv/s2-react';
-import { DataCell } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import { DataCell, ThemeCfg } from '@antv/s2';
 import '@antv/s2-react/dist/style.min.css';
 
 const paletteLegendMap = [
@@ -40,6 +40,7 @@ const paletteLegendMap = [
     img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ',
   },
 ];
+
 // 自定义单元格
 class CustomDataCell extends DataCell {
   drawTextShape() {
@@ -48,8 +49,10 @@ class CustomDataCell extends DataCell {
       paletteLegendMap.find((v) => v.text === fieldValue)?.img ??
       'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ';
     const img = new Image();
+
     img.src = url;
     const { x, y, width, height } = this.meta;
+
     img.onload = () => {
       this.textShape = this.addShape('image', {
         attrs: {
@@ -67,7 +70,7 @@ class CustomDataCell extends DataCell {
 fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
   .then((res) => res.json())
   .then((s2DataConfig) => {
-    const s2Theme = {
+    const s2Theme: ThemeCfg['theme'] = {
       colCell: {
         text: {
           opacity: 0,
@@ -144,7 +147,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       },
     };
 
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 1150,
       height: 720,
       showDefaultHeaderActionIcon: false,
@@ -165,6 +168,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
         },
       },
     };
+
     const PaletteLegend = () => (
       <div className="palette">
         {paletteLegendMap.map((value, key) => (
@@ -175,6 +179,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
         ))}
       </div>
     );
+
     ReactDOM.render(
       <div className="sheet-wrapper">
         <PaletteLegend />
diff --git a/s2-site/examples/case/comparison/demo/measure-comparison.tsx b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
index eae238e3ed..54c642e4bd 100644
--- a/s2-site/examples/case/comparison/demo/measure-comparison.tsx
+++ b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
@@ -8,14 +8,17 @@ import {
   Frame,
   ID_SEPARATOR,
   measureTextWidth,
+  S2DataConfig,
 } from '@antv/s2';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
 const UP_COLOR = '#F46649';
 const DOWN_COLOR = '#2AA491';
-const TAG_HEIGHT = 20; // 指标高度
-const TAG_WIDTH = 80; // 指标宽度
+// 指标高度
+const TAG_HEIGHT = 20;
+// 指标宽度
+const TAG_WIDTH = 80;
 
 class CustomColCell extends ColCell {
   lineConfig = {};
@@ -183,8 +186,9 @@ class CustomDataCell extends DataCell {
 
   // 自定义icon显示
   getIconStyle() {
-    const tagName = Object.keys(this.customConditions).find((item) =>
-      this.meta.colId?.includes(`root${ID_SEPARATOR}${item}${ID_SEPARATOR}`),
+    const tagName = Object.keys(this.customConditions).find(
+      (item) =>
+        this.meta.colId?.includes(`root${ID_SEPARATOR}${item}${ID_SEPARATOR}`),
     );
 
     if (tagName) {
@@ -199,8 +203,9 @@ class CustomDataCell extends DataCell {
 
   drawTextShape() {
     const { fieldValue } = this.meta;
-    const tagName = Object.keys(this.textConfig).find((item) =>
-      this.meta.colId?.includes(`root${ID_SEPARATOR}${item}${ID_SEPARATOR}`),
+    const tagName = Object.keys(this.textConfig).find(
+      (item) =>
+        this.meta.colId?.includes(`root${ID_SEPARATOR}${item}${ID_SEPARATOR}`),
     );
 
     if (!tagName) {
@@ -438,7 +443,7 @@ class CustomCornelCell extends CornerCell {
 fetch('https://assets.antv.antgroup.com/s2/index-comparison.json')
   .then((res) => res.json())
   .then((data) => {
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['type'],
         columns: ['tag'],
@@ -468,6 +473,7 @@ fetch('https://assets.antv.antgroup.com/s2/index-comparison.json')
       ],
       data,
     };
+
     const getIcon = (fieldValue) => {
       return parseFloat(fieldValue) > 0
         ? 'CellUp'
@@ -475,6 +481,7 @@ fetch('https://assets.antv.antgroup.com/s2/index-comparison.json')
         ? 'CellDown'
         : '';
     };
+
     const conditionsIcon = [
       {
         field: 'price',
@@ -512,18 +519,21 @@ fetch('https://assets.antv.antgroup.com/s2/index-comparison.json')
             : textStyle?.fill,
       };
     };
+
     // 列分组竖线样式配置
     const lineConfigStyle = {
       stroke: '#3471F9',
       lineWidth: 1,
       opacity: 0.5,
     };
+
     // 列分组配置
     const lineConfig = {
       price: 1,
       pv: 1,
     };
-    const s2Options = {
+
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
       showDefaultHeaderActionIcon: false,
diff --git a/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx b/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
index 18f8eb74cc..ad4b46776c 100644
--- a/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
+++ b/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
@@ -75,6 +75,7 @@ const getFormatter =
   (value) => {
     const prefix = enablePrefix && value > 0 ? '+' : '';
     const suffix = value !== 0 ? '%' : '';
+
     return `${prefix}${value}${suffix}`;
   };
 
@@ -90,6 +91,7 @@ class CustomColCell extends ColCell {
 
   renderGroupSeparator() {
     const { label, isLeaf } = this.meta;
+
     // 只需要为 A B 群组绘制标识
     if (!isLeaf || label === 'people-group-delta') {
       return;
@@ -97,6 +99,7 @@ class CustomColCell extends ColCell {
 
     const fill = GROUP_COLOR[label];
     const { x, y, height } = this.textShape.getBBox();
+
     this.addShape('rect', {
       attrs: {
         x: x - GROUP_SEPARATOR_WIDTH * 1.5,
@@ -195,6 +198,7 @@ fetch('https://assets.antv.antgroup.com/s2/multiple-people-comparison.json')
             field: 'people-group-delta',
             mapping(value) {
               const { color } = getTargetColor(value);
+
               return {
                 fill: color,
               };
@@ -206,6 +210,7 @@ fetch('https://assets.antv.antgroup.com/s2/multiple-people-comparison.json')
             field: 'people-group-delta',
             mapping(value) {
               const { background } = getTargetColor(value);
+
               return {
                 fill: background,
               };
diff --git a/s2-site/examples/case/comparison/demo/philosophers.tsx b/s2-site/examples/case/comparison/demo/philosophers.tsx
index 47952a4339..0e6d6220e3 100644
--- a/s2-site/examples/case/comparison/demo/philosophers.tsx
+++ b/s2-site/examples/case/comparison/demo/philosophers.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { max, min, replace } from 'lodash';
 import insertCss from 'insert-css';
-
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import { S2DataConfig } from '@antv/s2';
 
 const PALETTE_COLORS = [
   '#B8E1FF',
@@ -45,12 +45,12 @@ fetch(
     const getFormatter = (val) => {
       if (val < 0) {
         return `公元前${replace(val, '-', '')}年`;
-      } else {
-        return `${val}年`;
       }
+
+      return `${val}年`;
     };
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['country', 'name', 'start', 'end', 'points', 'word'],
         columns: [],
@@ -91,10 +91,12 @@ fetch(
       ],
       data,
     };
+
     const TooltipContent = (props) => {
       const { rowQuery, fieldValue } = props;
       const { name, country, start, end, points } = rowQuery;
-      const ponitsLines = points.split('&');
+      const pointsLines = points.split('&');
+
       return (
         <div className="antv-s2-tooltip-container">
           <div className="antv-s2-tooltip-head-info-list">
@@ -102,17 +104,17 @@ fetch(
             <div>国家：{country}</div>
             <div>出生：{getFormatter(start)}</div>
             <div>逝世：{getFormatter(end)}</div>
-            {ponitsLines.length > 1 ? (
+            {pointsLines.length > 1 ? (
               <div>
                 观点:
-                {ponitsLines.map((point, index) => (
-                  <div>
+                {pointsLines.map((point, index) => (
+                  <div key={index}>
                     {index + 1}: {point}
                   </div>
                 ))}
               </div>
             ) : (
-              <div>观点: {ponitsLines[0]}</div>
+              <div>观点: {pointsLines[0]}</div>
             )}
           </div>
           <div className="antv-s2-tooltip-divider"></div>
@@ -127,8 +129,8 @@ fetch(
         </div>
       );
     };
-    const s2Options = {
-      width: '',
+
+    const s2Options: SheetComponentOptions = {
       height: 400,
       conditions: {
         text: [
@@ -153,6 +155,7 @@ fetch(
                   (((value - minWeight) / weightSpan) * 100) /
                     PALETTE_COLORS.length,
                 ) - 1;
+
               if (colorIndex <= 0) {
                 backgroundColor = PALETTE_COLORS[0];
               } else if (colorIndex >= PALETTE_COLORS.length) {
@@ -176,6 +179,7 @@ fetch(
 
     const onDataCellMouseUp = (value) => {
       const viewMeta = value?.viewMeta;
+
       if (!viewMeta) {
         return;
       }
@@ -184,6 +188,7 @@ fetch(
         x: value.event.clientX,
         y: value.event.clientY,
       };
+
       viewMeta.spreadsheet.tooltip.show({
         position,
         content: TooltipContent(viewMeta),
@@ -197,11 +202,10 @@ fetch(
         adaptive={true}
         header={{
           title: '哲学家的观点',
-          extra: [<PaletteLegend />],
+          extra: <PaletteLegend />,
         }}
         onDataCellMouseUp={onDataCellMouseUp}
       />,
-
       document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/case/comparison/demo/time-spend.tsx b/s2-site/examples/case/comparison/demo/time-spend.tsx
index 620b5f5c43..d31dce83d9 100644
--- a/s2-site/examples/case/comparison/demo/time-spend.tsx
+++ b/s2-site/examples/case/comparison/demo/time-spend.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import insertCss from 'insert-css';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import { DataCell, Frame, S2Theme } from '@antv/s2';
+import { DataCell, Frame, S2Theme, ThemeCfg } from '@antv/s2';
 import '@antv/s2-react/dist/style.min.css';
 
 const paletteLegendMap = [
@@ -171,7 +171,7 @@ class CustomFrame extends Frame {
 fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
   .then((res) => res.json())
   .then((s2DataConfig) => {
-    const s2Palette = {
+    const s2Palette: ThemeCfg['palette'] = {
       basicColors: [
         '#FFFFFF',
         '#020138',
@@ -195,7 +195,8 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
         green: '#29A294',
       },
     };
-    const s2Theme: S2Theme = {
+
+    const s2Theme: ThemeCfg['theme'] = {
       colCell: {
         bolderText: {
           fontSize: 12,
@@ -267,6 +268,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
         },
       },
     };
+
     const PaletteLegend = () => (
       <div className="palette">
         {paletteLegendMap.map((value, key) => (
diff --git a/s2-site/examples/case/data-preview/demo/excel.tsx b/s2-site/examples/case/data-preview/demo/excel.tsx
index 1a15f5f29e..7f2852cb87 100644
--- a/s2-site/examples/case/data-preview/demo/excel.tsx
+++ b/s2-site/examples/case/data-preview/demo/excel.tsx
@@ -1,11 +1,12 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import 'antd/es/checkbox/style/index.css';
+import { S2DataConfig } from '@antv/s2';
 
 // 初始化配置
-const s2Options = {
+const s2Options: SheetComponentOptions = {
   width: 600,
   height: 400,
   showSeriesNumber: true,
@@ -15,15 +16,16 @@ const s2Options = {
 };
 
 // 初始化数据
-const s2DataCfg = {
+const s2DataCfg: S2DataConfig = {
   fields: { columns: ['province', 'city', 'type', 'price'] },
   sortParams: [],
+  data: [],
 };
 
 const App = ({ data }) => {
   const S2Ref = useRef(null);
-  const [options, setOptions] = useState(s2Options);
-  const [dataCfg, setDataCfg] = useState({ ...s2DataCfg, data });
+  const [options, setOptions] = useState<SheetComponentOptions>(s2Options);
+  const [dataCfg, setDataCfg] = useState<S2DataConfig>({ ...s2DataCfg, data });
 
   return (
     <div style={{ position: 'relative' }}>
diff --git a/s2-site/examples/case/data-preview/demo/house.tsx b/s2-site/examples/case/data-preview/demo/house.tsx
index 351225cb19..ab5f5673d1 100644
--- a/s2-site/examples/case/data-preview/demo/house.tsx
+++ b/s2-site/examples/case/data-preview/demo/house.tsx
@@ -1,15 +1,10 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Select, InputNumber, Space } from 'antd';
-import {
-  every,
-  filter, isNil,
-  last,
-  map,
-  omit,
-} from 'lodash';
-import { SheetComponent } from '@antv/s2-react';
+import { every, filter, isNil, last, map, omit } from 'lodash';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import insertCss from 'insert-css';
+import { S2DataConfig, SortParams } from '@antv/s2';
 
 const ID_SEPARATOR = '[&]';
 const defaultHouseInfo = {
@@ -25,7 +20,8 @@ const defaultHouseInfo = {
   ],
   area: [92, 111, 114, 119, 120, 123, 125, 135, 138],
 };
-const s2Options = {
+
+const s2Options: SheetComponentOptions = {
   width: 700,
   height: 580,
   pagination: {
@@ -44,6 +40,7 @@ const s2Options = {
               fill: '#b8e1ff',
             };
           }
+
           return {
             fill: '#fff',
           };
@@ -52,7 +49,8 @@ const s2Options = {
     ],
   },
 };
-const defaultSortParams = [
+
+const defaultSortParams: S2DataConfig['sortParams'] = [
   {
     sortFieldId: 'name',
     sortMethod: 'ASC',
@@ -64,16 +62,18 @@ const defaultSortParams = [
   {
     sortFieldId: 'level',
     sortFunc: (params) => {
-      const { data } = params;
+      const { data = [] } = params;
+
       return data.sort((a, b) => {
         const aNum = last(a.split(ID_SEPARATOR));
         const bNum = last(b.split(ID_SEPARATOR));
+
         return aNum - bNum;
       });
     },
   },
 ];
-const dataConfig = {
+const dataConfig: S2DataConfig = {
   data: [],
   describe: '如何使用 S2 买房',
   fields: {
@@ -146,7 +146,7 @@ const SelectItem = (props) => {
       onChange={(value) => {
         onChange({
           key: dataName,
-          value: value,
+          value,
         });
       }}
     >
@@ -166,6 +166,7 @@ const RangeSelect = (props) => {
   const [info, setInfo] = useState({ min, max });
   const handleChange = (value, key) => {
     const tempInfo = Object.assign({}, info);
+
     tempInfo[key] = value;
     setInfo(tempInfo);
 
@@ -201,11 +202,13 @@ const SelectList = (props) => {
 
   const onChange = ({ key, value }) => {
     let tempHouseInfo = Object.assign({}, filterInfo);
+
     if (isNil(value)) {
       tempHouseInfo = omit(tempHouseInfo, key);
     } else {
       tempHouseInfo[key] = value;
     }
+
     setFilterInfo(tempHouseInfo);
     filterData(tempHouseInfo);
   };
@@ -237,16 +240,20 @@ const Sheet = ({ data }) => {
         if (key === 'area') {
           return value[0] <= item.area && value[1] >= item.area;
         }
+
         if (key === 'level') {
           return value[0] <= item.level && value[1] >= item.level;
         }
-        if(key === 'nearStreet') {
-          console.log(item.nearStreet, 'item.nearStreet',  value, 'value');
+
+        if (key === 'nearStreet') {
+          console.log(item.nearStreet, 'item.nearStreet', value, 'value');
           console.log(item.nearStreet === value, 'item.nearStreet === value');
         }
+
         return item[key] === value;
       });
     });
+
     setDataSource(result);
   };
 
diff --git a/s2-site/examples/case/data-preview/demo/index.tsx b/s2-site/examples/case/data-preview/demo/index.tsx
index 0498e2c3e7..e397da29a0 100644
--- a/s2-site/examples/case/data-preview/demo/index.tsx
+++ b/s2-site/examples/case/data-preview/demo/index.tsx
@@ -9,8 +9,9 @@ import {
   S2Event,
   InteractionStateName,
   CellType,
+  S2DataConfig,
 } from '@antv/s2';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import {
   Input,
   Divider,
@@ -25,7 +26,6 @@ import {
 } from 'antd';
 import { get, uniq } from 'lodash';
 import '@antv/s2-react/dist/style.min.css';
-import 'antd/es/checkbox/style/index.css';
 
 const { Search } = Input;
 
@@ -245,7 +245,7 @@ const App = ({ data }) => {
   const [interactedCol, setInteractedCol] = useState('');
   const modalCallbackRef = useRef((e) => {});
 
-  const [options, setOptions] = useState({
+  const options: SheetComponentOptions = {
     width: 600,
     height: 400,
     showSeriesNumber: true,
@@ -286,8 +286,9 @@ const App = ({ data }) => {
       },
     },
     showDefaultHeaderActionIcon: false,
-  });
-  const [dataCfg, setDataCfg] = useState({
+  };
+
+  const [dataCfg, setDataCfg] = useState<S2DataConfig>({
     fields: {
       columns,
     },
diff --git a/s2-site/examples/case/kpi-strategy/demo/basic.tsx b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
index 1d1340fb07..7e86c24993 100644
--- a/s2-site/examples/case/kpi-strategy/demo/basic.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
@@ -36,12 +36,15 @@ const PADDING = 10;
 
 function getStatusColorByProgress(realProgress, expectedProgress) {
   const leftWorker = expectedProgress - realProgress;
+
   if (leftWorker <= 0.1) {
     return STATUS_COLOR.healthy;
   }
+
   if (leftWorker > 0.1 && leftWorker <= 0.3) {
     return STATUS_COLOR.late;
   }
+
   return STATUS_COLOR.danger;
 }
 
@@ -59,10 +62,13 @@ class KpiStrategyDataCell extends DataCell {
   // 如果是进度, 格式化为百分比 (只做 demo 示例, 请根据实际情况使用)
   getFormattedFieldValue() {
     const { data } = this.meta;
+
     if (!data || !data.isProgress) {
       return super.getFormattedFieldValue();
     }
+
     const formattedValue = `${data.value * 100} %`;
+
     return { formattedValue, value: data.value };
   }
 
@@ -70,9 +76,11 @@ class KpiStrategyDataCell extends DataCell {
   renderDeriveValue() {
     // 通过 this.meta 拿到当前单元格的有效信息
     const { x, width, data } = this.meta;
+
     if (!data || data.isExtra) {
       return;
     }
+
     const value = data?.compare ?? '';
     const isDown = value.startsWith('-');
     const color = isDown ? DERIVE_COLOR.down : DERIVE_COLOR.up;
@@ -105,9 +113,11 @@ class KpiStrategyDataCell extends DataCell {
 
   renderProgressBar() {
     const { x, y, width, height, data } = this.meta;
+
     if (!data || !data.isProgress) {
       return;
     }
+
     const currentProgress = data.value;
     const expectedProgress = data.expectedValue;
 
@@ -244,7 +254,7 @@ fetch('https://assets.antv.antgroup.com/s2/kpi-strategy.json')
         options={s2Options}
         sheetType="pivot"
         themeCfg={{
-          theme: merge({}, theme),
+          theme,
         }}
       />,
       document.getElementById('container'),
diff --git a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
index 3c9bee4ee6..561b031b19 100644
--- a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
@@ -35,6 +35,7 @@ fetch(
                   fill: '#000',
                 };
               }
+
               return {
                 fill: isUpDataValue(value) ? '#FF4D4F' : '#29A294',
               };
@@ -51,6 +52,7 @@ fetch(
               if (colIndex === 0 || isNilValue) {
                 return null;
               }
+
               return isUpDataValue(value)
                 ? {
                     // icon 用于指定图标条件格式所使用的 icon 类型
diff --git a/s2-site/examples/case/performance-compare/demo/basic.tsx b/s2-site/examples/case/performance-compare/demo/basic.tsx
index 250f590324..e06e30caa2 100644
--- a/s2-site/examples/case/performance-compare/demo/basic.tsx
+++ b/s2-site/examples/case/performance-compare/demo/basic.tsx
@@ -1,8 +1,9 @@
+import { S2DataConfig } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import '@antv/s2-react/dist/style.min.css';
+import { compact } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { compact } from 'lodash';
-import { SheetComponent } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
 
 const disableColor = '#d3d7d4';
 const colors = [
@@ -19,19 +20,21 @@ const colors = [
 function getRange(data) {
   const values = data.map((d) => d.value);
   const compactValue = compact(values);
+
   return {
     min: Math.min(...compactValue),
     max: Math.max(...compactValue),
   };
 }
 
-function getIndex(fieldValue, rawData) {
+function getIndex(fieldValue: number, rawData: S2DataConfig['data']) {
   const { min, max } = getRange(rawData);
   const step = Math.floor((max - min) / (colors.length - 1));
+
   return Math.floor((fieldValue - min) / step);
 }
 
-function getDataConfig(rawData) {
+function getDataConfig(rawData: S2DataConfig['data']): S2DataConfig {
   return {
     fields: {
       rows: ['size', 'name'],
@@ -60,7 +63,7 @@ function getDataConfig(rawData) {
   };
 }
 
-function getOptions(rawData) {
+function getOptions(rawData: S2DataConfig['data']): SheetComponentOptions {
   return {
     width: 600,
     height: 200,
@@ -74,6 +77,7 @@ function getOptions(rawData) {
           field: 'value',
           mapping(fieldValue) {
             const index = getIndex(fieldValue, rawData);
+
             return {
               fill: fieldValue ? colors[index] : disableColor,
             };
diff --git a/s2-site/examples/case/performance-compare/demo/pivot.tsx b/s2-site/examples/case/performance-compare/demo/pivot.tsx
index 5df2baa624..ebcb86caa2 100644
--- a/s2-site/examples/case/performance-compare/demo/pivot.tsx
+++ b/s2-site/examples/case/performance-compare/demo/pivot.tsx
@@ -1,12 +1,15 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig } from '@antv/s2';
 
 const s2Options = {
   width: 600,
   height: 480,
 };
 
-export function generateRawData(row, col) {
-  const res = [];
+export function generateRawData(
+  row: Record<string, number>,
+  col: Record<string, number>,
+) {
+  const res: Record<string, any>[] = [];
   const rowKeys = Object.keys(row);
   const colKeys = Object.keys(col);
 
@@ -29,7 +32,7 @@ export function generateRawData(row, col) {
   return res;
 }
 
-const s2DataConfig = {
+const s2DataConfig: S2DataConfig = {
   fields: {
     rows: ['type', 'subType'],
     columns: ['province', 'city'],
@@ -40,8 +43,13 @@ const s2DataConfig = {
     { type: 10, sub_type: 100 },
   ),
 };
-const container = document.getElementById('container');
 
-const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+async function bootstrap() {
+  const container = document.getElementById('container');
 
-s2.render();
+  const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+  await s2.render();
+}
+
+bootstrap();
diff --git a/s2-site/examples/case/performance-compare/demo/table.tsx b/s2-site/examples/case/performance-compare/demo/table.tsx
index 70953ed1cb..5d7816c5ac 100644
--- a/s2-site/examples/case/performance-compare/demo/table.tsx
+++ b/s2-site/examples/case/performance-compare/demo/table.tsx
@@ -1,13 +1,16 @@
-import { TableSheet } from '@antv/s2';
+import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
 
-const s2Options = {
+const s2Options: S2Options = {
   width: 600,
   height: 480,
   showSeriesNumber: true,
 };
 
-export function generateRawData(row, col) {
-  const res = [];
+export function generateRawData(
+  row: Record<string, number>,
+  col: Record<string, number>,
+) {
+  const res: Record<string, any>[] = [];
 
   const rowKeys = Object.keys(row);
   const colKeys = Object.keys(col);
@@ -31,7 +34,7 @@ export function generateRawData(row, col) {
   return res;
 }
 
-const s2DataConfig = {
+const s2DataConfig: S2DataConfig = {
   fields: {
     columns: ['province', 'city', 'type', 'subType', 'number'],
   },
@@ -41,8 +44,12 @@ const s2DataConfig = {
   ),
 };
 
-const container = document.getElementById('container');
+async function bootstrap() {
+  const container = document.getElementById('container');
 
-const s2 = new TableSheet(container, s2DataConfig, s2Options);
+  const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-s2.render();
+  await s2.render();
+}
+
+bootstrap();
diff --git a/s2-site/examples/case/proportion/demo/group-drill-down.tsx b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
index 501d769dbd..e96f43d042 100644
--- a/s2-site/examples/case/proportion/demo/group-drill-down.tsx
+++ b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
 import { isUpDataValue } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import insertCss from 'insert-css';
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/ff31b171-17a7-4d29-b20a-0b90a810d2de.json',
@@ -12,7 +13,7 @@ fetch(
     const GridSheet = () => {
       const [s2DataConfig, setS2DataConfig] = useState(data.dataCfg);
       const [drillDownField, setDrillDownField] = useState('');
-      const s2Options = {
+      const s2Options: SheetComponentOptions = {
         width: 800,
         height: 600,
         tooltip: {
@@ -42,8 +43,9 @@ fetch(
                   };
                 }
 
+                // 同环比红张绿跌
                 return {
-                  fill: isUpDataValue(value) ? '#FF4D4F' : '#29A294', // 同环比红张绿跌
+                  fill: isUpDataValue(value) ? '#FF4D4F' : '#29A294',
                 };
               },
             },
@@ -145,7 +147,7 @@ fetch(
           header={{
             title: '人群网络分析',
             advancedSortCfg: { open: true },
-            extra: [<Breadcrumb />],
+            extra: <Breadcrumb />,
           }}
           onDataCellMouseUp={onDataCellMouseUp}
         />
diff --git a/s2-site/examples/custom/custom-cell/demo/col-cell.ts b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
index 3e71d34baa..a12e37c541 100644
--- a/s2-site/examples/custom/custom-cell/demo/col-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, ColCell } from '@antv/s2';
+import { PivotSheet, ColCell, S2Options, S2DataConfig } from '@antv/s2';
 
 /**
  * 自定义 ColCell，给列头添加背景图
@@ -20,9 +20,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -31,7 +31,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -41,8 +42,8 @@ fetch(
         return new CustomColCell(node, s2, headConfig);
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
index 04f2217bdb..c2be67dcdf 100644
--- a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, CornerCell } from '@antv/s2';
+import { PivotSheet, CornerCell, S2Options, S2DataConfig } from '@antv/s2';
 
 /**
  * 自定义 CornerCell，给角头添加背景图
@@ -19,9 +19,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -30,7 +30,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -40,8 +41,8 @@ fetch(
         return new CustomCornerCell(node, s2, headConfig);
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-cell/demo/corner-header.ts b/s2-site/examples/custom/custom-cell/demo/corner-header.ts
index 1b40471866..417b97581f 100644
--- a/s2-site/examples/custom/custom-cell/demo/corner-header.ts
+++ b/s2-site/examples/custom/custom-cell/demo/corner-header.ts
@@ -1,4 +1,4 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 import { Group } from '@antv/g-canvas';
 import { get } from 'lodash';
 
@@ -8,13 +8,17 @@ import { get } from 'lodash';
  */
 class CustomCornerHeader extends Group {
   node;
+
   backgroundShape;
+
   textShape;
+
   constructor(node) {
     super({});
     this.node = node;
     this.initCornerHeader();
   }
+
   initCornerHeader() {
     this.initBg();
     this.initText();
@@ -54,9 +58,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -65,7 +69,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -75,8 +80,8 @@ fetch(
         return new CustomCornerHeader(node);
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts
index f358fc338c..ce2fb37e8a 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, MergedCell } from '@antv/s2';
+import { PivotSheet, MergedCell, S2Options, S2DataConfig } from '@antv/s2';
 
 /**
  * 自定义 MergedCell，改变背景色
@@ -16,9 +16,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -27,7 +27,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -35,7 +36,8 @@ fetch(
       },
       mergedCellsInfo: [
         [
-          { colIndex: 1, rowIndex: 1, showText: true }, // 此单元格的 meta 信息将作为合并单元的 meta 信息
+          // 此单元格的 meta 信息将作为合并单元的 meta 信息
+          { colIndex: 1, rowIndex: 1, showText: true },
           { colIndex: 1, rowIndex: 2 },
           { colIndex: 2, rowIndex: 1 },
           { colIndex: 2, rowIndex: 2 },
@@ -44,8 +46,8 @@ fetch(
       mergedCell: (spreadsheet, cells, meta) =>
         new CustomMergedCell(spreadsheet, cells, meta),
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
index 13c641ae06..9be1907c32 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
@@ -1,5 +1,11 @@
 /* eslint-disable max-classes-per-file */
-import { PivotSheet, DataCell, ColCell } from '@antv/s2';
+import {
+  PivotSheet,
+  DataCell,
+  ColCell,
+  S2Options,
+  S2DataConfig,
+} from '@antv/s2';
 
 /**
  * 自定义 DataCell，给特定单元格设置背景色, 文字大小, 颜色
@@ -106,9 +112,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -117,7 +123,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       dataCell: (viewMeta) => {
@@ -128,8 +135,8 @@ fetch(
         return new CustomColCell(node, spreadsheet, headerConfig);
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell.ts b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
index 8b9ccff792..28b34b5eda 100644
--- a/s2-site/examples/custom/custom-cell/demo/data-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, DataCell } from '@antv/s2';
+import { PivotSheet, DataCell, S2DataConfig, S2Options } from '@antv/s2';
 
 /**
  * 自定义 DataCell，给数值单元格添加背景图
@@ -20,9 +20,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -31,18 +31,20 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
-        hoverHighlight: false, // 关闭 hover 十字高亮, 为了视觉效果，可不设置
+        // 关闭 hover 十字高亮, 为了视觉效果，可不设置
+        hoverHighlight: false,
       },
       dataCell: (viewMeta) => {
         return new CustomDataCell(viewMeta, viewMeta?.spreadsheet);
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-cell/demo/row-cell.ts b/s2-site/examples/custom/custom-cell/demo/row-cell.ts
index 7cb553f2b5..d8459ae619 100644
--- a/s2-site/examples/custom/custom-cell/demo/row-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/row-cell.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, RowCell } from '@antv/s2';
+import { PivotSheet, RowCell, S2DataConfig, S2Options } from '@antv/s2';
 
 /**
  * 自定义 RowCell，给行头添加背景图
@@ -20,9 +20,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -31,15 +31,16 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       rowCell: (node, s2, headConfig) => {
         return new CustomRowCell(node, s2, headConfig);
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts b/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
index de22f2a740..d1a692c466 100644
--- a/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
@@ -13,11 +13,15 @@ import {
 class CustomSeriesCell extends SeriesNumberCell {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
   getBackgroundColor() {
-    return { backgroundColor: 'cyan', backgroundColorOpacity: 0.5 };
+    return {
+      backgroundColor: 'cyan',
+      backgroundColorOpacity: 0.5,
+      intelligentReverseTextColor: false,
+    };
   }
 }
 
-const layoutSeriesNumberNodes = (
+const layoutSeriesNumberNodes: S2Options['layoutSeriesNumberNodes'] = (
   rowsHierarchy,
   seriesNumberWidth,
   spreadsheet,
@@ -32,7 +36,8 @@ const layoutSeriesNumberNodes = (
       id: '',
       field: '',
       rowIndex: idx,
-      value: `${String.fromCharCode(97 + idx)}`, // 序号从 a 开始递增，在大量数据下，需要更完善的处理
+      // 序号从 a 开始递增，在大量数据下，需要更完善的处理
+      value: `${String.fromCharCode(97 + idx)}`,
     });
 
     sNode.x = 0;
@@ -48,7 +53,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
       fields: {
@@ -59,18 +64,20 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
+
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      hierarchyType: 'tree', // 切换到 grid 模式试试看
+      // 切换到 grid 模式试试看
+      hierarchyType: 'tree',
       showSeriesNumber: true,
       layoutSeriesNumberNodes,
       seriesNumberCell: (node, s2, headConfig) => {
         return new CustomSeriesCell(node, s2, headConfig);
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-cell/demo/totals-cell.ts b/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
index 6115363d6a..e3d4d89116 100644
--- a/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
@@ -1,4 +1,10 @@
-import { PivotSheet, RowCell, renderRect } from '@antv/s2';
+import {
+  PivotSheet,
+  RowCell,
+  S2DataConfig,
+  S2Options,
+  renderRect,
+} from '@antv/s2';
 
 /**
  * 继承 RowCell, 单独修改小计/总计的背景色和文字颜色
@@ -14,6 +20,7 @@ class CustomTotalsRowCell extends RowCell {
         fill: '#f63',
         fillOpacity: 0.9,
       });
+
       return;
     }
 
@@ -24,6 +31,7 @@ class CustomTotalsRowCell extends RowCell {
         fill: '#06a',
         fillOpacity: 0.9,
       });
+
       return;
     }
 
@@ -62,9 +70,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -73,7 +81,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -95,7 +104,8 @@ fetch(
         return new CustomTotalsRowCell(node, s2, headConfig);
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts b/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts
index 7a8b264344..4a5e53c67f 100644
--- a/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts
+++ b/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts
@@ -120,24 +120,28 @@ const s2DataConfig: S2DataConfig = {
 
 const container = document.getElementById('container');
 
-const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+async function bootstrap() {
+  const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-// 监听数值单元格渲染完成后, 使用 `G2` 提供的 `renderToMountedElement` 将图表挂载在 `S2` 单元格实例上
-s2.on(S2Event.DATA_CELL_RENDER, (cell) => {
-  // 普通数值单元格正常展示
-  if (!cell.isChartData()) {
-    return;
-  }
+  // 监听数值单元格渲染完成后, 使用 `G2` 提供的 `renderToMountedElement` 将图表挂载在 `S2` 单元格实例上
+  s2.on(S2Event.DATA_CELL_RENDER, (cell) => {
+    // 普通数值单元格正常展示
+    if (!cell.isChartData()) {
+      return;
+    }
 
-  // 获取 G2 渲染到 S2 单元格内所需配置
-  const chartOptions = cell.getRenderChartOptions();
+    // 获取 G2 渲染到 S2 单元格内所需配置
+    const chartOptions = cell.getRenderChartOptions();
 
-  renderToMountedElement(chartOptions, {
-    // 指定渲染容器为当前单元格
-    group: cell,
-    // 根据渲染的图表, 自行选择 G2 library: https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib
-    library: stdlib(),
+    renderToMountedElement(chartOptions, {
+      // 指定渲染容器为当前单元格
+      group: cell,
+      // 根据渲染的图表, 自行选择 G2 library: https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib
+      library: stdlib(),
+    });
   });
-});
 
-s2.render();
+  await s2.render();
+}
+
+bootstrap();
diff --git a/s2-site/examples/custom/custom-icon/demo/custom-data-cell-icon.tsx b/s2-site/examples/custom/custom-icon/demo/custom-data-cell-icon.tsx
index 5cc3ae471a..f20da9b42c 100644
--- a/s2-site/examples/custom/custom-icon/demo/custom-data-cell-icon.tsx
+++ b/s2-site/examples/custom/custom-icon/demo/custom-data-cell-icon.tsx
@@ -1,13 +1,13 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -45,7 +45,8 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-icon/demo/custom-svg-icon.ts b/s2-site/examples/custom/custom-icon/demo/custom-svg-icon.ts
index 9a049b02d5..391b40a478 100644
--- a/s2-site/examples/custom/custom-icon/demo/custom-svg-icon.ts
+++ b/s2-site/examples/custom/custom-icon/demo/custom-svg-icon.ts
@@ -1,12 +1,12 @@
-import { PivotSheet, Node } from '@antv/s2';
+import { PivotSheet, S2Options, S2DataConfig } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -15,7 +15,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       customSVGIcons: [
@@ -34,8 +35,8 @@ fetch(
         },
       ],
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts b/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts
index 89b159b6bc..b8fe9978f8 100644
--- a/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts
+++ b/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts
@@ -1,12 +1,12 @@
-import { PivotSheet, S2Options } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -28,7 +28,8 @@ fetch(
         }
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-data-position.ts b/s2-site/examples/custom/custom-layout/demo/custom-data-position.ts
index 89f699f766..9909499bc0 100644
--- a/s2-site/examples/custom/custom-layout/demo/custom-data-position.ts
+++ b/s2-site/examples/custom/custom-layout/demo/custom-data-position.ts
@@ -10,7 +10,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
       fields: {
@@ -48,7 +48,8 @@ fetch(
         return viewMeta;
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-layout-arrange.ts b/s2-site/examples/custom/custom-layout/demo/custom-layout-arrange.ts
index 00674ecd75..6ffde700e1 100644
--- a/s2-site/examples/custom/custom-layout/demo/custom-layout-arrange.ts
+++ b/s2-site/examples/custom/custom-layout/demo/custom-layout-arrange.ts
@@ -1,12 +1,12 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -15,7 +15,7 @@ fetch(
       data: res.data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       layoutArrange: (s2, parent, field, fieldValues) => {
@@ -24,13 +24,16 @@ fetch(
           // layoutArrange 可手动设置行、列顺序，适用于局部调整，非规则调整。
           // 手动设置浙江省内部市的顺序，比如指定「宁波市」在第一位。
           const keyIndex = fieldValues.indexOf('宁波市');
+
           fieldValues.splice(keyIndex, 1);
           fieldValues.unshift('宁波市');
         }
+
         return fieldValues;
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-layout-hierarchy.ts b/s2-site/examples/custom/custom-layout/demo/custom-layout-hierarchy.ts
index c3264b7ef5..ebf310dc64 100644
--- a/s2-site/examples/custom/custom-layout/demo/custom-layout-hierarchy.ts
+++ b/s2-site/examples/custom/custom-layout/demo/custom-layout-hierarchy.ts
@@ -1,12 +1,18 @@
-import { PivotSheet, Node, generateId } from '@antv/s2';
+import {
+  PivotSheet,
+  Node,
+  generateId,
+  S2DataConfig,
+  S2Options,
+} from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -47,13 +53,14 @@ fetch(
       ],
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       layoutHierarchy: (s2, node) => {
         // layoutHierarchy 用于手动控制行列结构的增加、删除的特殊场景。
         // 以 「宁波市」为例，删除其节点，增加宁波A和宁波B节点。
         const { field, value } = node;
+
         if (field === 'city' && value === '宁波市') {
           const preValue = '宁波A';
           const nextValue = '宁波B';
@@ -65,14 +72,14 @@ fetch(
             ...node,
             id: preUniqueId,
             value: preValue,
-            query: { ...parentNode.query, [node.field]: preValue },
+            query: { ...parentNode?.query, [node.field]: preValue },
           });
 
           const nextNode = new Node({
             ...node,
             id: nextUniqueId,
             value: nextValue,
-            query: { ...parentNode.query, [node.field]: nextValue },
+            query: { ...parentNode?.query, [node.field]: nextValue },
           });
 
           return {
@@ -81,10 +88,12 @@ fetch(
             delete: true,
           };
         }
+
         return null;
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-value-order.ts b/s2-site/examples/custom/custom-layout/demo/custom-value-order.ts
index ba02eedb84..9fa3af4c0a 100644
--- a/s2-site/examples/custom/custom-layout/demo/custom-value-order.ts
+++ b/s2-site/examples/custom/custom-layout/demo/custom-value-order.ts
@@ -1,12 +1,12 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -18,12 +18,12 @@ fetch(
       data: res.data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-order/demo/custom-order.tsx b/s2-site/examples/custom/custom-order/demo/custom-order.tsx
index 8b61dd4e44..a5926b69d6 100644
--- a/s2-site/examples/custom/custom-order/demo/custom-order.tsx
+++ b/s2-site/examples/custom/custom-order/demo/custom-order.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import { Node, S2DataConfig, TooltipOptions } from '@antv/s2';
 
 const SortMethodType = {
   asc: 'asc',
@@ -10,22 +11,23 @@ const SortMethodType = {
 };
 
 const MENUS = [
-  { key: SortMethodType.none, text: '不排序' },
-  { key: SortMethodType.asc, text: '升序', icon: 'GroupAsc' },
-  { key: SortMethodType.desc, text: '降序', icon: 'GroupDesc' },
-  { key: SortMethodType.custom, text: '自定义排序', icon: 'Trend' },
+  { key: SortMethodType.none, label: '不排序' },
+  { key: SortMethodType.asc, label: '升序', icon: 'GroupAsc' },
+  { key: SortMethodType.desc, label: '降序', icon: 'GroupDesc' },
+  { key: SortMethodType.custom, label: '自定义排序', icon: 'Trend' },
 ];
-const s2DataConfig = {
+
+const s2DataConfig: S2DataConfig = {
   fields: {
     rows: ['province', 'city'],
     columns: ['type', 'sub_type'],
     values: ['number'],
   },
   meta: undefined,
-  data: undefined,
+  data: [],
 };
 
-const s2Options = {
+const s2Options: SheetComponentOptions = {
   width: 600,
   height: 480,
   // 关闭默认icon
@@ -70,7 +72,7 @@ const App = () => {
   const [sortParams, setSortParams] = useState([]);
 
   // 设置自定义 `icon` 的展示条件
-  const headerActionIcons = [
+  const headerActionIcons: SheetComponentOptions['headerActionIcons'] = [
     {
       // 选择icon,可以是 S2 自带的，也可以是自定义的 icon
       icons: ['customKingIcon'],
@@ -80,7 +82,7 @@ const App = () => {
       // icon 点击之后的执行函数
       onClick: (props) => {
         const { meta, event } = props;
-        const operator = {
+        const operator: TooltipOptions['operator'] = {
           menu: {
             onClick: ({ key }) => {
               handleSortCallback(meta, key);
@@ -101,7 +103,7 @@ const App = () => {
   ];
 
   // 执行自定义排序回调
-  const handleSortCallback = (meta, key) => {
+  const handleSortCallback = (meta: Node, key: string) => {
     if (key === SortMethodType.custom) {
       const sortParams = [
         { sortFieldId: 'type', sortBy: ['办公用品', '家具'] },
@@ -124,5 +126,4 @@ const App = () => {
   );
 };
 
-// 使用
 ReactDOM.render(<App />, document.getElementById('container'));
diff --git a/s2-site/examples/custom/custom-plugins/demo/custom-plugins.ts b/s2-site/examples/custom/custom-plugins/demo/custom-plugins.ts
index fb7f25bee5..1a8150e954 100644
--- a/s2-site/examples/custom/custom-plugins/demo/custom-plugins.ts
+++ b/s2-site/examples/custom/custom-plugins/demo/custom-plugins.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, S2Options } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';
 import { Plugin as PluginA11y } from '@antv/g-plugin-a11y';
 
@@ -6,9 +6,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -73,5 +73,5 @@ fetch(
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-tree/demo/custom-pivot-col-header.ts b/s2-site/examples/custom/custom-tree/demo/custom-pivot-col-header.ts
index c8b1c76e9f..d74952d7be 100644
--- a/s2-site/examples/custom/custom-tree/demo/custom-pivot-col-header.ts
+++ b/s2-site/examples/custom/custom-tree/demo/custom-pivot-col-header.ts
@@ -56,7 +56,7 @@ const data = [
   },
 ];
 
-function render() {
+async function render() {
   const container = document.getElementById('container');
 
   const s2DataConfig: S2DataConfig = {
@@ -88,7 +88,7 @@ function render() {
       // 自定义格式化数值
       // {
       //   field: 'measure-1',
-      //   formatter: (value) => `指标: ${value}`,
+      //   formatter: (value, record, meta) => `指标: ${value}`,
       // },
     ],
   };
@@ -101,7 +101,7 @@ function render() {
 
   const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-  s2.render();
+  await s2.render();
 }
 
 render();
diff --git a/s2-site/examples/custom/custom-tree/demo/custom-pivot-row-header.ts b/s2-site/examples/custom/custom-tree/demo/custom-pivot-row-header.ts
index a04033c25f..5d8e310dcb 100644
--- a/s2-site/examples/custom/custom-tree/demo/custom-pivot-row-header.ts
+++ b/s2-site/examples/custom/custom-tree/demo/custom-pivot-row-header.ts
@@ -74,13 +74,13 @@ function createCheckbox(s2: SpreadSheet) {
   text.className = 'hierarchy-type';
   text.innerHTML = '树状模式';
 
-  checkbox.addEventListener('change', () => {
+  checkbox.addEventListener('change', async () => {
     const hierarchyType = checkbox.checked ? 'tree' : 'grid';
 
     s2.setOptions({
       hierarchyType,
     });
-    s2.render(false);
+    await s2.render(false);
   });
 
   canvas?.before(checkbox);
@@ -113,7 +113,7 @@ async function render() {
       // 自定义格式化数值
       // {
       //   field: 'measure-1',
-      //   formatter: (value) => `指标: ${value}`,
+      //   formatter: (value, record, meta) => `指标: ${value}`,
       // },
     ],
   };
diff --git a/s2-site/examples/custom/custom-tree/demo/custom-table-col-header.ts b/s2-site/examples/custom/custom-tree/demo/custom-table-col-header.ts
index fc227343ec..b5ecd4b07f 100644
--- a/s2-site/examples/custom/custom-tree/demo/custom-table-col-header.ts
+++ b/s2-site/examples/custom/custom-tree/demo/custom-table-col-header.ts
@@ -25,7 +25,7 @@ export const tableSheetMultipleColumns: CustomTreeNode[] = [
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
       fields: {
@@ -53,5 +53,5 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-tree/demo/custom-tree.ts b/s2-site/examples/custom/custom-tree/demo/custom-tree.ts
index cf0762ed11..1843be8794 100644
--- a/s2-site/examples/custom/custom-tree/demo/custom-tree.ts
+++ b/s2-site/examples/custom/custom-tree/demo/custom-tree.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/af54ea12-01d7-4696-a51c-c4d5e4ede28e.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
       fields: {
@@ -32,5 +32,5 @@ fetch(
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/advanced/demo/custom-tree-link-jump.ts b/s2-site/examples/interaction/advanced/demo/custom-tree-link-jump.ts
index 357099ed67..8585e4c312 100644
--- a/s2-site/examples/interaction/advanced/demo/custom-tree-link-jump.ts
+++ b/s2-site/examples/interaction/advanced/demo/custom-tree-link-jump.ts
@@ -1,14 +1,14 @@
-import { S2Event, PivotSheet } from '@antv/s2';
+import { S2Event, PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/af54ea12-01d7-4696-a51c-c4d5e4ede28e.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
-        rows: [],
+        rows: res.customTreeItem,
         columns: ['type', 'sub_type'],
         values: [
           'measure-a',
@@ -18,15 +18,15 @@ fetch(
           'measure-e',
           'measure-f',
         ],
-        customTreeItems: res.customTreeItem,
         valueInCols: false,
       },
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
-      hierarchyType: 'customTree',
+      hierarchyType: 'tree',
       interaction: {
         linkFields: [
           'custom-node-1',
@@ -43,19 +43,21 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
-      console.log(data);
+    s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (jumpData) => {
+      console.log('jumpData:', jumpData);
 
-      const { key, record } = data;
-      const value = record[key];
+      const { field, record } = jumpData;
+      const value = record?.[field];
       const a = document.createElement('a');
+
       a.target = '_blank';
-      a.href = `https://antv-s2.gitee.io/zh/docs/manual/introduction?${key}=${value}`;
+      a.href = `https://antv-s2.gitee.io/zh/docs/manual/introduction?${field}=${value}`;
       a.click();
       a.remove();
     });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/advanced/demo/merge-cell.ts b/s2-site/examples/interaction/advanced/demo/merge-cell.ts
index 3920c71ab9..a6b1be6164 100644
--- a/s2-site/examples/interaction/advanced/demo/merge-cell.ts
+++ b/s2-site/examples/interaction/advanced/demo/merge-cell.ts
@@ -1,28 +1,15 @@
-import { PivotSheet, S2Event } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Event, S2Options } from '@antv/s2';
 import insertCss from 'insert-css';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
     const button = document.createElement('button');
-    const dataCellTooltip = () => {
-      button.innerText = '点击合并单元格';
-      button.className = 'merge-cells-button';
-      button.onclick = () => s2.interaction.mergeCells();
-      return button;
-    }; // (按住 Cmd/ Ctrl 多选)
-
-    const mergedCellsTooltip = (mergedCell) => {
-      button.innerText = '取消合并单元格';
-      button.className = 'merge-cells-button';
-      button.onclick = () => s2.interaction.unmergeCell(mergedCell);
-      return button;
-    };
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -32,10 +19,12 @@ fetch(
       meta: res.meta,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
-      selectedCellsSpotlight: true,
+      interaction: {
+        selectedCellsSpotlight: true,
+      },
       mergedCellsInfo: [
         [
           { colIndex: 1, rowIndex: 6, showText: true },
@@ -47,8 +36,25 @@ fetch(
         ],
       ],
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
+    const dataCellTooltip = () => {
+      button.innerText = '点击合并单元格';
+      button.className = 'merge-cells-button';
+      button.onclick = () => s2.interaction.mergeCells();
+
+      return button;
+    };
+
+    const mergedCellsTooltip = (mergedCell) => {
+      button.innerText = '取消合并单元格';
+      button.className = 'merge-cells-button';
+      button.onclick = () => s2.interaction.unmergeCell(mergedCell);
+
+      return button;
+    };
+
     s2.on(S2Event.DATA_CELL_CLICK, (event) => {
       s2.tooltip.show({
         position: { x: event.clientX, y: event.clientY },
@@ -58,13 +64,14 @@ fetch(
 
     s2.on(S2Event.MERGED_CELLS_CLICK, (event) => {
       const cell = s2.getCell(event.target);
+
       s2.tooltip.show({
         position: { x: event.clientX, y: event.clientY },
         content: mergedCellsTooltip(cell),
       });
     });
 
-    s2.render();
+    await s2.render();
   });
 
 insertCss(`
diff --git a/s2-site/examples/interaction/advanced/demo/overscroll-behavior.ts b/s2-site/examples/interaction/advanced/demo/overscroll-behavior.ts
index c982d3bf9c..f7c83d77a5 100644
--- a/s2-site/examples/interaction/advanced/demo/overscroll-behavior.ts
+++ b/s2-site/examples/interaction/advanced/demo/overscroll-behavior.ts
@@ -1,13 +1,13 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       style: {
@@ -27,5 +27,5 @@ fetch(
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts b/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts
index ad98cbf352..b3bd8d9947 100644
--- a/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts
+++ b/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts
@@ -1,13 +1,13 @@
-import { PivotSheet, S2Event } from '@antv/s2';
+import { PivotSheet, S2Event, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -23,6 +23,7 @@ fetch(
         },
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
     s2.on(S2Event.COL_CELL_EXPANDED, (cell) => {
@@ -35,5 +36,5 @@ fetch(
       },
     );
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/advanced/demo/pivot-link-jump.ts b/s2-site/examples/interaction/advanced/demo/pivot-link-jump.ts
index 5d2c0db702..654fc29253 100644
--- a/s2-site/examples/interaction/advanced/demo/pivot-link-jump.ts
+++ b/s2-site/examples/interaction/advanced/demo/pivot-link-jump.ts
@@ -1,32 +1,34 @@
-import { S2Event, PivotSheet } from '@antv/s2';
+import { S2Event, PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
         linkFields: ['city', 'number'],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
-      console.log(data);
+    s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (jumpData) => {
+      console.log('jumpData:', jumpData);
 
-      const { field, record } = data;
-      const value = record[field];
+      const { field, record } = jumpData;
+      const value = record?.[field];
       const a = document.createElement('a');
+
       a.target = '_blank';
       a.href = `https://antv-s2.gitee.io/zh/docs/manual/introduction?${field}=${value}`;
       a.click();
       a.remove();
     });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/advanced/demo/resize-active.ts b/s2-site/examples/interaction/advanced/demo/resize-active.ts
index 53718f89f2..d94badfa87 100644
--- a/s2-site/examples/interaction/advanced/demo/resize-active.ts
+++ b/s2-site/examples/interaction/advanced/demo/resize-active.ts
@@ -1,7 +1,7 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options, SpreadSheet, SpreadSheet } from '@antv/s2';
 import insertCss from 'insert-css';
 
-function createRadioGroup(s2) {
+function createRadioGroup(s2: SpreadSheet) {
   [
     ['rowCellVertical', '行头热区'],
     ['cornerCellHorizontal', '角头热区'],
@@ -15,9 +15,10 @@ function createRadioGroup(s2) {
     radio.value = value;
     radio.checked = true;
 
-    radio.addEventListener('click', (e) => {
+    radio.addEventListener('click', async (e) => {
       const value = e.target.value;
       const updated = !s2.options.interaction.resize[value];
+
       radio.checked = updated;
 
       s2.setOptions({
@@ -27,15 +28,17 @@ function createRadioGroup(s2) {
           },
         },
       });
-      s2.render(false);
+
+      await s2.render(false);
     });
 
     const label = document.createElement('label');
+
     label.innerText = text;
     label.htmlFor = 'name';
 
-    document.querySelector('#container > canvas').before(radio);
-    document.querySelector('#container > canvas').before(label);
+    document.querySelector('#container > canvas')?.before(radio);
+    document.querySelector('#container > canvas')?.before(label);
   });
 }
 
@@ -43,10 +46,10 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -61,9 +64,9 @@ fetch(
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render().then(() => {
-      createRadioGroup(s2);
-    });
+    await s2.render();
+
+    createRadioGroup(s2);
   });
 
 insertCss(`
diff --git a/s2-site/examples/interaction/advanced/demo/resize-disable.ts b/s2-site/examples/interaction/advanced/demo/resize-disable.ts
index aa064393a7..3c4555e328 100644
--- a/s2-site/examples/interaction/advanced/demo/resize-disable.ts
+++ b/s2-site/examples/interaction/advanced/demo/resize-disable.ts
@@ -1,19 +1,20 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
         resize: {
           disable: (resizeInfo) => {
             console.log('resizeInfo: ', resizeInfo);
+
             // 不允许调小宽度
             return resizeInfo.resizedWidth <= resizeInfo.width;
             // 不允许调小高度
@@ -25,5 +26,5 @@ fetch(
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/advanced/demo/row-expand-depth.ts b/s2-site/examples/interaction/advanced/demo/row-expand-depth.ts
index e385305cbb..7f6c5063ba 100644
--- a/s2-site/examples/interaction/advanced/demo/row-expand-depth.ts
+++ b/s2-site/examples/interaction/advanced/demo/row-expand-depth.ts
@@ -13,9 +13,10 @@ function createRadioGroup(s2: SpreadSheet) {
     radio.value = value;
     radio.checked = value === 0;
 
-    radio.addEventListener('click', (e) => {
+    radio.addEventListener('click', async (e) => {
       const value = e.target.value;
       const updated = !s2.options.interaction.resize[value];
+
       radio.checked = updated;
 
       s2.setOptions({
@@ -25,15 +26,17 @@ function createRadioGroup(s2: SpreadSheet) {
           },
         },
       });
-      s2.render(false);
+
+      await s2.render(false);
     });
 
     const label = document.createElement('label');
+
     label.innerText = text;
     label.htmlFor = 'name';
 
-    document.querySelector('#container > canvas').before(radio);
-    document.querySelector('#container > canvas').before(label);
+    document.querySelector('#container > canvas')?.before(radio);
+    document.querySelector('#container > canvas')?.before(label);
   });
 }
 
@@ -41,7 +44,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/e254339f-46df-4be0-81b0-a3b1e26b39ff.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
@@ -50,14 +53,15 @@ fetch(
       hierarchyType: 'tree',
       style: {
         rowCell: {
-          expandDepth: 0, // 展开一级维度的子节点
+          // 展开一级维度的子节点
+          expandDepth: 0,
         },
       },
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render().then(() => {
-      createRadioGroup(s2);
-    });
+    await s2.render();
+
+    createRadioGroup(s2);
   });
diff --git a/s2-site/examples/interaction/advanced/demo/scroll-loop.ts b/s2-site/examples/interaction/advanced/demo/scroll-loop.ts
index 305e1f16e1..5119209d94 100644
--- a/s2-site/examples/interaction/advanced/demo/scroll-loop.ts
+++ b/s2-site/examples/interaction/advanced/demo/scroll-loop.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, S2Event } from '@antv/s2';
+import { PivotSheet, S2Event, S2Options } from '@antv/s2';
 import insertCss from 'insert-css';
 
 // 每次滚动的距离
@@ -12,10 +12,12 @@ let timer;
 
 function addScrollButton(s2) {
   const btn = document.createElement('button');
+
   btn.className = 'ant-btn ant-btn-default';
   btn.innerHTML = '开始滚动';
 
   const stopBtn = document.createElement('button');
+
   stopBtn.className = 'ant-btn ant-btn-default';
   stopBtn.innerHTML = '停止滚动';
 
@@ -33,18 +35,22 @@ function addScrollButton(s2) {
     timer = setInterval(() => {
       // 获取当前 Y 轴滚动距离
       const { scrollY } = s2.facet.getScrollOffset();
+
       // 访问 https://s2.antv.antgroup.com/zh/docs/api 查看更多 API
       // 如果已经滚动到了底部，则回到顶部
       if (s2.facet.isScrollToBottom(scrollY)) {
         console.log('滚动到底部');
+
         s2.updateScrollOffset({
           offsetY: {
             value: 0,
             animate: false,
           },
         });
+
         return;
       }
+
       console.log('开始滚动, 当前 scrollY:', scrollY);
       s2.updateScrollOffset({
         offsetY: {
@@ -54,7 +60,8 @@ function addScrollButton(s2) {
       });
     }, MS);
   });
-  document.querySelector('#container > canvas').before(btn);
+
+  document.querySelector('#container > canvas')?.before(btn);
   btn.after(stopBtn);
 }
 
@@ -62,10 +69,10 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       style: {
@@ -75,6 +82,7 @@ fetch(
         },
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
     // 记得在表格卸载后 或者 `s2.destroy()` 后清除定时器
@@ -82,9 +90,9 @@ fetch(
       clearInterval(timer);
     });
 
-    s2.render().then(() => {
-      addScrollButton(s2);
-    });
+    await s2.render();
+
+    addScrollButton(s2);
   });
 
 insertCss(`
diff --git a/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts b/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts
index c835361025..3b786ddc50 100644
--- a/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts
+++ b/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts
@@ -1,11 +1,12 @@
-import { TableSheet } from '@antv/s2';
+import { S2DataConfig, S2Options, SpreadSheet, TableSheet } from '@antv/s2';
 
 import insertCss from 'insert-css';
 
 const defaultScrollSpeedRatio = 1;
 
-function createSlider(s2) {
+function createSlider(s2: SpreadSheet) {
   const slider = document.createElement('input');
+
   slider.type = 'range';
   slider.max = '5';
   slider.min = '0';
@@ -14,7 +15,8 @@ function createSlider(s2) {
   slider.title = `当前滚动速率: ${defaultScrollSpeedRatio}`;
 
   slider.addEventListener('input', (e) => {
-    const ratio = e.target.value;
+    const ratio = e.target?.value || 1;
+
     console.log('ratio: ', ratio);
 
     s2.setOptions({
@@ -27,15 +29,15 @@ function createSlider(s2) {
     slider.title = `当前滚动速率: ${ratio}`;
   });
 
-  document.querySelector('#container > canvas').before(slider);
+  document.querySelector('#container > canvas')?.before(slider);
 }
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['province', 'city', 'type', 'price', 'cost'],
       },
@@ -64,7 +66,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 300,
       interaction: {
@@ -77,9 +79,9 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render().then(() => {
-      createSlider(s2);
-    });
+    await s2.render();
+
+    createSlider(s2);
   });
 
 insertCss(`
diff --git a/s2-site/examples/interaction/advanced/demo/scroll-to-cell.ts b/s2-site/examples/interaction/advanced/demo/scroll-to-cell.ts
index ee938ed1bc..2fbfe51cfa 100644
--- a/s2-site/examples/interaction/advanced/demo/scroll-to-cell.ts
+++ b/s2-site/examples/interaction/advanced/demo/scroll-to-cell.ts
@@ -3,6 +3,7 @@ import insertCss from 'insert-css';
 
 function addScrollRowHeaderButton(s2: SpreadSheet) {
   const btn = document.createElement('button');
+
   btn.className = 'ant-btn ant-btn-default';
   btn.innerHTML = '滚动行头';
 
@@ -19,27 +20,29 @@ function addScrollRowHeaderButton(s2: SpreadSheet) {
 
 function addScrollToCellButton(s2: SpreadSheet) {
   const btn = document.createElement('button');
+
   btn.className = 'ant-btn ant-btn-default';
   btn.innerHTML = '滚动至成都市';
 
   btn.addEventListener('click', () => {
     // 获取行头是成都市对应的单元格
-    const rowNode = s2
-      .getRowNodes()
-      .find(({ id }) => id === 'root[&]四川省[&]成都市');
+    const rowNode = s2.facet.getRowNodeById('root[&]四川省[&]成都市');
 
-    s2.updateScrollOffset({
-      offsetY: {
-        value: rowNode?.y,
-        animate: true,
-      },
-    });
+    if (rowNode) {
+      s2.updateScrollOffset({
+        offsetY: {
+          value: rowNode.y,
+          animate: true,
+        },
+      });
+    }
   });
   document.querySelector('#container > canvas')?.before(btn);
 }
 
 function addScrollToTopButton(s2: SpreadSheet) {
   const btn = document.createElement('button');
+
   btn.className = 'ant-btn ant-btn-default';
   btn.innerHTML = '滚动至顶部';
 
@@ -58,13 +61,15 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      frozenRowHeader: true,
+      frozen: {
+        rowHeader: true,
+      },
       style: {
         // 让行头区域显示滚动条
         rowCell: {
@@ -76,13 +81,14 @@ fetch(
         },
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render().then(() => {
-      addScrollToCellButton(s2);
-      addScrollToTopButton(s2);
-      addScrollRowHeaderButton(s2);
-    });
+    await s2.render();
+
+    addScrollToCellButton(s2);
+    addScrollToTopButton(s2);
+    addScrollRowHeaderButton(s2);
   });
 
 insertCss(`
diff --git a/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts b/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts
index ce3178bbd0..de069134ff 100644
--- a/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts
+++ b/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts
@@ -1,10 +1,16 @@
-import { TableSheet, S2Event } from '@antv/s2';
+import {
+  TableSheet,
+  S2Event,
+  S2DataConfig,
+  S2Options,
+  S2Options,
+} from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['type', 'province', 'city', 'price', 'cost'],
       },
@@ -33,7 +39,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -48,6 +54,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
         },
       },
     };
+
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
     s2.on(S2Event.COL_CELL_EXPANDED, (cell) => {
@@ -60,5 +67,5 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       },
     );
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/advanced/demo/table-link-jump.ts b/s2-site/examples/interaction/advanced/demo/table-link-jump.ts
index cd7e0418bb..ed9ac8a08d 100644
--- a/s2-site/examples/interaction/advanced/demo/table-link-jump.ts
+++ b/s2-site/examples/interaction/advanced/demo/table-link-jump.ts
@@ -1,10 +1,10 @@
-import { S2Event, TableSheet } from '@antv/s2';
+import { S2DataConfig, S2DataConfig, S2Event, TableSheet } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['type', 'province', 'city', 'price', 'cost'],
       },
@@ -43,17 +43,18 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
-      console.log(data);
+    s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (jumpData) => {
+      console.log('jumpData:', jumpData);
 
-      const { field, record } = data;
-      const value = record[field];
+      const { field, record } = jumpData;
+      const value = record?.[field];
       const a = document.createElement('a');
+
       a.target = '_blank';
       a.href = `https://antv-s2.gitee.io/zh/docs/manual/introduction?${field}=${value}`;
       a.click();
       a.remove();
     });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/auto-reset-sheet-style.ts b/s2-site/examples/interaction/basic/demo/auto-reset-sheet-style.ts
index 3482a04eda..22b2f6e44f 100644
--- a/s2-site/examples/interaction/basic/demo/auto-reset-sheet-style.ts
+++ b/s2-site/examples/interaction/basic/demo/auto-reset-sheet-style.ts
@@ -2,7 +2,7 @@ import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
       fields: {
@@ -37,10 +37,12 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       width: 600,
       height: 480,
       interaction: {
-        autoResetSheetStyle: true, // 在鼠标移出表格区域后，自动 reset hover 高亮状态
+        // 在按下 ESC 键或者鼠标移出表格区域后，自动重置单元格选中,高亮状态
+        autoResetSheetStyle: true,
       },
     };
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
-    s2.render();
+
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/brush-header.ts b/s2-site/examples/interaction/basic/demo/brush-header.ts
index b80ffaf1ae..73c2a00bda 100644
--- a/s2-site/examples/interaction/basic/demo/brush-header.ts
+++ b/s2-site/examples/interaction/basic/demo/brush-header.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
@@ -22,7 +22,7 @@ fetch(
         enableCopy: true,
       },
       style: {
-        cellCfg: {
+        dataCell: {
           height: 100,
         },
       },
@@ -30,6 +30,7 @@ fetch(
         enable: true,
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
     // 可以监听各自单元格区域的刷选事件
@@ -48,5 +49,5 @@ fetch(
       console.log('selected', cells);
     });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/brush-selection.ts b/s2-site/examples/interaction/basic/demo/brush-selection.ts
index 42f06f165e..a8e01977f3 100644
--- a/s2-site/examples/interaction/basic/demo/brush-selection.ts
+++ b/s2-site/examples/interaction/basic/demo/brush-selection.ts
@@ -19,7 +19,7 @@ fetch(
         // brushSelection: false,
       },
       style: {
-        cellCfg: {
+        dataCell: {
           height: 100,
         },
       },
@@ -27,11 +27,12 @@ fetch(
         enable: true,
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
     s2.on(S2Event.DATA_CELL_BRUSH_SELECTION, (cells) => {
       console.log('dataCelBrushSelection', cells);
     });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/data-cell-click-selection.ts b/s2-site/examples/interaction/basic/demo/data-cell-click-selection.ts
index b1fabfb5f7..e61c375d62 100644
--- a/s2-site/examples/interaction/basic/demo/data-cell-click-selection.ts
+++ b/s2-site/examples/interaction/basic/demo/data-cell-click-selection.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
@@ -21,11 +21,12 @@ fetch(
         enable: true,
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
     s2.on(S2Event.GLOBAL_SELECTED, (cells) => {
       console.log('selected', cells);
     });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/data-cell-range-selection.ts b/s2-site/examples/interaction/basic/demo/data-cell-range-selection.ts
index 84fc99463b..6e55b39bce 100644
--- a/s2-site/examples/interaction/basic/demo/data-cell-range-selection.ts
+++ b/s2-site/examples/interaction/basic/demo/data-cell-range-selection.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     // 试试选中一个单元格, 然后按住 Shift 选中另一个单元格
@@ -21,6 +21,7 @@ fetch(
         enable: true,
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
     // 也可以监听全局的选中事件
@@ -28,5 +29,5 @@ fetch(
       console.log('selected', cells);
     });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/frozen.ts b/s2-site/examples/interaction/basic/demo/frozen.ts
index a3579c7b0c..24d93980d8 100644
--- a/s2-site/examples/interaction/basic/demo/frozen.ts
+++ b/s2-site/examples/interaction/basic/demo/frozen.ts
@@ -2,7 +2,7 @@ import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
 
     const s2DataConfig: S2DataConfig = {
@@ -35,14 +35,18 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       height: 480,
       showSeriesNumber: true,
       frozen: {
-        rowCount: 1, // 行头冻结数量
-        colCount: 1, // 列头冻结数量
-        trailingRowCount: 1, // 列尾冻结数量
-        trailingColCount: 1, // 列尾冻结数量
+        // 行头冻结数量
+        rowCount: 1,
+        // 列头冻结数量
+        colCount: 1,
+        // 列尾冻结数量
+        trailingRowCount: 1,
+        // 列尾冻结数量
+        trailingColCount: 1,
       },
     };
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/header-cell-click-selection.ts b/s2-site/examples/interaction/basic/demo/header-cell-click-selection.ts
index d8f36d5d2d..3c477e7796 100644
--- a/s2-site/examples/interaction/basic/demo/header-cell-click-selection.ts
+++ b/s2-site/examples/interaction/basic/demo/header-cell-click-selection.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     // 试试 (按住 Ctrl/Command) 对行列头进行多选
@@ -29,5 +29,5 @@ fetch(
       console.log('selected', cells);
     });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/hover.ts b/s2-site/examples/interaction/basic/demo/hover.ts
index 88a4795ef8..06a540ef31 100644
--- a/s2-site/examples/interaction/basic/demo/hover.ts
+++ b/s2-site/examples/interaction/basic/demo/hover.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
@@ -18,7 +18,8 @@ fetch(
         enable: true,
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/resize.ts b/s2-site/examples/interaction/basic/demo/resize.ts
index 9d0dfe0d8d..acdf2cf183 100644
--- a/s2-site/examples/interaction/basic/demo/resize.ts
+++ b/s2-site/examples/interaction/basic/demo/resize.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
@@ -12,13 +12,14 @@ fetch(
       height: 480,
       interaction: {
         hoverHighlight: true,
-        selectedCellsSpotlight: true, // highlight selection
+        selectedCellsSpotlight: true,
       },
       tooltip: {
         enable: true,
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/custom/demo/double-click-hide-columns.ts b/s2-site/examples/interaction/custom/demo/double-click-hide-columns.ts
index 2e9a9d8087..45cdb3aa57 100644
--- a/s2-site/examples/interaction/custom/demo/double-click-hide-columns.ts
+++ b/s2-site/examples/interaction/custom/demo/double-click-hide-columns.ts
@@ -1,4 +1,11 @@
-import { TableSheet, BaseEvent, S2Event } from '@antv/s2';
+/* eslint-disable max-classes-per-file */
+import {
+  TableSheet,
+  BaseEvent,
+  S2Event,
+  S2DataConfig,
+  S2Options,
+} from '@antv/s2';
 
 class HiddenInteraction extends BaseEvent {
   bindEvents() {
@@ -37,9 +44,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4eff53f3-f952-4b77-8862-4b6ecbd31667.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['type', 'province', 'city', 'price', 'cost'],
       },
@@ -68,7 +75,7 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       tooltip: {
@@ -90,5 +97,5 @@ fetch(
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts b/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts
index b03ac71bf0..451dfdb11a 100644
--- a/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts
+++ b/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, BaseEvent, S2Event } from '@antv/s2';
+import { PivotSheet, BaseEvent, S2Event, S2Options } from '@antv/s2';
 
 class RowColumnHoverTooltipInteraction extends BaseEvent {
   bindEvents() {
@@ -31,10 +31,10 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       tooltip: {
@@ -52,5 +52,5 @@ fetch(
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/adaptive/demo/container-adaptation.ts b/s2-site/examples/layout/adaptive/demo/container-adaptation.ts
index f24bac0d45..8cceac56a2 100644
--- a/s2-site/examples/layout/adaptive/demo/container-adaptation.ts
+++ b/s2-site/examples/layout/adaptive/demo/container-adaptation.ts
@@ -1,38 +1,48 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Event, S2Options } from '@antv/s2';
 import { debounce } from 'lodash';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
+
     container.innerHTML =
       '<div style="width: 100%; height: 600px; display: flex; flex-flow: row nowrap; "> ' +
       '<p id="side" style="flex-basis: 100px; width: 100px"> 这是一个新的node</p> <div id="content" style="width: 600px "></div> ' +
       '</div>';
 
     const content = document.getElementById('content');
+
     setTimeout(() => {
       content.style.width = '300px';
     }, 1000);
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
+
     const s2 = new PivotSheet(content, dataCfg, s2Options);
 
-    s2.render().then(() => {
-      const debounceRender = debounce((width, height) => {
-        s2.changeSheetSize(width, height);
-        s2.render(false); // 不重新加载数据
-      }, 200);
-
-      const resizeObserver = new ResizeObserver(([entry] = []) => {
-        const [size] = entry.borderBoxSize || [];
-        debounceRender(size.inlineSize, size.blockSize);
-      });
-      resizeObserver.observe(content);
+    await s2.render();
+
+    const debounceRender = debounce(async (width, height) => {
+      s2.changeSheetSize(width, height);
+      await s2.render(false);
+    }, 200);
+
+    const resizeObserver = new ResizeObserver(([entry] = []) => {
+      const [size] = entry.borderBoxSize || [];
+
+      debounceRender(size.inlineSize, size.blockSize);
+    });
+
+    resizeObserver.observe(content);
+
+    // 别忘了表格销毁时取消监听
+    s2.on(S2Event.LAYOUT_DESTROY, () => {
+      resizeObserver.disconnect();
     });
   });
diff --git a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
index f89d279ec9..397e00c5cc 100644
--- a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
+++ b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { concat, debounce, forEach, map } from 'lodash';
 
 fetch(
@@ -8,18 +8,21 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
 
-
     ReactDOM.render(
-      <SheetComponent dataCfg={dataCfg} options={s2Options} adaptive={{
+      <SheetComponent
+        dataCfg={dataCfg}
+        options={s2Options}
+        adaptive={{
           width: true,
           height: false,
-          getContainer: () => document.getElementById('container')
-      }} />,
+          getContainer: () => document.getElementById('container'),
+        }}
+      />,
       document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/layout/adaptive/demo/window-adaptation.ts b/s2-site/examples/layout/adaptive/demo/window-adaptation.ts
index 23d6a86a39..00bc41a8a2 100644
--- a/s2-site/examples/layout/adaptive/demo/window-adaptation.ts
+++ b/s2-site/examples/layout/adaptive/demo/window-adaptation.ts
@@ -1,27 +1,38 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Event, S2Options } from '@antv/s2';
 import { debounce } from 'lodash';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
-    s2.render().then(() => {
-      const debounceRender = debounce((width, height) => {
-        s2.changeSheetSize(width, height);
-        s2.render(false); // 不重新加载数据
-      }, 200);
-
-      new ResizeObserver(([entry] = []) => {
-        const [size] = entry.borderBoxSize || [];
-        debounceRender(size.inlineSize, size.blockSize);
-      }).observe(document.body); // 通过监听 document.body 来实现监听窗口大小变化
+
+    await s2.render();
+
+    const debounceRender = debounce(async (width, height) => {
+      s2.changeSheetSize(width, height);
+      await s2.render(false);
+    }, 200);
+
+    const resizeObserver = new ResizeObserver(([entry] = []) => {
+      const [size] = entry.borderBoxSize || [];
+
+      debounceRender(size.inlineSize, size.blockSize);
+    });
+
+    // 通过监听 document.body 来实现监听窗口大小变化
+    resizeObserver.observe(document.body);
+
+    // 别忘了表格销毁时取消监听
+    s2.on(S2Event.LAYOUT_DESTROY, () => {
+      resizeObserver.disconnect();
     });
   });
diff --git a/s2-site/examples/layout/basic/demo/colAdaptive.ts b/s2-site/examples/layout/basic/demo/colAdaptive.ts
index a8c54becc5..d8f7e8a253 100644
--- a/s2-site/examples/layout/basic/demo/colAdaptive.ts
+++ b/s2-site/examples/layout/basic/demo/colAdaptive.ts
@@ -1,20 +1,21 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       style: {
         layoutWidthType: 'colAdaptive',
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/basic/demo/compact.ts b/s2-site/examples/layout/basic/demo/compact.ts
index bf1b9ce198..782a4c57d8 100644
--- a/s2-site/examples/layout/basic/demo/compact.ts
+++ b/s2-site/examples/layout/basic/demo/compact.ts
@@ -1,20 +1,21 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 400,
       height: 480,
       style: {
         layoutWidthType: 'compact',
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/custom/demo/custom-pivot-size.ts b/s2-site/examples/layout/custom/demo/custom-pivot-size.ts
index 3c0d9025d9..f358497965 100644
--- a/s2-site/examples/layout/custom/demo/custom-pivot-size.ts
+++ b/s2-site/examples/layout/custom/demo/custom-pivot-size.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     // 详情请查看: https://s2.antv.antgroup.com/zh/docs/manual/advanced/custom/cell-size
@@ -42,5 +42,6 @@ fetch(
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
-    s2.render();
+
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/custom/demo/custom-row-col-cell-width.ts b/s2-site/examples/layout/custom/demo/custom-row-col-cell-width.ts
index 54b1b81ebc..b8aafd657d 100644
--- a/s2-site/examples/layout/custom/demo/custom-row-col-cell-width.ts
+++ b/s2-site/examples/layout/custom/demo/custom-row-col-cell-width.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     // 详情请查看: https://s2.antv.antgroup.com/zh/docs/manual/advanced/custom/cell-size
@@ -19,6 +19,7 @@ fetch(
           // 动态配置: 叶子节点 300px, 非叶子节点 200px
           width: (row) => {
             console.log('row: ', row);
+
             return row.isLeaf ? 300 : 200;
           },
         },
@@ -28,6 +29,7 @@ fetch(
           // 动态配置: 偶数列 100px, 奇数列 200px
           width: (col) => {
             console.log('col: ', col);
+
             return col.colIndex % 2 === 0 ? 100 : 200;
           },
         },
@@ -38,5 +40,6 @@ fetch(
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
-    s2.render();
+
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/custom/demo/custom-table-size.ts b/s2-site/examples/layout/custom/demo/custom-table-size.ts
index 60e53ebb31..aca09e9377 100644
--- a/s2-site/examples/layout/custom/demo/custom-table-size.ts
+++ b/s2-site/examples/layout/custom/demo/custom-table-size.ts
@@ -2,7 +2,7 @@ import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     // 详情请查看: https://s2.antv.antgroup.com/zh/docs/manual/advanced/custom/cell-size
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
@@ -57,7 +57,8 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
         },
       },
     };
+
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/custom/demo/custom-tree-collapse-nodes.ts b/s2-site/examples/layout/custom/demo/custom-tree-collapse-nodes.ts
index f0451a11fa..641aeb4e51 100644
--- a/s2-site/examples/layout/custom/demo/custom-tree-collapse-nodes.ts
+++ b/s2-site/examples/layout/custom/demo/custom-tree-collapse-nodes.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
@@ -29,5 +29,6 @@ fetch(
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
-    s2.render();
+
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts b/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
index f9207689da..1800bbb497 100644
--- a/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
+++ b/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     // 详情请查看: https://s2.antv.antgroup.com/zh/docs/manual/advanced/custom/cell-size
@@ -20,5 +20,6 @@ fetch(
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
-    s2.render();
+
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/custom/demo/hide-columns.ts b/s2-site/examples/layout/custom/demo/hide-columns.ts
index ebc9c99c20..21113e5d1f 100644
--- a/s2-site/examples/layout/custom/demo/hide-columns.ts
+++ b/s2-site/examples/layout/custom/demo/hide-columns.ts
@@ -1,10 +1,10 @@
-import { TableSheet } from '@antv/s2';
+import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['type', 'province', 'city', 'price', 'cost'],
       },
@@ -33,7 +33,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       style: {
@@ -42,7 +42,8 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
         },
       },
     };
+
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/custom/demo/hide-value.ts b/s2-site/examples/layout/custom/demo/hide-value.ts
index c0d82a1d68..ce4c6219ac 100644
--- a/s2-site/examples/layout/custom/demo/hide-value.ts
+++ b/s2-site/examples/layout/custom/demo/hide-value.ts
@@ -3,7 +3,7 @@ import { PivotSheet } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
       fields: {
@@ -40,13 +40,14 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       width: 600,
       height: 480,
       style: {
-        colCfg: {
+        colCell: {
           // 隐藏数值 (数值挂列头时生效, 即 s2DataConfig.fields.values)
-          hideMeasureColumn: true,
+          hideValue: true,
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/custom/demo/only-show-row-header.ts b/s2-site/examples/layout/custom/demo/only-show-row-header.ts
index 0f0386fd29..1e76e36462 100644
--- a/s2-site/examples/layout/custom/demo/only-show-row-header.ts
+++ b/s2-site/examples/layout/custom/demo/only-show-row-header.ts
@@ -3,7 +3,7 @@ import { PivotSheet } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
       fields: {
@@ -31,13 +31,14 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       width: 600,
       height: 480,
       style: {
-        colCfg: {
+        colCell: {
           // 当只有行头和数值时, 隐藏数值, 可以让表格只显示行头
-          hideMeasureColumn: true,
+          hideValue: true,
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx b/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
index 51151fe1d8..403f5fd86a 100644
--- a/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
+++ b/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  SheetComponentsProps,
+} from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import { S2DataConfig } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
   .then((res) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
       hierarchyType: 'tree',
     };
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -26,7 +31,7 @@ fetch(
 
     const sex = ['男', '女'];
 
-    const PartDrillDown = {
+    const PartDrillDown: SheetComponentsProps['partDrillDown'] = {
       drillConfig: {
         dataSet: [
           {
diff --git a/s2-site/examples/react-component/export/demo/export.tsx b/s2-site/examples/react-component/export/demo/export.tsx
index 10968b7cb7..ca33ffce15 100644
--- a/s2-site/examples/react-component/export/demo/export.tsx
+++ b/s2-site/examples/react-component/export/demo/export.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import { S2DataConfig } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
   .then((res) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
       interaction: {
@@ -16,7 +17,7 @@ fetch(
       },
     };
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
diff --git a/s2-site/examples/react-component/pagination/demo/pivot.tsx b/s2-site/examples/react-component/pagination/demo/pivot.tsx
index 55b7ed706b..8b7c5f8a49 100644
--- a/s2-site/examples/react-component/pagination/demo/pivot.tsx
+++ b/s2-site/examples/react-component/pagination/demo/pivot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -8,7 +8,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
       pagination: {
diff --git a/s2-site/examples/react-component/pagination/demo/table.tsx b/s2-site/examples/react-component/pagination/demo/table.tsx
index 26ad84e4b5..1f27b7d6e4 100644
--- a/s2-site/examples/react-component/pagination/demo/table.tsx
+++ b/s2-site/examples/react-component/pagination/demo/table.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import { S2DataConfig } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
   .then((res) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
       pagination: {
@@ -15,7 +16,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       },
     };
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['province', 'city', 'type', 'price', 'cost'],
       },
diff --git a/s2-site/examples/react-component/sheet/demo/editable.tsx b/s2-site/examples/react-component/sheet/demo/editable.tsx
index 387614cb0a..2fbf029cf9 100644
--- a/s2-site/examples/react-component/sheet/demo/editable.tsx
+++ b/s2-site/examples/react-component/sheet/demo/editable.tsx
@@ -40,10 +40,14 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       height: 480,
       showSeriesNumber: true,
       frozen: {
-        rowCount: 1, // 行头冻结数量
-        colCount: 1, // 列头冻结数量
-        trailingRowCount: 1, // 行尾冻结数量
-        trailingColCount: 1, // 列尾冻结数量
+        // 行头冻结数量
+        rowCount: 1,
+        // 列头冻结数量
+        colCount: 1,
+        // 行尾冻结数量
+        trailingRowCount: 1,
+        // 列尾冻结数量
+        trailingColCount: 1,
       },
     };
 
diff --git a/s2-site/examples/react-component/sheet/demo/pivot.tsx b/s2-site/examples/react-component/sheet/demo/pivot.tsx
index d29caddd33..2febbb28a8 100644
--- a/s2-site/examples/react-component/sheet/demo/pivot.tsx
+++ b/s2-site/examples/react-component/sheet/demo/pivot.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  SheetComponentOptions,
+} from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -8,7 +12,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
diff --git a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
index e779069b83..eef8fd550f 100644
--- a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
+++ b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
@@ -12,18 +12,20 @@ fetch(
       width: 1000,
       height: 480,
       cornerText: '指标层级',
-      hierarchyType: 'customTree',
+      hierarchyType: 'tree',
       conditions: {
         text: [
           {
             field: 'number',
             mapping: (value, cellInfo) => {
               const { meta, colIndex } = cellInfo;
+
               if (colIndex === 0 || !value || !meta?.fieldValue) {
                 return {
                   fill: '#000',
                 };
               }
+
               return {
                 fill: value > 0 ? '#FF4D4F' : '#29A294',
               };
diff --git a/s2-site/examples/react-component/sheet/demo/table.tsx b/s2-site/examples/react-component/sheet/demo/table.tsx
index faa145c0fd..8d4e5b3773 100644
--- a/s2-site/examples/react-component/sheet/demo/table.tsx
+++ b/s2-site/examples/react-component/sheet/demo/table.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import { S2DataConfi } from '@antv/s2';
 
-fetch(
-  'https://assets.antv.antgroup.com/s2/basic-table-mode.json',
-)
+fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
   .then((res) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['province', 'city', 'type', 'price', 'cost'],
       },
diff --git a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
index 24fddced08..a031f343ce 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import insertCss from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -9,7 +9,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((data) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
diff --git a/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx b/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
index 28148b39ba..c294eb23c5 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent, Switcher } from '@antv/s2-react';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  Switcher,
+} from '@antv/s2-react';
 import insertCss from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -9,7 +13,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((data) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
@@ -44,9 +48,11 @@ fetch(
           result.push(item);
         } else {
           const parent = result[result.length - 1];
+
           parent.children = parent.children ? parent.children : [];
           parent.children.push(item);
         }
+
         return result;
       }, []);
 
diff --git a/s2-site/examples/react-component/switcher/demo/pivot.tsx b/s2-site/examples/react-component/switcher/demo/pivot.tsx
index e87431b98d..5277b274ff 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot.tsx
@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent, Switcher } from '@antv/s2-react';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  Switcher,
+} from '@antv/s2-react';
 import insertCss from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -9,7 +13,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((data) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
diff --git a/s2-site/examples/react-component/switcher/demo/table.tsx b/s2-site/examples/react-component/switcher/demo/table.tsx
index a1e8e1f729..ea246bec3e 100644
--- a/s2-site/examples/react-component/switcher/demo/table.tsx
+++ b/s2-site/examples/react-component/switcher/demo/table.tsx
@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { SheetComponent, Switcher } from '@antv/s2-react';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  Switcher,
+} from '@antv/s2-react';
 import insertCss from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -9,7 +13,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
index fd9e10673d..a647fa4fe4 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
@@ -26,12 +26,15 @@ fetch(
       if (!cellInfo?.viewMeta) {
         return;
       }
+
       const { spreadsheet, id } = cellInfo.viewMeta;
+
       if (id === 'root[&]家具') {
         const position = {
           x: cellInfo.event.clientX,
           y: cellInfo.event.clientY,
         };
+
         spreadsheet.tooltip.show({
           position,
           content: <CustomTooltip />,
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-content.tsx b/s2-site/examples/react-component/tooltip/demo/custom-content.tsx
index 3c1c7edc3f..0e6746f970 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-content.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-content.tsx
@@ -9,10 +9,10 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const CustomTooltip = (
+    const CustomTooltip = () => (
       <div className="tooltip-custom-component">content</div>
     );
-    const RowCellTooltip = (
+    const RowCellTooltip = () => (
       <div className="tooltip-custom-component">rowCellTooltip</div>
     );
 
@@ -20,9 +20,9 @@ fetch(
       width: 600,
       height: 480,
       tooltip: {
-        content: CustomTooltip,
+        content: <CustomTooltip />,
         rowCell: {
-          content: RowCellTooltip,
+          content: <RowCellTooltip />,
         },
       },
     };
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
index 0f4c6dfbc9..b2c9dc700f 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
@@ -20,7 +20,7 @@ fetch(
             items: [
               {
                 key: 'custom-a',
-                text: '操作1',
+                label: '操作1',
                 icon: 'Trend',
                 onClick: (info, cell) => {
                   console.log('操作1点击:', info, cell);
@@ -28,7 +28,7 @@ fetch(
                 children: [
                   {
                     key: 'custom-a-a',
-                    text: '操作 1-1',
+                    label: '操作 1-1',
                     icon: 'Trend',
                     onClick: (info, cell) => {
                       console.log('操作1-1点击:', info, cell);
@@ -38,7 +38,7 @@ fetch(
               },
               {
                 key: 'custom-b',
-                text: '操作2',
+                label: '操作2',
                 icon: 'EyeOutlined',
                 onClick: (info, cell) => {
                   console.log('操作2点击:', info, cell);
@@ -46,7 +46,7 @@ fetch(
               },
               {
                 key: 'custom-c',
-                text: '操作3',
+                label: '操作3',
                 icon: 'EyeOutlined',
                 visible: false,
                 onClick: (info, cell) => {
@@ -55,7 +55,7 @@ fetch(
               },
               {
                 key: 'custom-c',
-                text: '操作4',
+                label: '操作4',
                 icon: 'EyeOutlined',
                 visible: (cell) => {
                   // 叶子节点才显示
diff --git a/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx b/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
index bec133d06d..eb99a8b8a3 100644
--- a/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
+++ b/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { getPalette, generatePalette } from '@antv/s2';
-import { SheetComponent } from '@antv/s2-react';
+import { getPalette, generatePalette, ThemeCfg } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { ChromePicker } from 'react-color';
 import { Button, Popover, Space } from 'antd';
 
@@ -12,14 +12,14 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
 
     function App() {
       const [themeColor, setThemeColor] = useState('#EA1720');
-      const [themeCfg, setThemeCfg] = useState({
+      const [themeCfg, setThemeCfg] = useState<ThemeCfg>({
         name: 'colorful',
       });
 
diff --git a/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx b/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
index aabb0aed9f..9762461d3b 100644
--- a/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
+++ b/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { debounce, isObjectLike } from 'lodash';
 import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
-import { getPalette } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import { S2DataConfig, getPalette } from '@antv/s2';
 import { SketchPicker } from 'react-color';
 import { Row, Space, Input, Button, message, Popover, Table } from 'antd';
 import copy from 'copy-to-clipboard';
@@ -11,7 +11,7 @@ import 'antd/es/table/style/index.css';
 import 'antd/es/space/style/index.css';
 import '@antv/s2-react/dist/style.min.css';
 
-const s2Options = {
+const s2Options: SheetComponentOptions = {
   width: 500,
   height: 300,
   conditions: {
@@ -62,7 +62,7 @@ const savePalette = debounce((palette) => {
 }, 1000);
 
 function useDataCfg() {
-  const [dataCfg, setDataCfg] = useState(null);
+  const [dataCfg, setDataCfg] = useState<S2DataConfig>(null);
 
   useEffect(() => {
     fetch(
diff --git a/s2-site/examples/theme/custom/demo/custom-palette.ts b/s2-site/examples/theme/custom/demo/custom-palette.ts
index 249bd9a7e4..7f336e2a44 100644
--- a/s2-site/examples/theme/custom/demo/custom-palette.ts
+++ b/s2-site/examples/theme/custom/demo/custom-palette.ts
@@ -1,12 +1,18 @@
-import { PivotSheet } from '@antv/s2';
+import {
+  PivotSheet,
+  S2DataConfig,
+  S2Options,
+  S2Theme,
+  ThemeCfg,
+} from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4eff53f3-f952-4b77-8862-4b6ecbd31667.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -37,12 +43,12 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
 
-    const s2Palette = {
+    const s2Palette: ThemeCfg['palette'] = {
       basicColors: [
         '#FFFFFF',
         '#F8F5FE',
@@ -71,5 +77,5 @@ fetch(
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
     s2.setThemeCfg({ palette: s2Palette });
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/theme/custom/demo/custom-schema.ts b/s2-site/examples/theme/custom/demo/custom-schema.ts
index 135cf95452..894236e66f 100644
--- a/s2-site/examples/theme/custom/demo/custom-schema.ts
+++ b/s2-site/examples/theme/custom/demo/custom-schema.ts
@@ -1,12 +1,13 @@
-import { TableSheet } from '@antv/s2';
+/* eslint-disable max-lines-per-function */
+import { S2DataConfig, S2Options, S2Theme, TableSheet } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4eff53f3-f952-4b77-8862-4b6ecbd31667.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['province', 'city', 'type', 'price', 'cost'],
       },
@@ -35,7 +36,7 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
@@ -45,7 +46,7 @@ fetch(
     const HEADER_BACK_COLOR = '#353c59';
     const CELL_ACTIVE_BACK_COLOR = '#434c6c';
 
-    const customTheme = {
+    const customTheme: S2Theme = {
       background: {
         color: HEADER_BACK_COLOR,
       },
@@ -76,7 +77,7 @@ fetch(
         verticalBorderColor: BORDER_COLOR,
         verticalBorderColorOpacity: 1,
         verticalBorderWidth: 2,
-        showRightShadow: true,
+        showShadow: true,
         shadowWidth: 10,
         shadowColors: {
           left: 'rgba(0,0,0,0.1)',
@@ -168,5 +169,5 @@ fetch(
 
     s2.setTheme(customTheme);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/theme/custom/demo/custom-transparent-background.ts b/s2-site/examples/theme/custom/demo/custom-transparent-background.ts
index c68bf393d7..df3d89b312 100644
--- a/s2-site/examples/theme/custom/demo/custom-transparent-background.ts
+++ b/s2-site/examples/theme/custom/demo/custom-transparent-background.ts
@@ -1,12 +1,12 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options, S2Theme } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4eff53f3-f952-4b77-8862-4b6ecbd31667.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -37,7 +37,7 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
@@ -51,7 +51,7 @@ fetch(
     };
 
     // https://s2.antv.antgroup.com/zh/docs/api/general/S2Theme#s2theme
-    const s2Theme = {
+    const s2Theme: S2Theme = {
       background: {
         opacity: 0,
       },
@@ -64,5 +64,6 @@ fetch(
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
     s2.setTheme(s2Theme);
-    s2.render();
+
+    await s2.render();
   });
diff --git a/s2-site/examples/theme/default/demo/colorful.ts b/s2-site/examples/theme/default/demo/colorful.ts
index eded49591f..bcaae1d8d9 100644
--- a/s2-site/examples/theme/default/demo/colorful.ts
+++ b/s2-site/examples/theme/default/demo/colorful.ts
@@ -1,12 +1,12 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4eff53f3-f952-4b77-8862-4b6ecbd31667.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -37,7 +37,7 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
@@ -46,5 +46,5 @@ fetch(
 
     s2.setThemeCfg({ name: 'colorful' });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/theme/default/demo/default.ts b/s2-site/examples/theme/default/demo/default.ts
index ef3218b288..f0632438d1 100644
--- a/s2-site/examples/theme/default/demo/default.ts
+++ b/s2-site/examples/theme/default/demo/default.ts
@@ -1,12 +1,12 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4eff53f3-f952-4b77-8862-4b6ecbd31667.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -37,12 +37,12 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/theme/default/demo/gray.ts b/s2-site/examples/theme/default/demo/gray.ts
index fb123ab6bb..843f47e8e6 100644
--- a/s2-site/examples/theme/default/demo/gray.ts
+++ b/s2-site/examples/theme/default/demo/gray.ts
@@ -1,12 +1,12 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4eff53f3-f952-4b77-8862-4b6ecbd31667.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -37,7 +37,7 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
@@ -46,5 +46,5 @@ fetch(
 
     s2.setThemeCfg({ name: 'gray' });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/package.json b/s2-site/package.json
index e9503c28c4..4eba2685b1 100644
--- a/s2-site/package.json
+++ b/s2-site/package.json
@@ -28,17 +28,17 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@antv/dumi-theme-antv": "^0.4.4",
+    "@antv/dumi-theme-antv": "^0.4.5",
     "@antv/g-canvas": "^1.11.25",
     "@antv/g-plugin-a11y": "^0.6.20",
     "@antv/g-plugin-rough-canvas-renderer": "^1.9.25",
-    "@antv/g2": "^5.1.11",
+    "@antv/g2": "^5.1.13",
     "@antv/s2": "next",
     "@antv/s2-react": "next",
-    "antd": "^5.12.2",
+    "antd": "^5.12.5",
     "copy-to-clipboard": "^3.3.3",
-    "dumi": "^2.2.15",
-    "gh-pages": "^6.1.0",
+    "dumi": "^2.2.16",
+    "gh-pages": "^6.1.1",
     "lodash": "^4.17.21",
     "react-color": "^2.19.3"
   },
diff --git a/s2-site/playground/sheet-component/index.tsx b/s2-site/playground/sheet-component/index.tsx
index 7b7c6a00df..88c8766a4c 100644
--- a/s2-site/playground/sheet-component/index.tsx
+++ b/s2-site/playground/sheet-component/index.tsx
@@ -40,9 +40,11 @@ export const CustomSheet: React.FC<Props> = (props) => {
     const tableFields = {
       columns: concat([], rows || [], columns || [], values || []),
     };
+
     if (sheetType === 'pivot') {
       return { ...sheetDataCfg, fields: pivotFields };
     }
+
     return { ...sheetDataCfg, fields: tableFields };
   };
 
@@ -57,9 +59,11 @@ export const CustomSheet: React.FC<Props> = (props) => {
     const tableFields = {
       columns: concat([], rows || [], columns || [], values || []),
     };
+
     if (sheetType === 'pivot') {
       return { ...importData, fields: pivotFields };
     }
+
     return { ...importData, fields: tableFields };
   };
 
@@ -67,11 +71,13 @@ export const CustomSheet: React.FC<Props> = (props) => {
     if (!sheetConfig?.sheetType) {
       return;
     }
+
     setSheetType(sheetConfig?.sheetType);
   }, [sheetConfig?.sheetType]);
 
   useEffect(() => {
     const dataCfg = getExampleDataCfg();
+
     setDataCfg(dataCfg);
   }, [sheetConfig?.rows, sheetConfig?.columns, sheetConfig?.values]);
 
@@ -82,9 +88,11 @@ export const CustomSheet: React.FC<Props> = (props) => {
       isEmpty(sheetConfig?.importData)
     ) {
       const dataCfg = getExampleDataCfg();
+
       setDataCfg(dataCfg);
     } else if (!isEmpty(sheetConfig?.importData)) {
       const dataCfg = getImportDataCfg();
+
       setDataCfg(dataCfg);
     }
   }, [
@@ -135,6 +143,7 @@ export const CustomSheet: React.FC<Props> = (props) => {
         },
       },
     });
+
     setOptions({ ...mergedOptions });
   }, [
     sheetConfig?.hierarchyType,
@@ -151,6 +160,7 @@ export const CustomSheet: React.FC<Props> = (props) => {
 
   useEffect(() => {
     const { theme } = sheetConfig;
+
     setThemeCfg({ name: theme });
   }, [sheetConfig?.theme]);
 
@@ -158,17 +168,20 @@ export const CustomSheet: React.FC<Props> = (props) => {
     if (!sheetConfig?.themeColor) {
       return;
     }
+
     const { theme, themeColor } = sheetConfig;
     const palette = getPalette(theme || 'default');
     const newPalette = generatePalette({
       ...palette,
       brandColor: themeColor?.hex || '#E0E9FD',
     });
+
     setThemeCfg({ name: theme, palette: newPalette });
   }, [sheetConfig?.themeColor]);
 
   useEffect(() => {
     const { adaptive } = sheetConfig;
+
     if (adaptive) {
       setAdaptive({
         width: true,
@@ -186,11 +199,13 @@ export const CustomSheet: React.FC<Props> = (props) => {
 
   useEffect(() => {
     const { showPagination } = sheetConfig;
+
     setShowPagination(showPagination);
   }, [sheetConfig?.showPagination]);
 
   useEffect(() => {
     const { showSeriesNumber, showPagination } = sheetConfig;
+
     setOptions({
       showSeriesNumber,
       pagination: showPagination && {

From 37768a0bab9fa87aa03e01d4d1be49471f733904 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Tue, 26 Dec 2023 13:53:03 +0800
Subject: [PATCH 02/64] =?UTF-8?q?docs:=20=E6=89=80=E6=9C=89=20demo=20?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E6=88=90=20React=2018?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.en-US.md                               |  8 +++
 README.md                                     |  8 +++
 packages/s2-react/README.md                   | 20 +++----
 s2-site/docs/common/env.en.md                 |  7 +++
 s2-site/docs/common/env.zh.md                 |  7 +++
 s2-site/docs/common/packages.zh.md            | 17 +++++-
 .../manual/basic/analysis/drill-down.zh.md    | 22 +++----
 .../manual/basic/analysis/editable-mode.zh.md | 18 +++---
 .../basic/analysis/mobile-component.zh.md     | 19 +++---
 .../docs/manual/basic/analysis/strategy.zh.md | 21 ++++---
 .../docs/manual/basic/analysis/switcher.zh.md | 14 ++---
 .../manual/basic/sheet-type/pivot-mode.zh.md  | 29 +++++-----
 .../manual/basic/sheet-type/table-mode.zh.md  | 20 +++----
 s2-site/docs/manual/basic/sort/advanced.zh.md |  5 +-
 s2-site/docs/manual/faq.zh.md                 | 33 ++++-------
 s2-site/docs/manual/getting-started.zh.md     | 58 +++++++++----------
 s2-site/docs/manual/introduction.zh.md        |  4 ++
 .../examples/analysis/sort/demo/advanced.tsx  | 10 ++--
 .../analysis/sort/demo/group-sort.tsx         |  9 ++-
 .../analysis/sort/demo/table-sort.tsx         |  8 +--
 s2-site/examples/case/art/demo/mosaic.tsx     |  5 +-
 .../case/art/demo/time-spend-abstract.tsx     |  5 +-
 .../comparison/demo/measure-comparison.tsx    |  6 +-
 .../demo/multiple-people-comparison.tsx       |  5 +-
 .../case/comparison/demo/philosophers.tsx     |  5 +-
 .../case/comparison/demo/time-spend.tsx       | 11 ++--
 .../examples/case/data-preview/demo/excel.tsx | 10 ++--
 .../examples/case/data-preview/demo/house.tsx | 18 +++---
 .../examples/case/data-preview/demo/index.tsx |  6 +-
 .../examples/case/kpi-strategy/demo/basic.tsx |  8 +--
 .../case/kpi-strategy/demo/covid-trend.tsx    |  6 +-
 .../case/performance-compare/demo/basic.tsx   |  5 +-
 .../case/proportion/demo/group-drill-down.tsx |  6 +-
 .../demo/single-population-proportion.tsx     | 11 ++--
 .../demo/custom-header-action-icon.tsx        |  5 +-
 .../custom/custom-order/demo/custom-order.tsx |  4 +-
 .../layout/adaptive/demo/react-adaptive.tsx   |  8 +--
 .../drill-dwon/demo/basic-panel.tsx           |  5 +-
 .../drill-dwon/demo/for-pivot.tsx             |  6 +-
 .../react-component/export/demo/export.tsx    |  5 +-
 .../react-component/header/demo/default.tsx   |  6 +-
 .../react-component/pagination/demo/pivot.tsx |  5 +-
 .../react-component/pagination/demo/table.tsx |  5 +-
 .../react-component/sheet/demo/editable.tsx   |  5 +-
 .../sheet/demo/mobile-pivot.tsx               |  6 +-
 .../react-component/sheet/demo/pivot.tsx      | 11 +---
 .../sheet/demo/strategy-mini-chart.tsx        |  7 +--
 .../react-component/sheet/demo/strategy.tsx   |  9 ++-
 .../react-component/sheet/demo/table.tsx      |  9 ++-
 .../switcher/demo/pivot-header.tsx            | 10 ++--
 .../switcher/demo/pivot-with-children.tsx     | 10 ++--
 .../react-component/switcher/demo/pivot.tsx   |  6 +-
 .../switcher/demo/pure-switcher.tsx           |  5 +-
 .../react-component/switcher/demo/table.tsx   |  6 +-
 .../react-component/tooltip/demo/basic.tsx    |  5 +-
 .../demo/custom-click-show-tooltip.tsx        |  5 +-
 .../tooltip/demo/custom-content.tsx           |  5 +-
 .../tooltip/demo/custom-description.tsx       |  5 +-
 .../demo/custom-hover-show-tooltip.tsx        |  5 +-
 .../tooltip/demo/custom-operation.tsx         |  5 +-
 .../tooltip/demo/custom-show-tooltip.tsx      | 13 +++--
 .../tooltip/demo/custom-tooltip.tsx           | 36 ++++++++----
 .../tooltip/demo/operation.tsx                |  7 +--
 .../custom/demo/custom-generate-palette.tsx   |  4 +-
 .../custom/demo/custom-manual-palette.tsx     |  6 +-
 65 files changed, 343 insertions(+), 330 deletions(-)
 create mode 100644 s2-site/docs/common/env.en.md
 create mode 100644 s2-site/docs/common/env.zh.md

diff --git a/README.en-US.md b/README.en-US.md
index c471d63a2b..d020b95aa9 100644
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -188,6 +188,14 @@ s2.render();
 | [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
 | [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
 
+### 🖥️ browser compatibility
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions |
+
+`@antv/s2-react` and `@antv/s2-vue` see [React JavaScript environment requirements](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite browser compatibility](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
+
 ## 👤 Author
 
 [**@AntV**](https://github.com/orgs/antvis/people)
diff --git a/README.md b/README.md
index 89eb8805c1..9d4e96cb4f 100644
--- a/README.md
+++ b/README.md
@@ -184,6 +184,14 @@ s2.render();
 | [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
 | [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
 
+### 🖥️ 兼容环境
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions |
+
+`@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
+
 ## 🙋‍♂️ 问题反馈
 
 有任何问题请严格按照模版 [提交 Issue](https://github.com/antvis/S2/issues/new/choose), 在这之前强烈建议阅读 [《⚠️ 提 Issue 前必读》](https://github.com/antvis/S2/issues/1904)
diff --git a/packages/s2-react/README.md b/packages/s2-react/README.md
index 18aa74b5e1..10203a7c7c 100644
--- a/packages/s2-react/README.md
+++ b/packages/s2-react/README.md
@@ -118,19 +118,19 @@ const s2Options = {
 <div id="container"></div>
 ```
 
-```ts
+```tsx
+import React from 'React'
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-const container = document.getElementById('container');
-
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container'),
-);
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 ### 4. 结果
diff --git a/s2-site/docs/common/env.en.md b/s2-site/docs/common/env.en.md
new file mode 100644
index 0000000000..a20f1f4198
--- /dev/null
+++ b/s2-site/docs/common/env.en.md
@@ -0,0 +1,7 @@
+默认支持**现代浏览器**, 如果出现兼容性问题请结合 `babel` 和 `@babel/polyfill` 使用
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions |
+
+`@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
diff --git a/s2-site/docs/common/env.zh.md b/s2-site/docs/common/env.zh.md
new file mode 100644
index 0000000000..164f19021b
--- /dev/null
+++ b/s2-site/docs/common/env.zh.md
@@ -0,0 +1,7 @@
+默认兼容**现代浏览器**, 如果出现兼容性问题请结合 `babel` 和 `@babel/polyfill` 使用
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions |
+
+`@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
diff --git a/s2-site/docs/common/packages.zh.md b/s2-site/docs/common/packages.zh.md
index 3b0767f32b..d698df0238 100644
--- a/s2-site/docs/common/packages.zh.md
+++ b/s2-site/docs/common/packages.zh.md
@@ -3,8 +3,19 @@ title: Packages
 order: 5
 ---
 
+:::info{title="提示"}
+
+创建 `S2` 表格有三种方式，基础类版本 `@antv/s2` 和 基于 `@antv/s2` 封装的 `React` 和 `Vue3` 版本
+
+- `@antv/s2`: 基于 `Canvas` 和 [AntV/G](https://g.antv.antgroup.com) 开发，提供基本的表格展示/交互等能力
+- `@antv/s2-react`: 基于 `@antv/s2` 封装，提供配套的 [分析组件](/manual/basic/analysis/switcher)
+- `@antv/s2-vue`: 基于 `Vue3` 和 `@antv/s2` 封装，提供配套的分析组件
+
+**也就是说** `@antv/s2` 和**框架无关**，你可以在 `Vue`, `Angular` 等任意框架中使用。
+:::
+
 | 版本号  | 稳定版    | 测试版   | 预览版  | 先行版 | 包大小  | 下载量    |
 | -------- | ------ | --------- | ---------- | ----------  | ----------  | ------ |
-| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
-| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
-| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
+| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg?logo=npm)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg?logo=npm)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg?logo=npm)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg?logo=npm)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg?logo=npm)       |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg?logo=npm) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg?logo=npm) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg?logo=npm) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg?logo=npm)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg?logo=npm) |
+| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg?logo=npm)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg?logo=npm)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg?logo=npm)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg?logo=npm) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg?logo=npm)   |
diff --git a/s2-site/docs/manual/basic/analysis/drill-down.zh.md b/s2-site/docs/manual/basic/analysis/drill-down.zh.md
index 5ee3ec96e4..1d7148ee5a 100644
--- a/s2-site/docs/manual/basic/analysis/drill-down.zh.md
+++ b/s2-site/docs/manual/basic/analysis/drill-down.zh.md
@@ -86,26 +86,26 @@ const PartDrillDown = {
 
 </details>
 
-```jsx
+```tsx
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { SheetComponent } from '@antv/s2-react';
 
 const s2Options = {
   hierarchyType: 'tree', // 树形结构
 };
 
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataConfig}
-    options={s2Options}
-    partDrillDown={PartDrillDown}
-  />,
-  document.getElementById('container'),
-);
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataConfig}
+      options={s2Options}
+      partDrillDown={PartDrillDown}
+    />
+  )
+}
 ```
 
-<Playground path='react-component/drill-dwon/demo/for-pivot.tsx' rid='container'></playground>
+<Playground path='react-component/drill-down/demo/for-pivot.tsx' rid='container'></playground>
 
 ## 使用场景
 
diff --git a/s2-site/docs/manual/basic/analysis/editable-mode.zh.md b/s2-site/docs/manual/basic/analysis/editable-mode.zh.md
index f368ffc1ca..2477f08333 100644
--- a/s2-site/docs/manual/basic/analysis/editable-mode.zh.md
+++ b/s2-site/docs/manual/basic/analysis/editable-mode.zh.md
@@ -19,7 +19,6 @@ order: 3
 
 ```typescript
 import React from "react";
-import ReactDOM from "react-dom";
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -158,14 +157,15 @@ const s2Options = {
 };
 
 // 4, 渲染
-ReactDOM.render(
-  <SheetComponent
-    sheetType="editable" // 此处指定sheetType为editable
-    dataCfg={s2DataCfg}
-    options={s2Options}
-  />,
-  document.getElementById('container')
-);
+const App = () => {
+  return (
+    <SheetComponent
+      sheetType="editable"
+      dataCfg={s2DataCfg}
+      options={s2Options}
+    />,
+  )
+}
 ```
 
 ## 特性
diff --git a/s2-site/docs/manual/basic/analysis/mobile-component.zh.md b/s2-site/docs/manual/basic/analysis/mobile-component.zh.md
index a6a60e5ddf..c3d25f4c0c 100644
--- a/s2-site/docs/manual/basic/analysis/mobile-component.zh.md
+++ b/s2-site/docs/manual/basic/analysis/mobile-component.zh.md
@@ -15,21 +15,18 @@ order: 10
 
 ## 移动端表格
 
-```ts
+```tsx
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { MobileSheet } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-const container = document.getElementById('container');
-
-ReactDOM.render(
-  <MobileSheet
-    dataCfg={s2DataConfig}
-  />,
-  document.getElementById('container'),
-);
-
+const App = () => {
+  return (
+    <MobileSheet
+      dataCfg={s2DataConfig}
+    />
+  )
+}
 ```
 
 | PC                                                                                                                                                    | Mobile                                                       |
diff --git a/s2-site/docs/manual/basic/analysis/strategy.zh.md b/s2-site/docs/manual/basic/analysis/strategy.zh.md
index 7d577bf8b6..691f4b4037 100644
--- a/s2-site/docs/manual/basic/analysis/strategy.zh.md
+++ b/s2-site/docs/manual/basic/analysis/strategy.zh.md
@@ -71,21 +71,20 @@ const s2Options = {
 
 </details>
 
-```ts
+```tsx
 import React from "react";
-import ReactDOM from "react-dom";
 import { SheetComponent } from "@antv/s2-react";
 import '@antv/s2-react/dist/style.min.css';
 
-ReactDOM.render(
-  <SheetComponent
-    sheetType="strategy"
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container'),
-);
-
+const App = () => {
+  return (
+    <SheetComponent
+      sheetType="strategy"
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 <Playground path='react-component/sheet/demo/strategy.tsx' rid='container'></playground>
diff --git a/s2-site/docs/manual/basic/analysis/switcher.zh.md b/s2-site/docs/manual/basic/analysis/switcher.zh.md
index a4d604f42a..aeb3bf3172 100644
--- a/s2-site/docs/manual/basic/analysis/switcher.zh.md
+++ b/s2-site/docs/manual/basic/analysis/switcher.zh.md
@@ -30,20 +30,20 @@ const switcherFields = {
 
 </details>
 
-```js
+```tsx
 import React from "react";
-import ReactDOM from "react-dom";
 import { Switcher } from "@antv/s2-react";
+import '@antv/s2-react/dist/style.min.css';
 
 const onSubmit = (result) => {
   console.log("result:", result);
 };
 
-ReactDOM.render(
-  <Switcher {...switcherFields} onSubmit={onSubmit} />,
-  document.getElementById("container")
-);
-
+const App = () => {
+  return (
+    <Switcher {...switcherFields} onSubmit={onSubmit} />,
+  )
+}
 ```
 
 <Playground path='react-component/switcher/demo/pure-switcher.tsx' rid='container'></playground>
diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
index 2f550dcbee..2e269159c9 100644
--- a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
@@ -16,9 +16,8 @@ order: 1
 
 ### React 组件方式
 
-```typescript
+```tsx
 import React from "react";
-import ReactDOM from "react-dom";
 import { SheetComponent } from "@antv/s2-react";
 import '@antv/s2-react/dist/style.min.css';
 
@@ -71,14 +70,14 @@ const s2Options = {
 };
 
 // 4. 渲染
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container')
-);
-
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 ​📊 查看 [React 版本透视表示例](/examples/react-component/sheet#pivot) 和 [API 文档](/api/components/sheet-component)。
@@ -90,10 +89,14 @@ ReactDOM.render(
 ```ts
 import { PivotSheet } from "@antv/s2";
 
-const container = document.getElementById('container');
-const s2 = new PivotSheet(container, dataCfg, options);
+async function bootstrap() {
+  const container = document.getElementById('container');
+  const s2 = new PivotSheet(container, dataCfg, options);
+
+  await s2.render();
+}
 
-await s2.render();
+bootstrap()
 ```
 
 ​📊 查看 [类方式透视表示例](/examples/basic/pivot#grid) 和 [API 文档](/api/general/s2options)。
diff --git a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
index bf4e70f983..76de1b8de0 100644
--- a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
@@ -19,9 +19,8 @@ order: 2
 
 ### React 组件方式
 
-```typescript
+```tsx
 import React from "react";
-import ReactDOM from "react-dom";
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -75,14 +74,15 @@ const s2Options = {
 };
 
 // 4, 渲染
-ReactDOM.render(
-  <SheetComponent
-    sheetType="table"
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container')
-);
+const App = () => {
+  return (
+    <SheetComponent
+      sheetType="table"
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 ### TableSheet 类方式
diff --git a/s2-site/docs/manual/basic/sort/advanced.zh.md b/s2-site/docs/manual/basic/sort/advanced.zh.md
index 1f32f98f4d..8013b98a0e 100644
--- a/s2-site/docs/manual/basic/sort/advanced.zh.md
+++ b/s2-site/docs/manual/basic/sort/advanced.zh.md
@@ -11,9 +11,8 @@ order: 1
 
 使用 `@antv/s2-react` 的 `SheetComponent` 组件 ，并给 `header` 配置 `advancedSortCfg` ，配置具体信息可查看 [AdvancedSortCfgProps](/docs/api/components/advanced-sort#advancedsortcfgprops)
 
-```ts
+```tsx
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 import { SortParams } from '@antv/s2';
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
@@ -40,8 +39,6 @@ const AdvancedSortDemo = () => {
   );
 };
 
-ReactDOM.render(<AdvancedSortDemo />, document.getElementById('container'));
-
 ```
 
 ## 配置
diff --git a/s2-site/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md
index 8d2e14bd46..1db044fa29 100644
--- a/s2-site/docs/manual/faq.zh.md
+++ b/s2-site/docs/manual/faq.zh.md
@@ -11,15 +11,7 @@ order: 8
 
 ### 浏览器兼容性
 
-如果出现兼容性问题请结合 `babel` 和 `@babel/polyfill` 使用，更多问题欢迎进群交流
-
-> 由于条件限制，版本下限仅供参考，并不意味着不能支持更低版本，该测试在 CDN 模式下测试完成，[在线 Demo](https://lxfu1.github.io/browser-compatibility-of-antv/?tab=s2)
-
-|             | Chrome | Edge  | Firefox |  IE   | Opera | Safari |  UC   | 360 极速浏览器 | 360 安全浏览器 |
-| ----------- | :----: | :---: | :-----: | :---: | :---: | :----: | :---: | :------------: | :------------: |
-| **AntV S2** |   40   |  12   |   85    |   9   |  40   |   14   |  6.2  |       12       |      7.3       |
-
-`@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
+<embed src="@/docs/common/env.zh.md"></embed>
 
 ### 浏览器引入
 
@@ -27,10 +19,17 @@ order: 8
 
 ### 官网访问有点慢，或打不开，有国内镜像吗？
 
-原国内镜像 [https://antv-s2.gitee.io](https://antv-s2.gitee.io/) 不再维护，推荐访问新版官网 [https://s2.antv.antgroup.com](https://s2.antv.antgroup.com/) 速度更快。
+原国内镜像 [https://antv-s2.gitee.io](https://antv-s2.gitee.io/) 和 旧版官网 [https://s2.antv.vision](https://s2.antv.vision) 不再维护，请访问新版官网 [https://s2.antv.antgroup.com](https://s2.antv.antgroup.com/) 速度更快。
+
+- [旧版官网](https://s2.antv.vision/)
+- [新版官网](https://s2.antv.antgroup.com/)
+
+### 目前官网是 2.x 版本，在哪里查看 1.x 版本的文档？
 
-[旧版官网](https://s2.antv.vision/)
-[新版官网](https://s2.antv.antgroup.com/)
+官网右上角可以切换文档版本：
+
+- [2.x 官网](https://s2.antv.antgroup.com/)
+- [1.x 官网](https://s2-v1.antv.antgroup.com/)
 
 ### 父级元素使用了 `transform: scale` 后，图表鼠标坐标响应不正确
 
@@ -190,16 +189,6 @@ const s2Options = {
 
 ### S2 有对应的 `Vue` 或者 `Angular` 版本吗？
 
-目前，S2 由三个包构成
-
-- `@antv/s2`: 基于 `canvas` 和 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 开发，提供基本的表格展示/交互等能力
-- `@antv/s2-react`: 基于 `@antv/s2` 封装，提供配套的分析组件
-- `@antv/s2-vue`: 基于 `Vue3` 和 `@antv/s2` 封装，提供配套的分析组件
-
-也就是说 `@antv/s2` 和**框架无关**，你可以在 `Vue`, `Angular` 等框架中使用。
-
-以下是版本概览：
-
 <embed src="@/docs/common/packages.zh.md"></embed>
 
 配套的 [分析组件](/docs/manual/basic/analysis/editable-mode)，目前还没有 `@antv/s2-angular` 的开发计划，欢迎社区一起建设 👏🏻.
diff --git a/s2-site/docs/manual/getting-started.zh.md b/s2-site/docs/manual/getting-started.zh.md
index a749bddf6e..b08db8f0f4 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -4,36 +4,36 @@ order: 1
 ---
 ## 📦 安装
 
-### npm | yarn 安装
+### 使用 npm 或 yarn 或 pnpm 安装
 
 ```bash
 # npm
-$ npm install @antv/s2
+$ npm install @antv/s2 --save
 
 # yarn
-$ yarn add @antv/s2
+$ yarn add @antv/s2 --save
+
+# pnpm
+$ pnpm install @antv/s2 --save
 ```
 
 ### 使用 React 或 Vue3 版本
 
 ```bash
 # React
-$ yarn add @antv/s2 @antv/s2-react
+$ pnpm install @antv/s2 @antv/s2-react --save
 
 # Vue3
-$ yarn add @antv/s2 @antv/s2-vue
+$ pnpm install @antv/s2 @antv/s2-vue --save
+
 ```
 
 ### 浏览器引入（不推荐）
 
 <embed src="@/docs/common/browser.zh.md"></embed>
 
-如需兼容 `IE`，需要自行引入 `polyfill` 兼容。
-
 ## 🔨 使用
 
-创建 `S2` 表格有三种方式，基础类版本 `(s2-core)` 和 基于 `core` 层 封装的 `React` 和 `Vue3` 版本
-
 <embed src="@/docs/common/packages.zh.md"></embed>
 
 ### 基础类
@@ -192,29 +192,26 @@ bootstrap();
 
 #### 表格组件使用
 
-```ts
+```tsx
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-const container = document.getElementById('container');
-
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container'),
-);
-
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 #### 注意事项
 
 `React` 版本的 `分析组件` 如：`高级排序`, `导出`, `下钻`, `Tooltip` 等组件基于 `antd` 组件库开发，如需使用，需要额外安装，并引入对应样式
 
-```ts
+```bash
 yarn add antd @ant-design/icons
 ```
 
@@ -224,19 +221,16 @@ yarn add antd @ant-design/icons
 
 ```ts
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { MobileSheet } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-const container = document.getElementById('container');
-
-ReactDOM.render(
-  <MobileSheet
-    dataCfg={s2DataConfig}
-  />,
-  document.getElementById('container'),
-);
-
+const App = () => {
+  return (
+    <MobileSheet
+      dataCfg={s2DataConfig}
+    />
+  )
+}
 ```
 
 #### 注意事项
diff --git a/s2-site/docs/manual/introduction.zh.md b/s2-site/docs/manual/introduction.zh.md
index fe9dfb192e..e6d1978152 100644
--- a/s2-site/docs/manual/introduction.zh.md
+++ b/s2-site/docs/manual/introduction.zh.md
@@ -230,6 +230,10 @@ bootstrap();
 
 <embed src="@/docs/common/packages.zh.md"></embed>
 
+### 🖥️ 浏览器兼容性
+
+<embed src="@/docs/common/env.zh.md"></embed>
+
 ## 🙋‍♂️ 问题反馈
 
 有任何问题请严格按照模版 [提交 Issue](https://github.com/antvis/S2/issues/new/choose), 在这之前强烈建议阅读 [《⚠️ 提 Issue 前必读》](https://github.com/antvis/S2/issues/1904)
diff --git a/s2-site/examples/analysis/sort/demo/advanced.tsx b/s2-site/examples/analysis/sort/demo/advanced.tsx
index d9bee18123..9d5dfbac3d 100644
--- a/s2-site/examples/analysis/sort/demo/advanced.tsx
+++ b/s2-site/examples/analysis/sort/demo/advanced.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent } from '@antv/s2-react';
 import insertCss from 'insert-css';
 import 'antd/es/cascader/style/index.css';
@@ -54,7 +54,7 @@ fetch(
     };
 
     const AdvancedSortDemo = () => {
-      const [dataCfg, setDataCfg] = useState(s2DataConfig);
+      const [dataCfg, setDataCfg] = React.useState(s2DataConfig);
       const [sortParams, setSortParams] = React.useState(defaultSortParams);
 
       return (
@@ -79,7 +79,9 @@ fetch(
       );
     };
 
-    ReactDOM.render(<AdvancedSortDemo />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(
+      <AdvancedSortDemo />,
+    );
   });
 
 insertCss(`
diff --git a/s2-site/examples/analysis/sort/demo/group-sort.tsx b/s2-site/examples/analysis/sort/demo/group-sort.tsx
index 29760ada2f..1d57339406 100644
--- a/s2-site/examples/analysis/sort/demo/group-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/group-sort.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import ReactDOM from 'react-dom/client';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
 
@@ -36,19 +36,18 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
       showDefaultHeaderActionIcon: true,
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
         dataCfg={s2DataConfig}
         options={s2Options}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/analysis/sort/demo/table-sort.tsx b/s2-site/examples/analysis/sort/demo/table-sort.tsx
index 905ee0086f..91f167ec3c 100644
--- a/s2-site/examples/analysis/sort/demo/table-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/table-sort.tsx
@@ -4,8 +4,8 @@ import '@antv/s2-react/dist/style.min.css';
 import { Button } from 'antd';
 import insertCss from 'insert-css';
 import { orderBy } from 'lodash';
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
@@ -51,7 +51,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
     };
 
     const App = () => {
-      const [dataCfg, setDataCfg] = useState(s2DataConfig);
+      const [dataCfg, setDataCfg] = React.useState<S2DataConfig>(s2DataConfig);
 
       return (
         <>
@@ -131,7 +131,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       );
     };
 
-    ReactDOM.render(<App />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(<App />);
   });
 
 // 我们用 insert-css 演示引入自定义样式
diff --git a/s2-site/examples/case/art/demo/mosaic.tsx b/s2-site/examples/case/art/demo/mosaic.tsx
index fe8d561371..505acc9f10 100644
--- a/s2-site/examples/case/art/demo/mosaic.tsx
+++ b/s2-site/examples/case/art/demo/mosaic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { ThemeCfg } from '@antv/s2';
@@ -72,12 +72,11 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
         themeCfg={{ theme: customTheme }}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/case/art/demo/time-spend-abstract.tsx b/s2-site/examples/case/art/demo/time-spend-abstract.tsx
index 8bdcf77441..57a1ac7a0e 100644
--- a/s2-site/examples/case/art/demo/time-spend-abstract.tsx
+++ b/s2-site/examples/case/art/demo/time-spend-abstract.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import insertCss from 'insert-css';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { DataCell, ThemeCfg } from '@antv/s2';
@@ -180,7 +180,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       </div>
     );
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <div className="sheet-wrapper">
         <PaletteLegend />
         <SheetComponent
@@ -190,7 +190,6 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
           themeCfg={{ theme: s2Theme }}
         />
       </div>,
-      document.getElementById('container'),
     );
   });
 
diff --git a/s2-site/examples/case/comparison/demo/measure-comparison.tsx b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
index 54c642e4bd..7997d48de2 100644
--- a/s2-site/examples/case/comparison/demo/measure-comparison.tsx
+++ b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
@@ -1,13 +1,12 @@
 /* eslint-disable max-classes-per-file */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import {
   ColCell,
   DataCell,
   CornerCell,
   Frame,
   ID_SEPARATOR,
-  measureTextWidth,
   S2DataConfig,
 } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
@@ -585,12 +584,11 @@ fetch('https://assets.antv.antgroup.com/s2/index-comparison.json')
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
         sheetType="pivot"
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx b/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
index ad4b46776c..cfb1c183a3 100644
--- a/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
+++ b/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import insertCss from 'insert-css';
 import { ColCell, S2DataConfig, S2Theme } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
@@ -236,7 +236,7 @@ fetch('https://assets.antv.antgroup.com/s2/multiple-people-comparison.json')
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
@@ -247,7 +247,6 @@ fetch('https://assets.antv.antgroup.com/s2/multiple-people-comparison.json')
           extra: <PaletteLegend />,
         }}
       />,
-      document.getElementById('container'),
     );
   });
 
diff --git a/s2-site/examples/case/comparison/demo/philosophers.tsx b/s2-site/examples/case/comparison/demo/philosophers.tsx
index 0e6d6220e3..2d3e79439b 100644
--- a/s2-site/examples/case/comparison/demo/philosophers.tsx
+++ b/s2-site/examples/case/comparison/demo/philosophers.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { max, min, replace } from 'lodash';
 import insertCss from 'insert-css';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
@@ -195,7 +195,7 @@ fetch(
       });
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
@@ -206,7 +206,6 @@ fetch(
         }}
         onDataCellMouseUp={onDataCellMouseUp}
       />,
-      document.getElementById('container'),
     );
   });
 
diff --git a/s2-site/examples/case/comparison/demo/time-spend.tsx b/s2-site/examples/case/comparison/demo/time-spend.tsx
index d31dce83d9..351d49867b 100644
--- a/s2-site/examples/case/comparison/demo/time-spend.tsx
+++ b/s2-site/examples/case/comparison/demo/time-spend.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable max-classes-per-file */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import insertCss from 'insert-css';
+import { DataCell, Frame, ThemeCfg } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import { DataCell, Frame, S2Theme, ThemeCfg } from '@antv/s2';
 import '@antv/s2-react/dist/style.min.css';
+import insertCss from 'insert-css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 const paletteLegendMap = [
   {
@@ -283,7 +283,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       </div>
     );
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <div className="sheet-wrapper">
         <PaletteLegend />
         <SheetComponent
@@ -293,7 +293,6 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
           themeCfg={{ theme: s2Theme, palette: s2Palette }}
         />
       </div>,
-      document.getElementById('container'),
     );
   });
 
diff --git a/s2-site/examples/case/data-preview/demo/excel.tsx b/s2-site/examples/case/data-preview/demo/excel.tsx
index 7f2852cb87..d041e87ce2 100644
--- a/s2-site/examples/case/data-preview/demo/excel.tsx
+++ b/s2-site/examples/case/data-preview/demo/excel.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import 'antd/es/checkbox/style/index.css';
-import { S2DataConfig } from '@antv/s2';
+import React, { useRef, useState } from 'react';
+import ReactDOM from 'react-dom/client';
 
 // 初始化配置
 const s2Options: SheetComponentOptions = {
@@ -42,5 +42,7 @@ const App = ({ data }) => {
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
   .then((res) => {
-    ReactDOM.render(<App data={res} />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(
+      <App data={res} />,
+    );
   });
diff --git a/s2-site/examples/case/data-preview/demo/house.tsx b/s2-site/examples/case/data-preview/demo/house.tsx
index ab5f5673d1..eae503e34f 100644
--- a/s2-site/examples/case/data-preview/demo/house.tsx
+++ b/s2-site/examples/case/data-preview/demo/house.tsx
@@ -1,12 +1,11 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { Select, InputNumber, Space } from 'antd';
-import { every, filter, isNil, last, map, omit } from 'lodash';
+import { S2DataConfig, NODE_ID_SEPARATOR } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import { InputNumber, Select, Space } from 'antd';
 import insertCss from 'insert-css';
-import { S2DataConfig, SortParams } from '@antv/s2';
+import { every, filter, isNil, last, map, omit } from 'lodash';
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom/client';
 
-const ID_SEPARATOR = '[&]';
 const defaultHouseInfo = {
   name: ['15#', '16#', '21#', '22#'],
   unit: ['1单元', '2单元'],
@@ -65,8 +64,8 @@ const defaultSortParams: S2DataConfig['sortParams'] = [
       const { data = [] } = params;
 
       return data.sort((a, b) => {
-        const aNum = last(a.split(ID_SEPARATOR));
-        const bNum = last(b.split(ID_SEPARATOR));
+        const aNum = last(a.split(NODE_ID_SEPARATOR));
+        const bNum = last(b.split(NODE_ID_SEPARATOR));
 
         return aNum - bNum;
       });
@@ -275,9 +274,8 @@ fetch(
 )
   .then((res) => res.json())
   .then((data) => {
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <Sheet data={data} />,
-      document.getElementById('container'),
     );
   });
 
diff --git a/s2-site/examples/case/data-preview/demo/index.tsx b/s2-site/examples/case/data-preview/demo/index.tsx
index e397da29a0..a96499af13 100644
--- a/s2-site/examples/case/data-preview/demo/index.tsx
+++ b/s2-site/examples/case/data-preview/demo/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
 import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import insertCss from 'insert-css';
 import {
   TableColCell,
@@ -694,7 +694,9 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
   .then((res) => {
-    ReactDOM.render(<App data={res} />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(
+      <App data={res} />,
+    );
   });
 
 insertCss(`
diff --git a/s2-site/examples/case/kpi-strategy/demo/basic.tsx b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
index 7e86c24993..41c6c21019 100644
--- a/s2-site/examples/case/kpi-strategy/demo/basic.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { merge } from 'lodash';
 import { DataCell, measureTextWidth, S2DataConfig, S2Theme } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 // 进度条
 const PROGRESS_BAR = {
@@ -248,7 +247,7 @@ fetch('https://assets.antv.antgroup.com/s2/kpi-strategy.json')
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
@@ -257,6 +256,5 @@ fetch('https://assets.antv.antgroup.com/s2/kpi-strategy.json')
           theme,
         }}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
index 561b031b19..ae70d30df7 100644
--- a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { isNil } from 'lodash';
 import { isUpDataValue } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
@@ -20,6 +20,7 @@ fetch(
           height: 60,
         },
         colCell: {
+          // TODO:
           widthByFieldValue: { 近14日趋势图: 300 },
         },
       },
@@ -69,12 +70,11 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataCfg}
         options={s2Options}
         sheetType="strategy"
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/case/performance-compare/demo/basic.tsx b/s2-site/examples/case/performance-compare/demo/basic.tsx
index e06e30caa2..48613aaf51 100644
--- a/s2-site/examples/case/performance-compare/demo/basic.tsx
+++ b/s2-site/examples/case/performance-compare/demo/basic.tsx
@@ -3,7 +3,7 @@ import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { compact } from 'lodash';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 const disableColor = '#d3d7d4';
 const colors = [
@@ -91,7 +91,7 @@ function getOptions(rawData: S2DataConfig['data']): SheetComponentOptions {
 fetch('https://assets.antv.antgroup.com/s2/compare.json')
   .then((res) => res.json())
   .then((data) => {
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <div>
         <h3>1000 数据规模表格渲染时间对比</h3>
         <SheetComponent
@@ -112,6 +112,5 @@ fetch('https://assets.antv.antgroup.com/s2/compare.json')
           sheetType="pivot"
         />
       </div>,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/case/proportion/demo/group-drill-down.tsx b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
index e96f43d042..c49119c062 100644
--- a/s2-site/examples/case/proportion/demo/group-drill-down.tsx
+++ b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
@@ -3,7 +3,7 @@ import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import insertCss from 'insert-css';
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/ff31b171-17a7-4d29-b20a-0b90a810d2de.json',
@@ -154,7 +154,9 @@ fetch(
       );
     };
 
-    ReactDOM.render(<GridSheet />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(
+      <GridSheet />,
+    );
   });
 
 insertCss(`
diff --git a/s2-site/examples/case/proportion/demo/single-population-proportion.tsx b/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
index 12e19c0fd2..e2ef2b978d 100644
--- a/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
+++ b/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import insertCss from 'insert-css';
+import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import { S2DataConfig, S2Options } from '@antv/s2';
+import insertCss from 'insert-css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 const PALETTE_COLORS = [
   {
@@ -155,7 +155,7 @@ fetch('https://assets.antv.antgroup.com/s2/single-population-proportion.json')
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <div className="root">
         <SheetComponent
           dataCfg={s2DataConfig}
@@ -168,7 +168,6 @@ fetch('https://assets.antv.antgroup.com/s2/single-population-proportion.json')
           }}
         />
       </div>,
-      document.getElementById('container'),
     );
   });
 
diff --git a/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
index 2027dd65b8..7ecc069853 100644
--- a/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
+++ b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -103,8 +103,7 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent dataCfg={dataCfg} options={s2Options} />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/custom/custom-order/demo/custom-order.tsx b/s2-site/examples/custom/custom-order/demo/custom-order.tsx
index a5926b69d6..7140bc4c94 100644
--- a/s2-site/examples/custom/custom-order/demo/custom-order.tsx
+++ b/s2-site/examples/custom/custom-order/demo/custom-order.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { Node, S2DataConfig, TooltipOptions } from '@antv/s2';
 
@@ -126,4 +126,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('container'));
+ReactDOM.createRoot(document.getElementById('container')).render(<App />);
diff --git a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
index 397e00c5cc..bb14495c05 100644
--- a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
+++ b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import { concat, debounce, forEach, map } from 'lodash';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
@@ -13,7 +12,7 @@ fetch(
       height: 480,
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
@@ -23,6 +22,5 @@ fetch(
           getContainer: () => document.getElementById('container'),
         }}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx b/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx
index a73c458ba4..e5587bf656 100644
--- a/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx
+++ b/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { DrillDown } from '@antv/s2-react';
 
 const disabledFields = ['name'];
@@ -28,11 +28,10 @@ const dataSet = [
   },
 ];
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('container')).render(
   <DrillDown
     disabledFields={disabledFields}
     clearButtonText={clearButtonText}
     dataSet={dataSet}
   />,
-  document.getElementById('container'),
 );
diff --git a/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx b/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
index 403f5fd86a..86ad429843 100644
--- a/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
+++ b/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import {
   SheetComponent,
   SheetComponentOptions,
@@ -41,7 +41,6 @@ fetch(
           },
         ],
       },
-
       fetchData: (meta, drillFields) =>
         new Promise((resolve) => {
           const dataSet = meta.spreadsheet.dataSet;
@@ -82,13 +81,12 @@ fetch(
         }),
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
         partDrillDown={PartDrillDown}
         adaptive={false}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/export/demo/export.tsx b/s2-site/examples/react-component/export/demo/export.tsx
index ca33ffce15..0cebaa6cce 100644
--- a/s2-site/examples/react-component/export/demo/export.tsx
+++ b/s2-site/examples/react-component/export/demo/export.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -27,7 +27,7 @@ fetch(
       data: res.data,
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
@@ -38,6 +38,5 @@ fetch(
         }}
         adaptive={false}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/header/demo/default.tsx b/s2-site/examples/react-component/header/demo/default.tsx
index 8dc29a6b47..5553f0de41 100644
--- a/s2-site/examples/react-component/header/demo/default.tsx
+++ b/s2-site/examples/react-component/header/demo/default.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import insertCss from 'insert-css';
 import { Button } from 'antd';
 import {
@@ -66,7 +66,9 @@ fetch(
       );
     };
 
-    ReactDOM.render(<SheetHeader />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(
+      <SheetHeader />,
+    );
   });
 
 insertCss(`
diff --git a/s2-site/examples/react-component/pagination/demo/pivot.tsx b/s2-site/examples/react-component/pagination/demo/pivot.tsx
index 8b7c5f8a49..63d8200201 100644
--- a/s2-site/examples/react-component/pagination/demo/pivot.tsx
+++ b/s2-site/examples/react-component/pagination/demo/pivot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -18,8 +18,7 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent dataCfg={dataCfg} options={s2Options} showPagination />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/pagination/demo/table.tsx b/s2-site/examples/react-component/pagination/demo/table.tsx
index 1f27b7d6e4..b33a13cdcf 100644
--- a/s2-site/examples/react-component/pagination/demo/table.tsx
+++ b/s2-site/examples/react-component/pagination/demo/table.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -45,7 +45,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       data: res,
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
@@ -59,6 +59,5 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
           },
         }}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/editable.tsx b/s2-site/examples/react-component/sheet/demo/editable.tsx
index 2fbf029cf9..8f9fd99f7a 100644
--- a/s2-site/examples/react-component/sheet/demo/editable.tsx
+++ b/s2-site/examples/react-component/sheet/demo/editable.tsx
@@ -1,7 +1,7 @@
 import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
@@ -51,12 +51,11 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
         sheetType="editable"
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx b/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx
index 6d9295d48d..6dee13ce06 100644
--- a/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx
+++ b/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { MobileSheet } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -8,9 +8,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <MobileSheet dataCfg={dataCfg} />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/pivot.tsx b/s2-site/examples/react-component/sheet/demo/pivot.tsx
index 2febbb28a8..1977c9d014 100644
--- a/s2-site/examples/react-component/sheet/demo/pivot.tsx
+++ b/s2-site/examples/react-component/sheet/demo/pivot.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import {
-  SheetComponent,
-  SheetComponentOptions,
-  SheetComponentOptions,
-} from '@antv/s2-react';
+import ReactDOM from 'react-dom/client';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -17,8 +13,7 @@ fetch(
       height: 480,
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent dataCfg={dataCfg} options={s2Options} />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
index eef8fd550f..f6486fff8e 100644
--- a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
+++ b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/b942d973-7364-4fad-a10a-369426a61376.json',
@@ -42,12 +42,11 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
         sheetType="strategy"
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/strategy.tsx b/s2-site/examples/react-component/sheet/demo/strategy.tsx
index 6032ba1813..6c252abc69 100644
--- a/s2-site/examples/react-component/sheet/demo/strategy.tsx
+++ b/s2-site/examples/react-component/sheet/demo/strategy.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import { EXTRA_COLUMN_FIELD, S2DataConfig } from '@antv/s2';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 // 临时处理老数据格式
 function process(children) {
@@ -80,12 +80,11 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="strategy"
         dataCfg={s2DataConfig}
         options={s2Options}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/table.tsx b/s2-site/examples/react-component/sheet/demo/table.tsx
index 8d4e5b3773..a03dd836cd 100644
--- a/s2-site/examples/react-component/sheet/demo/table.tsx
+++ b/s2-site/examples/react-component/sheet/demo/table.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import { S2DataConfi } from '@antv/s2';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
@@ -41,12 +41,11 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       data: res,
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
         sheetType="table"
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
index a031f343ce..5a17f235d5 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import insertCss from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
+import insertCss from 'insert-css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/6eede6eb-8021-4da8-bb12-67891a5705b7.json',
@@ -34,7 +34,9 @@ fetch(
       );
     };
 
-    ReactDOM.render(<SwitcherDemo />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(
+      <SwitcherDemo />,
+    );
   });
 
 insertCss(`
diff --git a/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx b/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
index c294eb23c5..7f9b38689d 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 import {
   SheetComponent,
   SheetComponentOptions,
   Switcher,
 } from '@antv/s2-react';
-import insertCss from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
+import insertCss from 'insert-css';
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom/client';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/0c913e28-7806-41b2-a046-df3c1586712c.json',
@@ -110,7 +110,9 @@ fetch(
       );
     };
 
-    ReactDOM.render(<SwitcherDemo />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(
+      <SwitcherDemo />,
+    );
   });
 
 insertCss(`
diff --git a/s2-site/examples/react-component/switcher/demo/pivot.tsx b/s2-site/examples/react-component/switcher/demo/pivot.tsx
index 5277b274ff..22e02d5a34 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import {
   SheetComponent,
   SheetComponentOptions,
@@ -88,7 +88,9 @@ fetch(
       );
     };
 
-    ReactDOM.render(<SwitcherDemo />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(
+      <SwitcherDemo />,
+    );
   });
 
 insertCss(`
diff --git a/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx b/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx
index 6811f5283d..83b8e4e2d6 100644
--- a/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { Switcher } from '@antv/s2-react';
 
 const switcherFields = {
@@ -20,7 +20,6 @@ const onSubmit = (result) => {
   console.log('result:', result);
 };
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('container')).render(
   <Switcher {...switcherFields} onSubmit={onSubmit} />,
-  document.getElementById('container'),
 );
diff --git a/s2-site/examples/react-component/switcher/demo/table.tsx b/s2-site/examples/react-component/switcher/demo/table.tsx
index ea246bec3e..a9c6b5d2d9 100644
--- a/s2-site/examples/react-component/switcher/demo/table.tsx
+++ b/s2-site/examples/react-component/switcher/demo/table.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import {
   SheetComponent,
   SheetComponentOptions,
@@ -79,7 +79,9 @@ fetch(
       );
     };
 
-    ReactDOM.render(<SwitcherDemo />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(
+      <SwitcherDemo />,
+    );
   });
 
 insertCss(`
diff --git a/s2-site/examples/react-component/tooltip/demo/basic.tsx b/s2-site/examples/react-component/tooltip/demo/basic.tsx
index 2c875f02eb..7cb2e8d650 100644
--- a/s2-site/examples/react-component/tooltip/demo/basic.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -19,13 +19,12 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
         dataCfg={dataCfg}
         options={s2Options}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
index a647fa4fe4..97e6093634 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { TargetCellInfo } from '@antv/s2';
@@ -44,7 +44,7 @@ fetch(
       }
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
@@ -52,6 +52,5 @@ fetch(
         options={s2Options}
         onColCellClick={onColCellClick}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-content.tsx b/s2-site/examples/react-component/tooltip/demo/custom-content.tsx
index 0e6746f970..066f91b05a 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-content.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-content.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import insertCss from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
@@ -27,14 +27,13 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
         dataCfg={dataCfg}
         options={s2Options}
       />,
-      document.getElementById('container'),
     );
   });
 
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-description.tsx b/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
index 3d75cf5ddb..aafe59bf59 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -47,12 +47,11 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         dataCfg={dataCfg}
         options={s2Options}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
index 8f8d3d994f..119bfd0adc 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -54,7 +54,7 @@ fetch(
       });
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
@@ -64,6 +64,5 @@ fetch(
         onRowCellHover={onRowCellHover}
         onDataCellHover={onDataCellHover}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
index b2c9dc700f..710bd27aa6 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -73,13 +73,12 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
         dataCfg={dataCfg}
         options={s2Options}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
index 1c2b7eee84..3a506f6d2b 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import ReactDOM from 'react-dom/client';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import insertCss from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -9,12 +9,12 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
 
-    ReactDOM.render(
+    const App = () => (
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
@@ -75,9 +75,10 @@ fetch(
             instance.tooltip.show(customOptions);
           };
         }}
-      />,
-      document.getElementById('container'),
+      />
     );
+
+    ReactDOM.createRoot(document.getElementById('container')).render(<App />);
   });
 
 insertCss(`
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
index c3fc4462c7..755c49f812 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
@@ -1,21 +1,31 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { BaseTooltip } from '@antv/s2';
-import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import insertCss from 'insert-css';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  TooltipOperatorMenuOptions,
+} from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import insertCss from 'insert-css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 const MyCustomTooltipContent = () => (
   <div className="tooltip-custom-component">我是自定义 tooltip 内容</div>
 );
 
-class CustomTooltip extends BaseTooltip {
+class CustomTooltip extends BaseTooltip<
+  React.ReactNode,
+  TooltipOperatorMenuOptions
+> {
   constructor(spreadsheet) {
     super(spreadsheet);
   }
 
+  root: ReactDOM.Root;
+
   renderContent() {
-    ReactDOM.render(<MyCustomTooltipContent />, this.container);
+    this.root ??= ReactDOM.createRoot(this.container!);
+    this.root.render(<MyCustomTooltipContent />);
   }
 
   show(options) {
@@ -26,10 +36,15 @@ class CustomTooltip extends BaseTooltip {
   destroy() {
     console.log('tooltip destroy');
 
+    this.unmount();
     super.destroy();
-    if (this.container) {
-      ReactDOM.unmountComponentAtNode(this.container);
-    }
+  }
+
+  unmount() {
+    // https://github.com/facebook/react/issues/25675#issuecomment-1363957941
+    Promise.resolve().then(() => {
+      this.root?.unmount();
+    });
   }
 }
 
@@ -47,14 +62,13 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
         dataCfg={dataCfg}
         options={s2Options}
       />,
-      document.getElementById('container'),
     );
   });
 
diff --git a/s2-site/examples/react-component/tooltip/demo/operation.tsx b/s2-site/examples/react-component/tooltip/demo/operation.tsx
index a001777402..f07080a011 100644
--- a/s2-site/examples/react-component/tooltip/demo/operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/operation.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { CellType } from '@antv/s2';
@@ -23,7 +23,7 @@ fetch(
             items: [
               {
                 key: 'trend',
-                text: '趋势',
+                label: '趋势',
                 icon: 'Trend',
                 // 数值单元格展示
                 visible: (cell) => cell.cellType === CellType.DATA_CELL,
@@ -37,13 +37,12 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
         dataCfg={dataCfg}
         options={s2Options}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx b/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
index eb99a8b8a3..95a7a4fe90 100644
--- a/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
+++ b/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { getPalette, generatePalette, ThemeCfg } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { ChromePicker } from 'react-color';
@@ -74,5 +74,5 @@ fetch(
       );
     }
 
-    ReactDOM.render(<App />, document.getElementById('container'));
+    ReactDOM.createRoot(document.getElementById('container')).render(<App />);
   });
diff --git a/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx b/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
index 9762461d3b..3f08a5c78a 100644
--- a/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
+++ b/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
@@ -1,14 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { debounce, isObjectLike } from 'lodash';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { S2DataConfig, getPalette } from '@antv/s2';
 import { SketchPicker } from 'react-color';
 import { Row, Space, Input, Button, message, Popover, Table } from 'antd';
 import copy from 'copy-to-clipboard';
 
-import 'antd/es/table/style/index.css';
-import 'antd/es/space/style/index.css';
 import '@antv/s2-react/dist/style.min.css';
 
 const s2Options: SheetComponentOptions = {
@@ -229,4 +227,4 @@ function App() {
   );
 }
 
-ReactDOM.render(<App />, document.getElementById('container'));
+ReactDOM.createRoot(document.getElementById('container')).render(<App />);

From cc6d069e19b1852b46d99258424d90db2a161889 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Tue, 26 Dec 2023 17:01:23 +0800
Subject: [PATCH 03/64] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E5=A4=9A?=
 =?UTF-8?q?=E8=A1=8C=E6=96=87=E6=9C=AC=20&=20=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E8=A1=8C=E5=88=97=E5=A4=B4=20=E7=9A=84=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.en-US.md                               |   2 +-
 README.md                                     |   6 +-
 packages/s2-core/README.md                    |   6 +-
 .../spreadsheet/multi-line-text-spec.ts       |   2 +-
 packages/s2-core/src/cell/base-cell.ts        |   8 +-
 pnpm-lock.yaml                                | 140 ++++++++++++++----
 s2-site/.dumi/global.less                     |  19 +++
 s2-site/.dumi/global.ts                       |  60 ++++++++
 s2-site/.dumirc.ts                            |   8 +-
 s2-site/README.md                             |  19 ++-
 s2-site/docs/api/basic-class/base-cell.zh.md  |  15 +-
 .../docs/common/custom/customTreeNode.zh.md   |   4 +-
 .../advanced/custom/custom-header.zh.md       | 105 +++++--------
 .../docs/manual/basic/multi-line-text.en.md   |   4 +
 .../docs/manual/basic/multi-line-text.zh.md   |  60 ++++++++
 s2-site/docs/manual/getting-started.zh.md     |   6 +-
 s2-site/docs/manual/introduction.zh.md        |   2 +-
 s2-site/package.json                          |   4 +-
 18 files changed, 352 insertions(+), 118 deletions(-)
 create mode 100644 s2-site/.dumi/global.less
 create mode 100644 s2-site/.dumi/global.ts
 create mode 100644 s2-site/docs/manual/basic/multi-line-text.en.md
 create mode 100644 s2-site/docs/manual/basic/multi-line-text.zh.md

diff --git a/README.en-US.md b/README.en-US.md
index d020b95aa9..77fdab42e2 100644
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -79,7 +79,7 @@ demo components and expansion capabilities, it allows developers to use it quick
 ```bash
 $ npm install @antv/s2
 # yarn add @antv/s2
-# pnpm install @antv/s2
+# pnpm add @antv/s2
 ```
 
 ## 🔨 Getting Started
diff --git a/README.md b/README.md
index 9d4e96cb4f..f7ac555fa2 100644
--- a/README.md
+++ b/README.md
@@ -73,9 +73,9 @@ S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数
 ## 📦 安装
 
 ```bash
-$ npm install @antv/s2
-# yarn add @antv/s2
-# pnpm install @antv/s2
+$ npm install @antv/s2 --save
+# yarn add @antv/s2 --save
+# pnpm add @antv/s2 --save
 ```
 
 ## 🔨 使用
diff --git a/packages/s2-core/README.md b/packages/s2-core/README.md
index 6c95fdc7eb..f954dc3827 100644
--- a/packages/s2-core/README.md
+++ b/packages/s2-core/README.md
@@ -73,9 +73,9 @@ S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数
 ## 📦 安装
 
 ```bash
-$ npm install @antv/s2
-# yarn add @antv/s2
-# pnpm install @antv/s2
+$ npm install @antv/s2 --save
+# yarn add @antv/s2 --save
+# pnpm add @antv/s2 --save
 ```
 
 ## 🔨 使用
diff --git a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
index 9f160579af..d2e48ca6ea 100644
--- a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
@@ -115,7 +115,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     });
 
     afterEach(() => {
-      // s2.destroy();
+      s2.destroy();
     });
 
     test('should default render one line text', () => {
diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
index e94f7f4b23..38a44cd928 100644
--- a/packages/s2-core/src/cell/base-cell.ts
+++ b/packages/s2-core/src/cell/base-cell.ts
@@ -215,7 +215,7 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
   }
 
   /**
-   * 实际渲染的文本宽度, 如果是多行文本, 取每一行文本高度的总和)
+   * 实际渲染的文本宽度, 如果是多行文本, 取每一行文本高度的总和
    * @alias getMultiLineActualTextHeight
    */
   public getActualTextHeight(): number {
@@ -265,6 +265,9 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     return this.getTextLineBoundingRects().length > 1;
   }
 
+  /**
+   * 获取单元格空值占位符
+   */
   public getEmptyPlaceholder() {
     const {
       options: { placeholder },
@@ -280,6 +283,9 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     return this.textShape?.getLineBoundingRects() || [];
   }
 
+  /**
+   * 获取单元格展示的数值
+   */
   public getFieldValue() {
     return this.getFormattedFieldValue().formattedValue;
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 412d2a81cc..2a245064f3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -445,7 +445,7 @@ importers:
         version: 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@antv/dumi-theme-antv':
         specifier: ^0.4.5
-        version: 0.4.5(@babel/core@7.23.2)(dumi@2.2.16)
+        version: 0.4.5(@babel/core@7.23.2)(dumi@2.2.16)(react-dom@18.2.0)(react@18.2.0)
       '@antv/g-canvas':
         specifier: ^1.11.25
         version: 1.11.25
@@ -466,22 +466,28 @@ importers:
         version: link:../packages/s2-react
       antd:
         specifier: ^5.12.5
-        version: 5.12.5
+        version: 5.12.5(react-dom@18.2.0)(react@18.2.0)
       copy-to-clipboard:
         specifier: ^3.3.3
         version: 3.3.3
       dumi:
         specifier: ^2.2.16
-        version: 2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
+        version: 2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
       gh-pages:
         specifier: ^6.1.1
         version: 6.1.1
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
       react-color:
         specifier: ^2.19.3
         version: 2.19.3(react@18.2.0)
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
     devDependencies:
       '@google-cloud/translate':
         specifier: ^7.0.3
@@ -771,10 +777,12 @@ packages:
       '@antv/util': 2.0.17
       gl-matrix: 3.4.3
 
-  /@antv/dumi-theme-antv@0.4.5(@babel/core@7.23.2)(dumi@2.2.16):
+  /@antv/dumi-theme-antv@0.4.5(@babel/core@7.23.2)(dumi@2.2.16)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-TMbgp+DhnXiTt63xf1iu/6Go/k5SZ4J//i9u5IHRA7n8kwL8iq3nQPmR27lOAahri/F0sTnihLUtDCgWymn0gQ==}
     peerDependencies:
       dumi: ^2.0.0
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
     dependencies:
       '@ant-design/icons': 4.8.1(react-dom@18.2.0)(react@18.2.0)
       '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.23.2)
@@ -788,7 +796,7 @@ packages:
       codesandbox: 2.2.3
       d3-dsv: 3.0.1
       docsearch.js: 2.6.3
-      dumi: 2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
+      dumi: 2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
       front-matter: 4.0.2
       fs-extra: 10.1.0
       glob: 8.1.0
@@ -2998,11 +3006,25 @@ packages:
       react-is: 16.13.1
     dev: false
 
-  /@makotot/ghostui@2.0.0:
+  /@loadable/component@5.15.2(react@18.2.0):
+    resolution: {integrity: sha512-ryFAZOX5P2vFkUdzaAtTG88IGnr9qxSdvLRvJySXcUA4B4xVWurUNADu3AnKPksxOZajljqTrDEDcYjeL4lvLw==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: '>=16.3.0'
+    dependencies:
+      '@babel/runtime': 7.23.5
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+      react-is: 16.13.1
+    dev: false
+
+  /@makotot/ghostui@2.0.0(react@18.2.0):
     resolution: {integrity: sha512-LD6OeMv+yGjpYZNjh34yDTCIE1NegqOtJq5gm4wX6op3QL7K5psTVzMjkWzseBoYj0XOD4g+UJVIZTprfoOPGg==}
     engines: {node: '>=10'}
     peerDependencies:
       react: '>=16'
+    dependencies:
+      react: 18.2.0
     dev: false
 
   /@microsoft/api-extractor-model@7.28.2(@types/node@20.8.9):
@@ -5384,6 +5406,21 @@ packages:
       react-router-dom: 6.3.0(react-dom@18.1.0)(react@18.1.0)
     dev: false
 
+  /@umijs/renderer-react@4.0.88(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-5zU4+PLO9+D8nl/WikGE6QjYvztKWSLGp+N33TPL0BrrJOSTI/ffH/iwsPxiFG/ABX4oz3SShUyIhyChSnP/WQ==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@babel/runtime': 7.23.2
+      '@loadable/component': 5.15.2(react@18.2.0)
+      history: 5.3.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-helmet-async: 1.3.0(react-dom@18.2.0)(react@18.2.0)
+      react-router-dom: 6.3.0(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
   /@umijs/server@4.0.88:
     resolution: {integrity: sha512-Bvt6HCVn7NO7hrHbWXccJhpeQCwb5/lL9g5ShSOIfcf8WwND+U7E9H3ME5cMJywdgeTjEe+yItLGQHur9TpOTg==}
     dependencies:
@@ -6183,7 +6220,7 @@ packages:
       - moment
     dev: true
 
-  /antd@5.12.5:
+  /antd@5.12.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-m9r9VhTmANS4kdBwHcxI4QWIGoZh3LspXNb2SxoezRSUZ9RUFpf+gO0AjPx8EPeO/nLKsHAoCSLza9r041bAgw==}
     peerDependencies:
       react: '>=16.9.0'
@@ -6211,7 +6248,7 @@ packages:
       rc-dropdown: 4.1.0(react-dom@18.2.0)(react@18.2.0)
       rc-field-form: 1.41.0(react-dom@18.2.0)(react@18.2.0)
       rc-image: 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      rc-input: 1.3.11
+      rc-input: 1.3.11(react-dom@18.2.0)(react@18.2.0)
       rc-input-number: 8.4.0(react-dom@18.2.0)(react@18.2.0)
       rc-mentions: 2.9.1(react-dom@18.2.0)(react@18.2.0)
       rc-menu: 9.12.4(react-dom@18.2.0)(react@18.2.0)
@@ -6227,14 +6264,16 @@ packages:
       rc-slider: 10.5.0(react-dom@18.2.0)(react@18.2.0)
       rc-steps: 6.0.1(react-dom@18.2.0)(react@18.2.0)
       rc-switch: 4.1.0(react-dom@18.2.0)(react@18.2.0)
-      rc-table: 7.36.1
+      rc-table: 7.36.1(react-dom@18.2.0)(react@18.2.0)
       rc-tabs: 12.14.1(react-dom@18.2.0)(react@18.2.0)
       rc-textarea: 1.5.3(react-dom@18.2.0)(react@18.2.0)
-      rc-tooltip: 6.1.3
+      rc-tooltip: 6.1.3(react-dom@18.2.0)(react@18.2.0)
       rc-tree: 5.8.2(react-dom@18.2.0)(react@18.2.0)
       rc-tree-select: 5.15.0(react-dom@18.2.0)(react@18.2.0)
       rc-upload: 4.3.5(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
       scroll-into-view-if-needed: 3.1.0
       throttle-debounce: 5.0.0
     transitivePeerDependencies:
@@ -9060,7 +9099,7 @@ packages:
     resolution: {integrity: sha512-a/Y5lf0G6gwsEQ9hop/n03CcjmHsGBk384Cz/AEX6mRYrfSpUx/lQvP9HLoXkCzScl9PL1sSmLPnMkgaXDCZLA==}
     dev: false
 
-  /dumi@2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2):
+  /dumi@2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2):
     resolution: {integrity: sha512-r2x/CY0fR8/YZOwEnG4JsLEpn8jOg94Qyd1u+7pRD9SCx7dF9It+GwkGbdNEsyenGsO/ZU9wD+Kz7KO+HU7/EA==}
     hasBin: true
     peerDependencies:
@@ -9068,7 +9107,7 @@ packages:
       react-dom: '>=16.8'
     dependencies:
       '@ant-design/icons-svg': 4.3.1
-      '@makotot/ghostui': 2.0.0
+      '@makotot/ghostui': 2.0.0(react@18.2.0)
       '@stackblitz/sdk': 1.9.0
       '@swc/core': 1.3.72
       '@types/hast': 2.3.8
@@ -9102,16 +9141,18 @@ packages:
       mdast-util-to-string: 3.2.0
       nprogress: 0.2.0
       pluralize: 8.0.0
-      prism-react-renderer: 1.3.5
+      prism-react-renderer: 1.3.5(react@18.2.0)
       prism-themes: 1.9.0
       prismjs: 1.29.0
       raw-loader: 4.0.2
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-tabs: 12.14.1(react-dom@18.2.0)(react@18.2.0)
       rc-tree: 5.8.2(react-dom@18.2.0)(react@18.2.0)
-      react-copy-to-clipboard: 5.1.0
-      react-error-boundary: 4.0.11
-      react-intl: 6.5.5(typescript@5.2.2)
+      react: 18.2.0
+      react-copy-to-clipboard: 5.1.0(react@18.2.0)
+      react-dom: 18.2.0(react@18.2.0)
+      react-error-boundary: 4.0.11(react@18.2.0)
+      react-intl: 6.5.5(react@18.2.0)(typescript@5.2.2)
       rehype-autolink-headings: 6.1.1
       rehype-remove-comments: 5.0.0
       rehype-stringify: 9.0.3
@@ -9122,7 +9163,7 @@ packages:
       remark-rehype: 10.1.0
       sass: 1.69.5
       sitemap: 7.1.1
-      umi: 4.0.88(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(sass@1.69.5)(stylelint@15.11.0)(typescript@5.2.2)
+      umi: 4.0.88(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(sass@1.69.5)(stylelint@15.11.0)(typescript@5.2.2)
       unified: 10.1.2
       unist-util-visit: 4.1.2
       unist-util-visit-parents: 5.1.3
@@ -18085,10 +18126,12 @@ packages:
       chalk: 2.1.0
     dev: true
 
-  /prism-react-renderer@1.3.5:
+  /prism-react-renderer@1.3.5(react@18.2.0):
     resolution: {integrity: sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==}
     peerDependencies:
       react: '>=0.14.9'
+    dependencies:
+      react: 18.2.0
     dev: false
 
   /prism-themes@1.9.0:
@@ -18692,7 +18735,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-input@1.3.11:
+  /rc-input@1.3.11(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-jhH7QP5rILanSHCGSUkdoFE5DEtpv8FIseYhuYkOZzUBeiVAiwM3q26YqZ6xBB0QFEZ/yUAgms4xW4iuub3xFQ==}
     peerDependencies:
       react: '>=16.0.0'
@@ -18701,6 +18744,8 @@ packages:
       '@babel/runtime': 7.23.5
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     dev: false
 
   /rc-input@1.3.6(react-dom@18.2.0)(react@18.2.0):
@@ -19144,7 +19189,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /rc-table@7.36.1:
+  /rc-table@7.36.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-9qMxEm/3Y8ukdW8I8ZvmhX0QImfNKzH0JEUlSbyaUlsYTB+/tQEbfaB8YkG4sHVZ1io4pxqK/BXoZYqebi/TIQ==}
     engines: {node: '>=8.x'}
     peerDependencies:
@@ -19157,6 +19202,8 @@ packages:
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       rc-virtual-list: 3.11.3(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     dev: false
 
   /rc-tabs@12.14.1(react-dom@18.2.0)(react@18.2.0):
@@ -19249,7 +19296,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /rc-tooltip@6.1.3:
+  /rc-tooltip@6.1.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-HMSbSs5oieZ7XddtINUddBLSVgsnlaSb3bZrzzGWjXa7/B7nNedmsuz72s7EWFEro9mNa7RyF3gOXKYqvJiTcQ==}
     peerDependencies:
       react: '>=16.9.0'
@@ -19258,6 +19305,8 @@ packages:
       '@babel/runtime': 7.23.5
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     dev: false
 
   /rc-tree-select@5.15.0(react-dom@18.2.0)(react@18.2.0):
@@ -19415,13 +19464,14 @@ packages:
       reactcss: 1.2.3(react@18.2.0)
       tinycolor2: 1.6.0
 
-  /react-copy-to-clipboard@5.1.0:
+  /react-copy-to-clipboard@5.1.0(react@18.2.0):
     resolution: {integrity: sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==}
     peerDependencies:
       react: ^15.3.0 || 16 || 17 || 18
     dependencies:
       copy-to-clipboard: 3.3.3
       prop-types: 15.8.1
+      react: 18.2.0
     dev: false
 
   /react-dom@18.1.0(react@18.1.0):
@@ -19452,12 +19502,13 @@ packages:
       '@babel/runtime': 7.23.2
       react: 18.2.0
 
-  /react-error-boundary@4.0.11:
+  /react-error-boundary@4.0.11(react@18.2.0):
     resolution: {integrity: sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==}
     peerDependencies:
       react: '>=16.13.1'
     dependencies:
       '@babel/runtime': 7.23.5
+      react: 18.2.0
     dev: false
 
   /react-error-overlay@6.0.9:
@@ -19489,6 +19540,21 @@ packages:
       shallowequal: 1.1.0
     dev: false
 
+  /react-helmet-async@1.3.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==}
+    peerDependencies:
+      react: ^16.6.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.23.5
+      invariant: 2.2.4
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-fast-compare: 3.2.0
+      shallowequal: 1.1.0
+    dev: false
+
   /react-helmet@6.1.0(react@18.2.0):
     resolution: {integrity: sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==}
     peerDependencies:
@@ -19501,7 +19567,7 @@ packages:
       react-side-effect: 2.1.2(react@18.2.0)
     dev: false
 
-  /react-intl@6.5.5(typescript@5.2.2):
+  /react-intl@6.5.5(react@18.2.0)(typescript@5.2.2):
     resolution: {integrity: sha512-cI5UKvBh4tc1zxLIziHBYGMX3dhYWDEFlvUDVN6NfT2i96zTXz/zH2AmM8+2waqgOhwkFUzd+7kK1G9q7fiC2g==}
     peerDependencies:
       react: ^16.6.0 || 17 || 18
@@ -19519,6 +19585,7 @@ packages:
       '@types/react': 18.2.43
       hoist-non-react-statics: 3.3.2
       intl-messageformat: 10.5.8
+      react: 18.2.0
       tslib: 2.6.2
       typescript: 5.2.2
     dev: false
@@ -19578,6 +19645,18 @@ packages:
       react-router: 6.3.0(react@18.1.0)
     dev: false
 
+  /react-router-dom@6.3.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      history: 5.3.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-router: 6.3.0(react@18.2.0)
+    dev: false
+
   /react-router-dom@6.6.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==}
     engines: {node: '>=14'}
@@ -19600,6 +19679,15 @@ packages:
       react: 18.1.0
     dev: false
 
+  /react-router@6.3.0(react@18.2.0):
+    resolution: {integrity: sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      history: 5.3.0
+      react: 18.2.0
+    dev: false
+
   /react-router@6.6.1(react@18.2.0):
     resolution: {integrity: sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==}
     engines: {node: '>=14'}
@@ -22478,7 +22566,7 @@ packages:
     requiresBuild: true
     optional: true
 
-  /umi@4.0.88(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(rollup@4.1.5)(sass@1.69.5)(stylelint@15.11.0)(typescript@5.2.2):
+  /umi@4.0.88(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(sass@1.69.5)(stylelint@15.11.0)(typescript@5.2.2):
     resolution: {integrity: sha512-gNgBMbLuZwj5c2uroFmtgT4tJO2JFKfIxJaad3oFa0cOzJMSx6CnaG3Z2/+pU2eAy9EMBvbtY/iAmkr3ZNEAWg==}
     engines: {node: '>=14'}
     hasBin: true
@@ -22489,7 +22577,7 @@ packages:
       '@umijs/core': 4.0.88
       '@umijs/lint': 4.0.88(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(stylelint@15.11.0)(typescript@5.2.2)
       '@umijs/preset-umi': 4.0.88(@types/node@20.8.9)(rollup@4.1.5)(sass@1.69.5)(typescript@5.2.2)
-      '@umijs/renderer-react': 4.0.88(react-dom@18.1.0)(react@18.1.0)
+      '@umijs/renderer-react': 4.0.88(react-dom@18.2.0)(react@18.2.0)
       '@umijs/server': 4.0.88
       '@umijs/test': 4.0.88(@babel/core@7.23.2)
       '@umijs/utils': 4.0.88
diff --git a/s2-site/.dumi/global.less b/s2-site/.dumi/global.less
new file mode 100644
index 0000000000..4309701f4d
--- /dev/null
+++ b/s2-site/.dumi/global.less
@@ -0,0 +1,19 @@
+.dumi-default-table {
+  margin: 0 !important;
+}
+
+// h3 {
+//   border-bottom: none !important;
+// }
+
+ul {
+  margin-bottom: 16px !important;
+}
+
+.dumi-default-source-code {
+  margin: 24px 0;
+
+  .prism-code {
+    background-color: #f6f8fa !important;
+  }
+}
diff --git a/s2-site/.dumi/global.ts b/s2-site/.dumi/global.ts
new file mode 100644
index 0000000000..a29df8c3d0
--- /dev/null
+++ b/s2-site/.dumi/global.ts
@@ -0,0 +1,60 @@
+if (window) {
+  (window as any).react = require('react');
+  (window as any).reactDOM = require('react-dom');
+  // (window as any).reactDOMClient = require('react-dom/client');
+  (window as any).lodash = require('lodash');
+  (window as any).reactColor = require('react-color');
+  (window as any).copyToClipboard = require('copy-to-clipboard');
+
+  (window as any).antd = require('antd');
+  (window as any).antdIcons = require('@ant-design/icons');
+
+  (window as any).gCanvas = require('@antv/g-canvas');
+  (window as any).gPluginA11y = require('@antv/g-plugin-a11y');
+  (
+    window as any
+  ).gPluginRoughCanvasRenderer = require('@antv/g-plugin-rough-canvas-renderer');
+  (window as any).g2 = require('@antv/g2');
+  (window as any).s2 = require('@antv/s2');
+  (window as any).s2React = require('@antv/s2-react');
+
+  // (window as any).s2Css = require('@antv/s2/dist/style.min.css');
+  // (window as any).s2ReactCss = require('@antv/s2-react/dist/style.min.css');
+
+  // 码云和老网站统一跳转 antgroup 新域名
+  const hosts = ['s2.antv.vision', 'antv-s2.gitee.io'];
+  if (hosts.includes(location.host)) {
+    (window as any).location.href = location.href.replace(
+      location.origin,
+      'https://s2.antv.antgroup.com',
+    );
+  }
+
+  // 能获取到 version 说明没有走 dumi 的代理, 运行的 node_modules 的包
+  console.table([
+    {
+      package: '@antv/s2',
+      version: (window as any).s2?.version || 'development',
+    },
+    {
+      package: '@antv/s2-react',
+      version: (window as any).s2React?.version || 'development',
+    },
+    {
+      package: '@antv/s2-vue',
+      version: (window as any).s2Vue?.version || 'development',
+    },
+    {
+      package: 'react',
+      version: (window as any).react?.version || 'development',
+    },
+    {
+      package: 'react-dom',
+      version: (window as any).reactDOM?.version || 'development',
+    },
+    {
+      package: 'antd',
+      version: (window as any).antd?.version || 'development',
+    },
+  ]);
+}
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 3bd1dc5b1d..3912622984 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -36,7 +36,7 @@ export default defineConfig({
       // 历史版本以及切换下拉菜单
       // [version || '2.x']: 'https://s2.antv.antgroup.com',
       '2.x': 'https://s2.antv.antgroup.com',
-      '1.x': 'https://s2-v1.antv.vision',
+      '1.x': 'https://s2-v1.antv.antgroup.com',
     },
     docsearchOptions: {
       // 头部搜索框配置
@@ -433,10 +433,16 @@ export default defineConfig({
       },
     ],
   },
+  mfsu: false,
   alias: {
     '@': __dirname,
   },
   styles: ['/site.css'],
   links: [],
   scripts: [],
+  // TODO: S2用的 antd@5.x @antv/dumi-theme-antv 是 4.x, 导致本地跑不起来
+  // monorepoRedirect: {
+  //   peerDeps: true,
+  //   srcDir: ['src', 'esm', 'lib'],
+  // },
 });
diff --git a/s2-site/README.md b/s2-site/README.md
index 3f41a26489..ae5e793f33 100644
--- a/s2-site/README.md
+++ b/s2-site/README.md
@@ -1,24 +1,27 @@
 # S2 官网
 
-- 老官网：<https://s2.antv.vision>
-- 新官网 （推荐）：<https://s2.antv.antgroup.com>
+- 老官网 （已废弃）：
+  - <https://s2.antv.vision>
+- 新官网 （推荐）:
+  - `2.x`: <https://s2.antv.antgroup.com>
+  - `1.x`: <https://s2-v1.antv.antgroup.com>
 
 ## 开发
 
 ```bash
-# 安装依赖
-yarn
+# 切到根目录安装
+pnpm install
 
 # 调试
-yarn start
+pnpm start
 ```
 
 ## 发布
 
-记得将 `package.json` 对应的 `@antv/s2` 和 `@antv/s2-react` **更新到最新版本**, 并将更新后的 `yarn.lock` 提交上来。
+非特殊情况，无需手动操作，通过 GitHub Action 自动发布
 
 ```bash
-yarn deploy
+pnpm deploy
 ```
 
 ## 内容建设
@@ -55,4 +58,4 @@ yarn deploy
 
   ```
 
-- 热更新没有特别灵敏，如果没有时时更新请手动重刷或重启服务
+- 热更新没有特别灵敏，如果没有试试更新请手动重刷或重启服务
diff --git a/s2-site/docs/api/basic-class/base-cell.zh.md b/s2-site/docs/api/basic-class/base-cell.zh.md
index 7352caa88e..40519cc036 100644
--- a/s2-site/docs/api/basic-class/base-cell.zh.md
+++ b/s2-site/docs/api/basic-class/base-cell.zh.md
@@ -16,8 +16,6 @@ cell.getActualText()
 | getIconStyle | 获取单元格图标样式 | () => [IconTheme](/docs/api/general/S2Theme#icontheme) |
 | getStyle | 获取单元格样式 | () => [DefaultCellTheme](/docs/api/general/S2Theme#defaultcelltheme) |
 | getTextAndIconPosition | 获取单元格文本和图标的位置 | (iconCount: `number`) => [TextAndIconPosition](#textandiconposition) |
-| getActualText | 获取绘制的文本 | `() => string` |
-| getActualTextWidth | 获取绘制的文本宽度 | `() => number` |
 | cellType | 单元格类型 | [CellType](#celltypes) |
 | initCell | 初始化单元格 | `() => void` |
 | update | 更新单元格 | `() => void` |
@@ -35,6 +33,19 @@ cell.getActualText()
 | getConditionIconShape | 获取 icon 图层 | `() => GuiIcon` |
 | getConditionIconShapes | 获取所有 icon 图层 | `() => GuiIcon[]` |
 | addConditionIconShape | 添加 icon 图层 | `(shape: GuiIcon) => void` |
+| isShallowRender | 是否是浅渲染 | `( ) => boolean` |
+| getActualText | 获取实际渲染的文本 （含省略号） | `() => string` |
+| getOriginalText | 获取原始的文本 （不含省略号） | `() => string` |
+| getActualTextWidth | 实际渲染的文本宽度，如果是多行文本，取最大的一行宽度 | `() => number` |
+| getActualTextHeight | 实际渲染的文本宽度，如果是多行文本，取每一行文本高度的总和 | `() => number` |
+| getMultiLineActualTexts | 获取实际渲染的多行文本 （含省略号） | `() => string[]` |
+| getMultiLineActualTextWidth | 实际渲染的多行文本宽度 （每一行文本宽度的总和） | `() => number` |
+| getMultiLineActualTextHeight | 实际渲染的多行文本高度 （每一行文本高度的总和） | `() => number` |
+| isTextOverflowing | 文本是否溢出 （有省略号） | `() => boolean` |
+| isMultiLineText | 是否是多行文本 | `() => boolean` |
+| getEmptyPlaceholder | 获取单元格空值占位符 | `() => string` |
+| getTextLineBoundingRects | 获取文本包围盒 | `() => string` |
+| getFieldValue | 获取单元格展示的数值 | `() => string` |
 
 <embed src="@/docs/common/view-meta.zh.md"></embed>
 
diff --git a/s2-site/docs/common/custom/customTreeNode.zh.md b/s2-site/docs/common/custom/customTreeNode.zh.md
index ad3f699af4..a26516d414 100644
--- a/s2-site/docs/common/custom/customTreeNode.zh.md
+++ b/s2-site/docs/common/custom/customTreeNode.zh.md
@@ -3,13 +3,13 @@ title: 自定义树状结构
 order: 8
 ---
 
-### CustomTreeNode
+#### CustomTreeNode
 
 功能描述：自定义树状结构的配置。查看 [详细说明](/zh/docs/manual/advanced/custom/custom-tree) 或 [例子](/zh/examples/custom/custom-tree#custom-tree)
 
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --- | --- | --- | --- | :-:  |
-| key | 当前节点唯一标识 | `string` |    | ✓ |
+| field | 当前节点唯一标识 | `string` |    | ✓ |
 | title | 当前节点展示名 | `string` |    | ✓ |
 | collapsed | 节点是否收起（树状模式下，行头非叶子节点有效） | `boolean` |  `false`  |  |
 | description | 节点的额外描述信息，在对应行头的 tooltip 中展示 | `string` |    |  |
diff --git a/s2-site/docs/manual/advanced/custom/custom-header.zh.md b/s2-site/docs/manual/advanced/custom/custom-header.zh.md
index 52cdfef07b..eca931fe61 100644
--- a/s2-site/docs/manual/advanced/custom/custom-header.zh.md
+++ b/s2-site/docs/manual/advanced/custom/custom-header.zh.md
@@ -3,34 +3,34 @@ title: 自定义行列头
 order: 2
 ---
 
-`S2` 默认提供 [平铺模式 (grid)](https://s2.antv.vision/zh/examples/basic/pivot#grid) 和 [树状模式 (tree)](https://s2.antv.vision/zh/examples/basic/pivot#tree) 两种**行头**单元格布局方式
+`S2` 默认提供 [平铺模式 (grid)](https://s2.antv.vision/zh/examples/basic/pivot#grid) 和 [树状模式 (tree)](https://s2.antv.vision/zh/examples/basic/pivot#tree) 两种**行头**单元格布局方式。
 
-默认通过**分组之后得到的数据生成层级结构**, 如果都不满足的话，可以通过自定义行列头，来定制你的目录结构，同样兼容平铺和树状这两种布局方式
+默认通过**分组之后得到的数据生成层级结构**, 如果都不满足的话，可以通过自定义行列头，来定制你的目录结构，同样兼容平铺和树状这两种布局方式。
 
 ## 数据结构
 
 <embed src="@/docs/common/custom/customTreeNode.zh.md"></embed>
 
 ```ts
-const customTree: CustomTreeNode[] = [
+const customTree = [
   {
-    key: 'a-1',
+    field: 'a-1',
     title: '自定义节点 a-1',
     description: 'a-1 描述',
     children: [
       {
-        key: 'a-1-1',
+        field: 'a-1-1',
         title: '自定义节点 a-1-1',
         description: 'a-1-1 描述',
         children: [
           {
-            key: 'measure-1',
+            field: 'measure-1',
             title: '指标 1',
             description: '指标 1 描述',
             children: [],
           },
           {
-            key: 'measure-2',
+            field: 'measure-2',
             title: '指标 2',
             description: '指标 2 描述',
             children: [],
@@ -38,7 +38,7 @@ const customTree: CustomTreeNode[] = [
         ],
       },
       {
-        key: 'a-1-2',
+        field: 'a-1-2',
         title: '自定义节点 a-1-2',
         description: 'a-1-2 描述',
         children: [],
@@ -46,7 +46,7 @@ const customTree: CustomTreeNode[] = [
     ],
   },
   {
-    key: 'a-2',
+    field: 'a-2',
     title: '自定义节点 a-2',
     description: 'a-2 描述',
     children: [],
@@ -69,109 +69,97 @@ const data = [
 ]
 ```
 
-## 透视表
+## 1. 透视表
 
-### 自定义行头
+### 1.1 自定义行头
 
-<Playground path='custom/custom-tree/demo/custom-pivot-row-header.ts' rid='container' height='400'></playground>
+:::info{title="提示"}
 
 1. `rows` 配置为自定义 `tree` 结构
 2. 数值需要置于行头，即 `valueInCols: false` （无论配置与否都会强制置于行头，修改无效）
 
+:::
+
+<Playground path='custom/custom-tree/demo/custom-pivot-row-header.ts' rid='container' height='400'></playground>
+
 ```ts
 const s2DataConfig = {
   fields: {
     rows: customTree,
     columns: ['type', 'sub_type'],
-    values: ['measure-1', 'measure-2']
+    values: ['measure-1', 'measure-2'],
     valueInCols: false,
   },
   data,
 };
 ```
 
-<br/>
-
 #### 平铺模式
 
 ```ts
 const s2Options = {
-  hierarchyType: 'grid',
+  hierarchyType: 'grid'
 };
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/78uZ2l%24JQ/01a484d7-0edd-4ba0-882f-eed59fc209f1.png" width="1000" alt="preview"/>
 
-<br/>
-
 #### 树状模式
 
 ```ts
 const s2Options = {
-  hierarchyType: 'tree',
+  hierarchyType: 'tree'
 };
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/iJft9ExZs/da1f768c-7689-44df-be54-708442a74d76.png" width="1000" alt="preview"/>
 
-<br/>
-
-### 自定义列头
+### 1.2 自定义列头
 
-<Playground path='custom/custom-tree/demo/custom-pivot-col-header.ts' rid='container-2' height='400'></playground>
+:::info{title="提示"}
 
 1. `columns` 配置为自定义 `tree` 结构
 2. 数值需要置于列头，即 `valueInCols: true` （无论配置与否都会强制置于列头，修改无效）
 
+:::
+
+<Playground path='custom/custom-tree/demo/custom-pivot-col-header.ts' rid='container-2' height='400'></playground>
+
 ```ts
 const s2DataConfig = {
   fields: {
     columns: customTree,
     rows: ['type', 'sub_type'],
-    values: ['measure-1', 'measure-2']
+    values: ['measure-1', 'measure-2'],
     valueInCols: true,
   },
   data,
 };
 ```
 
-<br/>
-
 #### 平铺模式
 
 ```ts
 const s2Options = {
-  hierarchyType: 'grid',
+  hierarchyType: 'grid'
 };
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/sn6R4Kmvh/ce49ecf2-e672-47d5-885b-135c39620e18.png" width="1000" alt="preview"/>
 
-<br/>
-
 #### 树状模式
 
 ```ts
 const s2Options = {
-  hierarchyType: 'tree',
+  hierarchyType: 'tree'
 };
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/ORZGnHNfz/5f876c02-e647-4598-a4bf-68d4b803a18a.png" width="1000" alt="preview"/>
 
-<br/>
+### 1.3 自定义角头文本
 
-### 自定义角头文本
-
-#### 平铺模式
+#### 1.3.1 平铺模式
 
 对于平铺模式，角头显示的文本默认对应**行头每一列的第一个单元格**，可以和普通字段一样，配置 [meta](/zh/docs/api/general/S2DataConfig#meta) 来对单元格文本进行格式化，此时 `field` 对应 [CustomTreeNode](#customtreenode) 的 `field` 值
 
@@ -192,13 +180,9 @@ const meta = [
 ]
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/6U%26nLnY3r/e65b9e7c-d9a3-4841-839f-2405d0c45ea2.png" width="600" alt="preview"/>
 
-<br/>
-
-#### 树状模式
+#### 1.3.2 树状模式
 
 对于树状模式，角头默认显示的文本对应**所有的一级节点和数值**，可以和普通字段一样，配置 [meta](/zh/docs/api/general/S2DataConfig#meta) 来对单元格文本进行格式化，也可以配置 [s2Options.cornerText](/zh/docs/api/general/S2Options) 来自定义角头文本
 
@@ -215,52 +199,43 @@ const meta = [
 ]
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/TmAPj7Ky2/a2c78816-45c5-450b-ab0c-0e2d7d98d209.png" width="200" alt="preview"/>
 
-<br/>
-
 ```ts
 const s2Options = {
   cornerText: '自定义角头标题'
 }
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/BF7WZ0w2h/e5fc914e-b69e-47e4-9da5-ebee4b070207.png" width="200" alt="preview"/>
 
-<br/>
-
-## 明细表
-
-### 自定义列头
+## 2. 明细表
 
-<Playground path='custom/custom-tree/demo/custom-table-col-header.ts' rid='container-3' height='400'></playground>
+### 2.1 自定义列头
 
-<br/>
+:::info{title="提示"}
 
 `columns` 配置为自定义 `tree` 结构
 
 ```ts
 const s2DataConfig = {
   fields: {
-    columns: customTree,
+    columns: customTree
   },
   data,
 };
 ```
 
-<br/>
+:::
+
+<Playground path='custom/custom-tree/demo/custom-table-col-header.ts' rid='container-3' height='400'></playground>
 
-## 行列头文本格式化
+## 3. 行列头文本格式化
 
 自定义节点默认使用 `当前节点展示名`, 即 `CustomTreeNode.title`, 也可以使用通用的 [Meta](/api/general/s-2-data-config#meta) 来进行格式化
 
 ```ts
 const s2DataConfig: S2DataConfig = {
-  ...
   meta: [
     {
       field: 'a-1',
@@ -274,6 +249,6 @@ const s2DataConfig: S2DataConfig = {
 };
 ```
 
-## 更多应用
+## 4. 更多应用
 
 基于自定义行列头，我们可以衍生出更多的使用场景，比如基于 `自定义行头` + `树状模式`, 我们可以自定义出一个 [趋势分析表分析组件](zh/docs/manual/basic/analysis/strategy/).
diff --git a/s2-site/docs/manual/basic/multi-line-text.en.md b/s2-site/docs/manual/basic/multi-line-text.en.md
new file mode 100644
index 0000000000..b61a74f04b
--- /dev/null
+++ b/s2-site/docs/manual/basic/multi-line-text.en.md
@@ -0,0 +1,4 @@
+---
+title: Multi Line
+order: 10
+---
diff --git a/s2-site/docs/manual/basic/multi-line-text.zh.md b/s2-site/docs/manual/basic/multi-line-text.zh.md
new file mode 100644
index 0000000000..e4e509be83
--- /dev/null
+++ b/s2-site/docs/manual/basic/multi-line-text.zh.md
@@ -0,0 +1,60 @@
+---
+title: 多行文本
+order: 10
+---
+
+:::warning{title="注意"}
+请确保已经阅读了 [基础教程](/manual/basic/base-concept) 和 [主题配置](/manual/basic/theme) 等章节。
+:::
+
+基于 `DOM` 的 表格中，我们可以写一些简单的 [CSS 属性](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow), 就可以实现文本的自动换行，溢出隐藏，因为浏览器已经帮我们计算好了，而在 `Canvas` 中，`文本是否溢出`, `文字换行坐标计算`, `多行文本高度自适应` 等特性都需要自行实现。
+
+得益于 `AntV/G` 5.0 渲染引擎的升级，`S2 2.0` 现在只需要简单的配置即可支持多行文本的渲染，支持自动换行。
+
+TODO: DEMO
+
+<Playground path="basic/pivot/demo/grid.ts" rid='multi-line-text' height="200"></playground>
+
+## 使用
+
+S2 内部适配了 `AntV/G 5.0` 的 [多行布局能力](https://g.antv.antgroup.com/api/basic/text#%E5%A4%9A%E8%A1%8C%E5%B8%83%E5%B1%80), 支持如下配置：
+
+:::info{title="提示"}
+
+具体参数请跳转 `G` [官网查看](https://g.antv.antgroup.com/api/basic/text#%E5%A4%9A%E8%A1%8C%E5%B8%83%E5%B1%80).
+
+- `maxLines`: 最大行数，文本超出后将被截断。
+- `wordWrap`: 是否开启自动折行，默认值为 false,
+- `wordWrapWidth`: 开启自动折行后，超出该宽度则换行。
+- `textOverflow`:
+  - 'clip' 直接截断文本
+  - 'ellipsis' 使用 ... 表示被截断的文本
+  - 自定义字符串，使用它表示被截断的文本
+:::
+
+在 S2 中，通过 [配置主题](/manual/basic/theme) 即可实现多行文本，当文本自动换行后，如小于单元格高度，则会自动调整。
+
+```ts
+const cellTheme = {
+  text: {
+    maxLines: 2,
+    wordWrap: true,
+    textOverflow: 'ellipsis',
+  },
+  bolderText: {
+    maxLines: 2,
+  },
+  measureText: {
+    maxLines: 2,
+  },
+};
+
+s2.setTheme({
+  seriesNumberCell: cellTheme,
+  colCell: cellTheme,
+  cornerCell: cellTheme,
+  rowCell: cellTheme,
+  dataCell: cellTheme,
+});
+
+```
diff --git a/s2-site/docs/manual/getting-started.zh.md b/s2-site/docs/manual/getting-started.zh.md
index b08db8f0f4..649ea1ff04 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -14,17 +14,17 @@ $ npm install @antv/s2 --save
 $ yarn add @antv/s2 --save
 
 # pnpm
-$ pnpm install @antv/s2 --save
+$ pnpm add @antv/s2 --save
 ```
 
 ### 使用 React 或 Vue3 版本
 
 ```bash
 # React
-$ pnpm install @antv/s2 @antv/s2-react --save
+$ pnpm add @antv/s2 @antv/s2-react --save
 
 # Vue3
-$ pnpm install @antv/s2 @antv/s2-vue --save
+$ pnpm add @antv/s2 @antv/s2-vue --save
 
 ```
 
diff --git a/s2-site/docs/manual/introduction.zh.md b/s2-site/docs/manual/introduction.zh.md
index e6d1978152..5a2a286e46 100644
--- a/s2-site/docs/manual/introduction.zh.md
+++ b/s2-site/docs/manual/introduction.zh.md
@@ -71,7 +71,7 @@ redirect_from:
 ## 📦 安装
 
 ```bash
-pnpm install @antv/s2 --save
+pnpm add @antv/s2 --save
 # npm install @antv/s2 --save
 # yarn add @antv/s2 --save
 ```
diff --git a/s2-site/package.json b/s2-site/package.json
index 4eba2685b1..b67722d45b 100644
--- a/s2-site/package.json
+++ b/s2-site/package.json
@@ -40,7 +40,9 @@
     "dumi": "^2.2.16",
     "gh-pages": "^6.1.1",
     "lodash": "^4.17.21",
-    "react-color": "^2.19.3"
+    "react-color": "^2.19.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@google-cloud/translate": "^7.0.3",

From be79f562c44cc92d20439a97b0412fc90136ca47 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Tue, 26 Dec 2023 19:35:50 +0800
Subject: [PATCH 04/64] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E5=A4=9A?=
 =?UTF-8?q?=E8=A1=8C=E6=96=87=E6=9C=AC=20demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manual/advanced/custom/cell-size.zh.md    |  18 ++-
 .../custom/custom-collapse-nodes.zh.md        |  16 ++-
 .../docs/manual/basic/multi-line-text.zh.md   |  19 ++-
 s2-site/examples/layout/custom/demo/meta.json |   8 ++
 .../layout/custom/demo/multi-line-text.ts     | 122 ++++++++++++++++++
 5 files changed, 166 insertions(+), 17 deletions(-)
 create mode 100644 s2-site/examples/layout/custom/demo/multi-line-text.ts

diff --git a/s2-site/docs/manual/advanced/custom/cell-size.zh.md b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
index 3ac215edad..4e9fd6dbe1 100644
--- a/s2-site/docs/manual/advanced/custom/cell-size.zh.md
+++ b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
@@ -30,7 +30,11 @@ const s2Options = {
 
 ## 调整数值单元格宽高
 
-> 优先级小于 `rowCell.height` 和 `colCell.width`
+:::warning{title="注意"}
+
+优先级小于 `rowCell.height` 和 `colCell.width`
+
+:::
 
 ```ts
 const s2Options = {
@@ -39,7 +43,7 @@ const s2Options = {
       width: 100,
       height: 90
     },
-  },
+  }
 }
 ```
 
@@ -89,7 +93,7 @@ const s2Options = {
 
 如果想给特定某一行/列设置不同的宽高，可以通过 `rowCell` 的 `widthByField` 和 `heightByField` 预设高度来实现，支持两种类型的配置：
 
-- **fieldId** （例：`root[&] 浙江省 [&] 杭州市`):  行列交叉后每一个行头节点对应的唯一 ID, 适用于宽高精确到具体的单元格 [（如何获取 ID）](/docs/manual/advanced/get-cell-data#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%8C%BA%E5%9F%9F%E5%8D%95%E5%85%83%E6%A0%BC)
+- **fieldId** （例：`root[&]浙江省[&]杭州市`):  行列交叉后每一个行头节点对应的唯一 ID, 适用于宽高精确到具体的单元格 [（如何获取 ID）](/docs/manual/advanced/get-cell-data#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%8C%BA%E5%9F%9F%E5%8D%95%E5%85%83%E6%A0%BC)
 - **field** （例：`city`): 对应 `s2DataConfig.fields.rows` 中配置的 `field`, 适用于精确到某一类维值的单元格
 
 <br/>
@@ -102,8 +106,8 @@ const s2Options = {
         city: 100
       },
       heightByField: {
-        'root[&] 浙江省 [&] 杭州市': 60,
-        'root[&] 浙江省 [&] 宁波市': 100,
+        'root[&]浙江省[&]杭州市': 60,
+        'root[&]浙江省[&]宁波市': 100,
       },
     },
   },
@@ -193,7 +197,7 @@ const s2Options = {
 
 如果想给特定某一列设置不同的宽高，可以通过 `colCell` 的 `widthByField` 和 `heightByField` 预设宽高来实现，支持两种类型的配置：
 
-- **fieldId** （例：`root[&] 家具 [&] 沙发 [&]number`):  行列交叉后每一个列头节点对应的唯一 ID, 适用于宽高精确到具体的单元格 [（如何获取 ID）](/docs/manual/advanced/get-cell-data#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%8C%BA%E5%9F%9F%E5%8D%95%E5%85%83%E6%A0%BC)
+- **fieldId** （例：`root[&]家具[&]沙发[&]number`):  行列交叉后每一个列头节点对应的唯一 ID, 适用于宽高精确到具体的单元格 [（如何获取 ID）](/docs/manual/advanced/get-cell-data#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%8C%BA%E5%9F%9F%E5%8D%95%E5%85%83%E6%A0%BC)
 - **field** （例：`city`): 对应 `s2DataConfig.fields.columns` 中配置的 `field`, 适用于精确到某一类维值的单元格
 
 ```ts
@@ -205,7 +209,7 @@ const s2Options = {
        widthByField: {
         // 默认 [数值挂列头], EXTRA_FIELD 为内部虚拟数值列
         [EXTRA_FIELD]: 60,
-        'root[&] 家具 [&] 沙发 [&]number': 120,
+        'root[&]家具[&]沙发[&]number': 120,
       },
       heightByField: {
         [EXTRA_FIELD]: 80,
diff --git a/s2-site/docs/manual/advanced/custom/custom-collapse-nodes.zh.md b/s2-site/docs/manual/advanced/custom/custom-collapse-nodes.zh.md
index e663b3e7da..c620a61d76 100644
--- a/s2-site/docs/manual/advanced/custom/custom-collapse-nodes.zh.md
+++ b/s2-site/docs/manual/advanced/custom/custom-collapse-nodes.zh.md
@@ -22,7 +22,7 @@ const s2Options = {
       expandDepth: 0,
       // 折叠所有
       collapseAll: true
-    },
+    }
   },
 }
 ```
@@ -31,7 +31,7 @@ const s2Options = {
 
 ## 折叠指定节点
 
-配置 `collapseFields`, 支持 `维值 id` 和 `维度 field` 两种方式，即可以是 `root[&] 浙江省` 和 `city`
+配置 `collapseFields`, 支持 `维值 id` 和 `维度 field` 两种方式，即可以是 `root[&]浙江省` 和 `city`
 
 ```ts
 const s2Options = {
@@ -45,13 +45,15 @@ const s2Options = {
 
 ### 根据节点对应维值 id
 
-指定 `id` 可以折叠指定节点，如配置为 `root[&] 浙江省`, 那么 `浙江省` 下所有节点都会被折叠
+指定 `id` 可以折叠指定节点，如配置为 `root[&]浙江省`, 那么 `浙江省` 下所有节点都会被折叠
 
 ```ts
 const s2Options = {
   style: {
     rowCell: {
-      collapseFields: { 'root[&] 浙江省': true },
+      collapseFields: { 
+        'root[& 浙江省': true
+      },
     },
   },
 }
@@ -73,10 +75,14 @@ const s2DataConfig = {
     rows: ['province', 'city']
   }
 }
+
 const s2Options = {
   style: {
     rowCell: {
-      collapseFields: { province: false, city: true }
+      collapseFields: { 
+        province: false,
+        city: true
+      }
     },
   },
 }
diff --git a/s2-site/docs/manual/basic/multi-line-text.zh.md b/s2-site/docs/manual/basic/multi-line-text.zh.md
index e4e509be83..3c15ec4720 100644
--- a/s2-site/docs/manual/basic/multi-line-text.zh.md
+++ b/s2-site/docs/manual/basic/multi-line-text.zh.md
@@ -11,9 +11,7 @@ order: 10
 
 得益于 `AntV/G` 5.0 渲染引擎的升级，`S2 2.0` 现在只需要简单的配置即可支持多行文本的渲染，支持自动换行。
 
-TODO: DEMO
-
-<Playground path="basic/pivot/demo/grid.ts" rid='multi-line-text' height="200"></playground>
+<Playground path="layout/custom/demo/multi-line-text.ts" rid='multi-line-text' height="200"></playground>
 
 ## 使用
 
@@ -21,7 +19,7 @@ S2 内部适配了 `AntV/G 5.0` 的 [多行布局能力](https://g.antv.antgroup
 
 :::info{title="提示"}
 
-具体参数请跳转 `G` [官网查看](https://g.antv.antgroup.com/api/basic/text#%E5%A4%9A%E8%A1%8C%E5%B8%83%E5%B1%80).
+具体参数请跳转 `AntV/G` [官网查看](https://g.antv.antgroup.com/api/basic/text#%E5%A4%9A%E8%A1%8C%E5%B8%83%E5%B1%80).
 
 - `maxLines`: 最大行数，文本超出后将被截断。
 - `wordWrap`: 是否开启自动折行，默认值为 false,
@@ -34,11 +32,18 @@ S2 内部适配了 `AntV/G 5.0` 的 [多行布局能力](https://g.antv.antgroup
 
 在 S2 中，通过 [配置主题](/manual/basic/theme) 即可实现多行文本，当文本自动换行后，如小于单元格高度，则会自动调整。
 
+:::warning{title="注意"}
+数值单元格 (dataCell) 不建议换行，容易产生歧义。
+:::
+
 ```ts
 const cellTheme = {
   text: {
+    // 最大行数，文本超出后将被截断
     maxLines: 2,
+    // 文本是否换行
     wordWrap: true,
+    // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
     textOverflow: 'ellipsis',
   },
   bolderText: {
@@ -54,7 +59,11 @@ s2.setTheme({
   colCell: cellTheme,
   cornerCell: cellTheme,
   rowCell: cellTheme,
-  dataCell: cellTheme,
+  // dataCell: cellTheme,
 });
 
 ```
+
+## 效果
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uMV6QYL-TcwAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="预览"/>
diff --git a/s2-site/examples/layout/custom/demo/meta.json b/s2-site/examples/layout/custom/demo/meta.json
index 6859d445e3..999fbc3edf 100644
--- a/s2-site/examples/layout/custom/demo/meta.json
+++ b/s2-site/examples/layout/custom/demo/meta.json
@@ -67,6 +67,14 @@
         "en": "Only Show Row Header"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*pezZTI9lp50AAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "multi-line-text.ts",
+      "title": {
+        "zh": "多行文本 / 文本自动换行",
+        "en": "Multi Line Text"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uMV6QYL-TcwAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
diff --git a/s2-site/examples/layout/custom/demo/multi-line-text.ts b/s2-site/examples/layout/custom/demo/multi-line-text.ts
new file mode 100644
index 0000000000..537d3dbb2a
--- /dev/null
+++ b/s2-site/examples/layout/custom/demo/multi-line-text.ts
@@ -0,0 +1,122 @@
+import {
+  DefaultCellTheme,
+  PivotSheet,
+  S2DataConfig,
+  S2Options,
+} from '@antv/s2';
+import '@antv/s2/dist/style.min.css';
+
+fetch('https://assets.antv.antgroup.com/s2/basic.json')
+  .then((res) => res.json())
+  .then(async (data) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
+      fields: {
+        rows: ['province', 'city'],
+        columns: ['type'],
+        values: ['price', 'cost'],
+      },
+      meta: [
+        {
+          field: 'province',
+          name: '省份省份省份省份省份省份省份省份省份',
+        },
+        {
+          field: 'city',
+          name: '城市城市城市城市城市城市城市',
+        },
+        {
+          field: 'type',
+          name: '商品类别商品类别商品类别商品类别商品类别商品类别',
+        },
+        {
+          field: 'price',
+          name: '价格价格价格价格价格价格',
+        },
+        {
+          field: 'cost',
+          name: '成本成本成本成本成本成本成本',
+        },
+      ],
+      data: [
+        {
+          province: '浙江浙江浙江浙江浙江浙江',
+          city: '杭州杭州杭州杭州杭州杭州',
+          type: '纸张纸张纸张纸张纸张',
+          price: '2',
+          cost: '20',
+        },
+        ...data,
+      ],
+    };
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      showSeriesNumber: true,
+      seriesNumberText: '序号序号序号序号序号序号',
+      tooltip: {
+        enable: true,
+        content: (cell) => {
+          const text = cell.getOriginalText();
+          const span = document.createElement('span');
+
+          span.innerHTML = text;
+
+          return span;
+        },
+      },
+      // 如果有省略号, 复制到的是完整文本
+      interaction: {
+        enableCopy: true,
+        copyWithFormat: true,
+        copyWithHeader: true,
+        brushSelection: {
+          dataCell: true,
+          rowCell: true,
+          colCell: true,
+        },
+      },
+      style: {
+        rowCell: {
+          height: 50,
+        },
+        colCell: {},
+        dataCell: {},
+      },
+    };
+
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    const cellTheme: DefaultCellTheme = {
+      text: {
+        // 最大行数，文本超出后将被截断
+        maxLines: 2,
+        // 文本是否换行
+        wordWrap: true,
+        // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
+        textOverflow: 'ellipsis',
+      },
+      bolderText: {
+        maxLines: 2,
+        wordWrap: true,
+        textOverflow: 'ellipsis',
+      },
+      measureText: {
+        maxLines: 2,
+        wordWrap: true,
+        textOverflow: 'ellipsis',
+      },
+    };
+
+    s2.setTheme({
+      seriesNumberCell: cellTheme,
+      colCell: cellTheme,
+      cornerCell: cellTheme,
+      rowCell: cellTheme,
+      // 数值不建议换行, 容易产生歧义
+      // dataCell: cellTheme,
+    });
+
+    await s2.render();
+  });

From 001a798bcf8d5af0284c44e9e4845ff919b6ea3e Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Tue, 26 Dec 2023 20:23:01 +0800
Subject: [PATCH 05/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=20G=20?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E5=92=8C=E7=BB=98=E5=88=B6=20G2=20=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E6=96=87=E6=A1=A3=E5=92=8C=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manual/advanced/custom/custom-chart.zh.md |  2 +-
 s2-site/docs/manual/advanced/g-plugins.en.md  |  4 +
 s2-site/docs/manual/advanced/g-plugins.zh.md  | 54 +++++++++++
 .../docs/manual/basic/multi-line-text.zh.md   | 10 ++
 .../custom-g2-chart/demo/custom-g2-chart.ts   | 97 ++++++++++++++++++-
 .../custom/custom-g2-chart/demo/meta.json     |  2 +-
 .../demo/{custom-plugins.ts => a11y.ts}       |  3 +-
 .../custom/custom-plugins/demo/meta.json      | 14 ++-
 .../custom/custom-plugins/demo/rough.ts       | 71 ++++++++++++++
 9 files changed, 248 insertions(+), 9 deletions(-)
 create mode 100644 s2-site/docs/manual/advanced/g-plugins.en.md
 create mode 100644 s2-site/docs/manual/advanced/g-plugins.zh.md
 rename s2-site/examples/custom/custom-plugins/demo/{custom-plugins.ts => a11y.ts} (91%)
 create mode 100644 s2-site/examples/custom/custom-plugins/demo/rough.ts

diff --git a/s2-site/docs/manual/advanced/custom/custom-chart.zh.md b/s2-site/docs/manual/advanced/custom/custom-chart.zh.md
index 24bdcd4816..bd03132c42 100644
--- a/s2-site/docs/manual/advanced/custom/custom-chart.zh.md
+++ b/s2-site/docs/manual/advanced/custom/custom-chart.zh.md
@@ -410,4 +410,4 @@ function App() {
 
 [查看示例](/examples/custom/custom-cell#custom-g2-chart)
 
-<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*y9mfQqk9XwYAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="800"/>
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A9oWSbAfHu4AAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="800"/>
diff --git a/s2-site/docs/manual/advanced/g-plugins.en.md b/s2-site/docs/manual/advanced/g-plugins.en.md
new file mode 100644
index 0000000000..0805ab9030
--- /dev/null
+++ b/s2-site/docs/manual/advanced/g-plugins.en.md
@@ -0,0 +1,4 @@
+---
+title: AntV/G Plugins
+order: 10
+---
diff --git a/s2-site/docs/manual/advanced/g-plugins.zh.md b/s2-site/docs/manual/advanced/g-plugins.zh.md
new file mode 100644
index 0000000000..985a8fac21
--- /dev/null
+++ b/s2-site/docs/manual/advanced/g-plugins.zh.md
@@ -0,0 +1,54 @@
+---
+title: 注册 AntV/G 插件
+order: 10
+---
+
+:::warning{title='提示'}
+阅读本章前，请确保已经对 S2 足够了解，并且熟悉 [`AntV/G`](https://g.antv.antgroup.com/) 渲染引擎的相关内容。
+:::
+
+S2 基于 [`AntV/G`](https://g.antv.antgroup.com/) 渲染引擎绘制，因此可以共享其丰富的插件生态。
+
+<Playground path="/custom/custom-plugins/demo/a11y.ts" rid='a11y' height='300'></playground>
+
+## 插件系统介绍
+
+请阅读 [G 插件系统介绍](https://g.antv.antgroup.com/plugins/intro) 相关章节。
+
+## 使用
+
+S2 提供 `transformCanvasConfig` 用于访问 `G` 的上下文，用于 [注册插件](https://g.antv.antgroup.com/plugins/intro) 和透传相关 [配置参数](https://g.antv.antgroup.com/api/canvas/options), 由于 `Canvas` 的弊端，内部的文字不可被浏览器搜索，为了更友好实现无障碍功能，我们可以使用 `@antv/g-plugin-a11y` 插件
+
+```ts
+import { PivotSheet } from '@antv/s2';
+import { Plugin as PluginA11y } from '@antv/g-plugin-a11y';
+
+const s2Options = {
+  transformCanvasConfig(renderer) {
+    renderer.registerPlugin(
+      new PluginA11y({
+        enableExtractingText: true,
+      }),
+    );
+
+    console.log('当前已注册插件：', renderer.getPlugins(), renderer.getConfig());
+
+    return {
+      // 是否支持在容器上应用 CSS Transform 的情况下确保交互事件坐标转换正确
+      supportsCSSTransform: true,
+      devicePixelRatio: 2,
+      cursor: 'crosshair',
+    };
+  }
+};
+
+const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+s2.render();
+```
+
+## 效果
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HIhnRq9EqIwAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="preview"/>
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ag6SSYgDpeYAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="preview"/>
diff --git a/s2-site/docs/manual/basic/multi-line-text.zh.md b/s2-site/docs/manual/basic/multi-line-text.zh.md
index 3c15ec4720..f48ececce5 100644
--- a/s2-site/docs/manual/basic/multi-line-text.zh.md
+++ b/s2-site/docs/manual/basic/multi-line-text.zh.md
@@ -67,3 +67,13 @@ s2.setTheme({
 ## 效果
 
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uMV6QYL-TcwAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="预览"/>
+
+## 获取单元格文本状态
+
+如果想获取一些特定状态，如 `文本最大宽度`, `文本是否换行`, `文本是否溢出`, 可以在拿到 [单元格信息后](/manual/advanced/get-cell-data) 后，调用单元格基类的方法，具体请 [查看 API](/api/basic-class/base-cell)。
+
+```ts
+cell.getActualText()
+cell.getOriginalText()
+cell.isTextOverflowing()
+```
diff --git a/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts b/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts
index 4a5e53c67f..f68a21ef19 100644
--- a/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts
+++ b/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts
@@ -31,7 +31,7 @@ const s2Options: S2Options = {
     },
     // 适当增加单元格宽高, 以便于展示 G2 图表
     dataCell: {
-      width: 400,
+      width: 350,
       height: 400,
     },
   },
@@ -71,10 +71,103 @@ const s2DataConfig: S2DataConfig = {
   data: [
     // 普通数据
     {
-      number: 1343,
+      number: {
+        // 折线图
+        values: {
+          type: 'line',
+          autoFit: true,
+          data: {
+            type: 'fetch',
+            value: 'https://assets.antv.antgroup.com/g2/indices.json',
+          },
+          encode: {
+            x: (d: Record<string, string | number>) => new Date(d['Date']),
+            y: 'Close',
+            color: 'Symbol',
+          },
+          transform: [{ type: 'normalizeY', basis: 'first', groupBy: 'color' }],
+          scale: { y: { type: 'log' } },
+          axis: { y: { title: '↑ Change in price (%)' } },
+          labels: [{ text: 'Symbol', selector: 'last', fontSize: 10 }],
+          tooltip: { items: [{ channel: 'y', valueFormatter: '.1f' }] },
+        },
+      },
+      province: '浙江省',
+      city: '杭州市',
+      type: '办公用品',
+      sub_type: '纸张',
+    },
+    {
+      number: {
+        // 玉玦图
+        values: {
+          type: 'interval',
+          autoFit: true,
+          data: [
+            { question: '问题 1', percent: 0.21 },
+            { question: '问题 2', percent: 0.4 },
+            { question: '问题 3', percent: 0.49 },
+            { question: '问题 4', percent: 0.52 },
+            { question: '问题 5', percent: 0.53 },
+            { question: '问题 6', percent: 0.84 },
+            { question: '问题 7', percent: 1 },
+            { question: '问题 8', percent: 1.2 },
+          ],
+          encode: { x: 'question', y: 'percent', color: 'percent' },
+          scale: { color: { range: '#BAE7FF-#1890FF-#0050B3' } },
+          coordinate: {
+            type: 'radial',
+            innerRadius: 0.1,
+            endAngle: 3.141592653589793,
+          },
+          style: { stroke: 'white' },
+          animate: { enter: { type: 'waveIn', duration: 800 } },
+          // animate: false,
+          legend: {
+            color: {
+              length: 400,
+              position: 'bottom',
+              layout: { justifyContent: 'center' },
+            },
+          },
+        },
+      },
       province: '浙江省',
       city: '杭州市',
       type: '办公用品',
+      sub_type: '笔',
+    },
+    {
+      number: {
+        // 柱形图
+        values: {
+          type: 'interval',
+          autoFit: true,
+          data: [
+            { genre: 'Sports', sold: 275 },
+            { genre: 'Strategy', sold: 115 },
+            { genre: 'Action', sold: 120 },
+            { genre: 'Shooter', sold: 350 },
+            { genre: 'Other', sold: 150 },
+          ],
+          scale: {
+            color: {
+              guide: {
+                position: 'right',
+                size: 80,
+              },
+            },
+          },
+          encode: {
+            x: 'genre',
+            y: 'sold',
+            color: 'genre',
+          },
+        },
+      },
+      province: '浙江省',
+      city: '舟山市',
+      type: '办公用品',
       sub_type: '纸张',
     },
     {
diff --git a/s2-site/examples/custom/custom-g2-chart/demo/meta.json b/s2-site/examples/custom/custom-g2-chart/demo/meta.json
index 405e95210b..17251ad5d7 100644
--- a/s2-site/examples/custom/custom-g2-chart/demo/meta.json
+++ b/s2-site/examples/custom/custom-g2-chart/demo/meta.json
@@ -10,7 +10,7 @@
         "zh": "单元格内绘制 G2 图表",
         "en": "render G2 charts"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*y9mfQqk9XwYAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A9oWSbAfHu4AAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
diff --git a/s2-site/examples/custom/custom-plugins/demo/custom-plugins.ts b/s2-site/examples/custom/custom-plugins/demo/a11y.ts
similarity index 91%
rename from s2-site/examples/custom/custom-plugins/demo/custom-plugins.ts
rename to s2-site/examples/custom/custom-plugins/demo/a11y.ts
index 1a8150e954..797af5ded9 100644
--- a/s2-site/examples/custom/custom-plugins/demo/custom-plugins.ts
+++ b/s2-site/examples/custom/custom-plugins/demo/a11y.ts
@@ -1,5 +1,4 @@
 import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
-import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';
 import { Plugin as PluginA11y } from '@antv/g-plugin-a11y';
 
 fetch(
@@ -50,7 +49,7 @@ fetch(
         },
       },
       transformCanvasConfig(renderer) {
-        renderer.registerPlugin(new PluginRoughCanvasRenderer());
+        // 试试使用浏览器的搜索
         renderer.registerPlugin(
           new PluginA11y({
             enableExtractingText: true,
diff --git a/s2-site/examples/custom/custom-plugins/demo/meta.json b/s2-site/examples/custom/custom-plugins/demo/meta.json
index eaa3596197..26f2771ccc 100644
--- a/s2-site/examples/custom/custom-plugins/demo/meta.json
+++ b/s2-site/examples/custom/custom-plugins/demo/meta.json
@@ -5,10 +5,18 @@
   },
   "demos": [
     {
-      "filename": "custom-plugins.ts",
+      "filename": "a11y.ts",
       "title": {
-        "zh": "自定义 AntV/G 5.0 插件和配置",
-        "en": "custom AntV/G 5.0 plugins and config"
+        "zh": "无障碍功能",
+        "en": "a11y"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HIhnRq9EqIwAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "rough.ts",
+      "title": {
+        "zh": "手绘风格",
+        "en": "rough"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ag6SSYgDpeYAAAAAAAAAAAAADmJ7AQ/original"
     }
diff --git a/s2-site/examples/custom/custom-plugins/demo/rough.ts b/s2-site/examples/custom/custom-plugins/demo/rough.ts
new file mode 100644
index 0000000000..5d4cb09089
--- /dev/null
+++ b/s2-site/examples/custom/custom-plugins/demo/rough.ts
@@ -0,0 +1,71 @@
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
+import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
+)
+  .then((res) => res.json())
+  .then(async (res) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
+      fields: {
+        rows: ['province', 'city'],
+        columns: ['type', 'sub_type'],
+        values: ['number'],
+      },
+      data: res.data,
+      meta: [
+        {
+          field: 'number',
+          name: '数量',
+        },
+        {
+          field: 'province',
+          name: '省份',
+        },
+        {
+          field: 'city',
+          name: '城市',
+        },
+        {
+          field: 'type',
+          name: '类别',
+        },
+        {
+          field: 'sub_type',
+          name: '子类别',
+        },
+      ],
+    };
+
+    const s2Options: S2Options = {
+      width: 800,
+      height: 600,
+      interaction: {
+        brushSelection: {
+          rowCell: true,
+          colCell: true,
+          dataCell: true,
+        },
+      },
+      transformCanvasConfig(renderer) {
+        renderer.registerPlugin(new PluginRoughCanvasRenderer());
+
+        console.log(
+          '当前已注册插件:',
+          renderer.getPlugins(),
+          renderer.getConfig(),
+        );
+
+        return {
+          supportsCSSTransform: true,
+          devicePixelRatio: 2,
+          cursor: 'crosshair',
+        };
+      },
+    };
+
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    await s2.render();
+  });

From 17ca8dc9decdc7d7bb836e56cdd01ce96600d938 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Wed, 27 Dec 2023 15:27:30 +0800
Subject: [PATCH 06/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E7=BB=84=E4=BB=B6=E7=9B=B8=E5=85=B3=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/.dumi/global.less                     |   4 +
 s2-site/.dumirc.ts                            |  14 +-
 s2-site/docs/api/components/export.en.md      |   2 +-
 s2-site/docs/api/components/export.zh.md      |   6 +-
 .../{export.en.md => copy-export.en.md}       |   0
 s2-site/docs/common/copy-export.zh.md         | 214 ++++++++++++++++++
 s2-site/docs/common/export.zh.md              |  78 -------
 s2-site/docs/common/interaction.zh.md         |   2 +-
 .../analysis/drill-down.en.md                 |   0
 .../analysis/drill-down.zh.md                 |  30 ++-
 .../analysis/editable-mode.en.md              |   0
 .../advanced/analysis/editable-mode.zh.md     | 177 +++++++++++++++
 .../analysis/export.en.md}                    |   4 +-
 .../manual/advanced/analysis/export.zh.md     |  56 +++++
 .../analysis/mobile-component.en.md           |   0
 .../analysis/mobile-component.zh.md           |  41 ++--
 .../analysis/pagination.en.md                 |   0
 .../manual/advanced/analysis/pagination.zh.md |  93 ++++++++
 .../analysis/strategy.en.md                   |   0
 .../analysis/strategy.zh.md                   |  68 ++++--
 .../analysis/switcher.en.md                   |   0
 .../analysis/switcher.zh.md                   |  47 ++--
 .../{basic => advanced}/analysis/vue.en.md    |   0
 .../{basic => advanced}/analysis/vue.zh.md    |   2 +
 .../manual/advanced/custom/cell-size.zh.md    |  28 +--
 .../manual/advanced/custom/custom-chart.zh.md |   7 +-
 .../docs/manual/advanced/custom/hook.zh.md    |  12 +-
 s2-site/docs/manual/advanced/hd-adapter.zh.md |   2 +-
 .../manual/advanced/interaction/basic.zh.md   |   4 +
 .../manual/advanced/interaction/copy.en.md    |   4 +
 .../manual/advanced/interaction/copy.zh.md    |   6 +
 .../manual/advanced/interaction/scroll.zh.md  |  20 +-
 .../manual/basic/analysis/copy-export.zh.md   | 101 ---------
 .../manual/basic/analysis/editable-mode.zh.md | 176 --------------
 .../manual/basic/analysis/pagination.zh.md    |  64 ------
 .../advanced/demo/table-link-jump.ts          |   2 +-
 36 files changed, 735 insertions(+), 529 deletions(-)
 rename s2-site/docs/common/{export.en.md => copy-export.en.md} (100%)
 create mode 100644 s2-site/docs/common/copy-export.zh.md
 delete mode 100644 s2-site/docs/common/export.zh.md
 rename s2-site/docs/manual/{basic => advanced}/analysis/drill-down.en.md (100%)
 rename s2-site/docs/manual/{basic => advanced}/analysis/drill-down.zh.md (74%)
 rename s2-site/docs/manual/{basic => advanced}/analysis/editable-mode.en.md (100%)
 create mode 100644 s2-site/docs/manual/advanced/analysis/editable-mode.zh.md
 rename s2-site/docs/manual/{basic/analysis/copy-export.en.md => advanced/analysis/export.en.md} (97%)
 create mode 100644 s2-site/docs/manual/advanced/analysis/export.zh.md
 rename s2-site/docs/manual/{basic => advanced}/analysis/mobile-component.en.md (100%)
 rename s2-site/docs/manual/{basic => advanced}/analysis/mobile-component.zh.md (59%)
 rename s2-site/docs/manual/{basic => advanced}/analysis/pagination.en.md (100%)
 create mode 100644 s2-site/docs/manual/advanced/analysis/pagination.zh.md
 rename s2-site/docs/manual/{basic => advanced}/analysis/strategy.en.md (100%)
 rename s2-site/docs/manual/{basic => advanced}/analysis/strategy.zh.md (73%)
 rename s2-site/docs/manual/{basic => advanced}/analysis/switcher.en.md (100%)
 rename s2-site/docs/manual/{basic => advanced}/analysis/switcher.zh.md (70%)
 rename s2-site/docs/manual/{basic => advanced}/analysis/vue.en.md (100%)
 rename s2-site/docs/manual/{basic => advanced}/analysis/vue.zh.md (98%)
 create mode 100644 s2-site/docs/manual/advanced/interaction/copy.en.md
 create mode 100644 s2-site/docs/manual/advanced/interaction/copy.zh.md
 delete mode 100644 s2-site/docs/manual/basic/analysis/copy-export.zh.md
 delete mode 100644 s2-site/docs/manual/basic/analysis/editable-mode.zh.md
 delete mode 100644 s2-site/docs/manual/basic/analysis/pagination.zh.md

diff --git a/s2-site/.dumi/global.less b/s2-site/.dumi/global.less
index 4309701f4d..f064dd8480 100644
--- a/s2-site/.dumi/global.less
+++ b/s2-site/.dumi/global.less
@@ -10,6 +10,10 @@ ul {
   margin-bottom: 16px !important;
 }
 
+details {
+  cursor: pointer;
+}
+
 .dumi-default-source-code {
   margin: 24px 0;
 
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 3912622984..08a15afa2c 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -164,20 +164,20 @@ export default defineConfig({
         order: 5,
       },
       {
-        slug: 'manual/basic/sort',
+        slug: 'manual/advanced/analysis',
         title: {
-          zh: '排序',
-          en: 'Sort',
+          zh: '分析组件',
+          en: 'Analyze component',
         },
         order: 6,
       },
       {
-        slug: 'manual/basic/analysis',
+        slug: 'manual/basic/sort',
         title: {
-          zh: '分析组件',
-          en: 'Analyze component',
+          zh: '排序',
+          en: 'Sort',
         },
-        order: 7,
+        order: 6,
       },
     ],
     tutorials: [
diff --git a/s2-site/docs/api/components/export.en.md b/s2-site/docs/api/components/export.en.md
index 41fba9fd31..3f9668fcd0 100644
--- a/s2-site/docs/api/components/export.en.md
+++ b/s2-site/docs/api/components/export.en.md
@@ -30,7 +30,7 @@ order: 5
 | syncCopy             | Copy data synchronously (default is asynchronous)                                       | `boolean`                                                       | `false`  |          |
 | drop down            | Dropdown menu configuration, transparently passed to the `Dropdown` component of `antd` | [DropdownProps](https://ant.design/components/dropdown-cn/#API) |          |          |
 
-<embed src="@/docs/common/export.en.md"></embed>
+<embed src="@/docs/common/copy-export.en.md"></embed>
 
 ## Vue export component
 
diff --git a/s2-site/docs/api/components/export.zh.md b/s2-site/docs/api/components/export.zh.md
index 93b39b334a..616807136e 100644
--- a/s2-site/docs/api/components/export.zh.md
+++ b/s2-site/docs/api/components/export.zh.md
@@ -30,8 +30,4 @@ order: 5
 | syncCopy | 同步复制数据 （默认异步） | `boolean` | `false` |  |
 | dropdown | 下拉菜单配置，透传给 `antd` 的 `Dropdown` 组件 | [DropdownProps](https://ant.design/components/dropdown-cn/#API) | | |
 
-<embed src="@/docs/common/export.zh.md"></embed>
-
-## Vue 导出组件
-
-开发中，敬请期待
+<embed src="@/docs/common/copy-export.zh.md"></embed>
diff --git a/s2-site/docs/common/export.en.md b/s2-site/docs/common/copy-export.en.md
similarity index 100%
rename from s2-site/docs/common/export.en.md
rename to s2-site/docs/common/copy-export.en.md
diff --git a/s2-site/docs/common/copy-export.zh.md b/s2-site/docs/common/copy-export.zh.md
new file mode 100644
index 0000000000..a6dbdc05cd
--- /dev/null
+++ b/s2-site/docs/common/copy-export.zh.md
@@ -0,0 +1,214 @@
+---
+title: 复制与导出
+order: 8
+---
+
+## 复制
+
+### 1. 全量复制
+
+```ts | pure
+import { copyData, copyToClipboard } from '@antv/s2'
+
+// 拿到复制数据
+const data = copyData(spreadsheet, '\t', false)
+
+// 同步复制：copyToClipboard(data, false)
+copyToClipboard(data)
+  .then(() => {
+    console.log('复制成功')
+  })
+  .catch(() => {
+    console.log('复制失败')
+  })
+```
+
+#### 1.1 原始数据全量复制
+
+<img alt="originFullCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*pfSsTrvuJ0UAAAAAAAAAAAAAARQnAQ" width="1000" />
+
+#### 1.2 格式化数据全量复制
+
+如果配置了 `S2DataConfig.meta` 对数据有 [格式化处理](/manual/basic/formatter), 可以开启 `copyWithFormat`, 这样复制时会拿到格式化之后的数据。
+
+```ts
+const s2Options = {
+  interaction: {
+    // 复制时携带表头
+    copyWithHeader: true,
+    // 复制格式化后的数据
+    copyWithFormat: true
+  }
+}
+```
+
+<img alt="formatFullCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*mLSdTrAWZrwAAAAAAAAAAAAAARQnAQ" width="1000" />
+
+### 2. 局部复制
+
+S2 默认提供复制的能力，开启后，使用快捷键 `Command/Ctrl + C` 即可复制选中区域（局部复制）.
+
+```ts
+const s2Options = {
+  interaction: {
+    // 是否开启复制
+    enableCopy: true,
+    // 复制时携带表头
+    copyWithHeader: true,
+    // 复制格式化后的数据
+    copyWithFormat: true,
+
+    // 可选：圈选复制前，需要开启圈选功能
+    brushSelection: {
+      dataCell: true,
+      rowCell: true,
+      colCell: true,
+    },
+
+    // 可选：多选
+    multiSelection: true
+  }
+};
+```
+
+#### 2.1 复制到 Excel
+
+<img alt="excelCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*LzTYTpFosccAAAAAAAAAAAAAARQnAQ" width="1000"/>
+
+#### 2.2 复制带 HTML 格式
+
+<img alt="HTMLCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DuHCSbpv_XkAAAAAAAAAAAAAARQnAQ" width="1000"/>
+
+#### 2.3 复制行头内容
+
+<img alt="CopyCol" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*_NukQpysLC8AAAAAAAAAAAAAARQnAQ" width="1000"/>
+
+#### 2.4 复制列头内容
+
+<img alt="CopyRow" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ncuAQaL4AvAAAAAAAAAAAAAAARQnAQ" width="1000"/>
+
+#### 2.5 带表头复制
+
+开启 `copyWithHeader` 后，复制时会携带当前选中数据对应的行列头单元格数据。
+
+```ts
+const s2Options = {
+  interaction: {
+    enableCopy: true,
+    copyWithHeader: true,
+  }
+};
+```
+
+<img alt="copyWithHeader" src="https://gw.alipayobjects.com/zos/antfincdn/wSBjSYKSM/3eee7bc2-7f8e-4dd9-8836-52a978d9718a.png" width="1000"/>
+
+## 导出
+
+### 原始导出方法
+
+:::info{title="提示"}
+组件层的复制，导出等功能，基于核心层 `@antv/s2` 透出的一系列工具方法封装，可以根据实际业务，基于工具方法自行封装
+:::
+
+#### 1. 导出 CSV
+
+默认只提供 `csv` 纯文本格式的导出，如果想导出 `xlsx`, 保留单元格样式，可以结合 [exceljs](https://github.com/exceljs/exceljs), [sheetjs]( https://github.com/SheetJS/sheetjs) 等工具自行处理。
+
+```ts | pure
+import { copyData, download } from '@antv/s2'
+
+// 拿到复制数据
+const data = copyData(spreadsheet, '\t', false)
+
+// 导出数据 (csv)
+download(data, 'filename')
+```
+
+#### 2. 复制数据到剪贴板
+
+:::warning{title="注意"}
+S2 会在复制的时候往剪贴板写入两种类型的元数据
+
+- `text/html`
+- `text/plain`
+
+粘贴的时候，取决于`接收方选择什么类型的数据`，对于富文本一般来说接收的是 `text/html`, 对于 Excel 之类的就是 `text/plain`, 即带制表符 `\t` 的纯文本，支持自定义修改。
+:::
+
+```ts | pure
+import { copyToClipboard } from '@antv/s2'
+
+// 同步复制：copyToClipboard(data, false)
+copyToClipboard(data)
+  .then(() => {
+    console.log('复制成功')
+  })
+  .catch(() => {
+    console.log('复制失败')
+  })
+```
+
+#### 3. 自定义导出类型
+
+```ts | pure
+import { copyData, registerTransformer, CopyMIMEType } from '@antv/s2'
+
+// 自定义导出类型
+registerTransformer(CopyMIMEType.HTML, (matrix) => {
+  return `<td></td>`
+})
+
+// 复制到 word、语雀等场景会成为一个空表格
+const data = copyData(spreadsheet, '\t', false)
+```
+
+#### API
+
+##### copyData
+
+> @deprecated 后续将废弃方法，将使用 asyncGetAllPlainData
+
+| 参数          | 说明                                    | 类型                                                                             | 默认值           | 必选 |
+| ------------|---------------------------------------|--------------------------------------------------------------------------------|---------------| --- |
+| spreadsheet | s2 实例                                 | [SpreadSheet](/docs/api/basic-class/spreadsheet)                               |               | ✓    |
+| split       | 分隔符                                   | `string`                                                                       |               | ✓    |
+| formatOptions  | 是否格式化，可以分别对数据单元格和行列头进行格式化，传布尔值会同时对单元格和行列头生效。 | <code> boolean \|  { isFormatHeader?: boolean, isFormatData?: boolean} </code> | `false`       |      |
+| customTransformer  | 导出时支持自定义 (transformer) 数据导出格式化方法        | (transformer: `Transformer`) => `Partial<Transformer>`               | `transformer` |      |
+| isAsyncExport  | 是否异步导出        | boolean                                                                        | false         |      |
+
+##### copyToClipboard
+
+| 参数 | 说明     | 类型     | 默认值 | 必选 |
+| --- | --- | ------- | ----- | --- |
+| data | 数据源 | `string` |        | ✓    |
+| sync | 是否同步复制数据 （默认异步） | `boolean` |   `false`     |     |
+
+##### download
+
+| 参数     | 说明     | 类型     | 默认值 | 必选 |
+| ------- | ------- | ------- | ----- | --- |
+| data     | 数据源 | `string` |        | ✓    |
+| filename | 文件名称 | `string` |        | ✓    |
+
+##### CopyMIMEType
+
+```ts
+enum CopyMIMEType {
+  PLAIN = 'text/plain',
+  HTML = 'text/html',
+}
+```
+
+##### Transformer
+
+```ts | pure
+export interface Transformer {
+  [CopyMIMEType.PLAIN]: MatrixPlainTransformer;
+  [CopyMIMEType.HTML]: MatrixHTMLTransformer;
+}
+```
+
+| 参数 | 说明     | 类型                       | 默认值 | 必选 |
+| --- | --- |--------------------------|-----| --- |
+| type | 复制内容的 MIMEType | `CopyMIMEType`           |     | ✓    |
+| transformer | 处理函数 | `MatrixHTMLTransformer \| MatrixPlainTransformer`   |      |   ✓   |
diff --git a/s2-site/docs/common/export.zh.md b/s2-site/docs/common/export.zh.md
deleted file mode 100644
index 152f818a2a..0000000000
--- a/s2-site/docs/common/export.zh.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: 导出
-order: 8
----
-
-## 原始导出方法
-
-组件层的复制，导出等功能，基于核心层 `@antv/s2` 透出的一系列工具方法封装，可以根据实际业务，基于工具方法自行封装
-
-```tsx
-import { copyData, copyToClipboard, download } from '@antv/s2'
-
-// 拿到复制数据
-const data = copyData(spreadsheet, '\t', false)
-
-// 复制数据到剪贴板
-// 同步复制：copyToClipboard(data, false)
-copyToClipboard(data)
-  .then(() => {
-    console.log('复制成功')
-  })
-  .catch(() => {
-    console.log('复制失败')
-  })
-
-// 导出数据
-download(data, 'filename')
-
-
-// 自定义导出类型
-registerTransformer(CopyMIMEType.HTML, (matrix) => {
-  return `<td></td>`
-})
-
-const data = copyData(spreadsheet, '\t', false)
-// 复制到word、语雀等场景会成为一个空表格
-
-```
-
-### copyData
-
-> @deprecated 后续将废弃方法，将使用 asyncGetAllPlainData
-
-| 参数          | 说明                                    | 类型                                                                             | 默认值           | 必选 |
-| ------------|---------------------------------------|--------------------------------------------------------------------------------|---------------| --- |
-| spreadsheet | s2 实例                                 | [SpreadSheet](/docs/api/basic-class/spreadsheet)                               |               | ✓    |
-| split       | 分隔符                                   | `string`                                                                       |               | ✓    |
-| formatOptions  | 是否格式化，可以分别对数据单元格和行列头进行格式化，传布尔值会同时对单元格和行列头生效。 | <code> boolean \|  { isFormatHeader?: boolean, isFormatData?: boolean} </code> | `false`       |      |
-| customTransformer  | 导出时支持自定义(transformer)数据导出格式化方法        | <code> (transformer: Transformer) => Partial<Transformer> </code>              | `transformer` |      |
-| isAsyncExport  | 是否异步导出        | boolean                                                                        | false         |      |
-
-### copyToClipboard
-
-| 参数 | 说明     | 类型     | 默认值 | 必选 |
-| --- | --- | ------- | ----- | --- |
-| data | 数据源 | `string` |        | ✓    |
-| sync | 是否同步复制数据 （默认异步） | `boolean` |   `false`     |     |
-
-### download
-
-| 参数     | 说明     | 类型     | 默认值 | 必选 |
-| ------- | ------- | ------- | ----- | --- |
-| data     | 数据源 | `string` |        | ✓    |
-| filename | 文件名称 | `string` |        | ✓    |
-
-### Transformer
-
-```ts
-export interface Transformer {
-  [CopyMIMEType.PLAIN]: MatrixPlainTransformer;
-  [CopyMIMEType.HTML]: MatrixHTMLTransformer;
-}
-```
-
-| 参数 | 说明     | 类型                       | 默认值 | 必选 |
-| --- | --- |--------------------------|-----| --- |
-| type | 复制内容的MIMEType | `CopyMIMEType`           |     | ✓    |
-| transformer | 处理函数 | `MatrixHTMLTransformer | MatrixPlainTransformer`   |      |   ✓   |
diff --git a/s2-site/docs/common/interaction.zh.md b/s2-site/docs/common/interaction.zh.md
index 27ccfd9fcf..62abf46abb 100644
--- a/s2-site/docs/common/interaction.zh.md
+++ b/s2-site/docs/common/interaction.zh.md
@@ -15,7 +15,7 @@ order: 5
 | enableCopy                           | 是否允许复制                                                                                                                                                              | `boolean`                                                                                                 | `false`                                               |                  |
 | copyWithHeader                       | 复制数据是否带表头信息                                                                                                                                                         | `boolean`                                                                                                 | `false`                                               |                  |
 | copyWithFormat                       | 是否使用 field format 格式复制                                                                                                                                              | `boolean`                                                                                                 | `false`                                               |                  |
-| customTransformer  | 复制时支持自定义(transformer)数据格式化方法                                                                                                                                      | <code> (transformer: [Transformer](/docs/api/components/export#transformer)) => Partial<Transformer> </code> | `transformer` |      |
+| customTransformer  | 复制时支持自定义 (transformer) 数据格式化方法                                                                                                                                      | (transformer: [Transformer](/docs/api/components/export#transformer)) => `Partial<Transformer>` | `transformer` |      |
 | customInteractions                   | 自定义交互 [详情](/docs/manual/advanced/interaction/custom)                                                                                                                | [CustomInteraction[]](#custominteraction)                                                                 |                                                       |                  |
 | scrollSpeedRatio                     | 用于控制滚动速率，分水平和垂直两个方向，默认为 1                                                                                                                                           | [ScrollSpeedRatio](#scrollspeedratio)                                                                     |                                                       |                  |
 | autoResetSheetStyle                  | 用于控制点击表格外区域和按下 esc 键时是否重置交互状态                                                                                                                                       | `boolean`                                                                                                 | `true`                                                |                  |
diff --git a/s2-site/docs/manual/basic/analysis/drill-down.en.md b/s2-site/docs/manual/advanced/analysis/drill-down.en.md
similarity index 100%
rename from s2-site/docs/manual/basic/analysis/drill-down.en.md
rename to s2-site/docs/manual/advanced/analysis/drill-down.en.md
diff --git a/s2-site/docs/manual/basic/analysis/drill-down.zh.md b/s2-site/docs/manual/advanced/analysis/drill-down.zh.md
similarity index 74%
rename from s2-site/docs/manual/basic/analysis/drill-down.zh.md
rename to s2-site/docs/manual/advanced/analysis/drill-down.zh.md
index 1d7148ee5a..6f787a0799 100644
--- a/s2-site/docs/manual/basic/analysis/drill-down.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/drill-down.zh.md
@@ -3,7 +3,9 @@ title: 维度下钻
 order: 13
 ---
 
-S2 提供的「维度下钻」的能力，可以为你挖掘不同维度下更详细的数据，让你的数据洞察变得更清晰。
+<Badge>@antv/s2-react</Badge> <Badge type="success">@antv/s2-vue</Badge>
+
+S2 提供 `维度下钻` 的基础能力，`@antv/s2-react` 和 `@antv/s2-vue` 基于 `@antv/s2-core` 封装了 `维度下钻` 的组件，可以为你挖掘不同维度下更详细的数据，让你的数据洞察变得更清晰。
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/J7bnG8lcf/xiazuan.gif" height="400" alt="preview" />
 
@@ -11,12 +13,12 @@ S2 提供的「维度下钻」的能力，可以为你挖掘不同维度下更
 
 ### 基本概念
 
-- 主要适用于存在分层关系的数据源， 对于某一个数据信息，向下钻取不同层级的数据表现。🌰 列如：查看不同区域的销售数据，您查看华中区销售额时，可以下钻查看湖北省的销售额。
+- 主要适用于存在分层关系的数据源，对于某一个数据信息，向下钻取不同层级的数据表现。🌰 例如：查看不同区域的销售数据，您查看华中区销售额时，可以下钻查看湖北省的销售额。
 - 下钻是由汇总数据深入到细节，层层深入以便更详细的查看数据的方式，让数据更加清晰明了，帮助充分挖掘数据背后的价值。
 
 ### 功能描述
 
-配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻
+配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻。
 
 ### 拓展
 
@@ -41,7 +43,6 @@ const PartDrillDown = {
       },
     ],
   },
-
   // 点击下钻后的回调
   fetchData: (meta, drillFields) =>
     new Promise((resolve) => {
@@ -105,13 +106,30 @@ const App = () => {
 }
 ```
 
-<Playground path='react-component/drill-down/demo/for-pivot.tsx' rid='container'></playground>
+<Playground path='react-component/drill-dwon/demo/for-pivot.tsx' rid='for-pivot'></playground>
+
+### 单独使用下钻面板
+
+```tsx
+import { DrillDown } from '@antv/s2-react';
+
+<DrillDown
+  disabledFields={disabledFields}
+  clearButtonText={clearButtonText}
+  dataSet={dataSet}
+/>
+```
+
+<Playground path='react-component/drill-dwon/demo/basic-panel.tsx' rid='basic-panel'></playground>
 
 ## 使用场景
 
-🌰 案例：
+:::info{title="🌰 案例"}
+
 **洞察数据异常**：当销售负责人发现华中地区销售异常，远低于其他地区时。他通过下钻省份，查看华中地区所有省份的销售额。当发现湖北省销售异常时，由可以通过省份下钻到城市🏙，发现城市 B 销售额异常。通过下钻，我们快速的挖掘到了销售额异常的根源。
 
+:::
+
 <img src="https://gw.alipayobjects.com/zos/antfincdn/43CZawVX7/xiazuan-chengshi.gif" height="400" alt="preview" />
 
 ## API
diff --git a/s2-site/docs/manual/basic/analysis/editable-mode.en.md b/s2-site/docs/manual/advanced/analysis/editable-mode.en.md
similarity index 100%
rename from s2-site/docs/manual/basic/analysis/editable-mode.en.md
rename to s2-site/docs/manual/advanced/analysis/editable-mode.en.md
diff --git a/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md b/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md
new file mode 100644
index 0000000000..0bea452643
--- /dev/null
+++ b/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md
@@ -0,0 +1,177 @@
+---
+title: 编辑表
+order: 3
+---
+
+<Badge>@antv/s2-react</Badge>
+
+编辑表是 `S2` 明细表的衍生形态之一。在提供完整的明细表的分析功能之外，还支持对数据的修改操作（**透视表暂不支持**）。
+
+<img alt="editable-mode" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*9RoBT5FIJG0AAAAAAAAAAAAAARQnAQ" width="600" />
+
+## 快速上手
+
+```html
+<div id="container"></div>
+```
+
+<details>
+  <summary>查看数据</summary>
+
+  ```ts
+  // 1. 准备数据
+  const data = [
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "笔",
+      "price": 1
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "纸张",
+      "price": 2
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "笔",
+      "price": 17
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "纸张",
+      "price": 6
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "笔",
+      "price": 8
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "笔",
+      "price": 12
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "纸张",
+      "price": 3
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "纸张",
+      "price": 25
+    },
+
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "笔",
+      "price": 20
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "纸张",
+      "price": 10
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "笔",
+      "price": 15
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "纸张",
+      "price": 2
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "笔",
+      "price": 15
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "笔",
+      "price": 30
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "纸张",
+      "price": 40
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "纸张",
+        "price": 50
+      }
+    ]
+  ```
+
+</details>
+
+```typescript
+import React from "react";
+import { SheetComponent } from '@antv/s2-react';
+import '@antv/s2-react/dist/style.min.css';
+
+const s2DataCfg = {
+  fields: {
+    columns: ["province", "city", "type", "price"],
+  },
+  meta: [
+    // 列头字段对应的元信息，比如展示的中文名
+    {
+      field: "province",
+      name: "省份",
+    },
+    {
+      field: "city",
+      name: "城市",
+    },
+    {
+      field: "type",
+      name: "类型",
+    },
+    {
+      field: "price",
+      name: "价格",
+    },
+  ],
+  data,
+};
+
+const s2Options = {
+  width: 400,
+  height: 200,
+};
+
+const App = () => {
+  return (
+    <SheetComponent
+      sheetType="editable"
+      dataCfg={s2DataCfg}
+      options={s2Options}
+    />,
+  )
+}
+```
+
+## 效果
+
+[查看示例](/examples/react-component/sheet#editable)
+
+<Playground path='s2-site/examples/react-component/sheet/demo/editable.tsx' rid='editable'></playground>
diff --git a/s2-site/docs/manual/basic/analysis/copy-export.en.md b/s2-site/docs/manual/advanced/analysis/export.en.md
similarity index 97%
rename from s2-site/docs/manual/basic/analysis/copy-export.en.md
rename to s2-site/docs/manual/advanced/analysis/export.en.md
index cf4012cd7c..4f41bd3a06 100644
--- a/s2-site/docs/manual/basic/analysis/copy-export.en.md
+++ b/s2-site/docs/manual/advanced/analysis/export.en.md
@@ -1,5 +1,5 @@
 ---
-title: Copy And Export
+title: Export
 order: 11
 ---
 
@@ -93,4 +93,4 @@ Click the copy or download button to export the full amount of data (full amount
 
 <video width="600" controls><source src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/file/A*EZfPRJqzl4cAAAAAAAAAAAAAARQnAQ" type="video/mp4">Your browser does not support HTML video.</video>
 
-<embed src="@/docs/common/export.en.md"></embed>
+<embed src="@/docs/common/copy-export.en.md"></embed>
diff --git a/s2-site/docs/manual/advanced/analysis/export.zh.md b/s2-site/docs/manual/advanced/analysis/export.zh.md
new file mode 100644
index 0000000000..41b2af33da
--- /dev/null
+++ b/s2-site/docs/manual/advanced/analysis/export.zh.md
@@ -0,0 +1,56 @@
+---
+title: 导出
+order: 11
+---
+
+<Badge>@antv/s2</Badge> <Badge>@antv/s2-react</Badge>
+
+`@antv/s2` 提供了 [复制导出的基础能力](/manual/advanced/interaction/copy), `@antv/s2-react` 组件层基于 `@antv/s2` 封装了开箱即用的导出功能。
+
+## 使用
+
+```tsx | {15-19}
+import { SheetComponent } from '@antv/s2-react'
+
+const S2Options = {
+  interaction: {
+    // 开启复制
+    enableCopy: true
+  }
+}
+
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={dataCfg}
+      options={S2Options}
+      header={{
+        exportCfg: {
+          open: true
+        }
+      }}
+    />
+  )
+}
+```
+
+:::info{title="提示"}
+开启导出功能后，点击右上角的下拉菜单，可以复制和导出（原始/全量）数据。
+
+1. `复制原始数据/复制格式化数据`: 可以直接粘贴到 `Excel`,`语雀` 等常用应用中。
+2. `下载原始数据/下载格式化数据`: 生成 `csv` 文件，可以直接使用 `Excel` 打开。
+
+:::
+
+<video width="1000" controls>
+  <source src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/file/A*EZfPRJqzl4cAAAAAAAAAAAAAARQnAQ" type="video/mp4">
+  Your browser does not support HTML video.
+</video>
+
+## 在非 React 应用中使用
+
+:::info{title="提示"}
+本质上，`@antv/s2-react` 的导出分析组件，只是基于 `@antv/s2` 提供的能力，封装了相应的 UI, 如果不希望依赖框架，或者希望在 `Vue` 等框架中使用，都是可以的。
+:::
+
+<embed src="@/docs/common/copy-export.zh.md"></embed>
diff --git a/s2-site/docs/manual/basic/analysis/mobile-component.en.md b/s2-site/docs/manual/advanced/analysis/mobile-component.en.md
similarity index 100%
rename from s2-site/docs/manual/basic/analysis/mobile-component.en.md
rename to s2-site/docs/manual/advanced/analysis/mobile-component.en.md
diff --git a/s2-site/docs/manual/basic/analysis/mobile-component.zh.md b/s2-site/docs/manual/advanced/analysis/mobile-component.zh.md
similarity index 59%
rename from s2-site/docs/manual/basic/analysis/mobile-component.zh.md
rename to s2-site/docs/manual/advanced/analysis/mobile-component.zh.md
index c3d25f4c0c..d0e0512851 100644
--- a/s2-site/docs/manual/basic/analysis/mobile-component.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/mobile-component.zh.md
@@ -1,19 +1,23 @@
 ---
-title: 移动端组件
+title: 移动端表格组件
 order: 10
 ---
 
-为了满足移动端的使用场景，`s2-react` 中的分析组件进行了移动的适配。帮助用户在移动端更加便利、高效的看数。
+<Badge>@antv/s2-react</Badge>
 
-## 前提
+为了满足移动端的使用场景，`@antv/s2-react` 中的分析组件进行了移动端的适配。帮助用户在移动端更加便利、高效的看数。
 
-移动端表组件使用了 S2 提供的各种能力进行融合，所以建议在阅读本章前，请确保你已经阅读过以下章节：
+:::warning{title="注意"}
+
+**移动端表组件**使用了 S2 提供的各种能力进行融合，所以建议在阅读本章前，请确保你已经阅读过以下章节：
 
 - [基本概念](/zh/docs/manual/basic/base-concept)
 - [表格形态](/zh/docs/manual/basic/sheet-type/pivot-mode)
 - [tooltip](/zh/docs/manual/basic/tooltip)
 
-## 移动端表格
+:::
+
+## 快速上手
 
 ```tsx
 import React from 'react';
@@ -22,26 +26,23 @@ import '@antv/s2-react/dist/style.min.css';
 
 const App = () => {
   return (
-    <MobileSheet
-      dataCfg={s2DataConfig}
-    />
+    <MobileSheet dataCfg={s2DataConfig} />
   )
 }
 ```
 
-| PC                                                                                                                                                    | Mobile                                                       |
-|-------------------------------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------------ |
+| PC 端       | Mobile 端         |
+|--------------------------------------| --------------------------------- |
 | <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*dIc6S47zmm4AAAAAAAAAAAAAARQnAQ" alt="PC" style="width: 400px; max-height: 100%; max-width: initial;" /> | <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*cf2uQYVVStQAAAAAAAAAAAAAARQnAQ" alt="PC" style="width: 400px; max-height: 100%;" /> |
 
 移动端组件 `MobileSheet`, 将会被内置移动专用的 `options`，使表格更加紧凑，同时禁用了移动无法使用的交互操作。当然，您也可以通过外部 `options` 设置来覆盖原有的配置。
 
 ```ts
-const mobileWidth = document.documentElement.clientWidth;
-export const DEFAULT_MOBILE_OPTIONS: Readonly<S2Options> = {
-  width: mobileWidth - 40,
+const DEFAULT_MOBILE_OPTIONS = {
+  width: document.documentElement.clientWidth - 40,
   height: 380,
   style: {
-    layoutWidthType: LayoutWidthTypes.ColAdaptive,
+    layoutWidthType: 'colAdaptive',
   },
   interaction: {
     hoverHighlight: false,
@@ -54,21 +55,19 @@ export const DEFAULT_MOBILE_OPTIONS: Readonly<S2Options> = {
     multiSelection: false,
     rangeSelection: false,
   },
-  device: DeviceType.MOBILE,
+  device: 'mobile',
 };
 ```
 
-> 配置可能实时变更，您可以通过获取 `DEFAULT_MOBILE_OPTIONS` 来查看，当前版本的 `options` 配置。
-
-## 移动端 Tooltips
+## 移动端 Tooltip
 
-我们修改了 `tooltips` 在移动端组件的交互操作。
+我们修改了 `tooltip` 在移动端组件的交互操作。
 但保留了原本 [Tooltip API](/zh/docs/api/basic-class/base-tooltip) 的使用方式，您只需要使用 `MobileSheet` 组件即可使用到移动端定制的 `tooltips`。
 
 ​📊 查看 [Tooltip 使用](/zh/docs/manual/basic/tooltip)
 
-|               | PC                                                                                                                                                                       | Mobile                                                                                                                                                                   |
-| ------------- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+|  功能  | PC 端       | Mobile 端      |
+| ------------- |---------------|----------------------------------------------|
 | 排序功能      | <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*SuBwToVzrYwAAAAAAAAAAAAAARQnAQ" alt="PC" style="width: 400px; max-height: 100%; max-width: initial;" /> | <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*4CgUTI8jOyYAAAAAAAAAAAAAARQnAQ" alt="PC" style="width: 340px; max-height: 100%; max-width: initial;" /> |
 | 单元格信息展示 | <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*pu7ESbzNqXkAAAAAAAAAAAAAARQnAQ" alt="PC" style="width: 400px; max-height: 100%; max-width: initial;"/>  | <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*gv-BQaGJTjEAAAAAAAAAAAAAARQnAQ" alt="PC"  style="width:340px; max-height: 100%; max-width: initial;"/>      |
 | 指标信息展示   | <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*MvUtT7j0BggAAAAAAAAAAAAAARQnAQ" alt="PC" style="width: 400px; max-height: 100%; max-width: initial;" /> | <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*rF4USJO5nAkAAAAAAAAAAAAAARQnAQ" alt="PC" style="width:340px; max-height: 100%; max-width: initial;" />      |
diff --git a/s2-site/docs/manual/basic/analysis/pagination.en.md b/s2-site/docs/manual/advanced/analysis/pagination.en.md
similarity index 100%
rename from s2-site/docs/manual/basic/analysis/pagination.en.md
rename to s2-site/docs/manual/advanced/analysis/pagination.en.md
diff --git a/s2-site/docs/manual/advanced/analysis/pagination.zh.md b/s2-site/docs/manual/advanced/analysis/pagination.zh.md
new file mode 100644
index 0000000000..8fb53a6ca3
--- /dev/null
+++ b/s2-site/docs/manual/advanced/analysis/pagination.zh.md
@@ -0,0 +1,93 @@
+---
+title: 分页
+order: 11
+---
+
+<Badge>@antv/s2-react</Badge> <Badge type="success">@antv/s2-vue</Badge>
+
+S2 内置了前端分页渲染的能力，点击下一页滚动到对应行。
+
+:::warning{title="注意"}
+
+如果基于 `@antv/s2-core` 开发，需要**自行引入**或**实现分页组件**，`core` 层仅提供分页能力，参考以下示例
+
+* [React](https://github.com/antvis/S2/blob/next/packages/s2-react/src/components/pagination/index.tsx)
+* [Vue 3.0](https://github.com/antvis/S2/blob/next/packages/s2-vue/src/components/pagination/index.vue)
+
+如果基于 [`@antv/s2-react`](#react-版本) 或 [`@antv/s2-vue`](#vue-30-版本) 开发，则只需配置分页相关配置项即可开箱即用。
+
+:::
+
+## 快速上手
+
+首先需要在 `s2Options` 中配置 `pagination` 属性
+
+```ts | {4-7}
+const s2Options = {
+  width: 600,
+  height: 480,
+  pagination: {
+    pageSize: 4,
+    current: 1,
+  },
+};
+```
+
+<img src="https://gw.alipayobjects.com/zos/antfincdn/LVw2QOvjgW/b1563a7b-4070-4d61-a18b-6558e2c5b27b.png" width="600"  alt="preview" />
+
+### React 版本
+
+:::info{title="提示"}
+
+`@antv/s2-react` 使用的是 [Ant Design](https://ant.design/components/pagination-cn/) Pagination 分页组件，支持 [透传 API](https://ant.design/components/pagination-cn/#API), 需要修改样式直接通过 CSS 覆盖即可。
+
+:::
+
+```tsx
+import { SheetComponent } from '@antv/s2-react'
+
+const s2Options = {
+  // https://ant.design/components/pagination-cn/#API
+  pagination: {}
+}
+
+<SheetComponent options={s2Options} />
+```
+
+<Playground path='react-component/pagination/demo/pivot.tsx' rid='container'></playground>
+
+### Vue 3.0 版本
+
+:::info{title="提示"}
+
+`@antv/s2-vue` 使用的是 [Ant Design Vue](https://antdv.com/components/pagination) 分页组件，支持 [透传 API](https://antdv.com/components/pagination#API), 需要修改样式直接通过 CSS 覆盖即可。
+
+:::
+
+```tsx
+import { SheetComponent } from '@antv/s2-vue'
+
+const s2Options = {
+  // https://antdv.com/components/pagination#API
+  pagination: {}
+}
+
+<SheetComponent :options={s2Options} />
+
+```
+
+[Demo 地址](https://codesandbox.io/embed/nice-dijkstra-hzycy6?fontsize=14&hidenavigation=1&theme=dark)
+
+## API
+
+<embed src="@/docs/common/pagination.zh.md"></embed>
+
+### SpreadsheetProps
+
+```tsx
+<SheetComponent showPagination />
+```
+
+| 参数 | 说明 | 类型 | 默认值 | 必选 |
+|-----|-----|-----|-----|-----|
+|  showPagination   |   是否显示默认分页<br>（只有在 `options` 配置过 `pagination` 属性才会生效）   |  `boolean`   |   `{ <br>onShowSizeChange?: (pageSize: number) => void,<br>onChange?: (current: number) => void <br>}` | `false`  |
diff --git a/s2-site/docs/manual/basic/analysis/strategy.en.md b/s2-site/docs/manual/advanced/analysis/strategy.en.md
similarity index 100%
rename from s2-site/docs/manual/basic/analysis/strategy.en.md
rename to s2-site/docs/manual/advanced/analysis/strategy.en.md
diff --git a/s2-site/docs/manual/basic/analysis/strategy.zh.md b/s2-site/docs/manual/advanced/analysis/strategy.zh.md
similarity index 73%
rename from s2-site/docs/manual/basic/analysis/strategy.zh.md
rename to s2-site/docs/manual/advanced/analysis/strategy.zh.md
index 691f4b4037..3ad7cff4f5 100644
--- a/s2-site/docs/manual/basic/analysis/strategy.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/strategy.zh.md
@@ -3,19 +3,23 @@ title: 趋势分析表组件
 order: 9
 ---
 
+<Badge>@antv/s2-react</Badge>
+
 为了满足更多的分析场景，S2 提供开箱即用的场景表组件 —— 趋势分析表。借助它，你可以非常方便的实现单元格内展示多指标的场景表格。
 
+如图所示，该类表格的表形态特点在于可以在**同一个数据单元格**和**列头单元格内**展示多个指标数据，用于需要**关注时间趋势下的数据指标**，**查看同环比**等场景。行头可以 [自定义层级结构](/docs/manual/advanced/custom/custom-tree)。因此有此类分析需求时，可以直接使用该组件。
+
 <img src="https://gw.alipayobjects.com/zos/antfincdn/detasbG55j/5f1c0072-0761-463c-ac44-2fe7b300d041.png" width="600"  alt="preview" />
 
-如图所示，该类表格的表形态特点在于可以在**同一个数据单元格**和**列头单元格内**展示多个指标数据，用于需要**关注时间趋势下的数据指标**，**查看同环比**等场景。行头可以 [自定义层级结构](/zh/docs/manual/advanced/custom/custom-tree)。因此有此类分析需求时，可以直接使用该组件。
+:::warning{title="注意"}
 
-## 前提
+**趋势分析表组件**使用了 S2 提供的各种能力进行融合，所以建议在阅读本章前，请确保你已经阅读过以下章节：
 
-趋势分析表组件使用了 S2 提供的各种能力进行融合，所以建议在阅读本章前，请确保你已经阅读过以下章节：
+- [基本概念](/docs/manual/basic/base-concept)
+- [字段标记](/docs/manual/basic/conditions/)
+- [自定义行列头](/docs/manual/advanced/custom/custom-tree)
 
-- [基本概念](/zh/docs/manual/basic/base-concept)
-- [字段标记](/zh/docs/manual/basic/conditions/)
-- [自定义行列头](/zh/docs/manual/advanced/custom/custom-tree)
+:::
 
 ## 快速上手
 
@@ -87,13 +91,13 @@ const App = () => {
 }
 ```
 
-<Playground path='react-component/sheet/demo/strategy.tsx' rid='container'></playground>
+<Playground path='react-component/sheet/demo/strategy.tsx' rid='strategy'></playground>
 
 ## 配置解释
 
 ### S2DataConfig 配置
 
-- 数据源：[MultiData](/zh/docs/api/general/S2DataConfig#multidata) 配置项，一个单元格对应多条数据，分为原始数据和格式化数据
+#### 1. 数据源：[MultiData](/zh/docs/api/general/S2DataConfig#multidata) 配置项，一个单元格对应多条数据，分为原始数据和格式化数据
 
 ```ts
 const data = {
@@ -104,7 +108,7 @@ const data = {
 }
 ```
 
-- 行头层级结构：[自定义层级结构](/zh/docs/manual/advanced/custom/custom-tree)
+#### 2. 行头层级结构：[自定义层级结构](/zh/docs/manual/advanced/custom/custom-tree)
 
 ```ts
 const fields = {
@@ -118,7 +122,7 @@ const fields = {
 }
 ```
 
-- 虚拟列：趋势分析表存在同环比指标时，会通过虚拟列来显示对应的同环比指标名称，此时，表格会显示两级列头
+#### 3. 虚拟列：趋势分析表存在同环比指标时，会通过虚拟列来显示对应的同环比指标名称，此时，表格会显示两级列头
 
 ```ts
 import { EXTRA_COLUMN_FIELD } from '@antv/s2'
@@ -130,7 +134,9 @@ const fields = {
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/SsDx1wGE%24/119a04f5-daac-43ca-9773-c8a66547280c.png" width="600"  alt="preview" />
 
-虚拟例和普通字段一样，可以自定义格式化
+:::info{title="提示"}
+虚拟例和普通字段一样，可以 [自定义格式化](/manual/basic/formatter)
+:::
 
 ```ts
 const s2DataConfig = {
@@ -153,44 +159,56 @@ const s2DataConfig = {
 };
 ```
 
-**⚠️ 注意项：**
+:::warning{title="注意"}
 
 - 如果不涉及到原始数据复制导出类需求，可不声明 `originalValues`
 - 当只有单指标，（即没有同环比） 时，可不配置虚拟列 (`EXTRA_COLUMN_FIELD`)
 - 列头指标顺序和单元格指标展示顺序一一对应
 
+:::
+
 ### S2Options 配置
 
-- 趋势分析表会将行头布局强制置为树状模式，即 `hierarchyType: 'tree'`
-- 可通过 `options.cornerText` 自定义角头文本
+:::info{title="提示"}
+
+- 趋势分析表会将行头布局强制置为**树状模式**，并且数值置于行头，即 `hierarchyType: 'tree'`.
+- 可通过 `s2Options.cornerText` 自定义角头文本。
 - 染色逻辑配置可以在  `options.conditions` 中配置，不需要指定 `field` 参数，用法参考 [字段标记](/zh/docs/manual/basic/conditions) 目前暂时只支持文本颜色通道
 
+:::
+
 <embed src="@/docs/common/custom/customTreeNode.zh.md"></embed>
 
 ## Tooltip
 
-趋势分析表的 `Tooltip`, 使用 `S2` 提供的 [自定义能力](/docs/manual/basic/tooltip#%E8%87%AA%E5%AE%9A%E4%B9%89-tooltip-%E5%86%85%E5%AE%B9) 分别对 `行头 (row)`, `列头 (col)`, `数值 (data)` 进行了 [定制](https://github.com/antvis/S2/blob/f35ff01400384cd2f3d84705e9daf75fc11b0149/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx#L105), 同时可以在 `@antv/s2-react` 包中进行单独引入
+:::info{title="提示"}
+
+趋势分析表的 `Tooltip`, 使用 `S2` 提供的 [自定义能力](/docs/manual/basic/tooltip#%E8%87%AA%E5%AE%9A%E4%B9%89-tooltip-%E5%86%85%E5%AE%B9) 分别对 `行头 (rowCell)`, `列头 (colCell)`, `数值 (dataCell)` 进行了 [定制](https://github.com/antvis/S2/blob/f35ff01400384cd2f3d84705e9daf75fc11b0149/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx#L105).
+
+:::
 
 | 配置项名称 | 说明     | 类型   | 默认值 | 必选 |
 | ------------- | ----------------- | --------- | ----- | --- |
 | cell           | 当前单元格 | `S2CellType`   |  ✓   |
 | defaultTooltipShowOptions | 默认 tooltip 展示配置 | `TooltipShowOptions<ReactNode>`  |  |      |
-| label        | 标题    | `ReactNode | (cell: S2CellType, defaultLabel: ReactNode) => ReactNode` |    |      |
+| label        | 标题    | `ReactNode \| (cell: S2CellType, defaultLabel: ReactNode) => ReactNode` |    |      |
 | showOriginalValue      | 是否显示原始数值 （如有）      | `boolean` | `false`   |      |
 
+也可以从 `@antv/s2-react` 包中引入单独使用，可以根据你自己的业务进行二次封装。
+
 ```tsx
 import { StrategySheetRowTooltip, StrategySheetColTooltip, StrategySheetDataTooltip } from '@antv/s2-react'
 
 const s2Options = {
   tooltip: {
-    content: (cell) => <StrategySheetDataTooltip cell={cell} label={label}/>
+    content: (cell) => <StrategySheetDataTooltip cell={cell} label={label} />
   }
 }
 ```
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MCgZSZyEm/df084a59-407c-4a69-bc93-1f12eb01b019.png" width="600"  alt="preview" />
 
-### 自定义标题
+### 1. 自定义标题
 
 默认使用行头节点名字作为 Tooltip 标题，可通过 `label` 自定义内容的方式
 
@@ -204,7 +222,7 @@ const s2Options = {
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/dosQkhLBp/fbe5a635-60ad-4e55-9a23-858842b977ac.png" width="600"  alt="preview" />
 
-### 显示原始数据
+### 2. 显示原始数据
 
 开启 `showOriginalValue` 后，会读取当前 Tooltip 对应的 `originalValues` 数据（如有）, 将原始数据一同展示，即 `展示值（原始值）`
 
@@ -214,7 +232,7 @@ const s2Options = {
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/xe57%261A5E/9e0ae256-7823-498c-8d88-740ff30bff5a.png" width="600"  alt="preview" />
 
-### 渲染同环比额外节点
+### 3. 渲染同环比额外节点
 
 可以通过 `renderDerivedValue` 在自定义同环比数值，比如替换成原始值
 
@@ -233,12 +251,12 @@ const s2Options = {
 
 ## 配置 mini 图
 
-在指标趋势分析场景下，通常我们希望看到数据的全局走势。走势分析不仅需要包含具体的涨跌，最好还能展示出固定时间段内的趋势图，或者指标的完成情况（进度），所以我们在表格里提供了 mini 图的绘制。为了减少对外部组件库的依赖，我们内置了一个十分轻量的，基于 `@antv/g` 绘制的 mini 图库，以极小的性能开销在单元格内绘制出子弹图、折线图及柱状图。
+在指标趋势分析场景下，通常我们希望看到数据的全局走势。走势分析不仅需要包含具体的涨跌，最好还能展示出固定时间段内的趋势图，或者指标的完成情况（进度），所以我们在表格里提供了 mini 图的绘制。为了减少对外部组件库的依赖，我们内置了一个十分轻量的，基于 `@antv/g` 绘制的 mini 图库，以极小的性能开销在单元格内绘制出`子弹图`、`折线图`以及`柱状图`, 具体请查看 [单元格内绘制图表](/manual/advanced/custom/custom-chart) 章节。
 
-<Playground path='react-component/sheet/demo/strategy-mini-chart.tsx' rid='container2'></playground>
+<Playground path='react-component/sheet/demo/strategy-mini-chart.tsx' rid='strategy-mini-chart'></playground>
 
-配置如下：
+如果想要更换 mini 图样式配置，可以参考 [主题配置]('/api/general/s2theme#minicharttheme')
 
-<embed src="@/docs/common/mini-chart.zh.md"></embed>
+### API
 
-如果想要更换 Mini 图样式配置，可以参考 [主题配置]('/zh/api/general/s2theme#minicharttheme')
+<embed src="@/docs/common/mini-chart.zh.md"></embed>
diff --git a/s2-site/docs/manual/basic/analysis/switcher.en.md b/s2-site/docs/manual/advanced/analysis/switcher.en.md
similarity index 100%
rename from s2-site/docs/manual/basic/analysis/switcher.en.md
rename to s2-site/docs/manual/advanced/analysis/switcher.en.md
diff --git a/s2-site/docs/manual/basic/analysis/switcher.zh.md b/s2-site/docs/manual/advanced/analysis/switcher.zh.md
similarity index 70%
rename from s2-site/docs/manual/basic/analysis/switcher.zh.md
rename to s2-site/docs/manual/advanced/analysis/switcher.zh.md
index aeb3bf3172..1bf6f1f477 100644
--- a/s2-site/docs/manual/basic/analysis/switcher.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/switcher.zh.md
@@ -3,7 +3,9 @@ title: 维度切换组件
 order: 10
 ---
 
-S2 提供开箱即用的维度切换组件 `Switcher` 。借助它，你可以非常方便的实现交互式行列切换，以及维度隐藏的功能。
+<Badge>@antv/s2-react</Badge>
+
+S2 提供开箱即用的维度切换组件 `<Switcher/>`, 借助它，你可以非常方便的实现交互式行列切换，以及维度隐藏的功能。
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/fyf455mio/2021-09-29%25252015.08.03.gif" height="400" alt="preview" />
 
@@ -46,17 +48,20 @@ const App = () => {
 }
 ```
 
-<Playground path='react-component/switcher/demo/pure-switcher.tsx' rid='container'></playground>
+<Playground path='react-component/switcher/demo/pure-switcher.tsx' rid='pure-switcher'></playground>
 
 ## 配置解释
 
 ### 维度配置
 
-Switcher 可接收三种类型的维度配置，分别是 `rows`，`columns` 和 `values`。它们的类型皆为 [SwitcherField](/docs/api/components/switcher#switcherfield)。
+:::info{title="提示"}
+Switcher 可接收三种类型的维度配置，分别是 `rows`，`columns` 和 `values`, 它们的类型皆为 [SwitcherField](/docs/api/components/switcher#switcherfield)。
+
+其中 `rows` 和 `columns` 两个维度可以相互拖拽到彼此的配置框中，而 `values` 只能在自己的配置框中更改字段顺序。
 
-> 其中 `rows` 和 `columns` 两个维度可以相互拖拽到彼此的配置框中，而 `values` 只能在自己的配置框中更改字段顺序。
+:::
 
-通过传入`sheetType`以及维度配置，Switcher 的展示形态也会有所不同：
+通过传入 `sheetType` 以及维度配置，`Switcher` 的展示形态也会有所不同：
 
 <table style="width: 100%; outline: none; border-collapse: collapse;">
   <colgroup>
@@ -66,7 +71,7 @@ Switcher 可接收三种类型的维度配置，分别是 `rows`，`columns` 和
   <tbody>
     <tr>
       <td style="text-align: center;">
-      一种维度（主要用于明细表）
+        一种维度（主要用于明细表）
       </td>
       <td style="text-align: center;">
         三种维度（主要用于透视表）
@@ -74,15 +79,17 @@ Switcher 可接收三种类型的维度配置，分别是 `rows`，`columns` 和
     </tr>
     <tr>
       <td style="text-align: center;">
-       <img height="400" alt="one-dimension" style="max-height: unset;" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*a0uHRZ70hDcAAAAAAAAAAAAAARQnAQ">
+        <img height="400" alt="one-dimension" style="max-height: unset;" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*a0uHRZ70hDcAAAAAAAAAAAAAARQnAQ" />
       </td>
       <td style="text-align: center;">
-        <img height="400" alt="three-dimensions" style="max-height: unset;" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*FTYGTLw7e5wAAAAAAAAAAAAAARQnAQ">
+        <img height="400" alt="three-dimensions" style="max-height: unset;" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*FTYGTLw7e5wAAAAAAAAAAAAAARQnAQ" />
       </td>
     </tr>
   </tbody>
 </table>
 
+#### 可选中
+
 * 每个维度默认只能进行**拖拽排序**, 如果你希望能控制其字段的**显隐**，可以设置 `selectable: true`, 该属性用于开启字段的 `checkbox` :
 
 ```js
@@ -94,6 +101,8 @@ const field = {
 };
 ```
 
+#### 展开子项
+
 * 如果维度中的每一个字段项还存在关联子项，可以设置 `expandable:true`, 该属性用于控制子项是否被展开，也可以进一步设置 `expandText` 定制展开 `checkbox` 的提示文字：
 
 ```js
@@ -106,6 +115,8 @@ const field = {
 };
 ```
 
+#### 允许为空
+
 * 如果当前维度在移动交互中需要至少保留一个子项不能被拖拽出去，可以设置 `allowEmpty:false`, 该属性用于控制维度是否可以将全部子项拖出到其他维度：
 
 ```js
@@ -121,15 +132,17 @@ const field = {
 
 ### 提交修改
 
- `Switcher` 组件在弹窗关闭后会触发 `onSubmit` 回调，且此回调会接收一个 [SwitcherResult](/docs/api/components/switcher#switcherresult) 类型的参数，你可以通过该回调拿到修改后的结果。
+`Switcher` 组件在弹窗关闭后会触发 `onSubmit` 回调，且此回调会接收一个 [SwitcherResult](/docs/api/components/switcher#switcherresult) 类型的参数，你可以通过该回调拿到修改后的结果。
 
-所有结果会**按维度**分组，并且每一组字段会**扁平化后**按按顺序排序。
+所有结果会**按维度**分组，并且每一组字段会**扁平化后**按按顺序排序，你可以通过以下示例查看详细的结果数据类型。
 
-你可以通过以下示例查看详细的结果数据类型：
+<Playground path='react-component/switcher/demo/pivot.tsx' rid='result'></playground>
 
-<Playground path='analysis/switcher/demo/pivot.tsx' rid='result'></playground>
+:::warning{title="注意"}
 
-❗️注意：出于减少内部状态过时的考虑，`Switcher` 组件内部并**不会持久化操作后状态**。也就是说在每次弹窗关闭后，Switcher 内部状态会清空，再次打开时任然以 `Props` 中的各个维度配置为准。
+出于减少内部状态过时的考虑，`Switcher` 组件内部**并不会持久化操作后状态**。也就是说在每次弹窗关闭后，`Switcher` 内部状态会清空，再次打开时还是以组件 `props` 中的各个维度配置为准。
+
+:::
 
 ### 定制化
 
@@ -150,16 +163,24 @@ const field = {
 
 ### 结合透视表使用
 
+:::info{title="提示"}
+
 * 行列值可以相互移动
 * 指标值可以控制显隐
 
+:::
+
 <Playground path='react-component/switcher/demo/pivot-with-children.tsx' rid='pivot'></playground>
 
 ### 结合明细表使用
 
+:::info{title="提示"}
+
 * 列头可以控制显隐
 * 表格列头对应出现展开图标
 
+:::
+
 <Playground path='react-component/switcher/demo/table.tsx' rid='table'></playground>
 
 ​📊 查看更多 [维度切换示例](/examples/react-component/switcher#pure-switcher)。
diff --git a/s2-site/docs/manual/basic/analysis/vue.en.md b/s2-site/docs/manual/advanced/analysis/vue.en.md
similarity index 100%
rename from s2-site/docs/manual/basic/analysis/vue.en.md
rename to s2-site/docs/manual/advanced/analysis/vue.en.md
diff --git a/s2-site/docs/manual/basic/analysis/vue.zh.md b/s2-site/docs/manual/advanced/analysis/vue.zh.md
similarity index 98%
rename from s2-site/docs/manual/basic/analysis/vue.zh.md
rename to s2-site/docs/manual/advanced/analysis/vue.zh.md
index 9d2b97915b..4a1bb31a9d 100644
--- a/s2-site/docs/manual/basic/analysis/vue.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/vue.zh.md
@@ -3,6 +3,8 @@ title: Vue 3.0 组件
 order: 13
 ---
 
+<Badge type="success">@antv/s2-vue</Badge>
+
 ## 基础表组件
 
 ### 透视表
diff --git a/s2-site/docs/manual/advanced/custom/cell-size.zh.md b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
index 4e9fd6dbe1..b87326f916 100644
--- a/s2-site/docs/manual/advanced/custom/cell-size.zh.md
+++ b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
@@ -53,7 +53,9 @@ const s2Options = {
 
 ## 调整行头单元格宽高
 
+:::warning{title="注意"}
 行头单元格高度调整**作用于叶子节点** （非叶子节点的高度是所有子节点高度度总和）, 且高度始终和 **数值单元格** 高度一致。
+:::
 
 ```ts
 const s2Options = {
@@ -85,17 +87,17 @@ const s2Options = {
 }
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/YKhvdW8Xs/eb290abb-7cf0-44a2-bb79-66334d1f5438.png" alt="preview" width="600"/>
 
-<br/>
+:::info{title="提示"}
 
 如果想给特定某一行/列设置不同的宽高，可以通过 `rowCell` 的 `widthByField` 和 `heightByField` 预设高度来实现，支持两种类型的配置：
 
 - **fieldId** （例：`root[&]浙江省[&]杭州市`):  行列交叉后每一个行头节点对应的唯一 ID, 适用于宽高精确到具体的单元格 [（如何获取 ID）](/docs/manual/advanced/get-cell-data#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%8C%BA%E5%9F%9F%E5%8D%95%E5%85%83%E6%A0%BC)
 - **field** （例：`city`): 对应 `s2DataConfig.fields.rows` 中配置的 `field`, 适用于精确到某一类维值的单元格
 
+:::
+
 <br/>
 
 ```ts
@@ -114,13 +116,13 @@ const s2Options = {
 }
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/oaGLPvya5/bf8b9dfe-1873-4567-9c4b-400632cebbe3.png" alt="preview" width="600"/>
 
-<br/>
+:::info{title="提示"}
+
+明细表有一点特殊，由于只有列头，如果想给**特定行**设置不同的高度，则可以根据行序号调整
 
-明细表有一点特殊，由于只有列头，如果想给特定行设置不同的高度，则可以根据行序号调整
+:::
 
 ```ts
 const s2Options = {
@@ -157,7 +159,9 @@ const s2Options = {
 
 ## 调整列头单元格宽高
 
+:::warning{title="注意"}
 列头单元格宽度调整**作用于叶子节点** （非叶子节点的宽度是所有子节点宽度总和）, 且**宽度**始终和 **数值单元格** 宽度一致
+:::
 
 ```ts
 const s2Options = {
@@ -195,11 +199,15 @@ const s2Options = {
 }
 ```
 
+:::info{title="提示"}
+
 如果想给特定某一列设置不同的宽高，可以通过 `colCell` 的 `widthByField` 和 `heightByField` 预设宽高来实现，支持两种类型的配置：
 
 - **fieldId** （例：`root[&]家具[&]沙发[&]number`):  行列交叉后每一个列头节点对应的唯一 ID, 适用于宽高精确到具体的单元格 [（如何获取 ID）](/docs/manual/advanced/get-cell-data#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%8C%BA%E5%9F%9F%E5%8D%95%E5%85%83%E6%A0%BC)
 - **field** （例：`city`): 对应 `s2DataConfig.fields.columns` 中配置的 `field`, 适用于精确到某一类维值的单元格
 
+:::
+
 ```ts
 import { EXTRA_FIELD } from '@antv/s2'
 
@@ -219,12 +227,8 @@ const s2Options = {
 }
 ```
 
-<br/>
-
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lcRNQpDF2eMAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="600"/>
 
-<br/>
-
 ## 隐藏列头
 
 还可以将高度设置为 `0`, 从而实现**隐藏列头**的效果，[查看例子](/examples/layout/custom#hide-columns)
@@ -239,8 +243,6 @@ const s2Options = {
 }
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/VKHZ7SqIL/7371cfc3-b8e9-4f0b-a9c5-a9689aa0053a.png" alt="preview" width="600"/>
 
 ## API 文档
diff --git a/s2-site/docs/manual/advanced/custom/custom-chart.zh.md b/s2-site/docs/manual/advanced/custom/custom-chart.zh.md
index bd03132c42..83bd5779eb 100644
--- a/s2-site/docs/manual/advanced/custom/custom-chart.zh.md
+++ b/s2-site/docs/manual/advanced/custom/custom-chart.zh.md
@@ -172,13 +172,14 @@ const s2DataConfig = {
 import { DataCell, drawObjectText } from '@antv/s2';
 
 class CustomDataCell extends DataCell {
-  // 当数值为对象时，完全接管绘制，使用内置的 `drawObjectText` 根据不同的数据结构 （见下方） 绘制不同的图形
   drawTextShape() {
+    // 当数值为对象时，完全接管绘制，使用内置的 `drawObjectText` 根据不同的数据结构 （见下方） 绘制不同的图形
     if (this.isMultiData()) {
       drawObjectText(this);
       return;
     }
 
+    // 如果是普通文本，则走默认的文本绘制逻辑
     super.drawTextShape();
   }
 }
@@ -202,7 +203,7 @@ S2 内置了一些基于 [`AntV/G`](https://g.antv.antgroup.com/) 简单的图
 - `bar`: 柱状图
 - `bullet`: 子弹图
 
-```ts
+```json
 {
   number: {
     values: {
@@ -215,7 +216,7 @@ S2 内置了一些基于 [`AntV/G`](https://g.antv.antgroup.com/) 简单的图
 
 - `多列文本`
 
-```ts
+```json
 {
   number: {
   values: [
diff --git a/s2-site/docs/manual/advanced/custom/hook.zh.md b/s2-site/docs/manual/advanced/custom/hook.zh.md
index a395b2e60c..1dcb0be07c 100644
--- a/s2-site/docs/manual/advanced/custom/hook.zh.md
+++ b/s2-site/docs/manual/advanced/custom/hook.zh.md
@@ -31,19 +31,23 @@ order: 1
 
 ## dataCell
 
-改变数据单元格的默认实现，需要继承自 [dataCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#data-cell)
+改变数据单元格的默认实现，需要继承自 [dataCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#data-cell)
 
 ## rowCell
 
-改变行头单元格的默认实现，需要继承自 [rowCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/row-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#row-cell)
+改变行头单元格的默认实现，需要继承自 [rowCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#row-cell)
 
 ## colCell
 
-改变列头单元格的默认实现，需要继承自 [colCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/col-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#col-cell)
+改变列头单元格的默认实现，需要继承自 [colCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#col-cell)
 
 ## cornerCell
 
-改变角头单元格的默认实现，需要继承自 [cornerCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/corner-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#corner-cell)
+改变角头单元格的默认实现，需要继承自 [cornerCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/corner-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#corner-cell)
+
+## seriesNumberCell
+
+改变序号单元格的默认实现，需要继承自 [seriesNumberCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/series-number-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#series-number-cell)
 
 ## cornerHeader
 
diff --git a/s2-site/docs/manual/advanced/hd-adapter.zh.md b/s2-site/docs/manual/advanced/hd-adapter.zh.md
index b511244c69..dee765b384 100644
--- a/s2-site/docs/manual/advanced/hd-adapter.zh.md
+++ b/s2-site/docs/manual/advanced/hd-adapter.zh.md
@@ -100,7 +100,7 @@ const renderByZoomScale = debounce((e) => {
 
 ## 自定义设备像素比
 
-表格默认使用设备当前像素比渲染，也就是 `window.devicePixelRatio`, 如果你觉得初始渲染就很模糊，可以手动指定表格按照 2 倍设备像素比来渲染
+表格默认使用设备当前像素比渲染，也就是 `window.devicePixelRatio`, 如果你觉得初始渲染就很模糊，可以手动指定表格按照 2 倍设备像素比来渲染，通过 `transformCanvasConfig` 透传给底层的 [G 绘制引擎](/manual/advanced/g-plugins)
 
 ```ts
 const s2Options = {
diff --git a/s2-site/docs/manual/advanced/interaction/basic.zh.md b/s2-site/docs/manual/advanced/interaction/basic.zh.md
index 8ab17de892..583e30cb9b 100644
--- a/s2-site/docs/manual/advanced/interaction/basic.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/basic.zh.md
@@ -423,6 +423,10 @@ const s2Options = {
 
 查看 [详情](/docs/manual/advanced/interaction/scroll)
 
+### 复制
+
+查看 [详情](/docs/manual/advanced/interaction/copy)
+
 ### 重置交互
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/pTs1QZPz4/Kapture%2525202022-04-19%252520at%25252019.24.56.gif" alt="preview" width="600" />
diff --git a/s2-site/docs/manual/advanced/interaction/copy.en.md b/s2-site/docs/manual/advanced/interaction/copy.en.md
new file mode 100644
index 0000000000..0af7b708f2
--- /dev/null
+++ b/s2-site/docs/manual/advanced/interaction/copy.en.md
@@ -0,0 +1,4 @@
+---
+title: Copy
+order: 7
+---
diff --git a/s2-site/docs/manual/advanced/interaction/copy.zh.md b/s2-site/docs/manual/advanced/interaction/copy.zh.md
new file mode 100644
index 0000000000..735679a466
--- /dev/null
+++ b/s2-site/docs/manual/advanced/interaction/copy.zh.md
@@ -0,0 +1,6 @@
+---
+title: 复制
+order: 7
+---
+
+<embed src="@/docs/common/copy-export.zh.md"></embed>
diff --git a/s2-site/docs/manual/advanced/interaction/scroll.zh.md b/s2-site/docs/manual/advanced/interaction/scroll.zh.md
index 7719544a92..10e0210ca9 100644
--- a/s2-site/docs/manual/advanced/interaction/scroll.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/scroll.zh.md
@@ -3,7 +3,7 @@ title: 滚动
 order: 6
 ---
 
-#### 虚拟滚动
+## 虚拟滚动
 
 S2 基于 `Canvas` 渲染，也实现了虚拟滚动，即只渲染可视区域内的单元格，默认开启。[查看更多](https://www.yuque.com/antv/vo4vyz/srtq5q#mI1n7)
 
@@ -11,7 +11,7 @@ S2 基于 `Canvas` 渲染，也实现了虚拟滚动，即只渲染可视区域
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/3l%26fv9SHB/Kapture%2525202022-06-06%252520at%25252010.55.24.gif" alt="preview" width="600" />
 
-#### 自定义滚动速度
+## 自定义滚动速度
 
 可配置 `scrollSpeedRatio` 控制滚动速率，分为 `水平` 和 `垂直` 两个方向，范围为 `0-1`, 默认为 `1`。 [查看具体例子](/examples/interaction/advanced#scroll-speed-ratio)
 
@@ -26,11 +26,11 @@ const s2Options = {
 };
 ```
 
-#### 鼠标滚轮水平滚动
+## 鼠标滚轮水平滚动
 
 滑动滚轮垂直滚动，如果同时按住 `Shift` 即可水平滚动
 
-#### 修改滚动至边界行为
+## 修改滚动至边界行为
 
 对于自身和父容器都存在滚动条时，浏览器默认的滚动行为是：非边界不触发父容器滚动，到达边界后，触发父容器滚动，同时还可以配置 [overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) 改变默认行为。
 
@@ -40,7 +40,7 @@ S2 是虚拟滚动，但是也**模拟**了浏览器的滚动行为，可配置
 const s2Options = {
   interaction: {
     overscrollBehavior: 'auto' // 'auto' | 'none' | 'contain';
-    overscrollBehavior: null  // 设为 null 则不做任何处理
+    // overscrollBehavior: null  // 设为 null 则不做任何处理
   },
 };
 ```
@@ -65,7 +65,7 @@ const s2Options = {
 
 <br/>
 
-#### 监听滚动事件
+## 监听滚动事件
 
 对于 `透视表`, 可滚动的区域分别是 `行头单元格` 和 `数值单元格`, 对于 `明细表`, 可滚动的区域只有 `数值单元格`, 可分别监听，也可以统一监听
 
@@ -92,9 +92,15 @@ s2.on(S2Event.ROW_CELL_SCROLL, (position) => {
 })
 ```
 
-#### 手动触发表格滚动
+## 获取滚动状态
+
+查看相关 [API](/api/basic-class/base-facet)
+
+## 手动触发表格滚动
 
 参考以下例子：
 
 - [滚动至指定单元格](/examples/interaction/advanced/#scroll-to-cell)
 - [循环滚动](/examples/interaction/advanced#scroll-loop)
+
+<Playground path='interaction/advanced/demo/scroll-to-cell.ts' rid='scroll-to-cell' height='400'></playground>
diff --git a/s2-site/docs/manual/basic/analysis/copy-export.zh.md b/s2-site/docs/manual/basic/analysis/copy-export.zh.md
deleted file mode 100644
index 89baf8636a..0000000000
--- a/s2-site/docs/manual/basic/analysis/copy-export.zh.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: 复制和导出
-order: 11
----
-
-## 简介
-
-复制与导出的内容都可以直接放入 Excel 中进行展示，S2 已经完成了格式上的兼容。
-
-### 复制
-
-此功能可快速将表格内容复制到剪切板
-`@antv/s2` 核心层提供了基础的复制功能，可配置 `enableCopy` 开启
-
-#### 全量复制
-
-S2 的导出组件，分别提供了原始数据的复制和格式化后数据的复制。
-
-- 原始数据全量复制
-
-<img alt="originFullCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*pfSsTrvuJ0UAAAAAAAAAAAAAARQnAQ" width="600">
-
-- 格式化数据全量复制
-
-<img alt="formatFullCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*mLSdTrAWZrwAAAAAAAAAAAAAARQnAQ" width="600">
-
-#### 局部复制
-
-使用快捷键 `Command/Ctrl + C` 即可复制选中区域（局部复制）
-
-```ts
-const s2Options = {
-  interaction: {
-    // 是否开启复制
-    enableCopy: true,
-    // 圈选复制前，需要开启圈选功能
-    brushSelection: {
-      dataCell: true, // 默认开启
-      rowCell: true,
-      colCell: true,
-    }
-  }
-};
-```
-
-- 复制到 Excel
-
-<img alt="excelCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*LzTYTpFosccAAAAAAAAAAAAAARQnAQ" width="600">
-
-- 复制带 HTML 格式
-
-<img alt="HTMLCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DuHCSbpv_XkAAAAAAAAAAAAAARQnAQ" width="600">
-
-- 复制行头内容
-
-<img alt="CopyCol" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*_NukQpysLC8AAAAAAAAAAAAAARQnAQ" width="600">
-
-- 复制列头内容
-
-<img alt="CopyRow" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ncuAQaL4AvAAAAAAAAAAAAAAARQnAQ" width="600">
-
-- 带表头复制
-**copyWithHeader**: 复制数据是否带表头信息，默认为 `false`
-
-```ts
-const s2Options = {
-  interaction: {
-    enableCopy: true,
-    copyWithHeader: true,
-  }
-};
-```
-
-<img alt="copyWithHeader" src="https://gw.alipayobjects.com/zos/antfincdn/wSBjSYKSM/3eee7bc2-7f8e-4dd9-8836-52a978d9718a.png" width="600">
-
-### 导出
-
-`@antv/s2-react` 组件层提供了导出功能
-
-```tsx
-import { SheetComponent } from '@antv/s2-react'
-
-<SheetComponent
-  dataCfg={dataCfg}
-  options={options}
-  header={{
-    exportCfg: {
-      open: true
-    }
-  }}
-/>
-```
-
-点击复制或下载按钮，导出全量数据（全量复制）
-
-<video width="600" controls>
-  <source src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/file/A*EZfPRJqzl4cAAAAAAAAAAAAAARQnAQ" type="video/mp4">
-  Your browser does not support HTML video.
-</video>
-
-<embed src="@/docs/common/export.zh.md"></embed>
diff --git a/s2-site/docs/manual/basic/analysis/editable-mode.zh.md b/s2-site/docs/manual/basic/analysis/editable-mode.zh.md
deleted file mode 100644
index 2477f08333..0000000000
--- a/s2-site/docs/manual/basic/analysis/editable-mode.zh.md
+++ /dev/null
@@ -1,176 +0,0 @@
----
-title: 编辑表
-order: 3
----
-
-## 明细表简介
-
-编辑表是 `S2` 明细表的衍生形态之一。在提供完整的明细表的分析功能之外，还支持对数据的修改操作。
-
-<img alt="editable-mode" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*9RoBT5FIJG0AAAAAAAAAAAAAARQnAQ" width="600">
-
-## 使用
-
-```html
-<div id="container"></div>
-```
-
-### React 组件方式
-
-```typescript
-import React from "react";
-import { SheetComponent } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
-
-// 1. 准备数据
-const data = [
-  {
-    "province": "浙江",
-    "city": "杭州",
-    "type": "笔",
-    "price": 1
-  },
-  {
-    "province": "浙江",
-    "city": "杭州",
-    "type": "纸张",
-    "price": 2
-  },
-  {
-    "province": "浙江",
-    "city": "舟山",
-    "type": "笔",
-    "price": 17
-  },
-  {
-    "province": "浙江",
-    "city": "舟山",
-    "type": "纸张",
-    "price": 6
-  },
-  {
-    "province": "吉林",
-    "city": "长春",
-    "type": "笔",
-    "price": 8
-  },
-  {
-    "province": "吉林",
-    "city": "白山",
-    "type": "笔",
-    "price": 12
-  },
-  {
-    "province": "吉林",
-    "city": "长春",
-    "type": "纸张",
-    "price": 3
-  },
-  {
-    "province": "吉林",
-    "city": "白山",
-    "type": "纸张",
-    "price": 25
-  },
-
-  {
-    "province": "浙江",
-    "city": "杭州",
-    "type": "笔",
-    "price": 20
-  },
-  {
-    "province": "浙江",
-    "city": "杭州",
-    "type": "纸张",
-    "price": 10
-  },
-  {
-    "province": "浙江",
-    "city": "舟山",
-    "type": "笔",
-    "price": 15
-  },
-  {
-    "province": "浙江",
-    "city": "舟山",
-    "type": "纸张",
-    "price": 2
-  },
-  {
-    "province": "吉林",
-    "city": "长春",
-    "type": "笔",
-    "price": 15
-  },
-  {
-    "province": "吉林",
-    "city": "白山",
-    "type": "笔",
-    "price": 30
-  },
-  {
-    "province": "吉林",
-    "city": "长春",
-    "type": "纸张",
-    "price": 40
-  },
-  {
-    "province": "吉林",
-    "city": "白山",
-    "type": "纸张",
-    "price": 50
-  }
-];
-
-// 2. 配置数据
-const s2DataCfg = {
-  fields: {
-    columns: ["province", "city", "type", "price"], // 要展示的列头字段 id 列表
-  },
-  meta: [
-    // 列头字段对应的元信息，比如展示的中文名
-    {
-      field: "province",
-      name: "省份",
-    },
-    {
-      field: "city",
-      name: "城市",
-    },
-    {
-      field: "type",
-      name: "类型",
-    },
-    {
-      field: "price",
-      name: "价格",
-    },
-  ],
-  data,
-};
-
-// 3. 添加配置
-const s2Options = {
-  width: 400,
-  height: 200,
-};
-
-// 4, 渲染
-const App = () => {
-  return (
-    <SheetComponent
-      sheetType="editable"
-      dataCfg={s2DataCfg}
-      options={s2Options}
-    />,
-  )
-}
-```
-
-## 特性
-
-效果如图：
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*9RoBT5FIJG0AAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />
-
-[playground 地址](/examples/react-component/sheet#editable)
diff --git a/s2-site/docs/manual/basic/analysis/pagination.zh.md b/s2-site/docs/manual/basic/analysis/pagination.zh.md
deleted file mode 100644
index 091f487aac..0000000000
--- a/s2-site/docs/manual/basic/analysis/pagination.zh.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: 分页
-order: 11
----
-
-## 简介
-
-S2 内置提供了分页能力。本质上是前端分页，点击下一页滚动到对应行。
-
-### 快速上手
-
-首先需要在 `s2Options` 中配置 `pagination` 属性
-
-<embed src="@/docs/common/pagination.zh.md"></embed>
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/LVw2QOvjgW/b1563a7b-4070-4d61-a18b-6558e2c5b27b.png" width="600"  alt="preview" />
-
-如果基于 `@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)
-
-如果基于 `@antv/s2-react` 或  `@antv/s2-vue` 开发，则只需配置分页相关配置项即可开箱即用。
-
-### SpreadsheetProps
-
-```tsx
-<SheetComponent showPagination />
-```
-
-| 参数 | 说明 | 类型 | 默认值 | 必选 |
-|-----|-----|-----|-----|-----|
-|  showPagination   |   是否显示默认分页<br>（只有在 `options` 配置过 `pagination` 属性才会生效）   |  `boolean`   |   `{ <br>onShowSizeChange?: (pageSize: number) => void,<br>onChange?: (current: number) => void <br>}` | `false`  |
-
-### React 版
-
-> 使用的是 [Ant Design](https://ant.design/components/pagination-cn/) Pagination 分页组件，支持 [透传 API](https://ant.design/components/pagination-cn/#API)。需要修改样式直接通过 CSS 覆盖即可。
-
-```tsx
-const s2Options = {
-  // https://ant.design/components/pagination-cn/#API
-  pagination: {}
-}
-
-<SheetComponent options={s2Options} />
-```
-
-<Playground path='react-component/pagination/demo/pivot.tsx' rid='container'></playground>
-
-### Vue 3.0 版
-
-> 使用的是 [Ant Design Vue](https://antdv.com/components/pagination) 分页组件，支持 [透传 API](https://antdv.com/components/pagination#API)。需要修改样式直接通过 CSS 覆盖即可。
-
-```tsx
-const s2Options = {
-  // https://antdv.com/components/pagination#API
-  pagination: {}
-}
-
-<SheetComponent :options={s2Options} />
-
-```
-
-[Demo 地址](https://codesandbox.io/embed/nice-dijkstra-hzycy6?fontsize=14&hidenavigation=1&theme=dark)
diff --git a/s2-site/examples/interaction/advanced/demo/table-link-jump.ts b/s2-site/examples/interaction/advanced/demo/table-link-jump.ts
index ed9ac8a08d..48e3d04bc7 100644
--- a/s2-site/examples/interaction/advanced/demo/table-link-jump.ts
+++ b/s2-site/examples/interaction/advanced/demo/table-link-jump.ts
@@ -1,4 +1,4 @@
-import { S2DataConfig, S2DataConfig, S2Event, TableSheet } from '@antv/s2';
+import { S2DataConfig, S2Event, TableSheet } from '@antv/s2';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())

From 1b185213d47d59278cdbca27f4221cd7d056e8b9 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Wed, 27 Dec 2023 16:56:39 +0800
Subject: [PATCH 07/64] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E6=9A=97?=
 =?UTF-8?q?=E9=BB=91=E4=B8=BB=E9=A2=98=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.en-US.md                               |   2 +-
 README.md                                     |   2 +-
 packages/s2-core/README.en-US.md              |   2 +-
 packages/s2-core/README.md                    |   2 +-
 packages/s2-core/src/theme/index.ts           |   1 -
 s2-site/docs/api/basic-class/base-cell.zh.md  |   2 +-
 .../docs/api/basic-class/base-data-set.zh.md  |   2 +-
 s2-site/docs/api/basic-class/base-facet.zh.md |   2 +-
 .../docs/api/basic-class/base-tooltip.zh.md   |   2 +-
 .../docs/api/basic-class/interaction.zh.md    |   2 +-
 s2-site/docs/api/basic-class/node.zh.md       |   2 +-
 .../docs/api/basic-class/spreadsheet.zh.md    |   4 +-
 s2-site/docs/api/basic-class/store.zh.md      |   2 +-
 s2-site/docs/api/general/S2Event.zh.md        |   2 +-
 s2-site/docs/manual/advanced/adaptive.zh.md   |  17 ++-
 s2-site/docs/manual/advanced/g-plugins.zh.md  |   2 +-
 .../docs/manual/advanced/get-cell-data.zh.md  | 119 +++++++++++++++---
 .../docs/manual/advanced/get-instance.zh.md   |  22 ++--
 s2-site/docs/manual/advanced/hd-adapter.zh.md |   2 +-
 .../manual/advanced/interaction/custom.zh.md  |   2 +-
 s2-site/docs/manual/basic/theme.zh.md         |  89 +++++++++----
 s2-site/docs/manual/basic/tooltip.zh.md       |   6 +-
 s2-site/docs/manual/introduction.zh.md        |   2 +-
 .../custom/custom-cell/demo/col-cell.ts       |   2 +-
 .../custom/custom-cell/demo/corner-cell.ts    |   2 +-
 .../custom/custom-cell/demo/corner-header.ts  |   2 +-
 .../custom-cell/demo/custom-merged-cell.ts    |   2 +-
 .../custom-cell/demo/custom-specified-cell.ts |   4 +-
 .../custom/custom-cell/demo/data-cell.ts      |   2 +-
 .../custom/custom-cell/demo/row-cell.ts       |   2 +-
 .../custom-cell/demo/series-number-cell.ts    |   2 +-
 .../custom/custom-cell/demo/totals-cell.ts    |   2 +-
 s2-site/examples/theme/default/demo/dark.ts   |  50 ++++++++
 s2-site/examples/theme/default/demo/meta.json |   8 ++
 34 files changed, 283 insertions(+), 85 deletions(-)
 create mode 100644 s2-site/examples/theme/default/demo/dark.ts

diff --git a/README.en-US.md b/README.en-US.md
index 77fdab42e2..50ec5e8cfd 100644
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -38,7 +38,7 @@ A practical visualization library for tabular analysis.
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
     <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
-  <a href="https://github.com/antvis/S2/blob/master/LICENSE" target="_blank" target="_blank">
+  <a href="https://github.com/antvis/S2/blob/next/LICENSE" target="_blank" target="_blank">
     <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
   <a href="https://github.com/antvis/S2/graphs/contributors">
diff --git a/README.md b/README.md
index f7ac555fa2..edb6f94818 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
     <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
-  <a href="https://github.com/antvis/S2/blob/master/LICENSE" target="_blank" target="_blank">
+  <a href="https://github.com/antvis/S2/blob/next/LICENSE" target="_blank" target="_blank">
     <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
   <a href="https://github.com/antvis/S2/graphs/contributors">
diff --git a/packages/s2-core/README.en-US.md b/packages/s2-core/README.en-US.md
index 7cf5dc406f..99d1673d6d 100644
--- a/packages/s2-core/README.en-US.md
+++ b/packages/s2-core/README.en-US.md
@@ -38,7 +38,7 @@ Data-driven multi-dimensional analysis table.
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
     <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
-  <a href="https://github.com/antvis/S2/blob/master/LICENSE" target="_blank" target="_blank">
+  <a href="https://github.com/antvis/S2/blob/next/LICENSE" target="_blank" target="_blank">
     <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
   <a href="https://github.com/antvis/S2/graphs/contributors">
diff --git a/packages/s2-core/README.md b/packages/s2-core/README.md
index f954dc3827..b10c607f05 100644
--- a/packages/s2-core/README.md
+++ b/packages/s2-core/README.md
@@ -37,7 +37,7 @@
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
     <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
-  <a href="https://github.com/antvis/S2/blob/master/LICENSE" target="_blank" target="_blank">
+  <a href="https://github.com/antvis/S2/blob/next/LICENSE" target="_blank" target="_blank">
     <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
   <a href="https://github.com/antvis/S2/graphs/contributors">
diff --git a/packages/s2-core/src/theme/index.ts b/packages/s2-core/src/theme/index.ts
index 31ded99ace..97548286d6 100644
--- a/packages/s2-core/src/theme/index.ts
+++ b/packages/s2-core/src/theme/index.ts
@@ -361,7 +361,6 @@ export const getTheme = (
         textAlign: 'right',
         textBaseline: 'middle',
         ...getHeaderCellTextOverflow(),
-        // maxLines: 1,
       },
       bolderText: {
         fontFamily: FONT_FAMILY,
diff --git a/s2-site/docs/api/basic-class/base-cell.zh.md b/s2-site/docs/api/basic-class/base-cell.zh.md
index 40519cc036..a87760e391 100644
--- a/s2-site/docs/api/basic-class/base-cell.zh.md
+++ b/s2-site/docs/api/basic-class/base-cell.zh.md
@@ -3,7 +3,7 @@ title: BaseCell
 order: 4
 ---
 
-功能描述：单元格基类。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/base-cell.ts)
+功能描述：单元格基类。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/base-cell.ts)
 
 ```ts
 cell.getActualText()
diff --git a/s2-site/docs/api/basic-class/base-data-set.zh.md b/s2-site/docs/api/basic-class/base-data-set.zh.md
index add7e3c3c0..29ce91fdf0 100644
--- a/s2-site/docs/api/basic-class/base-data-set.zh.md
+++ b/s2-site/docs/api/basic-class/base-data-set.zh.md
@@ -3,7 +3,7 @@ title: BaseDataSet
 order: 5
 ---
 
-功能描述：表格数据集。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/data-set/pivot-data-set.ts)
+功能描述：表格数据集。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/data-set/pivot-data-set.ts)
 
 ```ts
 s2.dataSet.getFieldName('type')
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 2e615f46b7..1a6ac8ce68 100644
--- a/s2-site/docs/api/basic-class/base-facet.zh.md
+++ b/s2-site/docs/api/basic-class/base-facet.zh.md
@@ -3,7 +3,7 @@ title: BaseFacet
 order: 7
 ---
 
-功能描述：当前可视渲染区域。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/facet/base-facet.ts)
+功能描述：当前可视渲染区域。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/base-facet.ts)
 
 ```ts
 s2.facet.getRealWidth()
diff --git a/s2-site/docs/api/basic-class/base-tooltip.zh.md b/s2-site/docs/api/basic-class/base-tooltip.zh.md
index 76cf0aa14c..9d67b67386 100644
--- a/s2-site/docs/api/basic-class/base-tooltip.zh.md
+++ b/s2-site/docs/api/basic-class/base-tooltip.zh.md
@@ -3,7 +3,7 @@ title: BaseTooltip
 order: 6
 ---
 
-功能描述：Tooltip 类。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/ui/tooltip/index.ts)
+功能描述：Tooltip 类。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/tooltip/index.ts)
 
 ```ts
 s2.tooltip.show({
diff --git a/s2-site/docs/api/basic-class/interaction.zh.md b/s2-site/docs/api/basic-class/interaction.zh.md
index 3baa321bff..f886da85fd 100644
--- a/s2-site/docs/api/basic-class/interaction.zh.md
+++ b/s2-site/docs/api/basic-class/interaction.zh.md
@@ -3,7 +3,7 @@ title: Interaction
 order: 2
 ---
 
-功能描述：交互类相关属性和方法。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/interaction/root.ts)
+功能描述：交互类相关属性和方法。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/interaction/root.ts)
 
 ```ts
 s2.interaction.reset()
diff --git a/s2-site/docs/api/basic-class/node.zh.md b/s2-site/docs/api/basic-class/node.zh.md
index c3fe56df81..c254000dbc 100644
--- a/s2-site/docs/api/basic-class/node.zh.md
+++ b/s2-site/docs/api/basic-class/node.zh.md
@@ -3,7 +3,7 @@ title: Node
 order: 5
 ---
 
-功能描述：布局节点。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/facet/layout/node.ts)
+功能描述：布局节点。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/layout/node.ts)
 
 ```ts
 node.isTotals // false
diff --git a/s2-site/docs/api/basic-class/spreadsheet.zh.md b/s2-site/docs/api/basic-class/spreadsheet.zh.md
index b5e6bbfc7b..bbfa9a86cc 100644
--- a/s2-site/docs/api/basic-class/spreadsheet.zh.md
+++ b/s2-site/docs/api/basic-class/spreadsheet.zh.md
@@ -3,7 +3,7 @@ title: SpreadSheet
 order: 1
 ---
 
-功能描述：表格实例相关属性和方法。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/sheet-type/spread-sheet.ts)
+功能描述：表格实例相关属性和方法。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/sheet-type/spread-sheet.ts)
 
 ```ts
 const s2 = new PivotSheet()
@@ -23,7 +23,7 @@ s2.isPivotMode()
 | tooltip | tooltip                                                                                                                | [BaseTooltip](/docs/api/basic-class/base-tooltip) |    |
 | container | g-canvas 实例                                                                                                            | [Canvas](https://g.antv.vision/zh/docs/api/canvas) |    |
 | interaction | 交互                                                                                                                     |  [Interaction](/zh/docs/api/basic-class/interaction) |    |
-| hdAdapter | 高清适配                                                                                                                   | [HdAdapter](https://github.com/antvis/S2/blob/master/packages/s2-core/src/ui/hd-adapter/index.ts) |    |
+| hdAdapter | 高清适配                                                                                                                   | [HdAdapter](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/hd-adapter/index.ts) |    |
 | on | 事件订阅                                                                                                                   | (event: [S2Event](/docs/manual/advanced/interaction/basic), listener: () => void) => void |    |
 | emit | 事件发布                                                                                                                   | (event: [S2Event](/docs/manual/advanced/interaction/basic), ...args: any[]) => void |    |
 | getDataSet | 获取数据集                                                                                                                  | (options: [S2Options](/docs/api/general/S2Options)) => [BaseDataSet](/docs/api/basic-class/base-data-set) |    |
diff --git a/s2-site/docs/api/basic-class/store.zh.md b/s2-site/docs/api/basic-class/store.zh.md
index fe5ccf2c0b..77b0581e18 100644
--- a/s2-site/docs/api/basic-class/store.zh.md
+++ b/s2-site/docs/api/basic-class/store.zh.md
@@ -3,7 +3,7 @@ title: Store
 order: 3
 ---
 
-功能描述：存储一些信息。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/common/store/index.ts)
+功能描述：存储一些信息。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/store/index.ts)
 
 ```ts
 s2.store.get('key') // 获取
diff --git a/s2-site/docs/api/general/S2Event.zh.md b/s2-site/docs/api/general/S2Event.zh.md
index 7cb09b1a4c..fd41bfd5ef 100644
--- a/s2-site/docs/api/general/S2Event.zh.md
+++ b/s2-site/docs/api/general/S2Event.zh.md
@@ -5,7 +5,7 @@ redirect_from:
   - /zh/docs/api
 ---
 
-表格事件列表，可以根据实际需要，监听所需事件，实现自定义业务。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/common/constant/events/basic.ts)
+表格事件列表，可以根据实际需要，监听所需事件，实现自定义业务。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/constant/events/basic.ts)
 
 如果使用的是 `s2-react` 或 `s2-vue` 表组件，则已对事件进行封装，无需额外监听，使用其回调函数即可。 [详情](/docs/api/components/sheet-component)
 
diff --git a/s2-site/docs/manual/advanced/adaptive.zh.md b/s2-site/docs/manual/advanced/adaptive.zh.md
index ddf795e593..544a85a68e 100644
--- a/s2-site/docs/manual/advanced/adaptive.zh.md
+++ b/s2-site/docs/manual/advanced/adaptive.zh.md
@@ -3,7 +3,9 @@ title: 表格自适应
 order: 9
 ---
 
-表格默认根据配置的 `width` 和 `height` 渲染：
+<Badge>@antv/s2-react</Badge> <Badge type="success">@antv/s2-vue</Badge>
+
+S2 默认根据配置的 `width` 和 `height` 进行渲染：
 
 ```ts
 const s2Options = {
@@ -13,7 +15,7 @@ const s2Options = {
 ```
 
 :::warning{title="注意"}
-表格基于 `Canvas` 渲染，配置的宽高其实就是设置 `<canvas/>` 的 `width` 和 `height`, 也就是意味着 `100%`, `80vw` 之类的配置是不生效的：
+表格基于 `Canvas` 渲染，配置的宽高其实就是设置 `<canvas/>` 的 `width` 和 `height`, 也就是意味着 `100%`, `80vw` 之类的配置是**不生效的**：
 
 ```ts
 const s2Options = {
@@ -28,7 +30,9 @@ const s2Options = {
 
 ### 窗口自适应
 
-如果想让表格撑满整个父容器，可以监听窗口的 `resize` 事件，或使用 [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver) 监听容器大小变化，然后更新表格宽高：
+如果想让表格撑满整个父容器，可以监听窗口的 `resize` 事件，或使用 [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver) 监听容器大小变化，然后更新表格宽高
+
+<Playground path="layout/adaptive/demo/window-adaptation.ts" rid='window-adaptation' height='300'></playground>
 
 ```ts
 import { PivotSheet } from '@antv/s2'
@@ -57,7 +61,9 @@ resizeObserver.observe(document.body);
 
 ### 容器自适应
 
-如果是容器本身大小发生改变，而不是窗口，那么可以使用 [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver) 获取到实时的容器大小：
+如果是容器本身大小发生改变，而不是窗口，那么可以使用 [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver) 获取到实时的容器大小
+
+<Playground path="layout/adaptive/demo/container-adaptation.ts" rid='container-adaptation' height='300'></playground>
 
 ```ts
 import { PivotSheet } from '@antv/s2'
@@ -91,10 +97,11 @@ resizeObserver.observe(parent);
 
 如果是使用 `@antv/s2-react` 的方式，可以配置 `adaptive` 参数开启自适应。
 
+<Playground path="layout/adaptive/demo/react-adaptive.ts" rid='react-adaptive' height='300'></playground>
+
 #### Adaptive 参数类型
 
 ```ts
-// `adaptive` 的类型 `Adaptive`
 type Adaptive =
   | boolean
   | {
diff --git a/s2-site/docs/manual/advanced/g-plugins.zh.md b/s2-site/docs/manual/advanced/g-plugins.zh.md
index 985a8fac21..053bfc4f40 100644
--- a/s2-site/docs/manual/advanced/g-plugins.zh.md
+++ b/s2-site/docs/manual/advanced/g-plugins.zh.md
@@ -9,7 +9,7 @@ order: 10
 
 S2 基于 [`AntV/G`](https://g.antv.antgroup.com/) 渲染引擎绘制，因此可以共享其丰富的插件生态。
 
-<Playground path="/custom/custom-plugins/demo/a11y.ts" rid='a11y' height='300'></playground>
+<Playground path="custom/custom-plugins/demo/a11y.ts" rid='a11y' height='300'></playground>
 
 ## 插件系统介绍
 
diff --git a/s2-site/docs/manual/advanced/get-cell-data.zh.md b/s2-site/docs/manual/advanced/get-cell-data.zh.md
index c55d25d67b..2eac596dc5 100644
--- a/s2-site/docs/manual/advanced/get-cell-data.zh.md
+++ b/s2-site/docs/manual/advanced/get-cell-data.zh.md
@@ -4,23 +4,25 @@ order: 9
 ---
 
 :::warning{title='提示'}
-阅读本章前，请确保已经阅读过 [基础教程](/manual/basic/base-concept)，[数据流处理](/manual/advanced/data-process/pivot)，[布局](/manual/advanced/layout/pivot) 等章节
+阅读本章前，请确保已经阅读过 [基础教程](/manual/basic/base-concept)，[数据流处理](/manual/advanced/data-process/pivot)，[布局](/manual/advanced/layout/pivot) 等章节。
 :::
 
 在实际的业务场景中，我们往往会遇到一些需要获取**单元格数据**的场景，常见的比如：
 
-- 点击某一个行头/列头单元格，获取**当前行/列**所有数据
-- 监听鼠标 `click` `hover` 事件 获取当前对应单元格数据
-- 点击数据单元格，获取当前单元格数据，或者整行数据
-- 自定义 `tooltip` 内容，需要根据当前单元格信息来渲染不同的操作项，或者显示不同的提示信息
+- 点击某一个行头/列头单元格，获取**当前行/列**所有数据。
+- 监听鼠标 `click` `hover` 事件 获取当前对应单元格数据。
+- 点击数据单元格，获取当前单元格数据，或者整行数据。
+- 自定义 `tooltip` 内容，需要根据当前单元格信息来渲染不同的操作项，或者显示不同的提示信息。
 
 `S2` 的表格使用 `Canvas` 绘制，所以只会有一个 `dom` 元素，所有单元格对应的一组**数据结构**，里面存储了每个单元格的坐标，文本信息，交互状态等 [信息](/docs/api/basic-class/base-cell)
 
-`S2` 提供了一系列获取数据的 [API](/docs/api/basic-class/spreadsheet), 下面介绍一些常用的场景
+`S2` 提供了一系列获取数据的 [API](/docs/api/basic-class/spreadsheet), 下面介绍一些常用的场景：
 
-### 获取指定区域单元格
+### 获取指定区域单元格节点
 
-在渲染完成后，访问 `s2.facet.getLayoutResult()` 获取到当前可视范围内所有 [单元格](/docs/api/basic-class/node)。[查看更多](/docs/api/basic-class/base-facet)
+在渲染完成后，访问 `s2.facet.getLayoutResult()` 获取到当前所有（**含不在可视范围的**）[单元格节点](/docs/api/basic-class/node)。
+
+一个节点 (Node) 对应一个 单元格 (Cell), 当节点在可视范围内时，会被实例化为单元格 (Cell), 可通过 `node.belongsCell` 获取
 
 ```ts
 await s2.render()
@@ -29,33 +31,114 @@ await s2.render()
 console.log(s2.facet.getLayoutResult())
 ```
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/sdbdaWuLk/c93a05a9-b849-4f3b-96b3-73f6c33aac88.png" width="600" alt="preview"/>
+或者
+
+```ts
+import { S2Event } from '@antv/s2'
+
+s2.on(S2Event.LAYOUT_AFTER_RENDER, () => {
+  console.log(s2.facet.getLayoutResult())
+})
+```
+
+<!-- <img src="https://gw.alipayobjects.com/zos/antfincdn/sdbdaWuLk/c93a05a9-b849-4f3b-96b3-73f6c33aac88.png" width="600" alt="preview"/> -->
+
+:::info{title="可以获取到如下信息"}
 
+- `cornerNodes` 角头节点
+- `seriesNumberNodes` 序号列节点
 - `colLeafNodes` 列头叶子节点
 - `colNodes` 列头节点
 - `colsHierarchy` 列头层级信息
 - `rowLeafNodes` 行头叶子节点
 - `rowNodes` 行头节点
 - `rowsHierarchy` 行头层级信息
-- `getCellMeta` [根据行列索引获取指定单元格信息](#根据行列索引获取数值单元格信息)
 
-<br/>
+:::
 
-#### 获取数值单元格
+[查看更多](/docs/api/basic-class/base-facet)
 
-对于数值单元格 (dataCell)，由于虚拟滚动的特性，需要动态获取，更多请查看 [interaction API](/docs/api/basic-class/interaction)
+:::warning{title="注意"}
+由于虚拟滚动的特性，获取到为不含可视区域外的单元格。
+:::
+
+### 获取行头单元格
+
+```ts
+s2.facet.getRowCells()
+s2.facet.getRowLeafCells()
+```
+
+### 获取列头单元格
+
+```ts
+s2.facet.getColCells()
+s2.facet.getColLeafCells()
+```
+
+### 获取角头单元格
+
+```ts
+s2.facet.getCornerCells()
+```
+
+### 获取合并单元格
+
+```ts
+s2.facet.getMergedCells()
+```
+
+### 获取序号单元格
+
+```ts
+s2.facet.getSeriesNumberCells()
+```
+
+### 获取数值单元格
+
+更多请查看 [interaction API](/docs/api/basic-class/interaction)
 
 ```ts
 // 当前可视范围内的数值单元格
 s2.facet.getDataCells()
 // 当前可视范围内未选中的数值单元格
-s2.interaction.getPanelGroupAllUnSelectedDataCells()
+s2.interaction.getUnSelectedDataCells()
+```
+
+### 获取表头单元格 （序号，角头，行头，列头）
+
+```ts
+s2.getHeaderCells()
+```
+
+### 获取所有单元格
+
+```ts
+s2.facet.getCells()
+```
+
+### 根据单元格 field 获取指定单元格
+
+```ts
+s2.facet.getCellsByField(field)
+```
+
+### 根据单元格 id 获取指定单元格
+
+```ts
+s2.facet.getCellById(id)
+```
+
+### 根据 Event 获取对应单元格
+
+```ts
+s2.getCell(event.target)
 ```
 
-#### 获取角头单元格
+### 根据单元格获取元信息
 
 ```ts
-s2.facet.cornerHeader.getNodes()
+cell.getMeta()
 ```
 
 ### 监听点击事件获取对应单元格
@@ -196,9 +279,9 @@ s2.on(S2Event.DATA_CELL_CLICK, (event) => {
 
 ```ts
 // 找到 "舟山市" 对应的行头单元格节点
-const rowCellNode = s2.facet.getRowCellNodes().find((node) => node.id === 'root[&]浙江省[&]舟山市')
+const rowCellNode = s2.facet.getRowCellNodes().find((node) => node.id === 'root[&] 浙江省 [&] 舟山市')
 // 找到 "办公用品" 下 "纸张" 对应的 "数量"列头单元格节点
-const colCellNode = s2.facet.getColCellNodes().find((node) => node.id === 'root[&]办公用品[&]纸张[&]number')
+const colCellNode = s2.facet.getColCellNodes().find((node) => node.id === 'root[&] 办公用品 [&] 纸张 [&]number')
 
 const data = s2.dataSet.getCellMultiData({
   query: {
diff --git a/s2-site/docs/manual/advanced/get-instance.zh.md b/s2-site/docs/manual/advanced/get-instance.zh.md
index 739ab72133..f5e05041d5 100644
--- a/s2-site/docs/manual/advanced/get-instance.zh.md
+++ b/s2-site/docs/manual/advanced/get-instance.zh.md
@@ -3,13 +3,16 @@ title: 获取表格实例
 order: 8
 ---
 
+<Badge>@antv/s2-react</Badge> <Badge type="success">@antv/s2-vue</Badge>
+
 ## React 版本
 
-对于使用 `React` 组件 `SheetComponent` 这一类场景，如果需要获取到 [表格实例](/docs/api/basic-class/spreadsheet)， 进行一些进阶操作时，可以使用 `React.useRef` 和 `onMounted` 两种方式
+对于使用 `React` 组件 `SheetComponent` 这一类场景，如果需要获取到 [表格实例](/docs/api/basic-class/spreadsheet)，进行一些进阶操作时，可以使用 `React.useRef` 和 `onMounted` 进行获取。
 
-### ref 方式（推荐）
+### 使用
 
 ```tsx
+import React from 'react'
 import { SpreadSheet } from '@antv/s2'
 import { SheetComponent } from '@antv/s2-react'
 
@@ -39,7 +42,7 @@ function App() {
 }
 ```
 
-当 `sheetType` 变更时，底层会使用不同的表格类进行渲染，也就意味着此时 `实例` 已经发生了变更
+当 `sheetType` 变更时，底层会使用不同的表格类进行渲染，也就意味着此时 `实例` 已经**发生了变更**.
 
 ```diff
 pivot => table
@@ -51,7 +54,8 @@ pivot => table
 变更前注册事件会被注销，`S2` 对这种场景进行了优化，不管是 `ref` 还是 `onMounted` 方式，拿到的都是最新的实例，开发者无需关心
 
 ```tsx
-import { SpreadSheet, S2Event } from '@antv/s2'
+import React from 'react'
+import { SpreadSheet } from '@antv/s2'
 import { SheetComponent } from '@antv/s2-react'
 
 function App() {
@@ -62,6 +66,10 @@ function App() {
     console.log(s2Ref.current === instance)
   }
 
+  React.useEffect(() => {
+    setSheetType('table')
+  },[])
+
   return (
     <SheetComponent ref={s2Ref} sheetType={sheetType} onMounted={onMounted}/>
   )
@@ -70,7 +78,7 @@ function App() {
 
 ### 转发实例给上层组件
 
-如果你的业务对于 `SheetComponent` 进行了二次封装，需要暴露实例时，可以使用 `React.forwardRef` 进行实例转发
+如果你的业务对于 `SheetComponent` 进行了二次封装，需要暴露实例时，可以使用 `React.forwardRef` 进行实例转发。
 
 ```tsx
 const YourComponent = React.forwardRef(
@@ -99,9 +107,9 @@ function App() {
 
 ## Vue 版本
 
-### ref 方式（推荐）
+### 使用
 
-ref 方式得到的是一个对象，其中的`instance`属性才对应真正的表格实例：
+ref 方式得到的是一个对象，其中的 `instance` 属性才对应真正的表格实例：
 
 ```vue
 <script lang="ts">
diff --git a/s2-site/docs/manual/advanced/hd-adapter.zh.md b/s2-site/docs/manual/advanced/hd-adapter.zh.md
index dee765b384..52346c76f4 100644
--- a/s2-site/docs/manual/advanced/hd-adapter.zh.md
+++ b/s2-site/docs/manual/advanced/hd-adapter.zh.md
@@ -96,7 +96,7 @@ const renderByZoomScale = debounce((e) => {
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/Q1782WWQ3/Kapture%2525202021-10-19%252520at%25252014.36.05.gif)
 
-[完整代码](https://github.com/antvis/S2/blob/master/packages/s2-core/src/ui/hd-adapter/index.ts)
+[完整代码](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/hd-adapter/index.ts)
 
 ## 自定义设备像素比
 
diff --git a/s2-site/docs/manual/advanced/interaction/custom.zh.md b/s2-site/docs/manual/advanced/interaction/custom.zh.md
index 287fdd8579..dec795f6f8 100644
--- a/s2-site/docs/manual/advanced/interaction/custom.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/custom.zh.md
@@ -3,7 +3,7 @@ title: 自定义交互
 order: 1
 ---
 
-如果内置交互未能覆盖实际的使用场景，不用担心。你可以使用 [`S2Event`](https://github.com/antvis/S2/blob/master/packages/s2-core/src/common/constant/events/basic.ts) 所提供的交互事件，进行任意排列组合，自定义交互。这里以 [**明细表双击隐藏列头**](/examples/interaction/custom#double-click-hide-columns) 的例子说明。
+如果内置交互未能覆盖实际的使用场景，不用担心。你可以使用 [`S2Event`](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/constant/events/basic.ts) 所提供的交互事件，进行任意排列组合，自定义交互。这里以 [**明细表双击隐藏列头**](/examples/interaction/custom#double-click-hide-columns) 的例子说明。
 
 ## 1. 自定义交互类
 
diff --git a/s2-site/docs/manual/basic/theme.zh.md b/s2-site/docs/manual/basic/theme.zh.md
index aa9d5fe1b5..a5c5cbf4d7 100644
--- a/s2-site/docs/manual/basic/theme.zh.md
+++ b/s2-site/docs/manual/basic/theme.zh.md
@@ -5,15 +5,20 @@ order: 6
 
 ## 简介
 
-S2 中内置了 **3** 套开箱即用的主题配置，也提供了强大的主题自定义功能。[查看 API](/api/general/s2theme)
+S2 中内置了 **4** 套开箱即用的主题配置，也提供了强大的主题自定义功能。[查看 API](/api/general/s2theme)
+
+- [默认](/examples/theme/default/#default)
+- [多彩蓝](/examples/theme/default/#colorful)
+- [简约灰](/examples/theme/default/#gray)
+- [暗黑](/examples/theme/default/#dark)
 
 ### 色彩
 
-在 S2 的色彩使用中，我们会首先选定一个主题色，并使用主题色生成一套 `标准色板`：
+在 S2 的色彩使用中，我们会首先选定一个**主题色**，并使用主题色生成一套 `标准色板`：
 
-- 标准色板共 11 个色彩位，主题色位于索引 6 上
-- 使用主题色加不同程度的 `白` 生成 5 个较淡的颜色，置于索引 0~5 上
-- 使用主题色加不同程度的 `黑` 生成 5 个较深的颜色，置于索引 6~11 上
+- 标准色板共 `11` 个色彩位，主题色位于索引 `6` 上
+- 使用主题色加不同程度的 `白` 生成 `5` 个**较淡的颜色**，置于索引 `0~5` 上
+- 使用主题色加不同程度的 `黑` 生成 `5` 个**较深的颜色**，置于索引 `6~11` 上
 
 以下是使用 **#0A78F4**、**#FF5500** 不同主题色，生成标准色板的例子：
 
@@ -34,28 +39,38 @@ S2 中内置了 **3** 套开箱即用的主题配置，也提供了强大的主
 
 主题 schema 的定义为 [S2Theme](/docs/api/general/S2Theme#s2theme)，其详尽地描述了单元格、交互等主题样式，属性包含颜色、线条粗细、文字大小、文字对齐方式等。整个 schema 中，所有的颜色会从 [Palette](/docs/api/general/S2Theme#palette) 中取用：
 
-- basicColors：基础颜色，如角/列/行头背景，字体/icon 颜色
-- semanticColors：语义颜色，如红色、绿色指代的色值
-- others：补充颜色，一些固定特殊色，如搜索结果
+- `basicColors`：基础颜色，如角/列/行头背景，字体/icon 颜色。
+- `semanticColors`：语义颜色，如红色、绿色、黄色指代的色值。
+- `others`：补充颜色，一些固定特殊色，如搜索结果。
 
 ```ts
 const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
+s2.setThemeCfg({
+  theme: {
+    background: {
+      color: '#353c59',
+    }
+  }
+});
+
+//  等价于
 s2.setTheme({
   background: {
     color: '#353c59',
   },
 });
+
 await s2.render(false);
 ```
 
 ## 自定义主题
 
-s2 实例上的 `setThemeCfg` 方法是一切主题配置的入口，该方法接收一个类型为 [ThemeCfg](/docs/api/general/S2Theme#themecfg) 的参数，你可以：
+s2 实例上的 `setThemeCfg` 方法是一切主题配置的入口，该方法接收一个类型为 [ThemeCfg](/api/general/S2Theme) 的参数，你可以：
 
-- 通过 ThemeCfg.name 使用预置主题
-- 通过 ThemeCfg.palette 自定义色板生成主题
-- 通过 ThemeCfg.theme (`s2.setTheme(...)`) 自定义 schema 生成主题（可与上两个属性同时使用，即覆盖由它们生成的主题）
+- 通过 [ThemeCfg.name](/api/general/s2-theme) 使用预置主题
+- 通过 [ThemeCfg.palette](/api/general/s2-theme#palette) 自定义色板生成主题
+- 通过 [ThemeCfg.theme](/api/general/s2-theme#s2theme) 自定义 schema 生成主题（可与上两个属性同时使用，即覆盖由它们生成的主题）
 
 ### 选择预置主题
 
@@ -64,12 +79,12 @@ s2 实例上的 `setThemeCfg` 方法是一切主题配置的入口，该方法
 ```js
 const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-// name 可为 default, colorful, gray
+// name 可为 default, colorful, gray, dark
 s2.setThemeCfg({ name: 'colorful' });
 await s2.render(false);
 ```
 
-S2 内置 3 套主题效果：
+S2 内置 `4` 套主题效果：
 
 <table style="width: 100%; outline: none; border-collapse: collapse;">
   <colgroup>
@@ -79,26 +94,34 @@ S2 内置 3 套主题效果：
   <tbody>
     <tr>
       <td style="text-align: center;">
-      默认
+        默认 (default)
+      </td>
+      <td>
+        <img height="300" alt="default" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/nDIO0OG8fv/4ff6613f-fad3-4ea6-9473-0161509f692c.png" />
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align: center;">
+        多彩蓝 (colorful)
       </td>
       <td>
-        <img height="300" alt="default" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/nDIO0OG8fv/4ff6613f-fad3-4ea6-9473-0161509f692c.png">
+        <img height="300" alt="colorful" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/rgLkfo4MrT/95b7fbc3-8c6e-442c-9c4b-8bf8b3c3da1d.png" />
       </td>
     </tr>
     <tr>
       <td style="text-align: center;">
-      多彩蓝
+        简约灰 (gray)
       </td>
       <td>
-        <img height="300" alt="colorful" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/rgLkfo4MrT/95b7fbc3-8c6e-442c-9c4b-8bf8b3c3da1d.png">
+        <img height="300" alt="gray" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/4rwGg8Rp3N/cf08d7dd-ab96-446e-ba8d-146de8cb6a64.png" />
       </td>
     </tr>
     <tr>
       <td style="text-align: center;">
-      简约灰
+        暗黑 (dark)
       </td>
       <td>
-        <img height="300" alt="gray" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/4rwGg8Rp3N/cf08d7dd-ab96-446e-ba8d-146de8cb6a64.png">
+        <img height="300" alt="dark" style="max-height: unset;" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eRu9R7b1pGwAAAAAAAAAAAAADmJ7AQ/original" />
       </td>
     </tr>
   </tbody>
@@ -110,7 +133,7 @@ S2 内置 3 套主题效果：
 
 如果内置的主题不满意你的要求，那么你可以通过自定义 `schema` 的方式重写特定的配置。
 
-此时你可以调用 `s2.setTheme` 或者 `s2.setThemeCfg()` 配置 `theme` 对象。[查看完整 schema 配置](/docs/api/general/S2Theme#s2theme)：
+此时你可以调用 `s2.setTheme` 或者 `s2.setThemeCfg()` 配置 `theme` 对象。[查看完整 Schema 配置](/docs/api/general/S2Theme#s2theme)：
 
 ```js
 const s2 = new PivotSheet(container, s2DataConfig, s2Options);
@@ -128,9 +151,27 @@ await s2.render(false);
 
 <Playground path="theme/custom/demo/custom-schema.ts" rid='custom-schema'></playground>
 
+<br/>
+
+#### 自定义单元格文本换行和省略
+
+[查看详情](/layout/custom/#multi-line-text) 和 [完整 API](/api/general/s2theme#s2theme)
+
+```ts
+s2.setTheme({
+  rowCell: {
+    text: {
+      wordWrap: true,
+      maxLines: 2,
+      textOverflow: 'ellipsis',
+    },
+  },
+});
+```
+
 #### 自定义单元格对齐方式
 
-[查看详情](https://s2.antv.antgroup.com/manual/advanced/custom/cell-align) 和 [完整 API](/api/general/s2theme#s2theme)
+[查看详情](/manual/advanced/custom/cell-align) 和 [完整 API](/api/general/s2theme#s2theme)
 
 ```ts
 s2.setTheme({
@@ -179,7 +220,7 @@ s2.setTheme({
 
 #### 自选色板颜色
 
-你可以参考 [内置色板](https://github.com/antvis/S2/blob/master/packages/s2-core/src/theme/palette/colorful.ts) 个人化设置 `basicColors` 与 `semanticColors`，所选颜色会被用于表格不同部分的绘制，颜色使用关系请参考下方的 [色板对照表](#色板对照表)。
+你可以参考 [内置色板](https://github.com/antvis/S2/blob/next/packages/s2-core/src/theme/palette/colorful.ts) 个人化设置 `basicColors` 与 `semanticColors`，所选颜色会被用于表格不同部分的绘制，颜色使用关系请参考下方的 [色板对照表](#色板对照表)。
 
 另外为方便大家调配专属色板，S2 官方提供了 [自助色板调色工具](/examples/theme/custom/#custom-manual-palette)，所见即所得帮助你快速调配色板，一键复制粘贴进项目使用。
 
@@ -216,6 +257,8 @@ await s2.render(false);
 
 <Playground path="theme/custom/demo/custom-manual-palette.tsx" height="500" rid='custom-manual-palette'></playground>
 
+<br/>
+
 #### 按主题色自动生成
 
 [自选色板颜色](#自选色板颜色) 的调配自由度大，但每个颜色都需要单独确定，整体过程较为复杂。为满足用户的一般主题诉求，S2 还提供了根据主题色生成色板的功能。
diff --git a/s2-site/docs/manual/basic/tooltip.zh.md b/s2-site/docs/manual/basic/tooltip.zh.md
index 5106e4b71d..c361a48fd1 100644
--- a/s2-site/docs/manual/basic/tooltip.zh.md
+++ b/s2-site/docs/manual/basic/tooltip.zh.md
@@ -16,8 +16,8 @@ order: 7
 `React` 版本 和 `Vue3` 版本中通过 [自定义 Tooltip 类](#自定义-tooltip-类) 的方式渲染 `tooltip` 的内容，包括 `排序下拉菜单`, `单元格选中信息汇总`, `列头隐藏按钮` 等。
 
 查看 `React`
-版本的 [具体实现](https://github.com/antvis/S2/blob/master/packages/s2-react/src/components/tooltip/custom-tooltip.tsx)
-和 `Vue3` 版本的 [具体实现](https://github.com/antvis/S2/blob/master/packages/s2-vue/src/components/tooltip/custom-tooltip.ts)
+版本的 [具体实现](https://github.com/antvis/S2/blob/next/packages/s2-react/src/components/tooltip/custom-tooltip.tsx)
+和 `Vue3` 版本的 [具体实现](https://github.com/antvis/S2/blob/next/packages/s2-vue/src/components/tooltip/custom-tooltip.ts)
 
 - 如果您有 `tooltip` 的需求，您可以直接使用开箱即用的 `@antv/s2-react` `@antv/s2-vue`, 免去你二次封装，使用更加方便
 - 如果您不希望依赖框架，或者希望在 `Vue`, `Angular` 框架中使用 `tooltip`, 请参考 [自定义 Tooltip 类](#自定义-tooltip-类) 章节
@@ -392,7 +392,7 @@ const s2Options = {
 也可以重写 `renderContent` 方法，渲染你封装的任意组件
 
 - [查看 BaseTooltip 基类](/api/basic-class/base-tooltip)
-- [查看 React 示例](https://github.com/antvis/S2/blob/master/packages/s2-react/src/components/tooltip/custom-tooltip.tsx)
+- [查看 React 示例](https://github.com/antvis/S2/blob/next/packages/s2-react/src/components/tooltip/custom-tooltip.tsx)
 - [查看 Vue 示例](https://codesandbox.io/s/compassionate-booth-hpm3rf?file=/src/App.vue)
 
 ```ts
diff --git a/s2-site/docs/manual/introduction.zh.md b/s2-site/docs/manual/introduction.zh.md
index 5a2a286e46..4c4b7d1fee 100644
--- a/s2-site/docs/manual/introduction.zh.md
+++ b/s2-site/docs/manual/introduction.zh.md
@@ -38,7 +38,7 @@ redirect_from:
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
     <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
-  <a href="https://github.com/antvis/S2/blob/master/LICENSE" target="_blank" target="_blank">
+  <a href="https://github.com/antvis/S2/blob/next/LICENSE" target="_blank" target="_blank">
     <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
   <a href="https://github.com/antvis/S2/graphs/contributors">
diff --git a/s2-site/examples/custom/custom-cell/demo/col-cell.ts b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
index a12e37c541..bf9bee8795 100644
--- a/s2-site/examples/custom/custom-cell/demo/col-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
@@ -2,7 +2,7 @@ import { PivotSheet, ColCell, S2Options, S2DataConfig } from '@antv/s2';
 
 /**
  * 自定义 ColCell，给列头添加背景图
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/col-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts
  */
 class CustomColCell extends ColCell {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
diff --git a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
index c2be67dcdf..340ba21089 100644
--- a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
@@ -2,7 +2,7 @@ import { PivotSheet, CornerCell, S2Options, S2DataConfig } from '@antv/s2';
 
 /**
  * 自定义 CornerCell，给角头添加背景图
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/corner-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/corner-cell.ts
  */
 class CustomCornerCell extends CornerCell {
   drawBackgroundShape() {
diff --git a/s2-site/examples/custom/custom-cell/demo/corner-header.ts b/s2-site/examples/custom/custom-cell/demo/corner-header.ts
index 417b97581f..c0d3321477 100644
--- a/s2-site/examples/custom/custom-cell/demo/corner-header.ts
+++ b/s2-site/examples/custom/custom-cell/demo/corner-header.ts
@@ -4,7 +4,7 @@ import { get } from 'lodash';
 
 /**
  * 自定义整个角头, 添加文字和背景色
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/facet/header/corner.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/header/corner.ts
  */
 class CustomCornerHeader extends Group {
   node;
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts
index ce2fb37e8a..37e11ec56c 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts
@@ -2,7 +2,7 @@ import { PivotSheet, MergedCell, S2Options, S2DataConfig } from '@antv/s2';
 
 /**
  * 自定义 MergedCell，改变背景色
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/merged-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/merged-cell.ts
  */
 class CustomMergedCell extends MergedCell {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
index 9be1907c32..d970cf559f 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
@@ -9,7 +9,7 @@ import {
 
 /**
  * 自定义 DataCell，给特定单元格设置背景色, 文字大小, 颜色
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
  */
 class CustomDataCell extends DataCell {
   getBackgroundColor() {
@@ -69,7 +69,7 @@ class CustomDataCell extends DataCell {
 
 /**
  * 自定义 ColCell, 给特定单元格设置文字大小, 颜色
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/col-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts
  */
 class CustomColCell extends ColCell {
   getTextStyle() {
diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell.ts b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
index 28b34b5eda..2540364b89 100644
--- a/s2-site/examples/custom/custom-cell/demo/data-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
@@ -2,7 +2,7 @@ import { PivotSheet, DataCell, S2DataConfig, S2Options } from '@antv/s2';
 
 /**
  * 自定义 DataCell，给数值单元格添加背景图
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
  */
 class CustomDataCell extends DataCell {
   // 重写绘制背景方法, 添加一个背景图片
diff --git a/s2-site/examples/custom/custom-cell/demo/row-cell.ts b/s2-site/examples/custom/custom-cell/demo/row-cell.ts
index d8459ae619..cbc85333f9 100644
--- a/s2-site/examples/custom/custom-cell/demo/row-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/row-cell.ts
@@ -2,7 +2,7 @@ import { PivotSheet, RowCell, S2DataConfig, S2Options } from '@antv/s2';
 
 /**
  * 自定义 RowCell，给行头添加背景图
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/row-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts
  */
 class CustomRowCell extends RowCell {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
diff --git a/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts b/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
index d1a692c466..6d0c550bcc 100644
--- a/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
@@ -8,7 +8,7 @@ import {
 
 /**
  * 自定义 SeriesNumberCell，改变背景色
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/series-number-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/series-number-cell.ts
  */
 class CustomSeriesCell extends SeriesNumberCell {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
diff --git a/s2-site/examples/custom/custom-cell/demo/totals-cell.ts b/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
index e3d4d89116..cb34630a6c 100644
--- a/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
@@ -8,7 +8,7 @@ import {
 
 /**
  * 继承 RowCell, 单独修改小计/总计的背景色和文字颜色
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/row-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts
  */
 class CustomTotalsRowCell extends RowCell {
   // 背景色
diff --git a/s2-site/examples/theme/default/demo/dark.ts b/s2-site/examples/theme/default/demo/dark.ts
new file mode 100644
index 0000000000..55f9d3ad65
--- /dev/null
+++ b/s2-site/examples/theme/default/demo/dark.ts
@@ -0,0 +1,50 @@
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/4eff53f3-f952-4b77-8862-4b6ecbd31667.json',
+)
+  .then((res) => res.json())
+  .then(async (data) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
+      fields: {
+        rows: ['province', 'city'],
+        columns: ['type'],
+        values: ['price', 'cost'],
+      },
+      meta: [
+        {
+          field: 'province',
+          name: '省份',
+        },
+        {
+          field: 'city',
+          name: '城市',
+        },
+        {
+          field: 'type',
+          name: '商品类别',
+        },
+        {
+          field: 'price',
+          name: '价格',
+        },
+        {
+          field: 'cost',
+          name: '成本',
+        },
+      ],
+      data,
+    };
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+    };
+
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    s2.setThemeCfg({ name: 'dark' });
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/theme/default/demo/meta.json b/s2-site/examples/theme/default/demo/meta.json
index fa9cb6135b..99771d13ad 100644
--- a/s2-site/examples/theme/default/demo/meta.json
+++ b/s2-site/examples/theme/default/demo/meta.json
@@ -27,6 +27,14 @@
         "en": "Simple Gray"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/4rwGg8Rp3N/cf08d7dd-ab96-446e-ba8d-146de8cb6a64.png"
+    },
+    {
+      "filename": "dark.ts",
+      "title": {
+        "zh": "暗黑",
+        "en": "Dark"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eRu9R7b1pGwAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }

From db9a8bf6dc004801536fc152e2bc73169c8c4561 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Wed, 27 Dec 2023 18:02:41 +0800
Subject: [PATCH 08/64] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=E5=AF=BC=E5=87=BA=E6=96=87=E6=A1=A3=E5=92=8C=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-core/src/utils/export/index.ts    |   3 +-
 s2-site/docs/common/copy-export.zh.md         |  89 ++++++++----
 .../manual/advanced/interaction/basic.zh.md   |   2 +-
 .../manual/advanced/interaction/copy.zh.md    |   2 +-
 .../interaction/basic/demo/copy-export.ts     | 129 ++++++++++++++++++
 .../examples/interaction/basic/demo/meta.json |   8 ++
 6 files changed, 207 insertions(+), 26 deletions(-)
 create mode 100644 s2-site/examples/interaction/basic/demo/copy-export.ts

diff --git a/packages/s2-core/src/utils/export/index.ts b/packages/s2-core/src/utils/export/index.ts
index bcb3b7787f..2724438281 100644
--- a/packages/s2-core/src/utils/export/index.ts
+++ b/packages/s2-core/src/utils/export/index.ts
@@ -102,6 +102,7 @@ export const download = (str: string, fileName: string) => {
 };
 
 /**
+ * @deprecated // TODO: 移除
  * Copy data
  * @param sheetInstance
  * @param split
@@ -110,7 +111,6 @@ export const download = (str: string, fileName: string) => {
  * @param isAsyncExport 是否异步导出
  * @deprecated 后续将废弃方法，将使用 asyncGetAllPlainData
  */
-// TODO: 改名
 export const copyData = (params: CopyAllDataParams) => {
   const result = processAllSelected(params);
 
@@ -126,3 +126,4 @@ export const asyncGetAllPlainData = async (params: CopyAllDataParams) => {
 export type { CopyableList, FormatOptions };
 export { assembleMatrix, getMaxRowLen, getNodeFormatData };
 export { getHeaderList };
+export { CopyMIMEType };
diff --git a/s2-site/docs/common/copy-export.zh.md b/s2-site/docs/common/copy-export.zh.md
index a6dbdc05cd..d09efb0043 100644
--- a/s2-site/docs/common/copy-export.zh.md
+++ b/s2-site/docs/common/copy-export.zh.md
@@ -3,15 +3,25 @@ title: 复制与导出
 order: 8
 ---
 
+<Playground path="interaction/basic/demo/copy-export.ts" height="500" rid='copy-export'></playground>
+
 ## 复制
 
 ### 1. 全量复制
 
 ```ts | pure
-import { copyData, copyToClipboard } from '@antv/s2'
+import { asyncGetAllPlainData, copyToClipboard } from '@antv/s2'
 
 // 拿到复制数据
-const data = copyData(spreadsheet, '\t', false)
+const data = await asyncGetAllPlainData({
+  sheetInstance: s2,
+  split: '\t',
+  formatOptions: false,
+  // formatOptions: {
+  //   isFormatHeader: false,
+  //   isFormatData: true
+  // },
+});
 
 // 同步复制：copyToClipboard(data, false)
 copyToClipboard(data)
@@ -115,10 +125,18 @@ const s2Options = {
 默认只提供 `csv` 纯文本格式的导出，如果想导出 `xlsx`, 保留单元格样式，可以结合 [exceljs](https://github.com/exceljs/exceljs), [sheetjs]( https://github.com/SheetJS/sheetjs) 等工具自行处理。
 
 ```ts | pure
-import { copyData, download } from '@antv/s2'
+import { asyncGetAllPlainData, download } from '@antv/s2'
 
 // 拿到复制数据
-const data = copyData(spreadsheet, '\t', false)
+const data = await asyncGetAllPlainData({
+  sheetInstance: s2,
+  split: '\t',
+  formatOptions: false,
+  // formatOptions: {
+  //   isFormatHeader: false,
+  //   isFormatData: true
+  // },
+});
 
 // 导出数据 (csv)
 download(data, 'filename')
@@ -151,30 +169,38 @@ copyToClipboard(data)
 #### 3. 自定义导出类型
 
 ```ts | pure
-import { copyData, registerTransformer, CopyMIMEType } from '@antv/s2'
-
-// 自定义导出类型
-registerTransformer(CopyMIMEType.HTML, (matrix) => {
-  return `<td></td>`
-})
+import { asyncGetAllPlainData, CopyMIMEType } from '@antv/s2'
 
 // 复制到 word、语雀等场景会成为一个空表格
-const data = copyData(spreadsheet, '\t', false)
+const data = await asyncGetAllPlainData({
+  sheetInstance: s2,
+  split: '\t',
+  formatOptions: false,
+  // 自定义导出类型
+  customTransformer: () => {
+    return {
+      [CopyMIMEType.HTML]: () => {
+        return {
+          type: CopyMIMEType.HTML,
+          content: `<td></td>`
+        };
+      },
+    };
+  },
+});
 ```
 
 #### API
 
-##### copyData
-
-> @deprecated 后续将废弃方法，将使用 asyncGetAllPlainData
+##### asyncGetAllPlainData
 
-| 参数          | 说明                                    | 类型                                                                             | 默认值           | 必选 |
-| ------------|---------------------------------------|--------------------------------------------------------------------------------|---------------| --- |
-| spreadsheet | s2 实例                                 | [SpreadSheet](/docs/api/basic-class/spreadsheet)                               |               | ✓    |
-| split       | 分隔符                                   | `string`                                                                       |               | ✓    |
-| formatOptions  | 是否格式化，可以分别对数据单元格和行列头进行格式化，传布尔值会同时对单元格和行列头生效。 | <code> boolean \|  { isFormatHeader?: boolean, isFormatData?: boolean} </code> | `false`       |      |
-| customTransformer  | 导出时支持自定义 (transformer) 数据导出格式化方法        | (transformer: `Transformer`) => `Partial<Transformer>`               | `transformer` |      |
-| isAsyncExport  | 是否异步导出        | boolean                                                                        | false         |      |
+| 参数          | 说明      | 类型              | 默认值           | 必选 |
+| ------------|-----------------|---------------|---------------| --- |
+| sheetInstance | s2 实例    | [SpreadSheet](/docs/api/basic-class/spreadsheet)     |      | ✓    |
+| split       | 分隔符           | `string`       |     | ✓    |
+| formatOptions  | 是否格式化，可以分别对数据单元格和行列头进行格式化，传布尔值会同时对单元格和行列头生效。 | `boolean \|  { isFormatHeader?: boolean, isFormatData?: boolean }`| `false`  |      |
+| customTransformer  | 导出时支持自定义 (transformer) 数据导出格式化方法  | (transformer: `Transformer`) => `Partial<Transformer>`      | `transformer` |      |
+| isAsyncExport  | 是否异步导出        | boolean      | false         |      |
 
 ##### copyToClipboard
 
@@ -202,7 +228,24 @@ enum CopyMIMEType {
 ##### Transformer
 
 ```ts | pure
-export interface Transformer {
+type CopyablePlain = {
+  type: CopyMIMEType.PLAIN;
+  content: string;
+};
+
+type CopyableHTML = {
+  type: CopyMIMEType.HTML;
+  content: string;
+};
+
+type MatrixPlainTransformer = (
+  data: DataItem[][],
+  separator?: string,
+) => CopyablePlain;
+
+type MatrixHTMLTransformer = (data: DataItem[][]) => CopyableHTML;
+
+interface Transformer {
   [CopyMIMEType.PLAIN]: MatrixPlainTransformer;
   [CopyMIMEType.HTML]: MatrixHTMLTransformer;
 }
@@ -210,5 +253,5 @@ export interface Transformer {
 
 | 参数 | 说明     | 类型                       | 默认值 | 必选 |
 | --- | --- |--------------------------|-----| --- |
-| type | 复制内容的 MIMEType | `CopyMIMEType`           |     | ✓    |
+| type | 复制内容的 MIMEType | [CopyMIMEType](#copymimetype)           |     | ✓    |
 | transformer | 处理函数 | `MatrixHTMLTransformer \| MatrixPlainTransformer`   |      |   ✓   |
diff --git a/s2-site/docs/manual/advanced/interaction/basic.zh.md b/s2-site/docs/manual/advanced/interaction/basic.zh.md
index 583e30cb9b..3b2c26d70c 100644
--- a/s2-site/docs/manual/advanced/interaction/basic.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/basic.zh.md
@@ -423,7 +423,7 @@ const s2Options = {
 
 查看 [详情](/docs/manual/advanced/interaction/scroll)
 
-### 复制
+### 复制与导出
 
 查看 [详情](/docs/manual/advanced/interaction/copy)
 
diff --git a/s2-site/docs/manual/advanced/interaction/copy.zh.md b/s2-site/docs/manual/advanced/interaction/copy.zh.md
index 735679a466..0dd77c37ee 100644
--- a/s2-site/docs/manual/advanced/interaction/copy.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/copy.zh.md
@@ -1,5 +1,5 @@
 ---
-title: 复制
+title: 复制与导出
 order: 7
 ---
 
diff --git a/s2-site/examples/interaction/basic/demo/copy-export.ts b/s2-site/examples/interaction/basic/demo/copy-export.ts
new file mode 100644
index 0000000000..aa43218ea4
--- /dev/null
+++ b/s2-site/examples/interaction/basic/demo/copy-export.ts
@@ -0,0 +1,129 @@
+import {
+  CopyMIMEType,
+  PivotSheet,
+  S2Event,
+  S2Options,
+  SpreadSheet,
+  asyncGetAllPlainData,
+  copyToClipboard,
+  download,
+} from '@antv/s2';
+import { message } from 'antd';
+
+const split = '\t';
+
+const fileName = 'test';
+
+const copyData = async (s2: SpreadSheet, isFormat: boolean) => {
+  const customTransformer = () => {
+    return {
+      [CopyMIMEType.HTML]: () => {
+        return {
+          type: CopyMIMEType.HTML,
+          content: `<td></td>`,
+        };
+      },
+    };
+  };
+
+  const data = await asyncGetAllPlainData({
+    sheetInstance: s2,
+    split,
+    formatOptions: isFormat,
+    // 自定义转换器: 如复制到语雀等富文本编辑器场景展示空表格
+    // customTransformer,
+  });
+
+  copyToClipboard(data)
+    .then(() => {
+      console.log('data', data);
+      message.success('复制成功!');
+    })
+    .catch((error) => {
+      console.log('copy failed: ', error);
+      message.error('复制失败!');
+    });
+};
+
+const downloadData = async (s2: SpreadSheet, isFormat: boolean) => {
+  const close = message.loading('导出中...');
+  const data = await asyncGetAllPlainData({
+    sheetInstance: s2,
+    split,
+    formatOptions: isFormat,
+  });
+
+  try {
+    download(data, fileName);
+    console.log('downloadData', data);
+    message.success('导出成功!');
+  } catch (err) {
+    message.error('导出失败!');
+  } finally {
+    close();
+  }
+};
+
+function addScrollButton(s2: SpreadSheet) {
+  const copyBtn = document.createElement('button');
+
+  copyBtn.className = 'ant-btn ant-btn-default';
+  copyBtn.innerHTML = '复制全量数据';
+
+  const exportBtn = document.createElement('button');
+
+  exportBtn.className = 'ant-btn ant-btn-default';
+  exportBtn.innerHTML = '导出全量数据';
+
+  exportBtn.addEventListener('click', () => {
+    downloadData(s2, true);
+  });
+
+  copyBtn.addEventListener('click', () => {
+    copyData(s2, true);
+  });
+
+  const canvas = document.querySelector('#container > canvas');
+
+  if (canvas) {
+    canvas.style.marginTop = '10px';
+    canvas.before(copyBtn);
+    copyBtn.after(exportBtn);
+  }
+}
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then(async (dataCfg) => {
+    const container = document.getElementById('container');
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      interaction: {
+        // 允许复制
+        enableCopy: true,
+        // 是否携带行列头数据
+        copyWithHeader: true,
+        // 是否使用格式化数据
+        copyWithFormat: true,
+        brushSelection: {
+          rowCell: true,
+          colCell: true,
+          dataCell: true,
+        },
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    s2.on(S2Event.GLOBAL_COPIED, (data) => {
+      console.log('局部复制数据', data);
+    });
+
+    await s2.render();
+
+    addScrollButton(s2);
+  });
diff --git a/s2-site/examples/interaction/basic/demo/meta.json b/s2-site/examples/interaction/basic/demo/meta.json
index 292ec118a9..2458c6c172 100644
--- a/s2-site/examples/interaction/basic/demo/meta.json
+++ b/s2-site/examples/interaction/basic/demo/meta.json
@@ -75,6 +75,14 @@
         "en": "Disable auto reset sheet style"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/Lb0%26u6LtAu/reset.gif"
+    },
+    {
+      "filename": "copy-export.ts",
+      "title": {
+        "zh": "复制与导出",
+        "en": "Copy and export"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*LzTYTpFosccAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }

From e6158892b123dceb97cbfbc221f1c5e7c878d838 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Thu, 28 Dec 2023 11:16:57 +0800
Subject: [PATCH 09/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=E7=B1=BB=20API=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-core/src/facet/base-facet.ts      |  8 +-
 s2-site/docs/api/basic-class/base-bbox.en.md  |  4 +
 s2-site/docs/api/basic-class/base-bbox.zh.md  | 29 +++++++
 s2-site/docs/api/basic-class/base-cell.zh.md  |  2 +
 s2-site/docs/api/basic-class/base-facet.zh.md | 76 +++++++++++++------
 s2-site/docs/api/basic-class/hierarchy.en.md  |  4 +
 s2-site/docs/api/basic-class/hierarchy.zh.md  | 27 +++++++
 .../docs/api/basic-class/interaction.zh.md    | 10 +--
 s2-site/docs/api/basic-class/node.zh.md       |  9 ++-
 .../docs/api/basic-class/spreadsheet.zh.md    |  8 +-
 s2-site/docs/api/basic-class/store.zh.md      |  4 +-
 s2-site/docs/api/graphic.zh.md                |  2 +-
 .../docs/manual/advanced/custom/hook.zh.md    |  2 +-
 s2-site/docs/manual/basic/conditions.zh.md    |  2 +-
 14 files changed, 139 insertions(+), 48 deletions(-)
 create mode 100644 s2-site/docs/api/basic-class/base-bbox.en.md
 create mode 100644 s2-site/docs/api/basic-class/base-bbox.zh.md
 create mode 100644 s2-site/docs/api/basic-class/hierarchy.en.md
 create mode 100644 s2-site/docs/api/basic-class/hierarchy.zh.md

diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
index 1cd3eeec29..7791a5038e 100644
--- a/packages/s2-core/src/facet/base-facet.ts
+++ b/packages/s2-core/src/facet/base-facet.ts
@@ -1683,7 +1683,7 @@ export abstract class BaseFacet {
   }
 
   /**
-   * 获取表头节点 (角头,序号, 行头,列头) (含可视区域)
+   * 获取表头节点 (角头,序号,行头,列头) (含可视区域)
    * @example 获取全部: facet.getHeaderNodes()
    * @example 获取一组 facet.getHeaderNodes(['root[&]浙江省[&]宁波市', 'root[&]浙江省[&]杭州市'])
    */
@@ -1958,7 +1958,7 @@ export abstract class BaseFacet {
   }
 
   /**
-   * 获取角头单元格
+   * 获取角头单元格 (不含可视区域)
    */
   public getCornerCells(): CornerCell[] {
     return filter(
@@ -1968,14 +1968,14 @@ export abstract class BaseFacet {
   }
 
   /**
-   * 获取序号单元格
+   * 获取序号单元格 (不含可视区域)
    */
   public abstract getSeriesNumberCells():
     | SeriesNumberCell[]
     | TableSeriesNumberCell[];
 
   /**
-   * 获取表头单元格 (角头,行头,列头) (不含可视区域)
+   * 获取表头单元格 (序号,角头,行头,列头) (不含可视区域)
    * @example 获取全部: facet.getHeaderCells()
    * @example 获取一组 facet.getHeaderCells(['root[&]浙江省[&]宁波市', 'root[&]浙江省[&]杭州市'])
    */
diff --git a/s2-site/docs/api/basic-class/base-bbox.en.md b/s2-site/docs/api/basic-class/base-bbox.en.md
new file mode 100644
index 0000000000..e84569f1a6
--- /dev/null
+++ b/s2-site/docs/api/basic-class/base-bbox.en.md
@@ -0,0 +1,4 @@
+---
+title: BaseBBox
+order: 9
+---
diff --git a/s2-site/docs/api/basic-class/base-bbox.zh.md b/s2-site/docs/api/basic-class/base-bbox.zh.md
new file mode 100644
index 0000000000..647fc39b4c
--- /dev/null
+++ b/s2-site/docs/api/basic-class/base-bbox.zh.md
@@ -0,0 +1,29 @@
+---
+title: BaseBBox
+order: 9
+---
+
+功能描述：盒模型。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/bbox/baseBBox.ts)
+
+```ts
+bbox.x
+```
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| facet | 当前可视渲染区域 | [BaseFacet](/api/basic-class/base-facet) |
+| spreadsheet | 表格实例 | [SpreadSheet](/api/basic-class/spreadsheet) |
+| layoutResult | 布局信息 | [LayoutResult](/api/basic-class/base-facet#layoutresult) |
+| x | x 坐标 | `number` |
+| y | y 坐标 | `number` |
+| minX | 最小 x 坐标  | `number` |
+| minY | 最小 y 坐标  | `number` |
+| maxX | 最大 x 坐标  | `number` |
+| maxY | 最大 y 坐标 | `number` |
+| width | 宽度 | `number` |
+| height | 高度 | `number` |
+| originalWidth | 未裁剪时的原始宽度 | `number` |
+| originalHeight | 未裁剪时的原始高度 | `number` |
+| viewportWidth | 视口宽度，数据少时可能小于 bbox 的宽 | `number` |
+| viewportHeight | 视口高度，数据少时可能小于 bbox 的高 | `number` |
+| calculateBBox | 计算盒模型 | () => void |
diff --git a/s2-site/docs/api/basic-class/base-cell.zh.md b/s2-site/docs/api/basic-class/base-cell.zh.md
index a87760e391..176826e00a 100644
--- a/s2-site/docs/api/basic-class/base-cell.zh.md
+++ b/s2-site/docs/api/basic-class/base-cell.zh.md
@@ -76,6 +76,7 @@ export enum CellType {
   COL_CELL = 'colCell',
   CORNER_CELL = 'cornerCell',
   MERGED_CELL = 'mergedCell',
+  SERIES_NUMBER_CELL = 'seriesNumberCell',
 }
 ```
 
@@ -91,5 +92,6 @@ export type S2CellType<T extends SimpleBBox = ViewMeta> =
   | CornerCell
   | RowCell
   | MergedCell
+  | SeriesNumberCell
   | BaseCell<T>;
 ```
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 1a6ac8ce68..88db6d2b7c 100644
--- a/s2-site/docs/api/basic-class/base-facet.zh.md
+++ b/s2-site/docs/api/basic-class/base-facet.zh.md
@@ -12,21 +12,21 @@ s2.facet.getRealWidth()
 | 参数 | 说明 | 类型 | 版本 |
 | --- | --- | --- | --- |
 | spreadsheet | 表格实例 |  [SpreadSheet](/docs/api/basic-class/spreadsheet) |
-| cornerBBox | 角头区域包围盒 |  [BBox](/docs/api/basic-class/spreadsheet/#bbox) |
-| panelBBox | 数值区域包围盒 | [BBox](/docs/api/basic-class/spreadsheet/#bbox) |
-| backgroundGroup | 背景区域 |  [Group](https://g.antv.vision/zh/docs/api/group) |
-| panelGroup | 数值区域 | [Group](https://g.antv.vision/zh/docs/api/group) |
-| foregroundGroup | 前景区域 |  [Group](https://g.antv.vision/zh/docs/api/group) |
+| cornerBBox | 角头区域包围盒 |  [BBox](/docs/api/basic-class/base-bbox) |
+| panelBBox | 数值区域包围盒 | [BBox](/docs/api/basic-class/base-bbox) |
+| backgroundGroup | 背景区域 |  [Group](https://g.antv.antgroup.com/docs/api/group) |
+| panelGroup | 数值区域 | [Group](https://g.antv.antgroup.com/docs/api/group) |
+| foregroundGroup | 前景区域 |  [Group](https://g.antv.antgroup.com/docs/api/group) |
 | getLayoutResult | 获取布局信息 （角头，序号，行头，列头） |  () => [LayoutResult](#layoutresult) |
 | viewCellWidths | 单元格宽度信息 | `number[]` |
-| hScrollBar | 数值区域水平滚动条 | () =>  [Group](https://g.antv.vision/zh/docs/api/group) |
-| hRowScrollBar | 行头区域水平滚动条 | () =>  [Group](https://g.antv.vision/zh/docs/api/group) |
-| vScrollBar | 数值区域垂直滚动条 | () =>  [Group](https://g.antv.vision/zh/docs/api/group) |
+| hScrollBar | 数值区域水平滚动条 | () =>  [Group](https://g.antv.antgroup.com/docs/api/group) |
+| hRowScrollBar | 行头区域水平滚动条 | () =>  [Group](https://g.antv.antgroup.com/docs/api/group) |
+| vScrollBar | 数值区域垂直滚动条 | () =>  [Group](https://g.antv.antgroup.com/docs/api/group) |
 | rowHeader | 行头 |  [BaseHeaderConfig](#baseheaderconfig) |
 | columnHeader | 列头 |  [BaseHeaderConfig](#baseheaderconfig)  |
 | cornerHeader | 角头 |  [BaseHeaderConfig](#baseheaderconfig)  |
 | seriesNumberHeader | 序号 |  [BaseHeaderConfig](#baseheaderconfig)  |
-| centerFrame | 框架 |  [Group](https://g.antv.vision/zh/docs/api/group) |
+| centerFrame | 框架 |  [Group](https://g.antv.antgroup.com/docs/api/group) |
 | gridInfo | 网格信息 |  [GridInfo](#gridinfo) |
 | getViewCellHeights | 获取单元格高度信息 | () => [ViewCellHeights](#viewcellheights) |
 | scrollBarTheme | 滚动条主题 | [ScrollBarTheme](/docs/api/general/S2Theme/#scrollbartheme) |
@@ -69,18 +69,52 @@ s2.facet.getRealWidth()
 | addCell | 添加单元格 | (cell: [BaseCell](/docs/api/basic-class/base-cell)) => void |
 | drawGrid | 绘制网格 | () => void |
 | getCanvasSize | 获取画布宽高 | `{width: number, height: number}` |
-| backgroundGroup | 背景颜色区域 group                                                                                                           | [Group](https://g.antv.vision/zh/docs/api/group) |    |
-| foregroundGroup | 背景颜色区域 group                                                                                                           |  [Group](https://g.antv.vision/zh/docs/api/group) |    |
-| panelGroup | 可视范围单元格区域 group                                                                                                        |  [Group](https://g.antv.vision/zh/docs/api/group) |    |
-| panelScrollGroup | 可视范围单元格滚动区域 group                                                                                                      |  [Group](https://g.antv.vision/zh/docs/api/group) |    |
-| frozenRowGroup | 行头冻结区域 group                                                                                                           |  [Group](https://g.antv.vision/zh/docs/api/group) |    |
-| frozenColGroup | 列头冻结区域 group                                                                                                           |  [Group](https://g.antv.vision/zh/docs/api/group) |    |
-| frozenTrailingRowGroup | 行头底部冻结区域 group                                                                                                         |  [Group](https://g.antv.vision/zh/docs/api/group) |    |
-| frozenTrailingColGroup | 列头底部冻结区域 group                                                                                                         |  [Group](https://g.antv.vision/zh/docs/api/group) |    |
-| frozenTopGroup | 顶部冻结区域 group                                                                                                           |  [Group](https://g.antv.vision/zh/docs/api/group) |    |
-| frozenBottomGroup | 底部冻结区域 group                                                                                                           |  [Group](https://g.antv.vision/zh/docs/api/group) |    |
-| getHiddenColumnsInfo | 匹配当前节点是否是隐藏节点，如果是，则返回该节点隐藏信息 | (node: [Node](/docs/api/basic-class/node)) => [HiddenColumnsInfo](/docs/api/basic-class/store#hiddencolumnsinfo) \| `null`  | `1.34.1` |
+| backgroundGroup | 背景颜色区域 group                                                                                                           | [Group](https://g.antv.antgroup.com/docs/api/group) |    |
+| foregroundGroup | 背景颜色区域 group                                                                                                           |  [Group](https://g.antv.antgroup.com/docs/api/group) |    |
+| panelGroup | 可视范围单元格区域 group                                                                                                        |  [Group](https://g.antv.antgroup.com/docs/api/group) |    |
+| panelScrollGroup | 可视范围单元格滚动区域 group                                                                                                      |  [Group](https://g.antv.antgroup.com/docs/api/group) |    |
+| frozenRowGroup | 行头冻结区域 group                                                                                                           |  [Group](https://g.antv.antgroup.com/docs/api/group) |    |
+| frozenColGroup | 列头冻结区域 group                                                                                                           |  [Group](https://g.antv.antgroup.com/docs/api/group) |    |
+| frozenTrailingRowGroup | 行头底部冻结区域 group                                                                                                         |  [Group](https://g.antv.antgroup.com/docs/api/group) |    |
+| frozenTrailingColGroup | 列头底部冻结区域 group                                                                                                         |  [Group](https://g.antv.antgroup.com/docs/api/group) |    |
+| frozenTopGroup | 顶部冻结区域 group                                                                                                           |  [Group](https://g.antv.antgroup.com/docs/api/group) |    |
+| frozenBottomGroup | 底部冻结区域 group                                                                                                           |  [Group](https://g.antv.antgroup.com/docs/api/group) |    |
+| getHiddenColumnsInfo | 匹配当前节点是否是隐藏节点，如果是，则返回该节点隐藏信息 | (node: [Node](/docs/api/basic-class/node)) => [HiddenColumnsInfo](/docs/api/basic-class/store#hiddencolumnsinfo) \| `null`  |  |
+| getHeaderNodes | 获取表头节点 （角头，序号，行头，列头） （含可视区域） | (ids?: string[]) => [Node](/docs/api/basic-class/node)[]  |  |
+| getSeriesNumberNodes | 获取序号节点 | () => [Node](/docs/api/basic-class/node)[]  |  |
 | getCornerNodes | 获取角头节点 | () => [Node](/docs/api/basic-class/node)[]  | `1.40.0` |
+| getRowNodes | 获取行头节点 | (level?: number) => [Node](/docs/api/basic-class/node)[]  |  |
+| getRowNodeById | 根据 id 获取单个行头节点 | (id: string) => [Node](/docs/api/basic-class/node)  |  |
+| getRowNodeByIndex | 根据行头索引获取指定列头节点 | (rowIndex: number) => [Node](/docs/api/basic-class/node)  |  |
+| getRowNodesByField | 根据 field 获取行头节点 | (field: string) => [Node](/docs/api/basic-class/node)[]  |  |
+| getRowLeafNodes | 获取行头单元格叶子节点 | () => [Node](/docs/api/basic-class/node)[]  |  |
+| getRowLeafNodeByIndex | 根据行头索引获取指定列头叶子节点 | () => [Node](/docs/api/basic-class/node)[]  |  |
+| getRowTotalsNodes | 获取行头单元格节点 | (level?; number) => [Node](/docs/api/basic-class/node)[]  |  |
+| getRowSubTotalsNodes | 获取行头单元格节点 | (level?; number) => [Node](/docs/api/basic-class/node)[]  |  |
+| getRowGrandTotalsNodes | 获取行头单元格节点 | (level?: number) => [Node](/docs/api/basic-class/node)[]  |  |
+| getColNodes | 获取行头节点 | (level?: number) => [Node](/docs/api/basic-class/node)[]  |  |
+| getColNodeById | 根据 id 获取单个行头节点 | (id: string) => [Node](/docs/api/basic-class/node)  |  |
+| getColNodeByIndex | 根据行头索引获取指定列头节点 | (colIndex: number) => [Node](/docs/api/basic-class/node)  |  |
+| getColNodesByField | 根据 field 获取行头节点 | (field: string) => [Node](/docs/api/basic-class/node)[]  |  |
+| getColLeafNodes | 获取行头单元格叶子节点 | () => [Node](/docs/api/basic-class/node)[]  |  |
+| getColLeafNodeByIndex | 根据行头索引获取指定列头叶子节点 | () => [Node](/docs/api/basic-class/node)[]  |  |
+| getColTotalsNodes | 获取行头单元格节点 | (level?; number) => [Node](/docs/api/basic-class/node)[]  |  |
+| getColSubTotalsNodes | 获取行头单元格节点 | (level?; number) => [Node](/docs/api/basic-class/node)[]  |  |
+| getColGrandTotalsNodes | 获取行头单元格节点 | (level?: number) => [Node](/docs/api/basic-class/node)[]  |  |
+| getDataCells | 获取数值单元格 （不含可视区域） | () => [DataCell](/docs/api/basic-class/base-cell)[]  |  |
+| getRowCells | 获取行头单元格 （不含可视区域） | () => [RowCell](/docs/api/basic-class/base-cell)[]  |  |
+| getRowLeafCells | 获取行头叶子节点单元格 （不含可视区域） | () => [RowCell](/docs/api/basic-class/base-cell)[]  |  |
+| getColCells | 获取列头单元格 （不含可视区域） | () => [ColCell](/docs/api/basic-class/base-cell)[]  |  |
+| getColCells | 获取列头叶子节点单元格 （不含可视区域） | () => [ColCell](/docs/api/basic-class/base-cell)[]  |  |
+| getMergedCells | 获取合并单元格 （不含可视区域） | () => [MergedCell](/docs/api/basic-class/base-cell)[]  |  |
+| getCornerCells | 获取角头单元格 （不含可视区域） | () => [CornerCell](/docs/api/basic-class/base-cell)[]  |  |
+| getSeriesNumberCells | 获取序号单元格 （不含可视区域） | () => [SeriesNumberCell](/docs/api/basic-class/base-cell)[]  |  |
+| getHeaderCells | 获取表头单元格 （序号，角头，行头，列头） （不含可视区域） | (cellIds?: string[]) => [S2CellType](/docs/api/basic-class/base-cell)[]  |  |
+| getCellById | 根据单元格 id 获取指定单元格 （不含可视区域） | (id: string) => [S2CellType](/docs/api/basic-class/base-cell)[]  |  |
+| getCellsByField | 根据单元格 field 获取指定单元格 （不含可视区域） | (field: string) => [S2CellType](/docs/api/basic-class/base-cell)[]  |  |
+| getCells | 获取所有单元格 （角头，行头，列头，数值） （不含可视区域） | (ids: string[]) => [S2CellType](/docs/api/basic-class/base-cell)[]  |  |
+| getInitColLeafNodes | 获取初始化时的记录的列头叶子节点 | () => [Node](/docs/api/basic-class/node)[] |  |
+| clearInitColLeafNodes | 清楚初始化时的记录的列头叶子节点 | () => void |  |
 
 ### CellScrollOffset
 
@@ -104,8 +138,6 @@ export interface LayoutResult {
   rowsHierarchy: Hierarchy;
   rowLeafNodes: Node[];
   colLeafNodes: Node[];
-  getCellMeta: GetCellMeta;
-  spreadsheet: SpreadSheet;
 }
 ```
 
diff --git a/s2-site/docs/api/basic-class/hierarchy.en.md b/s2-site/docs/api/basic-class/hierarchy.en.md
new file mode 100644
index 0000000000..b0e1bf0e02
--- /dev/null
+++ b/s2-site/docs/api/basic-class/hierarchy.en.md
@@ -0,0 +1,4 @@
+---
+title: Hierarchy
+order: 8
+---
diff --git a/s2-site/docs/api/basic-class/hierarchy.zh.md b/s2-site/docs/api/basic-class/hierarchy.zh.md
new file mode 100644
index 0000000000..7d835af4dd
--- /dev/null
+++ b/s2-site/docs/api/basic-class/hierarchy.zh.md
@@ -0,0 +1,27 @@
+---
+title: Hierarchy
+order: 8
+---
+
+功能描述：节点层级结构。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/layout/hierarchy.ts)
+
+```ts
+hierarchy.sampleNodesForAllLevels
+```
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| rows | 行头维度字段 | `string[]` |
+| width | 层级宽度 | `number` |
+| height | 层级高度 | `number` |
+| maxLevel | 层级最大层级 | `number` |
+| sampleNodesForAllLevels | 所有层级的采样节点 | [Node](/docs/api/basic-class/node)[] |
+| sampleNodeForLastLevel | 最大层级的采样节点 | [Node](/docs/api/basic-class/node) |
+| allNodesWithoutRoot | 除根节点的所有节点 | [Node](/docs/api/basic-class/node)[] |
+| indexNode | 索引节点 | [Node](/docs/api/basic-class/node)[] |
+| getLeaves | 获取所有叶子节点 | () => [Node](/docs/api/basic-class/node)[] |
+| getNodes | 获取节点 | (level?: number) => [Node](/docs/api/basic-class/node)[] |
+| getNodesLessThanLevel | 获取小于指定层级的节点 | (lessThanLevel: number) => [Node](/docs/api/basic-class/node)[] |
+| pushNode | 添加节点 | (node: [Node](/docs/api/basic-class/node), insetIndex: number) => void |
+| pushIndexNode | 添加索引节点 | (node: [Node](/docs/api/basic-class/node)) => void |
+| getIndexNodes | 获取索引节点 | () => [Node](/docs/api/basic-class/node)[] |
diff --git a/s2-site/docs/api/basic-class/interaction.zh.md b/s2-site/docs/api/basic-class/interaction.zh.md
index f886da85fd..a5d291e8a7 100644
--- a/s2-site/docs/api/basic-class/interaction.zh.md
+++ b/s2-site/docs/api/basic-class/interaction.zh.md
@@ -30,18 +30,13 @@ s2.interaction.reset()
 | isHoverFocusState | 是否是悬停聚焦状态 （悬停在单元格 `focusTime`: 默认 800ms 后）       | `() => void` |
 | isSelectedCell | 是否是选中的单元格                                        | (cell: [S2CellType](#s2celltype)) => void |
 | isActiveCell | 是否是激活的单元格                                        | (cell: [S2CellType](#s2celltype)) => void |
-| getCells | 获取当前 interaction 记录的 Cells 元信息列表，包括不在视口内的格子      | `() => Partial<ViewMeta>[]` |
+| getCells | 获取当前 interaction 记录的 Cells 元信息列表，包括不在可视范围内的单元格      | `() => Partial<ViewMeta>[]` |
 | getActiveCells | 获取当前在可视区域的单元格实例                                  | `() => S2CellType[]` |
 | clearStyleIndependent | 清除单元格样式                                          | `() => void` |
-| getPanelGroupAllUnSelectedDataCells | 获取可视区域内选中的数值单元格                                  | `() => DataCell[]` |
-| getPanelGroupAllDataCells | 获取可视区域内的所有数值单元格                                  | `() => DataCell[]` |
-| getAllRowHeaderCells | 获取行头单元格                                          | `() => RowCell[]` |
-| getAllColHeaderCells | 获取列头单元格                                          | `() => ColCell[]` |
-| getRowColActiveCells | 获取行头和列头激活的单元格                                    | `() => RowCell[] \| ColCell[]` |
+| getUnSelectedDataCells | 获取可视区域内选中的数值单元格                                  | `() => DataCell[]` |
 | getAllCells | 获取所有可视区域内的单元格                                    | () => [S2CellType](#s2celltype)[] |
 | selectAll | 选中所有单元格                                          | `() => void` |
 | selectHeaderCell | 选中指定行列头单元格                                       | (selectHeaderCellInfo: [SelectHeaderCellInfo](#selectheadercellinfo)) => boolean |
-| getCellChildrenNodes | 获取当前单元格的所有子节点                                    | (cell: [S2CellType](#s2celltype)) => [Node]((/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` |
@@ -102,6 +97,7 @@ type S2CellType<T extends SimpleBBox = ViewMeta> =
   | CornerCell
   | RowCell
   | MergedCell
+  | SeriesNumberCell
   | BaseCell<T>;
 ```
 
diff --git a/s2-site/docs/api/basic-class/node.zh.md b/s2-site/docs/api/basic-class/node.zh.md
index c254000dbc..ee32ab85c5 100644
--- a/s2-site/docs/api/basic-class/node.zh.md
+++ b/s2-site/docs/api/basic-class/node.zh.md
@@ -12,7 +12,7 @@ node.isTotals // false
 | 参数 | 说明 | 类型 |
 | --- | --- | --- |
 | id | 节点 id | `string` |
-| key | 节点 key | `string` |
+| field | 节点 key | `string` |
 | value | 节点值 | `string` |
 | level | 节点等级 | `number` |
 | rowIndex | 行头索引 | `number` |
@@ -22,13 +22,13 @@ node.isTotals // false
 | isSubTotals | 是否是小计 | `boolean` |
 | isGrandTotals | 是否是总计 | `boolean` |
 | isCollapsed | 是否展开 | `boolean` |
-| hierarchy | 层级结构 | [Hierarchy](#) |
+| hierarchy | 层级结构 | [Hierarchy](/docs/api/basic-class/hierarchy) |
 | isPivotMode | 是否是透视表 | `boolean` |
 | seriesNumberWidth | 序号宽度 | `number` |
 | field | dataCfg 对应的 field | `string` |
 | spreadsheet | 表格实例 | [SpreadSheet](/docs/api/basic-class/spreadsheet)  |
-| query | 当前节点对应的数据 | `Record<string, any>` |
-| belongsCell | 对应的单元格 | [S2CellType](/docs/api/basic-class/base-cell)  |
+| query | 当前节点对应的查询条件 [详情](/manual/advanced/get-cell-data) | `Record<string, any>` |
+| belongsCell | 当前节点对应的单元格 | [S2CellType](/docs/api/basic-class/base-cell)  |
 | isTotalMeasure | 是否是数值小计 | `boolean` |
 | isCollapseNode | 是否展开的节点 | `boolean` |
 | isSeriesNumberNode | 是否是序号列节点 | () => `boolean` |
@@ -40,3 +40,4 @@ node.isTotals // false
 | padding | 间距 | `number` |
 | hiddenChildNodeInfo | 隐藏的子节点信息 | [hiddenColumnsInfo](/api/basic-class/store#hiddencolumnsinfo) |
 | children | 子节点 | [Node[]](/docs/api/basic-class/node)  |
+| extra | 节点额外信息 | `Record<string, any>` |
diff --git a/s2-site/docs/api/basic-class/spreadsheet.zh.md b/s2-site/docs/api/basic-class/spreadsheet.zh.md
index bbfa9a86cc..1df7d2dd0f 100644
--- a/s2-site/docs/api/basic-class/spreadsheet.zh.md
+++ b/s2-site/docs/api/basic-class/spreadsheet.zh.md
@@ -21,7 +21,7 @@ s2.isPivotMode()
 | dataSet | 表格数据集 （字段，数据，排序）                                                                                                       | [BaseDataSet](/docs/api/basic-class/base-data-set) |    |
 | facet | 当前可视渲染区域                                                                                                               | [BaseFacet](/docs/api/basic-class/base-facet) |    |
 | tooltip | tooltip                                                                                                                | [BaseTooltip](/docs/api/basic-class/base-tooltip) |    |
-| container | g-canvas 实例                                                                                                            | [Canvas](https://g.antv.vision/zh/docs/api/canvas) |    |
+| container | g-canvas 实例                                                                                                            | [Canvas](https://g.antv.antgroup.com/docs/api/canvas) |    |
 | interaction | 交互                                                                                                                     |  [Interaction](/zh/docs/api/basic-class/interaction) |    |
 | hdAdapter | 高清适配                                                                                                                   | [HdAdapter](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/hd-adapter/index.ts) |    |
 | on | 事件订阅                                                                                                                   | (event: [S2Event](/docs/manual/advanced/interaction/basic), listener: () => void) => void |    |
@@ -50,10 +50,6 @@ s2.isPivotMode()
 | getContentHeight | 获取当前表格实际内容高度                                                                                                           | `() => number` |    |
 | changeSheetSize  | 修改表格画布大小，不用重新加载数据                                                                                                      | `(width?: number, height?: number) => void` |    |
 | getLayoutWidthType | 获取单元格宽度布局类型（LayoutWidthType: `adaptive（自适应）` \| `colAdaptive（列自适应）` \| `compact（紧凑）`） | () => `LayoutWidthType`|    |
-| getRowNodes | 获取行头节点                                                                                                                 | (level: number) => [Node[]](/docs/api/basic-class/node/) |    |
-| getRowLeafNodes | 获取行头叶子节点                                                                                                               | () => [Node[]](/docs/api/basic-class/node/) |    |
-| facet.getColNodes | 获取列头节点                                                                                                                 | (level: number) => [Node[]](/docs/api/basic-class/node/) |    |
-| facet.getColLeafNodes | 获取列头叶子节点                                                                                                               | () => [Node[]](/docs/api/basic-class/node/) |    |
 | updateScrollOffset | 更新滚动偏移                                                                                                                 | (config: [OffsetConfig](#offsetconfig)) => void |    |
 | getCell | 根据 event.target 获取当前 单元格                                                                                               | (target: [EventTarget](https://developer.mozilla.org/zh-CN/docs/Web/API/Event/target)) => [S2CellType](/docs/api/basic-class/base-cell#s2celltype) |    |
 | getCellType | 根据 event.target 获取当前 单元格类型                                                                                             | (target: [EventTarget](https://developer.mozilla.org/zh-CN/docs/Web/API/Event/target)) => [CellType](/docs/api/basic-class/base-cell#celltypes) |    |
@@ -111,7 +107,7 @@ export enum CellType {
 
 ### BBox
 
-功能描述：盒模型
+功能描述：盒模型。[详情](/docs/api/basic-class/base-bbox)
 
 ```ts
 type BBox = {
diff --git a/s2-site/docs/api/basic-class/store.zh.md b/s2-site/docs/api/basic-class/store.zh.md
index 77b0581e18..0ffb4be6db 100644
--- a/s2-site/docs/api/basic-class/store.zh.md
+++ b/s2-site/docs/api/basic-class/store.zh.md
@@ -22,8 +22,8 @@ s2.store.set('key', value) // 存储
 | interactionStateInfo | 当前交互状态信息 | `number` |
 | drillDownFieldInLevel | 下钻节点层级信息 | [PartDrillDownInfo[]](#partdrilldowninfo) |
 | originalDataCfg | 原始数据配置 | [S2DataConfig](/docs/api/general/S2DataConfig)|
-| panelBBox | 可视区域包裹盒模型 | [BBox](/docs/api/basic-class/spreadsheet/#bbox) |
-| activeResizeArea | 当前调整大小区域 group | [Group](https://g.antv.vision/zh/docs/api/group) |
+| panelBBox | 可视区域包裹盒模型 | [BBox](/docs/api/basic-class/base-bbox) |
+| activeResizeArea | 当前调整大小区域 group | [Group](https://g.antv.antgroup.com/docs/api/group) |
 | valueRanges | 条件格式值区间 | [ValueRanges](#valueranges) |
 | initColLeafNodes | 初次渲染时的列头叶子节点 | [Node[]](/docs/api/basic-class/node)|
 | hiddenColumnsDetail | 隐藏的列头详情 | [HiddenColumnsInfo[]](#hiddencolumnsinfo) |
diff --git a/s2-site/docs/api/graphic.zh.md b/s2-site/docs/api/graphic.zh.md
index 7c92aff545..61e679d8ce 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.antgroup.com/docs/guide/introduce) 作为绘图引擎。一些图形的样式配置，如单元格的 `fill` 属性，`stroke` 属性，以及绘制字体的 `fontFamily` 和 `fontSize` 等，都是直接透传 [AntV/G 的绘图属性](https://g.antv.antgroup.com/docs/api/shape/attrs)。
 
 这里对 S2 常用的绘图属性进行简单介绍：
 
diff --git a/s2-site/docs/manual/advanced/custom/hook.zh.md b/s2-site/docs/manual/advanced/custom/hook.zh.md
index 1dcb0be07c..1dbff2db3b 100644
--- a/s2-site/docs/manual/advanced/custom/hook.zh.md
+++ b/s2-site/docs/manual/advanced/custom/hook.zh.md
@@ -51,7 +51,7 @@ order: 1
 
 ## cornerHeader
 
-改变角头的默认实现，需要继承自 [Group](https://g.antv.vision/zh/docs/api/group)，覆盖某些方法，比如渲染内容更换等。[例子](/examples/custom/custom-cell#corner-cell)
+改变角头的默认实现，需要继承自 [Group](https://g.antv.antgroup.com/docs/api/group)，覆盖某些方法，比如渲染内容更换等。[例子](/examples/custom/custom-cell#corner-cell)
 
 ## frame
 
diff --git a/s2-site/docs/manual/basic/conditions.zh.md b/s2-site/docs/manual/basic/conditions.zh.md
index 9a7c82e97b..e15e8a77cf 100644
--- a/s2-site/docs/manual/basic/conditions.zh.md
+++ b/s2-site/docs/manual/basic/conditions.zh.md
@@ -135,7 +135,7 @@ const s2Options = {
 
 ### 渐变柱状图
 
-`S2` 的底层图形绘制采用 [AntV/g](https://g.antv.vision/zh/docs/guide/introduce) 渲染引擎 ，借助其强大的绘制能力，`fill` 字段不仅仅是颜色属性，还可以使用 [渐变色](https://g.antv.vision/zh/docs/api/shape/attrs#%E6%B8%90%E5%8F%98%E8%89%B2)、[纹理](https://g.antv.vision/zh/docs/api/shape/attrs#%E7%BA%B9%E7%90%86) 等。
+`S2` 的底层图形绘制采用 [AntV/g](https://g.antv.antgroup.com/docs/guide/introduce) 渲染引擎 ，借助其强大的绘制能力，`fill` 字段不仅仅是颜色属性，还可以使用 [渐变色](https://g.antv.antgroup.com/docs/api/shape/attrs#%E6%B8%90%E5%8F%98%E8%89%B2)、[纹理](https://g.antv.antgroup.com/docs/api/shape/attrs#%E7%BA%B9%E7%90%86) 等。
 
 `price` 字段使用渐变色：
 <Playground path="analysis/conditions/demo/gradient-interval.ts" rid='gradient'></playground>

From 3c19214255abd519b72078acbe5c96eb81de2fb2 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Thu, 28 Dec 2023 11:34:53 +0800
Subject: [PATCH 10/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20API=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/api/basic-class/spreadsheet.zh.md    |  2 +-
 .../docs/api/components/advanced-sort.zh.md   |  6 +--
 s2-site/docs/api/components/drill-down.zh.md  | 29 +++++++-----
 s2-site/docs/api/components/export.zh.md      |  2 +-
 s2-site/docs/api/components/header.zh.md      | 22 ++++-----
 .../docs/api/components/sheet-component.zh.md | 46 +++++++++++--------
 s2-site/docs/api/components/switcher.zh.md    | 20 ++++----
 7 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/s2-site/docs/api/basic-class/spreadsheet.zh.md b/s2-site/docs/api/basic-class/spreadsheet.zh.md
index 1df7d2dd0f..bf25a114ae 100644
--- a/s2-site/docs/api/basic-class/spreadsheet.zh.md
+++ b/s2-site/docs/api/basic-class/spreadsheet.zh.md
@@ -20,7 +20,7 @@ s2.isPivotMode()
 | options | 表格配置                                                                                                                   | [S2Options](/docs/api/general/S2Options) |    |
 | dataSet | 表格数据集 （字段，数据，排序）                                                                                                       | [BaseDataSet](/docs/api/basic-class/base-data-set) |    |
 | facet | 当前可视渲染区域                                                                                                               | [BaseFacet](/docs/api/basic-class/base-facet) |    |
-| tooltip | tooltip                                                                                                                | [BaseTooltip](/docs/api/basic-class/base-tooltip) |    |
+| tooltip | 提示信息                                                                                                                | [BaseTooltip](/docs/api/basic-class/base-tooltip) |    |
 | container | g-canvas 实例                                                                                                            | [Canvas](https://g.antv.antgroup.com/docs/api/canvas) |    |
 | interaction | 交互                                                                                                                     |  [Interaction](/zh/docs/api/basic-class/interaction) |    |
 | hdAdapter | 高清适配                                                                                                                   | [HdAdapter](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/hd-adapter/index.ts) |    |
diff --git a/s2-site/docs/api/components/advanced-sort.zh.md b/s2-site/docs/api/components/advanced-sort.zh.md
index 0499188cf5..7d8178ae13 100644
--- a/s2-site/docs/api/components/advanced-sort.zh.md
+++ b/s2-site/docs/api/components/advanced-sort.zh.md
@@ -3,7 +3,7 @@ title: 高级排序
 order: 4
 ---
 
-## React 高级排序组件
+## React 高级排序组件 <Badge>@antv/s2-react</Badge>
 
 ### AdvancedSortProps
 
@@ -71,7 +71,3 @@ order: 4
 | sortMethod | 排序方式（升/降序） | `ASC` \| `DESC` \| `asc` \| `desc` |  |  |
 | sortBy | 自定义排序列表 | `string[]` |  |  |
 | sortByMeasure | 类 | `string` |  |  |
-
-## Vue 高级排序组件
-
-开发中，敬请期待
diff --git a/s2-site/docs/api/components/drill-down.zh.md b/s2-site/docs/api/components/drill-down.zh.md
index 2f557d7ff6..1015f74750 100644
--- a/s2-site/docs/api/components/drill-down.zh.md
+++ b/s2-site/docs/api/components/drill-down.zh.md
@@ -3,37 +3,44 @@ title: 维度下钻
 order: 2
 ---
 
-## React 下钻组件
+:::warning{title="注意"}
+维度下钻功能需要满足以下两个前置条件：
+
+- 透视表，即 `sheetType="pivot"`
+- 树状模式，即 `hierarchyType="tree"`
+:::
+
+## React 下钻组件 <Badge>@antv/s2-react</Badge>
+
+​查看 [示例](/examples/react-component/drill-dwon#for-pivot)
 
 ```jsx
 const s2Options = {
   width: 600,
   height: 480,
-  hierarchyType: 'tree', // 树形结构
+  hierarchyType: 'tree'
 };
 
 <SheetComponent
   options={s2Options}
   partDrillDown={PartDrillDown}
-  sheetType="pivot"  // 透视模式
+  sheetType="pivot"
 />
 ```
 
-​📊 查看 [React 版下钻 demo](/examples/react-component/drill-dwon#for-pivot)
+## Vue 下钻组件 <Badge type="success">@antv/s2-vue</Badge>
 
-## Vue 下钻组件
+[查看示例](https://codesandbox.io/s/vue-drilldown-demo-8p1lmv?file=/src/App.vue:6385-6396)
 
-下钻组件只有在表格，透视模式才能使用。
-
-```vue
+```tsx
 const s2Options = {
   width: 600,
   height: 480,
-  hierarchyType: 'tree',
+  hierarchyType: 'tree'
 };
 
 <template>
- <SheetComponent
+  <SheetComponent
     ref="s2"
     :sheetType="pivot"
     :partDrillDown="partDrillDown"
@@ -42,8 +49,6 @@ const s2Options = {
 </template>
 ```
 
-​📊 查看 [Vue 版下钻 demo](https://codesandbox.io/s/vue-drilldown-demo-8p1lmv?file=/src/App.vue:6385-6396)
-
 ## 公共 API
 
 <description>功能描述：配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻</description>
diff --git a/s2-site/docs/api/components/export.zh.md b/s2-site/docs/api/components/export.zh.md
index 616807136e..cafee88e2f 100644
--- a/s2-site/docs/api/components/export.zh.md
+++ b/s2-site/docs/api/components/export.zh.md
@@ -3,7 +3,7 @@ title: 导出
 order: 5
 ---
 
-## React 导出组件
+## React 导出组件 <Badge>@antv/s2-react</Badge>
 
 ```tsx
 <SheetComponent
diff --git a/s2-site/docs/api/components/header.zh.md b/s2-site/docs/api/components/header.zh.md
index 0210078015..eaa4973060 100644
--- a/s2-site/docs/api/components/header.zh.md
+++ b/s2-site/docs/api/components/header.zh.md
@@ -3,23 +3,25 @@ title: 表头
 order: 4
 ---
 
-## React 表头组件
+## React 表头组件 <Badge>@antv/s2-react</Badge>
 
 表格页头，位于表格容器顶部，起到了内容概览和表格工具栏的作用。由表标题、描述、导出、高级排序、指标切换和自定操作区组成。
 
-### 使用方式
+### 快速上手
 
 ```tsx
 <SheetComponent
-  dataCfg={ dataCfg }
-  options={ options }
   header={ {
     title: '表头标题',
     description: '表头描述',
-    exportCfg: { open: true }, // 开启导出功能
-    advancedSortCfg: { open: true }, // 开启高级排序功能
-    switcherCfg: { open: true }, // 开启维度切换功能
-    extra: <button> 插入内容 </button>, //自定义 ReactNode
+    // 开启导出功能
+    exportCfg: { open: true },
+    // 开启高级排序功能
+    advancedSortCfg: { open: true },
+    // 开启维度切换功能
+    switcherCfg: { open: true },
+    // 自定义 ReactNode
+    extra: <button> 插入内容 </button>,
   } }
 />
 ```
@@ -31,7 +33,3 @@ order: 4
 ### API
 
 <embed src="@/docs/common/header.zh.md"></embed>
-
-## Vue 表头组件
-
-开发中，敬请期待
diff --git a/s2-site/docs/api/components/sheet-component.zh.md b/s2-site/docs/api/components/sheet-component.zh.md
index c7e1ff872e..f66d166af2 100644
--- a/s2-site/docs/api/components/sheet-component.zh.md
+++ b/s2-site/docs/api/components/sheet-component.zh.md
@@ -3,11 +3,11 @@ title: 表组件
 order: 0
 ---
 
-# React 表组件
+## React 表组件 <Badge>@antv/s2-react</Badge>
 
 基于 `@antv/s2` 封装的 `React` 版开箱即用的组件 `<SheetComponent />`
 
-## SpreadsheetProps
+### SpreadsheetProps
 
 功能描述： React SheetComponent 组件的 props 参数
 
@@ -99,12 +99,16 @@ order: 0
 | onColCellBrushSelection | 批量选中刷选范围内的列头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: [ColCell](/docs/api/basic-class/base-cell)[]) => void; |  |  |
 | onRowCellBrushSelection | 批量选中刷选范围内的行头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: [RowCell](/docs/api/basic-class/base-cell)[]) => void; |  |  |
 
-## SheetComponentOptions
+### SheetComponentOptions
 
-React 组件 的 `options` 继承于 [S2Options](/docs/api/general/S2Options) , 有两点不同
+:::warning{title="注意"}
 
-- tooltip 的 content 从 `Element | string` 变为了 `ReactNode`, 即可以是任意的 `jsx` 元素
-- 分页配置从 S2 的分页配置 变为了 `antd` 的分页配置，即支持对 `antd` 分页组件 的 api 透传
+`@antv/s2-react` 组件的 `options` 继承于 [S2Options](/docs/api/general/S2Options) , 有两点不同
+
+- tooltip 的 content 从 `Element | string` 变为了 `ReactNode`, 即可以是任意的 `jsx` 元素。
+- 分页配置从 S2 的分页配置 **变为了 `antd` 的分页配置**，即支持对 `antd` 分页组件 的 api 透传。
+
+:::
 
 ```ts
 import type { Pagination, S2Options } from '@antv/s2';
@@ -118,11 +122,11 @@ type SheetComponentOptions = S2Options<
 
 <br/>
 
-# Vue 表组件
+## Vue 表组件 <Badge type="success">@antv/s2-vue</Badge>
 
 基于 `@antv/s2` 层封装的 `Vue 3.0` 版开箱即用的组件 `<SheetComponent />`
 
-## props
+### props
 
 功能描述： Vue SheetComponent 组件的 props，如 `<SheetComponent :sheetType="pivot" />`
 
@@ -136,7 +140,7 @@ type SheetComponentOptions = S2Options<
 | themeCfg | 自定义表格主题样式 | [ThemeCfg](/docs/api/general/S2Theme) |  |  |
 | loading | 控制表格的加载状态 | `boolean` |  |  |
 
-## events
+### events
 
 功能描述： Vue SheetComponent 组件的 events，`<SheetComponent @rowCellClick="handleRowCellClick" />`
 
@@ -219,11 +223,15 @@ type SheetComponentOptions = S2Options<
 | colCellBrushSelection | 批量选中刷选范围内的列头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: ColCell[]) => void; |  |  |
 | rowCellBrushSelection | 批量选中刷选范围内的行头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: RowCell[]) => void; |  |  |
 
-## SheetComponentOptions
+### SheetComponentOptions
+
+:::warning{title="注意"}
+
+`@antv/s2-vue` 组件 的 `options` 继承于 [S2Options](/docs/api/general/S2Options) , 有一点不同
 
-Vue 组件 的 `options` 继承于 [S2Options](/docs/api/general/S2Options) , 有一点不同
+- 分页配置从 S2 的分页配置 **变为了 `antd-vue` 的分页配置**，即支持对 `antd-vue` 分页组件 的 api 透传。
 
-- 分页配置从 S2 的分页配置 变为了 `antd-vue` 的分页配置，即支持对 `antd-vue` 分页组件 的 api 透传
+:::
 
 ```ts
 import type { Pagination, S2Options } from '@antv/s2';
@@ -235,9 +243,9 @@ type SheetComponentOptions = S2Options<
 >;
 ```
 
-# 公共对象
+## 公共对象
 
-## TargetCellInfo
+### TargetCellInfo
 
 功能描述：交互回调函数的返回信息。
 
@@ -249,7 +257,7 @@ type SheetComponentOptions = S2Options<
 
 <embed src="@/docs/common/sort-param.zh.md"></embed>
 
-## CellScrollPosition
+### CellScrollPosition
 
 功能描述：单元格滚动的位置信息。
 
@@ -258,16 +266,16 @@ type SheetComponentOptions = S2Options<
 | scrollX     | 水平方向滚动偏移量（相对滚动条轨道长度）  | `number` |        |      |
 | scrollY     | 垂直方向滚动偏移量（相对滚动条轨道长度）  | `number` |        |      |
 
-## HiddenColumnsInfo
+### HiddenColumnsInfo
 
-功能描述： 开启 [隐藏列头](/docs/manual/advanced/interaction/hide-columns) 后，隐藏列头的节点信息
+功能描述：开启 [隐藏列头](/docs/manual/advanced/interaction/hide-columns) 后，隐藏列头的节点信息
 
 | 参数 | 说明 | 类型 | 默认值 | 必选 |
 | -- | -- | -- | -- | --- |
 | hideColumnNodes | 当前隐藏的节点信息 | [Node](/docs/api/basic-class/node)[] |  |  |
 | displaySiblingNode | 展示的相邻节点信息 | { prev:[Node](/docs/api/basic-class/node);next: [Node](/docs/api/basic-class/node) } |  |  |
 
-## ResizeParams
+### ResizeParams
 
 功能描述：表格 resize（单元格行高列宽拖动变化）和单元格样式信息
 
@@ -276,7 +284,7 @@ type SheetComponentOptions = S2Options<
 | info | resize 配置信息 | [ResizeInfo](#resizeinfo) |  |  |
 | style | options 中样式相关配置 | [style](/docs/api/general/S2Options#style) |  |  |
 
-## ResizeInfo
+### ResizeInfo
 
 功能描述：表格 resize（ 单元格行高列宽拖动变化）配置信息
 
diff --git a/s2-site/docs/api/components/switcher.zh.md b/s2-site/docs/api/components/switcher.zh.md
index 838a33dca5..2bb560e08d 100644
--- a/s2-site/docs/api/components/switcher.zh.md
+++ b/s2-site/docs/api/components/switcher.zh.md
@@ -3,9 +3,9 @@ title: 维度切换组件
 order: 3
 ---
 
-# React 维度切换组件
+## React 维度切换组件 <Badge>@antv/s2-react</Badge>
 
-## Switcher 组件 Props
+### Switcher 组件 Props
 
 | 属性 | 说明 | 类型 | 默认值 | 必选 |
 | -- | -- | -- | -- | -- |
@@ -21,7 +21,7 @@ order: 3
 | onSubmit | 关闭弹窗后，处理行列切换结果的回调函数 | `(result:` [SwitcherResult](#switcherresult)`) => void` |  |  |
 | popover | 弹窗配置，透传给 `antd` 的 `Popover` 组件 | [PopoverProps](https://ant.design/components/popover-cn/#API) |  |  |
 
-## SwitcherField
+### SwitcherField
 
 行列头以及指标值的配置描述对象
 
@@ -33,7 +33,7 @@ order: 3
 | selectable | 是否打开字段的 checkbox 用于控制显隐 | `boolean` | `false` |  |
 | allowEmpty | 当前维度是否可以将全部子项拖出 | `boolean` | `true` |  |
 
-## SwitcherItem
+### SwitcherItem
 
 配置字段对象
 
@@ -44,7 +44,7 @@ order: 3
 | checked | 字段是否需要显示 | `boolean` | `true` |  |
 | children | 如果字段存在关联子项（如：同环比），使用该属性配置子项 | [SwitcherItem](#switcheritem)`[]` | `[]` |  |
 
-## SwitcherResult
+### SwitcherResult
 
 关闭弹窗后，处理行列切换结果的回调函数的参数
 
@@ -54,7 +54,7 @@ order: 3
 | columns | 所有列头字段操作结果 | [SwitcherResultItem](#switcherresultitem) |  |  |
 | values | 所有指标字段操作结果 | [SwitcherResultItem](#switcherresultitem) |  |  |
 
-## SwitcherResultItem
+### SwitcherResultItem
 
 关闭弹窗后，每个维度结果的描述对象
 
@@ -63,20 +63,16 @@ order: 3
 | items | 全部字段的被**扁平化**集合，按拖拽后顺序排序 | [SwitcherItem](#switcheritem)`[]` | `[]` |  |
 | hideItems | 所有需要隐藏字段被**扁平化**的集合，按拖拽后顺序排序 | [SwitcherItem](#switcheritem)`[]` | `[]` |  |
 
-## SwitcherCfgProps
+### SwitcherCfgProps
 
 内置 header 组件配置参数，本质上是 Switcher 组件 Props 的子集
 
 | 属性 | 说明 | 类型 | 默认值 | 必选 |
 | -- | -- | -- | -- | -- |
-| sheetType | 表格类型：<br/> 1. `pivot`: 透视表 <br/> 2. `table`: 明细表 <br> 3. `gridAnalysis`: 网格分析表 <br/> 4. `strategy`: 趋势分析表 | `pivot | table | gridAnalysis | strategy` | `pivot` |  |  |  |
+| sheetType | [表格类型](/api/components/sheet-component) | `pivot` |  |  |  |
 | title | 打开切换弹窗的触发节点 | `ReactNode` |  |  |
 | contentTitleText | 弹窗默认标题文字 | `string` | 行列切换 |  |
 | resetText | 重置按钮文字 | `string` | 恢复默认 |  |
 | innerContentClassName | 弹出框内容样式名 | `string` |  |  |
 | popover | 弹窗配置，透传给 `antd` 的 `Popover` 组件 | [PopoverProps](https://ant.design/components/popover-cn/#API) |
 | disabled | 是否禁用 | `boolean` | `false` |  |
-
-# Vue 维度切换组件
-
-开发中，敬请期待

From f655285ff2a381b0a6985c464e8227f2a8c1a5b7 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Thu, 28 Dec 2023 11:42:43 +0800
Subject: [PATCH 11/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E7=BB=98?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=9E=E6=80=A7=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/.dumirc.ts             |  2 +-
 s2-site/docs/api/graphic.zh.md | 17 +++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 08a15afa2c..894c7bd114 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -102,7 +102,7 @@ export default defineConfig({
       {
         slug: 'api/components',
         title: {
-          zh: '组件',
+          zh: '分析组件',
           en: 'Components',
         },
         order: 2,
diff --git a/s2-site/docs/api/graphic.zh.md b/s2-site/docs/api/graphic.zh.md
index 61e679d8ce..cb897f0797 100644
--- a/s2-site/docs/api/graphic.zh.md
+++ b/s2-site/docs/api/graphic.zh.md
@@ -5,7 +5,12 @@ redirect_from:
   - /en/docs/api
 ---
 
-S2 使用 [AntV/G](https://g.antv.antgroup.com/docs/guide/introduce) 作为绘图引擎。一些图形的样式配置，如单元格的 `fill` 属性，`stroke` 属性，以及绘制字体的 `fontFamily` 和 `fontSize` 等，都是直接透传 [AntV/G 的绘图属性](https://g.antv.antgroup.com/docs/api/shape/attrs)。
+:::warning{title="注意"}
+
+S2 使用 `Canvas` , 底层基于 [AntV/G](https://g.antv.antgroup.com/docs/guide/introduce) 作为绘图引擎，一些图形的样式配置，如单元格的 `fill` 属性，`stroke` 属性，以及绘制字体的 `fontFamily` 和 `fontSize` 等，都是直接透传 [AntV/G 的绘图属性](https://g.antv.antgroup.com/docs/api/shape/attrs)。
+
+理论上，你可以通过 [自定义单元格](https://s2.antv.antgroup.com/examples/custom/custom-cell/#data-cell), 在表格绘制任意内容，前提是请确保你已经掌握了一定的 [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 和 [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) 知识，并对 [AntV/G](https://g.antv.antgroup.com/docs/guide/introduce) 有一定了解。
+:::
 
 这里对 S2 常用的绘图属性进行简单介绍：
 
@@ -13,9 +18,9 @@ S2 使用 [AntV/G](https://g.antv.antgroup.com/docs/guide/introduce) 作为绘
 
 | 属性名        | 类型            |    功能描述                                                                                                      |
 | ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ |
-| fill          | `string`          | 图形背景的填充颜色，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                                                               |
+| fill          | `string`          | 图形背景的填充颜色，支持 [渐变色配置](#配置渐变) 和 [纹理配置](#配置纹理)                                                                                               |
 | fillOpacity   | `number`          | 图形背景的填充透明度                                                                                             |
-| stroke        | `string`          | 图形描边，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                  |
+| stroke        | `string`          | 图形描边，支持 [渐变色配置](#配置渐变色) 和 [纹理配置](#配置纹理)                                                  |
 | lineWidth     | `number`          | 图形描边宽度                                                                                               |
 | lineDash      | `[number,number]` | 图形描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离 |
 | lineOpacity   | `number`          | 图形描边描边透明度                                                                                                   |
@@ -30,7 +35,7 @@ S2 使用 [AntV/G](https://g.antv.antgroup.com/docs/guide/introduce) 作为绘
 
 | 属性名        | 类型              | 功能描述                                                                                                   |
 | ------------- | ----------------- | ------------------------------------------------------------------------------------------------------ |
-| stroke        | `string`          | 线段颜色，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                |
+| stroke        | `string`          | 线段颜色，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理)                                                |
 | lineWidth     | `number`          | 线段宽度                                                                                                   |
 | lineDash      | `[number,number]` | 线段虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离|
 | opacity       | `number`          | 线段透明度                                                                                                 |
@@ -50,9 +55,9 @@ S2 使用 [AntV/G](https://g.antv.antgroup.com/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`          | 描边透明度                                                                                                   |

From b1c146d7bcbf61b9aeb2d2e60e47f19d88f050e1 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Thu, 28 Dec 2023 16:14:56 +0800
Subject: [PATCH 12/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=20tooltip=20?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/.dumi/global.ts                       |  4 +-
 s2-site/docs/manual/basic/tooltip.zh.md       | 79 ++++++++++---------
 .../tooltip/demo/custom-content-base.ts       | 55 +++++++++++++
 ...m-content.tsx => custom-content-react.tsx} |  0
 .../react-component/tooltip/demo/meta.json    | 10 ++-
 5 files changed, 109 insertions(+), 39 deletions(-)
 create mode 100644 s2-site/examples/react-component/tooltip/demo/custom-content-base.ts
 rename s2-site/examples/react-component/tooltip/demo/{custom-content.tsx => custom-content-react.tsx} (100%)

diff --git a/s2-site/.dumi/global.ts b/s2-site/.dumi/global.ts
index a29df8c3d0..7e45d278de 100644
--- a/s2-site/.dumi/global.ts
+++ b/s2-site/.dumi/global.ts
@@ -18,8 +18,8 @@ if (window) {
   (window as any).s2 = require('@antv/s2');
   (window as any).s2React = require('@antv/s2-react');
 
-  // (window as any).s2Css = require('@antv/s2/dist/style.min.css');
-  // (window as any).s2ReactCss = require('@antv/s2-react/dist/style.min.css');
+  (window as any).s2Css = require('@antv/s2/dist/style.min.css');
+  (window as any).s2ReactCss = require('@antv/s2-react/dist/style.min.css');
 
   // 码云和老网站统一跳转 antgroup 新域名
   const hosts = ['s2.antv.vision', 'antv-s2.gitee.io'];
diff --git a/s2-site/docs/manual/basic/tooltip.zh.md b/s2-site/docs/manual/basic/tooltip.zh.md
index c361a48fd1..b147ea05b5 100644
--- a/s2-site/docs/manual/basic/tooltip.zh.md
+++ b/s2-site/docs/manual/basic/tooltip.zh.md
@@ -11,17 +11,19 @@ order: 7
 
 ## 注意事项
 
-`@antv/s2` 中只保留了 `tooltip` 的核心显隐逻辑，提供相应数据，**不渲染内容**
+:::warning
+`@antv/s2` 中只保留了 `tooltip` 的核心显隐逻辑，提供相应数据，**不渲染内容**.
 
 `React` 版本 和 `Vue3` 版本中通过 [自定义 Tooltip 类](#自定义-tooltip-类) 的方式渲染 `tooltip` 的内容，包括 `排序下拉菜单`, `单元格选中信息汇总`, `列头隐藏按钮` 等。
 
-查看 `React`
-版本的 [具体实现](https://github.com/antvis/S2/blob/next/packages/s2-react/src/components/tooltip/custom-tooltip.tsx)
+:::
+
+查看 `React` 版本的 [具体实现](https://github.com/antvis/S2/blob/next/packages/s2-react/src/components/tooltip/custom-tooltip.tsx)
 和 `Vue3` 版本的 [具体实现](https://github.com/antvis/S2/blob/next/packages/s2-vue/src/components/tooltip/custom-tooltip.ts)
 
-- 如果您有 `tooltip` 的需求，您可以直接使用开箱即用的 `@antv/s2-react` `@antv/s2-vue`, 免去你二次封装，使用更加方便
-- 如果您不希望依赖框架，或者希望在 `Vue`, `Angular` 框架中使用 `tooltip`, 请参考 [自定义 Tooltip 类](#自定义-tooltip-类) 章节
-- 别忘了引入样式
+- 如果您有 `tooltip` 的需求，您可以直接使用开箱即用的 `@antv/s2-react` `@antv/s2-vue`, 免去你二次封装，使用更加方便。
+- 如果您不希望依赖框架，或者希望在 `Vue`, `Angular` 框架中使用 `tooltip`, 请参考 [自定义 Tooltip 类](#自定义-tooltip-类) 章节。
+- 别忘了引入样式。
 
 ```ts
 import "@antv/s2/dist/style.min.css";
@@ -29,7 +31,7 @@ import "@antv/s2/dist/style.min.css";
 
 ## 使用
 
-在 `s2Options` 中配置 [tooltip](/docs/api/general/S2Options#tooltip) 字段，默认作用于**所有**单元格
+在 `s2Options` 中配置 [tooltip](/docs/api/general/S2Options#tooltip) 字段，默认作用于**所有**单元格。
 
 ```ts
 const s2Options = {
@@ -37,7 +39,7 @@ const s2Options = {
 };
 ```
 
-还可以对不同类型的单元格单独配置：
+**还可以对不同类型的单元格单独配置**：
 
 - `cornerCell`: 角头单元格
 - `rowCell`: 行头单元格
@@ -57,7 +59,7 @@ const s2Options = {
 
 ### 显示配置项
 
-通过配置 `showTooltip` 字段控制 `Tooltip` 的显示，默认为 `false`
+通过配置 `showTooltip` 字段控制 `Tooltip` 的显示，默认为 `false`.
 
 ```ts
 const s2Options = {
@@ -111,6 +113,10 @@ const s2Options = {
 
 #### 自定义 Tooltip 内容
 
+##### 在基础类中使用 <Badge>@antv/s2</Badge>
+
+<Playground path='react-component/tooltip/demo/custom-content-base.ts' rid='custom-content-base' height='300'></playground>
+
 对于 `@antv/s2` 类的使用方式：tooltip 内容 可以是任意 `dom` 节点或者 `字符串`
 
 ```ts
@@ -120,18 +126,32 @@ content.innerHTML = '我是自定义内容'
 const s2Options = {
   tooltip: {
     content,
-    // content: '我是字符串'
+    // content: '<div>我是字符串</div>'
+  },
+};
+```
+
+```ts
+const s2Options = {
+  tooltip: {
+    content: `
+      <div>我是自定义内容</div>
+    `,
   },
 };
 ```
 
+##### 在 React 中使用 <Badge>@antv/s2-react</Badge>
+
 对于 `@antv/s2-react` 组件的使用方式：tooltip 内容 可以是任意的 `jsx` 元素
 
-```ts
+<Playground path='react-component/tooltip/demo/custom-content-react.tsx' rid='react-custom-content' height='300'></playground>
+
+```tsx
 const content = (
   <div>
-    <span>我是自定义内容 < /span>
-  < /div>
+    <span>我是自定义内容 </span>
+  </div>
 )
 
 const s2Options = {
@@ -141,21 +161,17 @@ const s2Options = {
 };
 ```
 
-同时，`content` 还支持回调的方式，可以根据 [当前单元格信息](/docs/api/basic-class/interaction) 和 默认 `tooltip` 的详细信息，灵活的自定义内容
+同时 `content` 还支持回调的方式，可以根据 [当前单元格信息](/docs/api/basic-class/interaction) 和 默认 `tooltip` 的详细信息，灵活的自定义内容
 
 ```ts
-const TooltipContent = (props) => <div>
-...
-</div>
+const TooltipContent = (props) => <div>...</div>
 
 const s2Options = {
   tooltip: {
     content: (cell, defaultTooltipShowOptions) => {
       console.log('当前单元格：', cell)
       console.log('默认 tooltip 详细信息：', defaultTooltipShowOptions)
-      return <TooltipContent cell = { cell }
-      detail = { detail }
-      />
+      return <TooltipContent cell={ cell } detail={ detail } />
     },
   },
 };
@@ -215,19 +231,17 @@ const s2Options = {
 通过表格实例 可以手动显示 `tooltip`
 
 ```ts
-const TooltipContent = (
-  <div>content < /div>
+const TooltipContent = () => (
+  <div>content</div>
 );
 
 s2.showTooltip({
-  content: TooltipContent
+  content: <TooltipContent />
 })
 
-// 或者 s2.tooltip.show({ content: TooltipContent })
+// 或者 s2.tooltip.show({ content: <TooltipContent/> })
 ```
 
-<Playground path='react-component/tooltip/demo/custom-content.tsx' rid='container-1' height='300'></playground>
-
 ##### 3. 内容显示优先级
 
 `方法调用` > `单元格配置` > `基本配置`
@@ -510,16 +524,9 @@ const onRowCellHover = ({ event, viewMeta }) => {
 // TooltipContent.vue
 
 <template>
-  <div>我是自定义
-Tooltip
-内容 < /div>
-< p > 当前值：{
-  {
-    meta?.label ?? meta?.fieldValue
-  }
-}
-</p>
-< /template>
+  <div>我是自定义 tooltip 内容</div>
+  <p>当前值：{{ meta?.label ?? meta?.fieldValue}} </p>
+</template>
 
 < script
 lang = "ts"
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-content-base.ts b/s2-site/examples/react-component/tooltip/demo/custom-content-base.ts
new file mode 100644
index 0000000000..4dd783dc2e
--- /dev/null
+++ b/s2-site/examples/react-component/tooltip/demo/custom-content-base.ts
@@ -0,0 +1,55 @@
+import { PivotSheet, S2Options } from '@antv/s2';
+import '@antv/s2/dist/style.min.css';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then(async (dataCfg) => {
+    const container = document.getElementById('container');
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      tooltip: {
+        enable: true,
+        content: '我是自定义内容',
+        rowCell: {
+          content: (cell, showOptions) => {
+            console.log(cell, showOptions);
+            const meta = cell.getMeta();
+            const summary = showOptions.data?.summaries?.[0];
+
+            return `
+              <div>
+                <p>我是 rowCell 自定义内容</p>
+                <p>${meta.value} (${summary?.selectedData?.length} 项已选中)</p>
+                <p>${summary?.name}-${summary?.value}</p>
+              </div>
+            `;
+          },
+        },
+        colCell: {
+          content: `
+            <div>
+              <p>我是自定义内容1</p>
+              <p>我是自定义内容2</p>
+            </div>
+          `,
+        },
+        dataCell: {
+          content() {
+            const div = document.createElement('div');
+
+            div.innerHTML = '我是 dataCell 自定义内容';
+
+            return div;
+          },
+        },
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-content.tsx b/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
similarity index 100%
rename from s2-site/examples/react-component/tooltip/demo/custom-content.tsx
rename to s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
diff --git a/s2-site/examples/react-component/tooltip/demo/meta.json b/s2-site/examples/react-component/tooltip/demo/meta.json
index 55f77c3e8b..7f9ec76d4a 100644
--- a/s2-site/examples/react-component/tooltip/demo/meta.json
+++ b/s2-site/examples/react-component/tooltip/demo/meta.json
@@ -29,7 +29,15 @@
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/le1o4zCn9/d5fd21d4-95bb-448e-9c10-92a1dd4495ae.png"
     },
     {
-      "filename": "custom-content.tsx",
+      "filename": "custom-content-base.ts",
+      "title": {
+        "zh": "自定义 Tooltip 内容 (@antv/s2)",
+        "en": "Custom Tooltip Content (@antv/s2)"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/j1fkyyIDdh/939fb3ed-b1c7-48a4-a329-bd1d64ddcb9c.png"
+    },
+    {
+      "filename": "custom-content-react.tsx",
       "title": {
         "zh": "自定义 Tooltip 内容",
         "en": "Custom Tooltip Content"

From b11a96de4060b2e7c1c9e23d1f16ed74bd9c7ff2 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Thu, 28 Dec 2023 16:44:10 +0800
Subject: [PATCH 13/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E8=B4=A1?=
 =?UTF-8?q?=E7=8C=AE=E6=8C=87=E5=8D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/common/browser.zh.md         |  8 ++--
 s2-site/docs/common/development.zh.md     | 14 ++++---
 s2-site/docs/common/packages.zh.md        |  8 ++--
 s2-site/docs/manual/contribution.zh.md    | 48 +++++++++++++----------
 s2-site/docs/manual/faq.zh.md             |  2 +-
 s2-site/docs/manual/getting-started.zh.md |  8 ++--
 s2-site/docs/manual/introduction.zh.md    |  2 +-
 7 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/s2-site/docs/common/browser.zh.md b/s2-site/docs/common/browser.zh.md
index 61857de531..b59d9bcb21 100644
--- a/s2-site/docs/common/browser.zh.md
+++ b/s2-site/docs/common/browser.zh.md
@@ -36,14 +36,14 @@ order: 5
 <link rel="stylesheet" href="./dist/style.min.css"/>
 ```
 
-也可以直接使用 `CDN` （推荐）, 比如 [UNPKG](https://unpkg.com/@antv/s2@latest) 或者 [![preview](https://data.jsdelivr.com/v1/package/npm/@antv/s2/badge)](https://www.jsdelivr.com/package/npm/@antv/s2)
+也可以直接使用 `CDN` （推荐）, 比如 [UNPKG](https://unpkg.com/@antv/s2@next) 或者 [![preview](https://data.jsdelivr.com/v1/package/npm/@antv/s2/badge)](https://www.jsdelivr.com/package/npm/@antv/s2)
 
 ```js
-<script src="https://unpkg.com/@antv/s2@latest/dist/index.min.js"></script>
+<script src="https://unpkg.com/@antv/s2@next/dist/index.min.js"></script>
 
 // React 需额外引入样式：
-<link rel="stylesheet" href="https://unpkg.com/@antv/s2-react@latest/dist/style.min.css"/>
+<link rel="stylesheet" href="https://unpkg.com/@antv/s2-react@next/dist/style.min.css"/>
 
 // Vue3 版本 需额外引入样式：
-<link rel="stylesheet" href="https://unpkg.com/@antv/s2-vue@latest/dist/style.min.css"/>
+<link rel="stylesheet" href="https://unpkg.com/@antv/s2-vue@next/dist/style.min.css"/>
 ```
diff --git a/s2-site/docs/common/development.zh.md b/s2-site/docs/common/development.zh.md
index 037a89feb8..093b700161 100644
--- a/s2-site/docs/common/development.zh.md
+++ b/s2-site/docs/common/development.zh.md
@@ -1,7 +1,5 @@
-:::info{title="跃跃欲试想贡献?"}
-
+:::info{title="跃跃欲试想贡献？"}
 [查看贡献指南](/manual/contribution)
-
 :::
 
 ```bash
@@ -18,14 +16,20 @@ pnpm build
 # 调试 s2-core
 pnpm core:start
 
-# 调试 s2-react
+# 调试 s2-react 和 s2-core （推荐）
 pnpm react:playground
 
-# 调试 s2-vue
+# 调试 s2-vue 和 s2-core
 pnpm vue:playground
 
 # 单元测试
 pnpm test
+pnpm core:test
+pnpm react:test
+
+# 更新单元格测试快照
+pnpm core:test -- -u
+pnpm react:test -- -u
 
 # 代码风格和类型检测
 pnpm lint
diff --git a/s2-site/docs/common/packages.zh.md b/s2-site/docs/common/packages.zh.md
index d698df0238..ca4223f52b 100644
--- a/s2-site/docs/common/packages.zh.md
+++ b/s2-site/docs/common/packages.zh.md
@@ -5,11 +5,11 @@ order: 5
 
 :::info{title="提示"}
 
-创建 `S2` 表格有三种方式，基础类版本 `@antv/s2` 和 基于 `@antv/s2` 封装的 `React` 和 `Vue3` 版本
+创建 `S2` 表格有三种方式，基础类版本 `@antv/s2` 和 基于 `@antv/s2` 封装的 `React` 和 `Vue3` 版本：
 
-- `@antv/s2`: 基于 `Canvas` 和 [AntV/G](https://g.antv.antgroup.com) 开发，提供基本的表格展示/交互等能力
-- `@antv/s2-react`: 基于 `@antv/s2` 封装，提供配套的 [分析组件](/manual/basic/analysis/switcher)
-- `@antv/s2-vue`: 基于 `Vue3` 和 `@antv/s2` 封装，提供配套的分析组件
+- `@antv/s2`: 基于 `Canvas` 和 [AntV/G](https://g.antv.antgroup.com) 开发，提供基本的表格展示/交互等能力。
+- `@antv/s2-react`: 基于 `@antv/s2` 封装，提供配套的 [分析组件](/manual/basic/analysis/switcher).
+- `@antv/s2-vue`: 基于 `Vue3` 和 `@antv/s2` 封装，提供配套的分析组件。
 
 **也就是说** `@antv/s2` 和**框架无关**，你可以在 `Vue`, `Angular` 等任意框架中使用。
 :::
diff --git a/s2-site/docs/manual/contribution.zh.md b/s2-site/docs/manual/contribution.zh.md
index c965b1b160..cbd6140034 100644
--- a/s2-site/docs/manual/contribution.zh.md
+++ b/s2-site/docs/manual/contribution.zh.md
@@ -3,18 +3,22 @@ title: 贡献指南
 order: 7
 ---
 
-如果你恰好看到了这篇文章，你一定是希望对这个项目贡献自己的一份力量
+如果你恰好看到了这篇文章，你一定是希望对这个项目贡献自己的一份力量。
 
 ## 欢迎任何形式的贡献
 
 "我代码水平不行", "会不会受到鄙视？", "会不会不太好？", 放心，不存在的！
 
-我们欢迎任何形式的贡献，不管是一个错别字的修改，还是一次友好的建议，不管是通过 提交 [Issue](https://github.com/antvis/S2/issues/new/choose)
-还是一个帅气 [pull request](https://github.com/antvis/S2/pulls), 亦或是一次钉钉群的讨论，参与 [discussions](https://github.com/antvis/S2/discussions) 的讨论，期待在 [贡献者列表](https://github.com/antvis/S2/graphs/contributors) 里看见你的头像。
+我们欢迎任何形式的贡献，不管是一个**错别字的修改**，还是**一次友好的建议**，不管是通过提交 [Issue](https://github.com/antvis/S2/issues/new/choose), 还是一个帅气 [pull request](https://github.com/antvis/S2/pulls), 亦或是一次钉钉群的讨论，参与 [discussions](https://github.com/antvis/S2/discussions) 的讨论，期待在 [贡献者列表](https://github.com/antvis/S2/graphs/contributors) 里看见你的头像。
 
 ## 分支管理
 
-目前，我们基于 `master` 分支开发，有任何修改，请基于 `master` 拉一个分支，然后通过 `PR` 的形式，我们集成了钉钉机器人，会第一次时间 review 你的 PR, 给与反馈
+目前我们主要基于 `master` 和 `next` 分支开发，有任何修改，请基于 `master` 或 `next` 拉一个分支，然后通过 `PR` 的形式提交，我们集成了钉钉机器人，会第一次时间 `review` 你的 `PR`, 给与反馈。
+
+- `master`: `1.x` 版本
+- `next`: `2.x` 版本
+- `alpha`: `1.x-alpha.x` 版本
+- `beta`: `1.x-beta.x` 版本
 
 ## 提交 Bug 反馈
 
@@ -28,7 +32,8 @@ order: 7
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/oAnzfiVl2/9d83b3e8-b05c-4475-b736-92c45448546a.png)
 
-按照 Issue 模板 填写相关的信息，是的，这些步骤稍微一些繁琐，但确实必须的，每个用户使用的场景都不同，系统环境，软件版本，又或是需要一些特定的步骤才能复现 bug, 这个时候说清楚，可以节省大家的时间！
+按照 [Issue 模板](https://github.com/antvis/S2/tree/next/.github/ISSUE_TEMPLATE) 填写相关信息。
+是的，这些步骤稍微有一些繁琐，但的确是有效且必须的，每个用户使用的场景都不同，系统环境，软件版本，又或是需要一些特定的步骤才能复现 bug, 这个时候说清楚，可以节省大家的时间！
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/05O3p5nE5/d0d4b120-e5aa-4b51-918b-8a573f8fb794.png)
 
@@ -36,29 +41,30 @@ order: 7
 
 > 示例 [PR](https://github.com/antvis/S2/pull/1652) (pr 描述参考）
 
-1. fork 项目 并 clone 下来 （或者使用 GitHub 的 Codespace 功能，非常方便）
-2. 安装依赖：`pnpm install` 或者 `pnpm bootstrap`
-3. 提交你的改动，commit 请遵守 [AngularJS Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.uyo6cb12dt6w)
-4. 如果你的改动是修复 bug, 还可以在提交信息后面加上 `close #issue 号`, 这样可以在 pr 合并后，可以自动关闭对应的 issue, 比如 `fix: render bug close #123`
-5. 确保加上了对应的单元测试和文档 （如有必要）
+1. fork 项目 并 clone 下来 （或者使用 GitHub 的 Codespaces 功能，非常方便）.
+2. 安装依赖：`pnpm install` 或者 `pnpm bootstrap` 然后本地启动项目。
+3. 提交你的改动，commit 请遵守 [AngularJS Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.uyo6cb12dt6w).
+4. 如果你的改动是修复 bug, 还可以在提交信息后面加上 `close #issue 号`, 这样可以在 pr 合并后，可以自动关闭对应的 issue, 比如 `fix: render bug close #123`.
+5. 确保加上了对应的单元测试和文档 （如有必要）.
 6. 所有 Lint 和 Test 检查通过后，并且 review 通过，我们会合并你的 pr.
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/ssOxFrycD/86339514-5f9a-4101-8690-e47c97cd8af5.png)
 
-## 开发流程
+## ⌨️ 本地开发
+
+:::info{title="提示"}
 
-我们使用 `pnpm@v7` 作为包管理
+我们使用 `pnpm` 作为包管理
 
 ```bash
 npm i -g pnpm
 ```
 
-1. `pnpm install` 安装依赖
-2. `pnpm site:start` 启动本地的 `S2` 网站
-3. `pnpm core:start` 使用可视化的方式调试 core 层的单测 （基于 jest-electron)
-4. `pnpm react:start` 可用可视化的方式调试 React 版本的单测 （基于 jest-electron)
-5. `pnpm react:playground` 启动本地的交互式 React 版本 Demo （基于 vite)
-6. `pnpm vue:playground` 启动本地的交互式 Vue3 版本 Demo （基于 vite)
-7. `pnpm build` 构建 `@antv/s2`, `@antv/s2-react` 和 `@antv/s2-vue` 3 个包，分别输出 `umd`, `esm` 和 `lib` 目录
-8. `pnpm test` 运行单元测试
-9. `pnpm lint` 静态代码检测
+推荐本地运行 `pnpm react:playground` 来调试 `@antv/s2` 和 `@antv/s2-react`
+:::
+
+<embed src="@/docs/common/development.zh.md"></embed>
+
+## 📦 版本
+
+<embed src="@/docs/common/packages.zh.md"></embed>
diff --git a/s2-site/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md
index 1db044fa29..0c11b8c7b2 100644
--- a/s2-site/docs/manual/faq.zh.md
+++ b/s2-site/docs/manual/faq.zh.md
@@ -207,7 +207,7 @@ const s2Options = {
 
 - 你**实际**安装的版本号：
 
-> 避免 `latest` 或者 `*` 这种没有实际意义的版本号，提供你实际使用的版本可以帮助我们更快的定位问题，有可能你使用的功能在新版本中才支持，或者 bug 在新版本中已经被修复了
+> 避免 `latest`, `next` 或者 `*` 这种没有实际意义的版本号，提供你实际使用的版本可以帮助我们更快的定位问题，有可能你使用的功能在新版本中才支持，或者 bug 在新版本中已经被修复了
 
 - **详细的** bug 描述
 
diff --git a/s2-site/docs/manual/getting-started.zh.md b/s2-site/docs/manual/getting-started.zh.md
index 649ea1ff04..a65cc926e7 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -7,14 +7,14 @@ order: 1
 ### 使用 npm 或 yarn 或 pnpm 安装
 
 ```bash
+# pnpm
+$ pnpm add @antv/s2 --save
+
 # npm
 $ npm install @antv/s2 --save
 
 # yarn
 $ yarn add @antv/s2 --save
-
-# pnpm
-$ pnpm add @antv/s2 --save
 ```
 
 ### 使用 React 或 Vue3 版本
@@ -290,7 +290,7 @@ createApp(App).mount('#app');
 
 `Vue3` 版本的 `分析组件` 如：`高级排序`, `导出`, `下钻`, `Tooltip` 等组件基于 `ant-design-vue` 组件库开发，如需使用，需要额外安装，并引入对应样式
 
-```ts
+```bash
 yarn add ant-design-vue
 ```
 
diff --git a/s2-site/docs/manual/introduction.zh.md b/s2-site/docs/manual/introduction.zh.md
index 4c4b7d1fee..d68c3f218e 100644
--- a/s2-site/docs/manual/introduction.zh.md
+++ b/s2-site/docs/manual/introduction.zh.md
@@ -30,7 +30,7 @@ redirect_from:
 
 <p>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
+    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
   </a>
   <a href="https://github.com/antvis/S2/discussions" target="_blank">
     <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>

From eb7476c3c85a6d6f120db1025789f5f1b2bcd5d4 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Thu, 28 Dec 2023 18:11:35 +0800
Subject: [PATCH 14/64] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20wip=20?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=E6=8C=87=E5=8D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     | 10 ++-
 s2-site/.dumirc.ts                            | 23 ++++--
 ...custom-chart.en.md => chart-in-cell.en.md} |  2 +-
 ...custom-chart.zh.md => chart-in-cell.zh.md} |  6 +-
 s2-site/docs/manual/contribution.zh.md        | 12 +--
 s2-site/docs/manual/migration-v2.en.md        |  8 ++
 s2-site/docs/manual/migration-v2.zh.md        | 75 +++++++++++++++++++
 .../custom/custom-g2-chart/demo/meta.json     |  4 +-
 .../custom/custom-g2-chart/index.zh.md        |  2 +-
 9 files changed, 119 insertions(+), 23 deletions(-)
 rename s2-site/docs/manual/advanced/{custom/custom-chart.en.md => chart-in-cell.en.md} (76%)
 rename s2-site/docs/manual/advanced/{custom/custom-chart.zh.md => chart-in-cell.zh.md} (99%)
 create mode 100644 s2-site/docs/manual/migration-v2.en.md
 create mode 100644 s2-site/docs/manual/migration-v2.zh.md

diff --git a/README.md b/README.md
index edb6f94818..07cf1ce810 100644
--- a/README.md
+++ b/README.md
@@ -165,11 +165,15 @@ const s2Options = {
 ```ts
 import { PivotSheet } from '@antv/s2';
 
-const container = document.getElementById('container');
+async function bootstrap() {
+  const container = document.getElementById('container');
 
-const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+  const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-s2.render();
+  await s2.render();
+}
+
+bootstrap()
 ```
 
 ### 4. 结果
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 894c7bd114..b8bd3d631a 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -13,12 +13,12 @@ export default defineConfig({
   ], // 网站 favicon
   metas: [
     // 自定义 meta 标签
-    { name: 'keywords', content: 'S2' },
-    { name: 'description', content: '多维交叉分析表格' },
+    { name: 'keywords', content: 'S2 2.0' },
+    { name: 'description', content: '多维交叉分析表格 2.0, S2 Next' },
   ],
   themeConfig: {
     title: 'S2',
-    description: '多维交叉分析表格',
+    description: '多维交叉分析表格 2.0',
     defaultLanguage: 'zh', // 默认语言
     isAntVSite: false, // 是否是 AntV 的大官网
     siteUrl: 'https://antv.antgroup.com', // 官网地址
@@ -278,14 +278,14 @@ export default defineConfig({
         </html>`,
     },
     announcement: {
-      zh: '',
-      en: '',
+      zh: '🎉 S2 2.0 版本开始内测啦! 查看 [升级指南](https://s2.antv.antgroup.com/manual/migration-v2)',
+      en: '🎉 S2 Next version 2.0 is in beta! see [Upgrade Guide](https://s2.antv.antgroup.com/manual/migration-v2)',
     },
     /** 首页技术栈介绍 */
     detail: {
       title: {
-        zh: 'S2 多维交叉分析表格',
-        en: 'S2 Multi Cross Analysis Table',
+        zh: 'S2 多维交叉分析表格 2.0',
+        en: 'S2 Multi Cross Analysis Table 2.0',
       },
       description: {
         zh: 'S2 是多维交叉分析领域的表格解决方案，数据驱动视图，提供底层核心库、基础组件库、业务场景库，具备自由扩展的能力，让开发者既能开箱即用，也能基于自身场景自由发挥。',
@@ -294,13 +294,19 @@ export default defineConfig({
       image:
         'https://gw.alipayobjects.com/zos/bmw-prod/1aa91199-b986-4553-a425-6baa18c3a9bd.svg',
       buttons: [
+        {
+          text: {
+            zh: '升级指南',
+            en: 'Migration v2',
+          },
+          link: `/manual/migration-v2`,
+        },
         {
           text: {
             zh: '图表示例',
             en: 'Examples',
           },
           link: `/examples`,
-          type: 'primary',
         },
         {
           text: {
@@ -308,6 +314,7 @@ export default defineConfig({
             en: 'Getting Started',
           },
           link: `/manual/getting-started`,
+          type: 'primary',
         },
       ],
     },
diff --git a/s2-site/docs/manual/advanced/custom/custom-chart.en.md b/s2-site/docs/manual/advanced/chart-in-cell.en.md
similarity index 76%
rename from s2-site/docs/manual/advanced/custom/custom-chart.en.md
rename to s2-site/docs/manual/advanced/chart-in-cell.en.md
index 3e68e49e0a..5125bf42c9 100644
--- a/s2-site/docs/manual/advanced/custom/custom-chart.en.md
+++ b/s2-site/docs/manual/advanced/chart-in-cell.en.md
@@ -1,4 +1,4 @@
 ---
 title: Render G2 Charts
-order: 8
+order: 11
 ---
diff --git a/s2-site/docs/manual/advanced/custom/custom-chart.zh.md b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
similarity index 99%
rename from s2-site/docs/manual/advanced/custom/custom-chart.zh.md
rename to s2-site/docs/manual/advanced/chart-in-cell.zh.md
index 83bd5779eb..4a634c3c98 100644
--- a/s2-site/docs/manual/advanced/custom/custom-chart.zh.md
+++ b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
@@ -1,6 +1,8 @@
 ---
-title: 单元格内绘制图表
-order: 8
+title: 单元格内绘制图表 <Badge>info</Badge>
+order: 11
+features:
+  - emoji: x
 ---
 
 如果纯文本的表格不够直观，S2 支持 [自定义单元格](/examples#custom-custom-cell)，也内置了 [简单的 mini 图绘制](/examples/custom/custom-cell/#mini-chart)
diff --git a/s2-site/docs/manual/contribution.zh.md b/s2-site/docs/manual/contribution.zh.md
index cbd6140034..6c7e316737 100644
--- a/s2-site/docs/manual/contribution.zh.md
+++ b/s2-site/docs/manual/contribution.zh.md
@@ -5,13 +5,13 @@ order: 7
 
 如果你恰好看到了这篇文章，你一定是希望对这个项目贡献自己的一份力量。
 
-## 欢迎任何形式的贡献
+## 🫡 欢迎任何形式的贡献
 
 "我代码水平不行", "会不会受到鄙视？", "会不会不太好？", 放心，不存在的！
 
 我们欢迎任何形式的贡献，不管是一个**错别字的修改**，还是**一次友好的建议**，不管是通过提交 [Issue](https://github.com/antvis/S2/issues/new/choose), 还是一个帅气 [pull request](https://github.com/antvis/S2/pulls), 亦或是一次钉钉群的讨论，参与 [discussions](https://github.com/antvis/S2/discussions) 的讨论，期待在 [贡献者列表](https://github.com/antvis/S2/graphs/contributors) 里看见你的头像。
 
-## 分支管理
+## ✍️ 分支管理
 
 目前我们主要基于 `master` 和 `next` 分支开发，有任何修改，请基于 `master` 或 `next` 拉一个分支，然后通过 `PR` 的形式提交，我们集成了钉钉机器人，会第一次时间 `review` 你的 `PR`, 给与反馈。
 
@@ -20,7 +20,7 @@ order: 7
 - `alpha`: `1.x-alpha.x` 版本
 - `beta`: `1.x-beta.x` 版本
 
-## 提交 Bug 反馈
+## 🐛 提交 Bug 反馈
 
 很抱歉又写了一些 bug, 但求友好的提交一个有意义的 bug 反馈，谁也不希望反馈的 bug 是这样：
 
@@ -28,7 +28,7 @@ order: 7
 
 没有版本信息，没有复现步骤，没有问题描述，没有代码片段，开局一句话，内容全靠猜。
 
-首先选择 [Bug report]
+首先选择 [Bug report](https://github.com/antvis/S2/issues/new?assignees=&labels=&projects=&template=bug-report.md&title=%F0%9F%90%9B)
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/oAnzfiVl2/9d83b3e8-b05c-4475-b736-92c45448546a.png)
 
@@ -37,7 +37,7 @@ order: 7
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/05O3p5nE5/d0d4b120-e5aa-4b51-918b-8a573f8fb794.png)
 
-## Pull Request
+## 🙋‍♂️ Pull Request
 
 > 示例 [PR](https://github.com/antvis/S2/pull/1652) (pr 描述参考）
 
@@ -63,7 +63,7 @@ npm i -g pnpm
 推荐本地运行 `pnpm react:playground` 来调试 `@antv/s2` 和 `@antv/s2-react`
 :::
 
-<embed src="@/docs/common/development.zh.md"></embed>
+<embed src="@/docs/common/development.zh.md#L4-L100"></embed>
 
 ## 📦 版本
 
diff --git a/s2-site/docs/manual/migration-v2.en.md b/s2-site/docs/manual/migration-v2.en.md
new file mode 100644
index 0000000000..7a271afa2b
--- /dev/null
+++ b/s2-site/docs/manual/migration-v2.en.md
@@ -0,0 +1,8 @@
+---
+title: S2 2.0 升级指南
+order: 9
+---
+
+:::warning{title="一些建议"}
+**在提出问题前，请确保你已经仔细阅读了一遍文档，查看了相关图表示例，并且已经查看了常见问题。**
+:::
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
new file mode 100644
index 0000000000..aa17843a3b
--- /dev/null
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -0,0 +1,75 @@
+---
+title: S2 2.0 升级指南
+order: 9
+---
+
+本文档将帮助你从 S2 `1.x` 版本升级到 S2 `2.x` 版本。
+
+:::warning{title="注意"}
+
+S2 2.0 版本目前处于**内测阶段**, 部分 API 可能会随时改动。
+
+:::
+
+## 官网地址变化
+
+:::warning{title="注意"}
+原官网 <https://s2.antv.vision> 和 <https://antv-s2.gitee.io> 不再维护和使用，请使用最新的文档，已确保您看到的不是过时的文档。
+:::
+
+- 原 `v1` 官网迁移至 <https://s2-v1.antv.antgroup.com>.
+- 原 <https://s2.antv.antgroup.com> 将作为 `v2` 默认官网。
+
+## 不兼容的变化
+
+TODO:
+
+## API 调整
+
+TODO:
+
+## 多版本共存
+
+> 该部分文档参考 <https://ant-design.antgroup.com/docs/react/migration-v5-cn>
+
+### 通过别名安装 v2
+
+```bash
+$ npm install --save @antv/s2-v2@npm:@antv/s2-v2@2
+# or
+$ yarn add @antv/s2-v2@npm:@antv/s2-v2@2
+# or
+$ pnpm add @antv/s2-v2@npm:@antv/s2-v2@2
+```
+
+对应的 package.json 为：
+
+```json
+{
+  "@antv/s2": "1.x",
+  "@antv/s2-v2": "npm:@antv/s2-v2@2"
+}
+```
+
+现在，你项目中的 `S2` 还是 `v1` 版本，`@antv/s2-v2` 是 `v2` 版本。
+
+```ts
+import { PivotSheet as  PivotSheetV1 } from '@antv/s2';
+import { PivotSheet as  PivotSheetV2 } from '@antv/s2-v2';
+
+async function bootstrap(){
+  const container = document.getElementById('container');
+
+  const s2V1 = new PivotSheetV1(container, s2DataConfig, s2Options);
+  const s2V2 = new PivotSheetV2(container, s2DataConfig, s2Options);
+
+  s2V1.render();
+  await s2V2.render();
+}
+
+bootstrap()
+```
+
+## 遇到问题
+
+如果您在升级过程中遇到了问题，请到 [GitHub issues](https://github.com/antvis/S2/issues/2454) 或者 [GitHub Discussions](https://github.com/antvis/S2/discussions/1933) 进行反馈。我们会尽快响应和相应改进这篇文档。
diff --git a/s2-site/examples/custom/custom-g2-chart/demo/meta.json b/s2-site/examples/custom/custom-g2-chart/demo/meta.json
index 17251ad5d7..0459336bc3 100644
--- a/s2-site/examples/custom/custom-g2-chart/demo/meta.json
+++ b/s2-site/examples/custom/custom-g2-chart/demo/meta.json
@@ -1,13 +1,13 @@
 {
   "title": {
-    "zh": "单元格内绘制 G2 图表",
+    "zh": "在单元格内绘制 G2 图表",
     "en": "Render G2 Charts"
   },
   "demos": [
     {
       "filename": "custom-g2-chart.ts",
       "title": {
-        "zh": "单元格内绘制 G2 图表",
+        "zh": "在单元格内绘制 G2 图表",
         "en": "render G2 charts"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A9oWSbAfHu4AAAAAAAAAAAAADmJ7AQ/original"
diff --git a/s2-site/examples/custom/custom-g2-chart/index.zh.md b/s2-site/examples/custom/custom-g2-chart/index.zh.md
index 75de0502c9..8815dafaf5 100644
--- a/s2-site/examples/custom/custom-g2-chart/index.zh.md
+++ b/s2-site/examples/custom/custom-g2-chart/index.zh.md
@@ -1,4 +1,4 @@
 ---
-title: 单元格内绘制 G2 图表
+title: 在单元格内绘制 G2 图表
 order: 11
 ---

From 25d6119613eea2b5f27316de7fb8b35b5f4695f6 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Wed, 3 Jan 2024 13:59:40 +0800
Subject: [PATCH 15/64] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=20React=20Demo?=
 =?UTF-8?q?=20=E6=97=A0=E6=B3=95=E8=BF=90=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/.dumi/global.ts                       | 14 ++--
 s2-site/.dumi/theme/plugin.ts                 | 12 ++++
 s2-site/.dumirc.ts                            | 72 +++++++++++--------
 s2-site/LEGAL.md                              |  7 ++
 s2-site/docs/common/env.zh.md                 |  8 +--
 .../docs/manual/advanced/chart-in-cell.zh.md  |  4 +-
 s2-site/docs/manual/basic/tooltip.zh.md       | 13 +++-
 s2-site/docs/manual/faq.zh.md                 |  4 ++
 .../examples/analysis/sort/demo/advanced.tsx  |  8 +--
 .../analysis/sort/demo/group-sort.tsx         |  4 +-
 .../analysis/sort/demo/table-sort.tsx         |  8 +--
 s2-site/examples/case/art/demo/mosaic.tsx     |  4 +-
 .../case/art/demo/time-spend-abstract.tsx     | 18 +++--
 .../comparison/demo/measure-comparison.tsx    | 33 +++++----
 .../demo/multiple-people-comparison.tsx       |  8 +--
 .../case/comparison/demo/philosophers.tsx     |  8 +--
 .../case/comparison/demo/time-spend.tsx       |  8 +--
 .../examples/case/data-preview/demo/excel.tsx |  6 +-
 .../examples/case/data-preview/demo/house.tsx |  8 +--
 .../examples/case/data-preview/demo/index.tsx | 10 ++-
 .../examples/case/kpi-strategy/demo/basic.tsx |  4 +-
 .../case/kpi-strategy/demo/covid-trend.tsx    |  4 +-
 .../case/performance-compare/demo/basic.tsx   |  4 +-
 .../case/proportion/demo/group-drill-down.tsx | 10 ++-
 .../demo/single-population-proportion.tsx     |  8 +--
 .../demo/custom-header-action-icon.tsx        |  4 +-
 .../custom/custom-order/demo/custom-order.tsx |  4 +-
 .../interaction/advanced/demo/merge-cell.ts   |  4 +-
 .../advanced/demo/resize-active.ts            |  4 +-
 .../interaction/advanced/demo/scroll-loop.ts  |  4 +-
 .../advanced/demo/scroll-speed-ratio.ts       |  4 +-
 .../advanced/demo/scroll-to-cell.ts           |  4 +-
 .../layout/adaptive/demo/react-adaptive.tsx   |  4 +-
 .../drill-dwon/demo/basic-panel.tsx           |  4 +-
 .../drill-dwon/demo/for-pivot.tsx             |  4 +-
 .../react-component/export/demo/export.tsx    |  4 +-
 .../react-component/header/demo/default.tsx   | 10 ++-
 .../react-component/pagination/demo/pivot.tsx |  4 +-
 .../react-component/pagination/demo/table.tsx |  4 +-
 .../react-component/sheet/demo/editable.tsx   |  4 +-
 .../sheet/demo/mobile-pivot.tsx               |  4 +-
 .../react-component/sheet/demo/pivot.tsx      |  4 +-
 .../sheet/demo/strategy-mini-chart.tsx        |  4 +-
 .../react-component/sheet/demo/strategy.tsx   |  4 +-
 .../react-component/sheet/demo/table.tsx      |  4 +-
 .../switcher/demo/pivot-header.tsx            | 10 ++-
 .../switcher/demo/pivot-with-children.tsx     | 10 ++-
 .../react-component/switcher/demo/pivot.tsx   | 10 ++-
 .../switcher/demo/pure-switcher.tsx           |  4 +-
 .../react-component/switcher/demo/table.tsx   | 10 ++-
 .../react-component/tooltip/demo/basic.tsx    |  4 +-
 .../demo/custom-click-show-tooltip.tsx        |  4 +-
 .../tooltip/demo/custom-content-base.ts       |  4 ++
 .../tooltip/demo/custom-content-react.tsx     |  8 +--
 .../tooltip/demo/custom-description.tsx       |  4 +-
 .../demo/custom-hover-show-tooltip.tsx        |  4 +-
 .../tooltip/demo/custom-operation.tsx         |  4 +-
 .../tooltip/demo/custom-show-tooltip.tsx      |  8 +--
 .../tooltip/demo/custom-tooltip.tsx           | 10 +--
 .../tooltip/demo/operation.tsx                |  4 +-
 .../custom/demo/custom-generate-palette.tsx   |  4 +-
 .../custom/demo/custom-manual-palette.tsx     |  4 +-
 62 files changed, 263 insertions(+), 216 deletions(-)
 create mode 100644 s2-site/.dumi/theme/plugin.ts
 create mode 100644 s2-site/LEGAL.md

diff --git a/s2-site/.dumi/global.ts b/s2-site/.dumi/global.ts
index 7e45d278de..cbcd11b27d 100644
--- a/s2-site/.dumi/global.ts
+++ b/s2-site/.dumi/global.ts
@@ -1,7 +1,8 @@
 if (window) {
   (window as any).react = require('react');
-  (window as any).reactDOM = require('react-dom');
-  // (window as any).reactDOMClient = require('react-dom/client');
+  // 如果写成 reactDOM 会导致在 playground 运行时找不到,
+  (window as any).reactDom = require('react-dom');
+  (window as any).reactDomClient = require('react-dom/client');
   (window as any).lodash = require('lodash');
   (window as any).reactColor = require('react-color');
   (window as any).copyToClipboard = require('copy-to-clipboard');
@@ -18,8 +19,11 @@ if (window) {
   (window as any).s2 = require('@antv/s2');
   (window as any).s2React = require('@antv/s2-react');
 
-  (window as any).s2Css = require('@antv/s2/dist/style.min.css');
-  (window as any).s2ReactCss = require('@antv/s2-react/dist/style.min.css');
+  // 本地 link 时不需要引入样式
+  if (process.env.NODE_ENV === 'production') {
+    (window as any).s2CSS = require('@antv/s2/dist/style.min.css');
+    (window as any).s2ReactCSS = require('@antv/s2-react/dist/style.min.css');
+  }
 
   // 码云和老网站统一跳转 antgroup 新域名
   const hosts = ['s2.antv.vision', 'antv-s2.gitee.io'];
@@ -50,7 +54,7 @@ if (window) {
     },
     {
       package: 'react-dom',
-      version: (window as any).reactDOM?.version || 'development',
+      version: (window as any).reactDom?.version || 'development',
     },
     {
       package: 'antd',
diff --git a/s2-site/.dumi/theme/plugin.ts b/s2-site/.dumi/theme/plugin.ts
new file mode 100644
index 0000000000..b6e75b8613
--- /dev/null
+++ b/s2-site/.dumi/theme/plugin.ts
@@ -0,0 +1,12 @@
+import { omit } from 'lodash';
+
+import type { IApi } from 'dumi';
+
+export default (api: IApi) => {
+  api.modifyConfig((memo) => {
+    return {
+      ...memo,
+      alias: omit(memo.alias, ['antd', 'react', 'react-dom']),
+    };
+  });
+};
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index b8bd3d631a..48c8f7ede2 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -31,7 +31,7 @@ export default defineConfig({
     showWxQrcode: true, // 是否显示头部菜单的微信公众号
     showChartResize: true, // 是否在 demo 页展示图表视图切换
     showAPIDoc: true, // 是否在 demo 页展示API文档
-    themeSwitcher: 'g2',
+    es5: false,
     versions: {
       // 历史版本以及切换下拉菜单
       // [version || '2.x']: 'https://s2.antv.antgroup.com',
@@ -45,13 +45,13 @@ export default defineConfig({
       indexName: 's2-antv-antgroup',
       appId: 'LWCKDMVZ87',
     },
-    internalSite: {
-      url: 'https://s2.antv.antgroup.com',
-      name: {
-        zh: '国内镜像',
-        en: 'China Mirror',
-      },
-    },
+    // internalSite: {
+    //   url: 'https://s2.antv.antgroup.com',
+    //   name: {
+    //     zh: '国内镜像',
+    //     en: 'China Mirror',
+    //   },
+    // },
     navs: [
       {
         slug: 'docs/manual',
@@ -81,6 +81,20 @@ export default defineConfig({
           en: 'Playground',
         },
       },
+      {
+        slug: 'manual/faq',
+        title: {
+          zh: '常见问题',
+          en: 'FAQ',
+        },
+      },
+      {
+        slug: 'https://github.com/antvis/S2/releases',
+        title: {
+          zh: '更新日志',
+          en: 'ChangeLog',
+        },
+      },
     ],
     docs: [
       {
@@ -257,8 +271,7 @@ export default defineConfig({
       },
     ],
     playground: {
-      playgroundDidMount: 'console.log("playgroundDidMount");',
-      playgroundWillUnmount: 'console.log("playgroundWillUnmount");',
+      extraLib: '',
       devDependencies: {
         typescript: 'latest',
       },
@@ -301,13 +314,14 @@ export default defineConfig({
           },
           link: `/manual/migration-v2`,
         },
-        {
-          text: {
-            zh: '图表示例',
-            en: 'Examples',
-          },
-          link: `/examples`,
-        },
+        // 右上角有图表示例的入口, 2.0 过渡期间透出 [升级指南]
+        // {
+        //   text: {
+        //     zh: '图表示例',
+        //     en: 'Examples',
+        //   },
+        //   link: `/examples`,
+        // },
         {
           text: {
             zh: '开始使用',
@@ -322,27 +336,27 @@ export default defineConfig({
     news: [
       {
         type: {
-          zh: '论坛',
-          en: 'Forum',
+          zh: 'S2 2.0',
+          en: 'S2 2.0',
         },
         title: {
-          zh: 'AntV 芒种日 图新物：GraphInsight 发布',
-          en: 'AntV New Product Launch: GraphInsight',
+          zh: 'S2 2.0 版本开始内测啦! 欢迎尝鲜使用.',
+          en: 'S2 2.0 is in beta! Welcome to use.',
         },
-        date: '2022.06.06',
-        link: 'https://github.com/antvis/GraphInsight',
+        date: '2023.12.06',
+        link: 'https://github.com/antvis/S2/issues/2454',
       },
       {
         type: {
-          zh: '论坛',
-          en: 'Forum',
+          zh: '初心 · 出新 AntV 2023 年度发布',
+          en: 'AntV 2023',
         },
         title: {
-          zh: 'SEE Conf 2022 支付宝体验科技大会',
-          en: 'Alipay Experience Technology Conference',
+          zh: 'S2 2.0 表格看数新纪元',
+          en: 'S2 2.0 Next Version',
         },
-        date: '2022.01.08',
-        link: 'https://seeconf.antfin.com/',
+        date: '2023.11.22',
+        link: 'https://www.yuque.com/antv/blog/1122_7_s2',
       },
     ],
     /** 首页特性介绍 */
diff --git a/s2-site/LEGAL.md b/s2-site/LEGAL.md
new file mode 100644
index 0000000000..dfc3285823
--- /dev/null
+++ b/s2-site/LEGAL.md
@@ -0,0 +1,7 @@
+Legal Disclaimer
+
+Within this source code, the comments in Chinese shall be the original, governing version. Any comment in other languages are for reference only. In the event of any conflict between the Chinese language version comments and other language version comments, the Chinese language version shall prevail.
+
+法律免责声明
+
+关于代码注释部分，中文注释为官方版本，其它语言注释仅做参考。中文注释可能与其它语言注释存在不一致，当中文注释与其它语言注释存在不一致时，请以中文注释为准。
diff --git a/s2-site/docs/common/env.zh.md b/s2-site/docs/common/env.zh.md
index 164f19021b..0d51eb3f1a 100644
--- a/s2-site/docs/common/env.zh.md
+++ b/s2-site/docs/common/env.zh.md
@@ -1,7 +1,7 @@
-默认兼容**现代浏览器**, 如果出现兼容性问题请结合 `babel` 和 `@babel/polyfill` 使用
+兼容**现代浏览器**
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
-| --- | --- | --- |
-| last 2 versions | last 2 versions | last 2 versions |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- |  --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 `@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
diff --git a/s2-site/docs/manual/advanced/chart-in-cell.zh.md b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
index 4a634c3c98..d22d2ec85a 100644
--- a/s2-site/docs/manual/advanced/chart-in-cell.zh.md
+++ b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
@@ -1,8 +1,6 @@
 ---
-title: 单元格内绘制图表 <Badge>info</Badge>
+title: 单元格内绘制图表
 order: 11
-features:
-  - emoji: x
 ---
 
 如果纯文本的表格不够直观，S2 支持 [自定义单元格](/examples#custom-custom-cell)，也内置了 [简单的 mini 图绘制](/examples/custom/custom-cell/#mini-chart)
diff --git a/s2-site/docs/manual/basic/tooltip.zh.md b/s2-site/docs/manual/basic/tooltip.zh.md
index b147ea05b5..7e3042f7d4 100644
--- a/s2-site/docs/manual/basic/tooltip.zh.md
+++ b/s2-site/docs/manual/basic/tooltip.zh.md
@@ -117,7 +117,11 @@ const s2Options = {
 
 <Playground path='react-component/tooltip/demo/custom-content-base.ts' rid='custom-content-base' height='300'></playground>
 
-对于 `@antv/s2` 类的使用方式：tooltip 内容 可以是任意 `dom` 节点或者 `字符串`
+对于 `@antv/s2` 类的使用方式：`tooltip` 内容可以是任意 `dom` 节点或者 `字符串 (innerHTML)`.
+
+:::warning
+请注意 XSS 过滤！
+:::
 
 ```ts
 const content = document.createElement('div')
@@ -135,7 +139,10 @@ const s2Options = {
 const s2Options = {
   tooltip: {
     content: `
-      <div>我是自定义内容</div>
+      <div>
+        <div>我是自定义内容</div>
+        <p>我也是是自定义内容</p>
+      </div>
     `,
   },
 };
@@ -150,7 +157,7 @@ const s2Options = {
 ```tsx
 const content = (
   <div>
-    <span>我是自定义内容 </span>
+    <span>我是自定义内容</span>
   </div>
 )
 
diff --git a/s2-site/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md
index 0c11b8c7b2..35d0e922c8 100644
--- a/s2-site/docs/manual/faq.zh.md
+++ b/s2-site/docs/manual/faq.zh.md
@@ -138,6 +138,10 @@ await s2.render(false)
 
 请查看 [Tooltip 注意事项](/docs/manual/basic/tooltip#%E7%AE%80%E4%BB%8B)
 
+### 如果在 `@antv/s2` 中使用 tooltip ?
+
+请查看 [Tooltip 文档](/docs/manual/basic/tooltip) 和 [示例](/examples/react-component/tooltip/#custom-content-base)
+
 ### 如何在 Vue 中自定义 Tooltip?
 
 可直接使用 S2 的 Vue3 版本 `@antv/s2-vue`, 或查看 [在 Vue3 中自定义](/docs/manual/basic/tooltip/#在-vue3-中自定义)
diff --git a/s2-site/examples/analysis/sort/demo/advanced.tsx b/s2-site/examples/analysis/sort/demo/advanced.tsx
index 9d5dfbac3d..8921846c68 100644
--- a/s2-site/examples/analysis/sort/demo/advanced.tsx
+++ b/s2-site/examples/analysis/sort/demo/advanced.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent } from '@antv/s2-react';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import 'antd/es/cascader/style/index.css';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -79,12 +79,12 @@ fetch(
       );
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <AdvancedSortDemo />,
     );
   });
 
-insertCss(`
+insertCSS(`
   .antv-s2-advanced-sort-btn.ant-btn svg path {
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   }
diff --git a/s2-site/examples/analysis/sort/demo/group-sort.tsx b/s2-site/examples/analysis/sort/demo/group-sort.tsx
index 1d57339406..9d9add745e 100644
--- a/s2-site/examples/analysis/sort/demo/group-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/group-sort.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -42,7 +42,7 @@ fetch(
       showDefaultHeaderActionIcon: true,
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
diff --git a/s2-site/examples/analysis/sort/demo/table-sort.tsx b/s2-site/examples/analysis/sort/demo/table-sort.tsx
index 91f167ec3c..6d02b0a49e 100644
--- a/s2-site/examples/analysis/sort/demo/table-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/table-sort.tsx
@@ -2,10 +2,10 @@ import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { Button } from 'antd';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import { orderBy } from 'lodash';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
@@ -131,13 +131,13 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       );
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(<App />);
+    createRoot(document.getElementById('container')).render(<App />);
   });
 
 // 我们用 insert-css 演示引入自定义样式
 // 推荐将样式添加到自己的样式文件中
 // 若拷贝官方代码，别忘了 npm install insert-css
-insertCss(`
+insertCSS(`
   .ant-btn {
     margin-right: 10px;
     margin-bottom: 10px;
diff --git a/s2-site/examples/case/art/demo/mosaic.tsx b/s2-site/examples/case/art/demo/mosaic.tsx
index 505acc9f10..ab10606713 100644
--- a/s2-site/examples/case/art/demo/mosaic.tsx
+++ b/s2-site/examples/case/art/demo/mosaic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { ThemeCfg } from '@antv/s2';
@@ -72,7 +72,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
diff --git a/s2-site/examples/case/art/demo/time-spend-abstract.tsx b/s2-site/examples/case/art/demo/time-spend-abstract.tsx
index 57a1ac7a0e..7608522b86 100644
--- a/s2-site/examples/case/art/demo/time-spend-abstract.tsx
+++ b/s2-site/examples/case/art/demo/time-spend-abstract.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import insertCss from 'insert-css';
+import { createRoot } from 'react-dom';
+import insertCSS from 'insert-css';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import { Image as GImage } from '@antv/g';
 import { DataCell, ThemeCfg } from '@antv/s2';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -41,7 +42,10 @@ const paletteLegendMap = [
   },
 ];
 
-// 自定义单元格
+/**
+ * 自定义 DataCell, 给单元格添加图表
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
+ */
 class CustomDataCell extends DataCell {
   drawTextShape() {
     const { fieldValue } = this.meta;
@@ -54,8 +58,8 @@ class CustomDataCell extends DataCell {
     const { x, y, width, height } = this.meta;
 
     img.onload = () => {
-      this.textShape = this.addShape('image', {
-        attrs: {
+      this.textShape = new GImage({
+        style: {
           x: x + (width - img?.width) / 2,
           y: y + (height - img?.height) / 2,
           width: img?.width ?? width,
@@ -180,7 +184,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       </div>
     );
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <div className="sheet-wrapper">
         <PaletteLegend />
         <SheetComponent
@@ -193,7 +197,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
     );
   });
 
-insertCss(`
+insertCSS(`
   .sheet-wrapper {
     background: #010138;
     padding: 16px;
diff --git a/s2-site/examples/case/comparison/demo/measure-comparison.tsx b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
index 7997d48de2..b7d0f5a8d3 100644
--- a/s2-site/examples/case/comparison/demo/measure-comparison.tsx
+++ b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
@@ -1,23 +1,28 @@
 /* eslint-disable max-classes-per-file */
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import {
   ColCell,
   DataCell,
   CornerCell,
   Frame,
-  ID_SEPARATOR,
+  NODE_ID_SEPARATOR,
+  ROOT_NODE_ID,
   S2DataConfig,
 } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
+// 上涨颜色
 const UP_COLOR = '#F46649';
+// 下降颜色
 const DOWN_COLOR = '#2AA491';
-// 指标高度
-const TAG_HEIGHT = 20;
 // 指标宽度
 const TAG_WIDTH = 80;
+// 指标高度
+const TAG_HEIGHT = 20;
+
+const isRoot = (id) => id === ROOT_NODE_ID;
 
 class CustomColCell extends ColCell {
   lineConfig = {};
@@ -54,7 +59,7 @@ class CustomColCell extends ColCell {
   drawBackgroundShape() {
     const { parent } = this.meta;
 
-    if (parent?.id === 'root' && this.lineConfigStyle.stroke) {
+    if (isRoot(parent?.id) && this.lineConfigStyle.stroke) {
       this.backgroundShape = this.addShape('rect', {
         attrs: {
           ...this.getCellArea(),
@@ -70,7 +75,7 @@ class CustomColCell extends ColCell {
   drawInteractiveBgShape() {
     const { parent } = this.meta;
 
-    if (parent?.id === 'root') {
+    if (isRoot(parent?.id)) {
       return;
     }
 
@@ -81,7 +86,7 @@ class CustomColCell extends ColCell {
   drawTextShape() {
     const { value, parent } = this.meta;
 
-    if (parent?.id === 'root') {
+    if (isRoot(parent?.id)) {
       const position = this.getTextPosition();
       const textStyle = this.getTextStyle();
 
@@ -110,7 +115,7 @@ class CustomColCell extends ColCell {
       verticalBorderColorOpacity,
     } = this.getStyle().cell;
 
-    if (parent?.id === 'root') {
+    if (isRoot(parent?.id)) {
       this.addShape('line', {
         attrs: {
           x1: x,
@@ -136,7 +141,7 @@ class CustomColCell extends ColCell {
       });
     }
 
-    if (parent?.parent?.id === 'root') {
+    if (isRoot(parent?.parent?.id)) {
       if (this.lineConfig[value]) {
         indexCache[colIndex + 1] = 1;
         this.spreadsheet?.store?.set('indexCache', indexCache);
@@ -187,7 +192,9 @@ class CustomDataCell extends DataCell {
   getIconStyle() {
     const tagName = Object.keys(this.customConditions).find(
       (item) =>
-        this.meta.colId?.includes(`root${ID_SEPARATOR}${item}${ID_SEPARATOR}`),
+        this.meta.colId?.includes(
+          `root${NODE_ID_SEPARATOR}${item}${NODE_ID_SEPARATOR}`,
+        ),
     );
 
     if (tagName) {
@@ -204,7 +211,9 @@ class CustomDataCell extends DataCell {
     const { fieldValue } = this.meta;
     const tagName = Object.keys(this.textConfig).find(
       (item) =>
-        this.meta.colId?.includes(`root${ID_SEPARATOR}${item}${ID_SEPARATOR}`),
+        this.meta.colId?.includes(
+          `root${NODE_ID_SEPARATOR}${item}${NODE_ID_SEPARATOR}`,
+        ),
     );
 
     if (!tagName) {
@@ -584,7 +593,7 @@ fetch('https://assets.antv.antgroup.com/s2/index-comparison.json')
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx b/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
index cfb1c183a3..680c276036 100644
--- a/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
+++ b/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import insertCss from 'insert-css';
+import { createRoot } from 'react-dom';
+import insertCSS from 'insert-css';
 import { ColCell, S2DataConfig, S2Theme } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
@@ -236,7 +236,7 @@ fetch('https://assets.antv.antgroup.com/s2/multiple-people-comparison.json')
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
@@ -250,7 +250,7 @@ fetch('https://assets.antv.antgroup.com/s2/multiple-people-comparison.json')
     );
   });
 
-insertCss(`
+insertCSS(`
 
   .ant-page-header {
     margin: 0 !important;
diff --git a/s2-site/examples/case/comparison/demo/philosophers.tsx b/s2-site/examples/case/comparison/demo/philosophers.tsx
index 2d3e79439b..2ff188d35f 100644
--- a/s2-site/examples/case/comparison/demo/philosophers.tsx
+++ b/s2-site/examples/case/comparison/demo/philosophers.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { max, min, replace } from 'lodash';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -195,7 +195,7 @@ fetch(
       });
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
@@ -209,7 +209,7 @@ fetch(
     );
   });
 
-insertCss(`
+insertCSS(`
   .ant-page-header-compact {
     width: 100% ;
   }
diff --git a/s2-site/examples/case/comparison/demo/time-spend.tsx b/s2-site/examples/case/comparison/demo/time-spend.tsx
index 351d49867b..89ad3027d7 100644
--- a/s2-site/examples/case/comparison/demo/time-spend.tsx
+++ b/s2-site/examples/case/comparison/demo/time-spend.tsx
@@ -2,9 +2,9 @@
 import { DataCell, Frame, ThemeCfg } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 const paletteLegendMap = [
   {
@@ -283,7 +283,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       </div>
     );
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <div className="sheet-wrapper">
         <PaletteLegend />
         <SheetComponent
@@ -296,7 +296,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
     );
   });
 
-insertCss(`
+insertCSS(`
   .sheet-wrapper {
     background: #010138;
     padding: 16px;
diff --git a/s2-site/examples/case/data-preview/demo/excel.tsx b/s2-site/examples/case/data-preview/demo/excel.tsx
index d041e87ce2..a2c035a0e1 100644
--- a/s2-site/examples/case/data-preview/demo/excel.tsx
+++ b/s2-site/examples/case/data-preview/demo/excel.tsx
@@ -3,7 +3,7 @@ import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import 'antd/es/checkbox/style/index.css';
 import React, { useRef, useState } from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 // 初始化配置
 const s2Options: SheetComponentOptions = {
@@ -42,7 +42,5 @@ const App = ({ data }) => {
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
   .then((res) => {
-    ReactDOM.createRoot(document.getElementById('container')).render(
-      <App data={res} />,
-    );
+    createRoot(document.getElementById('container')).render(<App data={res} />);
   });
diff --git a/s2-site/examples/case/data-preview/demo/house.tsx b/s2-site/examples/case/data-preview/demo/house.tsx
index eae503e34f..70fafab9de 100644
--- a/s2-site/examples/case/data-preview/demo/house.tsx
+++ b/s2-site/examples/case/data-preview/demo/house.tsx
@@ -1,10 +1,10 @@
 import { S2DataConfig, NODE_ID_SEPARATOR } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { InputNumber, Select, Space } from 'antd';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import { every, filter, isNil, last, map, omit } from 'lodash';
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 const defaultHouseInfo = {
   name: ['15#', '16#', '21#', '22#'],
@@ -274,7 +274,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((data) => {
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <Sheet data={data} />,
     );
   });
@@ -282,7 +282,7 @@ fetch(
 // We use 'insert-css' to insert custom styles
 // It is recommended to add the style to your own style sheet files
 // If you want to copy the code directly, please remember to install the npm package 'insert-css
-insertCss(`
+insertCSS(`
   .select-item {
       margin: 5px 16px 0 0;
   }
diff --git a/s2-site/examples/case/data-preview/demo/index.tsx b/s2-site/examples/case/data-preview/demo/index.tsx
index a96499af13..937337c38d 100644
--- a/s2-site/examples/case/data-preview/demo/index.tsx
+++ b/s2-site/examples/case/data-preview/demo/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable max-classes-per-file */
 import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom/client';
-import insertCss from 'insert-css';
+import { createRoot } from 'react-dom';
+import insertCSS from 'insert-css';
 import {
   TableColCell,
   GuiIcon,
@@ -694,12 +694,10 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
   .then((res) => {
-    ReactDOM.createRoot(document.getElementById('container')).render(
-      <App data={res} />,
-    );
+    createRoot(document.getElementById('container')).render(<App data={res} />);
   });
 
-insertCss(`
+insertCSS(`
   .antv-s2-data-preview-demo-modal .filter-item{
     margin-top: 20px;
   }
diff --git a/s2-site/examples/case/kpi-strategy/demo/basic.tsx b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
index 41c6c21019..8c9b3f2bf6 100644
--- a/s2-site/examples/case/kpi-strategy/demo/basic.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
@@ -2,7 +2,7 @@ import { DataCell, measureTextWidth, S2DataConfig, S2Theme } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 // 进度条
 const PROGRESS_BAR = {
@@ -247,7 +247,7 @@ fetch('https://assets.antv.antgroup.com/s2/kpi-strategy.json')
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
index ae70d30df7..b5fcfb691c 100644
--- a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { isNil } from 'lodash';
 import { isUpDataValue } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
@@ -70,7 +70,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataCfg}
         options={s2Options}
diff --git a/s2-site/examples/case/performance-compare/demo/basic.tsx b/s2-site/examples/case/performance-compare/demo/basic.tsx
index 48613aaf51..a66eaa76e0 100644
--- a/s2-site/examples/case/performance-compare/demo/basic.tsx
+++ b/s2-site/examples/case/performance-compare/demo/basic.tsx
@@ -3,7 +3,7 @@ import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { compact } from 'lodash';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 const disableColor = '#d3d7d4';
 const colors = [
@@ -91,7 +91,7 @@ function getOptions(rawData: S2DataConfig['data']): SheetComponentOptions {
 fetch('https://assets.antv.antgroup.com/s2/compare.json')
   .then((res) => res.json())
   .then((data) => {
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <div>
         <h3>1000 数据规模表格渲染时间对比</h3>
         <SheetComponent
diff --git a/s2-site/examples/case/proportion/demo/group-drill-down.tsx b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
index c49119c062..e1b35d0a30 100644
--- a/s2-site/examples/case/proportion/demo/group-drill-down.tsx
+++ b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
@@ -1,9 +1,9 @@
 import { isUpDataValue } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/ff31b171-17a7-4d29-b20a-0b90a810d2de.json',
@@ -154,12 +154,10 @@ fetch(
       );
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
-      <GridSheet />,
-    );
+    createRoot(document.getElementById('container')).render(<GridSheet />);
   });
 
-insertCss(`
+insertCSS(`
   .antv-s2-tooltip-operator {
     display: flex
   }
diff --git a/s2-site/examples/case/proportion/demo/single-population-proportion.tsx b/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
index e2ef2b978d..f834fb3370 100644
--- a/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
+++ b/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
@@ -1,9 +1,9 @@
 import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 const PALETTE_COLORS = [
   {
@@ -155,7 +155,7 @@ fetch('https://assets.antv.antgroup.com/s2/single-population-proportion.json')
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <div className="root">
         <SheetComponent
           dataCfg={s2DataConfig}
@@ -171,7 +171,7 @@ fetch('https://assets.antv.antgroup.com/s2/single-population-proportion.json')
     );
   });
 
-insertCss(`
+insertCSS(`
   .root{
     display: inline-block;
   }
diff --git a/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
index 7ecc069853..a02d1af192 100644
--- a/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
+++ b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -103,7 +103,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent dataCfg={dataCfg} options={s2Options} />,
     );
   });
diff --git a/s2-site/examples/custom/custom-order/demo/custom-order.tsx b/s2-site/examples/custom/custom-order/demo/custom-order.tsx
index 7140bc4c94..89507a996e 100644
--- a/s2-site/examples/custom/custom-order/demo/custom-order.tsx
+++ b/s2-site/examples/custom/custom-order/demo/custom-order.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { Node, S2DataConfig, TooltipOptions } from '@antv/s2';
 
@@ -126,4 +126,4 @@ const App = () => {
   );
 };
 
-ReactDOM.createRoot(document.getElementById('container')).render(<App />);
+createRoot(document.getElementById('container')).render(<App />);
diff --git a/s2-site/examples/interaction/advanced/demo/merge-cell.ts b/s2-site/examples/interaction/advanced/demo/merge-cell.ts
index a6b1be6164..7eb2856714 100644
--- a/s2-site/examples/interaction/advanced/demo/merge-cell.ts
+++ b/s2-site/examples/interaction/advanced/demo/merge-cell.ts
@@ -1,5 +1,5 @@
 import { PivotSheet, S2DataConfig, S2Event, S2Options } from '@antv/s2';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
@@ -74,7 +74,7 @@ fetch(
     await s2.render();
   });
 
-insertCss(`
+insertCSS(`
   .merge-cells-button {
     border: 1px solid transparent;
     box-shadow: 0 2px #00000004;
diff --git a/s2-site/examples/interaction/advanced/demo/resize-active.ts b/s2-site/examples/interaction/advanced/demo/resize-active.ts
index d94badfa87..d89cbb0626 100644
--- a/s2-site/examples/interaction/advanced/demo/resize-active.ts
+++ b/s2-site/examples/interaction/advanced/demo/resize-active.ts
@@ -1,5 +1,5 @@
 import { PivotSheet, S2Options, SpreadSheet, SpreadSheet } from '@antv/s2';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 
 function createRadioGroup(s2: SpreadSheet) {
   [
@@ -69,7 +69,7 @@ fetch(
     createRadioGroup(s2);
   });
 
-insertCss(`
+insertCSS(`
   input[type='radio'] {
     margin-bottom: 20px;
     margin-right: 4px;
diff --git a/s2-site/examples/interaction/advanced/demo/scroll-loop.ts b/s2-site/examples/interaction/advanced/demo/scroll-loop.ts
index 5119209d94..fe6558fd78 100644
--- a/s2-site/examples/interaction/advanced/demo/scroll-loop.ts
+++ b/s2-site/examples/interaction/advanced/demo/scroll-loop.ts
@@ -1,5 +1,5 @@
 import { PivotSheet, S2Event, S2Options } from '@antv/s2';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 
 // 每次滚动的距离
 const STEP = 50;
@@ -95,7 +95,7 @@ fetch(
     addScrollButton(s2);
   });
 
-insertCss(`
+insertCSS(`
   #container > canvas {
     margin-top: 10px;
   }
diff --git a/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts b/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts
index 3b786ddc50..f0a6d1bed3 100644
--- a/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts
+++ b/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts
@@ -1,6 +1,6 @@
 import { S2DataConfig, S2Options, SpreadSheet, TableSheet } from '@antv/s2';
 
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 
 const defaultScrollSpeedRatio = 1;
 
@@ -84,7 +84,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
     createSlider(s2);
   });
 
-insertCss(`
+insertCSS(`
   input[type='range'] {
     display: block;
     width: 300px;
diff --git a/s2-site/examples/interaction/advanced/demo/scroll-to-cell.ts b/s2-site/examples/interaction/advanced/demo/scroll-to-cell.ts
index 2fbfe51cfa..cba82ce13b 100644
--- a/s2-site/examples/interaction/advanced/demo/scroll-to-cell.ts
+++ b/s2-site/examples/interaction/advanced/demo/scroll-to-cell.ts
@@ -1,5 +1,5 @@
 import { PivotSheet, S2Options, SpreadSheet } from '@antv/s2';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 
 function addScrollRowHeaderButton(s2: SpreadSheet) {
   const btn = document.createElement('button');
@@ -91,7 +91,7 @@ fetch(
     addScrollRowHeaderButton(s2);
   });
 
-insertCss(`
+insertCSS(`
   #container > canvas {
     margin-top: 10px;
   }
diff --git a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
index bb14495c05..621438424c 100644
--- a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
+++ b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
@@ -1,6 +1,6 @@
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
@@ -12,7 +12,7 @@ fetch(
       height: 480,
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
diff --git a/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx b/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx
index e5587bf656..94630e4b6e 100644
--- a/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx
+++ b/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { DrillDown } from '@antv/s2-react';
 
 const disabledFields = ['name'];
@@ -28,7 +28,7 @@ const dataSet = [
   },
 ];
 
-ReactDOM.createRoot(document.getElementById('container')).render(
+createRoot(document.getElementById('container')).render(
   <DrillDown
     disabledFields={disabledFields}
     clearButtonText={clearButtonText}
diff --git a/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx b/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
index 86ad429843..91291690d1 100644
--- a/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
+++ b/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import {
   SheetComponent,
   SheetComponentOptions,
@@ -81,7 +81,7 @@ fetch(
         }),
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/react-component/export/demo/export.tsx b/s2-site/examples/react-component/export/demo/export.tsx
index 0cebaa6cce..9a6663bd20 100644
--- a/s2-site/examples/react-component/export/demo/export.tsx
+++ b/s2-site/examples/react-component/export/demo/export.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -27,7 +27,7 @@ fetch(
       data: res.data,
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/react-component/header/demo/default.tsx b/s2-site/examples/react-component/header/demo/default.tsx
index 5553f0de41..87cd753e02 100644
--- a/s2-site/examples/react-component/header/demo/default.tsx
+++ b/s2-site/examples/react-component/header/demo/default.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import insertCss from 'insert-css';
+import { createRoot } from 'react-dom';
+import insertCSS from 'insert-css';
 import { Button } from 'antd';
 import {
   SheetComponent,
@@ -66,12 +66,10 @@ fetch(
       );
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
-      <SheetHeader />,
-    );
+    createRoot(document.getElementById('container')).render(<SheetHeader />);
   });
 
-insertCss(`
+insertCSS(`
   .antv-s2-header {
     margin:0px !important;
   }
diff --git a/s2-site/examples/react-component/pagination/demo/pivot.tsx b/s2-site/examples/react-component/pagination/demo/pivot.tsx
index 63d8200201..f1b73f960f 100644
--- a/s2-site/examples/react-component/pagination/demo/pivot.tsx
+++ b/s2-site/examples/react-component/pagination/demo/pivot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -18,7 +18,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent dataCfg={dataCfg} options={s2Options} showPagination />,
     );
   });
diff --git a/s2-site/examples/react-component/pagination/demo/table.tsx b/s2-site/examples/react-component/pagination/demo/table.tsx
index b33a13cdcf..e7219c0830 100644
--- a/s2-site/examples/react-component/pagination/demo/table.tsx
+++ b/s2-site/examples/react-component/pagination/demo/table.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -45,7 +45,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       data: res,
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/react-component/sheet/demo/editable.tsx b/s2-site/examples/react-component/sheet/demo/editable.tsx
index 8f9fd99f7a..8507f2d4c6 100644
--- a/s2-site/examples/react-component/sheet/demo/editable.tsx
+++ b/s2-site/examples/react-component/sheet/demo/editable.tsx
@@ -1,7 +1,7 @@
 import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
@@ -51,7 +51,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx b/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx
index 6dee13ce06..893e36ac17 100644
--- a/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx
+++ b/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { MobileSheet } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -8,7 +8,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <MobileSheet dataCfg={dataCfg} />,
     );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/pivot.tsx b/s2-site/examples/react-component/sheet/demo/pivot.tsx
index 1977c9d014..2227eb28ff 100644
--- a/s2-site/examples/react-component/sheet/demo/pivot.tsx
+++ b/s2-site/examples/react-component/sheet/demo/pivot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -13,7 +13,7 @@ fetch(
       height: 480,
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent dataCfg={dataCfg} options={s2Options} />,
     );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
index f6486fff8e..e362858e6d 100644
--- a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
+++ b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
@@ -1,7 +1,7 @@
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/b942d973-7364-4fad-a10a-369426a61376.json',
@@ -42,7 +42,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
diff --git a/s2-site/examples/react-component/sheet/demo/strategy.tsx b/s2-site/examples/react-component/sheet/demo/strategy.tsx
index 6c252abc69..f790fb6251 100644
--- a/s2-site/examples/react-component/sheet/demo/strategy.tsx
+++ b/s2-site/examples/react-component/sheet/demo/strategy.tsx
@@ -2,7 +2,7 @@ import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 // 临时处理老数据格式
 function process(children) {
@@ -80,7 +80,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="strategy"
         dataCfg={s2DataConfig}
diff --git a/s2-site/examples/react-component/sheet/demo/table.tsx b/s2-site/examples/react-component/sheet/demo/table.tsx
index a03dd836cd..90a7a31a17 100644
--- a/s2-site/examples/react-component/sheet/demo/table.tsx
+++ b/s2-site/examples/react-component/sheet/demo/table.tsx
@@ -2,7 +2,7 @@ import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
@@ -41,7 +41,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       data: res,
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
index 5a17f235d5..95f2a9070b 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
@@ -1,8 +1,8 @@
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/6eede6eb-8021-4da8-bb12-67891a5705b7.json',
@@ -34,12 +34,10 @@ fetch(
       );
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
-      <SwitcherDemo />,
-    );
+    createRoot(document.getElementById('container')).render(<SwitcherDemo />);
   });
 
-insertCss(`
+insertCSS(`
   .antv-s2-switcher-item.checkable-item {
     align-items: center;
   }
diff --git a/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx b/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
index 7f9b38689d..b566804f4b 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
@@ -4,9 +4,9 @@ import {
   Switcher,
 } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/0c913e28-7806-41b2-a046-df3c1586712c.json',
@@ -110,12 +110,10 @@ fetch(
       );
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
-      <SwitcherDemo />,
-    );
+    createRoot(document.getElementById('container')).render(<SwitcherDemo />);
   });
 
-insertCss(`
+insertCSS(`
   .antv-s2-switcher-item.checkable-item {
     align-items: center;
   }
diff --git a/s2-site/examples/react-component/switcher/demo/pivot.tsx b/s2-site/examples/react-component/switcher/demo/pivot.tsx
index 22e02d5a34..bc664833b9 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import {
   SheetComponent,
   SheetComponentOptions,
   Switcher,
 } from '@antv/s2-react';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -88,12 +88,10 @@ fetch(
       );
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
-      <SwitcherDemo />,
-    );
+    createRoot(document.getElementById('container')).render(<SwitcherDemo />);
   });
 
-insertCss(`
+insertCSS(`
   .antv-s2-switcher-item.checkable-item {
     align-items: center;
   }
diff --git a/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx b/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx
index 83b8e4e2d6..6d34f472b1 100644
--- a/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { Switcher } from '@antv/s2-react';
 
 const switcherFields = {
@@ -20,6 +20,6 @@ const onSubmit = (result) => {
   console.log('result:', result);
 };
 
-ReactDOM.createRoot(document.getElementById('container')).render(
+createRoot(document.getElementById('container')).render(
   <Switcher {...switcherFields} onSubmit={onSubmit} />,
 );
diff --git a/s2-site/examples/react-component/switcher/demo/table.tsx b/s2-site/examples/react-component/switcher/demo/table.tsx
index a9c6b5d2d9..c61ec98775 100644
--- a/s2-site/examples/react-component/switcher/demo/table.tsx
+++ b/s2-site/examples/react-component/switcher/demo/table.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import {
   SheetComponent,
   SheetComponentOptions,
   Switcher,
 } from '@antv/s2-react';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -79,12 +79,10 @@ fetch(
       );
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
-      <SwitcherDemo />,
-    );
+    createRoot(document.getElementById('container')).render(<SwitcherDemo />);
   });
 
-insertCss(`
+insertCSS(`
   .antv-s2-switcher-item.checkable-item {
     align-items: center;
   }
diff --git a/s2-site/examples/react-component/tooltip/demo/basic.tsx b/s2-site/examples/react-component/tooltip/demo/basic.tsx
index 7cb2e8d650..bb5f346c12 100644
--- a/s2-site/examples/react-component/tooltip/demo/basic.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -19,7 +19,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
index 97e6093634..571d9e8f2f 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { TargetCellInfo } from '@antv/s2';
@@ -44,7 +44,7 @@ fetch(
       }
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-content-base.ts b/s2-site/examples/react-component/tooltip/demo/custom-content-base.ts
index 4dd783dc2e..c85de8199c 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-content-base.ts
+++ b/s2-site/examples/react-component/tooltip/demo/custom-content-base.ts
@@ -13,7 +13,9 @@ fetch(
       height: 480,
       tooltip: {
         enable: true,
+        // 1. 支持字符串
         content: '我是自定义内容',
+        // 2. 支持回调的方式
         rowCell: {
           content: (cell, showOptions) => {
             console.log(cell, showOptions);
@@ -29,6 +31,7 @@ fetch(
             `;
           },
         },
+        // 3. 支持 innerHTML 的方式, 请注意 XSS !
         colCell: {
           content: `
             <div>
@@ -37,6 +40,7 @@ fetch(
             </div>
           `,
         },
+        // 4. 支持 DOM 的方式
         dataCell: {
           content() {
             const div = document.createElement('div');
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx b/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
index 066f91b05a..fa82cb91a5 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -27,7 +27,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
@@ -37,7 +37,7 @@ fetch(
     );
   });
 
-insertCss(`
+insertCSS(`
   .tooltip-custom-component {
     padding: 12px;
     height: 50px;
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-description.tsx b/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
index aafe59bf59..178d3e3e05 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -47,7 +47,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         dataCfg={dataCfg}
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
index 119bfd0adc..461c719e5b 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -54,7 +54,7 @@ fetch(
       });
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
index 710bd27aa6..83093ec58d 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -73,7 +73,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
index 3a506f6d2b..3342873843 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -78,10 +78,10 @@ fetch(
       />
     );
 
-    ReactDOM.createRoot(document.getElementById('container')).render(<App />);
+    createRoot(document.getElementById('container')).render(<App />);
   });
 
-insertCss(`
+insertCSS(`
   .tooltip-custom-component {
     padding: 12px;
     height: 50px;
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
index 755c49f812..c2a1a11e63 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
@@ -5,9 +5,9 @@ import {
   TooltipOperatorMenuOptions,
 } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 
 const MyCustomTooltipContent = () => (
   <div className="tooltip-custom-component">我是自定义 tooltip 内容</div>
@@ -24,7 +24,7 @@ class CustomTooltip extends BaseTooltip<
   root: ReactDOM.Root;
 
   renderContent() {
-    this.root ??= ReactDOM.createRoot(this.container!);
+    this.root ??= createRoot(this.container!);
     this.root.render(<MyCustomTooltipContent />);
   }
 
@@ -62,7 +62,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
@@ -72,7 +72,7 @@ fetch(
     );
   });
 
-insertCss(`
+insertCSS(`
   .tooltip-custom-component {
     padding: 12px;
     height: 50px;
diff --git a/s2-site/examples/react-component/tooltip/demo/operation.tsx b/s2-site/examples/react-component/tooltip/demo/operation.tsx
index f07080a011..b2b999a974 100644
--- a/s2-site/examples/react-component/tooltip/demo/operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/operation.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { CellType } from '@antv/s2';
@@ -37,7 +37,7 @@ fetch(
       },
     };
 
-    ReactDOM.createRoot(document.getElementById('container')).render(
+    createRoot(document.getElementById('container')).render(
       <SheetComponent
         sheetType="pivot"
         adaptive={false}
diff --git a/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx b/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
index 95a7a4fe90..546bf1c9c4 100644
--- a/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
+++ b/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { getPalette, generatePalette, ThemeCfg } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { ChromePicker } from 'react-color';
@@ -74,5 +74,5 @@ fetch(
       );
     }
 
-    ReactDOM.createRoot(document.getElementById('container')).render(<App />);
+    createRoot(document.getElementById('container')).render(<App />);
   });
diff --git a/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx b/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
index 3f08a5c78a..e93387dad9 100644
--- a/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
+++ b/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { debounce, isObjectLike } from 'lodash';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { S2DataConfig, getPalette } from '@antv/s2';
 import { SketchPicker } from 'react-color';
@@ -227,4 +227,4 @@ function App() {
   );
 }
 
-ReactDOM.createRoot(document.getElementById('container')).render(<App />);
+createRoot(document.getElementById('container')).render(<App />);

From 699d0eb55921cddd439d199da0cfe4fbd87382b8 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Wed, 3 Jan 2024 17:07:29 +0800
Subject: [PATCH 16/64] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E6=97=A0=E6=B3=95=E5=85=81=E8=AE=B8=E7=9A=84=20React?=
 =?UTF-8?q?=20=E5=92=8C=20=E8=87=AA=E5=AE=9A=E4=B9=89=E5=8D=95=E5=85=83?=
 =?UTF-8?q?=E6=A0=BC=20Demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-core/src/cell/base-cell.ts        |   3 +-
 pnpm-lock.yaml                                | 146 +++++++-
 s2-site/.dumi/global.ts                       |   3 +-
 .../examples/analysis/sort/demo/advanced.tsx  |   9 +-
 .../analysis/sort/demo/group-sort.tsx         |  20 +-
 .../analysis/sort/demo/table-sort.tsx         |   5 +-
 s2-site/examples/case/art/demo/mosaic.tsx     |  18 +-
 .../case/art/demo/time-spend-abstract.tsx     |  24 +-
 .../comparison/demo/measure-comparison.tsx    | 324 ++++++++++--------
 .../demo/multiple-people-comparison.tsx       |  32 +-
 .../case/comparison/demo/philosophers.tsx     |   4 +-
 .../case/comparison/demo/time-spend.tsx       |  71 ++--
 .../examples/case/data-preview/demo/excel.tsx |   8 +-
 .../examples/case/data-preview/demo/house.tsx |   7 +-
 .../examples/case/data-preview/demo/index.tsx | 192 ++++++-----
 .../examples/case/kpi-strategy/demo/basic.tsx | 118 ++++---
 .../case/kpi-strategy/demo/covid-trend.tsx    |  20 +-
 .../case/performance-compare/demo/basic.tsx   |   3 +-
 .../case/proportion/demo/group-drill-down.tsx |   5 +-
 .../demo/single-population-proportion.tsx     |   3 +-
 .../custom/custom-cell/demo/col-cell.ts       |  22 +-
 .../custom/custom-cell/demo/corner-cell.ts    |  22 +-
 .../custom/custom-cell/demo/corner-header.ts  |  60 ++--
 .../custom/custom-cell/demo/data-cell.ts      |  22 +-
 .../custom/custom-cell/demo/row-cell.ts       |  22 +-
 .../demo/custom-header-action-icon.tsx        |   7 +-
 .../custom/custom-order/demo/custom-order.tsx |   3 +-
 .../layout/adaptive/demo/react-adaptive.tsx   |   3 +-
 .../drill-dwon/demo/basic-panel.tsx           |  17 +-
 .../drill-dwon/demo/for-pivot.tsx             |  19 +-
 .../react-component/export/demo/export.tsx    |   3 +-
 .../react-component/header/demo/default.tsx   |   5 +-
 .../react-component/pagination/demo/pivot.tsx |   9 +-
 .../react-component/pagination/demo/table.tsx |   3 +-
 .../react-component/sheet/demo/editable.tsx   |  17 +-
 .../sheet/demo/mobile-pivot.tsx               |   8 +-
 .../react-component/sheet/demo/pivot.tsx      |   7 +-
 .../sheet/demo/strategy-mini-chart.tsx        |  17 +-
 .../react-component/sheet/demo/strategy.tsx   |  17 +-
 .../react-component/sheet/demo/table.tsx      |  17 +-
 .../switcher/demo/pivot-header.tsx            |   6 +-
 .../switcher/demo/pivot-with-children.tsx     |   6 +-
 .../react-component/switcher/demo/pivot.tsx   |   5 +-
 .../switcher/demo/pure-switcher.tsx           |   7 +-
 .../react-component/switcher/demo/table.tsx   |   5 +-
 .../react-component/tooltip/demo/basic.tsx    |  19 +-
 .../demo/custom-click-show-tooltip.tsx        |  21 +-
 .../tooltip/demo/custom-content-react.tsx     |  19 +-
 .../tooltip/demo/custom-description.tsx       |  17 +-
 .../demo/custom-hover-show-tooltip.tsx        |  25 +-
 .../tooltip/demo/custom-operation.tsx         |  19 +-
 .../tooltip/demo/custom-show-tooltip.tsx      |   5 +-
 .../tooltip/demo/custom-tooltip.tsx           |  22 +-
 .../tooltip/demo/operation.tsx                |  19 +-
 .../custom/demo/custom-generate-palette.tsx   |   5 +-
 .../custom/demo/custom-manual-palette.tsx     |   3 +-
 s2-site/package.json                          |   9 +-
 57 files changed, 892 insertions(+), 635 deletions(-)

diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
index 38a44cd928..ccf926f4db 100644
--- a/packages/s2-core/src/cell/base-cell.ts
+++ b/packages/s2-core/src/cell/base-cell.ts
@@ -1,6 +1,7 @@
 import type {
   DisplayObject,
   Line,
+  Image,
   PointLike,
   Polygon,
   Rect,
@@ -90,7 +91,7 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
   protected theme: InternalFullyTheme;
 
   // background control shape
-  protected backgroundShape: Rect | Polygon;
+  protected backgroundShape: Rect | Polygon | Image;
 
   // text control shape
   protected textShape: CustomText;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a245064f3..44ab0abb58 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -446,6 +446,9 @@ importers:
       '@antv/dumi-theme-antv':
         specifier: ^0.4.5
         version: 0.4.5(@babel/core@7.23.2)(dumi@2.2.16)(react-dom@18.2.0)(react@18.2.0)
+      '@antv/g':
+        specifier: ^5.18.23
+        version: 5.18.23
       '@antv/g-canvas':
         specifier: ^1.11.25
         version: 1.11.25
@@ -465,8 +468,8 @@ importers:
         specifier: next
         version: link:../packages/s2-react
       antd:
-        specifier: ^5.12.5
-        version: 5.12.5(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.12.7
+        version: 5.12.7(react-dom@18.2.0)(react@18.2.0)
       copy-to-clipboard:
         specifier: ^3.3.3
         version: 3.3.3
@@ -668,6 +671,12 @@ packages:
     dependencies:
       '@ctrl/tinycolor': 3.6.1
 
+  /@ant-design/colors@7.0.2:
+    resolution: {integrity: sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==}
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+    dev: false
+
   /@ant-design/cssinjs@1.18.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-1JURAPrsjK1GwpqByTq3bJ7nF7lbMKDZpehqeR2n8/IR5O58/W1U4VcOeaw5ZyTHri3tEMcom7dyP2tvxpW54g==}
     peerDependencies:
@@ -683,6 +692,24 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       stylis: 4.1.3
+    dev: true
+
+  /@ant-design/cssinjs@1.18.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-514V9rjLaFYb3v4s55/8bg2E6fb81b99s3crDZf4nSwtiDLLXs8axnIph+q2TVkY2hbJPZOn/cVsVcnLkzFy7w==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@babel/runtime': 7.23.5
+      '@emotion/hash': 0.8.0
+      '@emotion/unitless': 0.7.5
+      classnames: 2.5.1
+      csstype: 3.1.3
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      stylis: 4.1.3
+    dev: false
 
   /@ant-design/icons-svg@4.3.1:
     resolution: {integrity: sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g==}
@@ -1514,6 +1541,13 @@ packages:
     dependencies:
       regenerator-runtime: 0.14.0
 
+  /@babel/runtime@7.23.7:
+    resolution: {integrity: sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: false
+
   /@babel/standalone@7.20.12:
     resolution: {integrity: sha512-hK/X+m1il3w1tYS4H8LDaGCEdiT47SVqEXY8RiEAgou26BystipSU8ZL6EvBR6t5l7lTv0ilBiChXWblKJ5iUA==}
     engines: {node: '>=6.9.0'}
@@ -3331,6 +3365,21 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@rc-component/color-picker@1.5.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-onyAFhWKXuG4P162xE+7IgaJkPkwM94XlOYnQuu69XdXWMfxpeFi6tpJBsieIMV7EnyLV5J3lDzdLiFeK0iEBA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@ctrl/tinycolor': 3.6.1
+      classnames: 2.5.1
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
 
   /@rc-component/context@1.4.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==}
@@ -6220,25 +6269,24 @@ packages:
       - moment
     dev: true
 
-  /antd@5.12.5(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-m9r9VhTmANS4kdBwHcxI4QWIGoZh3LspXNb2SxoezRSUZ9RUFpf+gO0AjPx8EPeO/nLKsHAoCSLza9r041bAgw==}
+  /antd@5.12.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-+SnWLO0kwXFnP15PAzvczZG3/yGu1PoYJa1mcYajqi248gaFA6HjY0s/kXVyXEIzY8dO3MT+RenYweU+s47Fwg==}
     peerDependencies:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@ant-design/colors': 7.0.0
-      '@ant-design/cssinjs': 1.18.1(react-dom@18.2.0)(react@18.2.0)
+      '@ant-design/colors': 7.0.2
+      '@ant-design/cssinjs': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/react-slick': 1.0.2(react@18.2.0)
-      '@babel/runtime': 7.23.5
       '@ctrl/tinycolor': 3.6.1
-      '@rc-component/color-picker': 1.4.1(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/color-picker': 1.5.1(react-dom@18.2.0)(react@18.2.0)
       '@rc-component/mutate-observer': 1.1.0(react-dom@18.2.0)(react@18.2.0)
       '@rc-component/tour': 1.11.1(react-dom@18.2.0)(react@18.2.0)
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
-      classnames: 2.3.2
+      classnames: 2.5.1
       copy-to-clipboard: 3.3.3
-      dayjs: 1.11.7
+      dayjs: 1.11.10
       qrcode.react: 3.1.0(react@18.2.0)
       rc-cascader: 3.20.0(react-dom@18.2.0)(react@18.2.0)
       rc-checkbox: 3.1.0(react-dom@18.2.0)(react@18.2.0)
@@ -6254,8 +6302,8 @@ packages:
       rc-menu: 9.12.4(react-dom@18.2.0)(react@18.2.0)
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-notification: 5.3.0(react-dom@18.2.0)(react@18.2.0)
-      rc-pagination: 4.0.3(react-dom@18.2.0)(react@18.2.0)
-      rc-picker: 3.14.6(dayjs@1.11.7)(react-dom@18.2.0)(react@18.2.0)
+      rc-pagination: 4.0.4(react-dom@18.2.0)(react@18.2.0)
+      rc-picker: 3.14.6(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
       rc-progress: 3.5.1(react-dom@18.2.0)(react@18.2.0)
       rc-rate: 2.12.0(react-dom@18.2.0)(react@18.2.0)
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
@@ -6270,7 +6318,7 @@ packages:
       rc-tooltip: 6.1.3(react-dom@18.2.0)(react@18.2.0)
       rc-tree: 5.8.2(react-dom@18.2.0)(react@18.2.0)
       rc-tree-select: 5.15.0(react-dom@18.2.0)(react@18.2.0)
-      rc-upload: 4.3.5(react-dom@18.2.0)(react@18.2.0)
+      rc-upload: 4.5.2(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -7520,6 +7568,10 @@ packages:
   /classnames@2.3.2:
     resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
 
+  /classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+    dev: false
+
   /clean-css@5.3.1:
     resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==}
     engines: {node: '>= 10.0'}
@@ -8445,6 +8497,7 @@ packages:
 
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: true
 
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
@@ -8608,6 +8661,10 @@ packages:
     resolution: {integrity: sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==}
     dev: true
 
+  /dayjs@1.11.10:
+    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
+    dev: false
+
   /dayjs@1.11.7:
     resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
 
@@ -18742,7 +18799,7 @@ packages:
       react-dom: '>=16.0.0'
     dependencies:
       '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -18901,6 +18958,20 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /rc-pagination@4.0.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-GGrLT4NgG6wgJpT/hHIpL9nELv27A1XbSZzECIuQBQTVSf4xGKxWr6I/jhpRPauYEWEbWVw22ObG6tJQqwJqWQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.5
+      classnames: 2.5.1
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
 
   /rc-picker@2.7.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-oZH6FZ3j4iuBxHB4NvQ6ABRsS2If/Kpty1YFFsji7/aej6ruGmfM7WnJWQ88AoPfpJ++ya5z+nVEA8yCRYGKyw==}
@@ -18921,6 +18992,35 @@ packages:
       shallowequal: 1.1.0
     dev: false
 
+  /rc-picker@3.14.6(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-AdKKW0AqMwZsKvIpwUWDUnpuGKZVrbxVTZTNjcO+pViGkjC1EBcjMgxVe8tomOEaIHJL5Gd13vS8Rr3zzxWmag==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      date-fns: '>= 2.x'
+      dayjs: '>= 1.x'
+      luxon: '>= 3.x'
+      moment: '>= 2.x'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      date-fns:
+        optional: true
+      dayjs:
+        optional: true
+      luxon:
+        optional: true
+      moment:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.5
+      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.3.2
+      dayjs: 1.11.10
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /rc-picker@3.14.6(dayjs@1.11.7)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-AdKKW0AqMwZsKvIpwUWDUnpuGKZVrbxVTZTNjcO+pViGkjC1EBcjMgxVe8tomOEaIHJL5Gd13vS8Rr3zzxWmag==}
     engines: {node: '>=8.x'}
@@ -18948,6 +19048,7 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
 
   /rc-progress@3.4.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-eAFDHXlk8aWpoXl0llrenPMt9qKHQXphxcVsnKs0FHC6eCSk1ebJtyaVjJUzKe0233ogiLDeEFK1Uihz3s67hw==}
@@ -19198,7 +19299,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.5
       '@rc-component/context': 1.4.0(react-dom@18.2.0)(react@18.2.0)
-      classnames: 2.3.2
+      classnames: 2.5.1
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       rc-virtual-list: 3.11.3(react-dom@18.2.0)(react@18.2.0)
@@ -19304,7 +19405,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.5
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
-      classnames: 2.3.2
+      classnames: 2.5.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -19397,6 +19498,19 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  /rc-upload@4.5.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-QO3ne77DwnAPKFn0bA5qJM81QBjQi0e0NHdkvpFyY73Bea2NfITiotqJqVjHgeYPOJu5lLVR32TNGP084aSoXA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.5
+      classnames: 2.5.1
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /rc-util@5.38.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-e4ZMs7q9XqwTuhIK7zBIVFltUtMSjphuPPQXHoHlzRzNdOwUxDejo0Zls5HYaJfRKNURcsS/ceKVULlhjBrxng==}
     peerDependencies:
diff --git a/s2-site/.dumi/global.ts b/s2-site/.dumi/global.ts
index cbcd11b27d..7f64dd9562 100644
--- a/s2-site/.dumi/global.ts
+++ b/s2-site/.dumi/global.ts
@@ -2,7 +2,7 @@ if (window) {
   (window as any).react = require('react');
   // 如果写成 reactDOM 会导致在 playground 运行时找不到,
   (window as any).reactDom = require('react-dom');
-  (window as any).reactDomClient = require('react-dom/client');
+  (window as any).reactDOMClient = require('react-dom/client');
   (window as any).lodash = require('lodash');
   (window as any).reactColor = require('react-color');
   (window as any).copyToClipboard = require('copy-to-clipboard');
@@ -11,6 +11,7 @@ if (window) {
   (window as any).antdIcons = require('@ant-design/icons');
 
   (window as any).gCanvas = require('@antv/g-canvas');
+  (window as any).g = require('@antv/g');
   (window as any).gPluginA11y = require('@antv/g-plugin-a11y');
   (
     window as any
diff --git a/s2-site/examples/analysis/sort/demo/advanced.tsx b/s2-site/examples/analysis/sort/demo/advanced.tsx
index 8921846c68..a69075f0f3 100644
--- a/s2-site/examples/analysis/sort/demo/advanced.tsx
+++ b/s2-site/examples/analysis/sort/demo/advanced.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent } from '@antv/s2-react';
 import insertCSS from 'insert-css';
-import 'antd/es/cascader/style/index.css';
+
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -79,9 +78,9 @@ fetch(
       );
     };
 
-    createRoot(document.getElementById('container')).render(
-      <AdvancedSortDemo />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<AdvancedSortDemo />);
   });
 
 insertCSS(`
diff --git a/s2-site/examples/analysis/sort/demo/group-sort.tsx b/s2-site/examples/analysis/sort/demo/group-sort.tsx
index 9d9add745e..cc2898abc4 100644
--- a/s2-site/examples/analysis/sort/demo/group-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/group-sort.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
+
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -42,12 +42,14 @@ fetch(
       showDefaultHeaderActionIcon: true,
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={s2DataConfig}
-        options={s2Options}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={s2DataConfig}
+          options={s2Options}
+        />,
+      );
   });
diff --git a/s2-site/examples/analysis/sort/demo/table-sort.tsx b/s2-site/examples/analysis/sort/demo/table-sort.tsx
index 6d02b0a49e..43590ccc97 100644
--- a/s2-site/examples/analysis/sort/demo/table-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/table-sort.tsx
@@ -5,7 +5,6 @@ import { Button } from 'antd';
 import insertCSS from 'insert-css';
 import { orderBy } from 'lodash';
 import React from 'react';
-import { createRoot } from 'react-dom';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
@@ -131,7 +130,9 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       );
     };
 
-    createRoot(document.getElementById('container')).render(<App />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<App />);
   });
 
 // 我们用 insert-css 演示引入自定义样式
diff --git a/s2-site/examples/case/art/demo/mosaic.tsx b/s2-site/examples/case/art/demo/mosaic.tsx
index ab10606713..f67ca70178 100644
--- a/s2-site/examples/case/art/demo/mosaic.tsx
+++ b/s2-site/examples/case/art/demo/mosaic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
+
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { ThemeCfg } from '@antv/s2';
@@ -72,11 +72,13 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        dataCfg={dataCfg}
-        options={s2Options}
-        themeCfg={{ theme: customTheme }}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          dataCfg={dataCfg}
+          options={s2Options}
+          themeCfg={{ theme: customTheme }}
+        />,
+      );
   });
diff --git a/s2-site/examples/case/art/demo/time-spend-abstract.tsx b/s2-site/examples/case/art/demo/time-spend-abstract.tsx
index 7608522b86..e6cd4d65b8 100644
--- a/s2-site/examples/case/art/demo/time-spend-abstract.tsx
+++ b/s2-site/examples/case/art/demo/time-spend-abstract.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
+
 import insertCSS from 'insert-css';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { Image as GImage } from '@antv/g';
@@ -58,15 +58,17 @@ class CustomDataCell extends DataCell {
     const { x, y, width, height } = this.meta;
 
     img.onload = () => {
-      this.textShape = new GImage({
-        style: {
-          x: x + (width - img?.width) / 2,
-          y: y + (height - img?.height) / 2,
-          width: img?.width ?? width,
-          height: img?.height ?? height,
-          img: url,
-        },
-      });
+      this.textShape = this.appendChild(
+        new GImage({
+          style: {
+            x: x + (width - img?.width) / 2,
+            y: y + (height - img?.height) / 2,
+            width: img?.width ?? width,
+            height: img?.height ?? height,
+            img: url,
+          },
+        }),
+      );
     };
   }
 }
@@ -184,7 +186,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       </div>
     );
 
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <div className="sheet-wrapper">
         <PaletteLegend />
         <SheetComponent
diff --git a/s2-site/examples/case/comparison/demo/measure-comparison.tsx b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
index b7d0f5a8d3..fa3cb8200e 100644
--- a/s2-site/examples/case/comparison/demo/measure-comparison.tsx
+++ b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable max-classes-per-file */
-import React from 'react';
-import { createRoot } from 'react-dom';
+import { Line, Rect } from '@antv/g';
 import {
   ColCell,
-  DataCell,
   CornerCell,
+  DataCell,
   Frame,
   NODE_ID_SEPARATOR,
   ROOT_NODE_ID,
@@ -12,13 +11,14 @@ import {
 } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import React from 'react';
 
 // 上涨颜色
 const UP_COLOR = '#F46649';
 // 下降颜色
 const DOWN_COLOR = '#2AA491';
 // 指标宽度
-const TAG_WIDTH = 80;
+const TAG_WIDTH = 100;
 // 指标高度
 const TAG_HEIGHT = 20;
 
@@ -40,7 +40,7 @@ class CustomColCell extends ColCell {
     this.lineConfigStyle = lineConfigStyle || {};
   }
 
-  getCellArea() {
+  getBBoxByType() {
     const { x, y, height, width, parent } = this.meta;
 
     if (parent?.id === 'root') {
@@ -60,12 +60,14 @@ class CustomColCell extends ColCell {
     const { parent } = this.meta;
 
     if (isRoot(parent?.id) && this.lineConfigStyle.stroke) {
-      this.backgroundShape = this.addShape('rect', {
-        attrs: {
-          ...this.getCellArea(),
-          fill: this.lineConfigStyle.stroke,
-        },
-      });
+      this.backgroundShape = this.appendChild(
+        new Rect({
+          style: {
+            ...this.getBBoxByType(),
+            fill: this.lineConfigStyle.stroke,
+          },
+        }),
+      );
     } else {
       super.drawBackgroundShape();
     }
@@ -90,15 +92,14 @@ class CustomColCell extends ColCell {
       const position = this.getTextPosition();
       const textStyle = this.getTextStyle();
 
-      this.textShape = this.addShape('text', {
-        attrs: {
-          x: position.x,
-          y: position.y,
-          text: value,
-          fill: this.lineConfigStyle.stroke ? '#FFF' : textStyle.fill,
-          textAlign: 'center',
-          textBaseline: 'middle',
-        },
+      this.renderTextShape({
+        x: position.x,
+        y: position.y,
+        text: value,
+        fill: this.lineConfigStyle.stroke ? '#FFF' : textStyle.fill,
+        textAlign: 'center',
+        textBaseline: 'middle',
+        fontSize: 12,
       });
     } else {
       super.drawTextShape();
@@ -116,29 +117,33 @@ class CustomColCell extends ColCell {
     } = this.getStyle().cell;
 
     if (isRoot(parent?.id)) {
-      this.addShape('line', {
-        attrs: {
-          x1: x,
-          y1: y + height - TAG_HEIGHT,
-          x2: x,
-          y2: y + height,
-          stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
-          lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
-        },
-      });
+      this.appendChild(
+        new Line({
+          style: {
+            x1: x,
+            y1: y + height - TAG_HEIGHT,
+            x2: x,
+            y2: y + height,
+            stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
+            lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
+          },
+        }),
+      );
       groupCache[children?.[0]?.value] = 1;
       this?.spreadsheet?.store?.set('groupCache', groupCache);
     } else if (groupCache[value]) {
-      this.addShape('line', {
-        attrs: {
-          x1: x,
-          y1: y,
-          x2: x,
-          y2: y + height,
-          stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
-          lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
-        },
-      });
+      this.appendChild(
+        new Line({
+          style: {
+            x1: x,
+            y1: y,
+            x2: x,
+            y2: y + height,
+            stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
+            lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
+          },
+        }),
+      );
     }
 
     if (isRoot(parent?.parent?.id)) {
@@ -148,17 +153,21 @@ class CustomColCell extends ColCell {
       }
 
       if (indexCache[colIndex]) {
-        this.addShape('line', {
-          attrs: {
-            x1: x,
-            y1: y,
-            x2: x,
-            y2: y + height,
-            stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
-            lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
-            opacity: this.lineConfigStyle.opacity || verticalBorderColorOpacity,
-          },
-        });
+        this.appendChild(
+          new Line({
+            style: {
+              x1: x,
+              y1: y,
+              x2: x,
+              y2: y + height,
+              stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
+              lineWidth:
+                this.lineConfigStyle.lineWidth || horizontalBorderWidth,
+              opacity:
+                this.lineConfigStyle.opacity || verticalBorderColorOpacity,
+            },
+          }),
+        );
       }
     }
   }
@@ -251,30 +260,34 @@ class CustomDataCell extends DataCell {
     } = this.getStyle().cell;
 
     if (colIndex % valueLength === 0) {
-      this.addShape('line', {
-        attrs: {
-          x1: x,
-          y1: y,
-          x2: x,
-          y2: y + height,
-          stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
-          lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
-        },
-      });
+      this.appendChild(
+        new Line({
+          style: {
+            x1: x,
+            y1: y,
+            x2: x,
+            y2: y + height,
+            stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
+            lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
+          },
+        }),
+      );
     }
 
     if (indexCache[colIndex]) {
-      this.addShape('line', {
-        attrs: {
-          x1: x,
-          y1: y,
-          x2: x,
-          y2: y + height,
-          stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
-          lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
-          opacity: this.lineConfigStyle.opacity || verticalBorderColorOpacity,
-        },
-      });
+      this.appendChild(
+        new Line({
+          style: {
+            x1: x,
+            y1: y,
+            x2: x,
+            y2: y + height,
+            stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
+            lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
+            opacity: this.lineConfigStyle.opacity || verticalBorderColorOpacity,
+          },
+        }),
+      );
     }
 
     if (currentConfig) {
@@ -295,17 +308,19 @@ class CustomDataCell extends DataCell {
     } = this.getStyle().cell;
 
     if (currentConfig) {
-      this.addShape('line', {
-        attrs: {
-          x1: x + width,
-          y1: y,
-          x2: x + width,
-          y2: y + height,
-          stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
-          lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
-          opacity: this.lineConfigStyle.opacity || verticalBorderColorOpacity,
-        },
-      });
+      this.appendChild(
+        new Line({
+          style: {
+            x1: x + width,
+            y1: y,
+            x2: x + width,
+            y2: y + height,
+            stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
+            lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
+            opacity: this.lineConfigStyle.opacity || verticalBorderColorOpacity,
+          },
+        }),
+      );
     }
 
     const tagLength = [...(spreadsheet.dataSet.colPivotMeta || [])].length;
@@ -314,16 +329,18 @@ class CustomDataCell extends DataCell {
       colIndex + 1 !== tagLength * valueLength; // 除了表格最后一列,每个 tag 最后一个子列加 right line
 
     if (shouldAddRightLine) {
-      this.addShape('line', {
-        attrs: {
-          x1: x + width,
-          y1: y,
-          x2: x + width,
-          y2: y + height,
-          stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
-          lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
-        },
-      });
+      this.appendChild(
+        new Line({
+          style: {
+            x1: x + width,
+            y1: y,
+            x2: x + width,
+            y2: y + height,
+            stroke: this.lineConfigStyle.stroke || horizontalBorderColor,
+            lineWidth: this.lineConfigStyle.lineWidth || horizontalBorderWidth,
+          },
+        }),
+      );
     }
   }
 }
@@ -337,8 +354,8 @@ class CustomFrame extends Frame {
 
   addCornerRightBorder() {
     const {
-      width,
-      height,
+      cornerWidth,
+      cornerHeight,
       viewportHeight,
       position,
       spreadsheet,
@@ -349,52 +366,55 @@ class CustomFrame extends Frame {
       verticalBorderWidth,
       verticalBorderColorOpacity,
     } = spreadsheet.theme?.splitLine || {};
-    const x = position.x + width;
+    const x = position.x + cornerWidth;
     const y1 = position.y;
-    const y2 = position.y + height + viewportHeight;
+    const y2 = position.y + cornerHeight + viewportHeight;
     const { scrollX } = spreadsheet.facet.getScrollOffset();
 
     if (scrollX > 0) {
+      this.appendChild(
+        new Line({
+          style: {
+            x1: x,
+            y1: y1 + cornerHeight / 2 - TAG_HEIGHT,
+            x2: x,
+            y2,
+            stroke: verticalBorderColor,
+            lineWidth: verticalBorderWidth,
+            opacity: verticalBorderColorOpacity,
+          },
+        }),
+      );
       // 滚动时使用默认的颜色
-      this.addShape('line', {
-        attrs: {
-          x1: x,
-          y1: y1 + height / 2 - TAG_HEIGHT,
-          x2: x,
-          y2,
-          stroke: verticalBorderColor,
-          lineWidth: verticalBorderWidth,
-          opacity: verticalBorderColorOpacity,
-        },
-      });
     } else {
-      this.addShape('line', {
-        attrs: {
-          x1: x,
-          y1: y1 + height / 2 - TAG_HEIGHT,
-          x2: x,
-          y2,
-          stroke: lineConfigStyle?.stroke || verticalBorderColor,
-          lineWidth: lineConfigStyle?.lineWidth || verticalBorderWidth,
-        },
-      });
+      this.appendChild(
+        new Line({
+          style: {
+            x1: x,
+            y1: y1 + cornerHeight / 2 - TAG_HEIGHT,
+            x2: x,
+            y2,
+            stroke: lineConfigStyle?.stroke || verticalBorderColor,
+            lineWidth: lineConfigStyle?.lineWidth || verticalBorderWidth,
+          },
+        }),
+      );
     }
   }
 
   addSplitLineRightShadow() {
     const {
-      width,
-      height,
+      cornerWidth,
+      cornerHeight,
       viewportHeight,
       position,
-      isPivotMode,
       spreadsheet,
       showViewPortRightShadow,
     } = this.cfg;
 
     const { scrollX } = spreadsheet.facet.getScrollOffset();
 
-    if (!isPivotMode || scrollX === 0) {
+    if (!spreadsheet.isPivotMode() || scrollX === 0) {
       return;
     }
 
@@ -407,18 +427,20 @@ class CustomFrame extends Frame {
       showViewPortRightShadow &&
       spreadsheet.isFrozenRowHeader()
     ) {
-      const x = position.x + width;
+      const x = position.x + cornerWidth;
       const y = position.y;
 
-      this.addShape('rect', {
-        attrs: {
-          x,
-          y: y + height / 2,
-          width: shadowWidth,
-          height: viewportHeight + height - height / 2,
-          fill: `l (0) 0:${shadowColors?.left} 1:${shadowColors?.right}`,
-        },
-      });
+      this.appendChild(
+        new Rect({
+          style: {
+            x,
+            y: y + cornerHeight / 2,
+            width: shadowWidth,
+            height: viewportHeight + cornerHeight - cornerHeight / 2,
+            fill: `l (0) 0:${shadowColors?.left} 1:${shadowColors?.right}`,
+          },
+        }),
+      );
     }
   }
 }
@@ -434,18 +456,19 @@ class CustomCornelCell extends CornerCell {
 
   drawBackgroundShape() {
     const { backgroundColorOpacity, backgroundColor } = this.getStyle().cell;
-    const attrs = {
-      ...this.getCellArea(),
-      fill: this.meta.cornerType === 'col' ? '#FFF' : backgroundColor,
-      opacity: backgroundColorOpacity,
-    };
 
-    this.backgroundShape = this.addShape('rect', {
-      attrs,
-    });
+    this.backgroundShape = this.appendChild(
+      new Rect({
+        style: {
+          ...this.getBBoxByType(),
+          fill: this.meta.cornerType === 'col' ? '#FFF' : backgroundColor,
+          opacity: backgroundColorOpacity,
+        },
+      }),
+    );
   }
 
-  drawBorderShape() {}
+  drawBorders() {}
 }
 
 fetch('https://assets.antv.antgroup.com/s2/index-comparison.json')
@@ -548,6 +571,9 @@ fetch('https://assets.antv.antgroup.com/s2/index-comparison.json')
       tooltip: {
         enable: false,
       },
+      frozen: {
+        rowHeader: false,
+      },
       colCell: (node, spreadsheet, ...restOptions) => {
         return new CustomColCell(
           node,
@@ -593,11 +619,13 @@ fetch('https://assets.antv.antgroup.com/s2/index-comparison.json')
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        dataCfg={s2DataConfig}
-        options={s2Options}
-        sheetType="pivot"
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          dataCfg={s2DataConfig}
+          options={s2Options}
+          sheetType="pivot"
+        />,
+      );
   });
diff --git a/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx b/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
index 680c276036..ba0d80482b 100644
--- a/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
+++ b/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
+import { Line, Rect } from '@antv/g';
+
 import insertCSS from 'insert-css';
 import { ColCell, S2DataConfig, S2Theme } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
@@ -90,25 +91,27 @@ class CustomColCell extends ColCell {
   }
 
   renderGroupSeparator() {
-    const { label, isLeaf } = this.meta;
+    const { value, isLeaf } = this.meta;
 
     // 只需要为 A B 群组绘制标识
-    if (!isLeaf || label === 'people-group-delta') {
+    if (!isLeaf || value === 'people-group-delta') {
       return;
     }
 
-    const fill = GROUP_COLOR[label];
+    const fill = GROUP_COLOR[value] || '#000';
     const { x, y, height } = this.textShape.getBBox();
 
-    this.addShape('rect', {
-      attrs: {
-        x: x - GROUP_SEPARATOR_WIDTH * 1.5,
-        y,
-        height,
-        width: GROUP_SEPARATOR_WIDTH,
-        fill,
-      },
-    });
+    this.appendChild(
+      new Rect({
+        style: {
+          x: x - GROUP_SEPARATOR_WIDTH * 1.5,
+          y,
+          height,
+          width: GROUP_SEPARATOR_WIDTH,
+          fill,
+        },
+      }),
+    );
   }
 }
 
@@ -236,7 +239,7 @@ fetch('https://assets.antv.antgroup.com/s2/multiple-people-comparison.json')
       },
     };
 
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
@@ -251,7 +254,6 @@ fetch('https://assets.antv.antgroup.com/s2/multiple-people-comparison.json')
   });
 
 insertCSS(`
-
   .ant-page-header {
     margin: 0 !important;
     padding: 0 !important;
diff --git a/s2-site/examples/case/comparison/demo/philosophers.tsx b/s2-site/examples/case/comparison/demo/philosophers.tsx
index 2ff188d35f..7cf48af1e9 100644
--- a/s2-site/examples/case/comparison/demo/philosophers.tsx
+++ b/s2-site/examples/case/comparison/demo/philosophers.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
+
 import { max, min, replace } from 'lodash';
 import insertCSS from 'insert-css';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
@@ -195,7 +195,7 @@ fetch(
       });
     };
 
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/case/comparison/demo/time-spend.tsx b/s2-site/examples/case/comparison/demo/time-spend.tsx
index 89ad3027d7..bed64f77f4 100644
--- a/s2-site/examples/case/comparison/demo/time-spend.tsx
+++ b/s2-site/examples/case/comparison/demo/time-spend.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable max-classes-per-file */
-import { DataCell, Frame, ThemeCfg } from '@antv/s2';
+import { Circle, Line } from '@antv/g';
+import { DataCell, Frame, ResizeType, ThemeCfg } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
 import React from 'react';
-import { createRoot } from 'react-dom';
 
 const paletteLegendMap = [
   {
@@ -15,7 +15,6 @@ const paletteLegendMap = [
     text: '工作',
     color: '#18E7CF',
   },
-
   {
     text: '上学',
     color: '#89E48A',
@@ -47,7 +46,8 @@ class CustomDataCell extends DataCell {
   initCell() {
     this.drawInteractiveBgShape();
     this.drawCircle();
-    this.drawBorderShape();
+    this.drawBorders();
+
     if (JSON.stringify(this.meta.colQuery).includes('合计')) {
       this.drawTextShape();
     }
@@ -64,7 +64,7 @@ class CustomDataCell extends DataCell {
     let fill;
     let opacity = 1;
 
-    if (!Number.isNaN(fieldValue as number)) {
+    if (!Number.isNaN(fieldValue)) {
       fill =
         paletteLegendMap.find((v) => v.text === colQuery?.['时刻'])?.color ??
         '#FAD5BB';
@@ -74,17 +74,17 @@ class CustomDataCell extends DataCell {
         paletteLegendMap.find((v) => v.text === fieldValue)?.color ?? '#FAD5BB';
     }
 
-    this.backgroundShape = this.addShape('circle', {
-      attrs: {
-        x: positionX,
-        y: positionY,
-        width,
-        height,
-        fill,
-        opacity,
-        r: radius,
-      },
-    });
+    this.appendChild(
+      new Circle({
+        style: {
+          cx: positionX,
+          cy: positionY,
+          fill,
+          fillOpacity: opacity,
+          r: radius,
+        },
+      }),
+    );
   }
 }
 
@@ -101,8 +101,8 @@ class CustomFrame extends Frame {
   addHorizontalSplitLine() {
     const cfg = this.cfg;
     const {
-      width,
-      height,
+      cornerWidth,
+      cornerHeight,
       viewportWidth,
       position,
       scrollX = 0,
@@ -119,11 +119,14 @@ class CustomFrame extends Frame {
         const lastChild = children[children.length - 1];
         const x1 = position.x;
         const x2 =
-          x1 + width + viewportWidth + (scrollContainsRowHeader ? scrollX : 0);
-        const y = position.y + height + lastChild.y + lastChild.height;
+          x1 +
+          cornerWidth +
+          viewportWidth +
+          (scrollContainsRowHeader ? scrollX : 0);
+        const y = position.y + cornerHeight + lastChild.y + lastChild.height;
 
-        this.addShape('line', {
-          attrs: {
+        const line = new Line({
+          style: {
             x1,
             y1: y,
             x2,
@@ -133,13 +136,16 @@ class CustomFrame extends Frame {
             opacity: splitLine?.verticalBorderColorOpacity,
           },
         });
+
+        this.appendChild(line);
       }
     });
   }
 
   addVerticalSplitLine() {
     const cfg = this.cfg;
-    const { height, viewportHeight, position, width, spreadsheet } = cfg;
+    const { cornerWidth, viewportHeight, position, cornerHeight, spreadsheet } =
+      cfg;
     const splitLine = spreadsheet.theme?.splitLine;
     const { colsHierarchy } = spreadsheet.facet.getLayoutResult();
     const rootNodes = colsHierarchy.getNodesLessThanLevel(0);
@@ -148,12 +154,12 @@ class CustomFrame extends Frame {
       if (key < rootNodes.length - 1) {
         const { children } = node;
         const lastChild = children[children.length - 1];
-        const x = lastChild.x + lastChild.width + width;
+        const x = lastChild.x + lastChild.width + cornerWidth;
         const y1 = position.y;
-        const y2 = position.y + height + viewportHeight;
+        const y2 = position.y + cornerHeight + viewportHeight;
 
-        this.addShape('line', {
-          attrs: {
+        const line = new Line({
+          style: {
             x1: x,
             y1,
             x2: x,
@@ -163,6 +169,8 @@ class CustomFrame extends Frame {
             opacity: splitLine?.verticalBorderColorOpacity,
           },
         });
+
+        this.appendChild(line);
       }
     });
   }
@@ -239,7 +247,6 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       splitLine: {
         horizontalBorderColorOpacity: 0.3,
         horizontalBorderWidth: 2,
-
         shadowColors: {
           left: 'rgba(255,255,255, 0.3)',
           right: 'rgba(255,255,255, 0.01)',
@@ -257,6 +264,12 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       frame: (cfg) => {
         return new CustomFrame(cfg);
       },
+      interaction: {
+        resize: {
+          colResizeType: ResizeType.ALL,
+          rowResizeType: ResizeType.ALL,
+        },
+      },
       style: {
         layoutWidthType: 'compact',
         colCell: {
@@ -283,7 +296,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       </div>
     );
 
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <div className="sheet-wrapper">
         <PaletteLegend />
         <SheetComponent
diff --git a/s2-site/examples/case/data-preview/demo/excel.tsx b/s2-site/examples/case/data-preview/demo/excel.tsx
index a2c035a0e1..1ae0a52ecd 100644
--- a/s2-site/examples/case/data-preview/demo/excel.tsx
+++ b/s2-site/examples/case/data-preview/demo/excel.tsx
@@ -1,9 +1,7 @@
 import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
-import 'antd/es/checkbox/style/index.css';
 import React, { useRef, useState } from 'react';
-import { createRoot } from 'react-dom';
+import '@antv/s2-react/dist/style.min.css';
 
 // 初始化配置
 const s2Options: SheetComponentOptions = {
@@ -42,5 +40,7 @@ const App = ({ data }) => {
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
   .then((res) => {
-    createRoot(document.getElementById('container')).render(<App data={res} />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<App data={res} />);
   });
diff --git a/s2-site/examples/case/data-preview/demo/house.tsx b/s2-site/examples/case/data-preview/demo/house.tsx
index 70fafab9de..49c591097f 100644
--- a/s2-site/examples/case/data-preview/demo/house.tsx
+++ b/s2-site/examples/case/data-preview/demo/house.tsx
@@ -4,7 +4,6 @@ import { InputNumber, Select, Space } from 'antd';
 import insertCSS from 'insert-css';
 import { every, filter, isNil, last, map, omit } from 'lodash';
 import React, { useState } from 'react';
-import { createRoot } from 'react-dom';
 
 const defaultHouseInfo = {
   name: ['15#', '16#', '21#', '22#'],
@@ -274,9 +273,9 @@ fetch(
 )
   .then((res) => res.json())
   .then((data) => {
-    createRoot(document.getElementById('container')).render(
-      <Sheet data={data} />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<Sheet data={data} />);
   });
 
 // We use 'insert-css' to insert custom styles
diff --git a/s2-site/examples/case/data-preview/demo/index.tsx b/s2-site/examples/case/data-preview/demo/index.tsx
index 937337c38d..eacfd0eb28 100644
--- a/s2-site/examples/case/data-preview/demo/index.tsx
+++ b/s2-site/examples/case/data-preview/demo/index.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable max-classes-per-file */
 import React, { useState, useEffect, useRef } from 'react';
-import { createRoot } from 'react-dom';
+
 import insertCSS from 'insert-css';
+import { Polygon } from '@antv/g';
 import {
   TableColCell,
   GuiIcon,
@@ -29,6 +30,23 @@ import '@antv/s2-react/dist/style.min.css';
 
 const { Search } = Input;
 
+const initColumns = ['province', 'city', 'type', 'price'];
+
+const iconMap = {
+  none: 'Filter',
+  asc: 'SortUp',
+  desc: 'SortDown',
+};
+
+const filterIcon =
+  '<svg t="1633848048963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="85936" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M0 0h1024L724.676923 488.369231V1024l-425.353846-141.784615v-393.846154L0 0z m196.923077 102.4l204.8 354.461538v362.338462l228.430769 63.015385V456.861538l212.676923-354.461538H196.923077z" opacity=".4" p-id="85937"></path></svg>';
+
+const sortUp =
+  '<svg t="1634734477742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2208" width="200" height="200"><path d="M569.508769 653.352619l151.594419 0 0 108.819221-151.594419 0L569.508769 653.352619zM569.508769 65.693452l385.479045 0 0 108.828814L569.508569 174.522266 569.508769 65.693452 569.508769 65.693452zM569.508769 261.583239l307.513506 0 0 108.819021L569.508769 370.402259 569.508769 261.583239 569.508769 261.583239zM569.508769 457.463032l229.552363 0 0 108.821019-229.552363 0C569.508769 566.284051 569.508769 457.463032 569.508769 457.463032zM569.508769 849.232612l73.62868 0 0 108.826815-73.62868 0L569.508769 849.232612zM354.693414 427.846912l0 530.212516L203.94622 958.059428 203.94622 427.846912 62.754748 427.846912 279.308125 65.187795 495.87849 427.846912 354.693414 427.846912z" p-id="2209"></path></svg>';
+
+const sortDown =
+  '<svg t="1634734501800" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2875" width="200" height="200"><path d="M279.15323 958.059228l217.110799-363.160177-141.539436 0L354.724593 63.957829l-151.123938 0 0 530.943021L62.057421 594.900849 279.15323 958.059228 279.15323 958.059228zM570.078783 64.464885l386.443791 0 0 108.976114L570.078583 173.440999 570.078783 64.464885 570.078783 64.464885zM570.078783 369.594007 878.364965 369.594007l0-108.974515L570.078783 260.619492 570.078783 369.594007zM570.078783 565.747016l230.128573 0 0-108.976114L570.078783 456.770901 570.078783 565.747016 570.078783 565.747016zM570.078783 761.904621l151.972163 0L722.050945 652.930305l-151.972163 0L570.078783 761.904621zM570.078783 958.059228l73.813355 0 0-108.974315-73.813355 0L570.078783 958.059228z" p-id="2876"></path></svg>';
+
 const ShowList = ({ columns, setColumns, allChecked }) => {
   return (
     <Popover
@@ -76,23 +94,25 @@ class CustomCornerCell extends TableCornerCell {
   }
 
   drawTextShape() {
-    const { x, y, width: cellWidth, height: cellHeight, key } = this.meta;
+    const { x, y, width: cellWidth, height: cellHeight } = this.meta;
     const padding = 4;
 
-    this.textShape = this.addShape('polygon', {
-      zIndex: 4,
-      attrs: {
-        fill: 'rgba(0,0,0,0.1)',
-        points: [
-          [x + cellWidth - padding + 2, y + padding],
-          [x + cellWidth - padding + 2, y + cellHeight - padding],
-          [
-            x + cellWidth - padding - cellHeight + padding * 2,
-            y + cellHeight - padding,
+    this.appendChild(
+      new Polygon({
+        zIndex: 4,
+        style: {
+          fill: 'rgba(0,0,0,0.1)',
+          points: [
+            [x + cellWidth - padding + 2, y + padding],
+            [x + cellWidth - padding + 2, y + cellHeight - padding],
+            [
+              x + cellWidth - padding - cellHeight + padding * 2,
+              y + cellHeight - padding,
+            ],
           ],
-        ],
-      },
-    });
+        },
+      }),
+    );
   }
 }
 
@@ -128,10 +148,10 @@ class CustomTableColCell extends TableColCell {
       this.meta.value,
       this.spreadsheet.dataCfg.sortParams,
     );
+
     /**
      * 有值说明有加filter
      */
-
     const isFiltered = !!getCurrentFilterParams(
       this.meta.value,
       this.spreadsheet.dataCfg.filterParams,
@@ -147,9 +167,10 @@ class CustomTableColCell extends TableColCell {
       fill: isFiltered ? '#873bf4' : 'rgb(67, 72, 91)',
     });
 
-    this.add(icon);
+    this.appendChild(icon);
+    // this.add(icon);
 
-    icon.on('click', () => {
+    icon.addEventListener('click', () => {
       this.onIconClick?.({
         meta: this.meta,
       });
@@ -157,19 +178,6 @@ class CustomTableColCell extends TableColCell {
   }
 }
 
-const iconMap = {
-  none: 'Filter',
-  asc: 'SortUp',
-  desc: 'SortDown',
-};
-
-export const filterIcon =
-  '<svg t="1633848048963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="85936" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M0 0h1024L724.676923 488.369231V1024l-425.353846-141.784615v-393.846154L0 0z m196.923077 102.4l204.8 354.461538v362.338462l228.430769 63.015385V456.861538l212.676923-354.461538H196.923077z" opacity=".4" p-id="85937"></path></svg>';
-export const sortUp =
-  '<svg t="1634734477742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2208" width="200" height="200"><path d="M569.508769 653.352619l151.594419 0 0 108.819221-151.594419 0L569.508769 653.352619zM569.508769 65.693452l385.479045 0 0 108.828814L569.508569 174.522266 569.508769 65.693452 569.508769 65.693452zM569.508769 261.583239l307.513506 0 0 108.819021L569.508769 370.402259 569.508769 261.583239 569.508769 261.583239zM569.508769 457.463032l229.552363 0 0 108.821019-229.552363 0C569.508769 566.284051 569.508769 457.463032 569.508769 457.463032zM569.508769 849.232612l73.62868 0 0 108.826815-73.62868 0L569.508769 849.232612zM354.693414 427.846912l0 530.212516L203.94622 958.059428 203.94622 427.846912 62.754748 427.846912 279.308125 65.187795 495.87849 427.846912 354.693414 427.846912z" p-id="2209"></path></svg>';
-export const sortDown =
-  '<svg t="1634734501800" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2875" width="200" height="200"><path d="M279.15323 958.059228l217.110799-363.160177-141.539436 0L354.724593 63.957829l-151.123938 0 0 530.943021L62.057421 594.900849 279.15323 958.059228 279.15323 958.059228zM570.078783 64.464885l386.443791 0 0 108.976114L570.078583 173.440999 570.078783 64.464885 570.078783 64.464885zM570.078783 369.594007 878.364965 369.594007l0-108.974515L570.078783 260.619492 570.078783 369.594007zM570.078783 565.747016l230.128573 0 0-108.976114L570.078783 456.770901 570.078783 565.747016 570.078783 565.747016zM570.078783 761.904621l151.972163 0L722.050945 652.930305l-151.972163 0L570.078783 761.904621zM570.078783 958.059228l73.813355 0 0-108.974315-73.813355 0L570.078783 958.059228z" p-id="2876"></path></svg>';
-
 const getSearchResult = (searchKey, data, columns) => {
   if (!searchKey) {
     return [];
@@ -193,8 +201,6 @@ const getSearchResult = (searchKey, data, columns) => {
   return results;
 };
 
-const initColumns = ['province', 'city', 'type', 'price'];
-
 const scrollToCell = (rowIndex, colIndex, options, facet, interaction) => {
   const { rowCount: frozenRowCount } = options.frozen;
   const colsNodes = facet.getColLeafNodes();
@@ -235,16 +241,21 @@ const scrollToCell = (rowIndex, colIndex, options, facet, interaction) => {
 };
 
 const App = ({ data }) => {
-  const onIconClick = ({ meta }) => {
-    setInteractedCol(meta.value);
-    setColModalVisible(!colModalVisible);
-  };
   const s2Ref = useRef(null);
   const [columns, setColumns] = React.useState(initColumns);
-
+  const [searchKey, setSearchKey] = useState('');
+  const [searchResult, setSearchResult] = useState([]);
+  const [colModalVisible, setColModalVisible] = useState(false);
+  const [searchResultActiveIndex, setSearchResultActiveIndex] = useState(-1);
+  const [form] = Form.useForm();
   const [interactedCol, setInteractedCol] = useState('');
   const modalCallbackRef = useRef((e) => {});
 
+  const onIconClick = ({ meta }) => {
+    setInteractedCol(meta.value);
+    setColModalVisible(!colModalVisible);
+  };
+
   const options: SheetComponentOptions = {
     width: 600,
     height: 400,
@@ -302,14 +313,9 @@ const App = ({ data }) => {
       ...cfg,
       fields: { columns },
     }));
-    s2Ref.current.render(true);
-  }, [columns.length]);
 
-  const [searchKey, setSearchKey] = useState('');
-  const [searchResult, setSearchResult] = useState([]);
-  const [colModalVisible, setColModalVisible] = useState(false);
-  const [searchResultActiveIndex, setSearchResultActiveIndex] = useState(-1);
-  const [form] = Form.useForm();
+    s2Ref.current?.render();
+  }, [columns.length]);
 
   const allChecked = columns.length === initColumns.length;
 
@@ -324,6 +330,10 @@ const App = ({ data }) => {
     setSearchResultActiveIndex(nextIndex);
     const current = results[nextIndex];
 
+    if (!current) {
+      return;
+    }
+
     scrollToCell(
       current.row,
       current.col,
@@ -344,6 +354,10 @@ const App = ({ data }) => {
     setSearchResultActiveIndex(nextIndex);
     const current = results[nextIndex];
 
+    if (!current) {
+      return;
+    }
+
     scrollToCell(
       current.row,
       current.col,
@@ -400,7 +414,7 @@ const App = ({ data }) => {
               icon={<antdIcons.ArrowLeftOutlined />}
               onClick={() => {
                 if (searchResult.length > 0) {
-                  focusPrev(searchResult, searchResultActiveIndex);
+                  focusPrev(searchResult);
                 }
               }}
             />
@@ -423,9 +437,9 @@ const App = ({ data }) => {
         dataCfg={dataCfg}
         options={options}
         sheetType="table"
-        onColCellClick={(e) => {
+        onColCellClick={({ event, viewMeta }) => {
           // 最左侧列的格子点击后全选
-          if (e.viewMeta.colIndex === 0) {
+          if (viewMeta?.colIndex === 0) {
             s2Ref.current?.interaction.selectAll();
           }
         }}
@@ -437,6 +451,8 @@ const App = ({ data }) => {
         title="列设置"
         open={colModalVisible}
         className="antv-s2-data-preview-demo-modal"
+        okText="确定"
+        cancelText="取消"
         onCancel={() => {
           setColModalVisible(false);
           form.resetFields();
@@ -456,7 +472,7 @@ const App = ({ data }) => {
   );
 };
 
-const convertToObject = (values) => {
+function convertToObject(values) {
   const initData = {};
 
   values.forEach((val) => {
@@ -464,16 +480,9 @@ const convertToObject = (values) => {
   });
 
   return initData;
-};
-
-/**
- * 返回当前sortMethod  默认为NONE
- * @param fieldName
- * @param sortParams
- * @returns
- */
+}
 
-export const getCurrentSortMethod = (fieldName, sortParams) => {
+function getCurrentSortMethod(fieldName, sortParams) {
   return (
     get(
       (sortParams || []).filter((param) => param.sortFieldId === fieldName),
@@ -481,15 +490,9 @@ export const getCurrentSortMethod = (fieldName, sortParams) => {
       'NONE',
     ) || 'NONE'
   );
-};
+}
 
-/**
- *
- * @param fieldName
- * @param filterParams
- * @returns
- */
-export const getCurrentFilterParams = (fieldName, filterParams) => {
+function getCurrentFilterParams(fieldName, filterParams) {
   const filtered = get(
     (filterParams || []).filter((param) => param.filterKey === fieldName),
     '[0].filteredValues',
@@ -497,9 +500,9 @@ export const getCurrentFilterParams = (fieldName, filterParams) => {
   );
 
   return filtered;
-};
+}
 
-const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
+function SortPopover({ fieldName, spreadsheet, modalCallbackRef }) {
   const fieldData = React.useMemo(
     () =>
       uniq(
@@ -510,17 +513,17 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
   );
 
   const { sortParams, filterParams } = spreadsheet.dataCfg;
-  const [sort, setsort] = React.useState(
+  const [sort, setSort] = React.useState(
     getCurrentSortMethod(fieldName, sortParams),
   );
-  const [filtered, setfiltered] = React.useState(
+  const [filtered, setFiltered] = React.useState(
     convertToObject(getCurrentFilterParams(fieldName, filterParams)),
   );
-  const [changed, setchanged] = React.useState({
+  const [changed, setChanged] = React.useState({
     sort: false,
     filter: false,
   });
-  const [searchKeyword, setsearchKeyword] = React.useState('');
+  const [searchKeyword, setSearchKeyword] = React.useState('');
 
   const searchedFieldData = React.useMemo(
     () =>
@@ -540,8 +543,8 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
 
   const onKeywordChange = (keyword) => {
     // 关键词变化时将不在关键词内的值过滤
-    setsearchKeyword(keyword);
-    setchanged((old) => ({ ...old, filter: true }));
+    setSearchKeyword(keyword);
+    setChanged((old) => ({ ...old, filter: true }));
     const newFilter = {};
 
     fieldData
@@ -564,7 +567,7 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
       .forEach((data) => {
         newFilter[data] = true;
       });
-    setfiltered(newFilter);
+    setFiltered(newFilter);
   };
 
   modalCallbackRef.current = () => {
@@ -591,7 +594,7 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
       });
     }
 
-    setchanged({ filter: false, sort: false });
+    setChanged({ filter: false, sort: false });
   };
 
   return (
@@ -603,8 +606,8 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
       <Form.Item label="数据排序: " className="sort-item">
         <Radio.Group
           onChange={(e) => {
-            setsort(e.target.value);
-            setchanged((val) => ({ ...val, sort: true }));
+            setSort(e.target.value);
+            setChanged((val) => ({ ...val, sort: true }));
           }}
           value={sort}
         >
@@ -612,7 +615,6 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
           <Radio value={'ASC'}>升序</Radio>
           <Radio value={'DESC'}>降序</Radio>
         </Radio.Group>
-        ,
       </Form.Item>
       <Form.Item label="数值筛选: " className="filter-item">
         <div>
@@ -637,10 +639,10 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
                   target: { checked },
                 } = e;
 
-                setchanged((val) => ({ ...val, filter: true }));
+                setChanged((val) => ({ ...val, filter: true }));
 
                 if (checked) {
-                  setfiltered((old) => {
+                  setFiltered((old) => {
                     const newValue = {};
 
                     searchedFieldData.forEach((fieldValue) => {
@@ -651,7 +653,7 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
                   });
                 } else {
                   // 将全部过滤
-                  setfiltered((old) => {
+                  setFiltered((old) => {
                     const newValue = {};
 
                     searchedFieldData.forEach((fieldValue) => {
@@ -663,7 +665,7 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
                 }
               }}
             >
-              {'全选'}
+              全选
             </Checkbox>
 
             {searchedFieldData.map((item, i) => {
@@ -673,8 +675,8 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
                   className="check-item"
                   checked={!filtered[item]}
                   onChange={(e) => {
-                    setchanged((old) => ({ ...old, filter: true }));
-                    setfiltered((old) => ({
+                    setChanged((old) => ({ ...old, filter: true }));
+                    setFiltered((old) => ({
                       ...old,
                       [item]: !e.target.checked,
                     }));
@@ -689,26 +691,36 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
       </Form.Item>
     </Form>
   );
-};
+}
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
   .then((res) => {
-    createRoot(document.getElementById('container')).render(<App data={res} />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<App data={res} />);
   });
 
 insertCSS(`
-  .antv-s2-data-preview-demo-modal .filter-item{
+  .antv-s2-data-preview-demo-modal .filter-item {
     margin-top: 20px;
   }
-  .antv-s2-data-preview-demo-modal .check-item-list{
+
+  .antv-s2-data-preview-demo-modal .check-item-list {
     display: flex;
     flex-direction: column;
   }
+
   .ant-checkbox-wrapper.check-item {
     margin-left: 0;
   }
-  .antv-s2-data-preview-demo-modal .search-box{
+
+  .ant-checkbox-wrapper .ant-modal-close-x {
+    width: auto;
+    height: auto;
+  }
+
+  .antv-s2-data-preview-demo-modal .search-box {
     margin-bottom: 5px
   }
 `);
diff --git a/s2-site/examples/case/kpi-strategy/demo/basic.tsx b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
index 8c9b3f2bf6..5e2e27c4c9 100644
--- a/s2-site/examples/case/kpi-strategy/demo/basic.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
@@ -1,8 +1,9 @@
-import { DataCell, measureTextWidth, S2DataConfig, S2Theme } from '@antv/s2';
+import { DataCell, S2DataConfig, S2Theme } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
 import React from 'react';
-import { createRoot } from 'react-dom';
+
+import { Line, Rect } from '@antv/g';
+import '@antv/s2-react/dist/style.min.css';
 
 // 进度条
 const PROGRESS_BAR = {
@@ -60,7 +61,7 @@ class KpiStrategyDataCell extends DataCell {
 
   // 如果是进度, 格式化为百分比 (只做 demo 示例, 请根据实际情况使用)
   getFormattedFieldValue() {
-    const { data } = this.meta;
+    const data = this.meta.data?.getOrigin();
 
     if (!data || !data.isProgress) {
       return super.getFormattedFieldValue();
@@ -74,7 +75,8 @@ class KpiStrategyDataCell extends DataCell {
   // 绘制衍生指标
   renderDeriveValue() {
     // 通过 this.meta 拿到当前单元格的有效信息
-    const { x, width, data } = this.meta;
+    const { x, width } = this.meta;
+    const data = this.meta.data?.getOrigin();
 
     if (!data || data.isExtra) {
       return;
@@ -90,35 +92,37 @@ class KpiStrategyDataCell extends DataCell {
       fontSize: 12,
     };
     // 获取当前文本坐标
-    const { maxY } = this.textShape.getBBox();
+    const { bottom } = this.textShape.getBBox();
     // 获取当前文本宽度
-    const textWidth = measureTextWidth(text, textStyle);
+    const textWidth = this.spreadsheet.measureTextWidth(text, textStyle);
     // 衍生指标靠右显示
     const textX = x + width - textWidth - PADDING;
     // 衍生指标和数值对齐显示
-    const textY = maxY;
+    const textY = bottom;
 
-    this.addShape('text', {
-      attrs: {
+    this.renderTextShape(
+      {
+        ...textStyle,
         x: textX,
         y: textY,
         text,
-        ...textStyle,
       },
-    });
+      { shallowRender: true },
+    );
   }
 
   // 绘制子弹进度条
 
   renderProgressBar() {
     const { x, y, width, height, data } = this.meta;
+    const originData = data?.getOrigin();
 
-    if (!data || !data.isProgress) {
+    if (!data || !originData || !originData.isProgress) {
       return;
     }
 
-    const currentProgress = data.value;
-    const expectedProgress = data.expectedValue;
+    const currentProgress = originData.value;
+    const expectedProgress = originData.expectedValue;
 
     const currentProgressWidth = Math.min(
       PROGRESS_BAR.width * currentProgress,
@@ -126,45 +130,53 @@ class KpiStrategyDataCell extends DataCell {
     );
 
     // 总进度条
-    this.addShape('rect', {
-      attrs: {
-        x: x + width - PROGRESS_BAR.width - PADDING,
-        y: y + (height - PROGRESS_BAR.height) / 2,
-        width: PROGRESS_BAR.width,
-        height: PROGRESS_BAR.height,
-        fill: CONTAINER_COLOR,
-      },
-    });
+    this.appendChild(
+      new Rect({
+        style: {
+          x: x + width - PROGRESS_BAR.width - PADDING,
+          y: y + (height - PROGRESS_BAR.height) / 2,
+          width: PROGRESS_BAR.width,
+          height: PROGRESS_BAR.height,
+          fill: CONTAINER_COLOR,
+        },
+      }),
+    );
+
     // 当前进度条
-    this.addShape('rect', {
-      attrs: {
-        x: x + width - PROGRESS_BAR.width - PADDING,
-        y: y + (height - PROGRESS_BAR.innerHeight) / 2,
-        width: currentProgressWidth,
-        height: PROGRESS_BAR.innerHeight,
-        fill: getStatusColorByProgress(currentProgress, expectedProgress),
-      },
-    });
+    this.appendChild(
+      new Rect({
+        style: {
+          x: x + width - PROGRESS_BAR.width - PADDING,
+          y: y + (height - PROGRESS_BAR.innerHeight) / 2,
+          width: currentProgressWidth,
+          height: PROGRESS_BAR.innerHeight,
+          fill: getStatusColorByProgress(currentProgress, expectedProgress),
+        },
+      }),
+    );
+
     // 期望线
-    this.addShape('line', {
-      attrs: {
-        x1:
-          x +
-          width -
-          PROGRESS_BAR.width +
-          PROGRESS_BAR.width * expectedProgress,
-        y1: y + (height - EXPECTED_LINE.height) / 2,
-        x2:
-          x +
-          width -
-          PROGRESS_BAR.width +
-          PROGRESS_BAR.width * expectedProgress,
-        y2: y + (height - EXPECTED_LINE.height) / 2 + EXPECTED_LINE.height,
-        stroke: EXPECTED_LINE.color,
-        lineWidth: EXPECTED_LINE.width,
-        opacity: 0.25,
-      },
-    });
+    this.appendChild(
+      new Line({
+        style: {
+          x1:
+            x +
+            width -
+            PROGRESS_BAR.width +
+            PROGRESS_BAR.width * expectedProgress,
+          y1: y + (height - EXPECTED_LINE.height) / 2,
+          x2:
+            x +
+            width -
+            PROGRESS_BAR.width +
+            PROGRESS_BAR.width * expectedProgress,
+          y2: y + (height - EXPECTED_LINE.height) / 2 + EXPECTED_LINE.height,
+          stroke: EXPECTED_LINE.color,
+          lineWidth: EXPECTED_LINE.width,
+          opacity: 0.25,
+        },
+      }),
+    );
   }
 }
 
@@ -247,7 +259,7 @@ fetch('https://assets.antv.antgroup.com/s2/kpi-strategy.json')
       },
     };
 
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
index b5fcfb691c..60948cf68a 100644
--- a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
+
 import { isNil } from 'lodash';
 import { isUpDataValue } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
@@ -15,13 +15,15 @@ fetch(
       width: 1200,
       height: 600,
       placeholder: '',
+      hierarchyType: 'tree',
       style: {
-        dataCell: {
+        rowCell: {
           height: 60,
         },
         colCell: {
-          // TODO:
-          widthByFieldValue: { 近14日趋势图: 300 },
+          width: (node) => {
+            return node?.value === '近14日趋势图' ? 300 : null;
+          },
         },
       },
       conditions: {
@@ -70,9 +72,15 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
-        dataCfg={s2DataCfg}
+        dataCfg={{
+          ...s2DataCfg,
+          fields: {
+            ...s2DataCfg.fields,
+            rows: s2DataCfg.fields.customTreeItems,
+          },
+        }}
         options={s2Options}
         sheetType="strategy"
       />,
diff --git a/s2-site/examples/case/performance-compare/demo/basic.tsx b/s2-site/examples/case/performance-compare/demo/basic.tsx
index a66eaa76e0..15590c2eaf 100644
--- a/s2-site/examples/case/performance-compare/demo/basic.tsx
+++ b/s2-site/examples/case/performance-compare/demo/basic.tsx
@@ -3,7 +3,6 @@ import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { compact } from 'lodash';
 import React from 'react';
-import { createRoot } from 'react-dom';
 
 const disableColor = '#d3d7d4';
 const colors = [
@@ -91,7 +90,7 @@ function getOptions(rawData: S2DataConfig['data']): SheetComponentOptions {
 fetch('https://assets.antv.antgroup.com/s2/compare.json')
   .then((res) => res.json())
   .then((data) => {
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <div>
         <h3>1000 数据规模表格渲染时间对比</h3>
         <SheetComponent
diff --git a/s2-site/examples/case/proportion/demo/group-drill-down.tsx b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
index e1b35d0a30..1d729ec904 100644
--- a/s2-site/examples/case/proportion/demo/group-drill-down.tsx
+++ b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
@@ -3,7 +3,6 @@ import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
 import React, { useState } from 'react';
-import { createRoot } from 'react-dom';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/ff31b171-17a7-4d29-b20a-0b90a810d2de.json',
@@ -154,7 +153,9 @@ fetch(
       );
     };
 
-    createRoot(document.getElementById('container')).render(<GridSheet />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<GridSheet />);
   });
 
 insertCSS(`
diff --git a/s2-site/examples/case/proportion/demo/single-population-proportion.tsx b/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
index f834fb3370..268fe3af13 100644
--- a/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
+++ b/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
@@ -3,7 +3,6 @@ import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
 import React from 'react';
-import { createRoot } from 'react-dom';
 
 const PALETTE_COLORS = [
   {
@@ -155,7 +154,7 @@ fetch('https://assets.antv.antgroup.com/s2/single-population-proportion.json')
       },
     };
 
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <div className="root">
         <SheetComponent
           dataCfg={s2DataConfig}
diff --git a/s2-site/examples/custom/custom-cell/demo/col-cell.ts b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
index bf9bee8795..daf7495a6a 100644
--- a/s2-site/examples/custom/custom-cell/demo/col-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
@@ -1,4 +1,5 @@
 import { PivotSheet, ColCell, S2Options, S2DataConfig } from '@antv/s2';
+import { Image as GImage } from '@antv/g';
 
 /**
  * 自定义 ColCell，给列头添加背景图
@@ -7,12 +8,21 @@ import { PivotSheet, ColCell, S2Options, S2DataConfig } from '@antv/s2';
 class CustomColCell extends ColCell {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
   drawBackgroundShape() {
-    this.backgroundShape = this.addShape('image', {
-      attrs: {
-        ...this.getBBoxByType(),
-        img: 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png',
-      },
-    });
+    const img = new Image();
+
+    img.src =
+      'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png';
+
+    img.onload = () => {
+      this.backgroundShape = this.appendChild(
+        new GImage({
+          style: {
+            ...this.getBBoxByType(),
+            img,
+          },
+        }),
+      );
+    };
   }
 }
 
diff --git a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
index 340ba21089..aa56c4d21d 100644
--- a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
@@ -1,4 +1,5 @@
 import { PivotSheet, CornerCell, S2Options, S2DataConfig } from '@antv/s2';
+import { Image as GImage } from '@antv/g';
 
 /**
  * 自定义 CornerCell，给角头添加背景图
@@ -6,12 +7,21 @@ import { PivotSheet, CornerCell, S2Options, S2DataConfig } from '@antv/s2';
  */
 class CustomCornerCell extends CornerCell {
   drawBackgroundShape() {
-    this.addShape('image', {
-      attrs: {
-        ...this.getBBoxByType(),
-        img: 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png',
-      },
-    });
+    const img = new Image();
+
+    img.src =
+      'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png';
+
+    img.onload = () => {
+      this.backgroundShape = this.appendChild(
+        new GImage({
+          style: {
+            ...this.getBBoxByType(),
+            img,
+          },
+        }),
+      );
+    };
   }
 }
 
diff --git a/s2-site/examples/custom/custom-cell/demo/corner-header.ts b/s2-site/examples/custom/custom-cell/demo/corner-header.ts
index c0d3321477..815d83a223 100644
--- a/s2-site/examples/custom/custom-cell/demo/corner-header.ts
+++ b/s2-site/examples/custom/custom-cell/demo/corner-header.ts
@@ -1,6 +1,6 @@
 import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
-import { Group } from '@antv/g-canvas';
 import { get } from 'lodash';
+import { Image as GImage, Group, Text } from '@antv/g';
 
 /**
  * 自定义整个角头, 添加文字和背景色
@@ -21,36 +21,46 @@ class CustomCornerHeader extends Group {
 
   initCornerHeader() {
     this.initBg();
-    this.initText();
   }
 
   initBg() {
-    this.backgroundShape = this.addShape('image', {
-      attrs: {
-        x: 0,
-        y: 0,
-        width: get(this.node, 'headerConfig.width'),
-        height: get(this.node, 'headerConfig.height'),
-        img: 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png',
-      },
-    });
-    this.node.add(this.backgroundShape);
+    const img = new Image();
+
+    img.src =
+      'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png';
+
+    img.onload = () => {
+      this.backgroundShape = this.node.appendChild(
+        new GImage({
+          style: {
+            x: 0,
+            y: 0,
+            width: get(this.node, 'headerConfig.width'),
+            height: get(this.node, 'headerConfig.height'),
+            img,
+          },
+        }),
+      );
+
+      this.initText();
+    };
   }
 
   initText() {
-    this.textShape = this.addShape('text', {
-      zIndex: 100,
-      attrs: {
-        x: 50,
-        y: 70,
-        text: 'corner in S2',
-        fontFamily: 'PingFang SC',
-        fontSize: 20,
-        fill: 'black',
-        stroke: 'black',
-      },
-    });
-    this.node.add(this.textShape);
+    this.textShape = this.node.appendChild(
+      new Text({
+        zIndex: 100,
+        style: {
+          x: 50,
+          y: 60,
+          text: 'corner in S2',
+          fontFamily: 'PingFang SC',
+          fontSize: 20,
+          fill: 'black',
+          stroke: 'black',
+        },
+      }),
+    );
   }
 }
 
diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell.ts b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
index 2540364b89..3d31dab289 100644
--- a/s2-site/examples/custom/custom-cell/demo/data-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
@@ -1,4 +1,5 @@
 import { PivotSheet, DataCell, S2DataConfig, S2Options } from '@antv/s2';
+import { Image as GImage } from '@antv/g';
 
 /**
  * 自定义 DataCell，给数值单元格添加背景图
@@ -7,12 +8,21 @@ import { PivotSheet, DataCell, S2DataConfig, S2Options } from '@antv/s2';
 class CustomDataCell extends DataCell {
   // 重写绘制背景方法, 添加一个背景图片
   drawBackgroundShape() {
-    this.backgroundShape = this.addShape('image', {
-      attrs: {
-        ...this.getBBoxByType(),
-        img: 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png',
-      },
-    });
+    const img = new Image();
+
+    img.src =
+      'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png';
+
+    img.onload = () => {
+      this.backgroundShape = this.appendChild(
+        new GImage({
+          style: {
+            ...this.getBBoxByType(),
+            img,
+          },
+        }),
+      );
+    };
   }
 }
 
diff --git a/s2-site/examples/custom/custom-cell/demo/row-cell.ts b/s2-site/examples/custom/custom-cell/demo/row-cell.ts
index cbc85333f9..777cf8c852 100644
--- a/s2-site/examples/custom/custom-cell/demo/row-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/row-cell.ts
@@ -1,4 +1,5 @@
 import { PivotSheet, RowCell, S2DataConfig, S2Options } from '@antv/s2';
+import { Image as GImage } from '@antv/g';
 
 /**
  * 自定义 RowCell，给行头添加背景图
@@ -7,12 +8,21 @@ import { PivotSheet, RowCell, S2DataConfig, S2Options } from '@antv/s2';
 class CustomRowCell extends RowCell {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
   drawBackgroundShape() {
-    this.backgroundShape = this.addShape('image', {
-      attrs: {
-        ...this.getBBoxByType(),
-        img: 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png',
-      },
-    });
+    const img = new Image();
+
+    img.src =
+      'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png';
+
+    img.onload = () => {
+      this.backgroundShape = this.appendChild(
+        new GImage({
+          style: {
+            ...this.getBBoxByType(),
+            img,
+          },
+        }),
+      );
+    };
   }
 }
 
diff --git a/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
index a02d1af192..569ea75edf 100644
--- a/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
+++ b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -103,7 +102,7 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent dataCfg={dataCfg} options={s2Options} />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<SheetComponent dataCfg={dataCfg} options={s2Options} />);
   });
diff --git a/s2-site/examples/custom/custom-order/demo/custom-order.tsx b/s2-site/examples/custom/custom-order/demo/custom-order.tsx
index 89507a996e..d4cf1730e4 100644
--- a/s2-site/examples/custom/custom-order/demo/custom-order.tsx
+++ b/s2-site/examples/custom/custom-order/demo/custom-order.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { Node, S2DataConfig, TooltipOptions } from '@antv/s2';
 
@@ -126,4 +125,4 @@ const App = () => {
   );
 };
 
-createRoot(document.getElementById('container')).render(<App />);
+reactDOMClient.createRoot(document.getElementById('container')).render(<App />);
diff --git a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
index 621438424c..1b94c92550 100644
--- a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
+++ b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
@@ -1,6 +1,5 @@
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import React from 'react';
-import { createRoot } from 'react-dom';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
@@ -12,7 +11,7 @@ fetch(
       height: 480,
     };
 
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
diff --git a/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx b/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx
index 94630e4b6e..231e981aea 100644
--- a/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx
+++ b/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { DrillDown } from '@antv/s2-react';
 
 const disabledFields = ['name'];
@@ -28,10 +27,12 @@ const dataSet = [
   },
 ];
 
-createRoot(document.getElementById('container')).render(
-  <DrillDown
-    disabledFields={disabledFields}
-    clearButtonText={clearButtonText}
-    dataSet={dataSet}
-  />,
-);
+reactDOMClient
+  .createRoot(document.getElementById('container'))
+  .render(
+    <DrillDown
+      disabledFields={disabledFields}
+      clearButtonText={clearButtonText}
+      dataSet={dataSet}
+    />,
+  );
diff --git a/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx b/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
index 91291690d1..bf581d7b6c 100644
--- a/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
+++ b/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import {
   SheetComponent,
   SheetComponentOptions,
@@ -81,12 +80,14 @@ fetch(
         }),
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        dataCfg={s2DataConfig}
-        options={s2Options}
-        partDrillDown={PartDrillDown}
-        adaptive={false}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          dataCfg={s2DataConfig}
+          options={s2Options}
+          partDrillDown={PartDrillDown}
+          adaptive={false}
+        />,
+      );
   });
diff --git a/s2-site/examples/react-component/export/demo/export.tsx b/s2-site/examples/react-component/export/demo/export.tsx
index 9a6663bd20..0a894892b0 100644
--- a/s2-site/examples/react-component/export/demo/export.tsx
+++ b/s2-site/examples/react-component/export/demo/export.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -27,7 +26,7 @@ fetch(
       data: res.data,
     };
 
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/react-component/header/demo/default.tsx b/s2-site/examples/react-component/header/demo/default.tsx
index 87cd753e02..2deabd11dd 100644
--- a/s2-site/examples/react-component/header/demo/default.tsx
+++ b/s2-site/examples/react-component/header/demo/default.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import insertCSS from 'insert-css';
 import { Button } from 'antd';
 import {
@@ -66,7 +65,9 @@ fetch(
       );
     };
 
-    createRoot(document.getElementById('container')).render(<SheetHeader />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<SheetHeader />);
   });
 
 insertCSS(`
diff --git a/s2-site/examples/react-component/pagination/demo/pivot.tsx b/s2-site/examples/react-component/pagination/demo/pivot.tsx
index f1b73f960f..786a1540be 100644
--- a/s2-site/examples/react-component/pagination/demo/pivot.tsx
+++ b/s2-site/examples/react-component/pagination/demo/pivot.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -18,7 +17,9 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent dataCfg={dataCfg} options={s2Options} showPagination />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent dataCfg={dataCfg} options={s2Options} showPagination />,
+      );
   });
diff --git a/s2-site/examples/react-component/pagination/demo/table.tsx b/s2-site/examples/react-component/pagination/demo/table.tsx
index e7219c0830..3fd44088a0 100644
--- a/s2-site/examples/react-component/pagination/demo/table.tsx
+++ b/s2-site/examples/react-component/pagination/demo/table.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -45,7 +44,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       data: res,
     };
 
-    createRoot(document.getElementById('container')).render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
diff --git a/s2-site/examples/react-component/sheet/demo/editable.tsx b/s2-site/examples/react-component/sheet/demo/editable.tsx
index 8507f2d4c6..2efa507341 100644
--- a/s2-site/examples/react-component/sheet/demo/editable.tsx
+++ b/s2-site/examples/react-component/sheet/demo/editable.tsx
@@ -1,7 +1,6 @@
 import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import React from 'react';
-import { createRoot } from 'react-dom';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
@@ -51,11 +50,13 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        dataCfg={s2DataConfig}
-        options={s2Options}
-        sheetType="editable"
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          dataCfg={s2DataConfig}
+          options={s2Options}
+          sheetType="editable"
+        />,
+      );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx b/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx
index 893e36ac17..916d8376d2 100644
--- a/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx
+++ b/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
+
 import { MobileSheet } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -8,7 +8,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    createRoot(document.getElementById('container')).render(
-      <MobileSheet dataCfg={dataCfg} />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<MobileSheet dataCfg={dataCfg} />);
   });
diff --git a/s2-site/examples/react-component/sheet/demo/pivot.tsx b/s2-site/examples/react-component/sheet/demo/pivot.tsx
index 2227eb28ff..a295bb7751 100644
--- a/s2-site/examples/react-component/sheet/demo/pivot.tsx
+++ b/s2-site/examples/react-component/sheet/demo/pivot.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -13,7 +12,7 @@ fetch(
       height: 480,
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent dataCfg={dataCfg} options={s2Options} />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<SheetComponent dataCfg={dataCfg} options={s2Options} />);
   });
diff --git a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
index e362858e6d..729cef7dc0 100644
--- a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
+++ b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
@@ -1,7 +1,6 @@
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import React from 'react';
-import { createRoot } from 'react-dom';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/b942d973-7364-4fad-a10a-369426a61376.json',
@@ -42,11 +41,13 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        dataCfg={dataCfg}
-        options={s2Options}
-        sheetType="strategy"
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          dataCfg={dataCfg}
+          options={s2Options}
+          sheetType="strategy"
+        />,
+      );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/strategy.tsx b/s2-site/examples/react-component/sheet/demo/strategy.tsx
index f790fb6251..fa24439b5a 100644
--- a/s2-site/examples/react-component/sheet/demo/strategy.tsx
+++ b/s2-site/examples/react-component/sheet/demo/strategy.tsx
@@ -2,7 +2,6 @@ import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import React from 'react';
-import { createRoot } from 'react-dom';
 
 // 临时处理老数据格式
 function process(children) {
@@ -80,11 +79,13 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        sheetType="strategy"
-        dataCfg={s2DataConfig}
-        options={s2Options}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="strategy"
+          dataCfg={s2DataConfig}
+          options={s2Options}
+        />,
+      );
   });
diff --git a/s2-site/examples/react-component/sheet/demo/table.tsx b/s2-site/examples/react-component/sheet/demo/table.tsx
index 90a7a31a17..c84ba0d313 100644
--- a/s2-site/examples/react-component/sheet/demo/table.tsx
+++ b/s2-site/examples/react-component/sheet/demo/table.tsx
@@ -2,7 +2,6 @@ import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import React from 'react';
-import { createRoot } from 'react-dom';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
@@ -41,11 +40,13 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       data: res,
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        dataCfg={s2DataConfig}
-        options={s2Options}
-        sheetType="table"
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          dataCfg={s2DataConfig}
+          options={s2Options}
+          sheetType="table"
+        />,
+      );
   });
diff --git a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
index 95f2a9070b..be02d119fb 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
@@ -2,8 +2,6 @@ import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
 import React from 'react';
-import { createRoot } from 'react-dom';
-
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/6eede6eb-8021-4da8-bb12-67891a5705b7.json',
 )
@@ -34,7 +32,9 @@ fetch(
       );
     };
 
-    createRoot(document.getElementById('container')).render(<SwitcherDemo />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<SwitcherDemo />);
   });
 
 insertCSS(`
diff --git a/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx b/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
index b566804f4b..853e4c0a1c 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx
@@ -6,8 +6,6 @@ import {
 import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
 import React, { useState } from 'react';
-import { createRoot } from 'react-dom';
-
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/0c913e28-7806-41b2-a046-df3c1586712c.json',
 )
@@ -110,7 +108,9 @@ fetch(
       );
     };
 
-    createRoot(document.getElementById('container')).render(<SwitcherDemo />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<SwitcherDemo />);
   });
 
 insertCSS(`
diff --git a/s2-site/examples/react-component/switcher/demo/pivot.tsx b/s2-site/examples/react-component/switcher/demo/pivot.tsx
index bc664833b9..3e09abeebd 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { createRoot } from 'react-dom';
 import {
   SheetComponent,
   SheetComponentOptions,
@@ -88,7 +87,9 @@ fetch(
       );
     };
 
-    createRoot(document.getElementById('container')).render(<SwitcherDemo />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<SwitcherDemo />);
   });
 
 insertCSS(`
diff --git a/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx b/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx
index 6d34f472b1..15eb42521b 100644
--- a/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { Switcher } from '@antv/s2-react';
 
 const switcherFields = {
@@ -20,6 +19,6 @@ const onSubmit = (result) => {
   console.log('result:', result);
 };
 
-createRoot(document.getElementById('container')).render(
-  <Switcher {...switcherFields} onSubmit={onSubmit} />,
-);
+reactDOMClient
+  .createRoot(document.getElementById('container'))
+  .render(<Switcher {...switcherFields} onSubmit={onSubmit} />);
diff --git a/s2-site/examples/react-component/switcher/demo/table.tsx b/s2-site/examples/react-component/switcher/demo/table.tsx
index c61ec98775..ed3281f374 100644
--- a/s2-site/examples/react-component/switcher/demo/table.tsx
+++ b/s2-site/examples/react-component/switcher/demo/table.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { createRoot } from 'react-dom';
 import {
   SheetComponent,
   SheetComponentOptions,
@@ -79,7 +78,9 @@ fetch(
       );
     };
 
-    createRoot(document.getElementById('container')).render(<SwitcherDemo />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<SwitcherDemo />);
   });
 
 insertCSS(`
diff --git a/s2-site/examples/react-component/tooltip/demo/basic.tsx b/s2-site/examples/react-component/tooltip/demo/basic.tsx
index bb5f346c12..16b444699c 100644
--- a/s2-site/examples/react-component/tooltip/demo/basic.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/basic.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -19,12 +18,14 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={dataCfg}
+          options={s2Options}
+        />,
+      );
   });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
index 571d9e8f2f..7ae7cf9001 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { TargetCellInfo } from '@antv/s2';
@@ -44,13 +43,15 @@ fetch(
       }
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-        onColCellClick={onColCellClick}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={dataCfg}
+          options={s2Options}
+          onColCellClick={onColCellClick}
+        />,
+      );
   });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx b/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
index fa82cb91a5..46db5c58a5 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import insertCSS from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
@@ -27,14 +26,16 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={dataCfg}
+          options={s2Options}
+        />,
+      );
   });
 
 insertCSS(`
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-description.tsx b/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
index 178d3e3e05..f1057613df 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
@@ -47,11 +46,13 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        sheetType="pivot"
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          dataCfg={dataCfg}
+          options={s2Options}
+        />,
+      );
   });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
index 461c719e5b..f8f50cb696 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -54,15 +53,17 @@ fetch(
       });
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-        onColCellHover={onColCellHover}
-        onRowCellHover={onRowCellHover}
-        onDataCellHover={onDataCellHover}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={dataCfg}
+          options={s2Options}
+          onColCellHover={onColCellHover}
+          onRowCellHover={onRowCellHover}
+          onDataCellHover={onDataCellHover}
+        />,
+      );
   });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
index 83093ec58d..820e5f9267 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -73,12 +72,14 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={dataCfg}
+          options={s2Options}
+        />,
+      );
   });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
index 3342873843..77850d5b37 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import insertCSS from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
@@ -78,7 +77,9 @@ fetch(
       />
     );
 
-    createRoot(document.getElementById('container')).render(<App />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<App />);
   });
 
 insertCSS(`
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
index c2a1a11e63..61c3688174 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
@@ -7,8 +7,6 @@ import {
 import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
 import React from 'react';
-import { createRoot } from 'react-dom';
-
 const MyCustomTooltipContent = () => (
   <div className="tooltip-custom-component">我是自定义 tooltip 内容</div>
 );
@@ -24,7 +22,7 @@ class CustomTooltip extends BaseTooltip<
   root: ReactDOM.Root;
 
   renderContent() {
-    this.root ??= createRoot(this.container!);
+    this.root ??= reactDOMClient.createRoot(this.container!);
     this.root.render(<MyCustomTooltipContent />);
   }
 
@@ -62,14 +60,16 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={dataCfg}
+          options={s2Options}
+        />,
+      );
   });
 
 insertCSS(`
diff --git a/s2-site/examples/react-component/tooltip/demo/operation.tsx b/s2-site/examples/react-component/tooltip/demo/operation.tsx
index b2b999a974..081e71108e 100644
--- a/s2-site/examples/react-component/tooltip/demo/operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/operation.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { CellType } from '@antv/s2';
@@ -37,12 +36,14 @@ fetch(
       },
     };
 
-    createRoot(document.getElementById('container')).render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={dataCfg}
+          options={s2Options}
+        />,
+      );
   });
diff --git a/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx b/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
index 546bf1c9c4..be18a440c7 100644
--- a/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
+++ b/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { createRoot } from 'react-dom';
 import { getPalette, generatePalette, ThemeCfg } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { ChromePicker } from 'react-color';
@@ -74,5 +73,7 @@ fetch(
       );
     }
 
-    createRoot(document.getElementById('container')).render(<App />);
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<App />);
   });
diff --git a/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx b/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
index e93387dad9..b5f4575e49 100644
--- a/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
+++ b/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { debounce, isObjectLike } from 'lodash';
-import { createRoot } from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { S2DataConfig, getPalette } from '@antv/s2';
 import { SketchPicker } from 'react-color';
@@ -227,4 +226,4 @@ function App() {
   );
 }
 
-createRoot(document.getElementById('container')).render(<App />);
+reactDOMClient.createRoot(document.getElementById('container')).render(<App />);
diff --git a/s2-site/package.json b/s2-site/package.json
index b67722d45b..103c1c816b 100644
--- a/s2-site/package.json
+++ b/s2-site/package.json
@@ -13,10 +13,10 @@
   "homepage": "https://s2.antv.antgroup.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/antvis/s2"
+    "url": "https://github.com/antvis/S2"
   },
   "bugs": {
-    "url": "https://github.com/antvis/s2/issues"
+    "url": "https://github.com/antvis/S2/issues"
   },
   "scripts": {
     "start": "dumi dev",
@@ -29,19 +29,20 @@
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@antv/dumi-theme-antv": "^0.4.5",
+    "@antv/g": "^5.18.23",
     "@antv/g-canvas": "^1.11.25",
     "@antv/g-plugin-a11y": "^0.6.20",
     "@antv/g-plugin-rough-canvas-renderer": "^1.9.25",
     "@antv/g2": "^5.1.13",
     "@antv/s2": "next",
     "@antv/s2-react": "next",
-    "antd": "^5.12.5",
+    "antd": "^5.12.7",
     "copy-to-clipboard": "^3.3.3",
     "dumi": "^2.2.16",
     "gh-pages": "^6.1.1",
     "lodash": "^4.17.21",
-    "react-color": "^2.19.3",
     "react": "^18.2.0",
+    "react-color": "^2.19.3",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

From 8eba285ce9e0dfea9d8895740720940cc72216db Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Wed, 3 Jan 2024 18:04:46 +0800
Subject: [PATCH 17/64] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20=E7=9B=AE?=
 =?UTF-8?q?=E5=BD=95=20tag,=20=E9=A1=B6=E9=83=A8=E5=85=AC=E5=91=8A,=20?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=96=B0=E9=97=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.en-US.md                               |   6 +-
 README.md                                     |   6 +-
 pnpm-lock.yaml                                | 154 +++++++++---------
 s2-site/.dumi/global.ts                       |   2 +-
 s2-site/.dumirc.ts                            |  22 ++-
 s2-site/docs/api/basic-class/base-bbox.en.md  |   1 +
 s2-site/docs/api/basic-class/base-bbox.zh.md  |   1 +
 s2-site/docs/api/basic-class/base-cell.en.md  |   1 +
 s2-site/docs/api/basic-class/base-cell.zh.md  |   1 +
 s2-site/docs/api/basic-class/base-facet.en.md |   1 +
 s2-site/docs/api/basic-class/base-facet.zh.md |   1 +
 s2-site/docs/api/basic-class/hierarchy.en.md  |   1 +
 s2-site/docs/api/basic-class/hierarchy.zh.md  |   1 +
 .../docs/api/basic-class/interaction.en.md    |   1 +
 .../docs/api/basic-class/interaction.zh.md    |   1 +
 s2-site/docs/api/components/export.en.md      |   1 +
 s2-site/docs/api/components/export.zh.md      |   1 +
 s2-site/docs/api/components/header.en.md      |   1 +
 s2-site/docs/api/components/header.zh.md      |   1 +
 s2-site/docs/api/general/S2Options.en.md      |   1 +
 s2-site/docs/api/general/S2Options.zh.md      |   1 +
 s2-site/docs/api/general/S2Theme.en.md        |   1 +
 s2-site/docs/api/general/S2Theme.zh.md        |   1 +
 s2-site/docs/common/env.zh.md                 |   2 -
 .../manual/advanced/analysis/export.en.md     |   1 +
 .../manual/advanced/analysis/export.zh.md     |   1 +
 .../advanced/analysis/mobile-component.en.md  |   1 +
 .../advanced/analysis/mobile-component.zh.md  |   1 +
 .../docs/manual/advanced/chart-in-cell.en.md  |   1 +
 .../docs/manual/advanced/chart-in-cell.zh.md  |   1 +
 .../manual/advanced/custom/cell-size.en.md    |   1 +
 .../manual/advanced/custom/cell-size.zh.md    |   1 +
 .../advanced/custom/custom-header.en.md       |   1 +
 .../advanced/custom/custom-header.zh.md       |   1 +
 .../manual/advanced/custom/custom-tree.en.md  |   1 +
 .../manual/advanced/custom/custom-tree.zh.md  |   1 +
 .../docs/manual/advanced/custom/hook.en.md    |   1 +
 .../docs/manual/advanced/custom/hook.zh.md    |   1 +
 s2-site/docs/manual/advanced/g-plugins.en.md  |   1 +
 s2-site/docs/manual/advanced/g-plugins.zh.md  |   1 +
 .../docs/manual/advanced/get-cell-data.en.md  |   1 +
 .../docs/manual/advanced/get-cell-data.zh.md  |   1 +
 .../manual/advanced/interaction/copy.en.md    |   1 +
 .../manual/advanced/interaction/copy.zh.md    |   1 +
 .../docs/manual/advanced/performance.en.md    |   1 +
 .../docs/manual/advanced/performance.zh.md    |   1 +
 s2-site/docs/manual/basic/base-concept.zh.md  |   1 +
 s2-site/docs/manual/basic/conditions.en.md    |   1 +
 s2-site/docs/manual/basic/conditions.zh.md    |   1 +
 s2-site/docs/manual/basic/formatter.en.md     |   1 +
 s2-site/docs/manual/basic/formatter.zh.md     |   1 +
 .../docs/manual/basic/multi-line-text.en.md   |   1 +
 .../docs/manual/basic/multi-line-text.zh.md   |   1 +
 .../manual/basic/sheet-type/pivot-mode.en.md  |   1 +
 .../manual/basic/sheet-type/pivot-mode.zh.md  |   1 +
 s2-site/docs/manual/basic/sort/advanced.en.md |   1 +
 s2-site/docs/manual/basic/sort/advanced.zh.md |   1 +
 s2-site/docs/manual/basic/sort/basic.en.md    |   1 +
 s2-site/docs/manual/basic/sort/basic.zh.md    |   1 +
 s2-site/docs/manual/basic/sort/custom.en.md   |   1 +
 s2-site/docs/manual/basic/sort/custom.zh.md   |   1 +
 s2-site/docs/manual/basic/theme.en.md         |   1 +
 s2-site/docs/manual/basic/theme.zh.md         |   1 +
 s2-site/docs/manual/basic/tooltip.en.md       |   1 +
 s2-site/docs/manual/basic/tooltip.zh.md       |   1 +
 s2-site/docs/manual/contribution.en.md        |   1 +
 s2-site/docs/manual/contribution.zh.md        |   1 +
 s2-site/docs/manual/getting-started.en.md     |   1 +
 s2-site/docs/manual/getting-started.zh.md     |  12 +-
 s2-site/docs/manual/introduction.zh.md        |   6 +-
 s2-site/docs/manual/migration-v2.en.md        |   5 +-
 s2-site/docs/manual/migration-v2.zh.md        |  30 +++-
 s2-site/package.json                          |   2 +-
 73 files changed, 200 insertions(+), 109 deletions(-)

diff --git a/README.en-US.md b/README.en-US.md
index 50ec5e8cfd..7767030c43 100644
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -77,9 +77,9 @@ demo components and expansion capabilities, it allows developers to use it quick
 ## 📦 Installation
 
 ```bash
-$ npm install @antv/s2
-# yarn add @antv/s2
-# pnpm add @antv/s2
+$ npm install @antv/s2@next --save
+# yarn add @antv/s2@next --save
+# pnpm add @antv/s2@next --save
 ```
 
 ## 🔨 Getting Started
diff --git a/README.md b/README.md
index 07cf1ce810..545d425bb1 100644
--- a/README.md
+++ b/README.md
@@ -73,9 +73,9 @@ S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数
 ## 📦 安装
 
 ```bash
-$ npm install @antv/s2 --save
-# yarn add @antv/s2 --save
-# pnpm add @antv/s2 --save
+$ pnpm add @antv/s2@next --save
+# npm install @antv/s2@next --save
+# yarn add @antv/s2@next --save
 ```
 
 ## 🔨 使用
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 44ab0abb58..046cf9971f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -444,8 +444,8 @@ importers:
         specifier: ^5.2.6
         version: 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@antv/dumi-theme-antv':
-        specifier: ^0.4.5
-        version: 0.4.5(@babel/core@7.23.2)(dumi@2.2.16)(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^0.4.6
+        version: 0.4.6(@babel/core@7.23.2)(dumi@2.2.16)(react-dom@18.2.0)(react@18.2.0)
       '@antv/g':
         specifier: ^5.18.23
         version: 5.18.23
@@ -733,8 +733,8 @@ packages:
     dependencies:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons-svg': 4.3.1
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       lodash: 4.17.21
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -804,8 +804,8 @@ packages:
       '@antv/util': 2.0.17
       gl-matrix: 3.4.3
 
-  /@antv/dumi-theme-antv@0.4.5(@babel/core@7.23.2)(dumi@2.2.16)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-TMbgp+DhnXiTt63xf1iu/6Go/k5SZ4J//i9u5IHRA7n8kwL8iq3nQPmR27lOAahri/F0sTnihLUtDCgWymn0gQ==}
+  /@antv/dumi-theme-antv@0.4.6(@babel/core@7.23.2)(dumi@2.2.16)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-k4CwPxjaaGCtJMp7zANHfDthsHlrA0ubmk1J31lhuOPgDcqXbOOjcDXh01tGdxtrjlXLYV3g27oykHBxazXB3w==}
     peerDependencies:
       dumi: ^2.0.0
       react: '>=16.9.0'
@@ -819,7 +819,7 @@ packages:
       '@monaco-editor/react': 4.4.6(monaco-editor@0.25.2)(react-dom@18.2.0)(react@18.2.0)
       '@stackblitz/sdk': 1.9.0
       antd: 4.24.14(react-dom@18.2.0)(react@18.2.0)
-      classnames: 2.3.2
+      classnames: 2.5.1
       codesandbox: 2.2.3
       d3-dsv: 3.0.1
       docsearch.js: 2.6.3
@@ -6163,9 +6163,9 @@ packages:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons': 4.8.1(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/react-slick': 1.0.2(react@18.2.0)
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       '@ctrl/tinycolor': 3.6.1
-      classnames: 2.3.2
+      classnames: 2.5.1
       copy-to-clipboard: 3.3.3
       lodash: 4.17.21
       moment: 2.29.4
@@ -18491,8 +18491,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       dom-align: 1.12.4
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -18521,9 +18521,9 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       array-tree-filter: 2.1.0
-      classnames: 2.3.2
+      classnames: 2.5.1
       rc-select: 14.1.18(react-dom@18.2.0)(react@18.2.0)
       rc-tree: 5.7.2(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -18537,8 +18537,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -18562,8 +18562,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -18590,9 +18590,9 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
-      classnames: 2.3.2
+      classnames: 2.5.1
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -18619,8 +18619,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -18632,9 +18632,9 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
-      classnames: 2.3.2
+      classnames: 2.5.1
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -18661,8 +18661,8 @@ packages:
       react: '>=16.11.0'
       react-dom: '>=16.11.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -18689,7 +18689,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       async-validator: 4.2.5
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -18715,8 +18715,8 @@ packages:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -18727,9 +18727,9 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
-      classnames: 2.3.2
+      classnames: 2.5.1
       rc-dialog: 9.0.2(react-dom@18.2.0)(react@18.2.0)
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -18758,8 +18758,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -18785,8 +18785,8 @@ packages:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -18823,8 +18823,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-menu: 9.8.1(react-dom@18.2.0)(react@18.2.0)
       rc-textarea: 0.4.7(react-dom@18.2.0)(react@18.2.0)
       rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
@@ -18870,8 +18870,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-overflow: 1.3.2(react-dom@18.2.0)(react@18.2.0)
       rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
@@ -18900,8 +18900,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -18941,8 +18941,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -18980,10 +18980,10 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       date-fns: 2.30.0
-      dayjs: 1.11.7
+      dayjs: 1.11.10
       moment: 2.29.4
       rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -19056,8 +19056,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -19095,8 +19095,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -19121,8 +19121,8 @@ packages:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -19149,8 +19149,8 @@ packages:
       react: '*'
       react-dom: '*'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-overflow: 1.3.2(react-dom@18.2.0)(react@18.2.0)
       rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
@@ -19184,8 +19184,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -19212,8 +19212,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -19238,8 +19238,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -19264,8 +19264,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -19331,8 +19331,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-dropdown: 4.0.1(react-dom@18.2.0)(react@18.2.0)
       rc-menu: 9.8.1(react-dom@18.2.0)(react@18.2.0)
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
@@ -19348,8 +19348,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -19377,8 +19377,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -19430,8 +19430,8 @@ packages:
       react: '*'
       react-dom: '*'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-select: 14.1.18(react-dom@18.2.0)(react@18.2.0)
       rc-tree: 5.7.2(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -19446,8 +19446,8 @@ packages:
       react: '*'
       react-dom: '*'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       rc-virtual-list: 3.11.3(react-dom@18.2.0)(react@18.2.0)
@@ -19477,8 +19477,8 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       rc-align: 4.0.15(react-dom@18.2.0)(react@18.2.0)
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -19826,7 +19826,7 @@ packages:
       react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0
       react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      classnames: 2.3.2
+      classnames: 2.5.1
       enquire.js: 2.1.6
       json2mq: 0.2.0
       lodash.debounce: 4.0.8
@@ -20734,7 +20734,7 @@ packages:
   /rtl-css-js@1.16.1:
     resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==}
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
     dev: false
 
   /run-applescript@5.0.0:
@@ -23160,8 +23160,8 @@ packages:
       react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
       react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
       lodash.throttle: 4.1.1
       prop-types: 15.8.1
       react: 18.2.0
diff --git a/s2-site/.dumi/global.ts b/s2-site/.dumi/global.ts
index 7f64dd9562..b53418f978 100644
--- a/s2-site/.dumi/global.ts
+++ b/s2-site/.dumi/global.ts
@@ -1,6 +1,6 @@
 if (window) {
   (window as any).react = require('react');
-  // 如果写成 reactDOM 会导致在 playground 运行时找不到,
+  // 如果写成 reactDOM 会导致在 playground 运行时找不到 (应该是 dumi 还有主题包存在多版本 React 导致的),
   (window as any).reactDom = require('react-dom');
   (window as any).reactDOMClient = require('react-dom/client');
   (window as any).lodash = require('lodash');
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 48c8f7ede2..14bdc4dca1 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -291,8 +291,18 @@ export default defineConfig({
         </html>`,
     },
     announcement: {
-      zh: '🎉 S2 2.0 版本开始内测啦! 查看 [升级指南](https://s2.antv.antgroup.com/manual/migration-v2)',
-      en: '🎉 S2 Next version 2.0 is in beta! see [Upgrade Guide](https://s2.antv.antgroup.com/manual/migration-v2)',
+      // icon: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
+      title: {
+        zh: '🎉 S2 2.0 版本开始内测啦!',
+        en: '🎉 S2 Next version 2.0 is in beta!',
+      },
+      link: {
+        text: {
+          zh: '查看升级指南',
+          en: 'Upgrade Guide',
+        },
+        url: 'https://s2.antv.antgroup.com/manual/migration-v2',
+      },
     },
     /** 首页技术栈介绍 */
     detail: {
@@ -305,11 +315,15 @@ export default defineConfig({
         en: 'S2 is a table solution in the field of multidimensional cross analysis. It is data-driven view, provides the underlying core library, basic component library and business scenario library, and has the ability of free expansion, allowing developers to use it out of the box and freely play based on their own scenarios.',
       },
       image:
-        'https://gw.alipayobjects.com/zos/bmw-prod/1aa91199-b986-4553-a425-6baa18c3a9bd.svg',
+        'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1PTTQLk3j5AAAAAAAAAAAAAADmJ7AQ/original',
+      imageStyle: {
+        marginLeft: '70px',
+        marginTop: '90px',
+      },
       buttons: [
         {
           text: {
-            zh: '升级指南',
+            zh: '2.0 升级指南',
             en: 'Migration v2',
           },
           link: `/manual/migration-v2`,
diff --git a/s2-site/docs/api/basic-class/base-bbox.en.md b/s2-site/docs/api/basic-class/base-bbox.en.md
index e84569f1a6..2da9c889a6 100644
--- a/s2-site/docs/api/basic-class/base-bbox.en.md
+++ b/s2-site/docs/api/basic-class/base-bbox.en.md
@@ -1,4 +1,5 @@
 ---
 title: BaseBBox
 order: 9
+tag: New
 ---
diff --git a/s2-site/docs/api/basic-class/base-bbox.zh.md b/s2-site/docs/api/basic-class/base-bbox.zh.md
index 647fc39b4c..b5c2636a54 100644
--- a/s2-site/docs/api/basic-class/base-bbox.zh.md
+++ b/s2-site/docs/api/basic-class/base-bbox.zh.md
@@ -1,6 +1,7 @@
 ---
 title: BaseBBox
 order: 9
+tag: New
 ---
 
 功能描述：盒模型。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/bbox/baseBBox.ts)
diff --git a/s2-site/docs/api/basic-class/base-cell.en.md b/s2-site/docs/api/basic-class/base-cell.en.md
index 7abbe7afe7..cb8adba66b 100644
--- a/s2-site/docs/api/basic-class/base-cell.en.md
+++ b/s2-site/docs/api/basic-class/base-cell.en.md
@@ -1,6 +1,7 @@
 ---
 title: BaseCell
 order: 4
+tag: Updated
 ---
 
 Function description: cell base class. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/base-cell.ts)
diff --git a/s2-site/docs/api/basic-class/base-cell.zh.md b/s2-site/docs/api/basic-class/base-cell.zh.md
index 176826e00a..6ef5cd4e03 100644
--- a/s2-site/docs/api/basic-class/base-cell.zh.md
+++ b/s2-site/docs/api/basic-class/base-cell.zh.md
@@ -1,6 +1,7 @@
 ---
 title: BaseCell
 order: 4
+tag: Updated
 ---
 
 功能描述：单元格基类。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/base-cell.ts)
diff --git a/s2-site/docs/api/basic-class/base-facet.en.md b/s2-site/docs/api/basic-class/base-facet.en.md
index 20e710b777..aff55eca99 100644
--- a/s2-site/docs/api/basic-class/base-facet.en.md
+++ b/s2-site/docs/api/basic-class/base-facet.en.md
@@ -1,6 +1,7 @@
 ---
 title: BaseFacet
 order: 7
+tag: Updated
 ---
 
 Function description: the current visible rendering area. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/facet/base-facet.ts)
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 88db6d2b7c..6aa37608ce 100644
--- a/s2-site/docs/api/basic-class/base-facet.zh.md
+++ b/s2-site/docs/api/basic-class/base-facet.zh.md
@@ -1,6 +1,7 @@
 ---
 title: BaseFacet
 order: 7
+tag: Updated
 ---
 
 功能描述：当前可视渲染区域。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/base-facet.ts)
diff --git a/s2-site/docs/api/basic-class/hierarchy.en.md b/s2-site/docs/api/basic-class/hierarchy.en.md
index b0e1bf0e02..485be649c2 100644
--- a/s2-site/docs/api/basic-class/hierarchy.en.md
+++ b/s2-site/docs/api/basic-class/hierarchy.en.md
@@ -1,4 +1,5 @@
 ---
 title: Hierarchy
 order: 8
+tag: New
 ---
diff --git a/s2-site/docs/api/basic-class/hierarchy.zh.md b/s2-site/docs/api/basic-class/hierarchy.zh.md
index 7d835af4dd..0a1f336670 100644
--- a/s2-site/docs/api/basic-class/hierarchy.zh.md
+++ b/s2-site/docs/api/basic-class/hierarchy.zh.md
@@ -1,6 +1,7 @@
 ---
 title: Hierarchy
 order: 8
+tag: New
 ---
 
 功能描述：节点层级结构。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/layout/hierarchy.ts)
diff --git a/s2-site/docs/api/basic-class/interaction.en.md b/s2-site/docs/api/basic-class/interaction.en.md
index 090f6b7713..546f740561 100644
--- a/s2-site/docs/api/basic-class/interaction.en.md
+++ b/s2-site/docs/api/basic-class/interaction.en.md
@@ -1,6 +1,7 @@
 ---
 title: Interaction
 order: 2
+tag: Updated
 ---
 
 Functional description: properties and methods related to the interaction class. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/interaction/root.ts)
diff --git a/s2-site/docs/api/basic-class/interaction.zh.md b/s2-site/docs/api/basic-class/interaction.zh.md
index a5d291e8a7..c0d674ee39 100644
--- a/s2-site/docs/api/basic-class/interaction.zh.md
+++ b/s2-site/docs/api/basic-class/interaction.zh.md
@@ -1,6 +1,7 @@
 ---
 title: Interaction
 order: 2
+tag: Updated
 ---
 
 功能描述：交互类相关属性和方法。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/interaction/root.ts)
diff --git a/s2-site/docs/api/components/export.en.md b/s2-site/docs/api/components/export.en.md
index 3f9668fcd0..a417d420e8 100644
--- a/s2-site/docs/api/components/export.en.md
+++ b/s2-site/docs/api/components/export.en.md
@@ -1,6 +1,7 @@
 ---
 title: Export
 order: 5
+tag: Updated
 ---
 
 ## React export components
diff --git a/s2-site/docs/api/components/export.zh.md b/s2-site/docs/api/components/export.zh.md
index cafee88e2f..4d0168814c 100644
--- a/s2-site/docs/api/components/export.zh.md
+++ b/s2-site/docs/api/components/export.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 导出
 order: 5
+tag: Updated
 ---
 
 ## React 导出组件 <Badge>@antv/s2-react</Badge>
diff --git a/s2-site/docs/api/components/header.en.md b/s2-site/docs/api/components/header.en.md
index d774772782..3e46c51344 100644
--- a/s2-site/docs/api/components/header.en.md
+++ b/s2-site/docs/api/components/header.en.md
@@ -1,6 +1,7 @@
 ---
 title: Header
 order: 4
+tag: Updated
 ---
 
 ## React header component
diff --git a/s2-site/docs/api/components/header.zh.md b/s2-site/docs/api/components/header.zh.md
index eaa4973060..7a8e695c9f 100644
--- a/s2-site/docs/api/components/header.zh.md
+++ b/s2-site/docs/api/components/header.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 表头
 order: 4
+tag: Updated
 ---
 
 ## React 表头组件 <Badge>@antv/s2-react</Badge>
diff --git a/s2-site/docs/api/general/S2Options.en.md b/s2-site/docs/api/general/S2Options.en.md
index 643fc01ef1..3cd74bc22d 100644
--- a/s2-site/docs/api/general/S2Options.en.md
+++ b/s2-site/docs/api/general/S2Options.en.md
@@ -1,6 +1,7 @@
 ---
 title: S2Options
 order: 1
+tag: Updated
 ---
 
 Form parameter configuration
diff --git a/s2-site/docs/api/general/S2Options.zh.md b/s2-site/docs/api/general/S2Options.zh.md
index f82cfb273e..005f0cb7c0 100644
--- a/s2-site/docs/api/general/S2Options.zh.md
+++ b/s2-site/docs/api/general/S2Options.zh.md
@@ -1,6 +1,7 @@
 ---
 title: S2Options
 order: 1
+tag: Updated
 ---
 
 表格参数配置
diff --git a/s2-site/docs/api/general/S2Theme.en.md b/s2-site/docs/api/general/S2Theme.en.md
index 5f94f84953..6aaa040544 100644
--- a/s2-site/docs/api/general/S2Theme.en.md
+++ b/s2-site/docs/api/general/S2Theme.en.md
@@ -1,6 +1,7 @@
 ---
 title: S2Theme
 order: 2
+tag: Updated
 ---
 
 theme configuration
diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md
index c6b05c8169..0f00148011 100644
--- a/s2-site/docs/api/general/S2Theme.zh.md
+++ b/s2-site/docs/api/general/S2Theme.zh.md
@@ -1,6 +1,7 @@
 ---
 title: S2Theme
 order: 2
+tag: Updated
 ---
 
 主题配置
diff --git a/s2-site/docs/common/env.zh.md b/s2-site/docs/common/env.zh.md
index 0d51eb3f1a..4d08e124ec 100644
--- a/s2-site/docs/common/env.zh.md
+++ b/s2-site/docs/common/env.zh.md
@@ -1,5 +1,3 @@
-兼容**现代浏览器**
-
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
 | --- |  --- | --- | --- |
 | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
diff --git a/s2-site/docs/manual/advanced/analysis/export.en.md b/s2-site/docs/manual/advanced/analysis/export.en.md
index 4f41bd3a06..001d79811a 100644
--- a/s2-site/docs/manual/advanced/analysis/export.en.md
+++ b/s2-site/docs/manual/advanced/analysis/export.en.md
@@ -1,6 +1,7 @@
 ---
 title: Export
 order: 11
+tag: Updated
 ---
 
 ## Introduction
diff --git a/s2-site/docs/manual/advanced/analysis/export.zh.md b/s2-site/docs/manual/advanced/analysis/export.zh.md
index 41b2af33da..d85ff3e72b 100644
--- a/s2-site/docs/manual/advanced/analysis/export.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/export.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 导出
 order: 11
+tag: Updated
 ---
 
 <Badge>@antv/s2</Badge> <Badge>@antv/s2-react</Badge>
diff --git a/s2-site/docs/manual/advanced/analysis/mobile-component.en.md b/s2-site/docs/manual/advanced/analysis/mobile-component.en.md
index 16b1865caa..bf815975ab 100644
--- a/s2-site/docs/manual/advanced/analysis/mobile-component.en.md
+++ b/s2-site/docs/manual/advanced/analysis/mobile-component.en.md
@@ -1,6 +1,7 @@
 ---
 title: Mobile Component
 order: 10
+tag: New
 ---
 
 In order to meet the usage scenarios of the mobile terminal, the analysis component in `s2-react` has been adapted for mobile. Help users view data more conveniently and efficiently on the mobile terminal.
diff --git a/s2-site/docs/manual/advanced/analysis/mobile-component.zh.md b/s2-site/docs/manual/advanced/analysis/mobile-component.zh.md
index d0e0512851..c52a60add0 100644
--- a/s2-site/docs/manual/advanced/analysis/mobile-component.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/mobile-component.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 移动端表格组件
 order: 10
+tag: New
 ---
 
 <Badge>@antv/s2-react</Badge>
diff --git a/s2-site/docs/manual/advanced/chart-in-cell.en.md b/s2-site/docs/manual/advanced/chart-in-cell.en.md
index 5125bf42c9..1c63ada296 100644
--- a/s2-site/docs/manual/advanced/chart-in-cell.en.md
+++ b/s2-site/docs/manual/advanced/chart-in-cell.en.md
@@ -1,4 +1,5 @@
 ---
 title: Render G2 Charts
 order: 11
+tag: New
 ---
diff --git a/s2-site/docs/manual/advanced/chart-in-cell.zh.md b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
index d22d2ec85a..f1c732853a 100644
--- a/s2-site/docs/manual/advanced/chart-in-cell.zh.md
+++ b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 单元格内绘制图表
 order: 11
+tag: New
 ---
 
 如果纯文本的表格不够直观，S2 支持 [自定义单元格](/examples#custom-custom-cell)，也内置了 [简单的 mini 图绘制](/examples/custom/custom-cell/#mini-chart)
diff --git a/s2-site/docs/manual/advanced/custom/cell-size.en.md b/s2-site/docs/manual/advanced/custom/cell-size.en.md
index 21f75cd990..41fdf07e00 100644
--- a/s2-site/docs/manual/advanced/custom/cell-size.en.md
+++ b/s2-site/docs/manual/advanced/custom/cell-size.en.md
@@ -1,6 +1,7 @@
 ---
 title: Customize Cell Size
 order: 5
+tag: Updated
 ---
 
 S2 can manually drag and drop to dynamically change the width and height of cells. At the same time, there are three built-in layouts: row and column`行列等宽`,`列等宽`and`行列紧凑布局`layout ( [see examples](/examples/layout/basic/#compact) )
diff --git a/s2-site/docs/manual/advanced/custom/cell-size.zh.md b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
index b87326f916..aeec05c671 100644
--- a/s2-site/docs/manual/advanced/custom/cell-size.zh.md
+++ b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 自定义单元格宽高
 order: 5
+tag: Updated
 ---
 
 S2 可以手动拖拽动态改变单元格的宽高，同时内置了 `行列等宽`, `列等宽` 和 `行列紧凑布局` 三种布局 ([查看例子](/examples/layout/basic/#compact))
diff --git a/s2-site/docs/manual/advanced/custom/custom-header.en.md b/s2-site/docs/manual/advanced/custom/custom-header.en.md
index 96a30a1a7c..9c3251f5bf 100644
--- a/s2-site/docs/manual/advanced/custom/custom-header.en.md
+++ b/s2-site/docs/manual/advanced/custom/custom-header.en.md
@@ -1,6 +1,7 @@
 ---
 title: Customize Tree
 order: 2
+tag: New
 ---
 
 By default, `S2` provides two **row header** layout modes [: tile mode (grid)](https://s2.antv.vision/zh/examples/basic/pivot#grid) and [tree mode (tree)](https://s2.antv.vision/zh/examples/basic/pivot#tree) .
diff --git a/s2-site/docs/manual/advanced/custom/custom-header.zh.md b/s2-site/docs/manual/advanced/custom/custom-header.zh.md
index eca931fe61..f498226521 100644
--- a/s2-site/docs/manual/advanced/custom/custom-header.zh.md
+++ b/s2-site/docs/manual/advanced/custom/custom-header.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 自定义行列头
 order: 2
+tag: New
 ---
 
 `S2` 默认提供 [平铺模式 (grid)](https://s2.antv.vision/zh/examples/basic/pivot#grid) 和 [树状模式 (tree)](https://s2.antv.vision/zh/examples/basic/pivot#tree) 两种**行头**单元格布局方式。
diff --git a/s2-site/docs/manual/advanced/custom/custom-tree.en.md b/s2-site/docs/manual/advanced/custom/custom-tree.en.md
index 2e2f7b5666..9a1327bf19 100644
--- a/s2-site/docs/manual/advanced/custom/custom-tree.en.md
+++ b/s2-site/docs/manual/advanced/custom/custom-tree.en.md
@@ -1,6 +1,7 @@
 ---
 title: Customize Category Tree
 order: 2
+tag: New
 ---
 
 By default, `S2` provides two row header layout modes [: tile mode (grid)](/examples/basic/pivot#grid) and [tree mode (tree)](/examples/basic/pivot#tree) .
diff --git a/s2-site/docs/manual/advanced/custom/custom-tree.zh.md b/s2-site/docs/manual/advanced/custom/custom-tree.zh.md
index 450d2d041b..997213839d 100644
--- a/s2-site/docs/manual/advanced/custom/custom-tree.zh.md
+++ b/s2-site/docs/manual/advanced/custom/custom-tree.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 自定义目录树
 order: 2
+tag: New
 ---
 
 `S2` 默认提供 [平铺模式 (grid)](/examples/basic/pivot#grid) 和 [树状模式 (tree)](/examples/basic/pivot#tree) 两种行头布局方式
diff --git a/s2-site/docs/manual/advanced/custom/hook.en.md b/s2-site/docs/manual/advanced/custom/hook.en.md
index 4687059875..3143695f68 100644
--- a/s2-site/docs/manual/advanced/custom/hook.en.md
+++ b/s2-site/docs/manual/advanced/custom/hook.en.md
@@ -1,6 +1,7 @@
 ---
 title: Customize Hook
 order: 1
+tag: Updated
 ---
 
 Custom `Hook` allows developers to rewrite all elements of the table, and you can customize certain elements according to product needs, such as corner headers, column headers, row headers, cells, row header order, cell position, etc. If necessary, you can completely rewrite a pivot table that belongs to you!
diff --git a/s2-site/docs/manual/advanced/custom/hook.zh.md b/s2-site/docs/manual/advanced/custom/hook.zh.md
index 1dbff2db3b..9021e05975 100644
--- a/s2-site/docs/manual/advanced/custom/hook.zh.md
+++ b/s2-site/docs/manual/advanced/custom/hook.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 自定义 Hook
 order: 1
+tag: Updated
 ---
 
 自定义 `Hook` 允许开发者重写表格的所有元素，你可以根据产品需要对某些元素进行自定义，比如角头、列头、行头、单元格、行头顺序、单元格位置等。如果需要，完全可以重写一个属于你的透视表！
diff --git a/s2-site/docs/manual/advanced/g-plugins.en.md b/s2-site/docs/manual/advanced/g-plugins.en.md
index 0805ab9030..f9e2c82c4e 100644
--- a/s2-site/docs/manual/advanced/g-plugins.en.md
+++ b/s2-site/docs/manual/advanced/g-plugins.en.md
@@ -1,4 +1,5 @@
 ---
 title: AntV/G Plugins
 order: 10
+tag: New
 ---
diff --git a/s2-site/docs/manual/advanced/g-plugins.zh.md b/s2-site/docs/manual/advanced/g-plugins.zh.md
index 053bfc4f40..fa2fd285b4 100644
--- a/s2-site/docs/manual/advanced/g-plugins.zh.md
+++ b/s2-site/docs/manual/advanced/g-plugins.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 注册 AntV/G 插件
 order: 10
+tag: New
 ---
 
 :::warning{title='提示'}
diff --git a/s2-site/docs/manual/advanced/get-cell-data.en.md b/s2-site/docs/manual/advanced/get-cell-data.en.md
index 8810a9b1bf..fac970ad37 100644
--- a/s2-site/docs/manual/advanced/get-cell-data.en.md
+++ b/s2-site/docs/manual/advanced/get-cell-data.en.md
@@ -1,6 +1,7 @@
 ---
 title: Get Cell Data
 order: 9
+tag: Updated
 ---
 
 > **Before reading this chapter, please make sure you have read the basic tutorial, data flow processing, layout and other chapters**
diff --git a/s2-site/docs/manual/advanced/get-cell-data.zh.md b/s2-site/docs/manual/advanced/get-cell-data.zh.md
index 2eac596dc5..db059871bc 100644
--- a/s2-site/docs/manual/advanced/get-cell-data.zh.md
+++ b/s2-site/docs/manual/advanced/get-cell-data.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 获取单元格数据
 order: 9
+tag: Updated
 ---
 
 :::warning{title='提示'}
diff --git a/s2-site/docs/manual/advanced/interaction/copy.en.md b/s2-site/docs/manual/advanced/interaction/copy.en.md
index 0af7b708f2..45dcb24675 100644
--- a/s2-site/docs/manual/advanced/interaction/copy.en.md
+++ b/s2-site/docs/manual/advanced/interaction/copy.en.md
@@ -1,4 +1,5 @@
 ---
 title: Copy
 order: 7
+tag: New
 ---
diff --git a/s2-site/docs/manual/advanced/interaction/copy.zh.md b/s2-site/docs/manual/advanced/interaction/copy.zh.md
index 0dd77c37ee..08240fc3c4 100644
--- a/s2-site/docs/manual/advanced/interaction/copy.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/copy.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 复制与导出
 order: 7
+tag: New
 ---
 
 <embed src="@/docs/common/copy-export.zh.md"></embed>
diff --git a/s2-site/docs/manual/advanced/performance.en.md b/s2-site/docs/manual/advanced/performance.en.md
index 900fc0fa7d..60ee05c455 100644
--- a/s2-site/docs/manual/advanced/performance.en.md
+++ b/s2-site/docs/manual/advanced/performance.en.md
@@ -1,6 +1,7 @@
 ---
 title: Performance
 order: 6
+tag: Updated
 ---
 
 ## introduce
diff --git a/s2-site/docs/manual/advanced/performance.zh.md b/s2-site/docs/manual/advanced/performance.zh.md
index bed279101c..55ada9a42d 100644
--- a/s2-site/docs/manual/advanced/performance.zh.md
+++ b/s2-site/docs/manual/advanced/performance.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 性能介绍
 order: 6
+tag: Updated
 ---
 
 ## 介绍
diff --git a/s2-site/docs/manual/basic/base-concept.zh.md b/s2-site/docs/manual/basic/base-concept.zh.md
index 4f245f4594..d6f6d39d46 100644
--- a/s2-site/docs/manual/basic/base-concept.zh.md
+++ b/s2-site/docs/manual/basic/base-concept.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 基本概念
 order: 0
+tag: Updated
 ---
 本文介绍透视表的基本概念。
 
diff --git a/s2-site/docs/manual/basic/conditions.en.md b/s2-site/docs/manual/basic/conditions.en.md
index 2f1f2c5b41..ef9cb0da83 100644
--- a/s2-site/docs/manual/basic/conditions.en.md
+++ b/s2-site/docs/manual/basic/conditions.en.md
@@ -1,6 +1,7 @@
 ---
 title: Conditions
 order: 4
+tag: Updated
 ---
 
 S2 comes with field tagging feature. Users can set different rendering logics based on business semantics to mark and analyze key data. Field tag types include:
diff --git a/s2-site/docs/manual/basic/conditions.zh.md b/s2-site/docs/manual/basic/conditions.zh.md
index e15e8a77cf..2c3f65dc40 100644
--- a/s2-site/docs/manual/basic/conditions.zh.md
+++ b/s2-site/docs/manual/basic/conditions.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 字段标记
 order: 4
+tag: Updated
 ---
 
 S2 自带字段标记特性。用户可以根据业务语义设置不同的渲染逻辑，实现重点数据的标记和分析。字段标记类型包括：
diff --git a/s2-site/docs/manual/basic/formatter.en.md b/s2-site/docs/manual/basic/formatter.en.md
index e43c39d569..abe9d9d96a 100644
--- a/s2-site/docs/manual/basic/formatter.en.md
+++ b/s2-site/docs/manual/basic/formatter.en.md
@@ -1,4 +1,5 @@
 ---
 title: 数据格式化
 order: 9
+tag: New
 ---
diff --git a/s2-site/docs/manual/basic/formatter.zh.md b/s2-site/docs/manual/basic/formatter.zh.md
index e05a646eb7..fc759ced9c 100644
--- a/s2-site/docs/manual/basic/formatter.zh.md
+++ b/s2-site/docs/manual/basic/formatter.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 数据格式化
 order: 9
+tag: New
 ---
 
 `s2DataConfig` 支持配置 `meta` 对数据进行格式化
diff --git a/s2-site/docs/manual/basic/multi-line-text.en.md b/s2-site/docs/manual/basic/multi-line-text.en.md
index b61a74f04b..d51987f0f9 100644
--- a/s2-site/docs/manual/basic/multi-line-text.en.md
+++ b/s2-site/docs/manual/basic/multi-line-text.en.md
@@ -1,4 +1,5 @@
 ---
 title: Multi Line
 order: 10
+tag: New
 ---
diff --git a/s2-site/docs/manual/basic/multi-line-text.zh.md b/s2-site/docs/manual/basic/multi-line-text.zh.md
index f48ececce5..1ed12e6f18 100644
--- a/s2-site/docs/manual/basic/multi-line-text.zh.md
+++ b/s2-site/docs/manual/basic/multi-line-text.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 多行文本
 order: 10
+tag: New
 ---
 
 :::warning{title="注意"}
diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.en.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.en.md
index 3fbeb385b4..8b27fcb960 100644
--- a/s2-site/docs/manual/basic/sheet-type/pivot-mode.en.md
+++ b/s2-site/docs/manual/basic/sheet-type/pivot-mode.en.md
@@ -1,6 +1,7 @@
 ---
 title: Pivot Mode
 order: 1
+tag: Updated
 ---
 
 ## Introduction
diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
index 2e269159c9..451c6c0512 100644
--- a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 透视表
 order: 1
+tag: Updated
 ---
 ## 简介
 
diff --git a/s2-site/docs/manual/basic/sort/advanced.en.md b/s2-site/docs/manual/basic/sort/advanced.en.md
index 91e390554b..1077ca3a70 100644
--- a/s2-site/docs/manual/basic/sort/advanced.en.md
+++ b/s2-site/docs/manual/basic/sort/advanced.en.md
@@ -1,6 +1,7 @@
 ---
 title: Advanced Sort
 order: 1
+tag: Updated
 ---
 
 The `React` version provides an advanced sorting component, optionally available. [view example](/examples/analysis/sort#advanced)
diff --git a/s2-site/docs/manual/basic/sort/advanced.zh.md b/s2-site/docs/manual/basic/sort/advanced.zh.md
index 8013b98a0e..eb9ed3ddf2 100644
--- a/s2-site/docs/manual/basic/sort/advanced.zh.md
+++ b/s2-site/docs/manual/basic/sort/advanced.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 高级排序
 order: 1
+tag: Updated
 ---
 
 `React` 版本提供高级排序组件，可选择使用。[查看示例](/examples/analysis/sort#advanced)
diff --git a/s2-site/docs/manual/basic/sort/basic.en.md b/s2-site/docs/manual/basic/sort/basic.en.md
index f1b0d21604..a52251d909 100644
--- a/s2-site/docs/manual/basic/sort/basic.en.md
+++ b/s2-site/docs/manual/basic/sort/basic.en.md
@@ -1,6 +1,7 @@
 ---
 title: Group Sort
 order: 0
+tag: Updated
 ---
 
 ## Introduction
diff --git a/s2-site/docs/manual/basic/sort/basic.zh.md b/s2-site/docs/manual/basic/sort/basic.zh.md
index ed0ca2de39..e6bb5b1ccb 100644
--- a/s2-site/docs/manual/basic/sort/basic.zh.md
+++ b/s2-site/docs/manual/basic/sort/basic.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 组内排序
 order: 0
+tag: Updated
 ---
 
 ## 简介
diff --git a/s2-site/docs/manual/basic/sort/custom.en.md b/s2-site/docs/manual/basic/sort/custom.en.md
index 3b5156ce3e..b7b140cd42 100644
--- a/s2-site/docs/manual/basic/sort/custom.en.md
+++ b/s2-site/docs/manual/basic/sort/custom.en.md
@@ -1,6 +1,7 @@
 ---
 title: Custom Sort
 order: 2
+tag: Updated
 ---
 
 ## Introduction
diff --git a/s2-site/docs/manual/basic/sort/custom.zh.md b/s2-site/docs/manual/basic/sort/custom.zh.md
index 2744340eb7..9b067a2770 100644
--- a/s2-site/docs/manual/basic/sort/custom.zh.md
+++ b/s2-site/docs/manual/basic/sort/custom.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 自定义排序
 order: 2
+tag: Updated
 ---
 
 ## 简介
diff --git a/s2-site/docs/manual/basic/theme.en.md b/s2-site/docs/manual/basic/theme.en.md
index d2846ec938..eae168174a 100644
--- a/s2-site/docs/manual/basic/theme.en.md
+++ b/s2-site/docs/manual/basic/theme.en.md
@@ -1,6 +1,7 @@
 ---
 title: Theme
 order: 6
+tag: Updated
 ---
 
 ## Introduction
diff --git a/s2-site/docs/manual/basic/theme.zh.md b/s2-site/docs/manual/basic/theme.zh.md
index a5c5cbf4d7..ea9aea5de9 100644
--- a/s2-site/docs/manual/basic/theme.zh.md
+++ b/s2-site/docs/manual/basic/theme.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 主题配置
 order: 6
+tag: Updated
 ---
 
 ## 简介
diff --git a/s2-site/docs/manual/basic/tooltip.en.md b/s2-site/docs/manual/basic/tooltip.en.md
index 53ab3942c4..337c2d4662 100644
--- a/s2-site/docs/manual/basic/tooltip.en.md
+++ b/s2-site/docs/manual/basic/tooltip.en.md
@@ -1,6 +1,7 @@
 ---
 title: Tooltip
 order: 7
+tag: Updated
 ---
 
 ## Introduction
diff --git a/s2-site/docs/manual/basic/tooltip.zh.md b/s2-site/docs/manual/basic/tooltip.zh.md
index 7e3042f7d4..10454748d5 100644
--- a/s2-site/docs/manual/basic/tooltip.zh.md
+++ b/s2-site/docs/manual/basic/tooltip.zh.md
@@ -1,6 +1,7 @@
 ---
 title: Tooltip
 order: 7
+tag: Updated
 ---
 
 ## 简介
diff --git a/s2-site/docs/manual/contribution.en.md b/s2-site/docs/manual/contribution.en.md
index 443c9953d1..38eb1ab619 100644
--- a/s2-site/docs/manual/contribution.en.md
+++ b/s2-site/docs/manual/contribution.en.md
@@ -1,6 +1,7 @@
 ---
 title: Contribution
 order: 7
+tag: Updated
 ---
 
 If you happen to see this article, you must want to contribute to this project
diff --git a/s2-site/docs/manual/contribution.zh.md b/s2-site/docs/manual/contribution.zh.md
index 6c7e316737..23fd62c16e 100644
--- a/s2-site/docs/manual/contribution.zh.md
+++ b/s2-site/docs/manual/contribution.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 贡献指南
 order: 7
+tag: Updated
 ---
 
 如果你恰好看到了这篇文章，你一定是希望对这个项目贡献自己的一份力量。
diff --git a/s2-site/docs/manual/getting-started.en.md b/s2-site/docs/manual/getting-started.en.md
index 0b15684100..0294702f36 100644
--- a/s2-site/docs/manual/getting-started.en.md
+++ b/s2-site/docs/manual/getting-started.en.md
@@ -1,6 +1,7 @@
 ---
 title: Quick Start
 order: 1
+tag: Updated
 ---
 
 ## 📦 install
diff --git a/s2-site/docs/manual/getting-started.zh.md b/s2-site/docs/manual/getting-started.zh.md
index a65cc926e7..fd568c5f6d 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -1,30 +1,32 @@
 ---
 title: 快速上手
 order: 1
+tag: Updated
 ---
+
 ## 📦 安装
 
 ### 使用 npm 或 yarn 或 pnpm 安装
 
 ```bash
 # pnpm
-$ pnpm add @antv/s2 --save
+$ pnpm add @antv/s2@next --save
 
 # npm
-$ npm install @antv/s2 --save
+$ npm install @antv/s2@next --save
 
 # yarn
-$ yarn add @antv/s2 --save
+$ yarn add @antv/s2@next --save
 ```
 
 ### 使用 React 或 Vue3 版本
 
 ```bash
 # React
-$ pnpm add @antv/s2 @antv/s2-react --save
+$ pnpm add @antv/s2@next @antv/s2-react@next --save
 
 # Vue3
-$ pnpm add @antv/s2 @antv/s2-vue --save
+$ pnpm add @antv/s2@next @antv/s2-vue@next --save
 
 ```
 
diff --git a/s2-site/docs/manual/introduction.zh.md b/s2-site/docs/manual/introduction.zh.md
index d68c3f218e..8acf4a05ea 100644
--- a/s2-site/docs/manual/introduction.zh.md
+++ b/s2-site/docs/manual/introduction.zh.md
@@ -71,9 +71,9 @@ redirect_from:
 ## 📦 安装
 
 ```bash
-pnpm add @antv/s2 --save
-# npm install @antv/s2 --save
-# yarn add @antv/s2 --save
+pnpm add @antv/s2@next --save
+# npm install @antv/s2@next --save
+# yarn add @antv/s2@next --save
 ```
 
 ## 🔨 使用
diff --git a/s2-site/docs/manual/migration-v2.en.md b/s2-site/docs/manual/migration-v2.en.md
index 7a271afa2b..856f67697f 100644
--- a/s2-site/docs/manual/migration-v2.en.md
+++ b/s2-site/docs/manual/migration-v2.en.md
@@ -1,8 +1,5 @@
 ---
 title: S2 2.0 升级指南
 order: 9
+tag: New
 ---
-
-:::warning{title="一些建议"}
-**在提出问题前，请确保你已经仔细阅读了一遍文档，查看了相关图表示例，并且已经查看了常见问题。**
-:::
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index aa17843a3b..29d2f71416 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -1,16 +1,11 @@
 ---
 title: S2 2.0 升级指南
 order: 9
+tag: New
 ---
 
 本文档将帮助你从 S2 `1.x` 版本升级到 S2 `2.x` 版本。
 
-:::warning{title="注意"}
-
-S2 2.0 版本目前处于**内测阶段**, 部分 API 可能会随时改动。
-
-:::
-
 ## 官网地址变化
 
 :::warning{title="注意"}
@@ -20,10 +15,33 @@ S2 2.0 版本目前处于**内测阶段**, 部分 API 可能会随时改动。
 - 原 `v1` 官网迁移至 <https://s2-v1.antv.antgroup.com>.
 - 原 <https://s2.antv.antgroup.com> 将作为 `v2` 默认官网。
 
+## npm dist-tag 变化
+
+> 什么是 [dist-tag](https://docs.npmjs.com/adding-dist-tags-to-packages/) ?
+
+:::warning{title="注意"}
+
+`S2 2.0` 版本目前处于**内测阶段**, 部分 API 可能会随时改动。
+
+`npm` 的 [`dist-tag`](https://docs.npmjs.com/cli/v10/commands/npm-dist-tag) 对应关系如下：
+
+- `@antv/s2@next` 对应 `2.x` 版本
+- `@antv/s2@latest` 对应 `1.x` 版本
+
+在 `@antv/s2@next` 版本稳定后，`latest` 将默认指向 `2.x` 版本。
+
+:::
+
 ## 不兼容的变化
 
 TODO:
 
+### 底层渲染引擎升级为 `AntV/G` 5.0
+
+TODO:
+
+### xxx
+
 ## API 调整
 
 TODO:
diff --git a/s2-site/package.json b/s2-site/package.json
index 103c1c816b..987a9b287d 100644
--- a/s2-site/package.json
+++ b/s2-site/package.json
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@antv/dumi-theme-antv": "^0.4.5",
+    "@antv/dumi-theme-antv": "^0.4.6",
     "@antv/g": "^5.18.23",
     "@antv/g-canvas": "^1.11.25",
     "@antv/g-plugin-a11y": "^0.6.20",

From 903746672b947f316aa007d6742245d08678ece5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=AB=E5=90=9B?= <chuxiao.lcx@antgroup.com>
Date: Tue, 9 Jan 2024 17:43:26 +0800
Subject: [PATCH 18/64] =?UTF-8?q?fix:=20=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../analysis/sort/demo/custom-sort-func.ts      | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/s2-site/examples/analysis/sort/demo/custom-sort-func.ts b/s2-site/examples/analysis/sort/demo/custom-sort-func.ts
index 86a5fc8610..cce94b2198 100644
--- a/s2-site/examples/analysis/sort/demo/custom-sort-func.ts
+++ b/s2-site/examples/analysis/sort/demo/custom-sort-func.ts
@@ -35,12 +35,10 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       data,
       sortParams: [
         {
-          // sortFieldId 为维度值时，params.data 为维度值列表
+          // sortFieldId 为维度值时，params.data 为维度值列表，即 浙江、吉林
           sortFieldId: 'province',
           sortFunc: (params) => {
-            const { data } = params;
-
-            return data?.sort((a, b) => a?.localeCompare(b));
+            return params.data.sort((a, b) => a.localeCompare(b));
           },
         },
         {
@@ -48,15 +46,16 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
           sortFieldId: 'city',
           sortByMeasure: 'price',
           // 当使用 sortByMeasure 时，可以传入 query 定位数值列表
-          // 如下方限定 params.data 为 type=纸张, 数值=price 的数据
+          // 如此 params.data 被限定为了 type=纸张, 数值=price 的数据
+          query: { type: '纸张', [EXTRA_FIELD]: 'price' },
           sortFunc(params) {
-            const { data, sortByMeasure, sortFieldId } = params || {};
+            const { data, sortByMeasure, sortFieldId } = params;
 
             return data
-              ?.sort((a, b) => b[sortByMeasure] - a[sortByMeasure])
-              ?.map((item) => item[sortFieldId]);
+              .map((item) => item.raw)
+              .sort((a, b) => b[sortByMeasure] - a[sortByMeasure]) // price 倒序
+              .map((item) => item[sortFieldId]);
           },
-          query: { type: '纸张', [EXTRA_FIELD]: 'price' },
         },
       ],
     };

From 99999934b7805ffe85b2dca65ef6cc4b0b2fca39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=AB=E5=90=9B?= <chuxiao.lcx@antgroup.com>
Date: Mon, 15 Jan 2024 16:58:23 +0800
Subject: [PATCH 19/64] =?UTF-8?q?feat(docs):=20=E6=9B=B4=E6=96=B0=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/.dumirc.ts                          |   2 +-
 s2-site/docs/common/sort-param.zh.md        |   4 +-
 s2-site/docs/manual/basic/sort/basic.en.md  | 307 ++++++++++++++++++-
 s2-site/docs/manual/basic/sort/basic.zh.md  | 233 ++++++++++++++-
 s2-site/docs/manual/basic/sort/custom.en.md | 312 -------------------
 s2-site/docs/manual/basic/sort/custom.zh.md | 314 --------------------
 s2-site/docs/manual/basic/sort/group.en.md  |  27 ++
 s2-site/docs/manual/basic/sort/group.zh.md  |  27 ++
 8 files changed, 575 insertions(+), 651 deletions(-)
 delete mode 100644 s2-site/docs/manual/basic/sort/custom.en.md
 delete mode 100644 s2-site/docs/manual/basic/sort/custom.zh.md
 create mode 100644 s2-site/docs/manual/basic/sort/group.en.md
 create mode 100644 s2-site/docs/manual/basic/sort/group.zh.md

diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 14bdc4dca1..fb0b95d62b 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -301,7 +301,7 @@ export default defineConfig({
           zh: '查看升级指南',
           en: 'Upgrade Guide',
         },
-        url: 'https://s2.antv.antgroup.com/manual/migration-v2',
+        url: '/manual/migration-v2',
       },
     },
     /** 首页技术栈介绍 */
diff --git a/s2-site/docs/common/sort-param.zh.md b/s2-site/docs/common/sort-param.zh.md
index 0acd59d8bc..18b6b46d48 100644
--- a/s2-site/docs/common/sort-param.zh.md
+++ b/s2-site/docs/common/sort-param.zh.md
@@ -1,9 +1,9 @@
 ---
-title: SortParam
+title: SortParams
 order: 7
 ---
 
-### SortParam
+### SortParams
 
 功能描述：排序配置
 
diff --git a/s2-site/docs/manual/basic/sort/basic.en.md b/s2-site/docs/manual/basic/sort/basic.en.md
index a52251d909..30eae284a0 100644
--- a/s2-site/docs/manual/basic/sort/basic.en.md
+++ b/s2-site/docs/manual/basic/sort/basic.en.md
@@ -1,27 +1,312 @@
 ---
-title: Group Sort
+title: Custom Sort
 order: 0
 tag: Updated
 ---
 
 ## Introduction
 
-Sort`行头/列头`according to`数值升/降序`order. [See more sorting examples](https://s2.antv.antgroup.com/examples#category-sort)
+Customize the sorting of table data rows, support row header/column header sorting, single row/column sorting, custom lists, functions and other functions. [Check out the examples](/examples/analysis/sort#custom-sort-func) .
 
-`组内排序`a group means that it only affects the sorting within a group. For example, when`笔-价格`selects`组内升序`the figure below, the sorting method of`省份`will not change, only the order of`城市`within each`省份`will be changed.
+## use
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*SszqS7EGaXkAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
+Driven by passing [sortParams](/docs/api/general/S2DataConfig#SortParams) data in [s2DataConfig](/docs/api/general/S2DataConfig)
 
-There is only a single state for`行头/列头`, and the current state will overwrite the previous state. As shown in the figure above, when the`笔`is sorted, the sorting state of the`纸张`disappears, and`行头+列头`can have their own status at the same time.
+### sortParam
 
-## use
+| parameter     | illustrate                                                                     | type                                  | Defaults | required |
+| ------------- | ------------------------------------------------------------------------------ | ------------------------------------- | -------- | -------- |
+| sortFieldId   | Measure Id, the Id to be sorted                                                | `string`                              | -        | ✓        |
+| sortMethod    | sort by                                                                        | `ASC` \| `DESC` \| `asc` \| `desc`    | -        |          |
+| sortBy        | custom sorted list                                                             | `string[]`                            | -        |          |
+| sortByMeasure | Sort by metric value (numeric value) (for pivot tables)                        | `string`                              | -        |          |
+| query         | Filter criteria, narrow the sorting range such as: `{ city: '成都' }`            | `object`                              | -        |          |
+| type          | Sorting within the group is used to display icons (applicable to pivot tables) | `string`                              | -        |          |
+| sortFunc      | Function for custom sorting                                                    | `(v: SortFuncParam) => Array<string>` | -        |          |
+
+```ts
+import { EXTRA_FIELD } from "@antv/s2";
+
+const s2DataConfig = {
+  sortParams: [
+    {
+      sortFieldId: 'type',
+      sortMethod: 'DESC',
+      // EXTRA_FIELD 是 dataCfg.fields.values 字段的虚拟 fieldId
+      query: { city: '成都', [EXTRA_FIELD]: 'price' },
+    },
+  ],
+  ...
+};
+```
+
+## Way
+
+### 1. Ascending/descending method (sortMethod)
+
+Row/column header dimensions are supported, and the ascending and descending order **is based on the first letter** . Examples are as follows:
+
+```ts
+sortParams: [
+  { sortFieldId: 'province', sortMethod: 'DESC' },
+  { sortFieldId: 'type', sortMethod: 'ASC' },
+]
+```
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DlG8SYEFlS8AAAAAAAAAAAAAARQnAQ" width="600" alt="row">
+
+### 2. List of dimension values ​​(sortBy)
+
+Supports setting the corresponding list in the table for the`行/列头`. If there is nesting, the sub-dimensions will be sorted within the group (as shown in `city` ), for example:
+
+```ts
+sortParams: [
+  { sortFieldId: 'province', sortBy: [ '吉林', '浙江' ] },
+  { sortFieldId: 'city', sortBy: [ '舟山', '杭州', '白山', '长春' ] },
+  { sortFieldId: 'type', sortBy: [ '纸张', '笔' ] },
+];
+```
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*5A9lSpS6uHwAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
+
+### 3. Measure field (sortByMeasure)
+
+Support`行头/列头`sorting based on metric (numeric) data
+
+#### row/column
+
+Supports sorting by`行或列`, examples are as follows:
+
+```ts
+const s2DataConfig = {
+  sortParams: [
+    {
+      // type 依据 浙江-舟山-price 升序 排序
+      sortFieldId: 'type',
+      sortMethod: 'ASC',
+      sortByMeasure: 'price',
+      query: {
+        province: '浙江',
+        city: '舟山',
+        [EXTRA_FIELD]: 'price',
+      },
+    },
+  ]
+}
+```
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*SZ04TIhCQwkAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
+
+#### row+column
+
+Supports sorting by`行+列`, examples are as follows:
+
+```ts
+const s2DataConfig = {
+  sortParams: [
+    {
+      // type 依据（ 浙江 - 舟山 ）&（ price ） 升序 排序
+      sortFieldId: 'type',
+      sortMethod: 'ASC',
+      sortByMeasure: 'price',
+      query: {
+        province: '浙江',
+        city: '舟山',
+        [EXTRA_FIELD]: 'price',
+      },
+    },
+  ]
+}
+```
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*wZ4fQJ5-AsMAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
+
+### 4. Summary value
+
+The non-leaf node of the`行/列头`. At this time, `sortByMeasure` is the summary virtual field TOTAL\_VALUE, and the value is `$$total$$` .
+
+#### Configure Data Aggregation Mode
+
+1. Use aggregated data from data.
+2. Use aggregate calculations available in S2. ​📊 View document [subtotal total configuration](/docs/api/general/S2Options#totals)
+
+#### Row Total/Row Subtotal
+
+Sort column headers by`行总计/行小计`, examples are as follows:
 
-The component `SheetComponent` that uses `s2-react` displays the `icon` in the value head by default, click to select, there are three ways of`升序、降序、不排序`, and the display can be configured in `options` , as follows:
+**Row subtotal** :
 
 ```ts
+import { TOTAL_VALUE, EXTRA_FIELD } from "@antv/s2";
+
+const s2DataConfig = {
+  sortParams: [
+    {
+      // type 依据 （ 浙江 - 小计 ）&（ price ）& 降序 排序
+      sortFieldId: 'type',
+      sortMethod: 'DESC',
+      sortByMeasure: TOTAL_VALUE,
+      query: {
+        province: '浙江',
+        [EXTRA_FIELD]: 'price',
+      },
+    },
+  ];
+}
+
+// 使用前端总计的聚合方法进行排序。如果 data 数据中存在聚合数据则使用
 const s2Options = {
-  width: 600,
-  height: 600,
-  showDefaultHeaderActionIcon: true, // 默认为打开，可设置为 false 关闭
-};
+  totals: {
+    row: {
+      subTotalsDimensions: [ 'province' ],
+      calcSubTotals: {
+        aggregation: 'SUM'
+      }
+    }
+  }
+}
+```
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*RfN8Q5IauP8AAAAAAAAAAAAAARQnAQ" width="600" alt="row">
+
+row totals:
+
+```ts
+import { TOTAL_VALUE, EXTRA_FIELD } from "@antv/s2";
+
+const s2DataConfig = {
+  sortParams: [
+    {
+      // 对 type 中笔和纸的总计进行 降序 排序
+      sortFieldId: 'type',
+      sortMethod: 'DESC',
+      sortByMeasure: TOTAL_VALUE,
+      query: {
+        [EXTRA_FIELD]: 'price',
+      },
+    },
+  ],
+  // data 中带有排序使用的数据时，S2 会优先使用 data 返回的数据进行排序
+  data:[
+    {
+      type: "笔",
+      price: "38"
+    },
+    {
+      type: "纸张",
+      price: "36"
+    }
+  ]
+}
+```
+
+<img src="https://gw.alipayobjects.com/zos/antfincdn/%26pwbU6StZ/img.png" width="600" alt="rowTotal">
+
+#### Column Total/Column Subtotal
+
+Sort row headers by`列总计/列小计`, examples are as follows:
+
+```ts
+import { TOTAL_VALUE, EXTRA_FIELD } from "@antv/s2";
+
+const s2DataConfig = {
+  sortParams: [
+    {
+      // province 依据（ province - 小计 ）&（ 总计 - price ）& 升序 排序
+      sortFieldId: 'province',
+      sortMethod: 'ASC',
+      sortByMeasure: TOTAL_VALUE,
+      query: {
+        [EXTRA_FIELD]: 'price',
+      },
+    }
+  ]
+}
+
+const s2Options = {
+  totals: {
+    row: {
+      subTotalsDimensions: ['province'],
+      calcSubTotals: {
+        aggregation: 'SUM',
+      },
+    }
+  }
+}
 ```
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ZXBjR6fZFpQAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
+
+When there is a subtotal in the`列小计`, add the corresponding parameter in the `query` to get the corresponding cell, same`行小计`above
+
+### 5. Custom method (sortFunc)
+
+`sortFunc` will return `SortFuncParam` parameter according to the current conditions, and supports two ways of`维度值`and`度量值`
+
+| parameter     | illustrate                                                    | type                               | Defaults                | required |
+| ------------- | ------------------------------------------------------------- | ---------------------------------- | ----------------------- | -------- |
+| sortFieldId   | Measure Id, the Id to be sorted                               | `string`                           | -                       | ✓        |
+| sortMethod    | sort by                                                       | `ASC` \| `DESC` \| `asc` \| `desc` | -                       |          |
+| sortBy        | custom sorted list                                            | `string[]`                         | -                       |          |
+| sortByMeasure | Sort by metric value (numeric value)                          | `string`                           | -                       |          |
+| query         | Filter criteria, narrow the sort range such as: `{city:'白山'}` | `object`                           | -                       |          |
+| type          | Sorting within the group is used to display the icon          | `string`                           | -                       |          |
+| data          | List of currently sorted data                                 | \`Array\<string                    | Record\<string, any>>\` | -        |
+
+#### Dimension value (row/column header)
+
+Support dimension value customization, that is, row header or column header, examples are as follows:
+
+```ts
+const s2DataConfig = {
+  sortParams: [
+    {
+      // sortFieldId 为维度值时，params.data 为维度值列表
+      sortFieldId: 'province',
+      sortFunc: (params) => {
+          const { data } = params;
+          return data.sort((a, b) => a.localeCompare(b));
+      },
+    },
+  ]
+}
+```
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*7MLkQLxhliAAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
+
+#### measure (numeric)
+
+Supports custom calculations using metrics, for example:
+
+```ts
+
+const s2DataConfig = {
+  sortParams: [
+    {
+      sortFieldId: 'city',
+      sortByMeasure: 'price',
+      // 当使用 sortByMeasure 时，可以传入 query 定位数值列表
+      // 如下方限定 params.data 为 type=纸张，数值=price 的数据
+      query: { type: '纸张', [EXTRA_FIELD]: 'price' },
+      sortFunc: (params) => {
+        const { data, sortByMeasure, sortFieldId } = params || {};
+        return data
+          // 使用 price 做比较
+          ?.sort((a, b) => b[sortByMeasure] - a[sortByMeasure])
+          // map 出 city 维度的数组
+          ?.map((item) => item[sortFieldId]);
+      },
+    },
+  ]
+}
+```
+
+<img src="https://gw.alipayobjects.com/zos/antfincdn/xZbG1ALW0/cd83b502-cde6-4a7b-a581-36aae26b4028.png" width="600" alt="row">
+
+📊 View demo [custom sorting](/examples/analysis/sort#custom-sort-func) .
+
+## priority
+
+1. The condition priority in `sortParams` is higher than the original data
+2. `sortParams` multiple `item` : according to the order priority, the priority of the latter is higher
+3. Multiple conditions in `item` : `sortByMeasure` > `sortFunc` > `sortBy` > `sortMethod`
diff --git a/s2-site/docs/manual/basic/sort/basic.zh.md b/s2-site/docs/manual/basic/sort/basic.zh.md
index e6bb5b1ccb..a5bf37d06c 100644
--- a/s2-site/docs/manual/basic/sort/basic.zh.md
+++ b/s2-site/docs/manual/basic/sort/basic.zh.md
@@ -1,27 +1,238 @@
 ---
-title: 组内排序
+title: 基础排序
 order: 0
 tag: Updated
 ---
 
 ## 简介
 
-根据 `数值升/降序` 对 `行头/列头` 进行排序。[查看更多排序示例](https://s2.antv.antgroup.com/examples#category-sort)
+S2 支持对表格数据进行多种形式的排序，如行/列头维值根据首字母顺序排序、行/列头维值根据对应的小计/总计/数值排序。S2 除了提供默认的排序方法外，还允许使用函数自定义排序。[查看示例](/examples/analysis/sort#custom-sort-func)
 
-`组内排序` 代表只影响一个分组内部的排序，例如下图中 `笔-价格` 选择 `组内升序` 时，`省份` 的排序方式不会更改，只会更改每个 `省份` 内部 `城市` 的顺序。
+## 使用
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*SszqS7EGaXkAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
+通过在 [s2DataConfig](/docs/api/general/S2DataConfig) 中传入 [sortParams](/docs/api/general/S2DataConfig#sortparams) 启用排序
 
-`行头/列头` 只存在单一状态，当前状态会覆盖前一状态，如上图所示，当对 `笔` 进行排序时，`纸张` 的排序状态消失，`行头+列头` 可同时存在自身状态。
+### sortParams
 
-## 使用
+| 参数 | 说明 | 类型 | 默认值 | 必选 |
+| --- | --- | --- | --- | --- |
+| sortFieldId | 度量 Id，即要被排序的 Id | `string` | - | ✓ |
+| sortMethod | 排序方式 | `ASC` \| `DESC` \| `asc` \| `desc` | - |  |
+| sortBy | 自定义排序列表 | `string[]` | - |  |
+| sortByMeasure | 按照度量值（数值）排序（透视表适用） | `string` | - |  |
+| query | 筛选条件，缩小排序范围 如 ：`{ city: '成都' }` | `object` | - |  |
+| type | 组内排序用来显示 icon（透视表适用） | `string` | - |  |
+| sortFunc | 自定义排序的 function | `(v: SortFuncParam) => Array<string>` | - |  |
+
+```ts
+import { EXTRA_FIELD } from "@antv/s2";
+
+const s2DataConfig = {
+  sortParams: [
+    {
+      sortFieldId: 'type',
+      sortMethod: 'DESC',
+      // EXTRA_FIELD 是 dataCfg.fields.values 字段的虚拟 fieldId
+      query: { city: '成都', [EXTRA_FIELD]: 'price' },
+    },
+  ],
+  ...
+};
+```
+
+## 方式
 
-使用 `s2-react` 的组件 `SheetComponent` 默认在数值头显示 `icon` ，点击后选择，有 `升序、降序、不排序` 三种方式，可在 `options` 中配置显示，如下：
+### 1. 升/降序方法（sortMethod）
+
+支持对 `行头/列头` 进行排序，类型包括数字、类数字、普通字符串，非数字兜底使用 **localeCompare** 进行比较，举例如下：
+
+```ts
+sortParams: [
+  { sortFieldId: 'province', sortMethod: 'DESC' },
+  { sortFieldId: 'type', sortMethod: 'ASC' },
+];
+```
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DlG8SYEFlS8AAAAAAAAAAAAAARQnAQ" width = "500"  alt="row" />
+
+### 2. 维度值列表（sortBy）
+
+支持对 `行头/列头` 按照指定的维值列表排序，如果行列有多级，则各子级内部进行组内排序（如下 `city` ），举例如下：
 
 ```ts
-const s2Options = {
-  width: 600,
-  height: 600,
-  showDefaultHeaderActionIcon: true, // 默认为打开，可设置为 false 关闭
+sortParams: [
+  { sortFieldId: 'province', sortBy: ['浙江', '吉林'] },
+  { sortFieldId: 'city', sortBy: ['舟山', '杭州', '白山', '长春'] },
+  { sortFieldId: 'type', sortBy: ['纸张', '笔'] },
+];
+```
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jD1iTZdrUZwAAAAAAAAAAAAADmJ7AQ/original" width = "500"  alt="row" />
+
+### 3. 度量值字段（sortByMeasure）
+
+支持 `行头/列头` 按照交叉的度量值（数值）进行排序。以下图为例，如果需要对行头的 `城市` 维度排序，首先需要找出用于排序的数据。`城市` 维度在交叉区域对应了 7 列数值数据，使用任何一列数据做比较，都可以决定 `城市` 维度的排序，所以在使用 `度量值字段（sortByMeasure）` 时，不仅要指定需要排序的 `sortFieldId`，还需要使用 `query` 属性限定用于比较的数值数据。
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gAxoSaj9Z4IAAAAAAAAAAAAADmJ7AQ/original" width="600" />
+
+根据维度所在的层级，以及用于排序的数据不同，可以分为两类排序，示例如下：
+
+#### 按明细数据排序
+
+- `sortByMeasure` 取具体数值，如 `number`
+- `sortFieldId` 为 `行/列` 维度最后一个字段，如行维度中的 `city`
+- `query` 能限定到最后一级明细数据，如包含所有列维度 `type`、`sub_type` 的维值【见示例1】
+
+#### 按汇总数据排序
+
+> 在 S2 中怎么开启总计/小计？
+>
+> 1. 使用 data 数据中的聚合数据。
+> 2. 使用 S2 中提供的聚合计算。​📊 查看文档 [小计总计配置](/docs/api/general/S2Options#totals)
+
+- `sortByMeasure` 取 `TOTAL_VALUE`
+- `sortFieldId` 可以取任意维度字段（非末级的 `province` 或末级的 `city`）
+  - 取 `province` 时，`query` 可限定 `type`、`sub_type` 所有维值或部分维值，此时是以 `province` 的行小计交叉格为准【见示例2】
+  - 取 `city` 时，`query` 只可限定到部分列维度，如 `type`，此时以列小计交叉格数据为准【见示例3】
+
+#### 示例 1，明细数据排序
+
+```javascript
+{
+  sortFieldId: 'city',
+  sortByMeasure: 'number',
+  sortMethod: 'asc',
+  query: {
+    type: '办公用品',
+    sub_type: '纸张',
+    [EXTRA_FIELD]: 'number'
+  }
+}
+```
+
+<image src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*im9YR7e_wooAAAAAAAAAAAAADmJ7AQ/original" width="600" />
+
+#### 示例 2，非内侧维度按汇总数据排序
+
+当 `query` 包含 `部分` 列维度
+
+```javascript
+{
+  sortFieldId: 'province',
+  sortByMeasure: TOTAL_VALUE,
+  sortMethod: 'asc',
+  query: {
+    type: '家具',
+    [EXTRA_FIELD]: 'number'
+  }
+}
+```
+
+<image src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HthpSLAX6BYAAAAAAAAAAAAADmJ7AQ/original" width="600" />
+
+当 `query` 包含 `所有` 列维度
+
+```javascript
+{
+  sortFieldId: 'province',
+  sortByMeasure: TOTAL_VALUE,
+  sortMethod: 'asc',
+  query: {
+    type: '办公用品',
+    sub_type: '笔',
+    [EXTRA_FIELD]: 'number'
+  }
+}
+```
+
+<image src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8MlDSbozN0gAAAAAAAAAAAAADmJ7AQ/original" width="600" />
+
+#### 示例3，最内侧维度按汇总数据排序
+
+```javascript
+{
+  sortFieldId: 'city',
+  sortByMeasure: TOTAL_VALUE,
+  sortMethod: 'desc',
+  query: {
+    type: '办公用品',
+    [EXTRA_FIELD]: 'number'
+  }
+}
+```
+
+<image src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SiB0T7oePzEAAAAAAAAAAAAADmJ7AQ/original" width="600" />
+
+### 4. 自定义方法（sortFunc）
+
+`sortFunc` 会根据当前条件返回 `SortFuncParam` 参数，支持 `维度值` 和 `度量值` 两种方式
+
+| 参数 | 说明 | 类型 | 默认值 | 必选 |
+| --- | --- | --- | --- | --- |
+| sortFieldId | 度量 Id，即要被排序的 Id | `string` | - | ✓ |
+| sortMethod | 排序方式 | `ASC` \| `DESC` \| `asc` \| `desc` | - |  |
+| sortBy | 自定义排序列表 | `string[]` | - |  |
+| sortByMeasure | 按照度量值（数值）排序 | `string` | - |  |
+| query | 筛选条件，缩小排序范围 如 ：`{city:'白山'}` | `object` | - |  |
+| type | 组内排序用来显示 icon | `string` | - |  |
+| data | 当前排序数据列表 | `Array<string \| CellData>` | - |  |
+
+#### 维度值（行/列头）
+
+支持维度值自定义，即行头或列头，举例如下：
+
+```ts
+const s2DataConfig = {
+  sortParams: [
+    {
+      // sortFieldId 为维度值时，params.data 为维度值列表
+      sortFieldId: 'province',
+      sortFunc: (params) => {
+        const { data } = params;
+        return data.sort((a, b) => a.localeCompare(b));
+      },
+    },
+  ],
 };
 ```
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*7MLkQLxhliAAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
+
+#### 度量值（数值）
+
+支持使用度量值进行自定义计算，举例如下：
+
+```ts
+const s2DataConfig = {
+  sortParams: [
+    {
+      sortFieldId: 'city',
+      sortByMeasure: 'price',
+      // 当使用 sortByMeasure 时，可以传入 query 定位数值列表
+      // 如下方限定 params.data 为 type=纸张，数值=price 的数据
+      query: { type: '纸张', [EXTRA_FIELD]: 'price' },
+      sortFunc: (params) => {
+        const { data, sortByMeasure, sortFieldId } = params || {};
+        return (
+          data
+            .map(item => item.raw) // 此时 item 为 CellData，需要取出原始数据对象
+            // 使用 price 做比较
+            ?.sort((a, b) => b[sortByMeasure] - a[sortByMeasure])
+            // map 出 city 维度的数组
+            ?.map((item) => item[sortFieldId])
+        );
+      },
+    },
+  ],
+};
+```
+
+<img src="https://gw.alipayobjects.com/zos/antfincdn/xZbG1ALW0/cd83b502-cde6-4a7b-a581-36aae26b4028.png" width = "600"  alt="row" />
+
+📊 查看 demo [自定义排序](/examples/analysis/sort#custom-sort-func)。
+
+## 优先级
+
+1. `sortParams` 里的条件优先级高于原始数据
+2. `sortParams` 多个 `item` ：按照顺序优先级，排在后面的优先级高
+3. `item` 中多个条件：`sortFunc` > `sortBy` > `sortByMeasure` > `sortMethod`
diff --git a/s2-site/docs/manual/basic/sort/custom.en.md b/s2-site/docs/manual/basic/sort/custom.en.md
deleted file mode 100644
index b7b140cd42..0000000000
--- a/s2-site/docs/manual/basic/sort/custom.en.md
+++ /dev/null
@@ -1,312 +0,0 @@
----
-title: Custom Sort
-order: 2
-tag: Updated
----
-
-## Introduction
-
-Customize the sorting of table data rows, support row header/column header sorting, single row/column sorting, custom lists, functions and other functions. [Check out the examples](/examples/analysis/sort#custom-sort-func) .
-
-## use
-
-Driven by passing [sortParams](/docs/api/general/S2DataConfig#SortParams) data in [s2DataConfig](/docs/api/general/S2DataConfig)
-
-### sortParam
-
-| parameter     | illustrate                                                                     | type                                  | Defaults | required |
-| ------------- | ------------------------------------------------------------------------------ | ------------------------------------- | -------- | -------- |
-| sortFieldId   | Measure Id, the Id to be sorted                                                | `string`                              | -        | ✓        |
-| sortMethod    | sort by                                                                        | `ASC` \| `DESC` \| `asc` \| `desc`    | -        |          |
-| sortBy        | custom sorted list                                                             | `string[]`                            | -        |          |
-| sortByMeasure | Sort by metric value (numeric value) (for pivot tables)                        | `string`                              | -        |          |
-| query         | Filter criteria, narrow the sorting range such as: `{ city: '成都' }`            | `object`                              | -        |          |
-| type          | Sorting within the group is used to display icons (applicable to pivot tables) | `string`                              | -        |          |
-| sortFunc      | Function for custom sorting                                                    | `(v: SortFuncParam) => Array<string>` | -        |          |
-
-```ts
-import { EXTRA_FIELD } from "@antv/s2";
-
-const s2DataConfig = {
-  sortParams: [
-    {
-      sortFieldId: 'type',
-      sortMethod: 'DESC',
-      // EXTRA_FIELD 是 dataCfg.fields.values 字段的虚拟 fieldId
-      query: { city: '成都', [EXTRA_FIELD]: 'price' },
-    },
-  ],
-  ...
-};
-```
-
-## Way
-
-### 1. Ascending/descending method (sortMethod)
-
-Row/column header dimensions are supported, and the ascending and descending order **is based on the first letter** . Examples are as follows:
-
-```ts
-sortParams: [
-  { sortFieldId: 'province', sortMethod: 'DESC' },
-  { sortFieldId: 'type', sortMethod: 'ASC' },
-]
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DlG8SYEFlS8AAAAAAAAAAAAAARQnAQ" width="600" alt="row">
-
-### 2. List of dimension values ​​(sortBy)
-
-Supports setting the corresponding list in the table for the`行/列头`. If there is nesting, the sub-dimensions will be sorted within the group (as shown in `city` ), for example:
-
-```ts
-sortParams: [
-  { sortFieldId: 'province', sortBy: [ '吉林', '浙江' ] },
-  { sortFieldId: 'city', sortBy: [ '舟山', '杭州', '白山', '长春' ] },
-  { sortFieldId: 'type', sortBy: [ '纸张', '笔' ] },
-];
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*5A9lSpS6uHwAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
-
-### 3. Measure field (sortByMeasure)
-
-Support`行头/列头`sorting based on metric (numeric) data
-
-#### row/column
-
-Supports sorting by`行或列`, examples are as follows:
-
-```ts
-const s2DataConfig = {
-  sortParams: [
-    {
-      // type 依据 浙江-舟山-price 升序 排序
-      sortFieldId: 'type',
-      sortMethod: 'ASC',
-      sortByMeasure: 'price',
-      query: {
-        province: '浙江',
-        city: '舟山',
-        [EXTRA_FIELD]: 'price',
-      },
-    },
-  ]
-}
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*SZ04TIhCQwkAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
-
-#### row+column
-
-Supports sorting by`行+列`, examples are as follows:
-
-```ts
-const s2DataConfig = {
-  sortParams: [
-    {
-      // type 依据（ 浙江 - 舟山 ）&（ price ） 升序 排序
-      sortFieldId: 'type',
-      sortMethod: 'ASC',
-      sortByMeasure: 'price',
-      query: {
-        province: '浙江',
-        city: '舟山',
-        [EXTRA_FIELD]: 'price',
-      },
-    },
-  ]
-}
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*wZ4fQJ5-AsMAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
-
-### 4. Summary value
-
-The non-leaf node of the`行/列头`. At this time, `sortByMeasure` is the summary virtual field TOTAL\_VALUE, and the value is `$$total$$` .
-
-#### Configure Data Aggregation Mode
-
-1. Use aggregated data from data.
-2. Use aggregate calculations available in S2. ​📊 View document [subtotal total configuration](/docs/api/general/S2Options#totals)
-
-#### Row Total/Row Subtotal
-
-Sort column headers by`行总计/行小计`, examples are as follows:
-
-**Row subtotal** :
-
-```ts
-import { TOTAL_VALUE, EXTRA_FIELD } from "@antv/s2";
-
-const s2DataConfig = {
-  sortParams: [
-    {
-      // type 依据 （ 浙江 - 小计 ）&（ price ）& 降序 排序
-      sortFieldId: 'type',
-      sortMethod: 'DESC',
-      sortByMeasure: TOTAL_VALUE,
-      query: {
-        province: '浙江',
-        [EXTRA_FIELD]: 'price',
-      },
-    },
-  ];
-}
-
-// 使用前端总计的聚合方法进行排序。如果 data 数据中存在聚合数据则使用
-const s2Options = {
-  totals: {
-    row: {
-      subTotalsDimensions: [ 'province' ],
-      calcSubTotals: {
-        aggregation: 'SUM'
-      }
-    }
-  }
-}
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*RfN8Q5IauP8AAAAAAAAAAAAAARQnAQ" width="600" alt="row">
-
-row totals:
-
-```ts
-import { TOTAL_VALUE, EXTRA_FIELD } from "@antv/s2";
-
-const s2DataConfig = {
-  sortParams: [
-    {
-      // 对 type 中笔和纸的总计进行 降序 排序
-      sortFieldId: 'type',
-      sortMethod: 'DESC',
-      sortByMeasure: TOTAL_VALUE,
-      query: {
-        [EXTRA_FIELD]: 'price',
-      },
-    },
-  ],
-  // data 中带有排序使用的数据时，S2 会优先使用 data 返回的数据进行排序
-  data:[
-    {
-      type: "笔",
-      price: "38"
-    },
-    {
-      type: "纸张",
-      price: "36"
-    }
-  ]
-}
-```
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/%26pwbU6StZ/img.png" width="600" alt="rowTotal">
-
-#### Column Total/Column Subtotal
-
-Sort row headers by`列总计/列小计`, examples are as follows:
-
-```ts
-import { TOTAL_VALUE, EXTRA_FIELD } from "@antv/s2";
-
-const s2DataConfig = {
-  sortParams: [
-    {
-      // province 依据（ province - 小计 ）&（ 总计 - price ）& 升序 排序
-      sortFieldId: 'province',
-      sortMethod: 'ASC',
-      sortByMeasure: TOTAL_VALUE,
-      query: {
-        [EXTRA_FIELD]: 'price',
-      },
-    }
-  ]
-}
-
-const s2Options = {
-  totals: {
-    row: {
-      subTotalsDimensions: ['province'],
-      calcSubTotals: {
-        aggregation: 'SUM',
-      },
-    }
-  }
-}
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ZXBjR6fZFpQAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
-
-When there is a subtotal in the`列小计`, add the corresponding parameter in the `query` to get the corresponding cell, same`行小计`above
-
-### 5. Custom method (sortFunc)
-
-`sortFunc` will return `SortFuncParam` parameter according to the current conditions, and supports two ways of`维度值`and`度量值`
-
-| parameter     | illustrate                                                    | type                               | Defaults                | required |
-| ------------- | ------------------------------------------------------------- | ---------------------------------- | ----------------------- | -------- |
-| sortFieldId   | Measure Id, the Id to be sorted                               | `string`                           | -                       | ✓        |
-| sortMethod    | sort by                                                       | `ASC` \| `DESC` \| `asc` \| `desc` | -                       |          |
-| sortBy        | custom sorted list                                            | `string[]`                         | -                       |          |
-| sortByMeasure | Sort by metric value (numeric value)                          | `string`                           | -                       |          |
-| query         | Filter criteria, narrow the sort range such as: `{city:'白山'}` | `object`                           | -                       |          |
-| type          | Sorting within the group is used to display the icon          | `string`                           | -                       |          |
-| data          | List of currently sorted data                                 | \`Array\<string                    | Record\<string, any>>\` | -        |
-
-#### Dimension value (row/column header)
-
-Support dimension value customization, that is, row header or column header, examples are as follows:
-
-```ts
-const s2DataConfig = {
-  sortParams: [
-    {
-      // sortFieldId 为维度值时，params.data 为维度值列表
-      sortFieldId: 'province',
-      sortFunc: (params) => {
-          const { data } = params;
-          return data.sort((a, b) => a.localeCompare(b));
-      },
-    },
-  ]
-}
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*7MLkQLxhliAAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
-
-#### measure (numeric)
-
-Supports custom calculations using metrics, for example:
-
-```ts
-
-const s2DataConfig = {
-  sortParams: [
-    {
-      sortFieldId: 'city',
-      sortByMeasure: 'price',
-      // 当使用 sortByMeasure 时，可以传入 query 定位数值列表
-      // 如下方限定 params.data 为 type=纸张，数值=price 的数据
-      query: { type: '纸张', [EXTRA_FIELD]: 'price' },
-      sortFunc: (params) => {
-        const { data, sortByMeasure, sortFieldId } = params || {};
-        return data
-          // 使用 price 做比较
-          ?.sort((a, b) => b[sortByMeasure] - a[sortByMeasure])
-          // map 出 city 维度的数组
-          ?.map((item) => item[sortFieldId]);
-      },
-    },
-  ]
-}
-```
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/xZbG1ALW0/cd83b502-cde6-4a7b-a581-36aae26b4028.png" width="600" alt="row">
-
-📊 View demo [custom sorting](/examples/analysis/sort#custom-sort-func) .
-
-## priority
-
-1. The condition priority in `sortParams` is higher than the original data
-2. `sortParams` multiple `item` : according to the order priority, the priority of the latter is higher
-3. Multiple conditions in `item` : `sortByMeasure` > `sortFunc` > `sortBy` > `sortMethod`
diff --git a/s2-site/docs/manual/basic/sort/custom.zh.md b/s2-site/docs/manual/basic/sort/custom.zh.md
deleted file mode 100644
index 9b067a2770..0000000000
--- a/s2-site/docs/manual/basic/sort/custom.zh.md
+++ /dev/null
@@ -1,314 +0,0 @@
----
-title: 自定义排序
-order: 2
-tag: Updated
----
-
-## 简介
-
-对表格数据行进行自定义排序，支持行头/列头排序、单行/列排序、自定义列表、函数等功能。[查看示例](/examples/analysis/sort#custom-sort-func)。
-
-## 使用
-
-通过在 [s2DataConfig](/docs/api/general/S2DataConfig)
-中传入 [sortParams](/docs/api/general/S2DataConfig#SortParams) 数据驱动
-
-### sortParam
-
-| 参数          | 说明                                        | 类型                                  | 默认值 | 必选 |
-| ------------- | ------------------------------------------- | ------------------------------------- | ------ | ---- |
-| sortFieldId   | 度量 Id，即要被排序的 Id                    | `string`                              | -      | ✓   |
-| sortMethod    | 排序方式                                    | `ASC` \| `DESC` \| `asc` \| `desc`  | -      |      |
-| sortBy        | 自定义排序列表                              | `string[]`                            | -      |      |
-| sortByMeasure | 按照度量值（数值）排序（透视表适用）        | `string`                              | -      |      |
-| query         | 筛选条件，缩小排序范围 如 ：`{ city: '成都' }` | `object`                              | -      |      |
-| type          | 组内排序用来显示 icon（透视表适用）      | `string`                              | -      |      |
-| sortFunc      | 自定义排序的 function                        | `(v: SortFuncParam) => Array<string>` | -      |      |
-
-```ts
-import { EXTRA_FIELD } from "@antv/s2";
-
-const s2DataConfig = {
-  sortParams: [
-    {
-      sortFieldId: 'type',
-      sortMethod: 'DESC',
-      // EXTRA_FIELD 是 dataCfg.fields.values 字段的虚拟 fieldId
-      query: { city: '成都', [EXTRA_FIELD]: 'price' },
-    },
-  ],
-  ...
-};
-```
-
-## 方式
-
-### 1. 升/降序方法（sortMethod）
-
-支持行/列头维度，此时的升降序 **基于首字母** ，举例如下：
-
-```ts
-sortParams: [
-  { sortFieldId: 'province', sortMethod: 'DESC' },
-  { sortFieldId: 'type', sortMethod: 'ASC' },
-]
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DlG8SYEFlS8AAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
-
-### 2. 维度值列表（sortBy）
-
-支持为 `行/列头` 设置表内相应列表，如果有嵌套，子维度则为组内排序（如下 `city` ），举例如下：
-
-```ts
-sortParams: [
-  { sortFieldId: 'province', sortBy: [ '吉林', '浙江' ] },
-  { sortFieldId: 'city', sortBy: [ '舟山', '杭州', '白山', '长春' ] },
-  { sortFieldId: 'type', sortBy: [ '纸张', '笔' ] },
-];
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*5A9lSpS6uHwAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
-
-### 3. 度量值字段（sortByMeasure）
-
-支持 `行头/列头` 根据度量值（数值）数据进行排序
-
-#### 行/列
-
-支持根据 `行或列` 排序，举例如下：
-
-```ts
-const s2DataConfig = {
-  sortParams: [
-    {
-      // type 依据 浙江-舟山-price 升序 排序
-      sortFieldId: 'type',
-      sortMethod: 'ASC',
-      sortByMeasure: 'price',
-      query: {
-        province: '浙江',
-        city: '舟山',
-        [EXTRA_FIELD]: 'price',
-      },
-    },
-  ]
-}
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*SZ04TIhCQwkAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
-
-#### 行+列
-
-支持根据 `行+列` 排序，举例如下：
-
-```ts
-const s2DataConfig = {
-  sortParams: [
-    {
-      // type 依据（ 浙江 - 舟山 ）&（ price ） 升序 排序
-      sortFieldId: 'type',
-      sortMethod: 'ASC',
-      sortByMeasure: 'price',
-      query: {
-        province: '浙江',
-        city: '舟山',
-        [EXTRA_FIELD]: 'price',
-      },
-    },
-  ]
-}
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*wZ4fQJ5-AsMAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
-
-### 4. 汇总值
-
-`行/列头` 的非叶子节点，此时 `sortByMeasure` 为汇总虚拟字段 TOTAL_VALUE，值为 `$$total$$`。
-
-#### 配置数据聚合方式
-
-1. 使用 data 数据中的聚合数据。
-2. 使用 S2 中提供的聚合计算。​📊 查看文档 [小计总计配置](/docs/api/general/S2Options#totals)
-
-#### 行总计/行小计
-
-通过 `行总计/行小计` 对列头进行排序， 举例如下：
-
-**行小计** ：
-
-```ts
-import { TOTAL_VALUE, EXTRA_FIELD } from "@antv/s2";
-
-const s2DataConfig = {
-  sortParams: [
-    {
-      // type 依据 （ 浙江 - 小计 ）&（ price ）& 降序 排序
-      sortFieldId: 'type',
-      sortMethod: 'DESC',
-      sortByMeasure: TOTAL_VALUE,
-      query: {
-        province: '浙江',
-        [EXTRA_FIELD]: 'price',
-      },
-    },
-  ];
-}
-
-// 使用前端总计的聚合方法进行排序。如果 data 数据中存在聚合数据则使用
-const s2Options = {
-  totals: {
-    row: {
-      subTotalsDimensions: [ 'province' ],
-      calcSubTotals: {
-        aggregation: 'SUM'
-      }
-    }
-  }
-}
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*RfN8Q5IauP8AAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
-
-行总计：
-
-```ts
-import { TOTAL_VALUE, EXTRA_FIELD } from "@antv/s2";
-
-const s2DataConfig = {
-  sortParams: [
-    {
-      // 对 type 中笔和纸的总计进行 降序 排序
-      sortFieldId: 'type',
-      sortMethod: 'DESC',
-      sortByMeasure: TOTAL_VALUE,
-      query: {
-        [EXTRA_FIELD]: 'price',
-      },
-    },
-  ],
-  // data 中带有排序使用的数据时，S2 会优先使用 data 返回的数据进行排序
-  data:[
-    {
-      type: "笔",
-      price: "38"
-    },
-    {
-      type: "纸张",
-      price: "36"
-    }
-  ]
-}
-
-```
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/%26pwbU6StZ/img.png" width = "600"  alt="rowTotal" />
-
-#### 列总计/列小计
-
-通过 `列总计/列小计` 对行头进行排序，举例如下：
-
-```ts
-import { TOTAL_VALUE, EXTRA_FIELD } from "@antv/s2";
-
-const s2DataConfig = {
-  sortParams: [
-    {
-      // province 依据（ province - 小计 ）&（ 总计 - price ）& 升序 排序
-      sortFieldId: 'province',
-      sortMethod: 'ASC',
-      sortByMeasure: TOTAL_VALUE,
-      query: {
-        [EXTRA_FIELD]: 'price',
-      },
-    }
-  ]
-}
-
-const s2Options = {
-  totals: {
-    row: {
-      subTotalsDimensions: ['province'],
-      calcSubTotals: {
-        aggregation: 'SUM',
-      },
-    }
-  }
-}
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ZXBjR6fZFpQAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
-
-当有 `列小计` 时，在 `query` 中增加相应的参数获取相应的单元格，同上 `行小计`
-
-### 5. 自定义方法（sortFunc）
-
-`sortFunc` 会根据当前条件返回 `SortFuncParam` 参数，支持 `维度值` 和 `度量值` 两种方式
-
-| 参数            | 说明                                      | 类型                                  | 默认值 | 必选 |
-| ------------- | ------------------------------------------ | ------------------------------------ | ------ | --- |
-| sortFieldId    | 度量 Id，即要被排序的 Id                    | `string`                              | -      | ✓    |
-| sortMethod     | 排序方式                                    | `ASC` \| `DESC` \| `asc` \| `desc`    | -      |      |
-| sortBy         | 自定义排序列表                              | `string[]`                            | -      |      |
-| sortByMeasure  | 按照度量值（数值）排序                      | `string`                              | -      |      |
-| query          | 筛选条件，缩小排序范围 如 ：`{city:'白山'}` | `object`                              | -      |      |
-| type           | 组内排序用来显示 icon                        | `string`                              | -      |      |
-| data           | 当前排序数据列表                            | `Array<string | Record<string, any>>` | -      |      |
-
-#### 维度值（行/列头）
-
-支持维度值自定义，即行头或列头，举例如下：
-
-```ts
-const s2DataConfig = {
-  sortParams: [
-    {
-      // sortFieldId 为维度值时，params.data 为维度值列表
-      sortFieldId: 'province',
-      sortFunc: (params) => {
-          const { data } = params;
-          return data.sort((a, b) => a.localeCompare(b));
-      },
-    },
-  ]
-}
-```
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*7MLkQLxhliAAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
-
-#### 度量值（数值）
-
-支持使用度量值进行自定义计算，举例如下：
-
-```ts
-
-const s2DataConfig = {
-  sortParams: [
-    {
-      sortFieldId: 'city',
-      sortByMeasure: 'price',
-      // 当使用 sortByMeasure 时，可以传入 query 定位数值列表
-      // 如下方限定 params.data 为 type=纸张，数值=price 的数据
-      query: { type: '纸张', [EXTRA_FIELD]: 'price' },
-      sortFunc: (params) => {
-        const { data, sortByMeasure, sortFieldId } = params || {};
-        return data
-          // 使用 price 做比较
-          ?.sort((a, b) => b[sortByMeasure] - a[sortByMeasure])
-          // map 出 city 维度的数组
-          ?.map((item) => item[sortFieldId]);
-      },
-    },
-  ]
-}
-```
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/xZbG1ALW0/cd83b502-cde6-4a7b-a581-36aae26b4028.png" width = "600"  alt="row" />
-
-📊 查看 demo [自定义排序](/examples/analysis/sort#custom-sort-func)。
-
-## 优先级
-
-1. `sortParams` 里的条件优先级高于原始数据
-2. `sortParams` 多个 `item` ：按照顺序优先级，排在后面的优先级高
-3. `item` 中多个条件：`sortByMeasure` > `sortFunc` > `sortBy` > `sortMethod`
diff --git a/s2-site/docs/manual/basic/sort/group.en.md b/s2-site/docs/manual/basic/sort/group.en.md
new file mode 100644
index 0000000000..9c4d231de1
--- /dev/null
+++ b/s2-site/docs/manual/basic/sort/group.en.md
@@ -0,0 +1,27 @@
+---
+title: Group Sort
+order: 2
+tag: Updated
+---
+
+## Introduction
+
+Sort`行头/列头`according to`数值升/降序`order. [See more sorting examples](https://s2.antv.antgroup.com/examples#category-sort)
+
+`组内排序`a group means that it only affects the sorting within a group. For example, when`笔-价格`selects`组内升序`the figure below, the sorting method of`省份`will not change, only the order of`城市`within each`省份`will be changed.
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*SszqS7EGaXkAAAAAAAAAAAAAARQnAQ" width="600" alt="row">
+
+There is only a single state for`行头/列头`, and the current state will overwrite the previous state. As shown in the figure above, when the`笔`is sorted, the sorting state of the`纸张`disappears, and`行头+列头`can have their own status at the same time.
+
+## use
+
+The component `SheetComponent` that uses `s2-react` displays the `icon` in the value head by default, click to select, there are three ways of`升序、降序、不排序`, and the display can be configured in `options` , as follows:
+
+```ts
+const s2Options = {
+  width: 600,
+  height: 600,
+  showDefaultHeaderActionIcon: true, // 默认为打开，可设置为 false 关闭
+};
+```
diff --git a/s2-site/docs/manual/basic/sort/group.zh.md b/s2-site/docs/manual/basic/sort/group.zh.md
new file mode 100644
index 0000000000..7d23f09e1e
--- /dev/null
+++ b/s2-site/docs/manual/basic/sort/group.zh.md
@@ -0,0 +1,27 @@
+---
+title: 组内排序
+order: 2
+tag: Updated
+---
+
+## 简介
+
+根据 `数值升/降序` 对 `行头/列头` 进行排序。[查看更多排序示例](https://s2.antv.antgroup.com/examples#category-sort)
+
+`组内排序` 代表只影响一个分组内部的排序，例如下图中 `笔-价格` 选择 `组内升序` 时，`省份` 的排序方式不会更改，只会更改每个 `省份` 内部 `城市` 的顺序。
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*SszqS7EGaXkAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
+
+`行头/列头` 只存在单一状态，当前状态会覆盖前一状态，如上图所示，当对 `笔` 进行排序时，`纸张` 的排序状态消失，`行头+列头` 可同时存在自身状态。
+
+## 使用
+
+使用 `s2-react` 的组件 `SheetComponent` 默认在数值头显示 `icon` ，点击后选择，有 `升序、降序、不排序` 三种方式，可在 `options` 中配置显示，如下：
+
+```ts
+const s2Options = {
+  width: 600,
+  height: 600,
+  showDefaultHeaderActionIcon: true, // 默认为打开，可设置为 false 关闭
+};
+```

From e83371596221cf59178e93d2df16679907f6c24b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=AB=E5=90=9B?= <chuxiao.lcx@antgroup.com>
Date: Mon, 15 Jan 2024 17:06:40 +0800
Subject: [PATCH 20/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=E7=BB=84=E4=BB=B6=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/manual/basic/sort/advanced.en.md |  2 +-
 s2-site/docs/manual/basic/sort/advanced.zh.md | 11 ++++++-----
 s2-site/docs/manual/basic/sort/group.en.md    |  2 +-
 s2-site/docs/manual/basic/sort/group.zh.md    |  4 ++--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/s2-site/docs/manual/basic/sort/advanced.en.md b/s2-site/docs/manual/basic/sort/advanced.en.md
index 1077ca3a70..6c3b7d7ee1 100644
--- a/s2-site/docs/manual/basic/sort/advanced.en.md
+++ b/s2-site/docs/manual/basic/sort/advanced.en.md
@@ -1,6 +1,6 @@
 ---
 title: Advanced Sort
-order: 1
+order: 2
 tag: Updated
 ---
 
diff --git a/s2-site/docs/manual/basic/sort/advanced.zh.md b/s2-site/docs/manual/basic/sort/advanced.zh.md
index eb9ed3ddf2..8f9533fecd 100644
--- a/s2-site/docs/manual/basic/sort/advanced.zh.md
+++ b/s2-site/docs/manual/basic/sort/advanced.zh.md
@@ -1,10 +1,10 @@
 ---
 title: 高级排序
-order: 1
+order: 2
 tag: Updated
 ---
 
-`React` 版本提供高级排序组件，可选择使用。[查看示例](/examples/analysis/sort#advanced)
+`@antv/s2-react` 提供高级排序组件，可选择使用。[查看示例](/examples/analysis/sort#advanced)
 
 > 注意：内部不维护状态
 
@@ -16,6 +16,7 @@ tag: Updated
 import React, { useState } from 'react';
 import { SortParams } from '@antv/s2';
 import { SheetComponent } from '@antv/s2-react';
+
 import '@antv/s2-react/dist/style.min.css';
 
 const AdvancedSortDemo = () => {
@@ -63,8 +64,8 @@ advancedSortCfg: {
   open: true,
   onSortConfirm: (ruleValues: RuleValue[], sortParams: SortParams) => {
     console.log(ruleValues, sortParams)
-  },
-},
+  }
+}
 
 ```
 
@@ -110,7 +111,7 @@ advancedSortCfg: {
 | 属性     | 类型                                        | 必选 | 默认值 | 功能描述   |
 | ------- | ------------------------------------------ | --- | ----- | --------- |
 | label    | `string`                                    |      | ✓      | 规则名称   |
-| value    | `'sortMethod' | 'sortBy' | 'sortByMeasure'` | ✓    |        | 规则值     |
+| value    | `'sortMethod' \| 'sortBy' \| 'sortByMeasure'` | ✓    |        | 规则值     |
 | children | `RuleOption[]`                              |      | ✓      | 规则子列表 |
 
 <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*V2PWTItVICQAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
diff --git a/s2-site/docs/manual/basic/sort/group.en.md b/s2-site/docs/manual/basic/sort/group.en.md
index 9c4d231de1..8b4bbf95ce 100644
--- a/s2-site/docs/manual/basic/sort/group.en.md
+++ b/s2-site/docs/manual/basic/sort/group.en.md
@@ -1,6 +1,6 @@
 ---
 title: Group Sort
-order: 2
+order: 1
 tag: Updated
 ---
 
diff --git a/s2-site/docs/manual/basic/sort/group.zh.md b/s2-site/docs/manual/basic/sort/group.zh.md
index 7d23f09e1e..a7cba7c007 100644
--- a/s2-site/docs/manual/basic/sort/group.zh.md
+++ b/s2-site/docs/manual/basic/sort/group.zh.md
@@ -1,12 +1,12 @@
 ---
 title: 组内排序
-order: 2
+order: 1
 tag: Updated
 ---
 
 ## 简介
 
-根据 `数值升/降序` 对 `行头/列头` 进行排序。[查看更多排序示例](https://s2.antv.antgroup.com/examples#category-sort)
+`@antv/s2-react` 提供了默认的组内排序功能，主要根据数值对 `行头/列头` 进行排序，[查看更多排序示例](https://s2.antv.antgroup.com/examples#category-sort)
 
 `组内排序` 代表只影响一个分组内部的排序，例如下图中 `笔-价格` 选择 `组内升序` 时，`省份` 的排序方式不会更改，只会更改每个 `省份` 内部 `城市` 的顺序。
 

From a6eafb31b92f3bb180e743764408873401b2a698 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=AB=E5=90=9B?= <chuxiao.lcx@antgroup.com>
Date: Mon, 15 Jan 2024 17:23:30 +0800
Subject: [PATCH 21/64] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8Fdemo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../analysis/sort/demo/custom-method.ts       |  3 ++
 .../analysis/sort/demo/custom-sort-func.ts    |  4 +--
 .../analysis/sort/demo/custom-totals.ts       | 12 ++++---
 s2-site/examples/analysis/sort/demo/meta.json | 32 +++++++++----------
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/s2-site/examples/analysis/sort/demo/custom-method.ts b/s2-site/examples/analysis/sort/demo/custom-method.ts
index 32600cbd9b..cf79c884cf 100644
--- a/s2-site/examples/analysis/sort/demo/custom-method.ts
+++ b/s2-site/examples/analysis/sort/demo/custom-method.ts
@@ -34,8 +34,11 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       ],
       data,
       sortParams: [
+        // 拼音首字母倒序：浙江-z、吉林-j
         { sortFieldId: 'province', sortMethod: 'DESC' },
+        // 拼音首字母正序：杭州-h、舟山-z；白山-b、长春-c
         { sortFieldId: 'city', sortMethod: 'ASC' },
+        // 拼音首字母倒序：纸张-z、笔-b
         { sortFieldId: 'type', sortMethod: 'DESC' },
       ],
     };
diff --git a/s2-site/examples/analysis/sort/demo/custom-sort-func.ts b/s2-site/examples/analysis/sort/demo/custom-sort-func.ts
index cce94b2198..aa93d5c007 100644
--- a/s2-site/examples/analysis/sort/demo/custom-sort-func.ts
+++ b/s2-site/examples/analysis/sort/demo/custom-sort-func.ts
@@ -35,7 +35,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       data,
       sortParams: [
         {
-          // sortFieldId 为维度值时，params.data 为维度值列表，即 浙江、吉林
+          // sortFieldId 为维度值时，params.data 为维度值列表，即 [浙江、吉林]
           sortFieldId: 'province',
           sortFunc: (params) => {
             return params.data.sort((a, b) => a.localeCompare(b));
@@ -52,7 +52,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
             const { data, sortByMeasure, sortFieldId } = params;
 
             return data
-              .map((item) => item.raw)
+              .map((item) => item.raw) // 此时 data 为 CellData 对象，需要取出原始数据对象
               .sort((a, b) => b[sortByMeasure] - a[sortByMeasure]) // price 倒序
               .map((item) => item[sortFieldId]);
           },
diff --git a/s2-site/examples/analysis/sort/demo/custom-totals.ts b/s2-site/examples/analysis/sort/demo/custom-totals.ts
index b958e952b3..dc4c86acab 100644
--- a/s2-site/examples/analysis/sort/demo/custom-totals.ts
+++ b/s2-site/examples/analysis/sort/demo/custom-totals.ts
@@ -7,7 +7,7 @@ import {
 } from '@antv/s2';
 
 fetch(
-  'https://gw.alipayobjects.com/os/bmw-prod/4347c2dd-6554-451b-9d44-15b04e5de657.json',
+  'https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json',
 )
   .then((res) => res.json())
   .then(async (data) => {
@@ -16,7 +16,7 @@ fetch(
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
-        values: ['price'],
+        values: ['price', 'cost'],
       },
       meta: [
         {
@@ -35,11 +35,15 @@ fetch(
           field: 'price',
           name: '价格',
         },
+        {
+          field: 'cost',
+          name: '成本',
+        },
       ],
       data,
       sortParams: [
         {
-          // province 依据（ province - 小计 ）&（ 总计 - price ）& 升序 排序
+          // province 依据行（`province-小计`）与列（`总计-price`）交叉的数据升序排序
           sortFieldId: 'province',
           sortMethod: 'ASC',
           sortByMeasure: TOTAL_VALUE,
@@ -48,7 +52,7 @@ fetch(
           },
         },
         {
-          // type 依据 （ type - 小计 ）&（ price ）& 降序 排序
+          // type 依据行（`浙江-小计`）与列（`type-小计`）交叉的数据倒序排序
           sortFieldId: 'type',
           sortMethod: 'DESC',
           sortByMeasure: TOTAL_VALUE,
diff --git a/s2-site/examples/analysis/sort/demo/meta.json b/s2-site/examples/analysis/sort/demo/meta.json
index c0355172ca..c40a1f43ff 100644
--- a/s2-site/examples/analysis/sort/demo/meta.json
+++ b/s2-site/examples/analysis/sort/demo/meta.json
@@ -12,22 +12,6 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/9JQrrIVN8/2021-11-16%25252020.47.11.gif"
     },
-    {
-      "filename": "group-sort.tsx",
-      "title": {
-        "zh": "组内排序",
-        "en": "Group Sort"
-      },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ljBJH8o6bT/group-sort.gif"
-    },
-    {
-      "filename": "advanced.tsx",
-      "title": {
-        "zh": "高级排序",
-        "en": "Advanced Sort"
-      },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/2TmM6qOU%26V/advance.gif"
-    },
     {
       "filename": "custom-method.ts",
       "title": {
@@ -67,6 +51,22 @@
         "en": "Custom Function Sort"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/mkeXSyNZmk/1a50ecd2-1d81-4858-a106-c0c325e45a59.png"
+    },
+    {
+      "filename": "group-sort.tsx",
+      "title": {
+        "zh": "组内排序",
+        "en": "Group Sort"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ljBJH8o6bT/group-sort.gif"
+    },
+    {
+      "filename": "advanced.tsx",
+      "title": {
+        "zh": "高级排序",
+        "en": "Advanced Sort"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/2TmM6qOU%26V/advance.gif"
     }
   ]
 }

From 464ea35a081a75068588286c0e01c6d51c836154 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 19 Jan 2024 10:21:04 +0800
Subject: [PATCH 22/64] =?UTF-8?q?chore:=20=E8=A7=A3=E5=86=B3=E5=86=B2?=
 =?UTF-8?q?=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manual/advanced/analysis/export.en.md     | 47 -------------------
 1 file changed, 47 deletions(-)

diff --git a/s2-site/docs/manual/advanced/analysis/export.en.md b/s2-site/docs/manual/advanced/analysis/export.en.md
index c35aab4a8b..210875bd90 100644
--- a/s2-site/docs/manual/advanced/analysis/export.en.md
+++ b/s2-site/docs/manual/advanced/analysis/export.en.md
@@ -6,20 +6,11 @@ tag: Updated
 
 ## Introduction
 
-<<<<<<< HEAD:s2-site/docs/manual/advanced/analysis/export.en.md
 The copied and exported content can be directly displayed in Excel, and S2 has completed the format compatibility.
-=======
-复制与导出的内容都可以直接放入 `Excel` 中进行展示，S2 已经完成了格式上的兼容。
->>>>>>> origin/next:s2-site/docs/manual/basic/analysis/copy-export.zh.md
 
 ### copy
 
-<<<<<<< HEAD:s2-site/docs/manual/advanced/analysis/export.en.md
 This function can quickly copy the content of the table to the clipboard `@antv/s2` core layer provides a basic copy function, which can be enabled by configuring `enableCopy`
-=======
-此功能可快速将表格内容复制到剪切板中，
-`@antv/s2` 核心层提供了基础的复制功能，可配置 `enableCopy` 开启
->>>>>>> origin/next:s2-site/docs/manual/basic/analysis/copy-export.zh.md
 
 #### full copy
 
@@ -35,11 +26,7 @@ The export component of S2 provides copying of original data and copying of form
 
 #### local copy
 
-<<<<<<< HEAD:s2-site/docs/manual/advanced/analysis/export.en.md
 Use the shortcut key `command/ctrl + c` to copy the selected area (partial copy)
-=======
-通过 [内置交互](/manual/advanced/interaction/basic) （单选/多选/圈选）, 使用快捷键 `Command/Ctrl + C` 即可复制选中区域（局部复制）
->>>>>>> origin/next:s2-site/docs/manual/basic/analysis/copy-export.zh.md
 
 ```ts
 const s2Options = {
@@ -60,53 +47,23 @@ const s2Options = {
 };
 ```
 
-<<<<<<< HEAD:s2-site/docs/manual/advanced/analysis/export.en.md
 * copy to excel
-=======
-##### 复制粘贴到 Excel
->>>>>>> origin/next:s2-site/docs/manual/basic/analysis/copy-export.zh.md
 
 <img alt="excelCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*LzTYTpFosccAAAAAAAAAAAAAARQnAQ" width="600"/>
 
-<<<<<<< HEAD:s2-site/docs/manual/advanced/analysis/export.en.md
 * Copy with HTML format
-=======
-<br/>
->>>>>>> origin/next:s2-site/docs/manual/basic/analysis/copy-export.zh.md
 
 ##### 复制粘贴到富文本编辑器中 （带 `HTML` 格式）
 
-<<<<<<< HEAD:s2-site/docs/manual/advanced/analysis/export.en.md
 * Copy header content
-=======
-<img alt="HTMLCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DuHCSbpv_XkAAAAAAAAAAAAAARQnAQ" width="600"/>
->>>>>>> origin/next:s2-site/docs/manual/basic/analysis/copy-export.zh.md
 
 <br/>
 
-<<<<<<< HEAD:s2-site/docs/manual/advanced/analysis/export.en.md
 * Copy column header content
-=======
-##### 复制行头单元格
->>>>>>> origin/next:s2-site/docs/manual/basic/analysis/copy-export.zh.md
 
 <img alt="CopyCol" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*_NukQpysLC8AAAAAAAAAAAAAARQnAQ" width="600"/>
 
-<<<<<<< HEAD:s2-site/docs/manual/advanced/analysis/export.en.md
 * CopyWithHeader **copyWithHeader** : whether to copy data with header information, the default is `false`
-=======
-<br/>
-
-##### 复制列头单元格
-
-<img alt="CopyRow" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ncuAQaL4AvAAAAAAAAAAAAAAARQnAQ" width="600"/>
-
-<br/>
-
-##### 带表头复制
-
-**copyWithHeader**: 复制数据时是否携带相对应**行列表头**信息，默认为 `false`
->>>>>>> origin/next:s2-site/docs/manual/basic/analysis/copy-export.zh.md
 
 ```ts
 const s2Options = {
@@ -147,11 +104,7 @@ const s2Options = {
 
 ### export
 
-<<<<<<< HEAD:s2-site/docs/manual/advanced/analysis/export.en.md
 `@antv/s2-react` component layer provides export function
-=======
-`@antv/s2-react` 组件层提供了开箱即用的导出功能
->>>>>>> origin/next:s2-site/docs/manual/basic/analysis/copy-export.zh.md
 
 :::info{title='使用 `@antv/s2` 如何导出？'}
 `@antv/s2` 内置了一系列工具函数，[见下方文档](#原始导出方法)

From 7cfceed05367a5653332258c5f4fd41329436a1b Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 19 Jan 2024 11:25:25 +0800
Subject: [PATCH 23/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=8D=95=E5=85=83=E6=A0=BC=E7=AB=A0=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../s2-core/src/common/interface/s2Options.ts |  8 +++++--
 packages/s2-core/src/utils/text.ts            |  2 +-
 s2-site/.dumi/global.less                     |  4 ++++
 .../manual/advanced/custom/cell-size.zh.md    | 10 ++++----
 s2-site/docs/manual/migration-v2.zh.md        |  4 ++--
 .../conditions/demo/intelligent-background.ts |  3 ++-
 .../analysis/conditions/demo/meta.json        |  3 ++-
 s2-site/examples/case/art/demo/meta.json      |  3 ++-
 .../custom/custom-cell/demo/col-cell.ts       |  2 ++
 .../custom/custom-cell/demo/corner-cell.ts    |  2 ++
 .../custom-cell/demo/custom-merged-cell.ts    |  2 +-
 .../custom-cell/demo/custom-table-cell.ts     |  1 +
 .../custom-cell/demo/data-cell-placeholder.ts | 12 ++++++----
 .../custom/custom-cell/demo/data-cell.ts      |  2 ++
 .../custom/custom-cell/demo/meta.json         | 23 +++++++++++--------
 .../custom/custom-cell/demo/mini-chart.ts     | 19 +++++++++++----
 .../custom/custom-cell/demo/row-cell.ts       |  2 ++
 .../custom/custom-g2-chart/demo/meta.json     |  3 ++-
 .../custom-layout/demo/custom-coordinate.ts   |  6 ++---
 .../custom/custom-plugins/demo/meta.json      |  6 +++--
 .../custom/custom-tree/demo/meta.json         | 12 ++++++----
 .../interaction/advanced/demo/meta.json       |  6 +++--
 .../examples/interaction/basic/demo/meta.json |  3 ++-
 .../layout/custom/demo/custom-table-size.ts   |  1 +
 s2-site/examples/layout/custom/demo/meta.json |  9 +++++---
 .../react-component/sheet/demo/meta.json      |  6 +++--
 .../sheet/demo/strategy-mini-chart.tsx        | 22 +++++++++++++++++-
 .../react-component/tooltip/demo/meta.json    |  3 ++-
 s2-site/examples/theme/default/demo/meta.json |  3 ++-
 29 files changed, 128 insertions(+), 54 deletions(-)

diff --git a/packages/s2-core/src/common/interface/s2Options.ts b/packages/s2-core/src/common/interface/s2Options.ts
index 53c2e92a72..de4b6df713 100644
--- a/packages/s2-core/src/common/interface/s2Options.ts
+++ b/packages/s2-core/src/common/interface/s2Options.ts
@@ -52,7 +52,7 @@ export interface S2BasicOptions<
   height?: number;
 
   /**
-   * 开启调试模式
+   * 开启调试模式 (打印额外信息)
    */
   debug?: boolean;
 
@@ -121,7 +121,11 @@ export interface S2BasicOptions<
   /**
    * 空值单元格占位符
    */
-  placeholder?: ((meta: Record<string, any>) => string) | string;
+  placeholder?:
+    | ((meta: Record<string, any>) => string | undefined | null)
+    | string
+    | undefined
+    | null;
 
   /**
    * 设备类型: pc / mobile
diff --git a/packages/s2-core/src/utils/text.ts b/packages/s2-core/src/utils/text.ts
index bb0756e413..1323fb1c82 100644
--- a/packages/s2-core/src/utils/text.ts
+++ b/packages/s2-core/src/utils/text.ts
@@ -46,7 +46,7 @@ import { renderMiniChart } from './g-mini-charts';
 
 export const getDisplayText = (
   text: string | number | null | undefined,
-  placeholder?: string,
+  placeholder?: string | undefined | null,
 ) => {
   const emptyPlaceholder = placeholder ?? EMPTY_PLACEHOLDER;
   // 对应维度缺少维度数据时, 会使用 EMPTY_FIELD_VALUE 填充, 实际渲染时统一转成 "-"
diff --git a/s2-site/.dumi/global.less b/s2-site/.dumi/global.less
index f064dd8480..ed1928fd6e 100644
--- a/s2-site/.dumi/global.less
+++ b/s2-site/.dumi/global.less
@@ -21,3 +21,7 @@ details {
     background-color: #f6f8fa !important;
   }
 }
+
+.demo-card-screenshot {
+  width: 100% !important;
+}
diff --git a/s2-site/docs/manual/advanced/custom/cell-size.zh.md b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
index aeec05c671..048f43f08d 100644
--- a/s2-site/docs/manual/advanced/custom/cell-size.zh.md
+++ b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
@@ -121,7 +121,7 @@ const s2Options = {
 
 :::info{title="提示"}
 
-明细表有一点特殊，由于只有列头，如果想给**特定行**设置不同的高度，则可以根据行序号调整
+明细表有一点特殊，由于只有列头，如果想给**特定行**设置不同的高度，则可以根据行序号调整 (从 `0` 开始)
 
 :::
 
@@ -131,8 +131,8 @@ const s2Options = {
     rowCell: {
       // 给第一行和第三行设置不同的高度
       heightByField: {
-        '1': 130,
-        '3': 60,
+        '0': 130,
+        '2': 60,
       },
     },
   },
@@ -204,8 +204,8 @@ const s2Options = {
 
 如果想给特定某一列设置不同的宽高，可以通过 `colCell` 的 `widthByField` 和 `heightByField` 预设宽高来实现，支持两种类型的配置：
 
-- **fieldId** （例：`root[&]家具[&]沙发[&]number`):  行列交叉后每一个列头节点对应的唯一 ID, 适用于宽高精确到具体的单元格 [（如何获取 ID）](/docs/manual/advanced/get-cell-data#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%8C%BA%E5%9F%9F%E5%8D%95%E5%85%83%E6%A0%BC)
-- **field** （例：`city`): 对应 `s2DataConfig.fields.columns` 中配置的 `field`, 适用于精确到某一类维值的单元格
+- **fieldId** (例：`root[&]家具[&]沙发[&]number`): 行列交叉后每一个列头节点对应的唯一 ID, 适用于宽高精确到具体的单元格 [（如何获取 ID）](/docs/manual/advanced/get-cell-data#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%8C%BA%E5%9F%9F%E5%8D%95%E5%85%83%E6%A0%BC)
+- **field** (例：`city`): 对应 `s2DataConfig.fields.columns` 中配置的 `field`, 适用于精确到某一类维值的单元格
 
 :::
 
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index 29d2f71416..3baaeaaed5 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -9,7 +9,7 @@ tag: New
 ## 官网地址变化
 
 :::warning{title="注意"}
-原官网 <https://s2.antv.vision> 和 <https://antv-s2.gitee.io> 不再维护和使用，请使用最新的文档，已确保您看到的不是过时的文档。
+原官网 <https://s2.antv.vision> 和 <https://antv-s2.gitee.io> 不再维护和使用，请使用最新的文档，确保您看到的不是过时的文档。
 :::
 
 - 原 `v1` 官网迁移至 <https://s2-v1.antv.antgroup.com>.
@@ -28,7 +28,7 @@ tag: New
 - `@antv/s2@next` 对应 `2.x` 版本
 - `@antv/s2@latest` 对应 `1.x` 版本
 
-在 `@antv/s2@next` 版本稳定后，`latest` 将默认指向 `2.x` 版本。
+在 `@antv/s2@next` 版本稳定后，**`latest` 将默认指向 `2.x` 版本**。
 
 :::
 
diff --git a/s2-site/examples/analysis/conditions/demo/intelligent-background.ts b/s2-site/examples/analysis/conditions/demo/intelligent-background.ts
index ce421fba5e..9816b7861e 100644
--- a/s2-site/examples/analysis/conditions/demo/intelligent-background.ts
+++ b/s2-site/examples/analysis/conditions/demo/intelligent-background.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, S2Options, S2Options } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
@@ -28,6 +28,7 @@ fetch(
         ],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
     await s2.render();
diff --git a/s2-site/examples/analysis/conditions/demo/meta.json b/s2-site/examples/analysis/conditions/demo/meta.json
index 6fae0af0a7..5983726005 100644
--- a/s2-site/examples/analysis/conditions/demo/meta.json
+++ b/s2-site/examples/analysis/conditions/demo/meta.json
@@ -82,7 +82,8 @@
         "zh": "开启文字智能反色",
         "en": "Intelligent background"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oUICMHjOA/7fd723cb-fc2a-45a5-a0ab-a2840127a48a.png"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*--3oTK25-wgAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/case/art/demo/meta.json b/s2-site/examples/case/art/demo/meta.json
index 77f7574aa4..5adbd7ddda 100644
--- a/s2-site/examples/case/art/demo/meta.json
+++ b/s2-site/examples/case/art/demo/meta.json
@@ -26,7 +26,8 @@
         "zh": "消失的文字 (交互小游戏)",
         "en": "Lost text"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3WDCR7PZY6MAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3WDCR7PZY6MAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/custom/custom-cell/demo/col-cell.ts b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
index daf7495a6a..9b931142d3 100644
--- a/s2-site/examples/custom/custom-cell/demo/col-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
@@ -22,6 +22,8 @@ class CustomColCell extends ColCell {
           },
         }),
       );
+
+      this.drawTextShape();
     };
   }
 }
diff --git a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
index aa56c4d21d..bed87f6065 100644
--- a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
@@ -21,6 +21,8 @@ class CustomCornerCell extends CornerCell {
           },
         }),
       );
+
+      this.drawTextShape();
     };
   }
 }
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts
index 37e11ec56c..42f0fc2d10 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-merged-cell.ts
@@ -8,7 +8,7 @@ class CustomMergedCell extends MergedCell {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
   drawBackgroundShape() {
     super.drawBackgroundShape();
-    this.backgroundShape.attr('fill', 'red');
+    this.backgroundShape.style.fill = 'red';
   }
 }
 
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
index 7a3e822182..35198d3371 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
@@ -133,6 +133,7 @@ fetch(
         return new CustomDataCell(viewMeta, viewMeta?.spreadsheet);
       },
     };
+
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
     s2.render();
diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell-placeholder.ts b/s2-site/examples/custom/custom-cell/demo/data-cell-placeholder.ts
index b61659a5d8..412c6ea41a 100644
--- a/s2-site/examples/custom/custom-cell/demo/data-cell-placeholder.ts
+++ b/s2-site/examples/custom/custom-cell/demo/data-cell-placeholder.ts
@@ -1,12 +1,12 @@
-import { PivotSheet, CornerCell } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -20,7 +20,8 @@ fetch(
         };
       }),
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       // 默认 "-"
@@ -36,7 +37,8 @@ fetch(
         return null;
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell.ts b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
index 3d31dab289..2d1c52b9d9 100644
--- a/s2-site/examples/custom/custom-cell/demo/data-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
@@ -22,6 +22,8 @@ class CustomDataCell extends DataCell {
           },
         }),
       );
+
+      this.drawTextShape();
     };
   }
 }
diff --git a/s2-site/examples/custom/custom-cell/demo/meta.json b/s2-site/examples/custom/custom-cell/demo/meta.json
index 42b1f3d65f..fe3b0bcee4 100644
--- a/s2-site/examples/custom/custom-cell/demo/meta.json
+++ b/s2-site/examples/custom/custom-cell/demo/meta.json
@@ -12,14 +12,6 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/v3rnigo9e%24/6862c027-eb75-49e4-88e4-40b9855202a1.png"
     },
-    {
-      "filename": "series-number-cell.ts",
-      "title": {
-        "zh": "自定义序号单元格",
-        "en": "custom series number cell"
-      },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-IXnSaGqY1EAAAAAAAAAAAAADmJ7AQ/original"
-    },
     {
       "filename": "row-cell.ts",
       "title": {
@@ -52,6 +44,15 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/KH6us7hvnV/a0860c18-3d00-48f9-8483-1b29de6cb149.png"
     },
+    {
+      "filename": "series-number-cell.ts",
+      "title": {
+        "zh": "自定义序号单元格",
+        "en": "custom series number cell"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-IXnSaGqY1EAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
+    },
     {
       "filename": "totals-cell.ts",
       "title": {
@@ -90,7 +91,8 @@
         "zh": "自定义 mini 图",
         "en": "custom mini chart"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*apnIT4KXP3YAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*apnIT4KXP3YAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     },
     {
       "filename": "data-cell-placeholder.ts",
@@ -98,7 +100,8 @@
         "zh": "自定义空数据单元格占位符",
         "en": "custom cell placeholder"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B-VMT7kCWL0AAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B-VMT7kCWL0AAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
index ee007fa585..7bd79f25f4 100644
--- a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
+++ b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
@@ -1,4 +1,11 @@
-import { PivotSheet, DataCell, drawObjectText } from '@antv/s2';
+/* eslint-disable max-lines-per-function */
+import {
+  PivotSheet,
+  DataCell,
+  drawObjectText,
+  S2DataConfig,
+  S2Options,
+} from '@antv/s2';
 import { isArray, isObject } from 'lodash';
 
 /**
@@ -12,6 +19,7 @@ class CustomDataCell extends DataCell {
 
     if (isObject(fieldValue) || isArray(fieldValue)) {
       drawObjectText(this);
+
       return;
     }
 
@@ -25,7 +33,7 @@ fetch(
   .then((res) => res.json())
   .then((res) => {
     const container = document.getElementById('container')!;
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -142,11 +150,11 @@ fetch(
       ],
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 1000,
       height: 680,
       style: {
-        cellCfg: {
+        dataCell: {
           height: 40,
         },
       },
@@ -156,11 +164,13 @@ fetch(
             field: 'number',
             mapping: (value, cellInfo) => {
               const { meta, colIndex } = cellInfo || {};
+
               if (colIndex === 0 || !value || !meta?.fieldValue) {
                 return {
                   fill: '#000',
                 };
               }
+
               return {
                 fill: value > 0 ? '#FF4D4F' : '#29A294',
               };
@@ -172,6 +182,7 @@ fetch(
         return new CustomDataCell(viewMeta, viewMeta?.spreadsheet);
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
     s2.render();
diff --git a/s2-site/examples/custom/custom-cell/demo/row-cell.ts b/s2-site/examples/custom/custom-cell/demo/row-cell.ts
index 777cf8c852..151c241b6a 100644
--- a/s2-site/examples/custom/custom-cell/demo/row-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/row-cell.ts
@@ -22,6 +22,8 @@ class CustomRowCell extends RowCell {
           },
         }),
       );
+
+      this.drawTextShape();
     };
   }
 }
diff --git a/s2-site/examples/custom/custom-g2-chart/demo/meta.json b/s2-site/examples/custom/custom-g2-chart/demo/meta.json
index 0459336bc3..cb47a4c03a 100644
--- a/s2-site/examples/custom/custom-g2-chart/demo/meta.json
+++ b/s2-site/examples/custom/custom-g2-chart/demo/meta.json
@@ -10,7 +10,8 @@
         "zh": "在单元格内绘制 G2 图表",
         "en": "render G2 charts"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A9oWSbAfHu4AAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A9oWSbAfHu4AAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts b/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts
index f5aadbb5ab..acc2455fdb 100644
--- a/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts
+++ b/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts
@@ -41,10 +41,10 @@ fetch(
       width: 600,
       height: 480,
       layoutCoordinate: (spreadsheet, rowNode, colNode) => {
-        // layoutCoordinate 用于改变行列叶子结点的尺寸（长、宽）和坐标（x、y）
+        // layoutCoordinate 用于特定场景改变行列叶子节点的尺寸（长、宽）和坐标（x、y）
+        // 如果只希望改变宽高, 请查看 "自定义单元格宽高" 章节 https://s2.antv.antgroup.com/manual/advanced/custom/cell-size
         // 改变「宁波市」节点高度
-        console.log(rowNode);
-        console.log(colNode);
+        console.log(rowNode, colNode);
         if (rowNode?.value === '宁波市') {
           rowNode.height = 100;
         }
diff --git a/s2-site/examples/custom/custom-plugins/demo/meta.json b/s2-site/examples/custom/custom-plugins/demo/meta.json
index 26f2771ccc..4a52116366 100644
--- a/s2-site/examples/custom/custom-plugins/demo/meta.json
+++ b/s2-site/examples/custom/custom-plugins/demo/meta.json
@@ -10,7 +10,8 @@
         "zh": "无障碍功能",
         "en": "a11y"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HIhnRq9EqIwAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HIhnRq9EqIwAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     },
     {
       "filename": "rough.ts",
@@ -18,7 +19,8 @@
         "zh": "手绘风格",
         "en": "rough"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ag6SSYgDpeYAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ag6SSYgDpeYAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/custom/custom-tree/demo/meta.json b/s2-site/examples/custom/custom-tree/demo/meta.json
index d42b8d48b1..50245620b7 100644
--- a/s2-site/examples/custom/custom-tree/demo/meta.json
+++ b/s2-site/examples/custom/custom-tree/demo/meta.json
@@ -10,7 +10,8 @@
         "zh": "透视表-自定义行头",
         "en": "custom pivot sheet row header"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/78uZ2l%24JQ/01a484d7-0edd-4ba0-882f-eed59fc209f1.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/78uZ2l%24JQ/01a484d7-0edd-4ba0-882f-eed59fc209f1.png",
+      "new": true
     },
     {
       "filename": "custom-pivot-col-header.ts",
@@ -18,7 +19,8 @@
         "zh": "透视表-自定义列头",
         "en": "custom pivot sheet col header"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qRXTQLH0nOoAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qRXTQLH0nOoAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     },
     {
       "filename": "custom-table-col-header.ts",
@@ -26,7 +28,8 @@
         "zh": "明细表-自定义列头",
         "en": "custom table sheet col header"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HqD0RKp-7MIAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HqD0RKp-7MIAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     },
     {
       "filename": "custom-tree.ts",
@@ -34,7 +37,8 @@
         "zh": "自定义目录树",
         "en": "custom tree"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/tSqlcOkaF/ee66a55f-32ea-4b33-8275-30b92439e00b.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/tSqlcOkaF/ee66a55f-32ea-4b33-8275-30b92439e00b.png",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/interaction/advanced/demo/meta.json b/s2-site/examples/interaction/advanced/demo/meta.json
index bdc80aaa85..28e8b65f9a 100644
--- a/s2-site/examples/interaction/advanced/demo/meta.json
+++ b/s2-site/examples/interaction/advanced/demo/meta.json
@@ -114,7 +114,8 @@
         "zh": "透视表 - 平铺模式冻结首行",
         "en": "pivot mode freezes head rows"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ge0_S5iMB-wAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ge0_S5iMB-wAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     },
     {
       "filename": "frozen-pivot-tree.ts",
@@ -122,7 +123,8 @@
         "zh": "透视表 - 树状模式冻结首行",
         "en": "tree mode freezes head rows"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ncdCT7NB2I0AAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ncdCT7NB2I0AAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/interaction/basic/demo/meta.json b/s2-site/examples/interaction/basic/demo/meta.json
index 1fc94dca43..a9f7946408 100644
--- a/s2-site/examples/interaction/basic/demo/meta.json
+++ b/s2-site/examples/interaction/basic/demo/meta.json
@@ -106,7 +106,8 @@
         "zh": "交互主题配置",
         "en": "Interaction state theme"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6zM5TpfV7qIAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6zM5TpfV7qIAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/layout/custom/demo/custom-table-size.ts b/s2-site/examples/layout/custom/demo/custom-table-size.ts
index 58b0554f17..4414267c0e 100644
--- a/s2-site/examples/layout/custom/demo/custom-table-size.ts
+++ b/s2-site/examples/layout/custom/demo/custom-table-size.ts
@@ -49,6 +49,7 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
         // 明细表每一行根据行序号单独设置
         rowCell: {
           heightByField: {
+            '0': 40,
             '1': 130,
             '3': 60,
             '10': 80,
diff --git a/s2-site/examples/layout/custom/demo/meta.json b/s2-site/examples/layout/custom/demo/meta.json
index 999fbc3edf..9b843cb333 100644
--- a/s2-site/examples/layout/custom/demo/meta.json
+++ b/s2-site/examples/layout/custom/demo/meta.json
@@ -34,7 +34,8 @@
         "zh": "自定义树状结构行头宽度",
         "en": "Custom Tree Row Width"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/y%26PAejhkm/e9b18b27-a6c9-4c05-b75c-83b25030d0c6.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/y%26PAejhkm/e9b18b27-a6c9-4c05-b75c-83b25030d0c6.png",
+      "new": true
     },
     {
       "filename": "custom-tree-collapse-nodes.ts",
@@ -42,7 +43,8 @@
         "zh": "自定义树状结构折叠/展开节点",
         "en": "Custom Tree Collapse Nodes"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*C36jTrhZBAsAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*C36jTrhZBAsAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     },
     {
       "filename": "hide-columns.ts",
@@ -74,7 +76,8 @@
         "zh": "多行文本 / 文本自动换行",
         "en": "Multi Line Text"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uMV6QYL-TcwAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uMV6QYL-TcwAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/react-component/sheet/demo/meta.json b/s2-site/examples/react-component/sheet/demo/meta.json
index 70af6ce89c..e765c4a544 100644
--- a/s2-site/examples/react-component/sheet/demo/meta.json
+++ b/s2-site/examples/react-component/sheet/demo/meta.json
@@ -42,7 +42,8 @@
         "zh": "mini 图表组件",
         "en": "StrategySheet with mini chart"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*lLfATbGywcEAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*lLfATbGywcEAAAAAAAAAAAAAARQnAQ",
+      "new": true
     },
     {
       "filename": "mobile-pivot.tsx",
@@ -50,7 +51,8 @@
         "zh": "移动端透视表组件",
         "en": "Mobile PivotSheet component"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*cf2uQYVVStQAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*cf2uQYVVStQAAAAAAAAAAAAAARQnAQ",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
index e7b2d50380..655b8f28e2 100644
--- a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
+++ b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx
@@ -1,7 +1,19 @@
+import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import React from 'react';
 
+// 临时处理老数据格式
+function process(children) {
+  return children.map((item) => {
+    return {
+      ...item,
+      field: item.key,
+      children: process(item.children),
+    };
+  });
+}
+
 /**
  * 该示例为 React 版本的趋势分析表
  * 如何在普通图表中使用, 请查看: https://s2.antv.antgroup.com/zh/examples/custom/custom-cell#mini-chart
@@ -12,6 +24,14 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
+    const s2DataConfig: S2DataConfig = {
+      ...dataCfg,
+      fields: {
+        ...dataCfg.fields,
+        rows: process(dataCfg.fields.customTreeItems),
+      },
+    };
+
     const s2Options: SheetComponentOptions = {
       width: 1000,
       height: 480,
@@ -50,7 +70,7 @@ fetch(
       .createRoot(document.getElementById('container'))
       .render(
         <SheetComponent
-          dataCfg={dataCfg}
+          dataCfg={s2DataConfig}
           options={s2Options}
           sheetType="strategy"
         />,
diff --git a/s2-site/examples/react-component/tooltip/demo/meta.json b/s2-site/examples/react-component/tooltip/demo/meta.json
index 7f9ec76d4a..e6f440d246 100644
--- a/s2-site/examples/react-component/tooltip/demo/meta.json
+++ b/s2-site/examples/react-component/tooltip/demo/meta.json
@@ -34,7 +34,8 @@
         "zh": "自定义 Tooltip 内容 (@antv/s2)",
         "en": "Custom Tooltip Content (@antv/s2)"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/j1fkyyIDdh/939fb3ed-b1c7-48a4-a329-bd1d64ddcb9c.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/j1fkyyIDdh/939fb3ed-b1c7-48a4-a329-bd1d64ddcb9c.png",
+      "new": true
     },
     {
       "filename": "custom-content-react.tsx",
diff --git a/s2-site/examples/theme/default/demo/meta.json b/s2-site/examples/theme/default/demo/meta.json
index 99771d13ad..d7bcbb6ad6 100644
--- a/s2-site/examples/theme/default/demo/meta.json
+++ b/s2-site/examples/theme/default/demo/meta.json
@@ -34,7 +34,8 @@
         "zh": "暗黑",
         "en": "Dark"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eRu9R7b1pGwAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eRu9R7b1pGwAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }

From 46228058d8541ef94bc4bb1a9a2a5e865ed52bc1 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 19 Jan 2024 15:33:38 +0800
Subject: [PATCH 24/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E8=A1=A8?=
 =?UTF-8?q?=E5=BD=A2=E6=80=81=E7=9B=B8=E5=85=B3=E6=96=87=E6=A1=A3,=20?=
 =?UTF-8?q?=E5=89=A5=E7=A6=BB=E8=A1=8C=E5=88=97=E5=86=BB=E7=BB=93=20demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/common/development.zh.md         |   8 -
 s2-site/docs/common/frozen.zh.md              |   2 +-
 s2-site/docs/common/packages.zh.md            |   6 +-
 .../advanced/custom/custom-header.zh.md       |  16 +-
 .../manual/basic/sheet-type/pivot-mode.zh.md  | 138 +++++++++++++-----
 .../manual/basic/sheet-type/table-mode.zh.md  | 104 +++++++++----
 s2-site/docs/manual/getting-started.zh.md     |   4 +-
 s2-site/examples/basic/pivot/demo/grid.ts     |   8 +-
 s2-site/examples/basic/pivot/demo/tree.ts     |   9 +-
 .../examples/custom/custom-tree/index.en.md   |   4 -
 .../examples/custom/custom-tree/index.zh.md   |   4 -
 .../interaction/advanced/demo/meta.json       |  18 ---
 .../examples/interaction/basic/demo/meta.json |  16 --
 s2-site/examples/layout/adaptive/index.en.md  |   3 +-
 s2-site/examples/layout/adaptive/index.zh.md  |   6 +-
 .../custom-header-group}/API.en.md            |   0
 .../custom-header-group}/API.zh.md            |   0
 .../demo/custom-pivot-col-header.ts           |   0
 .../demo/custom-pivot-row-header.ts           |   0
 .../demo/custom-table-col-header.ts           |   0
 .../custom-header-group}/demo/custom-tree.ts  |   0
 .../custom-header-group}/demo/meta.json       |   0
 .../layout/custom-header-group/index.en.md    |   4 +
 .../layout/custom-header-group/index.zh.md    |   4 +
 .../custom/demo/custom-row-col-cell-width.ts  |  12 +-
 .../custom/demo/custom-tree-collapse-nodes.ts |   8 +-
 .../custom/demo/custom-tree-row-width.ts      |   6 +
 s2-site/examples/layout/custom/index.en.md    |   3 +-
 s2-site/examples/layout/custom/index.zh.md    |   2 +-
 s2-site/examples/layout/frozen/API.en.md      |   4 +
 s2-site/examples/layout/frozen/API.zh.md      |   4 +
 .../frozen}/demo/frozen-pivot-grid.ts         |  15 +-
 .../frozen}/demo/frozen-pivot-tree.ts         |  13 +-
 s2-site/examples/layout/frozen/demo/meta.json |  44 ++++++
 .../frozen/demo/pivot-frozen-row-header.ts}   |  22 +--
 .../frozen/demo/table-frozen.ts}              |   0
 s2-site/examples/layout/frozen/index.en.md    |   4 +
 s2-site/examples/layout/frozen/index.zh.md    |   4 +
 38 files changed, 322 insertions(+), 173 deletions(-)
 delete mode 100644 s2-site/examples/custom/custom-tree/index.en.md
 delete mode 100644 s2-site/examples/custom/custom-tree/index.zh.md
 rename s2-site/examples/{custom/custom-tree => layout/custom-header-group}/API.en.md (100%)
 rename s2-site/examples/{custom/custom-tree => layout/custom-header-group}/API.zh.md (100%)
 rename s2-site/examples/{custom/custom-tree => layout/custom-header-group}/demo/custom-pivot-col-header.ts (100%)
 rename s2-site/examples/{custom/custom-tree => layout/custom-header-group}/demo/custom-pivot-row-header.ts (100%)
 rename s2-site/examples/{custom/custom-tree => layout/custom-header-group}/demo/custom-table-col-header.ts (100%)
 rename s2-site/examples/{custom/custom-tree => layout/custom-header-group}/demo/custom-tree.ts (100%)
 rename s2-site/examples/{custom/custom-tree => layout/custom-header-group}/demo/meta.json (100%)
 create mode 100644 s2-site/examples/layout/custom-header-group/index.en.md
 create mode 100644 s2-site/examples/layout/custom-header-group/index.zh.md
 create mode 100644 s2-site/examples/layout/frozen/API.en.md
 create mode 100644 s2-site/examples/layout/frozen/API.zh.md
 rename s2-site/examples/{interaction/advanced => layout/frozen}/demo/frozen-pivot-grid.ts (62%)
 rename s2-site/examples/{interaction/advanced => layout/frozen}/demo/frozen-pivot-tree.ts (63%)
 create mode 100644 s2-site/examples/layout/frozen/demo/meta.json
 rename s2-site/examples/{interaction/basic/demo/frozen-row-header.ts => layout/frozen/demo/pivot-frozen-row-header.ts} (60%)
 rename s2-site/examples/{interaction/basic/demo/frozen.ts => layout/frozen/demo/table-frozen.ts} (100%)
 create mode 100644 s2-site/examples/layout/frozen/index.en.md
 create mode 100644 s2-site/examples/layout/frozen/index.zh.md

diff --git a/s2-site/docs/common/development.zh.md b/s2-site/docs/common/development.zh.md
index 89870d3372..65eb9092fa 100644
--- a/s2-site/docs/common/development.zh.md
+++ b/s2-site/docs/common/development.zh.md
@@ -2,14 +2,6 @@
 [查看贡献指南](/manual/contribution)
 :::
 
-> 强烈建议花一点你的宝贵时间阅读：
-
-- [《提 Issue 前必读》](https://github.com/antvis/S2/issues/1904)
-- [《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)
-- [《如何有效地报告 Bug》](https://www.chiark.greenend.org.uk/~sgtatham/bugs-cn.html)
-- [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)
-- [《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545)
-
 > S2 使用 pnpm 作为包管理器
 
 ```bash
diff --git a/s2-site/docs/common/frozen.zh.md b/s2-site/docs/common/frozen.zh.md
index f2e7a2d7a5..f082f40ccf 100644
--- a/s2-site/docs/common/frozen.zh.md
+++ b/s2-site/docs/common/frozen.zh.md
@@ -9,7 +9,7 @@ order: 1
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | -- | --- | --  | -- | --- |
-| rowHeader | `boolean`\|`number` |  |   `true` | 冻结行头<br/>当值为 number 时，标识行头冻结的最大区域，取值范围： (0, 1)，0 表示不固定行头。<br/>当值为 boolean 时，true 对应冻结最大区域为 0.5, false 对应 0。<br/> （透视表有效） |
+| rowHeader | `boolean \| number` |  |   `true` | 冻结行头<br/>当值为 number 时，标识行头冻结的最大区域，取值范围： (0, 1)，0 表示不固定行头。<br/>当值为 boolean 时，true 对应冻结最大区域为 0.5, false 对应 0。<br/> （透视表有效） |
 | rowCount | `number` |  |  `0`  | 冻结行的数量，从顶部开始计数 （明细表有效） |
 | colCount | `number` |  |  `0`  | 冻结列的数量，从左侧开始计数 （明细表有效） |
 | trailingRowCount | `number` |    | `0` | 冻结行数量，从底部开始计数 （明细表有效） |
diff --git a/s2-site/docs/common/packages.zh.md b/s2-site/docs/common/packages.zh.md
index fd308c5f44..5419708476 100644
--- a/s2-site/docs/common/packages.zh.md
+++ b/s2-site/docs/common/packages.zh.md
@@ -7,9 +7,9 @@ order: 5
 
 创建 `S2` 表格有三种方式，基础类版本 `@antv/s2` 和 基于 `@antv/s2` 封装的 `React` 和 `Vue3` 版本：
 
-- `@antv/s2`: 基于 `Canvas` 和 [AntV/G](https://g.antv.antgroup.com) 开发，提供基本的表格展示/交互等能力。
-- `@antv/s2-react`: 基于 `@antv/s2` 封装，提供配套的 [分析组件](/manual/basic/analysis/switcher).
-- `@antv/s2-vue`: 基于 `Vue3` 和 `@antv/s2` 封装，提供配套的分析组件。
+- `@antv/s2`: 基于 `Canvas` 和 [AntV/G 5.0](https://g.antv.antgroup.com) 开发，提供基本的表格展示/交互等能力。
+- `@antv/s2-react`: 基于 `React 18`, `@antv/s2`, `antd` 封装，提供配套的 [分析组件](/manual/basic/analysis/switcher).
+- `@antv/s2-vue`: 基于 `Vue3`, `@antv/s2` , `ant-design-vue` 封装，提供配套的分析组件。
 
 **也就是说** `@antv/s2` 和**框架无关**，你可以在 `Vue`, `Angular` 等任意框架中使用。
 :::
diff --git a/s2-site/docs/manual/advanced/custom/custom-header.zh.md b/s2-site/docs/manual/advanced/custom/custom-header.zh.md
index f498226521..eaf4f38b0f 100644
--- a/s2-site/docs/manual/advanced/custom/custom-header.zh.md
+++ b/s2-site/docs/manual/advanced/custom/custom-header.zh.md
@@ -1,5 +1,5 @@
 ---
-title: 自定义行列头
+title: 自定义行列头分组
 order: 2
 tag: New
 ---
@@ -81,7 +81,7 @@ const data = [
 
 :::
 
-<Playground path='custom/custom-tree/demo/custom-pivot-row-header.ts' rid='container' height='400'></playground>
+<Playground path='layout/custom-header-group/demo/custom-pivot-row-header.ts' rid='custom-pivot-row-header' height='400'></playground>
 
 ```ts
 const s2DataConfig = {
@@ -103,7 +103,7 @@ const s2Options = {
 };
 ```
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/78uZ2l%24JQ/01a484d7-0edd-4ba0-882f-eed59fc209f1.png" width="1000" alt="preview"/>
+<img src="https://gw.alipayobjects.com/zos/antfincdn/78uZ2l%24JQ/01a484d7-0edd-4ba0-882f-eed59fc209f1.png" width="1000" alt="preview" />
 
 #### 树状模式
 
@@ -113,7 +113,7 @@ const s2Options = {
 };
 ```
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/iJft9ExZs/da1f768c-7689-44df-be54-708442a74d76.png" width="1000" alt="preview"/>
+<img src="https://gw.alipayobjects.com/zos/antfincdn/iJft9ExZs/da1f768c-7689-44df-be54-708442a74d76.png" width="1000" alt="preview" />
 
 ### 1.2 自定义列头
 
@@ -124,7 +124,7 @@ const s2Options = {
 
 :::
 
-<Playground path='custom/custom-tree/demo/custom-pivot-col-header.ts' rid='container-2' height='400'></playground>
+<Playground path='layout/custom-header-group/demo/custom-pivot-col-header.ts' rid='custom-pivot-col-header' height='400'></playground>
 
 ```ts
 const s2DataConfig = {
@@ -229,11 +229,11 @@ const s2DataConfig = {
 
 :::
 
-<Playground path='custom/custom-tree/demo/custom-table-col-header.ts' rid='container-3' height='400'></playground>
+<Playground path='layout/custom-header-group/demo/custom-table-col-header.ts' rid='custom-table-col-header' height='400'></playground>
 
 ## 3. 行列头文本格式化
 
-自定义节点默认使用 `当前节点展示名`, 即 `CustomTreeNode.title`, 也可以使用通用的 [Meta](/api/general/s-2-data-config#meta) 来进行格式化
+自定义节点默认使用 `当前节点展示名`, 即 `CustomTreeNode.title`, 也可以使用通用的 [Meta](/api/general/s-2-data-config#meta) 来进行格式化，[查看更多](/manual/basic/formatter)
 
 ```ts
 const s2DataConfig: S2DataConfig = {
@@ -252,4 +252,4 @@ const s2DataConfig: S2DataConfig = {
 
 ## 4. 更多应用
 
-基于自定义行列头，我们可以衍生出更多的使用场景，比如基于 `自定义行头` + `树状模式`, 我们可以自定义出一个 [趋势分析表分析组件](zh/docs/manual/basic/analysis/strategy/).
+基于自定义行列头，我们可以衍生出更多的使用场景，比如基于 `自定义行头` + `树状模式`, 我们可以自定义出一个 [趋势分析表分析组件](/docs/manual/basic/analysis/strategy/).
diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
index a8e8e9334f..26f6056dad 100644
--- a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
@@ -3,11 +3,12 @@ title: 透视表
 order: 1
 tag: Updated
 ---
+
 ## 简介
 
 透视表也叫做交叉表或多维表，显示多变量之间相互关系的一种表格，可以帮助用户发现它们之间的相互作用，帮助业务进行交叉探索分析，是目前商业 BI 分析领域中使用频率最高的图表之一。
 
-<img alt="pivot-mode" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*swH5TodvsMwAAAAAAAAAAAAAARQnAQ" width="600">
+<img alt="pivot-mode" src="https://gw.alipayobjects.com/zos/antfincdn/a6zSe1gvvy/f97ed6ec-0a5d-49b7-8492-754611d0aea6.png" width="600" />
 
 ## 使用
 
@@ -15,14 +16,10 @@ tag: Updated
 <div id="container" />
 ```
 
-### React 组件方式
-
-```tsx
-import React from "react";
-import { SheetComponent } from "@antv/s2-react";
-import '@antv/s2-react/dist/style.min.css';
+```ts
+import { PivotSheet } from "@antv/s2";
 
-// 1. 准备数据
+// 准备数据
 const data = [
   {
     province: "浙江",
@@ -54,7 +51,7 @@ const data = [
   },
 ];
 
-// 2. 配置数据
+// 配置数据
 const s2DataConfig = {
   fields: {
     rows: ["province", "city"],
@@ -64,43 +61,94 @@ const s2DataConfig = {
   data,
 };
 
-// 3. 添加配置
+// 添加配置
 const s2Options = {
   width: 600,
   height: 600,
 };
 
-// 4. 渲染
-const App = () => {
-  return (
-    <SheetComponent
-      dataCfg={s2DataConfig}
-      options={s2Options}
-    />
-  )
+// 渲染
+async function bootstrap() {
+  const container = document.getElementById('container');
+  const s2 = new PivotSheet(container, dataCfg, options);
+
+  await s2.render();
 }
+
+bootstrap()
+
 ```
 
-​📊 查看 [React 版本透视表示例](/examples/react-component/sheet#pivot) 和 [API 文档](/api/components/sheet-component)。
+<Playground path='/basic/pivot/demo/grid.ts' rid='pivot-grid' height='300'></playground>
 
-### PivotSheet 类方式
+​[查看示例](/examples/basic/pivot#grid) 和 [API 文档](/api/general/s2options)。
 
-如果不打算依赖 `React`，可以在上面第三步之后直接调用：
+## 在 React 中使用
 
-```ts
-import { PivotSheet } from "@antv/s2";
+### 使用 `@antv/s2`
 
-async function bootstrap() {
-  const container = document.getElementById('container');
-  const s2 = new PivotSheet(container, dataCfg, options);
+```tsx
+import React from "react";
+import { PivotSheet } from '@antv/s2';
 
-  await s2.render();
+const s2Options = {
+  width: 400,
+  height: 200,
+};
+
+const App = () => {
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const shouldInit = React.useRef(true);
+  const isDevMode = React.useMemo(() => {
+    try {
+      return process.env['NODE_ENV'] !== 'production';
+    } catch {
+      return false;
+    }
+  }, []);
+
+  React.useEffect(() => {
+    // 兼容 React 18 StrictMode 开发环境下渲染两次
+    if (isDevMode && !shouldInit.current) {
+      return;
+    }
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+    shouldInit.current = false;
+
+    return () => {
+      s2?.destroy?.();
+    };
+  }, []);
+
+  return <div id="container" ref={containerRef} />
 }
+```
 
-bootstrap()
+### 使用 `@antv/s2-react` <Badge type="success">推荐</Badge>
+
+```tsx
+import React from "react";
+import { SheetComponent } from '@antv/s2-react';
+import '@antv/s2-react/dist/style.min.css';
+
+const s2Options = {
+  width: 400,
+  height: 200,
+};
+
+const App = () => {
+  return (
+    <SheetComponent
+      sheetType="pivot"
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
-​📊 查看 [类方式透视表示例](/examples/basic/pivot#grid) 和 [API 文档](/api/general/s2options)。
+​[查看示例](/examples/react-component/sheet#pivot) 和 [API 文档](/api/components/sheet-component)。
 
 ## 特性
 
@@ -116,17 +164,29 @@ bootstrap()
 
 当行头固定时，行头会有一个独立的可滚动区域，如果关闭冻结行头，则滚动区域为整个表格。
 
-<Playground path='interaction/basic/demo/frozen-row-header.ts' rid='frozen-row-header' height='300'></playground>
+<Playground path='layout/frozen/demo/pivot-frozen-row-header.ts' rid='pivot-frozen-row-header' height='300'></playground>
 
 <br/>
 
 ```ts
 const s2Options = {
-  frozenRowHeader: false, // 默认开启
+  frozen: {
+    rowHeader: false, // 默认开启
+  }
 }
 ```
 
-<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kk0ETbbbnOsAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="preview">
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kk0ETbbbnOsAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="preview" />
+
+默认最大冻结宽度为表格区域的 `1/2`, 支持自定义：
+
+```ts
+const s2Options = {
+  frozen: {
+    rowHeader: 0.2, // 默认 0.5 （可选范围 0 - 1)
+  }
+}
+```
 
 ### 冻结首行 <Badge type="success">@antv/s2@^1.53.0 新增</Badge>
 
@@ -137,7 +197,7 @@ const s2Options = {
 - 首行不存在子节点（适用于总计置于顶部，只有单个维值，树状模式等场景）。
 - 分页场景暂不支持。
 
-`s2Options` 中配置 `frozenFirstRow` 开启首行冻结能力
+`s2Options` 中配置 `frozen.firstRow` 开启首行冻结能力
 
 :::
 
@@ -145,8 +205,10 @@ const s2Options = {
 
 ```ts
 const s2Options = {
-  frozenFirstRow: true,
   hierarchyType: 'grid',
+  frozen: {
+    firstRow: true,
+  },
   // 需要开启行总计 & 总计行置于顶部
   totals: {
     row: {
@@ -157,7 +219,7 @@ const s2Options = {
 }
 ```
 
-<Playground path='interaction/advanced/demo/frozen-pivot-grid.ts' rid='container-grid' height='300'></playground>
+<Playground path='layout/frozen/demo/frozen-pivot-grid.ts' rid='container-grid' height='300'></playground>
 
 <br/>
 
@@ -165,11 +227,13 @@ const s2Options = {
 
 ```ts
 const s2Options = {
-  frozenFirstRow: true,
   hierarchyType: 'tree',
+  frozen: {
+    firstRow: true,
+  },
 }
 ```
 
-<Playground path='interaction/advanced/demo/frozen-pivot-tree.ts' rid='container-tree' height='300'></playground>
+<Playground path='layout/frozen/demo/frozen-pivot-tree.ts' rid='container-tree' height='300'></playground>
 
 <br/>
diff --git a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
index f60b36919f..3a965af573 100644
--- a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
@@ -1,30 +1,27 @@
 ---
 title: 明细表
 order: 2
+tag: Updated
 ---
 
 ## 简介
 
 明细表是 `S2` 的基础形态之一。明细表就是普通的表格，在列头下把每行数据直接展示出来。主要用于大数据场景下明细数据的展示。
 
-<img alt="pivot-mode" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*PmpvRrcBEbMAAAAAAAAAAAAAARQnAQ" width="600" />
-
 明细表和透视表共享 [基础交互](/manual/advanced/interaction/basic)、[主题](/manual/basic/theme) 、[复制](/manual/basic/analysis/export)、[自定义单元格](/manual/advanced/custom/hook) 等能力。除此之外，明细表还支持 [行列冻结](/examples/interaction/basic#froze) 等特色功能。在海量明细数据渲染场景下，明细表可以替换基于 `DOM` 的表格组件，来提升性能和用户体验。
 
+<img alt="pivot-mode" src="https://gw.alipayobjects.com/zos/antfincdn/jWifHNLOsB/08db1064-bb09-4d44-b42b-26aed1766545.png" width="600" />
+
 ## 使用
 
 ```html
 <div id="container" />
 ```
 
-### React 组件方式
-
-```tsx
-import React from "react";
-import { SheetComponent } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
+```ts
+import { TableSheet } from "@antv/s2";
 
-// 1. 准备数据
+// 准备数据
 const data = [
   {
     province: "浙江",
@@ -40,7 +37,7 @@ const data = [
   },
 ];
 
-// 2. 配置数据
+// 配置数据
 const s2DataConfig = {
   fields: {
     columns: ["province", "city", "type", "price"], // 要展示的列头字段 id 列表
@@ -67,13 +64,75 @@ const s2DataConfig = {
   data,
 };
 
-// 3. 添加配置
+// 渲染
+async function bootstrap() {
+  const container = document.getElementById('container');
+  const s2 = new TableSheet(container, dataCfg, options);
+
+  await s2.render();
+}
+
+bootstrap()
+```
+
+<Playground path='basic/table/demo/table.ts' rid='table' height='300'></playground>
+
+​[查看示例](/examples/basic/table) 和 [API 文档](/api/general/s2options)。
+
+## 在 React 中使用
+
+### 使用 `@antv/s2`
+
+```tsx
+import React from "react";
+import { TableSheet } from '@antv/s2';
+
+const s2Options = {
+  width: 400,
+  height: 200,
+};
+
+const App = () => {
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const shouldInit = React.useRef(true);
+  const isDevMode = React.useMemo(() => {
+    try {
+      return process.env['NODE_ENV'] !== 'production';
+    } catch {
+      return false;
+    }
+  }, []);
+
+  React.useEffect(() => {
+    // 兼容 React 18 StrictMode 开发环境下渲染两次
+    if (isDevMode && !shouldInit.current) {
+      return;
+    }
+
+    const s2 = new TableSheet(container, dataCfg, s2Options);
+    shouldInit.current = false;
+
+    return () => {
+      s2?.destroy?.();
+    };
+  }, []);
+
+  return <div id="container" ref={containerRef} />
+}
+```
+
+### 使用 `@antv/s2-react` <Badge type="success">推荐</Badge>
+
+```tsx
+import React from "react";
+import { SheetComponent } from '@antv/s2-react';
+import '@antv/s2-react/dist/style.min.css';
+
 const s2Options = {
   width: 400,
   height: 200,
 };
 
-// 4, 渲染
 const App = () => {
   return (
     <SheetComponent
@@ -85,24 +144,13 @@ const App = () => {
 }
 ```
 
-### TableSheet 类方式
-
-如果不打算依赖 React，可以在上面第三步之后直接调用：
-
-```ts
-import { TableSheet } from "@antv/s2";
-
-const container = document.getElementById('container');
-const s2 = new TableSheet(container, dataCfg, options);
-
-await s2.render();
-```
+[查看示例](/examples/react-component/sheet/#table) 和 [API 文档](/api/components/sheet-component)
 
 ## 特性
 
 ### 序号
 
-在 `s2Options` 中传入 `showSeriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看 demo](/examples/basic/table#table)
+在 `s2Options` 中传入 `showSeriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看示例](/examples/basic/table#table)
 
 ```ts
 const s2Options = {
@@ -113,9 +161,9 @@ const s2Options = {
 
 ### 行列冻结
 
-行列冻结让特定行列在滚动时保持固定，从而一直保持在视口范围内，提供信息的对照和参考。[查看 demo](/examples/interaction/basic#frozen)
+行列冻结让特定行列在滚动时保持固定，从而一直保持在视口范围内，提供信息的对照和参考。[查看示例](/examples/interaction/basic#frozen)
 
-<Playground path='interaction/basic/demo/frozen.ts' rid='container' height='300'></playground>
+<Playground path='layout/frozen/demo/table-frozen.ts' rid='table-frozen' height='300'></playground>
 
 <br/>
 
@@ -132,6 +180,6 @@ const s2Options = {
 }
 ```
 
-效果如图：
+### 效果
 
 <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*tZkOSqYWVFQAAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />
diff --git a/s2-site/docs/manual/getting-started.zh.md b/s2-site/docs/manual/getting-started.zh.md
index 076d47b402..f00545468e 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -36,8 +36,6 @@ $ pnpm add @antv/s2@next @antv/s2-vue@next ant-design-vue@3.x
 
 ## 🔨 使用
 
-创建 `S2` 表格有三种方式，基础类版本 `(s2-core)` 和 基于 `core` 层 封装的 `React` 和 `Vue3` 版本
-
 ### 版本
 
 <embed src="@/docs/common/packages.zh.md"></embed>
@@ -221,6 +219,8 @@ const App = () => {
 yarn add antd @ant-design/icons
 ```
 
+:::
+
 ​📊 查看 [React 版本透视表 demo](/examples/react-component/sheet#pivot)。
 
 #### 表格移动端组件使用
diff --git a/s2-site/examples/basic/pivot/demo/grid.ts b/s2-site/examples/basic/pivot/demo/grid.ts
index f362d92be3..3860d01d31 100644
--- a/s2-site/examples/basic/pivot/demo/grid.ts
+++ b/s2-site/examples/basic/pivot/demo/grid.ts
@@ -44,8 +44,12 @@ fetch(
         copyWithFormat: true,
         copyWithHeader: true,
       },
-      // 冻结行头
-      // frozenRowHeader: true
+      frozen: {
+        // 默认冻结行头, 行头和数值区域都会展示滚动条
+        // rowHeader: false,
+        // 冻结行头时, 行头宽度占表格的 1/2, 支持动态调整 (0 - 1)
+        // rowHeader: 0.2,
+      },
     };
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
diff --git a/s2-site/examples/basic/pivot/demo/tree.ts b/s2-site/examples/basic/pivot/demo/tree.ts
index d874f58c1c..cc57cb7744 100644
--- a/s2-site/examples/basic/pivot/demo/tree.ts
+++ b/s2-site/examples/basic/pivot/demo/tree.ts
@@ -25,9 +25,12 @@ fetch(
           },
         },
       },
-
-      // 冻结行头
-      // frozenRowHeader: true
+      frozen: {
+        // 默认冻结行头, 行头和数值区域都会展示滚动条
+        // rowHeader: false,
+        // 冻结行头时, 行头宽度占表格的 1/2, 支持动态调整 (0 - 1)
+        // rowHeader: 0.2,
+      },
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
diff --git a/s2-site/examples/custom/custom-tree/index.en.md b/s2-site/examples/custom/custom-tree/index.en.md
deleted file mode 100644
index b2ec22e29f..0000000000
--- a/s2-site/examples/custom/custom-tree/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: custom tree
-order: 7
----
diff --git a/s2-site/examples/custom/custom-tree/index.zh.md b/s2-site/examples/custom/custom-tree/index.zh.md
deleted file mode 100644
index 12c2849931..0000000000
--- a/s2-site/examples/custom/custom-tree/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 自定义层级结构
-order: 7
----
diff --git a/s2-site/examples/interaction/advanced/demo/meta.json b/s2-site/examples/interaction/advanced/demo/meta.json
index 28e8b65f9a..d68eaec408 100644
--- a/s2-site/examples/interaction/advanced/demo/meta.json
+++ b/s2-site/examples/interaction/advanced/demo/meta.json
@@ -107,24 +107,6 @@
         "en": "Reaching the boundary of a scrolling area"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/JRAt1kb93/Kapture%2525202022-06-06%252520at%25252011.28.43.gif"
-    },
-    {
-      "filename": "frozen-pivot-grid.ts",
-      "title": {
-        "zh": "透视表 - 平铺模式冻结首行",
-        "en": "pivot mode freezes head rows"
-      },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ge0_S5iMB-wAAAAAAAAAAAAADmJ7AQ/original",
-      "new": true
-    },
-    {
-      "filename": "frozen-pivot-tree.ts",
-      "title": {
-        "zh": "透视表 - 树状模式冻结首行",
-        "en": "tree mode freezes head rows"
-      },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ncdCT7NB2I0AAAAAAAAAAAAADmJ7AQ/original",
-      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/interaction/basic/demo/meta.json b/s2-site/examples/interaction/basic/demo/meta.json
index a9f7946408..4c956de8ee 100644
--- a/s2-site/examples/interaction/basic/demo/meta.json
+++ b/s2-site/examples/interaction/basic/demo/meta.json
@@ -60,22 +60,6 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/F6l3SoxBCx/resize.gif"
     },
-    {
-      "filename": "frozen.ts",
-      "title": {
-        "zh": "明细表 - 行列冻结",
-        "en": "TableSheet - Frozen Rows And Cols"
-      },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%24a16EsOCR8/frozeb.gif"
-    },
-    {
-      "filename": "frozen-row-header.ts",
-      "title": {
-        "zh": "透视表 - 行头冻结",
-        "en": "PivotSheet - Frozen Row Header"
-      },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kk0ETbbbnOsAAAAAAAAAAAAADmJ7AQ/original"
-    },
     {
       "filename": "auto-reset-sheet-style.ts",
       "title": {
diff --git a/s2-site/examples/layout/adaptive/index.en.md b/s2-site/examples/layout/adaptive/index.en.md
index 3ce5c2b845..cd92bc816f 100644
--- a/s2-site/examples/layout/adaptive/index.en.md
+++ b/s2-site/examples/layout/adaptive/index.en.md
@@ -1,5 +1,4 @@
 ---
 title: Adaptive Layout
-order: 2
+order: 3
 ---
-
diff --git a/s2-site/examples/layout/adaptive/index.zh.md b/s2-site/examples/layout/adaptive/index.zh.md
index 14803c8cca..c39ca9ae68 100644
--- a/s2-site/examples/layout/adaptive/index.zh.md
+++ b/s2-site/examples/layout/adaptive/index.zh.md
@@ -1,6 +1,4 @@
 ---
-title: 自适应布局 
-order: 2
+title: 自适应布局
+order: 3
 ---
-
-
diff --git a/s2-site/examples/custom/custom-tree/API.en.md b/s2-site/examples/layout/custom-header-group/API.en.md
similarity index 100%
rename from s2-site/examples/custom/custom-tree/API.en.md
rename to s2-site/examples/layout/custom-header-group/API.en.md
diff --git a/s2-site/examples/custom/custom-tree/API.zh.md b/s2-site/examples/layout/custom-header-group/API.zh.md
similarity index 100%
rename from s2-site/examples/custom/custom-tree/API.zh.md
rename to s2-site/examples/layout/custom-header-group/API.zh.md
diff --git a/s2-site/examples/custom/custom-tree/demo/custom-pivot-col-header.ts b/s2-site/examples/layout/custom-header-group/demo/custom-pivot-col-header.ts
similarity index 100%
rename from s2-site/examples/custom/custom-tree/demo/custom-pivot-col-header.ts
rename to s2-site/examples/layout/custom-header-group/demo/custom-pivot-col-header.ts
diff --git a/s2-site/examples/custom/custom-tree/demo/custom-pivot-row-header.ts b/s2-site/examples/layout/custom-header-group/demo/custom-pivot-row-header.ts
similarity index 100%
rename from s2-site/examples/custom/custom-tree/demo/custom-pivot-row-header.ts
rename to s2-site/examples/layout/custom-header-group/demo/custom-pivot-row-header.ts
diff --git a/s2-site/examples/custom/custom-tree/demo/custom-table-col-header.ts b/s2-site/examples/layout/custom-header-group/demo/custom-table-col-header.ts
similarity index 100%
rename from s2-site/examples/custom/custom-tree/demo/custom-table-col-header.ts
rename to s2-site/examples/layout/custom-header-group/demo/custom-table-col-header.ts
diff --git a/s2-site/examples/custom/custom-tree/demo/custom-tree.ts b/s2-site/examples/layout/custom-header-group/demo/custom-tree.ts
similarity index 100%
rename from s2-site/examples/custom/custom-tree/demo/custom-tree.ts
rename to s2-site/examples/layout/custom-header-group/demo/custom-tree.ts
diff --git a/s2-site/examples/custom/custom-tree/demo/meta.json b/s2-site/examples/layout/custom-header-group/demo/meta.json
similarity index 100%
rename from s2-site/examples/custom/custom-tree/demo/meta.json
rename to s2-site/examples/layout/custom-header-group/demo/meta.json
diff --git a/s2-site/examples/layout/custom-header-group/index.en.md b/s2-site/examples/layout/custom-header-group/index.en.md
new file mode 100644
index 0000000000..af9045de15
--- /dev/null
+++ b/s2-site/examples/layout/custom-header-group/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Custom Header Group
+order: 2
+---
diff --git a/s2-site/examples/layout/custom-header-group/index.zh.md b/s2-site/examples/layout/custom-header-group/index.zh.md
new file mode 100644
index 0000000000..fdfa447be1
--- /dev/null
+++ b/s2-site/examples/layout/custom-header-group/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 自定义行列头分组
+order: 2
+---
diff --git a/s2-site/examples/layout/custom/demo/custom-row-col-cell-width.ts b/s2-site/examples/layout/custom/demo/custom-row-col-cell-width.ts
index b8aafd657d..1eac9272c3 100644
--- a/s2-site/examples/layout/custom/demo/custom-row-col-cell-width.ts
+++ b/s2-site/examples/layout/custom/demo/custom-row-col-cell-width.ts
@@ -17,20 +17,20 @@ fetch(
           // 固定配置: 行头单元格 100px
           // width: 100,
           // 动态配置: 叶子节点 300px, 非叶子节点 200px
-          width: (row) => {
-            console.log('row: ', row);
+          width: (node) => {
+            console.log('rowNode: ', node);
 
-            return row.isLeaf ? 300 : 200;
+            return node?.isLeaf ? 300 : 200;
           },
         },
         colCell: {
           // 固定配置: 每列 100px
           // width: 100,
           // 动态配置: 偶数列 100px, 奇数列 200px
-          width: (col) => {
-            console.log('col: ', col);
+          width: (node) => {
+            console.log('colNode: ', node);
 
-            return col.colIndex % 2 === 0 ? 100 : 200;
+            return node?.colIndex % 2 === 0 ? 100 : 200;
           },
         },
         dataCell: {
diff --git a/s2-site/examples/layout/custom/demo/custom-tree-collapse-nodes.ts b/s2-site/examples/layout/custom/demo/custom-tree-collapse-nodes.ts
index 641aeb4e51..be81fa9870 100644
--- a/s2-site/examples/layout/custom/demo/custom-tree-collapse-nodes.ts
+++ b/s2-site/examples/layout/custom/demo/custom-tree-collapse-nodes.ts
@@ -13,16 +13,16 @@ fetch(
       hierarchyType: 'tree',
       style: {
         rowCell: {
-          // 方式1: 折叠浙江省下面所有的城市 (根据节点 id)
+          // 方式 1: 折叠浙江省下面所有的城市 (根据节点 id)
           collapseFields: { 'root[&]浙江省': true },
 
-          // 方式2: 折叠所有城市 (根据维度, 即 (S2DataConfig.fields.rows 配置的维度))
+          // 方式 2: 折叠所有城市 (根据维度, 即 (S2DataConfig.fields.rows 配置的维度))
           // collapseFields: { city: true },
 
-          // 方式3: 配置展开层级 (优先级小于 collapseFields, 当 collapseFields 未配置, 或为 null 时有效)
+          // 方式 3: 配置展开层级 (优先级小于 collapseFields, 当 collapseFields 未配置, 或为 null 时有效)
           // expandDepth: 0,
 
-          // 方式4: 折叠所有 (优先级小于 collapseFields, expandDepth,  当 collapseFields 和 expandDepth 未配置, 或为 null 时有效)
+          // 方式 4: 折叠所有 (优先级小于 collapseFields, expandDepth,  当 collapseFields 和 expandDepth 未配置, 或为 null 时有效)
           // collapseAll: true,
         },
       },
diff --git a/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts b/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
index 1800bbb497..9fb18b368e 100644
--- a/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
+++ b/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
@@ -12,6 +12,12 @@ fetch(
       width: 600,
       height: 480,
       hierarchyType: 'tree',
+      frozen: {
+        // 默认冻结行头, 行头和数值区域都会展示滚动条
+        // rowHeader: false,
+        // 冻结行头时, 行头宽度占表格的 1/2, 支持动态调整 (0 - 1)
+        // rowHeader: 0.2,
+      },
       style: {
         rowCell: {
           width: 200,
diff --git a/s2-site/examples/layout/custom/index.en.md b/s2-site/examples/layout/custom/index.en.md
index 29d66cd025..4d0646d109 100644
--- a/s2-site/examples/layout/custom/index.en.md
+++ b/s2-site/examples/layout/custom/index.en.md
@@ -1,5 +1,4 @@
 ---
 title: Custom Height & Width
-order: 1
+order: 5
 ---
-
diff --git a/s2-site/examples/layout/custom/index.zh.md b/s2-site/examples/layout/custom/index.zh.md
index 2c43364e8c..95c52050a9 100644
--- a/s2-site/examples/layout/custom/index.zh.md
+++ b/s2-site/examples/layout/custom/index.zh.md
@@ -1,4 +1,4 @@
 ---
 title: 自定义布局 / 行列宽高
-order: 1
+order: 4
 ---
diff --git a/s2-site/examples/layout/frozen/API.en.md b/s2-site/examples/layout/frozen/API.en.md
new file mode 100644
index 0000000000..e2850c9bee
--- /dev/null
+++ b/s2-site/examples/layout/frozen/API.en.md
@@ -0,0 +1,4 @@
+---
+title: API
+order: 0
+---
diff --git a/s2-site/examples/layout/frozen/API.zh.md b/s2-site/examples/layout/frozen/API.zh.md
new file mode 100644
index 0000000000..e2850c9bee
--- /dev/null
+++ b/s2-site/examples/layout/frozen/API.zh.md
@@ -0,0 +1,4 @@
+---
+title: API
+order: 0
+---
diff --git a/s2-site/examples/interaction/advanced/demo/frozen-pivot-grid.ts b/s2-site/examples/layout/frozen/demo/frozen-pivot-grid.ts
similarity index 62%
rename from s2-site/examples/interaction/advanced/demo/frozen-pivot-grid.ts
rename to s2-site/examples/layout/frozen/demo/frozen-pivot-grid.ts
index 4c44b20818..439e2c0876 100644
--- a/s2-site/examples/interaction/advanced/demo/frozen-pivot-grid.ts
+++ b/s2-site/examples/layout/frozen/demo/frozen-pivot-grid.ts
@@ -1,24 +1,27 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 300,
-      frozenFirstRow: true,
+      frozen: {
+        firstRow: true,
+      },
       totals: {
         row: {
           showGrandTotals: true,
-          reverseLayout: true,
+          reverseGrandTotalsLayout: true,
         },
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/advanced/demo/frozen-pivot-tree.ts b/s2-site/examples/layout/frozen/demo/frozen-pivot-tree.ts
similarity index 63%
rename from s2-site/examples/interaction/advanced/demo/frozen-pivot-tree.ts
rename to s2-site/examples/layout/frozen/demo/frozen-pivot-tree.ts
index 2f3b6cc674..5e491fe1d3 100644
--- a/s2-site/examples/interaction/advanced/demo/frozen-pivot-tree.ts
+++ b/s2-site/examples/layout/frozen/demo/frozen-pivot-tree.ts
@@ -1,19 +1,22 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 300,
       hierarchyType: 'tree',
-      frozenFirstRow: true,
+      frozen: {
+        firstRow: true,
+      },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/layout/frozen/demo/meta.json b/s2-site/examples/layout/frozen/demo/meta.json
new file mode 100644
index 0000000000..6c631b8107
--- /dev/null
+++ b/s2-site/examples/layout/frozen/demo/meta.json
@@ -0,0 +1,44 @@
+{
+  "title": {
+    "zh": "表格自适应",
+    "en": "Table Adaptive"
+  },
+  "demos": [
+    {
+      "filename": "table-frozen.ts",
+      "title": {
+        "zh": "明细表 - 行列冻结",
+        "en": "TableSheet - Frozen Rows And Cols"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%24a16EsOCR8/frozeb.gif",
+      "new": true
+    },
+    {
+      "filename": "pivot-frozen-row-header.ts",
+      "title": {
+        "zh": "透视表 - 行头冻结",
+        "en": "PivotSheet - Frozen Row Header"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kk0ETbbbnOsAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
+    },
+    {
+      "filename": "frozen-pivot-grid.ts",
+      "title": {
+        "zh": "透视表 - 平铺模式冻结首行",
+        "en": "pivot mode freezes head rows"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ge0_S5iMB-wAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
+    },
+    {
+      "filename": "frozen-pivot-tree.ts",
+      "title": {
+        "zh": "透视表 - 树状模式冻结首行",
+        "en": "tree mode freezes head rows"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ncdCT7NB2I0AAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
+    }
+  ]
+}
diff --git a/s2-site/examples/interaction/basic/demo/frozen-row-header.ts b/s2-site/examples/layout/frozen/demo/pivot-frozen-row-header.ts
similarity index 60%
rename from s2-site/examples/interaction/basic/demo/frozen-row-header.ts
rename to s2-site/examples/layout/frozen/demo/pivot-frozen-row-header.ts
index e51fb43708..0dd15724f9 100644
--- a/s2-site/examples/interaction/basic/demo/frozen-row-header.ts
+++ b/s2-site/examples/layout/frozen/demo/pivot-frozen-row-header.ts
@@ -4,21 +4,25 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      hierarchyType: 'tree', // 'tree' | 'grid'
-      // 默认开启行头冻结, 关闭后滚动区域为整个表格
-      frozenRowHeader: true,
+      // 布局类型, 可选 'tree' | 'grid'
+      hierarchyType: 'tree',
+      frozen: {
+        // 默认开启行头冻结, 关闭后滚动区域为整个表格
+        rowHeader: true,
+        // 冻结行头时, 行头宽度占表格的 1/2, 支持动态调整 (0 - 1)
+        // rowHeader: 0.2,
+      },
       style: {
-        rowCfg: {
-          treeRowsWidth: 400,
-          width: 200,
+        rowCell: {
+          width: 400,
         },
-        colCfg: {
+        colCell: {
           width: 200,
         },
       },
@@ -34,5 +38,5 @@ fetch(
       console.log('row cell scroll', e);
     });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/frozen.ts b/s2-site/examples/layout/frozen/demo/table-frozen.ts
similarity index 100%
rename from s2-site/examples/interaction/basic/demo/frozen.ts
rename to s2-site/examples/layout/frozen/demo/table-frozen.ts
diff --git a/s2-site/examples/layout/frozen/index.en.md b/s2-site/examples/layout/frozen/index.en.md
new file mode 100644
index 0000000000..3dee9cccda
--- /dev/null
+++ b/s2-site/examples/layout/frozen/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Frozen
+order: 1
+---
diff --git a/s2-site/examples/layout/frozen/index.zh.md b/s2-site/examples/layout/frozen/index.zh.md
new file mode 100644
index 0000000000..3d85dc17a7
--- /dev/null
+++ b/s2-site/examples/layout/frozen/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 行列冻结
+order: 1
+---

From e062d82e3be1735773f6c50b24bb4266ab20da51 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 19 Jan 2024 16:06:02 +0800
Subject: [PATCH 25/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20README=20?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=E7=9A=84=E5=9B=BE=E7=89=87=E5=92=8C=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.en-US.md                               | 36 ++++++++++++++---
 README.md                                     | 26 +++++++++++-
 packages/s2-core/README.en-US.md              | 38 +++++++++++++++---
 packages/s2-core/README.md                    | 40 +++++++++++++++----
 packages/s2-react/README.md                   | 40 ++++++++++++++-----
 packages/s2-vue/README.md                     | 10 ++---
 .../docs/manual/advanced/chart-in-cell.zh.md  |  2 +-
 s2-site/docs/manual/basic/tooltip.zh.md       |  2 +-
 s2-site/docs/manual/getting-started.zh.md     |  8 ++--
 s2-site/docs/manual/introduction.zh.md        | 24 ++++++++++-
 10 files changed, 185 insertions(+), 41 deletions(-)

diff --git a/README.en-US.md b/README.en-US.md
index 7767030c43..99b62403fb 100644
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -146,6 +146,28 @@ const s2DataConfig = {
       price: '1',
     },
   ],
+  meta: [
+    {
+      field: 'price',
+      name: '价格',
+    },
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+  ],
 };
 ```
 
@@ -163,22 +185,26 @@ const s2Options = {
 ### 3. Component Rendering
 
 ```html
-<div id="container"></div>
+<div id="container" />
 ```
 
 ```ts
 import { PivotSheet } from '@antv/s2';
 
-const container = document.getElementById('container');
+async function bootstrap() {
+  const container = document.getElementById('container');
+
+  const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-const s2 = new PivotSheet(container, s2DataCfg, s2Options);
+  await s2.render();
+}
 
-s2.render();
+bootstrap()
 ```
 
 ### 4. Preview
 
-![result](https://gw.alipayobjects.com/zos/antfincdn/vCukbtVNvl/616f7ef1-e626-4225-99f8-dc8f6ca630dd.png)
+![result](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aTPcT4aKOq4AAAAAAAAAAAAADmJ7AQ/original)
 
 ### 📦 Packages
 
diff --git a/README.md b/README.md
index 545d425bb1..e927555f33 100644
--- a/README.md
+++ b/README.md
@@ -142,6 +142,28 @@ const s2DataConfig = {
       price: '1',
     },
   ],
+  meta: [
+    {
+      field: 'price',
+      name: '价格',
+    },
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+  ]
 };
 ```
 
@@ -159,7 +181,7 @@ const s2Options = {
 ### 3. 渲染
 
 ```html
-<div id="container"></div>
+<div id="container" />
 ```
 
 ```ts
@@ -178,7 +200,7 @@ bootstrap()
 
 ### 4. 结果
 
-![result](https://gw.alipayobjects.com/zos/antfincdn/vCukbtVNvl/616f7ef1-e626-4225-99f8-dc8f6ca630dd.png)
+![result](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aTPcT4aKOq4AAAAAAAAAAAAADmJ7AQ/original)
 
 ### 📦 版本
 
diff --git a/packages/s2-core/README.en-US.md b/packages/s2-core/README.en-US.md
index 99d1673d6d..2bc15f6100 100644
--- a/packages/s2-core/README.en-US.md
+++ b/packages/s2-core/README.en-US.md
@@ -77,9 +77,9 @@ demo components and expansion capabilities, it allows developers to use it quick
 ## 📦 Installation
 
 ```bash
-$ npm install @antv/s2
+$ pnpm add @antv/s2
 # yarn add @antv/s2
-# pnpm add @antv/s2
+# npm install @antv/s2 --save
 ```
 
 ## 🔨 Getting Started
@@ -146,6 +146,28 @@ const s2DataConfig = {
       price: '1',
     },
   ],
+  meta: [
+    {
+      field: 'price',
+      name: '价格',
+    },
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+  ]
 };
 ```
 
@@ -163,17 +185,21 @@ const s2Options = {
 ### 3. Component Rendering
 
 ```html
-<div id="container"></div>
+<div id="container" />
 ```
 
 ```ts
 import { PivotSheet } from '@antv/s2';
 
-const container = document.getElementById('container');
+async function bootstrap() {
+  const container = document.getElementById('container');
+
+  const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-const s2 = new PivotSheet(container, s2DataCfg, s2Options)
+  await s2.render();
+}
 
-s2.render()
+bootstrap()
 ```
 
 ### 4. Preview
diff --git a/packages/s2-core/README.md b/packages/s2-core/README.md
index cc05945824..f0c4f441cc 100644
--- a/packages/s2-core/README.md
+++ b/packages/s2-core/README.md
@@ -73,9 +73,9 @@ S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数
 ## 📦 安装
 
 ```bash
-$ npm install @antv/s2 --save
-# yarn add @antv/s2 --save
-# pnpm add @antv/s2 --save
+$ pnpm add @antv/s2
+# yarn add @antv/s2
+# npm install @antv/s2 --save
 ```
 
 ## 🔨 使用
@@ -142,6 +142,28 @@ const s2DataConfig = {
       price: '1',
     },
   ],
+  meta: [
+    {
+      field: 'price',
+      name: '价格',
+    },
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+  ]
 };
 ```
 
@@ -159,17 +181,21 @@ const s2Options = {
 ### 3. 渲染
 
 ```html
-<div id="container"></div>
+<div id="container" />
 ```
 
 ```ts
 import { PivotSheet } from '@antv/s2';
 
-const container = document.getElementById('container');
+async function bootstrap() {
+  const container = document.getElementById('container');
+
+  const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+  await s2.render();
+}
 
-s2.render();
+bootstrap()
 ```
 
 ### 4. 结果
diff --git a/packages/s2-react/README.md b/packages/s2-react/README.md
index adaca891bf..86e3959e61 100644
--- a/packages/s2-react/README.md
+++ b/packages/s2-react/README.md
@@ -2,20 +2,20 @@
 
 <div align="center">
 
-数据驱动的多维分析表格 (React 版本）。
+数据驱动的多维分析表格 ( React 版本 )
 
 <p>
  <a href="https://www.npmjs.com/package/@antv/s2-react" title="npm">
-    <img src="https://img.shields.io/npm/dm/@antv/s2-react.svg" alt="npm"/>
+    <img src="https://img.shields.io/npm/dm/@antv/s2-react.svg" alt="npm" />
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2-react" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2-react/latest.svg" alt="latest version">
+    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2-react/latest.svg?logo=npm" alt="latest version" />
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2-react" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2-react/next.svg" alt="next version">
+    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2-react/next.svg?logo=npm" alt="next version" />
   </a>
    <a href="https://github.com/antvis/S2/actions/workflows/test.yml" target="_blank">
-    <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
+    <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status" />
   </a>
 </p>
 
@@ -24,9 +24,9 @@
 ## 📦 安装
 
 ```bash
-$ npm install @antv/s2-react
+$ pnpm add @antv/s2-react
+# npm install @antv/s2-react --save
 # yarn add @antv/s2-react
-# pnpm add @antv/s2-react
 ```
 
 ## 🔨 使用
@@ -93,6 +93,28 @@ const s2DataConfig = {
       price: '1',
     },
   ],
+  meta: [
+    {
+      field: 'price',
+      name: '价格',
+    },
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+  ]
 };
 ```
 
@@ -115,7 +137,7 @@ const s2Options = {
 ### 3. 渲染
 
 ```html
-<div id="container"></div>
+<div id="container" />
 ```
 
 ```tsx
@@ -135,4 +157,4 @@ const App = () => {
 
 ### 4. 结果
 
-![result](https://gw.alipayobjects.com/zos/antfincdn/vCukbtVNvl/616f7ef1-e626-4225-99f8-dc8f6ca630dd.png)
+![result](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*pfF8QqZuj9EAAAAAAAAAAAAADmJ7AQ/original)
diff --git a/packages/s2-vue/README.md b/packages/s2-vue/README.md
index d585f570de..477983a152 100644
--- a/packages/s2-vue/README.md
+++ b/packages/s2-vue/README.md
@@ -2,17 +2,17 @@
 
 <div align="center">
 
-数据驱动的多维分析表格 (Vue3 版本）。
+数据驱动的多维分析表格 (Vue3 版本）
 
 <p>
  <a href="https://www.npmjs.com/package/@antv/s2-vue" title="npm">
     <img src="https://img.shields.io/npm/dm/@antv/s2-vue.svg" alt="npm"/>
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2-vue" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2-vue/latest.svg" alt="latest version">
+    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2-vue/latest.svg?logo=npm" alt="latest version">
   </a>
   <a href="https://www.npmjs.com/package/@antv/s2-vue" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2-vue/next.svg" alt="next version">
+    <img alt="Version" src="https://img.shields.io/npm/v/@antv/s2-vue/next.svg?logo=npm" alt="next version">
   </a>
    <a href="https://github.com/antvis/S2/actions/workflows/test.yml" target="_blank">
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
@@ -24,9 +24,9 @@
 ## 📦 安装
 
 ```bash
-$ npm install @antv/s2-vue
+$ pnpm add @antv/s2-vue
 # yarn add @antv/s2-vue
-# pnpm add @antv/s2-vue
+# npm install @antv/s2-vue --save
 ```
 
 ## 🔨 使用
diff --git a/s2-site/docs/manual/advanced/chart-in-cell.zh.md b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
index f1c732853a..c068c13a94 100644
--- a/s2-site/docs/manual/advanced/chart-in-cell.zh.md
+++ b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
@@ -313,7 +313,7 @@ const s2DataConfig = {
 :::warning{title="该功能依赖 G2 的 `5.x` 版本，请确保使用了正确的版本 "}
 
 ```bash
-yarn add @antv/g2 --save
+pnpm add @antv/g2
 ```
 
 使用 `G2` 提供的 `renderToMountedElement` 方法
diff --git a/s2-site/docs/manual/basic/tooltip.zh.md b/s2-site/docs/manual/basic/tooltip.zh.md
index 82985df3e3..568f716a4a 100644
--- a/s2-site/docs/manual/basic/tooltip.zh.md
+++ b/s2-site/docs/manual/basic/tooltip.zh.md
@@ -593,7 +593,7 @@ class CustomTooltip extends BaseTooltip {
 }
 ```
 
-##### `defineCustomElement` 自定义内容的方式 （不推荐）
+##### `defineCustomElement` 自定义内容的方式 <Badge type="error">不推荐</Badge>
 
 > 注意，customElements 不能重复注册，否则浏览器会报错
 
diff --git a/s2-site/docs/manual/getting-started.zh.md b/s2-site/docs/manual/getting-started.zh.md
index f00545468e..e443734992 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -30,7 +30,7 @@ $ pnpm add @antv/s2@next @antv/s2-vue@next ant-design-vue@3.x
 
 ```
 
-### 浏览器引入（不推荐）
+### 浏览器引入 <Badge type="error">不推荐</Badge>
 
 <embed src="@/docs/common/browser.zh.md"></embed>
 
@@ -169,7 +169,7 @@ const s2Options = {
 #### 3. 渲染
 
 ```html
-<div id="container"></div>
+<div id="container" />
 ```
 
 ```ts
@@ -216,7 +216,7 @@ const App = () => {
 `React` 版本的 `分析组件` 如：`高级排序`, `导出`, `下钻`, `Tooltip` 等组件基于 `antd` 组件库开发，如需使用，需要额外安装，并引入对应样式。
 
 ```bash
-yarn add antd @ant-design/icons
+pnpm add antd @ant-design/icons
 ```
 
 :::
@@ -297,7 +297,7 @@ createApp(App).mount('#app');
 `Vue3` 版本的 `分析组件` 如：`高级排序`, `导出`, `下钻`, `Tooltip` 等组件基于 `ant-design-vue@3.x` 组件库开发，如需使用，需要额外安装，并引入对应样式。
 
 ```bash
-yarn add ant-design-vue@3.x
+pnpm add ant-design-vue@3.x
 ```
 
 :::
diff --git a/s2-site/docs/manual/introduction.zh.md b/s2-site/docs/manual/introduction.zh.md
index fe66c28ff6..f17beda276 100644
--- a/s2-site/docs/manual/introduction.zh.md
+++ b/s2-site/docs/manual/introduction.zh.md
@@ -187,6 +187,28 @@ const s2DataConfig = {
       type: "纸张",
       cost: "1",
     }
+  ],
+  meta: [
+    {
+      field: 'price',
+      name: '价格',
+    },
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
   ]
 };
 ```
@@ -224,7 +246,7 @@ bootstrap();
 
 ### 4. 结果
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*Ln3cTY_Rk1cAAAAAAAAAAAAAARQnAQ" width="1000" alt="preview" />
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aTPcT4aKOq4AAAAAAAAAAAAADmJ7AQ/original" width="600" alt="preview" />
 
 ## 📦 版本
 

From 93158f93d369ed7a631cbdcfdd4069e9692168af Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 19 Jan 2024 17:52:28 +0800
Subject: [PATCH 26/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E5=BA=8F?=
 =?UTF-8?q?=E5=8F=B7=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-core/src/utils/theme.ts                   |  2 +-
 s2-site/docs/api/general/S2Options.zh.md              |  1 +
 s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md | 11 +++++++++++
 s2-site/examples/basic/pivot/demo/grid.ts             |  5 +++++
 s2-site/examples/basic/pivot/demo/tree.ts             |  4 ++++
 s2-site/examples/basic/table/demo/table.ts            |  4 +++-
 6 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/s2-core/src/utils/theme.ts b/packages/s2-core/src/utils/theme.ts
index 106c48c5e6..bbbeb61f91 100644
--- a/packages/s2-core/src/utils/theme.ts
+++ b/packages/s2-core/src/utils/theme.ts
@@ -1,6 +1,6 @@
 import { PALETTE_MAP, STYLE_ELEMENT_ID } from '../common/constant';
 import type { Palette, ThemeName } from '../common/interface/theme';
-import DarkVars from '../styles/theme/dark.less?inline';
+import DarkVars from '../styles/theme/dark.less';
 import { injectCssText } from './inject-css-text';
 
 /**
diff --git a/s2-site/docs/api/general/S2Options.zh.md b/s2-site/docs/api/general/S2Options.zh.md
index c37bbb4e4c..9ec9593aa5 100644
--- a/s2-site/docs/api/general/S2Options.zh.md
+++ b/s2-site/docs/api/general/S2Options.zh.md
@@ -27,6 +27,7 @@ const s2Options = {
 | pagination | [Pagination](#pagination) |  |    | 分页配置 |
 | frozen | [Frozen](#frozen) |  |    | 行列头冻结配置 |
 | showSeriesNumber | `boolean` |  |  `false` | 是否显示行序号 |
+| seriesNumberText | `string` |  |  `序号` | 自定义序号列标题 |
 | showDefaultHeaderActionIcon |`boolean` |  |   `true` | 是否展示默认行列头操作图标 |
 | headerActionIcons | [HeaderActionIcon[]](#headeractionicon) |  |   `false` | 自定义行列头操作图标（需要将 `showDefaultHeaderActionIcon` 置为 `false`） |
 | customSVGIcons | [CustomSVGIcon[]](#customsvgicon) |  |   `false` | 自定义 svg 图标 |
diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
index 26f6056dad..1dcd405383 100644
--- a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
@@ -152,6 +152,17 @@ const App = () => {
 
 ## 特性
 
+### 序号
+
+在 `s2Options` 中传入 `showSeriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看示例](/examples/basic/pivot#grid)
+
+```ts
+const s2Options = {
+  showSeriesNumber: true,
+  seriesNumberText: '自定义序号标题' // 默认 "序号"
+}
+```
+
 ### 展示形态
 
 默认支持 [平铺模式](/zh/examples/basic/pivot/#grid) 和 [树状模式](/zh/examples/basic/pivot/#tree) 两种展示形态。
diff --git a/s2-site/examples/basic/pivot/demo/grid.ts b/s2-site/examples/basic/pivot/demo/grid.ts
index 3860d01d31..ded83122d6 100644
--- a/s2-site/examples/basic/pivot/demo/grid.ts
+++ b/s2-site/examples/basic/pivot/demo/grid.ts
@@ -39,11 +39,16 @@ fetch(
     const s2Options: S2Options = {
       width: 600,
       height: 480,
+      hierarchyType: 'grid',
       interaction: {
         enableCopy: true,
         copyWithFormat: true,
         copyWithHeader: true,
       },
+      // 显示序号
+      // showSeriesNumber: true,
+      // 自定义序号列文本, 默认 "序号"
+      // seriesNumberText: '自定义序号标题',
       frozen: {
         // 默认冻结行头, 行头和数值区域都会展示滚动条
         // rowHeader: false,
diff --git a/s2-site/examples/basic/pivot/demo/tree.ts b/s2-site/examples/basic/pivot/demo/tree.ts
index cc57cb7744..594cd7927d 100644
--- a/s2-site/examples/basic/pivot/demo/tree.ts
+++ b/s2-site/examples/basic/pivot/demo/tree.ts
@@ -11,6 +11,10 @@ fetch(
       width: 600,
       height: 480,
       hierarchyType: 'tree',
+      // 显示序号
+      // showSeriesNumber: true,
+      // 自定义序号列文本, 默认 "序号"
+      // seriesNumberText: '自定义序号标题',
       style: {
         rowCell: {
           // 自定义树状模式下行头宽度
diff --git a/s2-site/examples/basic/table/demo/table.ts b/s2-site/examples/basic/table/demo/table.ts
index ba51aed51c..2d30585aad 100644
--- a/s2-site/examples/basic/table/demo/table.ts
+++ b/s2-site/examples/basic/table/demo/table.ts
@@ -36,7 +36,9 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      showSeriesNumber: true,
+      // 显示序号
+      // showSeriesNumber: true,
+      // 自定义序号列文本, 默认 "序号"
       // seriesNumberText: '自定义序号标题',
     };
 

From ad30971a6bdfabdebf39c8b8049fbd9c5934ee53 Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Thu, 25 Jan 2024 15:43:41 +0800
Subject: [PATCH 27/64] =?UTF-8?q?refactor:=20=E7=BB=86=E5=8C=96=20conditio?=
 =?UTF-8?q?n=20=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../unit/utils/condition/conditions-spec.ts   |  4 +-
 packages/s2-core/src/cell/base-cell.ts        | 12 ++--
 packages/s2-core/src/cell/data-cell.ts        | 13 ++--
 packages/s2-core/src/cell/header-cell.ts      | 10 ++-
 .../s2-core/src/cell/series-number-cell.ts    | 12 +---
 .../s2-core/src/common/interface/condition.ts | 66 ++++++++++---------
 packages/s2-core/src/utils/text.ts            |  4 +-
 packages/s2-core/src/utils/theme.ts           |  2 +-
 8 files changed, 65 insertions(+), 58 deletions(-)

diff --git a/packages/s2-core/__tests__/unit/utils/condition/conditions-spec.ts b/packages/s2-core/__tests__/unit/utils/condition/conditions-spec.ts
index 3182f67a48..7760df7370 100644
--- a/packages/s2-core/__tests__/unit/utils/condition/conditions-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/condition/conditions-spec.ts
@@ -6,7 +6,7 @@ describe('getIconLayoutPosition Test', () => {
       getIconPosition({
         field: 'value',
         mapping: () => {
-          return { fill: 'red' };
+          return { icon: 'xxx', fill: 'red' };
         },
       }),
     ).toEqual('right');
@@ -18,7 +18,7 @@ describe('getIconLayoutPosition Test', () => {
         field: 'value',
         position: 'left',
         mapping: () => {
-          return { fill: 'red' };
+          return { icon: 'xxx', fill: 'red' };
         },
       }),
     ).toEqual('left');
diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
index 31177d4058..3c9ce0cc0b 100644
--- a/packages/s2-core/src/cell/base-cell.ts
+++ b/packages/s2-core/src/cell/base-cell.ts
@@ -149,13 +149,13 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
 
   protected abstract getIconPosition(): PointLike;
 
-  protected abstract findFieldCondition(
-    conditions: Condition[] | undefined,
-  ): Condition | undefined;
+  protected abstract findFieldCondition<Con extends Condition>(
+    conditions?: Con[],
+  ): Con | undefined;
 
-  protected abstract mappingValue(
-    condition: Condition,
-  ): ConditionMappingResult | undefined | null;
+  protected abstract mappingValue<Result>(
+    condition: Condition<Result>,
+  ): ConditionMappingResult<Result>;
 
   protected abstract getBackgroundColor(): {
     backgroundColor: string | undefined;
diff --git a/packages/s2-core/src/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts
index a81850c762..2ef1f17867 100644
--- a/packages/s2-core/src/cell/data-cell.ts
+++ b/packages/s2-core/src/cell/data-cell.ts
@@ -472,7 +472,9 @@ export class DataCell extends BaseCell<ViewMeta> {
    * Find current field related condition
    * @param conditions
    */
-  public findFieldCondition(conditions: Condition[]): Condition | undefined {
+  public findFieldCondition<Con extends Condition>(
+    conditions: Con[] = [],
+  ): Con | undefined {
     return findLast(conditions, (item) =>
       item.field instanceof RegExp
         ? item.field.test(this.meta.valueField)
@@ -484,9 +486,10 @@ export class DataCell extends BaseCell<ViewMeta> {
    * Mapping value to get condition related attrs
    * @param condition
    */
-  public mappingValue(
-    condition: Condition,
-  ): ConditionMappingResult | undefined | null {
+
+  public mappingValue<Result>(
+    condition: Condition<Result>,
+  ): ConditionMappingResult<Result> {
     const value = this.meta.fieldValue as unknown as number;
     const rowDataInfo = this.spreadsheet.isTableMode()
       ? this.spreadsheet.dataSet.getCellData({
@@ -494,7 +497,7 @@ export class DataCell extends BaseCell<ViewMeta> {
         })
       : CellData.getFieldValue(this.meta.data as ViewMetaData);
 
-    return condition?.mapping(value, rowDataInfo as RawData, this);
+    return condition.mapping(value, rowDataInfo as RawData, this);
   }
 
   public updateByState(stateName: InteractionStateName) {
diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts
index 69a5dee2a5..0ad55dcc9a 100644
--- a/packages/s2-core/src/cell/header-cell.ts
+++ b/packages/s2-core/src/cell/header-cell.ts
@@ -474,13 +474,17 @@ export abstract class HeaderCell<
     return [EXTRA_FIELD, EXTRA_COLUMN_FIELD].includes(this.meta.field);
   }
 
-  public mappingValue(condition: Condition): ConditionMappingResult {
+  mappingValue<Result>(
+    condition: Condition<Result>,
+  ): ConditionMappingResult<Result> {
     const value = this.getMeta().value;
 
-    return condition?.mapping(value, this.meta, this)!;
+    return condition.mapping(value, this.meta, this);
   }
 
-  public findFieldCondition(conditions: Condition[]): Condition | undefined {
+  public findFieldCondition<Con extends Condition>(
+    conditions: Con[] = [],
+  ): Con | undefined {
     return findLast(conditions, (item) =>
       item.field instanceof RegExp
         ? item.field.test(this.meta.field)
diff --git a/packages/s2-core/src/cell/series-number-cell.ts b/packages/s2-core/src/cell/series-number-cell.ts
index 1235470b25..7b190ceee8 100644
--- a/packages/s2-core/src/cell/series-number-cell.ts
+++ b/packages/s2-core/src/cell/series-number-cell.ts
@@ -1,11 +1,5 @@
 import type { PointLike } from '@antv/g';
-import type {
-  TextTheme,
-  FormatResult,
-  Condition,
-  ConditionMappingResult,
-  AreaRange,
-} from '../common/interface';
+import type { TextTheme, FormatResult, AreaRange } from '../common/interface';
 import { CellBorderPosition, CellClipBox } from '../common/interface/basic';
 import { CellType } from '../common/constant/interaction';
 import type { Node } from '../facet/layout/node';
@@ -114,11 +108,11 @@ export class SeriesNumberCell extends BaseCell<Node> {
     return { x: textX, y: textStart };
   }
 
-  protected findFieldCondition(): Condition | undefined {
+  protected findFieldCondition() {
     return undefined;
   }
 
-  protected mappingValue(): ConditionMappingResult | undefined {
+  protected mappingValue() {
     return undefined;
   }
 
diff --git a/packages/s2-core/src/common/interface/condition.ts b/packages/s2-core/src/common/interface/condition.ts
index a93aea754b..8f1440f93f 100644
--- a/packages/s2-core/src/common/interface/condition.ts
+++ b/packages/s2-core/src/common/interface/condition.ts
@@ -1,6 +1,6 @@
 import type { DataCell, HeaderCell } from '../../cell';
 import type { RawData } from './s2DataConfig';
-import type { IconTheme, TextTheme } from './theme';
+import type { TextTheme } from './theme';
 
 export interface ValueRange {
   minValue?: number;
@@ -9,31 +9,39 @@ export interface ValueRange {
 
 export type ValueRanges = Record<string, ValueRange>;
 
-export type ConditionMappingResult<T = unknown> = ValueRange &
-  T & {
-    // only used in icon condition
-    icon?: string;
-    // interval, background, text fill color
-    fill?: string;
-    // only used in interval condition
-    isCompare?: boolean;
-    /**
-     * @description only used in background condition, when the background color is too light, the font color will be white
-     * @version 1.34.0
-     */
-    intelligentReverseTextColor?: boolean;
-    /**
-     * @description custom the interval condition's width
-     * @version 1.38.0
-     */
-    fieldValue?: number;
-  };
+export type TextConditionMappingResult = TextTheme;
+
+export type BackgroundConditionMappingResult = {
+  fill: string;
+  /**
+   * @description only used in background condition, when the background color is too light, the font color will be white
+   * @version 1.34.0
+   */
+  intelligentReverseTextColor?: boolean;
+};
+
+export type IconConditionMappingResult = {
+  fill: string;
+  icon: string;
+};
+
+export type IntervalConditionMappingResult = {
+  fill?: string;
+  isCompare?: boolean;
+  /**
+   * @description custom the interval condition's width
+   * @version 1.38.0
+   */
+  fieldValue?: number;
+} & ValueRange;
+
+export type ConditionMappingResult<T = unknown> = T | undefined | null;
 
 export type ConditionMapping<T = unknown> = (
   fieldValue: number | string,
   data: RawData,
   cell?: DataCell | HeaderCell,
-) => ConditionMappingResult<T> | undefined | null;
+) => ConditionMappingResult<T>;
 
 /**
  * One field can hold a condition
@@ -43,21 +51,19 @@ export interface Condition<T = unknown> {
   mapping: ConditionMapping<T>;
 }
 
-export type IconPosition = 'left' | 'right';
-
-export interface IconCondition extends Condition<IconTheme> {
-  // right by default
-  position?: IconPosition;
-}
+export type TextCondition = Condition<TextConditionMappingResult>;
+export type BackgroundCondition = Condition<BackgroundConditionMappingResult>;
+export type IntervalCondition = Condition<IntervalConditionMappingResult>;
 
-export interface TextCondition extends Condition<TextTheme> {
+export type IconPosition = 'left' | 'right';
+export interface IconCondition extends Condition<IconConditionMappingResult> {
   // right by default
   position?: IconPosition;
 }
 
 export interface Conditions {
   text?: TextCondition[];
-  background?: Condition[];
-  interval?: Condition[];
+  background?: BackgroundCondition[];
+  interval?: IntervalCondition[];
   icon?: IconCondition[];
 }
diff --git a/packages/s2-core/src/utils/text.ts b/packages/s2-core/src/utils/text.ts
index 1323fb1c82..084eba979a 100644
--- a/packages/s2-core/src/utils/text.ts
+++ b/packages/s2-core/src/utils/text.ts
@@ -615,8 +615,8 @@ export const drawObjectText = (
             x: iconX,
             y: iconY,
             name: attrs.icon!,
-            width: attrs.size ?? iconStyle?.size,
-            height: attrs.size ?? iconStyle?.size,
+            width: iconStyle?.size,
+            height: iconStyle?.size,
             fill: attrs.fill,
           });
 
diff --git a/packages/s2-core/src/utils/theme.ts b/packages/s2-core/src/utils/theme.ts
index bbbeb61f91..106c48c5e6 100644
--- a/packages/s2-core/src/utils/theme.ts
+++ b/packages/s2-core/src/utils/theme.ts
@@ -1,6 +1,6 @@
 import { PALETTE_MAP, STYLE_ELEMENT_ID } from '../common/constant';
 import type { Palette, ThemeName } from '../common/interface/theme';
-import DarkVars from '../styles/theme/dark.less';
+import DarkVars from '../styles/theme/dark.less?inline';
 import { injectCssText } from './inject-css-text';
 
 /**

From 7eca3cab421837d5f68f9134d1d35937e2b90292 Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Thu, 25 Jan 2024 17:40:05 +0800
Subject: [PATCH 28/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20condition=20?=
 =?UTF-8?q?=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../s2-core/src/common/interface/condition.ts |  2 +-
 packages/s2-react/playground/config.tsx       |  4 --
 s2-site/docs/common/conditions.zh.md          | 63 +++++++---------
 s2-site/docs/manual/basic/conditions.zh.md    | 69 +++++++++++-------
 .../conditions/demo/distinguish-cell.ts       | 71 +++++++++++++++++++
 .../conditions/demo/icon-with-action.ts       | 60 ++++++++++++++++
 .../analysis/conditions/demo/interval.ts      |  4 +-
 .../analysis/conditions/demo/meta.json        | 41 +++++++----
 .../analysis/conditions/demo/table-text.ts    |  2 +-
 9 files changed, 232 insertions(+), 84 deletions(-)
 create mode 100644 s2-site/examples/analysis/conditions/demo/distinguish-cell.ts
 create mode 100644 s2-site/examples/analysis/conditions/demo/icon-with-action.ts

diff --git a/packages/s2-core/src/common/interface/condition.ts b/packages/s2-core/src/common/interface/condition.ts
index 8f1440f93f..4b665f336e 100644
--- a/packages/s2-core/src/common/interface/condition.ts
+++ b/packages/s2-core/src/common/interface/condition.ts
@@ -32,7 +32,7 @@ export type IntervalConditionMappingResult = {
    * @description custom the interval condition's width
    * @version 1.38.0
    */
-  fieldValue?: number;
+  fieldValue?: number | string;
 } & ValueRange;
 
 export type ConditionMappingResult<T = unknown> = T | undefined | null;
diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx
index 38bf9ddfb7..b7508f73b5 100644
--- a/packages/s2-react/playground/config.tsx
+++ b/packages/s2-react/playground/config.tsx
@@ -192,7 +192,6 @@ export const s2ConditionsOptions: SheetComponentOptions['conditions'] = {
         return {
           icon: 'CellUp',
           fill: '#054',
-          size: 26,
         };
       },
     },
@@ -204,7 +203,6 @@ export const s2ConditionsOptions: SheetComponentOptions['conditions'] = {
           return {
             icon: 'CellUp',
             fill: '#FF4D4F',
-            size: 16,
           };
         }
       },
@@ -216,7 +214,6 @@ export const s2ConditionsOptions: SheetComponentOptions['conditions'] = {
         return {
           icon: 'CellUp',
           fill: '#FF4D4F',
-          size: 16,
         };
       },
     },
@@ -226,7 +223,6 @@ export const s2ConditionsOptions: SheetComponentOptions['conditions'] = {
         return {
           icon: 'CellUp',
           fill: '#FF4D4F',
-          size: 16,
         };
       },
     },
diff --git a/s2-site/docs/common/conditions.zh.md b/s2-site/docs/common/conditions.zh.md
index b707100c20..754ba4f826 100644
--- a/s2-site/docs/common/conditions.zh.md
+++ b/s2-site/docs/common/conditions.zh.md
@@ -9,46 +9,33 @@ order: 2
 
 <description>功能描述： 配置字段标记。分为文本 (text)，背景 (background)，柱状图 (interval)，图标 (icon)。</description>
 
-| 参数       | 说明 | 类型            | 默认值 | 必选  |
-| ---------- | ---------- | ---------------  | ------ | ---- |
-| text       | 文本字段标记   | [Condition](#condition)[]     | - |            |
-| background | 背景字段标记   | [Condition](#condition)[]     | -      |            |
-| interval   | 柱状图字段标记 | [Condition](#condition)[]   | -      |            |
-| icon       | 图标字段标记   | [IconCondition](#iconcondition) | -  |            |
+| 参数       | 说明           | 类型                                          | 默认值 | 必选 |
+| ---------- | -------------- | --------------------------------------------- | ------ | ---- |
+| text       | 文本字段标记   | [TextCondition](#textcondition)[]             | -      |      |
+| background | 背景字段标记   | [BackgroundCondition](#backgroundcondition)[] | -      |      |
+| interval   | 柱状图字段标记 | [IntervalCondition](#intervalcondition)[]     | -      |      |
+| icon       | 图标字段标记   | [IconCondition](#iconcondition)[]             | -      |      |
 
 ### Condition
 
 类型：`object`，**必选**
 
-<description>功能描述： 配置条件格式。包括文本 (text)，背景 (background)，柱状图 (interval)。</description>
+<description>功能描述： 配置条件格式。TextCondition，BackgroundCondition，IntervalCondition，IconCondition 具继承于 Condition。</description>
 
-| 参数      | 说明                                | 类型         | 默认值      | 必选  |
-|---------|-----------------------------------|------------|----------|-----|
-| field   | 1. 字段 ID <br /> 2. 使用正则表达式匹配字段 ID | `string \| RegExp` |     | ✓          |
-| mapping | 作用映射函数​                           | `function` |          | ✓   |
+| 参数    | 说明                                           | 类型                                  | 默认值 | 必选 |
+| ------- | ---------------------------------------------- | ------------------------------------- | ------ | ---- |
+| field   | 1. 字段 ID <br /> 2. 使用正则表达式匹配字段 ID | `string \| RegExp`                    |        | ✓    |
+| mapping | 作用映射函数​                                  | [ConditionMapping](#conditionmapping) |        | ✓    |
 
-#### MappingFunction
+#### ConditionMapping
 
 ```ts
-type MappingFunction = (
-  fieldValue: number | string | null,
-  data: Record<string, any>,
-  node: DataCell | HeaderCell
-) => {
-  // 仅用于图标字段标记，可选
-  icon?: string;
-
-  // 背景 ｜ 文本 ｜ 柱状图 | 图标 字段标记颜色填充，必选
-  fill: string;
-
-  // 仅用于柱状图字段标记，可选
-  isCompare?: boolean;
-  minValue?: number;
-  maxValue?: number;
-
-  // 仅用于背景字段标记，可选。（当背景颜色较暗，将文本颜色设置为白色。优先级低于 文本字段标记）
-  intelligentReverseTextColor?: boolean;
-} | null | undefined // 返回值为空时，表示当前字段不显示字段标记样式
+// TextCondition，BackgroundCondition，IntervalCondition，IconCondition 各自对应的 mapping 函数返回 的 T 有所不同
+export type ConditionMapping<T = unknown> = (
+  fieldValue: number | string,
+  data: RawData,
+  cell?: DataCell | HeaderCell,
+) => ConditionMappingResult<T>;
 
 ```
 
@@ -90,15 +77,13 @@ const options = {
 
 ### IconCondition
 
-类型：`object`，**必选**，默认值：`null`
+类型：`object`，**必选**
 
-<description>功能描述： 配置图标 (icon) 条件格式。</description>
+<description>功能描述： 配置图标 (icon) 条件格式，和其他 Condition 的唯一区别在于多了 position 参数用于自定义 icon 相对于文本的位置</description>
 
-| 参数     | 说明 | 类型     | 默认值  | 必选    |
-| -------- | ------------ | -------- | ------- | ----  |
-| field    | 字段 ID       | `string`   |                | ✓    |
-| position | icon 相较于文字的位置 | `left \| right`   | `right` |         |
-| mapping  | 映射函数 | [MappingFunction](#mappingfunction) |                 | ✓    |
+| 参数     | 说明                  | 类型            | 默认值  | 必选 |
+| -------- | --------------------- | --------------- | ------- | ---- |
+| position | icon 相较于文字的位置 | `left \| right` | `right` |      |
 
 **icon condition 用法示例：**
 
@@ -121,3 +106,5 @@ const options = {
 };
 
 ```
+
+<embed src="@/docs/common/icon.zh.md"></embed>​
diff --git a/s2-site/docs/manual/basic/conditions.zh.md b/s2-site/docs/manual/basic/conditions.zh.md
index 2c3f65dc40..ff0de57905 100644
--- a/s2-site/docs/manual/basic/conditions.zh.md
+++ b/s2-site/docs/manual/basic/conditions.zh.md
@@ -4,17 +4,19 @@ order: 4
 tag: Updated
 ---
 
-S2 自带字段标记特性。用户可以根据业务语义设置不同的渲染逻辑，实现重点数据的标记和分析。字段标记类型包括：
+在数据可视化和分析中，字段标记是一种常用的功能，它允许用户通过可视化的方式强调数据中的关键信息。S2 是一个数据可视化库，支持灵活的字段标记功能：
 
-* 文本 (text) 字段标记 （所有单元格类型）
-* 背景 (background) 字段标记 （所有单元格类型）
-* 柱状图 (interval) 字段标记 （仅支持数据单元格）
-* 图标 (icon) 字段标记 （目前支持透视表数据单元格、行头和列头单元格）
+* 文本 (text) 字段标记
+* 背景 (background) 字段标记
+* 柱状图 (interval) 字段标记
+* 图标 (icon) 字段标记
 
 下图直观展示了四种字段标记的形态：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*-lr0QJRCxkEAAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />
 
+**数据单元格完整的支持 4 种字段标记，而角头、行头、列头这些头部单元格只支持文本、背景和图标三种字段标记（柱状图不适用于头部单元格，业务上价值不大）。**
+
 ## 快速上手
 
 `S2` 字段标记特性通过配置 `s2Options` 中 [`Conditions`](/docs/api/general/S2Options#conditions) 属性。
@@ -45,19 +47,17 @@ const s2Options = {
 
 [Conditions 属性](/docs/api/general/S2Options#conditions) 可配置四种不同的字段，分别对应四种不同的字段标记。
 
-* `text`，`background` 和 `interval` 的均为 [Condition](/docs/api/general/S2Options#condition) 数组类型
+* `text`，`background` 和 `interval` ,`icon` 均是继承自[Condition](/docs/api/general/S2Options#condition) 数组类型
   * 包含 `field` 和 `mapping` 两个字段
-  * 一个字段 ID 多次匹配到同一范围的字段标记规则，以最后一个规则为准。
+  * 一个字段 ID 多次匹配到同一范围的字段标记规则，以最后一个规则为准
 * `icon` 稍有不同，为 [IconCondition](/docs/api/general/S2Options#iconcondition) 数组类型
-  * 多一个 `position` 字段用于指定图标相对于文字的位置
-
-重点解释 `field` 和 `mapping` 两个字段：
+  * 多一个额外的`position` 字段用于指定图标相对于文字的位置，定义图标相对于单元格文本的位置。这个位置可以是文本的左侧、右侧
 
 ### field
 
 `field` 用于指定将字段标记应用于哪些字段上，其取值范围会因表的形态不同而不同：
 
-* 对于透视表，`field` 取值范围或正则匹配范围是 `values`，作用范围为行头、列头、角头和数据单元格
+* 对于透视表，`field` 取值范围或正则匹配范围是 `rows`，`columns`，`values`，作用范围为行头、列头、角头和数据单元格
 * 对于明细表，`field` 取值范围或正则匹配范围是 `columns`，作用范围为数据单元格
 
 <table
@@ -85,25 +85,27 @@ const s2Options = {
 
 ### ​mapping
 
-`mapping` 是处理字段标记的回调函数：
+其中的重点是`mapping`函数，它用于处理字段标记的回调函数，如果`mapping`函数返回值为空，则表明不渲染该单元格的字段标记。
 
-| 参数       | 说明          | 类型                                    | 默认值 | 必选 |
-| ---------- |-------------| --------------------------------------- | ------ | ---- |
-| fieldValue | 单元格对应字段的值   | `number` &#124; `string`  &#124; `null` | -      |      |
-| data       | 单元格对应的​整行数据 | `object`                                | -      | ✓    |
+```ts
+export type ConditionMapping<T = unknown> = (
+  fieldValue: number | string,
+  data: RawData,
+  cell?: DataCell | HeaderCell,
+) => ConditionMappingResult<T>;
+```
 
-| 返回值    | 说明                                                                                                                        | 类型      | 默认值 | 必选 |
-| --------- |---------------------------------------------------------------------------------------------------------------------------| --------- | ------ | ---- |
-| fill      | 当作用于文本字段标记时，代表**文字填充颜色** <br>当作用于背景字段标记时，代表**单元格背景填充颜色** <br>当作用于柱状图字段标记时，代表**柱状图填充颜色** <br>当作用于图标字段标记时，代表**图标填充颜色** <br> | `string`  | -      | ✓    |
-| icon      | 仅用于**图标**字段标记，指定图标类型                                                                                                      | `string`  | -      |      |
-| isCompare | 仅用于**柱状图**字段标记，当为 `true` 时，可以定制柱状图的最大最小值                                                                                  | `boolean` | -      |      |
-| minValue  | 仅用于**柱状图**字段标记且 `isCompare` 为 `true` 时，定制柱状图最小值                                                                           | `number`  | -      |      |
-| maxValue  | 仅用于**柱状图**字段标记且 `isCompare` 为 `true` 时，定制柱状图最大值                                                                           | `number`  | -      |      |
-| fieldValue | 仅用于**柱状图**字段标记且 `isCompare` 为 `true` 时，定制柱状图的长度                                                                           | `number`  | -      |      |
+`mapping`接收三个参数，分别是:
 
-> 如果`mapping`函数返回值为空，则表明不渲染该单元格的字段标记
+* fieldValue: 当前单元格的值
+* data: 如果是数据单元格，则是格子对应的数据；如果是角头、行头、列头，则是格子的 meta 信息
+* cell: 对应当前格子的实例，如果前两个参数不满足业务需求，可以通过这个参数获取任意你想要的数据
 
-<embed src="@/docs/common/icon.zh.md"></embed>​
+不同的字段标记类型所需的返回值类型`ConditionMappingResult<T>`有所不同，主要是泛型`T`不同。S2 提供了完备的类型提示：
+
+![类型提示](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*wgC1QoXRWkAAAAAAAAAAAAAADmJ7AQ/original)
+
+> 也可以通过 [condition.ts](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/interface/condition.ts) 查看具体的类型定义。
 
 🎨 字段标记详细的配置参考 [Conditions API](/docs/api/general/S2Options#conditions) 文档。
 
@@ -117,11 +119,20 @@ const s2Options = {
 
 <Playground path="analysis/conditions/demo/icon.ts" rid='icon' height="200"></playground>
 
+当同时存在自定义 Icon 时，Condition Icon 单元格 value 是强关联的，所以将 condition icon 放在紧贴文本的左右侧，即：
+
+* `[header action icons] [condition icon] [text]`
+* `[text] [condition icon] [header action icons]`
+
+<Playground path="analysis/conditions/demo/icon-with-action.ts" rid='icon-with-action' height="200"></playground>
+
 ### 自定义柱状图范围
 
 通过显示指定 `interval` 字段标记中的 `mapping` 函数返回值  `isCompare` 属性值为 `true`，并指定 `maxValue` 和 `minValue` 的值，可以自定义柱状图的区间范围。
 > 如果 `mapping 函数` 返回值中的 `isCompare` 属性值为 `false` 或者不返回该属性。此时 `maxValue` 和 `minValue` 会以所有图表数据中该字段的最大最小值为区间范围
 
+字段标记默认都是使用当前单元格的 value 作为绘制的依据，但在柱状图中，因为可以自定义柱状图的范围，那么也可能需要根据范围，同时对当前的 value 进行处理，使用新的 value 作为绘制的依据，此时可以通过`mapping` 函数返回值中指定`fieldValue`重新指定当前格子的绘制依据。
+
 `price` 字段使用自定义模式，`cost` 字段使用默认模式：
 
 <Playground path="analysis/conditions/demo/interval.ts" rid='interval'></playground>
@@ -151,4 +162,10 @@ const s2Options = {
 
 <Playground path="analysis/conditions/demo/intelligent-background.ts" rid='intelligentReverseTextColor'></playground>
 
+### 区分角头、行头、列头
+
+在透视表模式中，如果字段标记对应的`field`是行头或者列头的维度，那么会同时将对应的角头单元格也进行标记，可以通过`mapping` 函数三个参数做区分：
+
+<Playground path="analysis/conditions/demo/distinguish-cell.ts" rid='distinguish-cell'></playground>
+
 ​📊 查看更多 [字段标记示例](/examples/analysis/conditions#intelligent-background)。
diff --git a/s2-site/examples/analysis/conditions/demo/distinguish-cell.ts b/s2-site/examples/analysis/conditions/demo/distinguish-cell.ts
new file mode 100644
index 0000000000..256f034aa2
--- /dev/null
+++ b/s2-site/examples/analysis/conditions/demo/distinguish-cell.ts
@@ -0,0 +1,71 @@
+import { PivotSheet, S2Options, CornerCell } from '@antv/s2';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then(async (dataCfg) => {
+    const container = document.getElementById('container');
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      interaction: {
+        hoverHighlight: false,
+      },
+      conditions: {
+        text: [
+          // 行头
+          {
+            field: 'city',
+            mapping(fieldValue) {
+              // 如果是角头，fieldValue 就是 城市
+              if (fieldValue === '城市') {
+                return {
+                  fill: 'red',
+                };
+              }
+              return {
+                fill: '#DB6BCF',
+              };
+            },
+          },
+          {
+            field: 'type',
+            mapping(fieldValue, data) {
+              // 非数据单元格的 data 返回的都是 cell 的 meta 信息
+              // 角头单元格独有 cornerType 属性
+              if (data.cornerType) {
+                return {
+                  fill: 'blue',
+                };
+              }
+
+              return {
+                fill: '#327039',
+              };
+            },
+          },
+          {
+            field: 'sub_type',
+            mapping(fieldValue, data, cell) {
+              // cell 是对应当前格子的实例
+              if (cell instanceof CornerCell) {
+                return {
+                  fill: '#BBDEDE',
+                };
+              }
+
+              return {
+                fill: '#2498D1',
+              };
+            },
+          },
+        ],
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/analysis/conditions/demo/icon-with-action.ts b/s2-site/examples/analysis/conditions/demo/icon-with-action.ts
new file mode 100644
index 0000000000..abc824342f
--- /dev/null
+++ b/s2-site/examples/analysis/conditions/demo/icon-with-action.ts
@@ -0,0 +1,60 @@
+import { PivotSheet, S2Options } from '@antv/s2';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then(async (dataCfg) => {
+    const container = document.getElementById('container');
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      interaction: {
+        hoverHighlight: false,
+      },
+      headerActionIcons: [
+        {
+          icons: ['ArrowUp'],
+          belongsCell: 'rowCell',
+        },
+        {
+          icons: ['CellUp'],
+          belongsCell: 'colCell',
+        },
+        {
+          icons: ['CellDown'],
+          belongsCell: 'cornerCell',
+        },
+      ],
+      conditions: {
+        icon: [
+          {
+            field: 'city',
+            mapping() {
+              return {
+                icon: 'Trend',
+                fill: '#DB6BCF',
+              };
+            },
+          },
+          {
+            field: 'sub_type',
+            position: 'left',
+            mapping(fieldValue) {
+              if (fieldValue !== '子类别') {
+                return {
+                  icon: 'CellDown',
+                  fill: '#025DF4',
+                };
+              }
+            },
+          },
+        ],
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/analysis/conditions/demo/interval.ts b/s2-site/examples/analysis/conditions/demo/interval.ts
index a31a322ae7..9b68adf2b8 100644
--- a/s2-site/examples/analysis/conditions/demo/interval.ts
+++ b/s2-site/examples/analysis/conditions/demo/interval.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, S2Options, S2Options } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
@@ -24,7 +24,7 @@ fetch(
                 isCompare: true,
                 maxValue: 8000,
                 minValue: 300,
-                fieldValue: value > 7900 ? 10 : value,
+                fieldValue: Number(value) > 7900 ? 10 : value,
               };
             },
           },
diff --git a/s2-site/examples/analysis/conditions/demo/meta.json b/s2-site/examples/analysis/conditions/demo/meta.json
index 5983726005..e897cbc3aa 100644
--- a/s2-site/examples/analysis/conditions/demo/meta.json
+++ b/s2-site/examples/analysis/conditions/demo/meta.json
@@ -37,12 +37,12 @@
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ReYpm%24KcI2/b923ab47-cd74-48fe-aae2-1412091d4a31.png"
     },
     {
-      "filename": "table-text.ts",
+      "filename": "icon-with-action.ts",
       "title": {
-        "zh": "明细表文本标记",
-        "en": "Table text condition"
+        "zh": "图标标记混合自定义 Action Icons",
+        "en": "Icon condition with action icons"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/jdTsPFc09l/4795d9f3-f55b-4575-99de-829e0e3ab3db.png"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*wClMR4kLBaoAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
       "filename": "multi-background.ts",
@@ -60,14 +60,6 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/y1IafbmC7W/c79f8906-ca2e-4bbd-b384-e663bde759e4.png"
     },
-    {
-      "filename": "multi-conditions.ts",
-      "title": {
-        "zh": "混合字段标记",
-        "en": "Multi-conditions"
-      },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/6FFtlY%240T/792a0865-b01d-4674-a3ef-98da6c5be285.png"
-    },
     {
       "filename": "bidirectional-interval.ts",
       "title": {
@@ -76,6 +68,15 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oUICMHjOA/7fd723cb-fc2a-45a5-a0ab-a2840127a48a.png"
     },
+    {
+      "filename": "multi-conditions.ts",
+      "title": {
+        "zh": "混合字段标记",
+        "en": "Multi-conditions"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/6FFtlY%240T/792a0865-b01d-4674-a3ef-98da6c5be285.png"
+    },
+
     {
       "filename": "intelligent-background.ts",
       "title": {
@@ -84,6 +85,22 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*--3oTK25-wgAAAAAAAAAAAAADmJ7AQ/original",
       "new": true
+    },
+    {
+      "filename": "distinguish-cell.ts",
+      "title": {
+        "zh": "区分行列角头和数据单元格",
+        "en": "Distinguish different cell"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*pxw2S5JFzUcAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "table-text.ts",
+      "title": {
+        "zh": "明细表文本标记",
+        "en": "Table text condition"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/jdTsPFc09l/4795d9f3-f55b-4575-99de-829e0e3ab3db.png"
     }
   ]
 }
diff --git a/s2-site/examples/analysis/conditions/demo/table-text.ts b/s2-site/examples/analysis/conditions/demo/table-text.ts
index ac421e5bca..11e1bb55e2 100644
--- a/s2-site/examples/analysis/conditions/demo/table-text.ts
+++ b/s2-site/examples/analysis/conditions/demo/table-text.ts
@@ -1,4 +1,4 @@
-import { S2DataConfig, S2Options, S2Options, TableSheet } from '@antv/s2';
+import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/986d48ce-cfdf-475d-980c-553762770928.json',

From 5ae4b51bba4f4dc8c83681312e39ddb13e508ee2 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Thu, 25 Jan 2024 18:12:41 +0800
Subject: [PATCH 29/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=20API=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../s2-core/__tests__/bugs/issue-446-spec.ts  |    2 +-
 .../s2-core/__tests__/bugs/issue-565-spec.ts  |    2 +-
 .../__snapshots__/corner-spec.ts.snap         |    4 +-
 .../{custom-facet.ts => custom-facet-spec.ts} |    0
 .../unit/utils/g-mini-charts-spec.ts          |   16 +-
 packages/s2-core/src/common/constant/basic.ts |    2 +-
 .../src/common/interface/s2DataConfig.ts      |    6 +-
 .../s2-core/src/common/interface/s2Options.ts |   10 +-
 packages/s2-core/src/facet/index.ts           |    4 +-
 packages/s2-core/src/index.ts                 |    2 +-
 .../src/interaction/event-controller.ts       |    7 +-
 packages/s2-core/src/utils/g-mini-charts.ts   |   10 +-
 pnpm-lock.yaml                                | 1161 ++++++++++++++++-
 s2-site/docs/api/components/drill-down.zh.md  |    6 -
 .../docs/api/components/sheet-component.en.md |    6 +-
 s2-site/docs/api/general/S2DataConfig.zh.md   |   35 +-
 s2-site/docs/api/general/S2Event.zh.md        |    9 +-
 s2-site/docs/api/general/S2Options.en.md      |    2 +-
 s2-site/docs/api/general/S2Options.zh.md      |  115 +-
 s2-site/docs/api/general/S2Theme.zh.md        |   92 +-
 s2-site/docs/common/browser.zh.md             |    2 +-
 s2-site/docs/common/conditions.zh.md          |   14 +-
 s2-site/docs/common/copy-export.en.md         |    2 +-
 s2-site/docs/common/custom-tooltip.zh.md      |   20 +-
 s2-site/docs/common/custom/cellCallBack.zh.md |    2 +-
 .../docs/common/custom/customSvgIcons.zh.md   |    4 +-
 .../docs/common/custom/customTreeNode.zh.md   |    2 +-
 .../docs/common/custom/dataCellCallback.zh.md |    4 +-
 .../common/custom/headerActionIcons.zh.md     |    4 +-
 .../docs/common/custom/layoutArrange.zh.md    |    2 +-
 ...ataPosition.en.md => layoutCellMeta.en.md} |    6 +-
 .../docs/common/custom/layoutCellMeta.zh.md   |   16 +
 .../docs/common/custom/layoutCoordinate.zh.md |   10 +-
 .../common/custom/layoutDataPosition.zh.md    |   21 -
 .../docs/common/custom/layoutHierarchy.zh.md  |    2 +-
 .../custom/layoutSeriesNumberNodes.en.md      |   25 +
 .../custom/layoutSeriesNumberNodes.zh.md      |   20 +
 s2-site/docs/common/export.zh.md              |   76 --
 s2-site/docs/common/frozen.zh.md              |    3 +-
 s2-site/docs/common/header.zh.md              |    2 +
 s2-site/docs/common/interaction.zh.md         |   14 +-
 s2-site/docs/common/mini-chart.zh.md          |   12 +-
 s2-site/docs/common/pagination.zh.md          |    4 +-
 s2-site/docs/common/sort-param.zh.md          |    4 +-
 s2-site/docs/common/style.zh.md               |   10 +-
 s2-site/docs/common/tooltip.zh.md             |    8 +-
 s2-site/docs/common/totals.zh.md              |    8 +-
 s2-site/docs/common/view-meta.zh.md           |    4 +-
 .../manual/advanced/custom/cell-size.zh.md    |    4 +-
 .../docs/manual/advanced/custom/hook.en.md    |    4 +-
 .../docs/manual/advanced/custom/hook.zh.md    |   58 +-
 .../manual/advanced/data-process/pivot.zh.md  |    4 +-
 .../manual/advanced/interaction/basic.zh.md   |   12 +-
 .../manual/advanced/interaction/custom.zh.md  |    2 +-
 .../advanced/interaction/hide-columns.zh.md   |    2 +-
 .../manual/advanced/interaction/scroll.zh.md  |    6 +-
 .../docs/manual/advanced/performance.zh.md    |    2 +-
 s2-site/docs/manual/basic/base-concept.zh.md  |   59 +-
 .../manual/basic/sheet-type/pivot-mode.zh.md  |    6 +-
 .../manual/basic/sheet-type/table-mode.zh.md  |    6 +-
 s2-site/docs/manual/basic/theme.zh.md         |    2 +-
 s2-site/docs/manual/basic/tooltip.zh.md       |    4 +-
 s2-site/docs/manual/basic/totals.zh.md        |    6 +-
 s2-site/docs/manual/faq.zh.md                 |    4 +-
 .../analysis/conditions/demo/interval.ts      |    2 +-
 .../analysis/conditions/demo/table-text.ts    |    2 +-
 .../analysis/get-data/demo/get-cell-data.ts   |   27 +-
 .../analysis/get-data/demo/get-multi-data.ts  |   57 +-
 s2-site/examples/analysis/totals/API.en.md    |    2 +-
 s2-site/examples/case/art/API.en.md           |    6 +
 s2-site/examples/case/art/API.zh.md           |    6 +
 s2-site/examples/case/comparison/API.en.md    |    2 +-
 s2-site/examples/case/data-preview/API.en.md  |    6 +
 s2-site/examples/case/data-preview/API.zh.md  |    6 +
 s2-site/examples/case/kpi-strategy/API.en.md  |    2 +-
 .../case/performance-compare/API.en.md        |    6 +
 .../case/performance-compare/API.zh.md        |    6 +
 s2-site/examples/case/proportion/API.en.md    |    2 +-
 .../custom/custom-cell/demo/col-cell.ts       |    1 +
 .../custom/custom-cell/demo/corner-cell.ts    |    1 +
 .../custom-cell/demo/custom-specified-cell.ts |    2 +
 .../custom-cell/demo/custom-table-cell.ts     |    2 +-
 .../custom/custom-cell/demo/data-cell.ts      |    1 +
 .../custom/custom-cell/demo/meta.json         |    2 +-
 .../custom-cell/demo/series-number-cell.ts    |    1 +
 .../examples/custom/custom-layout/API.en.md   |    2 +-
 .../examples/custom/custom-layout/API.zh.md   |    2 +-
 .../custom/custom-layout/demo/custom-facet.ts |   54 +
 ...position.ts => custom-layout-cell-meta.ts} |    0
 ...rdinate.ts => custom-layout-coordinate.ts} |    3 +-
 .../custom/custom-layout/demo/meta.json       |   22 +-
 .../advanced/demo/resize-active.ts            |    4 +-
 .../interaction/basic/demo/brush-header.ts    |    3 -
 .../interaction/basic/demo/brush-selection.ts |    5 +-
 .../basic/demo/data-cell-click-selection.ts   |    3 -
 .../basic/demo/data-cell-range-selection.ts   |    3 -
 .../examples/interaction/basic/demo/event.ts  |   48 +
 .../basic/demo/header-cell-click-selection.ts |    3 -
 .../basic/demo/hover-after-scroll.ts          |   10 +-
 .../examples/interaction/basic/demo/hover.ts  |    3 -
 .../examples/interaction/basic/demo/meta.json |    9 +
 .../examples/interaction/basic/demo/resize.ts |    3 -
 .../interaction/basic/demo/state-theme.ts     |   17 +-
 .../react-component/tooltip/API.en.md         |    6 +
 .../react-component/tooltip/API.zh.md         |    6 +
 .../tooltip/demo/custom-show-tooltip.tsx      |    3 +-
 .../tooltip/demo/custom-tooltip.tsx           |    1 +
 .../theme/custom/demo/custom-palette.ts       |   17 +-
 .../theme/custom/demo/custom-scrollbar.ts     |   76 ++
 s2-site/examples/theme/custom/demo/meta.json  |    9 +
 s2-site/package.json                          |   16 +-
 111 files changed, 1863 insertions(+), 580 deletions(-)
 rename packages/s2-core/__tests__/spreadsheet/{custom-facet.ts => custom-facet-spec.ts} (100%)
 rename s2-site/docs/common/custom/{layoutDataPosition.en.md => layoutCellMeta.en.md} (85%)
 create mode 100644 s2-site/docs/common/custom/layoutCellMeta.zh.md
 delete mode 100644 s2-site/docs/common/custom/layoutDataPosition.zh.md
 create mode 100644 s2-site/docs/common/custom/layoutSeriesNumberNodes.en.md
 create mode 100644 s2-site/docs/common/custom/layoutSeriesNumberNodes.zh.md
 delete mode 100644 s2-site/docs/common/export.zh.md
 create mode 100644 s2-site/examples/case/art/API.en.md
 create mode 100644 s2-site/examples/case/art/API.zh.md
 create mode 100644 s2-site/examples/case/data-preview/API.en.md
 create mode 100644 s2-site/examples/case/data-preview/API.zh.md
 create mode 100644 s2-site/examples/case/performance-compare/API.en.md
 create mode 100644 s2-site/examples/case/performance-compare/API.zh.md
 create mode 100644 s2-site/examples/custom/custom-layout/demo/custom-facet.ts
 rename s2-site/examples/custom/custom-layout/demo/{custom-data-position.ts => custom-layout-cell-meta.ts} (100%)
 rename s2-site/examples/custom/custom-layout/demo/{custom-coordinate.ts => custom-layout-coordinate.ts} (96%)
 create mode 100644 s2-site/examples/interaction/basic/demo/event.ts
 create mode 100644 s2-site/examples/react-component/tooltip/API.en.md
 create mode 100644 s2-site/examples/react-component/tooltip/API.zh.md
 create mode 100644 s2-site/examples/theme/custom/demo/custom-scrollbar.ts

diff --git a/packages/s2-core/__tests__/bugs/issue-446-spec.ts b/packages/s2-core/__tests__/bugs/issue-446-spec.ts
index 5d8f283250..6d9bb914ac 100644
--- a/packages/s2-core/__tests__/bugs/issue-446-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-446-spec.ts
@@ -1,7 +1,7 @@
 /**
  * @description spec for issue #446
  * https://github.com/antvis/S2/issues/446
- * copyData error in table mode
+ * #asyncGetAllPlainData error in table mode
  *
  */
 import { getContainer } from '../util/helpers';
diff --git a/packages/s2-core/__tests__/bugs/issue-565-spec.ts b/packages/s2-core/__tests__/bugs/issue-565-spec.ts
index 2705af69a9..3c1f2da1a2 100644
--- a/packages/s2-core/__tests__/bugs/issue-565-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-565-spec.ts
@@ -1,7 +1,7 @@
 /**
  * @description spec for issue #565
  * https://github.com/antvis/S2/issues/565
- * copyData error in tree mode
+ * #asyncGetAllPlainData error in tree mode
  *
  */
 import * as mockDataConfig from 'tests/data/data-issue-565.json';
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap
index 8bb717bbfc..fd66e35672 100644
--- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap
@@ -194,7 +194,7 @@ Array [
     "seriesNumberWidth": 0,
     "spreadsheet": Anything,
     "value": "province/city/数值",
-    "width": 145.36,
+    "width": 146.36,
     "x": 0,
     "y": 0,
   },
@@ -261,7 +261,7 @@ Array [
     "seriesNumberWidth": 80,
     "spreadsheet": Anything,
     "value": "province/city/数值",
-    "width": 145.36,
+    "width": 146.36,
     "x": 80,
     "y": 0,
   },
diff --git a/packages/s2-core/__tests__/spreadsheet/custom-facet.ts b/packages/s2-core/__tests__/spreadsheet/custom-facet-spec.ts
similarity index 100%
rename from packages/s2-core/__tests__/spreadsheet/custom-facet.ts
rename to packages/s2-core/__tests__/spreadsheet/custom-facet-spec.ts
diff --git a/packages/s2-core/__tests__/unit/utils/g-mini-charts-spec.ts b/packages/s2-core/__tests__/unit/utils/g-mini-charts-spec.ts
index 5e88113ef6..f3fc779114 100644
--- a/packages/s2-core/__tests__/unit/utils/g-mini-charts-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/g-mini-charts-spec.ts
@@ -4,7 +4,7 @@ import { forEach, map } from 'lodash';
 import { data } from 'tests/data/mock-dataset.json';
 import type { RangeColors } from '../../../src/common/interface/theme';
 import { PivotSheet, SpreadSheet } from '@/sheet-type';
-import { CellType, MiniChartTypes, type S2CellType } from '@/common';
+import { CellType, MiniChartType, type S2CellType } from '@/common';
 import {
   getBulletRangeColor,
   transformRatioToPercent,
@@ -47,7 +47,7 @@ describe('MiniCharts Utils Tests', () => {
 
   test('should get right points of line', () => {
     const chartData = {
-      type: MiniChartTypes.Line,
+      type: MiniChartType.Line,
       data: [
         { year: '2018', value: 10 },
         { year: '2019', value: 0 },
@@ -73,7 +73,7 @@ describe('MiniCharts Utils Tests', () => {
 
   test('should get right points of line when all values are more then 0', () => {
     const chartData = {
-      type: MiniChartTypes.Line,
+      type: MiniChartType.Line,
       data: [
         { year: '2018', value: 10 },
         { year: '2019', value: 5 },
@@ -99,7 +99,7 @@ describe('MiniCharts Utils Tests', () => {
 
   test('should get right points of line when all values are less then 0', () => {
     const chartData = {
-      type: MiniChartTypes.Line,
+      type: MiniChartType.Line,
       data: [
         { year: '2018', value: -5 },
         { year: '2019', value: -10 },
@@ -125,7 +125,7 @@ describe('MiniCharts Utils Tests', () => {
 
   test('should get right points of line when all values are equal to each other', () => {
     const chartData = {
-      type: MiniChartTypes.Line,
+      type: MiniChartType.Line,
       data: [
         { year: '2018', value: 0 },
         { year: '2019', value: 0 },
@@ -151,7 +151,7 @@ describe('MiniCharts Utils Tests', () => {
 
   test('should get right scale of bar', () => {
     const chartData = {
-      type: MiniChartTypes.Bar,
+      type: MiniChartType.Bar,
       data: [
         { year: '2018', value: 10 },
         { year: '2019', value: 0 },
@@ -182,7 +182,7 @@ describe('MiniCharts Utils Tests', () => {
 
   test('should get right scale of bar when all values are less then 0', () => {
     const chartData = {
-      type: MiniChartTypes.Bar,
+      type: MiniChartType.Bar,
       data: [
         { year: '2018', value: -5 },
         { year: '2019', value: -10 },
@@ -214,7 +214,7 @@ describe('MiniCharts Utils Tests', () => {
 
   test('should get right points of bar when all values are equal to each other', () => {
     const chartData = {
-      type: MiniChartTypes.Bar,
+      type: MiniChartType.Bar,
       data: [
         { year: '2018', value: 10 },
         { year: '2019', value: 10 },
diff --git a/packages/s2-core/src/common/constant/basic.ts b/packages/s2-core/src/common/constant/basic.ts
index 680fb04a8b..a8d854534c 100644
--- a/packages/s2-core/src/common/constant/basic.ts
+++ b/packages/s2-core/src/common/constant/basic.ts
@@ -57,7 +57,7 @@ export const DEFAULT_CORNER_MAX_WIDTH_RATIO = 0.5;
 export const LAYOUT_SAMPLE_COUNT = 50;
 
 /** mini 图类型 */
-export enum MiniChartTypes {
+export enum MiniChartType {
   Line = 'line',
   Bar = 'bar',
   Bullet = 'bullet',
diff --git a/packages/s2-core/src/common/interface/s2DataConfig.ts b/packages/s2-core/src/common/interface/s2DataConfig.ts
index ce21a19d7a..9a1d3164e9 100644
--- a/packages/s2-core/src/common/interface/s2DataConfig.ts
+++ b/packages/s2-core/src/common/interface/s2DataConfig.ts
@@ -1,11 +1,11 @@
-import type { EXTRA_FIELD, MiniChartTypes, VALUE_FIELD } from '../constant';
+import type { EXTRA_FIELD, MiniChartType, VALUE_FIELD } from '../constant';
 import type { Fields, FilterParam, Meta, SortParams } from './basic';
 
 export interface BaseChartData {
   /**
    * 类型
    */
-  type: MiniChartTypes;
+  type: MiniChartType;
 
   /**
    * 数据
@@ -28,7 +28,7 @@ export interface BulletValue {
   /**
    * 类型
    */
-  type: MiniChartTypes.Bullet;
+  type: MiniChartType.Bullet;
 
   /**
    * 当前值
diff --git a/packages/s2-core/src/common/interface/s2Options.ts b/packages/s2-core/src/common/interface/s2Options.ts
index de4b6df713..e7261bd23f 100644
--- a/packages/s2-core/src/common/interface/s2Options.ts
+++ b/packages/s2-core/src/common/interface/s2Options.ts
@@ -186,6 +186,7 @@ export interface S2BasicOptions<
 
   /**
    * 自定义合并单元格
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-cell/#custom-merged-cell
    */
   mergedCell?: MergedCellCallback;
 
@@ -215,30 +216,33 @@ export interface S2BasicOptions<
   layoutArrange?: LayoutArrange;
 
   /**
-   * 自定义单元格对应节点坐标/宽高
+   * 自定义单元格节点坐标
    * @see https://s2.antv.antgroup.com/examples/custom/custom-layout#custom-layout-coordinate
    */
   layoutCoordinate?: LayoutCoordinate;
 
   /**
    * 自定义单元格对应元数据
-   * @see https://s2.antv.antgroup.com/zh/examples/custom/custom-layout/#custom-data-position
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-layout/#custom-data-position
    */
   layoutCellMeta?: LayoutCellMeta;
 
   /**
    * 自定义序号节点
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-cell/#series-number-cell
    */
   layoutSeriesNumberNodes?: LayoutSeriesNumberNodes;
 
   /** *********** 数据集 **************** */
   /**
-   * 自定义数据集
+   * 自定义数据集 TODO:
+   * @see https://s2.antv.antgroup.com/
    */
   dataSet?: (spreadsheet: SpreadSheet) => BaseDataSet;
 
   /**
    * 自定义分面
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-layout/#custom-facet
    */
   facet?: (spreadsheet: SpreadSheet) => BaseFacet;
 }
diff --git a/packages/s2-core/src/facet/index.ts b/packages/s2-core/src/facet/index.ts
index e888857077..bf055bfcc2 100644
--- a/packages/s2-core/src/facet/index.ts
+++ b/packages/s2-core/src/facet/index.ts
@@ -1,5 +1,7 @@
 import { BaseFacet } from './base-facet';
 import { PivotFacet } from './pivot-facet';
 import { TableFacet } from './table-facet';
+import { FrozenFacet } from './frozen-facet';
 
-export { BaseFacet, PivotFacet, TableFacet };
+export * from './header';
+export { BaseFacet, PivotFacet, TableFacet, FrozenFacet };
diff --git a/packages/s2-core/src/index.ts b/packages/s2-core/src/index.ts
index 6fb85f907f..29b1f23fe0 100644
--- a/packages/s2-core/src/index.ts
+++ b/packages/s2-core/src/index.ts
@@ -11,4 +11,4 @@ export * from './sheet-type';
 export * from './data-set';
 export * from './interaction';
 export * from './ui/tooltip';
-export * from './facet/header';
+export * from './facet';
diff --git a/packages/s2-core/src/interaction/event-controller.ts b/packages/s2-core/src/interaction/event-controller.ts
index 83c6c34029..f4670994df 100644
--- a/packages/s2-core/src/interaction/event-controller.ts
+++ b/packages/s2-core/src/interaction/event-controller.ts
@@ -114,11 +114,12 @@ export class EventController {
   }
 
   // 不能单独判断是否 Image Shape, 用户如果自定义单元格绘制图片, 会导致判断错误
-  private isGuiIconShape = (target: CanvasEvent['target']) =>
-    target instanceof CustomImage && target.imgType === GuiIcon.type;
+  private isGuiIconShape = (target: CanvasEvent['target']) => {
+    return target instanceof CustomImage && target.imgType === GuiIcon.type;
+  };
 
+  // Windows and Mac OS
   private onKeyboardCopy(event: KeyboardEvent) {
-    // windows and macos copy
     if (
       this.isCanvasEffect &&
       this.spreadsheet.options.interaction?.enableCopy &&
diff --git a/packages/s2-core/src/utils/g-mini-charts.ts b/packages/s2-core/src/utils/g-mini-charts.ts
index 27edc51ee8..b36b94343e 100644
--- a/packages/s2-core/src/utils/g-mini-charts.ts
+++ b/packages/s2-core/src/utils/g-mini-charts.ts
@@ -5,7 +5,7 @@
 
 import { isEmpty, isNil, map, max, min } from 'lodash';
 import type { DataCell } from '..';
-import { CellType, MiniChartTypes } from '../common/constant';
+import { CellType, MiniChartType } from '../common/constant';
 import {
   CellClipBox,
   type BaseChartData,
@@ -63,7 +63,7 @@ export const scale = (chartData: BaseChartData, cell: S2CellType) => {
   const intervalPadding = miniChart?.bar?.intervalPadding!;
 
   const intervalX =
-    type === MiniChartTypes.Bar
+    type === MiniChartType.Bar
       ? (xEnd - xStart - (measures.length - 1) * intervalPadding) /
           measures.length +
         intervalPadding
@@ -83,7 +83,7 @@ export const scale = (chartData: BaseChartData, cell: S2CellType) => {
         positionY = minMeasure > 0 ? yStart : yEnd;
       }
 
-      if (type === MiniChartTypes.Bar) {
+      if (type === MiniChartType.Bar) {
         let baseLinePositionY: number;
         let barHeight: number;
 
@@ -403,10 +403,10 @@ export const drawBullet = (value: BulletValue, cell: S2CellType) => {
 
 export const renderMiniChart = (cell: S2CellType, data?: MiniChartData) => {
   switch (data?.type) {
-    case MiniChartTypes.Line:
+    case MiniChartType.Line:
       drawLine(data, cell);
       break;
-    case MiniChartTypes.Bar:
+    case MiniChartType.Bar:
       drawBar(data, cell);
       break;
     default:
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b2c8d0d4c9..d61786e299 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -450,23 +450,23 @@ importers:
         specifier: ^5.2.6
         version: 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@antv/dumi-theme-antv':
-        specifier: ^0.4.6
-        version: 0.4.6(@babel/core@7.23.2)(dumi@2.2.16)(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^0.5.0
+        version: 0.5.0(@babel/core@7.23.2)(dumi@2.2.17)(react-dom@18.2.0)(react@18.2.0)
       '@antv/g':
-        specifier: ^5.18.23
-        version: 5.18.23
+        specifier: ^5.18.24
+        version: 5.18.24
       '@antv/g-canvas':
-        specifier: ^1.11.25
-        version: 1.11.25
+        specifier: ^1.11.26
+        version: 1.11.26
       '@antv/g-plugin-a11y':
-        specifier: ^0.6.20
-        version: 0.6.20
+        specifier: ^0.6.21
+        version: 0.6.21
       '@antv/g-plugin-rough-canvas-renderer':
-        specifier: ^1.9.25
-        version: 1.9.25
+        specifier: ^1.9.26
+        version: 1.9.26
       '@antv/g2':
-        specifier: ^5.1.13
-        version: 5.1.13
+        specifier: ^5.1.15
+        version: 5.1.15
       '@antv/s2':
         specifier: next
         version: link:../packages/s2-core
@@ -474,14 +474,14 @@ importers:
         specifier: next
         version: link:../packages/s2-react
       antd:
-        specifier: ^5.12.7
-        version: 5.12.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.13.2
+        version: 5.13.2(react-dom@18.2.0)(react@18.2.0)
       copy-to-clipboard:
         specifier: ^3.3.3
         version: 3.3.3
       dumi:
-        specifier: ^2.2.16
-        version: 2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
+        specifier: ^2.2.17
+        version: 2.2.17(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
       gh-pages:
         specifier: ^6.1.1
         version: 6.1.1
@@ -706,7 +706,7 @@ packages:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       '@emotion/hash': 0.8.0
       '@emotion/unitless': 0.7.5
       classnames: 2.5.1
@@ -788,7 +788,7 @@ packages:
   /@antv/component@1.0.0:
     resolution: {integrity: sha512-LSM6NZJqfnev/TYUvYsmQNHUUjw5gtrXFS4TjavstYSBIbQoCWa0BtE6lR9QblA1MBC+B5CTNc8MqiZRRzKogA==}
     dependencies:
-      '@antv/g': 5.18.23
+      '@antv/g': 5.18.24
       '@antv/scale': 0.4.13
       '@antv/util': 3.3.5
       svg-path-parser: 1.1.0
@@ -797,7 +797,7 @@ packages:
   /@antv/component@1.0.1-beta.0:
     resolution: {integrity: sha512-syonGLy7bcpe+4qqKjtwBZMUUfZU8TKJRQAeYOB4pEiz2kr1Ky/qZLteT12QDQRugeMz9KnrUXMF+nAvUErKww==}
     dependencies:
-      '@antv/g': 5.18.23
+      '@antv/g': 5.18.24
       '@antv/scale': 0.4.13
       '@antv/util': 3.3.5
       svg-path-parser: 1.1.0
@@ -810,8 +810,8 @@ packages:
       '@antv/util': 2.0.17
       gl-matrix: 3.4.3
 
-  /@antv/dumi-theme-antv@0.4.6(@babel/core@7.23.2)(dumi@2.2.16)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-k4CwPxjaaGCtJMp7zANHfDthsHlrA0ubmk1J31lhuOPgDcqXbOOjcDXh01tGdxtrjlXLYV3g27oykHBxazXB3w==}
+  /@antv/dumi-theme-antv@0.5.0(@babel/core@7.23.2)(dumi@2.2.17)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-IL17dW9x9sJbRbdrDxTw9/gUrVWMt7rAS+pBeN6YVSsNh0/nqMDEmGtrLyrxEBCcnmo4azSocKr/uKMW9Jt+RQ==}
     peerDependencies:
       dumi: ^2.0.0
       react: '>=16.9.0'
@@ -829,7 +829,7 @@ packages:
       codesandbox: 2.2.3
       d3-dsv: 3.0.1
       docsearch.js: 2.6.3
-      dumi: 2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
+      dumi: 2.2.17(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2)
       front-matter: 4.0.2
       fs-extra: 10.1.0
       glob: 8.1.0
@@ -847,17 +847,21 @@ packages:
       react-error-boundary: 3.1.4(react@18.2.0)
       react-github-button: 0.1.11
       react-helmet: 6.1.0(react@18.2.0)
+      react-markdown: 9.0.1(react@18.2.0)
       react-router-dom: 6.6.1(react-dom@18.2.0)(react@18.2.0)
       react-slick: 0.29.0(react-dom@18.2.0)(react@18.2.0)
       react-split-pane: 0.1.92(react-dom@18.2.0)(react@18.2.0)
       react-use: 17.4.0(react-dom@18.2.0)(react@18.2.0)
       reading-time: 1.5.0
+      rehype-raw: 7.0.0
+      remark-gfm: 4.0.0
       semver: 7.5.4
       size-sensor: 1.0.1
       slick-carousel: 1.8.1
       unified: 10.1.2
       unist-util-visit: 4.1.2
       uri-parse: 1.0.0
+      valtio: 1.13.0(react@18.2.0)
       video-react: 0.16.0(react-dom@18.2.0)(react@18.2.0)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -878,6 +882,14 @@ packages:
       gl-matrix: 3.4.3
       tslib: 2.6.2
 
+  /@antv/g-camera-api@1.2.22:
+    resolution: {integrity: sha512-+sWDUMTeOACfb6HUJbuMS3ab79xCtFgCHhD+drlNbOjRCJDlkFHPsplyM7vA1a2Rs0zoyV+K68duClsP7Ei3OA==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+      '@antv/util': 3.3.5
+      gl-matrix: 3.4.3
+      tslib: 2.6.2
+
   /@antv/g-canvas@1.11.25:
     resolution: {integrity: sha512-8Fx7vpwYdUmaYPUn6fcVdgy/mXVzeymSBfrNXqu1O1jqhTtIUH5Jr8Ui+zTxf8NZkqh7pBFP8TRroXpIWTJ6JQ==}
     dependencies:
@@ -891,11 +903,30 @@ packages:
       '@antv/util': 3.3.5
       tslib: 2.6.2
 
+  /@antv/g-canvas@1.11.26:
+    resolution: {integrity: sha512-7THxFINBbh5MHaapzuUs1mcgXLh4imGZP6xovg8W1riroWGg9q/Mkyt9oXVxK9TtrBNTYQkGR6yVQw7pz3dm6g==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+      '@antv/g-plugin-canvas-path-generator': 1.3.21
+      '@antv/g-plugin-canvas-picker': 1.10.23
+      '@antv/g-plugin-canvas-renderer': 1.9.23
+      '@antv/g-plugin-dom-interaction': 1.9.21
+      '@antv/g-plugin-html-renderer': 1.9.24
+      '@antv/g-plugin-image-loader': 1.3.21
+      '@antv/util': 3.3.5
+      tslib: 2.6.2
+    dev: false
+
   /@antv/g-dom-mutation-observer-api@1.2.20:
     resolution: {integrity: sha512-J3EuEtWmIKGC44XWgJXG/nFnsjFY/oH9aAj1YaDVMtYREcyQOjb/aY9jdCfDmZBrNcMYeUHcsZEVhYwpc0wBcw==}
     dependencies:
       '@antv/g-lite': 1.2.20
 
+  /@antv/g-dom-mutation-observer-api@1.2.21:
+    resolution: {integrity: sha512-/gE0hYFAKyrh0bDad4HH6pI9s9VRG3h9RWA5pU4MzFo/9nTQtjp+DvWr9TR/oahg0u9gtyrBO5HE4eI5kziMRA==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+
   /@antv/g-lite@1.2.19:
     resolution: {integrity: sha512-eHFkha7smINzzPCZ2znh10Fx47B7wGf9HM8I6srL5WJskgDYc7nQ2fs/azJcwoFdWxJLar3hugWi8azYkRTZNA==}
     dependencies:
@@ -918,6 +949,17 @@ packages:
       rbush: 3.0.1
       tslib: 2.6.2
 
+  /@antv/g-lite@1.2.21:
+    resolution: {integrity: sha512-VGo78eaJE93cRPLaWZcXyi0TjfymHrAbweAVI01t3A3wgduqn1CpTXKBICqaNgi/T73rL0zcVO0Nn9th3Lincg==}
+    dependencies:
+      '@antv/g-math': 2.0.2
+      '@antv/util': 3.3.5
+      d3-color: 1.4.1
+      eventemitter3: 5.0.1
+      gl-matrix: 3.4.3
+      rbush: 3.0.1
+      tslib: 2.6.2
+
   /@antv/g-math@2.0.2:
     resolution: {integrity: sha512-uqGU1C+70orjeSUoIzD3TuXjL5dRQCIyjZrBrTmm0FWd6VQJMWHyG5ypuZ2lMiI5MrRajVSE1w+3J4hiNBYSJg==}
     dependencies:
@@ -930,6 +972,14 @@ packages:
     dependencies:
       '@antv/g-lite': 1.2.20
       tslib: 2.6.2
+    dev: true
+
+  /@antv/g-plugin-a11y@0.6.21:
+    resolution: {integrity: sha512-T1Yxngh+wY7+SNZBe11sWwAtXLR1afZEDGOOVbV6RWStpLKdVRJ4t7dfoE6XreLObnlw91T6REZIFIvMhKu6Lw==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+      tslib: 2.6.2
+    dev: false
 
   /@antv/g-plugin-canvas-path-generator@1.3.20:
     resolution: {integrity: sha512-q6jQpdRxJem4e3inmmTP4Uv03No5mzt1bT4OeA1bE3xVuD8l3yBNKu1We6bfdp+1PcfLnDAmvGosQL/sMneiRQ==}
@@ -939,6 +989,15 @@ packages:
       '@antv/util': 3.3.5
       tslib: 2.6.2
 
+  /@antv/g-plugin-canvas-path-generator@1.3.21:
+    resolution: {integrity: sha512-pz+2mCHIFGQ9w3ED4awGCrpUQbxdxkGtw1VqjAu178+uimDQJYaTXkpT2rdqsobVcm4LwQCNlugczAJfoJp9fQ==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+      '@antv/g-math': 2.0.2
+      '@antv/util': 3.3.5
+      tslib: 2.6.2
+    dev: false
+
   /@antv/g-plugin-canvas-picker@1.10.22:
     resolution: {integrity: sha512-gj6caACxuuNP1oy3kG5RCLMHfmlyvPnaxkQ9Sv/Rfe39I6xpqNNiAfP3vZbSZqBDyKkhdjHJMjdELEJ24seAJg==}
     dependencies:
@@ -950,6 +1009,18 @@ packages:
       gl-matrix: 3.4.3
       tslib: 2.6.2
 
+  /@antv/g-plugin-canvas-picker@1.10.23:
+    resolution: {integrity: sha512-rdgSrLQMXIzPAnHf+vJ0unSKGkq1gC90iQVisyWKbH761sfNfVa6I+4lFWrpcBnwU09E3AfGroD1vfiHcpvQ1A==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+      '@antv/g-math': 2.0.2
+      '@antv/g-plugin-canvas-path-generator': 1.3.21
+      '@antv/g-plugin-canvas-renderer': 1.9.23
+      '@antv/util': 3.3.5
+      gl-matrix: 3.4.3
+      tslib: 2.6.2
+    dev: false
+
   /@antv/g-plugin-canvas-renderer@1.9.22:
     resolution: {integrity: sha512-XsEA0LslLKP0Vc7+YOLF1sk7Y2kL1g7Ip9tdiOjLdnl2ZeMOnx7FlOfL0UC9MpQGyM/SwNCmth8gk47KBdo8Yg==}
     dependencies:
@@ -961,12 +1032,31 @@ packages:
       gl-matrix: 3.4.3
       tslib: 2.6.2
 
+  /@antv/g-plugin-canvas-renderer@1.9.23:
+    resolution: {integrity: sha512-uT2IsUJnwQ0m6n3S86eJYYDMMqF3yUMYcfj6sBchwym2NB3tAC/x0BVFGHZtEyqUkfmBr2wKcYjjBOfPl1tbhw==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+      '@antv/g-math': 2.0.2
+      '@antv/g-plugin-canvas-path-generator': 1.3.21
+      '@antv/g-plugin-image-loader': 1.3.21
+      '@antv/util': 3.3.5
+      gl-matrix: 3.4.3
+      tslib: 2.6.2
+    dev: false
+
   /@antv/g-plugin-dom-interaction@1.9.20:
     resolution: {integrity: sha512-0saRodsOwKIu8G2C8D6adxHysJkcQV9ATJ6QCN2mlqpyL+KWvghon1jibBR0cOQusL7f0baxWttkBgepbYPt1w==}
     dependencies:
       '@antv/g-lite': 1.2.20
       tslib: 2.6.2
 
+  /@antv/g-plugin-dom-interaction@1.9.21:
+    resolution: {integrity: sha512-aO4yWve2yquZQYqZDU03pM2vgkOjFKk24zTRk+V4cAmdgjtUjCa7EcMWODI8eX2UB6zT31aySzyhOjXHQVC78A==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+      tslib: 2.6.2
+    dev: false
+
   /@antv/g-plugin-dragndrop@1.8.19:
     resolution: {integrity: sha512-dLmOXxQjnsdoEVa0FSFELuVqFHdaCVqDiTwIwrde9xSpsRHkDamyBxnihvn18aCptuX9Gwz/D340xXJNMGgjjQ==}
     dependencies:
@@ -982,6 +1072,15 @@ packages:
       gl-matrix: 3.4.3
       tslib: 2.6.2
 
+  /@antv/g-plugin-html-renderer@1.9.24:
+    resolution: {integrity: sha512-8tM2LaHXpgoyT27tryu/lVDX+YEvKv+KaPCtMTfQf04vL0XfbQ/ATcEXAEksIsNdZ+brQvi3LKh6UPiWCRAs3A==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+      '@antv/util': 3.3.5
+      gl-matrix: 3.4.3
+      tslib: 2.6.2
+    dev: false
+
   /@antv/g-plugin-image-loader@1.3.20:
     resolution: {integrity: sha512-9ZJfV3/MWlRT4VbuiUtdXPf1pwdmV8HLQlcl/HakN9z9jEA2tPMXuWvcIghDnAGsb+ii2bUNEeZZgbWtHyjwVA==}
     dependencies:
@@ -990,6 +1089,15 @@ packages:
       gl-matrix: 3.4.3
       tslib: 2.6.2
 
+  /@antv/g-plugin-image-loader@1.3.21:
+    resolution: {integrity: sha512-PCFRYscSapA4pMkm9TcUQcxV9hnHKe0AIJaR35kV2F1hhuWLMyCPEuxVyWaCMYDFMfrDtVj7dXzL81L4fja8HQ==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+      '@antv/util': 3.3.5
+      gl-matrix: 3.4.3
+      tslib: 2.6.2
+    dev: false
+
   /@antv/g-plugin-rough-canvas-renderer@1.9.25:
     resolution: {integrity: sha512-BDdZpEhpN86uKnKWKaERP/T33L8LlrVVDYwue06GehdSdr7/MwS6qoPNsNZfs0KShdZA/Z6nJ2MW5o1v4hgf7w==}
     dependencies:
@@ -998,6 +1106,17 @@ packages:
       '@antv/util': 3.3.5
       roughjs: 4.6.6
       tslib: 2.6.2
+    dev: true
+
+  /@antv/g-plugin-rough-canvas-renderer@1.9.26:
+    resolution: {integrity: sha512-/b5+PanLwUP5yoOQQtLM7GISaVplRypJtSNi/GLUgTm708Ic9piMw8HkQMF2A5fBIzL9c8Yt1ZVidiZ3LDTaeg==}
+    dependencies:
+      '@antv/g-canvas': 1.11.26
+      '@antv/g-lite': 1.2.21
+      '@antv/util': 3.3.5
+      roughjs: 4.6.6
+      tslib: 2.6.2
+    dev: false
 
   /@antv/g-web-animations-api@1.2.21:
     resolution: {integrity: sha512-3LkPDOjpMjQ9b/mYoGgsoocWEOvDIUW2GpoLClbyd0vcIc97EujXVUobUIu7jvFQgvucgTnaxDLkAGDzuPaFvg==}
@@ -1006,6 +1125,13 @@ packages:
       '@antv/util': 3.3.5
       tslib: 2.6.2
 
+  /@antv/g-web-animations-api@1.2.22:
+    resolution: {integrity: sha512-/bh/jUF/hVaDOnNtXRoB5ZsDnPK9IIrduLr4o5sFP+tOuCCBpalWgxeP11yBJoMpl2Y14GmipZTAD8QUoZyyNw==}
+    dependencies:
+      '@antv/g-lite': 1.2.21
+      '@antv/util': 3.3.5
+      tslib: 2.6.2
+
   /@antv/g2@5.1.11:
     resolution: {integrity: sha512-zxWWgFxkmflNAHdbwQ03emMKIz0+UBbhXV2gCpDfntKkkC2AEd+Mb9L3VEZst4kcG1QalvDxAWyz3ePrpB11XA==}
     dependencies:
@@ -1033,14 +1159,14 @@ packages:
       pdfast: 0.2.0
     dev: true
 
-  /@antv/g2@5.1.13:
-    resolution: {integrity: sha512-Ak2QY9buhScqoII1pSlmtM4V6ubkp14IF5mYumiBun11sblKBtBFemBV/mmsYaWw/Eoq+hz3jmYbRX2zdb7pQw==}
+  /@antv/g2@5.1.15:
+    resolution: {integrity: sha512-WiISs4GUOzHlA4vrkt+eQfr1+LVIAuv4AkfFCRzTprayMO72pLAdgTcwUg9YlvafwM220r9FQD1nXIlYNXOOhA==}
     dependencies:
       '@antv/component': 1.0.1-beta.0
       '@antv/coord': 0.4.7
       '@antv/event-emitter': 0.1.3
-      '@antv/g': 5.18.23
-      '@antv/g-canvas': 1.11.25
+      '@antv/g': 5.18.24
+      '@antv/g-canvas': 1.11.26
       '@antv/g-plugin-dragndrop': 1.8.19
       '@antv/path-util': 3.0.1
       '@antv/scale': 0.4.13
@@ -1068,6 +1194,14 @@ packages:
       '@antv/g-lite': 1.2.20
       '@antv/g-web-animations-api': 1.2.21
 
+  /@antv/g@5.18.24:
+    resolution: {integrity: sha512-qUIjxNPd60VpA6bjDALkRWEWA0CKm2G+vRPkP729eiZ0JnqlRuSqVNibo6QbrlZGEZQfqKiNjiVDODbJjHxNIw==}
+    dependencies:
+      '@antv/g-camera-api': 1.2.22
+      '@antv/g-dom-mutation-observer-api': 1.2.21
+      '@antv/g-lite': 1.2.21
+      '@antv/g-web-animations-api': 1.2.22
+
   /@antv/path-util@3.0.1:
     resolution: {integrity: sha512-tpvAzMpF9Qm6ik2YSMqICNU5tco5POOW7S4XoxZAI/B0L26adU+Md/SmO0BBo2SpuywKvzPH3hPT3xmoyhr04Q==}
     dependencies:
@@ -3040,7 +3174,7 @@ packages:
     peerDependencies:
       react: '>=16.3.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       hoist-non-react-statics: 3.3.2
       react: 18.1.0
       react-is: 16.13.1
@@ -3052,7 +3186,7 @@ packages:
     peerDependencies:
       react: '>=16.3.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       hoist-non-react-statics: 3.3.2
       react: 18.2.0
       react-is: 16.13.1
@@ -3444,6 +3578,23 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@rc-component/tour@1.12.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-U4mf1FiUxGCwrX4ed8op77Y8VKur+8Y/61ylxtqGbcSoh1EBC7bWd/DkLu0ClTUrKZInqEi1FL7YgFtnT90vHA==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.5.1
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
 
   /@rc-component/trigger@1.18.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-jRLYgFgjLEPq3MvS87fIhcfuywFSRDaDrYw1FLku7Cm4esszvzTbA0JBsyacAyLrK9rF3TiHFcvoEDMzoD3CTA==}
@@ -4508,6 +4659,12 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
+  /@types/hast@3.0.3:
+    resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: false
+
   /@types/hoist-non-react-statics@3.3.1:
     resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
     dependencies:
@@ -4598,6 +4755,12 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
+  /@types/mdast@4.0.3:
+    resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: false
+
   /@types/mdurl@1.0.2:
     resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
     dev: true
@@ -4743,6 +4906,10 @@ packages:
   /@types/unist@2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
 
+  /@types/unist@3.0.2:
+    resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
+    dev: false
+
   /@types/web-bluetooth@0.0.18:
     resolution: {integrity: sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==}
     dev: false
@@ -5323,7 +5490,7 @@ packages:
   /@umijs/history@5.3.1:
     resolution: {integrity: sha512-/e0cEGrR2bIWQD7pRl3dl9dcyRGeC9hoW0OCvUTT/hjY0EfUrkd6G8ZanVghPMpDuY5usxq9GVcvrT8KNXLWvA==}
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       query-string: 6.14.1
     dev: false
 
@@ -6297,8 +6464,8 @@ packages:
       - moment
     dev: true
 
-  /antd@5.12.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-+SnWLO0kwXFnP15PAzvczZG3/yGu1PoYJa1mcYajqi248gaFA6HjY0s/kXVyXEIzY8dO3MT+RenYweU+s47Fwg==}
+  /antd@5.13.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-P+N8gc0NOPy2WqJj/57Ey3dZUmb7nEUwAM+CIJaR5SOEjZnhEtMGRJSt+3lnhJ3MNRR39aR6NYkRVp2mYfphiA==}
     peerDependencies:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
@@ -6310,23 +6477,23 @@ packages:
       '@ctrl/tinycolor': 3.6.1
       '@rc-component/color-picker': 1.5.1(react-dom@18.2.0)(react@18.2.0)
       '@rc-component/mutate-observer': 1.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@rc-component/tour': 1.11.1(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/tour': 1.12.3(react-dom@18.2.0)(react@18.2.0)
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
       copy-to-clipboard: 3.3.3
       dayjs: 1.11.10
       qrcode.react: 3.1.0(react@18.2.0)
-      rc-cascader: 3.20.0(react-dom@18.2.0)(react@18.2.0)
+      rc-cascader: 3.21.2(react-dom@18.2.0)(react@18.2.0)
       rc-checkbox: 3.1.0(react-dom@18.2.0)(react@18.2.0)
       rc-collapse: 3.7.2(react-dom@18.2.0)(react@18.2.0)
       rc-dialog: 9.3.4(react-dom@18.2.0)(react@18.2.0)
-      rc-drawer: 6.5.2(react-dom@18.2.0)(react@18.2.0)
+      rc-drawer: 7.0.0(react-dom@18.2.0)(react@18.2.0)
       rc-dropdown: 4.1.0(react-dom@18.2.0)(react@18.2.0)
       rc-field-form: 1.41.0(react-dom@18.2.0)(react@18.2.0)
       rc-image: 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      rc-input: 1.3.11(react-dom@18.2.0)(react@18.2.0)
-      rc-input-number: 8.4.0(react-dom@18.2.0)(react@18.2.0)
-      rc-mentions: 2.9.1(react-dom@18.2.0)(react@18.2.0)
+      rc-input: 1.4.3(react-dom@18.2.0)(react@18.2.0)
+      rc-input-number: 8.6.1(react-dom@18.2.0)(react@18.2.0)
+      rc-mentions: 2.10.1(react-dom@18.2.0)(react@18.2.0)
       rc-menu: 9.12.4(react-dom@18.2.0)(react@18.2.0)
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-notification: 5.3.0(react-dom@18.2.0)(react@18.2.0)
@@ -6336,16 +6503,16 @@ packages:
       rc-rate: 2.12.0(react-dom@18.2.0)(react@18.2.0)
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
       rc-segmented: 2.2.2(react-dom@18.2.0)(react@18.2.0)
-      rc-select: 14.10.0(react-dom@18.2.0)(react@18.2.0)
+      rc-select: 14.11.0(react-dom@18.2.0)(react@18.2.0)
       rc-slider: 10.5.0(react-dom@18.2.0)(react@18.2.0)
       rc-steps: 6.0.1(react-dom@18.2.0)(react@18.2.0)
       rc-switch: 4.1.0(react-dom@18.2.0)(react@18.2.0)
-      rc-table: 7.36.1(react-dom@18.2.0)(react@18.2.0)
-      rc-tabs: 12.14.1(react-dom@18.2.0)(react@18.2.0)
-      rc-textarea: 1.5.3(react-dom@18.2.0)(react@18.2.0)
+      rc-table: 7.37.0(react-dom@18.2.0)(react@18.2.0)
+      rc-tabs: 14.0.0(react-dom@18.2.0)(react@18.2.0)
+      rc-textarea: 1.6.3(react-dom@18.2.0)(react@18.2.0)
       rc-tooltip: 6.1.3(react-dom@18.2.0)(react@18.2.0)
       rc-tree: 5.8.2(react-dom@18.2.0)(react@18.2.0)
-      rc-tree-select: 5.15.0(react-dom@18.2.0)(react@18.2.0)
+      rc-tree-select: 5.17.0(react-dom@18.2.0)(react@18.2.0)
       rc-upload: 4.5.2(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -8952,6 +9119,14 @@ packages:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
+  /derive-valtio@0.1.0(valtio@1.13.0):
+    resolution: {integrity: sha512-OCg2UsLbXK7GmmpzMXhYkdO64vhJ1ROUUGaTFyHjVwEdMEcTTRj7W1TxLbSBxdY8QLBPCcp66MTyaSy0RpO17A==}
+    peerDependencies:
+      valtio: '*'
+    dependencies:
+      valtio: 1.13.0(react@18.2.0)
+    dev: false
+
   /des.js@1.0.1:
     resolution: {integrity: sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==}
     dependencies:
@@ -8987,6 +9162,12 @@ packages:
     resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
     requiresBuild: true
 
+  /devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+    dependencies:
+      dequal: 2.0.3
+    dev: false
+
   /diff-sequences@24.9.0:
     resolution: {integrity: sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==}
     engines: {node: '>= 6'}
@@ -9187,8 +9368,8 @@ packages:
     resolution: {integrity: sha512-a/Y5lf0G6gwsEQ9hop/n03CcjmHsGBk384Cz/AEX6mRYrfSpUx/lQvP9HLoXkCzScl9PL1sSmLPnMkgaXDCZLA==}
     dev: false
 
-  /dumi@2.2.16(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-r2x/CY0fR8/YZOwEnG4JsLEpn8jOg94Qyd1u+7pRD9SCx7dF9It+GwkGbdNEsyenGsO/ZU9wD+Kz7KO+HU7/EA==}
+  /dumi@2.2.17(@babel/core@7.23.2)(@types/node@20.8.9)(eslint@8.52.0)(jest@26.6.3)(postcss-less@6.0.0)(prettier@3.0.3)(react-dom@18.2.0)(react@18.2.0)(rollup@4.1.5)(stylelint@15.11.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-oI2OVlkkVORy0ud64YlhrBF+rsAda9rGFxMLrOLepTjC96mLOrgUz/geKkckWA5LemEuFVsaTYE/5HDpAPTkvQ==}
     hasBin: true
     peerDependencies:
       react: '>=16.8'
@@ -10379,6 +10560,10 @@ packages:
     resolution: {integrity: sha512-rxZj1GkQhY4x1j/CSnybK9cGuMFQYFPLq0iNyopqf14aOVLFtMv7Esika+ObJWPWiOHuMOAHz3YkWoLYYRnzWQ==}
     dev: false
 
+  /estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+    dev: false
+
   /estree-util-to-js@1.2.0:
     resolution: {integrity: sha512-IzU74r1PK5IMMGZXUVZbmiu4A1uhiPgW5hm1GjcOfr4ZzHaMPpLNJjR7HjXiIOzi25nZDrgFTobHTkV5Q6ITjA==}
     dependencies:
@@ -10711,7 +10896,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
-    dev: true
 
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -11632,7 +11816,7 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
       dir-glob: 3.0.1
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       ignore: 5.2.4
       merge2: 1.4.1
       slash: 4.0.0
@@ -11956,6 +12140,19 @@ packages:
       vfile-location: 4.0.1
       web-namespaces: 2.0.1
 
+  /hast-util-from-parse5@8.0.1:
+    resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/unist': 3.0.2
+      devlop: 1.1.0
+      hastscript: 8.0.0
+      property-information: 6.2.0
+      vfile: 6.0.1
+      vfile-location: 5.0.2
+      web-namespaces: 2.0.1
+    dev: false
+
   /hast-util-has-property@2.0.1:
     resolution: {integrity: sha512-X2+RwZIMTMKpXUzlotatPzWj8bspCymtXH3cfG3iQKV+wPF53Vgaqxi/eLqGck0wKq1kS9nvoB1wchbCPEL8sg==}
 
@@ -11990,6 +12187,12 @@ packages:
     dependencies:
       '@types/hast': 2.3.4
 
+  /hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+    dependencies:
+      '@types/hast': 3.0.3
+    dev: false
+
   /hast-util-phrasing@2.0.2:
     resolution: {integrity: sha512-yGkCfPkkfCyiLfK6KEl/orMDr/zgCnq/NaO9HfULx6/Zga5fso5eqQA5Ov/JZVqACygvw9shRYWgXNcG2ilo7w==}
     dependencies:
@@ -12032,6 +12235,24 @@ packages:
       zwitch: 2.0.4
     dev: false
 
+  /hast-util-raw@9.0.2:
+    resolution: {integrity: sha512-PldBy71wO9Uq1kyaMch9AHIghtQvIwxBUkv823pKmkTM3oV1JxtsTNYdevMxvUHqcnOAuO65JKU2+0NOxc2ksA==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/unist': 3.0.2
+      '@ungap/structured-clone': 1.2.0
+      hast-util-from-parse5: 8.0.1
+      hast-util-to-parse5: 8.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.1.0
+      parse5: 7.1.2
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+    dev: false
+
   /hast-util-to-estree@2.3.3:
     resolution: {integrity: sha512-ihhPIUPxN0v0w6M5+IiAZZrn0LH2uZomeWwhn7uP7avZC6TE7lIiEh2yBMPr5+zi1aUCXq6VoYRgs2Bw9xmycQ==}
     dependencies:
@@ -12069,6 +12290,28 @@ packages:
       stringify-entities: 4.0.3
       zwitch: 2.0.4
 
+  /hast-util-to-jsx-runtime@2.3.0:
+    resolution: {integrity: sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==}
+    dependencies:
+      '@types/estree': 1.0.0
+      '@types/hast': 3.0.3
+      '@types/unist': 3.0.2
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.0
+      mdast-util-mdx-jsx: 3.0.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 6.2.0
+      space-separated-tokens: 2.0.2
+      style-to-object: 1.0.5
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /hast-util-to-mdast@8.4.1:
     resolution: {integrity: sha512-tfmBLASuCgyhCzpkTXM5kU8xeuS5jkMZ17BYm2YftGT5wvgc7uHXTZ/X8WfNd6F5NV/IGmrLsuahZ+jXQir4zQ==}
     dependencies:
@@ -12099,6 +12342,18 @@ packages:
       web-namespaces: 2.0.1
       zwitch: 2.0.4
 
+  /hast-util-to-parse5@8.0.0:
+    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
+    dependencies:
+      '@types/hast': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 6.2.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+    dev: false
+
   /hast-util-to-string@2.0.0:
     resolution: {integrity: sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==}
     dependencies:
@@ -12117,6 +12372,12 @@ packages:
   /hast-util-whitespace@2.0.1:
     resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
 
+  /hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+    dependencies:
+      '@types/hast': 3.0.3
+    dev: false
+
   /hast@1.0.0:
     resolution: {integrity: sha512-vFUqlRV5C+xqP76Wwq2SrM0kipnmpxJm7OfvVXpB35Fp+Fn4MV+ozr+JZr5qFvyR1q/U+Foim2x+3P+x9S1PLA==}
     deprecated: Renamed to rehype
@@ -12131,6 +12392,16 @@ packages:
       property-information: 6.2.0
       space-separated-tokens: 2.0.2
 
+  /hastscript@8.0.0:
+    resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
+    dependencies:
+      '@types/hast': 3.0.3
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 6.2.0
+      space-separated-tokens: 2.0.2
+    dev: false
+
   /he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
@@ -12148,7 +12419,7 @@ packages:
   /history@5.3.0:
     resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==}
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
     dev: false
 
   /hmac-drbg@1.0.1:
@@ -12267,9 +12538,17 @@ packages:
       selderee: 0.11.0
     dev: false
 
+  /html-url-attributes@3.0.0:
+    resolution: {integrity: sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow==}
+    dev: false
+
   /html-void-elements@2.0.1:
     resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
 
+  /html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+    dev: false
+
   /html-webpack-plugin@5.5.0:
     resolution: {integrity: sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==}
     engines: {node: '>=10.13.0'}
@@ -12620,6 +12899,10 @@ packages:
   /inline-style-parser@0.1.1:
     resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
 
+  /inline-style-parser@0.2.2:
+    resolution: {integrity: sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ==}
+    dev: false
+
   /inline-style-prefixer@6.0.4:
     resolution: {integrity: sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==}
     dependencies:
@@ -15344,7 +15627,7 @@ packages:
     dependencies:
       '@types/mdast': 3.0.10
       '@types/unist': 2.0.6
-      unist-util-visit: 4.1.1
+      unist-util-visit: 4.1.2
 
   /mdast-util-directive@2.2.2:
     resolution: {integrity: sha512-6BuW4dFkCbTIf9peVMXdtWylI6ovMidVjnHyJpx7IDhwk3GosIgUs87Rl3x6T6kP5iAf1qIE3lMn6CgWw40d+g==}
@@ -15373,6 +15656,15 @@ packages:
       unist-util-visit-parents: 5.1.3
     dev: false
 
+  /mdast-util-find-and-replace@3.0.1:
+    resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+    dev: false
+
   /mdast-util-from-markdown@1.2.0:
     resolution: {integrity: sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==}
     dependencies:
@@ -15391,6 +15683,25 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /mdast-util-from-markdown@2.0.0:
+    resolution: {integrity: sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      '@types/unist': 3.0.2
+      decode-named-character-reference: 1.0.2
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.0
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-decode-string: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-frontmatter@1.0.0:
     resolution: {integrity: sha512-7itKvp0arEVNpCktOET/eLFAYaZ+0cNjVtFtIPxgQ5tV+3i+D4SDDTjTzPWl44LT59PC+xdx+glNTawBdF98Mw==}
     dependencies:
@@ -15405,6 +15716,16 @@ packages:
       mdast-util-find-and-replace: 2.2.1
       micromark-util-character: 1.1.0
 
+  /mdast-util-gfm-autolink-literal@2.0.0:
+    resolution: {integrity: sha512-FyzMsduZZHSc3i0Px3PQcBT4WJY/X/RCtEJKuybiC6sjPqLv7h1yqAkmILZtuxMSsUyaLUWNp71+vQH2zqp5cg==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.1
+      micromark-util-character: 2.0.1
+    dev: false
+
   /mdast-util-gfm-footnote@1.0.1:
     resolution: {integrity: sha512-p+PrYlkw9DeCRkTVw1duWqPRHX6Ywh2BNKJQcZbCwAuP/59B0Lk9kakuAd7KbQprVO4GzdW8eS5++A9PUSqIyw==}
     dependencies:
@@ -15412,12 +15733,34 @@ packages:
       mdast-util-to-markdown: 1.5.0
       micromark-util-normalize-identifier: 1.0.0
 
+  /mdast-util-gfm-footnote@2.0.0:
+    resolution: {integrity: sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.0
+      mdast-util-to-markdown: 2.1.0
+      micromark-util-normalize-identifier: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-gfm-strikethrough@1.0.2:
     resolution: {integrity: sha512-T/4DVHXcujH6jx1yqpcAYYwd+z5lAYMw4Ls6yhTfbMMtCt0PHY4gEfhW9+lKsLBtyhUGKRIzcUA2FATVqnvPDA==}
     dependencies:
       '@types/mdast': 3.0.10
       mdast-util-to-markdown: 1.5.0
 
+  /mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      mdast-util-from-markdown: 2.0.0
+      mdast-util-to-markdown: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-gfm-table@1.0.6:
     resolution: {integrity: sha512-uHR+fqFq3IvB3Rd4+kzXW8dmpxUhvgCQZep6KdjsLK4O6meK5dYZEayLtIxNus1XO3gfjfcIFe8a7L0HZRGgag==}
     dependencies:
@@ -15428,12 +15771,35 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      devlop: 1.1.0
+      markdown-table: 3.0.3
+      mdast-util-from-markdown: 2.0.0
+      mdast-util-to-markdown: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-gfm-task-list-item@1.0.1:
     resolution: {integrity: sha512-KZ4KLmPdABXOsfnM6JHUIjxEvcx2ulk656Z/4Balw071/5qgnhz+H1uGtf2zIGnrnvDC8xR4Fj9uKbjAFGNIeA==}
     dependencies:
       '@types/mdast': 3.0.10
       mdast-util-to-markdown: 1.5.0
 
+  /mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.0
+      mdast-util-to-markdown: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-gfm@2.0.1:
     resolution: {integrity: sha512-42yHBbfWIFisaAfV1eixlabbsa6q7vHeSPY+cg+BBjX51M8xhgMacqH9g6TftB/9+YkcI0ooV4ncfrJslzm/RQ==}
     dependencies:
@@ -15447,6 +15813,20 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /mdast-util-gfm@3.0.0:
+    resolution: {integrity: sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==}
+    dependencies:
+      mdast-util-from-markdown: 2.0.0
+      mdast-util-gfm-autolink-literal: 2.0.0
+      mdast-util-gfm-footnote: 2.0.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-mdx-expression@1.3.1:
     resolution: {integrity: sha512-TTb6cKyTA1RD+1su1iStZ5PAv3rFfOUKcoU5EstUpv/IZo63uDX03R8+jXjMEhcobXnNOiG6/ccekvVl4eV1zQ==}
     dependencies:
@@ -15459,6 +15839,39 @@ packages:
       - supports-color
     dev: false
 
+  /mdast-util-mdx-expression@2.0.0:
+    resolution: {integrity: sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      '@types/hast': 3.0.3
+      '@types/mdast': 4.0.3
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.0
+      mdast-util-to-markdown: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdx-jsx@3.0.0:
+    resolution: {integrity: sha512-XZuPPzQNBPAlaqsTTgRrcJnyFbSOBovSadFgbFu8SnuNgm+6Bdx1K+IWoitsmj6Lq6MNtI+ytOqwN70n//NaBA==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      '@types/hast': 3.0.3
+      '@types/mdast': 4.0.3
+      '@types/unist': 3.0.2
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.0
+      mdast-util-to-markdown: 2.1.0
+      parse-entities: 4.0.0
+      stringify-entities: 4.0.3
+      unist-util-remove-position: 5.0.0
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-mdxjs-esm@1.3.0:
     resolution: {integrity: sha512-7N5ihsOkAEGjFotIX9p/YPdl4TqUoMxL4ajNz7PbT89BqsdWJuBC9rvgt6wpbwTZqWWR0jKWqQbwsOWDBUZv4g==}
     dependencies:
@@ -15471,14 +15884,34 @@ packages:
       - supports-color
     dev: false
 
+  /mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      '@types/hast': 3.0.3
+      '@types/mdast': 4.0.3
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.0
+      mdast-util-to-markdown: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-phrasing@3.0.0:
     resolution: {integrity: sha512-S+QYsDRLkGi8U7o5JF1agKa/sdP+CNGXXLqC17pdTVL8FHHgQEiwFGa9yE5aYtUxNiFGYoaDy9V1kC85Sz86Gg==}
     dependencies:
       '@types/mdast': 3.0.10
       unist-util-is: 5.1.1
 
-  /mdast-util-to-hast@12.2.5:
-    resolution: {integrity: sha512-EFNhT35ZR/VZ85/EedDdCNTq0oFM+NM/+qBomVGQ0+Lcg0nhI8xIwmdCzNMlVlCJNXRprpobtKP/IUh8cfz6zQ==}
+  /mdast-util-phrasing@4.0.0:
+    resolution: {integrity: sha512-xadSsJayQIucJ9n053dfQwVu1kuXg7jCTdYsMK8rqzKZh52nLfSH/k0sAxE0u+pj/zKZX+o5wB+ML5mRayOxFA==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      unist-util-is: 6.0.0
+    dev: false
+
+  /mdast-util-to-hast@12.2.5:
+    resolution: {integrity: sha512-EFNhT35ZR/VZ85/EedDdCNTq0oFM+NM/+qBomVGQ0+Lcg0nhI8xIwmdCzNMlVlCJNXRprpobtKP/IUh8cfz6zQ==}
     dependencies:
       '@types/hast': 2.3.4
       '@types/mdast': 3.0.10
@@ -15490,6 +15923,20 @@ packages:
       unist-util-position: 4.0.3
       unist-util-visit: 4.1.1
 
+  /mdast-util-to-hast@13.1.0:
+    resolution: {integrity: sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/mdast': 4.0.3
+      '@ungap/structured-clone': 1.2.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.0
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+    dev: false
+
   /mdast-util-to-markdown@1.5.0:
     resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==}
     dependencies:
@@ -15502,6 +15949,19 @@ packages:
       unist-util-visit: 4.1.1
       zwitch: 2.0.4
 
+  /mdast-util-to-markdown@2.1.0:
+    resolution: {integrity: sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      '@types/unist': 3.0.2
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.0.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-decode-string: 2.0.0
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+    dev: false
+
   /mdast-util-to-string@3.1.0:
     resolution: {integrity: sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==}
 
@@ -15511,6 +15971,12 @@ packages:
       '@types/mdast': 3.0.15
     dev: false
 
+  /mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+    dependencies:
+      '@types/mdast': 4.0.3
+    dev: false
+
   /mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
@@ -15607,6 +16073,27 @@ packages:
       micromark-util-types: 1.0.2
       uvu: 0.5.6
 
+  /micromark-core-commonmark@2.0.0:
+    resolution: {integrity: sha512-jThOz/pVmAYUtkroV3D5c1osFXAMv9e0ypGDOIZuCeAe91/sD6BoE2Sjzt30yuXtwOYUmySOhMas/PVyh02itA==}
+    dependencies:
+      decode-named-character-reference: 1.0.2
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.0
+      micromark-factory-label: 2.0.0
+      micromark-factory-space: 2.0.0
+      micromark-factory-title: 2.0.0
+      micromark-factory-whitespace: 2.0.0
+      micromark-util-character: 2.0.1
+      micromark-util-chunked: 2.0.0
+      micromark-util-classify-character: 2.0.0
+      micromark-util-html-tag-name: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-resolve-all: 2.0.0
+      micromark-util-subtokenize: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-extension-directive@2.1.2:
     resolution: {integrity: sha512-brqLEztt14/73snVXYsq9Cv6ng67O+Sy69ZuM0s8ZhN/GFI9rnyXyj0Y0DaCwi648vCImv7/U1H5TzR7wMv5jw==}
     dependencies:
@@ -15635,6 +16122,15 @@ packages:
       micromark-util-types: 1.0.2
       uvu: 0.5.6
 
+  /micromark-extension-gfm-autolink-literal@2.0.0:
+    resolution: {integrity: sha512-rTHfnpt/Q7dEAK1Y5ii0W8bhfJlVJFnJMHIPisfPK3gpVNuOP0VnRl96+YJ3RYWV/P4gFeQoGKNlT3RhuvpqAg==}
+    dependencies:
+      micromark-util-character: 2.0.1
+      micromark-util-sanitize-uri: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-extension-gfm-footnote@1.0.4:
     resolution: {integrity: sha512-E/fmPmDqLiMUP8mLJ8NbJWJ4bTw6tS+FEQS8CcuDtZpILuOb2kjLqPEeAePF1djXROHXChM/wPJw0iS4kHCcIg==}
     dependencies:
@@ -15647,6 +16143,19 @@ packages:
       micromark-util-types: 1.0.2
       uvu: 0.5.6
 
+  /micromark-extension-gfm-footnote@2.0.0:
+    resolution: {integrity: sha512-6Rzu0CYRKDv3BfLAUnZsSlzx3ak6HAoI85KTiijuKIz5UxZxbUI+pD6oHgw+6UtQuiRwnGRhzMmPRv4smcz0fg==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.0
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.0.1
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-sanitize-uri: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-extension-gfm-strikethrough@1.0.4:
     resolution: {integrity: sha512-/vjHU/lalmjZCT5xt7CcHVJGq8sYRm80z24qAKXzaHzem/xsDYb2yLL+NNVbYvmpLx3O7SYPuGL5pzusL9CLIQ==}
     dependencies:
@@ -15657,6 +16166,17 @@ packages:
       micromark-util-types: 1.0.2
       uvu: 0.5.6
 
+  /micromark-extension-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-c3BR1ClMp5fxxmwP6AoOY2fXO9U8uFMKs4ADD66ahLTNcwzSCyRVU4k7LPV5Nxo/VJiR4TdzxRQY2v3qIUceCw==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.0
+      micromark-util-classify-character: 2.0.0
+      micromark-util-resolve-all: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-extension-gfm-table@1.0.5:
     resolution: {integrity: sha512-xAZ8J1X9W9K3JTJTUL7G6wSKhp2ZYHrFk5qJgY/4B33scJzE2kpfRL6oiw/veJTbt7jiM/1rngLlOKPWr1G+vg==}
     dependencies:
@@ -15666,11 +16186,27 @@ packages:
       micromark-util-types: 1.0.2
       uvu: 0.5.6
 
+  /micromark-extension-gfm-table@2.0.0:
+    resolution: {integrity: sha512-PoHlhypg1ItIucOaHmKE8fbin3vTLpDOUg8KAr8gRCF1MOZI9Nquq2i/44wFvviM4WuxJzc3demT8Y3dkfvYrw==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-extension-gfm-tagfilter@1.0.1:
     resolution: {integrity: sha512-Ty6psLAcAjboRa/UKUbbUcwjVAv5plxmpUTy2XC/3nJFL37eHej8jrHrRzkqcpipJliuBH30DTs7+3wqNcQUVA==}
     dependencies:
       micromark-util-types: 1.0.2
 
+  /micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+    dependencies:
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-extension-gfm-task-list-item@1.0.3:
     resolution: {integrity: sha512-PpysK2S1Q/5VXi72IIapbi/jliaiOFzv7THH4amwXeYXLq3l1uo8/2Be0Ac1rEwK20MQEsGH2ltAZLNY2KI/0Q==}
     dependencies:
@@ -15680,6 +16216,16 @@ packages:
       micromark-util-types: 1.0.2
       uvu: 0.5.6
 
+  /micromark-extension-gfm-task-list-item@2.0.1:
+    resolution: {integrity: sha512-cY5PzGcnULaN5O7T+cOzfMoHjBW7j+T9D2sucA5d/KbsBTPcYdebm9zUd9zzdgJGCwahV+/W78Z3nbulBYVbTw==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-extension-gfm@2.0.1:
     resolution: {integrity: sha512-p2sGjajLa0iYiGQdT0oelahRYtMWvLjy8J9LOCxzIQsllMCGLbsLW+Nc+N4vi02jcRJvedVJ68cjelKIO6bpDA==}
     dependencies:
@@ -15692,6 +16238,19 @@ packages:
       micromark-util-combine-extensions: 1.0.0
       micromark-util-types: 1.0.2
 
+  /micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.0.0
+      micromark-extension-gfm-footnote: 2.0.0
+      micromark-extension-gfm-strikethrough: 2.0.0
+      micromark-extension-gfm-table: 2.0.0
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.0.1
+      micromark-util-combine-extensions: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-factory-destination@1.0.0:
     resolution: {integrity: sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==}
     dependencies:
@@ -15699,6 +16258,14 @@ packages:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
 
+  /micromark-factory-destination@2.0.0:
+    resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==}
+    dependencies:
+      micromark-util-character: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-factory-label@1.0.2:
     resolution: {integrity: sha512-CTIwxlOnU7dEshXDQ+dsr2n+yxpP0+fn271pu0bwDIS8uqfFcumXpj5mLn3hSC8iw2MUr6Gx8EcKng1dD7i6hg==}
     dependencies:
@@ -15707,12 +16274,28 @@ packages:
       micromark-util-types: 1.0.2
       uvu: 0.5.6
 
+  /micromark-factory-label@2.0.0:
+    resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-factory-space@1.0.0:
     resolution: {integrity: sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==}
     dependencies:
       micromark-util-character: 1.1.0
       micromark-util-types: 1.0.2
 
+  /micromark-factory-space@2.0.0:
+    resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==}
+    dependencies:
+      micromark-util-character: 2.0.1
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-factory-title@1.0.2:
     resolution: {integrity: sha512-zily+Nr4yFqgMGRKLpTVsNl5L4PMu485fGFDOQJQBl2NFpjGte1e86zC0da93wf97jrc4+2G2GQudFMHn3IX+A==}
     dependencies:
@@ -15722,6 +16305,15 @@ packages:
       micromark-util-types: 1.0.2
       uvu: 0.5.6
 
+  /micromark-factory-title@2.0.0:
+    resolution: {integrity: sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==}
+    dependencies:
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-factory-whitespace@1.0.0:
     resolution: {integrity: sha512-Qx7uEyahU1lt1RnsECBiuEbfr9INjQTGa6Err+gF3g0Tx4YEviPbqqGKNv/NrBaE7dVHdn1bVZKM/n5I/Bak7A==}
     dependencies:
@@ -15730,17 +16322,39 @@ packages:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
 
+  /micromark-factory-whitespace@2.0.0:
+    resolution: {integrity: sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==}
+    dependencies:
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-util-character@1.1.0:
     resolution: {integrity: sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==}
     dependencies:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
 
+  /micromark-util-character@2.0.1:
+    resolution: {integrity: sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==}
+    dependencies:
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-util-chunked@1.0.0:
     resolution: {integrity: sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==}
     dependencies:
       micromark-util-symbol: 1.0.1
 
+  /micromark-util-chunked@2.0.0:
+    resolution: {integrity: sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==}
+    dependencies:
+      micromark-util-symbol: 2.0.0
+    dev: false
+
   /micromark-util-classify-character@1.0.0:
     resolution: {integrity: sha512-F8oW2KKrQRb3vS5ud5HIqBVkCqQi224Nm55o5wYLzY/9PwHGXC01tr3d7+TqHHz6zrKQ72Okwtvm/xQm6OVNZA==}
     dependencies:
@@ -15748,17 +16362,38 @@ packages:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
 
+  /micromark-util-classify-character@2.0.0:
+    resolution: {integrity: sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==}
+    dependencies:
+      micromark-util-character: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-util-combine-extensions@1.0.0:
     resolution: {integrity: sha512-J8H058vFBdo/6+AsjHp2NF7AJ02SZtWaVUjsayNFeAiydTxUwViQPxN0Hf8dp4FmCQi0UUFovFsEyRSUmFH3MA==}
     dependencies:
       micromark-util-chunked: 1.0.0
       micromark-util-types: 1.0.2
 
+  /micromark-util-combine-extensions@2.0.0:
+    resolution: {integrity: sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==}
+    dependencies:
+      micromark-util-chunked: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-util-decode-numeric-character-reference@1.0.0:
     resolution: {integrity: sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==}
     dependencies:
       micromark-util-symbol: 1.0.1
 
+  /micromark-util-decode-numeric-character-reference@2.0.1:
+    resolution: {integrity: sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==}
+    dependencies:
+      micromark-util-symbol: 2.0.0
+    dev: false
+
   /micromark-util-decode-string@1.0.2:
     resolution: {integrity: sha512-DLT5Ho02qr6QWVNYbRZ3RYOSSWWFuH3tJexd3dgN1odEuPNxCngTCXJum7+ViRAd9BbdxCvMToPOD/IvVhzG6Q==}
     dependencies:
@@ -15767,22 +16402,51 @@ packages:
       micromark-util-decode-numeric-character-reference: 1.0.0
       micromark-util-symbol: 1.0.1
 
+  /micromark-util-decode-string@2.0.0:
+    resolution: {integrity: sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==}
+    dependencies:
+      decode-named-character-reference: 1.0.2
+      micromark-util-character: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-symbol: 2.0.0
+    dev: false
+
   /micromark-util-encode@1.0.1:
     resolution: {integrity: sha512-U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==}
 
+  /micromark-util-encode@2.0.0:
+    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
+    dev: false
+
   /micromark-util-html-tag-name@1.1.0:
     resolution: {integrity: sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==}
 
+  /micromark-util-html-tag-name@2.0.0:
+    resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==}
+    dev: false
+
   /micromark-util-normalize-identifier@1.0.0:
     resolution: {integrity: sha512-yg+zrL14bBTFrQ7n35CmByWUTFsgst5JhA4gJYoty4Dqzj4Z4Fr/DHekSS5aLfH9bdlfnSvKAWsAgJhIbogyBg==}
     dependencies:
       micromark-util-symbol: 1.0.1
 
+  /micromark-util-normalize-identifier@2.0.0:
+    resolution: {integrity: sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==}
+    dependencies:
+      micromark-util-symbol: 2.0.0
+    dev: false
+
   /micromark-util-resolve-all@1.0.0:
     resolution: {integrity: sha512-CB/AGk98u50k42kvgaMM94wzBqozSzDDaonKU7P7jwQIuH2RU0TeBqGYJz2WY1UdihhjweivStrJ2JdkdEmcfw==}
     dependencies:
       micromark-util-types: 1.0.2
 
+  /micromark-util-resolve-all@2.0.0:
+    resolution: {integrity: sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==}
+    dependencies:
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-util-sanitize-uri@1.1.0:
     resolution: {integrity: sha512-RoxtuSCX6sUNtxhbmsEFQfWzs8VN7cTctmBPvYivo98xb/kDEoTCtJQX5wyzIYEmk/lvNFTat4hL8oW0KndFpg==}
     dependencies:
@@ -15790,6 +16454,14 @@ packages:
       micromark-util-encode: 1.0.1
       micromark-util-symbol: 1.0.1
 
+  /micromark-util-sanitize-uri@2.0.0:
+    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
+    dependencies:
+      micromark-util-character: 2.0.1
+      micromark-util-encode: 2.0.0
+      micromark-util-symbol: 2.0.0
+    dev: false
+
   /micromark-util-subtokenize@1.0.2:
     resolution: {integrity: sha512-d90uqCnXp/cy4G881Ub4psE57Sf8YD0pim9QdjCRNjfas2M1u6Lbt+XZK9gnHL2XFhnozZiEdCa9CNfXSfQ6xA==}
     dependencies:
@@ -15798,12 +16470,29 @@ packages:
       micromark-util-types: 1.0.2
       uvu: 0.5.6
 
+  /micromark-util-subtokenize@2.0.0:
+    resolution: {integrity: sha512-vc93L1t+gpR3p8jxeVdaYlbV2jTYteDje19rNSS/H5dlhxUYll5Fy6vJ2cDwP8RnsXi818yGty1ayP55y3W6fg==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-util-symbol@1.0.1:
     resolution: {integrity: sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==}
 
+  /micromark-util-symbol@2.0.0:
+    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
+    dev: false
+
   /micromark-util-types@1.0.2:
     resolution: {integrity: sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==}
 
+  /micromark-util-types@2.0.0:
+    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
+    dev: false
+
   /micromark@3.1.0:
     resolution: {integrity: sha512-6Mj0yHLdUZjHnOPgr5xfWIMqMWS12zDN6iws9SLuSz76W8jTtAv24MN4/CL7gJrl5vtxGInkkqDv/JIoRsQOvA==}
     dependencies:
@@ -15827,6 +16516,30 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /micromark@4.0.0:
+    resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
+    dependencies:
+      '@types/debug': 4.1.7
+      debug: 4.3.4
+      decode-named-character-reference: 1.0.2
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.0
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.0.1
+      micromark-util-chunked: 2.0.0
+      micromark-util-combine-extensions: 2.0.0
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-encode: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-resolve-all: 2.0.0
+      micromark-util-sanitize-uri: 2.0.0
+      micromark-util-subtokenize: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /micromatch@2.3.11:
     resolution: {integrity: sha512-LnU2XFEk9xxSJ6rfgAry/ty5qwUTyHYOBU0g4R6tIw5ljwgGIBmiKhRWLw5NpMOnrgUNcDJ4WMp8rl3sYVHLNA==}
     engines: {node: '>=0.10.0'}
@@ -18383,6 +19096,10 @@ packages:
       genfun: 4.0.1
     dev: false
 
+  /proxy-compare@2.5.1:
+    resolution: {integrity: sha512-oyfc0Tx87Cpwva5ZXezSp5V9vht1c7dZBhvuV/y3ctkgMVUmiAGDVeeB0dKhGSyT0v1ZTEQYpe/RXlBVBNuCLA==}
+    dev: false
+
   /prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
     requiresBuild: true
@@ -18583,6 +19300,23 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /rc-cascader@3.21.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-J7GozpgsLaOtzfIHFJFuh4oFY0ePb1w10twqK6is3pAkqHkca/PsokbDr822KIRZ8/CK8CqevxohuPDVZ1RO/A==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      array-tree-filter: 2.1.0
+      classnames: 2.5.1
+      rc-select: 14.11.0(react-dom@18.2.0)(react@18.2.0)
+      rc-tree: 5.8.2(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
 
   /rc-cascader@3.7.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-SFtGpwmYN7RaWEAGTS4Rkc62ZV/qmQGg/tajr/7mfIkleuu8ro9Hlk6J+aA0x1YS4zlaZBtTcSaXM01QMiEV/A==}
@@ -18723,6 +19457,22 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /rc-drawer@7.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-ePcS4KtQnn57bCbVXazHN2iC8nTPCXlWEIA/Pft87Pd9U7ZeDkdRzG47jWG2/TAFXFlFltRAMcslqmUM8NPCGA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.5.1
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
 
   /rc-dropdown@4.0.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-OdpXuOcme1rm45cR0Jzgfl1otzmU4vuBVb+etXM8vcaULGokAKVpKlw8p6xzspG7jGd/XxShvq+N3VNEfk/l5g==}
@@ -18847,27 +19597,30 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
 
-  /rc-input@0.1.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-FqDdNz+fV2dKNgfXzcSLKvC+jEs1709t7nD+WdfjrdSaOcefpgc7BUJYadc3usaING+b7ediMTfKxuJBsEFbXA==}
+  /rc-input-number@8.6.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-gaAMUKtUKLktJ3Yx93tjgYY1M0HunnoqzPEqkb9//Ydup4DcG0TFL9yHBA3pgVdNIt5f0UWyHCgFBj//JxeD6A==}
     peerDependencies:
-      react: '>=16.0.0'
-      react-dom: '>=16.0.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': 7.23.7
+      '@rc-component/mini-decimal': 1.1.0
       classnames: 2.5.1
+      rc-input: 1.4.3(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-input@1.3.11(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-jhH7QP5rILanSHCGSUkdoFE5DEtpv8FIseYhuYkOZzUBeiVAiwM3q26YqZ6xBB0QFEZ/yUAgms4xW4iuub3xFQ==}
+  /rc-input@0.1.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-FqDdNz+fV2dKNgfXzcSLKvC+jEs1709t7nD+WdfjrdSaOcefpgc7BUJYadc3usaING+b7ediMTfKxuJBsEFbXA==}
     peerDependencies:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -18885,6 +19638,20 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /rc-input@1.4.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-aHyQUAIRmTlOnvk5EcNqEpJ+XMtfMpYRAJayIlJfsvvH9cAKUWboh4egm23vgMA7E+c/qm4BZcnrDcA960GC1w==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
 
   /rc-mentions@1.13.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-FCkaWw6JQygtOz0+Vxz/M/NWqrWHB9LwqlY2RtcuFqWJNFK9njijOOzTSsBGANliGufVUzx/xuPHmZPBV0+Hgw==}
@@ -18902,6 +19669,23 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /rc-mentions@2.10.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-72qsEcr/7su+a07ndJ1j8rI9n0Ka/ngWOLYnWMMv0p2mi/5zPwPrEDTt6Uqpe8FWjWhueDJx/vzunL6IdKDYMg==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.5.1
+      rc-input: 1.4.3(react-dom@18.2.0)(react@18.2.0)
+      rc-menu: 9.12.4(react-dom@18.2.0)(react@18.2.0)
+      rc-textarea: 1.6.3(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /rc-mentions@2.9.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-cZuElWr/5Ws0PXx1uxobxfYh4mqUw2FitfabR62YnWgm+WAfDyXZXqZg5DxXW+M1cgVvntrQgDDd9LrihrXzew==}
     peerDependencies:
@@ -18917,6 +19701,7 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
 
   /rc-menu@9.12.4(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-t2NcvPLV1mFJzw4F21ojOoRVofK2rWhpKPx69q2raUsiHPDP6DDevsBILEYdsIegqBeSXoWs2bf6CueBKg3BFg==}
@@ -19035,7 +19820,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -19245,6 +20030,25 @@ packages:
       rc-virtual-list: 3.11.3(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /rc-select@14.11.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-8J8G/7duaGjFiTXCBLWfh5P+KDWyA3KTlZDfV3xj/asMPqB2cmxfM+lH50wRiPIRsCQ6EbkCFBccPuaje3DHIg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.5.1
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-overflow: 1.3.2(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      rc-virtual-list: 3.11.3(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
 
   /rc-slider@10.0.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-igTKF3zBet7oS/3yNiIlmU8KnZ45npmrmHlUUio8PNbIhzMcsh+oE/r2UD42Y6YD2D/s+kzCQkzQrPD6RY435Q==}
@@ -19359,14 +20163,14 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /rc-table@7.36.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-9qMxEm/3Y8ukdW8I8ZvmhX0QImfNKzH0JEUlSbyaUlsYTB+/tQEbfaB8YkG4sHVZ1io4pxqK/BXoZYqebi/TIQ==}
+  /rc-table@7.37.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-hEB17ktLRVfVmdo+U8MjGr+PuIgdQ8Cxj/N5lwMvP/Az7TOrQxwTMLVEDoj207tyPYLTWifHIF9EJREWwyk67g==}
     engines: {node: '>=8.x'}
     peerDependencies:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       '@rc-component/context': 1.4.0(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
@@ -19411,6 +20215,24 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /rc-tabs@14.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lp1YWkaPnjlyhOZCPrAWxK6/P6nMGX/BAZcAC3nuVwKz0Byfp+vNnQKK8BRCP2g/fzu+SeB5dm9aUigRu3tRkQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
+      rc-dropdown: 4.1.0(react-dom@18.2.0)(react@18.2.0)
+      rc-menu: 9.12.4(react-dom@18.2.0)(react@18.2.0)
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /rc-textarea@0.4.7(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-IQPd1CDI3mnMlkFyzt2O4gQ2lxUsnBAeJEoZGJnkkXgORNqyM9qovdrCj9NzcRfpHgLdzaEbU3AmobNFGUznwQ==}
     peerDependencies:
@@ -19439,6 +20261,22 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /rc-textarea@1.6.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-8k7+8Y2GJ/cQLiClFMg8kUXOOdvcFQrnGeSchOvI2ZMIVvX5a3zQpLxoODL0HTrvU63fPkRmMuqaEcOF9dQemA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
+      rc-input: 1.4.3(react-dom@18.2.0)(react@18.2.0)
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
 
   /rc-tooltip@5.2.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-jtQzU/18S6EI3lhSGoDYhPqNpWajMtS5VV/ld1LwyfrDByQpYmw/LW6U7oFXXLukjfDHQ7Ju705A82PRNFWYhg==}
@@ -19472,7 +20310,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
       react: 18.2.0
@@ -19492,6 +20330,22 @@ packages:
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /rc-tree-select@5.17.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-7sRGafswBhf7n6IuHyCEFCildwQIgyKiV8zfYyUoWfZEFdhuk7lCH+DN0aHt+oJrdiY9+6Io/LDXloGe01O8XQ==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      classnames: 2.5.1
+      rc-select: 14.11.0(react-dom@18.2.0)(react@18.2.0)
+      rc-tree: 5.8.2(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
 
   /rc-tree-select@5.5.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-k2av7jF6tW9bIO4mQhaVdV4kJ1c54oxV3/hHVU+oD251Gb5JN+m1RbJFTMf1o0rAFqkvto33rxMdpafaGKQRJw==}
@@ -19573,7 +20427,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -19690,7 +20544,7 @@ packages:
     peerDependencies:
       react: '>=16.13.1'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       react: 18.2.0
     dev: false
 
@@ -19714,7 +20568,7 @@ packages:
       react: ^16.6.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       invariant: 2.2.4
       prop-types: 15.8.1
       react: 18.1.0
@@ -19729,7 +20583,7 @@ packages:
       react: ^16.6.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       invariant: 2.2.4
       prop-types: 15.8.1
       react: 18.2.0
@@ -19786,6 +20640,27 @@ packages:
     resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
     dev: false
 
+  /react-markdown@9.0.1(react@18.2.0):
+    resolution: {integrity: sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+    dependencies:
+      '@types/hast': 3.0.3
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.0
+      html-url-attributes: 3.0.0
+      mdast-util-to-hast: 13.1.0
+      react: 18.2.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.0
+      unified: 11.0.4
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /react-merge-refs@1.1.0:
     resolution: {integrity: sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==}
     dev: false
@@ -20270,6 +21145,14 @@ packages:
       unified: 10.1.2
     dev: true
 
+  /rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+    dependencies:
+      '@types/hast': 3.0.3
+      hast-util-raw: 9.0.2
+      vfile: 6.0.1
+    dev: false
+
   /rehype-remark@9.1.2:
     resolution: {integrity: sha512-c0fG3/CrJ95zAQ07xqHSkdpZybwdsY7X5dNWvgL2XqLKZuqmG3+vk6kP/4miCnp+R+x/0uKKRSpfXb9aGR8Z5w==}
     dependencies:
@@ -20328,6 +21211,19 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /remark-gfm@4.0.0:
+    resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      mdast-util-gfm: 3.0.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /remark-parse@10.0.1:
     resolution: {integrity: sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==}
     dependencies:
@@ -20348,6 +21244,17 @@ packages:
       - supports-color
     dev: false
 
+  /remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      mdast-util-from-markdown: 2.0.0
+      micromark-util-types: 2.0.0
+      unified: 11.0.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /remark-rehype@10.1.0:
     resolution: {integrity: sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==}
     dependencies:
@@ -20356,6 +21263,16 @@ packages:
       mdast-util-to-hast: 12.2.5
       unified: 10.1.2
 
+  /remark-rehype@11.1.0:
+    resolution: {integrity: sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/mdast': 4.0.3
+      mdast-util-to-hast: 13.1.0
+      unified: 11.0.4
+      vfile: 6.0.1
+    dev: false
+
   /remark-stringify@10.0.2:
     resolution: {integrity: sha512-6wV3pvbPvHkbNnWB0wdDvVFHOe1hBRAx1Q/5g/EpH4RppAII6J8Gnwe7VbHuXaoKIF6LAg6ExTel/+kNqSQ7lw==}
     dependencies:
@@ -20364,6 +21281,14 @@ packages:
       unified: 10.1.2
     dev: true
 
+  /remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      mdast-util-to-markdown: 2.1.0
+      unified: 11.0.4
+    dev: false
+
   /remote-origin-url@0.4.0:
     resolution: {integrity: sha512-HYhdsT2pNd0LP4Osb0vtQ1iassxIc3Yk1oze7j8dMJFciMkW8e0rdg9E/mOunqtSVHSzvMfwLDIYzPnEDmpk6Q==}
     engines: {node: '>= 0.8.0'}
@@ -21923,6 +22848,12 @@ packages:
       inline-style-parser: 0.1.1
     dev: false
 
+  /style-to-object@1.0.5:
+    resolution: {integrity: sha512-rDRwHtoDD3UMMrmZ6BzOW0naTjMsVZLIjsGleSKS/0Oz+cgCfAPRspaqJuE8rDzpKha/nEvnM0IF4seEAZUTKQ==}
+    dependencies:
+      inline-style-parser: 0.2.2
+    dev: false
+
   /stylehacks@5.1.1(postcss@8.4.31):
     resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -22874,6 +23805,18 @@ packages:
       trough: 2.1.0
       vfile: 5.3.6
 
+  /unified@11.0.4:
+    resolution: {integrity: sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==}
+    dependencies:
+      '@types/unist': 3.0.2
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.1.0
+      vfile: 6.0.1
+    dev: false
+
   /union-value@1.0.1:
     resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
     engines: {node: '>=0.10.0'}
@@ -22935,16 +23878,41 @@ packages:
   /unist-util-is@5.1.1:
     resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==}
 
+  /unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: false
+
   /unist-util-position@4.0.3:
     resolution: {integrity: sha512-p/5EMGIa1qwbXjA+QgcBXaPWjSnZfQ2Sc3yBEEfgPwsEmJd8Qh+DSk3LGnmOM4S1bY2C0AjmMnB8RuEYxpPwXQ==}
     dependencies:
       '@types/unist': 2.0.6
 
+  /unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: false
+
+  /unist-util-remove-position@5.0.0:
+    resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-visit: 5.0.0
+    dev: false
+
   /unist-util-stringify-position@3.0.2:
     resolution: {integrity: sha512-7A6eiDCs9UtjcwZOcCpM4aPII3bAAGv13E96IkawkOAW0OhH+yRxtY0lzo8KiHpzEMfH7Q+FizUmwp8Iqy5EWg==}
     dependencies:
       '@types/unist': 2.0.6
 
+  /unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: false
+
   /unist-util-visit-parents@5.1.1:
     resolution: {integrity: sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==}
     dependencies:
@@ -22956,6 +23924,12 @@ packages:
     dependencies:
       '@types/unist': 2.0.6
       unist-util-is: 5.1.1
+
+  /unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-is: 6.0.0
     dev: false
 
   /unist-util-visit@4.1.1:
@@ -22971,6 +23945,13 @@ packages:
       '@types/unist': 2.0.6
       unist-util-is: 5.1.1
       unist-util-visit-parents: 5.1.3
+
+  /unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
     dev: false
 
   /universal-user-agent@6.0.0:
@@ -23107,6 +24088,14 @@ packages:
       react: 18.2.0
     dev: false
 
+  /use-sync-external-store@1.2.0(react@18.2.0):
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /use@3.1.1:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
     engines: {node: '>=0.10.0'}
@@ -23203,6 +24192,24 @@ packages:
     engines: {node: '>= 0.10'}
     dev: true
 
+  /valtio@1.13.0(react@18.2.0):
+    resolution: {integrity: sha512-s2VkxxFyaJwjpIheJonRa/34HWS1EpsEjw9OW9l3j8G4cbIw7lruspOjyv+z2o4BrGx351BH+VWb8sZHkrlyYA==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      derive-valtio: 0.1.0(valtio@1.13.0)
+      proxy-compare: 2.5.1
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -23222,12 +24229,26 @@ packages:
       '@types/unist': 2.0.6
       vfile: 5.3.6
 
+  /vfile-location@5.0.2:
+    resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==}
+    dependencies:
+      '@types/unist': 3.0.2
+      vfile: 6.0.1
+    dev: false
+
   /vfile-message@3.1.3:
     resolution: {integrity: sha512-0yaU+rj2gKAyEk12ffdSbBfjnnj+b1zqTBv3OQCTn8yEB02bsPizwdBPrLJjHnK+cU9EMMcUnNv938XcZIkmdA==}
     dependencies:
       '@types/unist': 2.0.6
       unist-util-stringify-position: 3.0.2
 
+  /vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-stringify-position: 4.0.0
+    dev: false
+
   /vfile@5.3.6:
     resolution: {integrity: sha512-ADBsmerdGBs2WYckrLBEmuETSPyTD4TuLxTrw0DvjirxW1ra4ZwkbzG8ndsv3Q57smvHxo677MHaQrY9yxH8cA==}
     dependencies:
@@ -23245,6 +24266,14 @@ packages:
       vfile-message: 3.1.3
     dev: false
 
+  /vfile@6.0.1:
+    resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    dev: false
+
   /video-react@0.16.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-138NHPS8bmgqCYVCdbv2GVFhXntemNHWGw9AN8iJSzr3jizXMmWJd2LTBppr4hZJUbyW1A1tPZ3CQXZUaexMVA==}
     peerDependencies:
diff --git a/s2-site/docs/api/components/drill-down.zh.md b/s2-site/docs/api/components/drill-down.zh.md
index 1015f74750..8b4ada095b 100644
--- a/s2-site/docs/api/components/drill-down.zh.md
+++ b/s2-site/docs/api/components/drill-down.zh.md
@@ -77,8 +77,6 @@ const s2Options = {
 
 ##### PartDrillDownInfo
 
-类型：`object`，**必选**，默认值：`{}`
-
 <description>功能描述：下钻数据请求参数配置</description>
 
 | 参数 | 说明 | 类型 | 必选 | 默认值 |
@@ -88,8 +86,6 @@ const s2Options = {
 
 #### DrillDownProps
 
-类型：`object`，**必选**，默认值：`{}`
-
 <description>功能描述：下钻菜单组件配置项</description>
 
 | 参数 | 说明                                    | 类型 | 默认值 | 必选 | 备注 |
@@ -107,8 +103,6 @@ const s2Options = {
 
 ##### DataSet
 
-类型：`object`，**必选**，默认值：`{}`
-
 <description>功能描述：下钻数据源配置</description>
 
 | 参数 | 说明 | 类型 | 默认值 | 必选 |
diff --git a/s2-site/docs/api/components/sheet-component.en.md b/s2-site/docs/api/components/sheet-component.en.md
index b3e33898e4..52baab9d11 100644
--- a/s2-site/docs/api/components/sheet-component.en.md
+++ b/s2-site/docs/api/components/sheet-component.en.md
@@ -86,7 +86,7 @@ Function description: The props parameter of the React SheetComponent component
 | onLayoutResizeMouseMove | mouse move event of resize hotspot | ( event: `MouseEvent`, resizeInfo?: [ResizeInfo](#resizeinfo)) => void; | | |
 | onKeyBoardDown | keyboard down event | (event: KeyboardEvent) => void | | |
 | onKeyBoardUp | keyboard release event | (event: KeyboardEvent) => void | | |
-| onCopied | copy event | (copyData: string) => void | | |
+| onCopied | copy event | (data: string) => void | | |
 | onActionIconHover | Line header operation icon hover event | (event: CanvasEvent) => void | | |
 | onActionIconClick | Action icon click event | (event: CanvasEvent) => void | | |
 | onContextMenu | Right cell click event | (data: [TargetCellInfo](#targetcellinfo)) => void | | |
@@ -199,7 +199,7 @@ Function description: The props of the Vue SheetComponent component, such as `<S
 | onLayoutResizeMouseMove | mouse move event of resize hotspot | ( event: `MouseEvent`, resizeInfo?: [ResizeInfo](#resizeinfo)) => void; | | |
 | onKeyBoardDown | keyboard down event | (event: KeyboardEvent) => void | | |
 | onKeyBoardUp | keyboard release event | (event: KeyboardEvent) => void | | |
-| onCopied | copy event | (copyData: string) => void | | |
+| onCopied | copy event | (data: string) => void | | |
 | onActionIconHover | Line header operation icon hover event | (event: CanvasEvent) => void | | |
 | onActionIconClick | Action icon click event | (event: CanvasEvent) => void | | |
 | onContextMenu | Right cell click event | (data: [TargetCellInfo](#targetcellinfo)) => void | | |
@@ -319,7 +319,7 @@ Function description: events of Vue SheetComponent, `<SheetComponent @rowCellCli
 | layoutResizeMouseMove | mouse move event in resize hotspot | ( event:`MouseEvent`, resizeInfo?: [ResizeInfo](#resizeinfo)) => void; | | |
 | keyBoardDown | keyboard down event | (event: KeyboardEvent) => void | | |
 | keyBoardUp | keyboard release event | (event: KeyboardEvent) => void | | |
-| copied | copy event | (copyData: string) => void | | |
+| copied | copy event | (data: string) => void | | |
 | actionIconHover | Hover event of the line header operation icon | (event: CanvasEvent) => void | | |
 | actionIconClick | action icon click event | (event: CanvasEvent) => void | | |
 | contextMenu | Right cell click event | (data: [TargetCellInfo](#targetcellinfo)) => void | | |
diff --git a/s2-site/docs/api/general/S2DataConfig.zh.md b/s2-site/docs/api/general/S2DataConfig.zh.md
index dbcc6186ef..e610fb0fe1 100644
--- a/s2-site/docs/api/general/S2DataConfig.zh.md
+++ b/s2-site/docs/api/general/S2DataConfig.zh.md
@@ -30,7 +30,7 @@ const s2DataConfig = {
 
 ### RawData
 
-[SimpleData](#simpledata) | [MiniChartData](#minichartdata) | [MultiData](#multidata) **required**, _default：null_
+[SimpleData](#simpledata) | [MiniChartData](#minichartdata) | [MultiData](#multidata)
 
 功能描述：表格数据源
 
@@ -70,7 +70,7 @@ const data = [
 
 #### MultiData
 
-功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：[趋势分析表](/zh/examples/react-component/sheet#strategy)
+功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：[趋势分析表](/examples/react-component/sheet#strategy)
 
 | 配置项名称       | 说明                                       | 类型                          | 默认值 | 必选 |
 | :--------------- | :----------------------------------------- | :---------------------------- | :----- | :--- |
@@ -92,23 +92,19 @@ const data = [
 
 ### Fields
 
-object **必选**,_default：null_
-
-功能描述： 配置表格的维度域，即对应行列维度
+功能描述： 配置表格的维度域，即对应行列维度。
 
 | 配置项名称 | 说明     | 类型   | 默认值 | 必选 |
 | ------------- | ----------------- | --------- | ----- | --- |
-| rows             | 行维度 （可自定义行头，[查看例子](#TODO)) | `string[]` \| [CustomTreeNode[]](#customtreenode) | `[]`   |      |
-| columns          | 列维度 （可自定义列头，[查看例子](#TODO)) | `string[]` \| [CustomTreeNode[]](#customtreenode) | `[]`   |      |
+| rows             | 行维度 （可自定义行头，[查看示例](/examples/layout/custom-header-group/#custom-pivot-row-header)) | `string[]` \| [CustomTreeNode[]](#customtreenode) | `[]`   |      |
+| columns          | 列维度 （可自定义列头，[查看示例](/examples/layout/custom-header-group/#custom-pivot-col-header)) | `string[]` \| [CustomTreeNode[]](#customtreenode) | `[]`   |      |
 | values           | 指标维度                                  | `string[]`                                        | `[]`   |      |
 | valueInCols      | 指标维度是否在列头                        | `boolean`                                         |
 | customValueOrder | 自定义指标维度在行列头中的层级顺序 （即 `values` 的 顺序，从 `0` 开始） [查看示例](/examples/custom/custom-layout/#custom-value-order) | `number`  | - |      |
 
 ### Meta
 
-功能描述：字段元数据，可配置字段别名和数值格式化。
-
-功能描述： 字段元数据，可配置字段别名和数值格式化。
+功能描述：字段元数据，可配置字段别名和数值格式化。[查看示例](/examples/basic/pivot/#grid)
 
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --| --------| --- | ----- | --- |
@@ -119,15 +115,11 @@ object **必选**,_default：null_
 
 ### MiniChartData
 
-[了解更多](/manual/advanced/custom/custom-chart#1-%E7%BB%98%E5%88%B6-mini-%E5%9B%BE%E8%A1%A8)
-
 <embed src="@/docs/common/mini-chart.zh.md"></embed>
 
 ### MultiData
 
-object **必选**,_default：null_
-
-功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：[趋势分析表](/zh/examples/react-component/sheet#strategy)
+功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：[趋势分析表](/examples/react-component/sheet#strategy)
 
 | 配置项名称 | 说明     | 类型   | 默认值 | 必选 |
 | ------------- | ----------------- | --------- | ----- | --- |
@@ -139,16 +131,3 @@ object **必选**,_default：null_
 <embed src="@/docs/common/sort-param.zh.md"></embed>
 
 <embed src="@/docs/common/custom/customTreeNode.zh.md"></embed>
-
-### Columns
-
-`Array<ColumnNode | string>`
-
-列配置数组，在明细表模式下支持使用 [ColumnNode](#columnnode) 结构来描述列分组关系
-
-### ColumnNode
-
-| 属性名称 | 说明     | 类型   | 默认值 | 必选 |
-| ------- | ---------| -------| ------|------|
-| key | 列字段 id 或分组 id   | string |       | ✓ |
-| children | 分组下面的子级  | `Array<ColumnNode \| string>` |       |  |
diff --git a/s2-site/docs/api/general/S2Event.zh.md b/s2-site/docs/api/general/S2Event.zh.md
index 9f4693d0cb..498e405b96 100644
--- a/s2-site/docs/api/general/S2Event.zh.md
+++ b/s2-site/docs/api/general/S2Event.zh.md
@@ -5,10 +5,17 @@ redirect_from:
   - /zh/docs/api
 ---
 
-表格事件列表，可以根据实际需要，监听所需事件，实现自定义业务。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/constant/events/basic.ts)
+表格事件列表，可以根据实际需要，监听所需事件，实现自定义业务。[查看全部事件定义](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/constant/events/basic.ts), 查看 [文档](/manual/advanced/interaction/basic) 和 [示例](/examples/interaction/basic/#event)
 
+:::info{title="提示"}
 如果使用的是 `s2-react` 或 `s2-vue` 表组件，则已对事件进行封装，无需额外监听，使用其回调函数即可。 [详情](/docs/api/components/sheet-component)
 
+```tsx | pure
+<SheetComponent onRowCellClick={...} />
+```
+
+:::
+
 ```ts
 import { S2Event } from '@antv/s2'
 
diff --git a/s2-site/docs/api/general/S2Options.en.md b/s2-site/docs/api/general/S2Options.en.md
index 3cd74bc22d..603d4dc0c8 100644
--- a/s2-site/docs/api/general/S2Options.en.md
+++ b/s2-site/docs/api/general/S2Options.en.md
@@ -111,7 +111,7 @@ Function description: custom corner head
 
 <embed src="@/docs/common/custom/layoutCoordinate.en.md"></embed>
 
-<embed src="@/docs/common/custom/layoutDataPosition.en.md"></embed>
+<embed src="@/docs/common/custom/layoutCellMeta.en.md"></embed>
 
 <embed src="@/docs/common/custom/headerActionIcons.en.md"></embed>
 
diff --git a/s2-site/docs/api/general/S2Options.zh.md b/s2-site/docs/api/general/S2Options.zh.md
index 9ec9593aa5..5d40ab9476 100644
--- a/s2-site/docs/api/general/S2Options.zh.md
+++ b/s2-site/docs/api/general/S2Options.zh.md
@@ -16,40 +16,41 @@ const s2Options = {
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 | 版本 |
 | -- | --- | --  | -- | --- | --- |
-| width | `number` |    | 600  | 表格宽度 |
-| height | `number` |    | 480  | 表格高度 |
-| debug | `boolean` |   |`false` | 是否开启调试模式 |
-| hierarchyType | `grid` \| `tree` \| `customTree` |    | `grid` | 行头的展示方式，grid：平铺网格结构， tree： 树状结构。 customTree: 自定义树状结构 |
-| conditions | [Conditions](#conditions) |  |    | 条件模式配置 |
+| width | `number` |    | `600`  | 表格宽度 |
+| height | `number` |    | `480`  | 表格高度 |
+| debug | `boolean` |   | `false` | 是否开启调试模式 |
+| hierarchyType | `"grid" \| "tree"` |    | `grid` | 行头的展示方式，grid：平铺网格结构， tree： 树状结构。 支持 [自定义结构](/manual/advanced/custom/custom-header) |
+| conditions | [Conditions](#conditions) |  |    | 字段标记，条件格式配置 |
 | totals | [Totals](#totals) |  |    | 小计总计配置 |
 | tooltip | [Tooltip](#tooltip) |    |  |  tooltip 配置 |
 | interaction | [Interaction](#interaction) |    |  |  表格交互配置 |
 | pagination | [Pagination](#pagination) |  |    | 分页配置 |
 | frozen | [Frozen](#frozen) |  |    | 行列头冻结配置 |
 | showSeriesNumber | `boolean` |  |  `false` | 是否显示行序号 |
-| seriesNumberText | `string` |  |  `序号` | 自定义序号列标题 |
-| showDefaultHeaderActionIcon |`boolean` |  |   `true` | 是否展示默认行列头操作图标 |
+| seriesNumberText | `string` |  |  `序号` | 自定义行头序号列标题 |
+| showDefaultHeaderActionIcon |`boolean` |  | `true` | 是否展示默认行列头操作图标 |
 | headerActionIcons | [HeaderActionIcon[]](#headeractionicon) |  |   `false` | 自定义行列头操作图标（需要将 `showDefaultHeaderActionIcon` 置为 `false`） |
 | customSVGIcons | [CustomSVGIcon[]](#customsvgicon) |  |   `false` | 自定义 svg 图标 |
 | style | [Style](#style) |  |    | 单元格样式设置，比如布局类型，宽高，边距，是否隐藏数值列头等 |
 | hdAdapter | `boolean` |  |   `true` | 是否开启高清屏适配，解决多屏切换，高清视网膜屏字体渲染模糊的问题。[查看更多](/manual/advanced/hd-adapter) |
 | mergedCellsInfo | [MergedCellInfo[][]](#mergedcellinfo) |    |  | 合并单元格信息 |
-| placeholder |  `string \| (meta: Record<string, any>) => string` |    |  | 空单元格的填充内容 |
+| placeholder |  `string \| (meta: Record<string, any>) => string` |    |  | 自定义单元格占位符 |
 | cornerText | string |    |  | 自定义角头文本 （仅在树状模式有效） |
-| cornerExtraFieldText | string |    |  | 自定义角头虚拟数值字段文本 （数值挂行头时有效，替换 "数值" 这两个字） |
+| cornerExtraFieldText | string |    | `数值` | 自定义角头虚拟数值字段文本（"数值挂行头"时有效） |
 | dataCell | [DataCellCallback](#datacellcallback) |  |    | 自定义单元格 cell |
 | cornerCell | [CellCallback](#cellcallback) |  |    | 自定义 cornerCell |
 | rowCell | [CellCallback](#cellcallback) |  |  |   自定义行头 cell |
 | colCell | [CellCallback](#cellcallback) |  |  |   自定义列头 cell |
 | mergedCell | [MergedCellCallback](#mergedcellcallback) |  |  |   自定义合并单元格 |
+| frame | [FrameCallback](#framecallback) |    |  | 自定义表格框架/边框 |
 | cornerHeader | [CornerHeaderCallback](#cornerheadercallback) |    |  | 自定义角头 |
 | layoutHierarchy | [LayoutHierarchy](#layouthierarchy) |  |    | 自定义层级结构 |
-| layoutArrange | [LayoutArrange](#layoutarrange) |  |  |   自定义排列顺序 |
-| layoutCoordinate | [layoutCoordinate](#layoutcoordinate) |    |  | 自定义坐标 |
-| layoutDataPosition | [layoutDataPosition](#layoutdataposition)   |  |  | 自定义数据 |
-| filterDisplayDataItem | [FilterDataItemCallback](#filterdataitemcallback) |  |    | 过滤数据 |
-| mappingDisplayDataItem | [MappingDataItemCallback](#mappingdataitemcallback) |  |    | 转换数据，用于 tooltip 显示 |
+| layoutArrange | [LayoutArrange](#layoutarrange) |  |  |   自定义排列顺序 （树状模式有效） |
+| layoutCoordinate | [layoutCoordinate](#layoutcoordinate) |    |  | 自定义单元格节点坐标 |
+| layoutCellMeta | [layoutCellMeta](#layoutcellmeta)   |  |  | 自定义单元格元数据 |
+| layoutSeriesNumberNodes | [LayoutSeriesNumberNodes](#layoutseriesnumbernodes)   |  |  | 自定义序号节点 |
 | dataSet | [DataSet](#dataset) |  |  |   自定义数据集 |
+| facet | (spreadsheet: [SpreadSheet](/api/basic-class/spreadsheet)) => [BaseFacet](/api/basic-class/base-facet) |  |  |   自定义分面 |
 | transformCanvasConfig | (renderer: [Renderer](https://g.antv.antgroup.com/api/canvas/options#renderer), spreadsheet: [SpreadSheet](/api/basic-class/spreadsheet)) => Partial<[CanvasConfig](https://g.antv.antgroup.com/api/canvas/options)> \| void |  |   `-` | 自定义 AntV/G 渲染引擎 [配置参数](https://g.antv.antgroup.com/api/canvas/options) & [插件注册](https://g.antv.antgroup.com/plugins/intro)  |
 
 <embed src="@/docs/common/frozen.zh.md"></embed>
@@ -74,7 +75,7 @@ const s2Options = {
 DataCellCallback = (viewMeta: ViewMeta, s2: Spreadsheet) => G.Group;
 ```
 
-功能描述：自定义数值单元格，[ViewMeta](#viewmeta)
+功能描述：自定义数值单元格。[查看示例](/examples/custom/custom-cell#data-cell)
 
 <embed src="@/docs/common/view-meta.zh.md"></embed>
 
@@ -84,12 +85,12 @@ DataCellCallback = (viewMeta: ViewMeta, s2: Spreadsheet) => G.Group;
 CellCallback = (node: Node, spreadsheet: SpreadSheet, ...restOptions: unknown[]) => G.Group;
 ```
 
-功能描述：自定义单元格
+功能描述：自定义单元格。[查看示例](/examples/custom/custom-cell#row-cell)
 
 | 参数        | 说明                             | 类型                                             | 默认值 | 必选 |
 | ----------- | -------------------------------- | ------------------------------------------------ | ------ | ---- |
 | node        | 当前渲染的 node 节点             | [Node](/docs/api/basic-class/node)               | -      | ✓    |
-| spreadsheet | 表类实例，可以访问任意的配置信息 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | -      | ✓    |
+| spreadsheet | 表格实例 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | -      | ✓    |
 | restOptions | 不定参数，传递额外的信息         | `unknown[]`                                      | -      |      |
 
 ## MergedCellCallback
@@ -98,7 +99,7 @@ CellCallback = (node: Node, spreadsheet: SpreadSheet, ...restOptions: unknown[])
 DataCellCallback = (s2: Spreadsheet, cells: S2CellType[],viewMeta: ViewMeta) => MergedCell;
 ```
 
-功能描述：自定义合并单元格，[ViewMeta](#viewmeta)
+功能描述：自定义合并单元格。[查看示例](/examples/custom/custom-cell/#custom-merged-cell)
 
 <embed src="@/docs/common/view-meta.zh.md"></embed>
 
@@ -108,12 +109,12 @@ DataCellCallback = (s2: Spreadsheet, cells: S2CellType[],viewMeta: ViewMeta) =>
 CornerHeaderCallback = (parent: S2CellType, spreadsheet: SpreadSheet, ...restOptions: unknown[]) => void;
 ```
 
-功能描述：自定义角头
+功能描述：自定义角头。[查看示例](/examples/custom/custom-cell#corner-cell)
 
 | 参数        | 说明                             | 类型                                             | 默认值 | 必选 |
 | ----------- | -------------------------------- | ------------------------------------------------ | ------ | ---- |
 | parent      | 父级单元格                       | [S2CellType](#s2celltype)                        | -      | ✓    |
-| spreadsheet | 表类实例，可以访问任意的配置信息 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | -      | ✓    |
+| spreadsheet | 表格实例 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | -      | ✓    |
 | restOptions | 不定参数，传递额外的信息         | `unknown[]`                                      | -      |      |
 
 <embed src="@/docs/common/custom/layoutHierarchy.zh.md"></embed>
@@ -122,7 +123,9 @@ CornerHeaderCallback = (parent: S2CellType, spreadsheet: SpreadSheet, ...restOpt
 
 <embed src="@/docs/common/custom/layoutCoordinate.zh.md"></embed>
 
-<embed src="@/docs/common/custom/layoutDataPosition.zh.md"></embed>
+<embed src="@/docs/common/custom/layoutCellMeta.zh.md"></embed>
+
+<embed src="@/docs/common/custom/layoutSeriesNumberNodes.zh.md"></embed>
 
 <embed src="@/docs/common/custom/headerActionIcons.zh.md"></embed>
 
@@ -143,6 +146,12 @@ CornerHeaderCallback = (parent: S2CellType, spreadsheet: SpreadSheet, ...restOpt
 功能描述：基本数据格式
 
 ```ts
+export enum MiniChartType {
+  Line = 'line',
+  Bar = 'bar',
+  Bullet = 'bullet',
+}
+
 export interface MultiData {
   label?: string;
   values: SimpleData[][];
@@ -151,24 +160,70 @@ export interface MultiData {
 
 export type SimpleData = string | number;
 
-export type DataItem = SimpleDataItem | MultiData;
+export interface BaseChartData {
+  type: MiniChartType;
+  data: RawData[];
+  encode?: {
+    x: keyof RawData;
+    y: keyof RawData;
+  };
+  [key: string]: unknown;
+}
+
+export interface BulletValue {
+  type: MiniChartType.Bullet;
+  measure: number | string;
+  target: number | string;
+  [key: string]: unknown;
+}
+
+export type MiniChartData = BaseChartData | BulletValue;
+
+export interface MultiData<T = SimpleData[][] | MiniChartData> {
+  values: T;
+  originalValues?: T;
+  label?: string;
+  [key: string]: unknown;
+}
+
+export type SimpleData = string | number | null;
+
+export type DataItem =
+  | SimpleData
+  | MultiData
+  | Record<string, unknown>
+  | undefined
+  | null;
+
+export type RawData = Record<string, DataItem>;
+
+export type ExtraData = {
+  [EXTRA_FIELD]: string;
+  [VALUE_FIELD]: string | DataItem;
+};
+
+export type Data = RawData & ExtraData;
 ```
 
 ## LayoutResult
 
+功能描述：基本数据格式。[查看文档](/manual/advanced/get-cell-data#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%8C%BA%E5%9F%9F%E5%8D%95%E5%85%83%E6%A0%BC%E8%8A%82%E7%82%B9)
+
 | 参数          | 说明                             | 类型                                               | 默认值 | 必选 |
 | ------------- | -------------------------------- | -------------------------------------------------- | ------ | ---- |
-| colNodes      | 列的所有节点                     | [Node[]](/docs/api/basic-class/node)               |        |      |
-| colsHierarchy | 列的结构信息                     | [Hierarchy](#hierarchy)                            |        |      |
-| rowNodes      | 行的所有节点                     | [Node[]](#node)                                    |        |      |
-| rowsHierarchy | 行的结构信息                     | [Hierarchy](#hierarchy)                            |        | ✓    |
-| rowLeafNodes  | 行的所有叶子节点，用于笛卡尔交叉 | [Node[]](/docs/api/basic-class/node)               |        |      |
-| colLeafNodes  | 列的所有叶子节点，用于笛卡尔交叉 | [Node[]](/docs/api/basic-class/node)               |        |      |
-| getViewMeta   | 获取交叉出 [x,y] 对应坐标的信息  | `(rowIndex: number, colIndex: number) => ViewMeta` |        |      |
-| spreadsheet   | 表类实例，可以访问任意的配置信息 | [SpreadSheet](/docs/api/basic-class/spreadsheet)   |        |      |
+| colNodes      | 列头节点，对应 ColCell （含可视范围外）                     | [Node[]](/docs/api/basic-class/node)               |        |      |
+| colLeafNodes  | 列头叶子节点，对应 ColCell （含可视范围外） | [Node[]](/docs/api/basic-class/node)               |        |      |
+| colsHierarchy | 列头节点层级结构 （含可视范围外）                     | [Hierarchy](#hierarchy)                            |        |      |
+| rowNodes      | 行头节点，对应 RowCell （含可视范围外）                     | [Node[]](#node)                                    |        |      |
+| rowLeafNodes  | 行头叶子节点，对应 RowCell （含可视范围外） | [Node[]](/docs/api/basic-class/node)               |        |      |
+| rowsHierarchy | 行头节点层级结构 （含可视范围外）                     | [Hierarchy](#hierarchy)                            |        | ✓    |
+| seriesNumberNodes  | 序号节点，对应 SeriesNumberCell （含可视范围外） | [Node[]](/docs/api/basic-class/node)               |        |      |
+| cornerNodes  | 角头节点，对应 CornerCell （含可视范围外） | [Node[]](/docs/api/basic-class/node)               |        |      |
 
 ## DataSet
 
+功能描述：自定义数据集。[查看示例](#TODO)
+
 ```js
 DataSet = (spreadsheet: SpreadSheet) => BaseDataSet;
 ```
diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md
index 99d2289eb5..c1d28b43db 100644
--- a/s2-site/docs/api/general/S2Theme.zh.md
+++ b/s2-site/docs/api/general/S2Theme.zh.md
@@ -26,9 +26,7 @@ s2.setTheme({
 
 ## ThemeCfg
 
-<description> **optional** _object_ </description>
-
-功能描述： 表主题配置项
+功能描述：表格主题配置项。查看 [文档](/manual/basic/theme) 和 [示例](/examples/theme/default/#colorful)
 
 | 参数    | 参数        | 类型                              | 默认值    | 必选 |
 | ------- | ----------- | --------------------------------- | --------- | ---- |
@@ -38,23 +36,19 @@ s2.setTheme({
 
 ### Palette
 
-<description> **optional** _object_ </description>
-
-功能描述： 表主题色板
+功能描述：表主题色板。查看 [文档](/manual/basic/theme) 和 [示例](/examples/theme/custom/#custom-palette)
 
 | 参数                | 参数                                                | 类型                                                             | 默认值 | 必选 |
 | ------------------- | --------------------------------------------------- | ---------------------------------------------------------------- | ------ | ---- |
 | brandColor          | 色板主题色                                          | `string`                                                         | -      | ✓    |
 | basicColors         | 基础颜色                                            | `string[]`                                                       | -      | ✓    |
-| basicColorRelations | basicColors 与标准色板数组下标的对应关系            | `Array<{ basicColorIndex: number; standardColorIndex: number;}>` | -      | ✓    |
+| basicColorRelations | basicColors 与标准色板数组下标的对应关系            | `Array<{ basicColorIndex: number; standardColorIndex: number}>` | -      | ✓    |
 | semanticColors      | 用于表示实际业务语义的颜色。例如内置颜色 “红跌绿涨” | `[key: string]`                                                  | -      | ✓    |
 | others              | 用于表示实际业务语义的颜色。例如内置颜色 “红跌绿涨” | `[key: string]`                                                  | -      |      |
 
 ### S2Theme
 
-<description> **optional** _object_ </description>
-
-功能描述： 表主题 `Schema`
+功能描述：表格主题 `Schema`. 查看 [文档](/manual/basic/theme#%E4%B8%BB%E9%A2%98-schema) 和 [示例](/examples/theme/custom/#custom-palette)
 
 | 参数              | 参数                                   | 类型                                            | 默认值 | 必选 |
 | ----------------- | -------------------------------------- | ----------------------------------------------- | ------ | ---- |
@@ -71,9 +65,7 @@ s2.setTheme({
 
 #### DefaultCellTheme
 
-<description> **optional** _object_ </description>
-
-功能描述： 默认单元格主题
+功能描述：默认单元格主题。查看 [文档](/manual/basic/theme#%E4%B8%BB%E9%A2%98-schema) 和 [示例](/examples/theme/custom/#custom-palette)
 
 | 参数              | 说明           | 类型                              | 默认值 | 必选 |
 | ----------------- | -------------- | --------------------------------- | ------ | ---- |
@@ -88,9 +80,7 @@ s2.setTheme({
 
 #### ResizeArea
 
-<description> **optional** _object_ </description>
-
-功能描述： 列宽行高拖拽热区样式
+功能描述：列宽行高拖拽热区样式。查看 [文档](/manual/basic/theme#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%89%B2%E6%9D%BF) 和 [示例](/examples/interaction/basic/#state-theme)
 
 | 参数              | 说明                                                                                                         | 类型                                  | 默认值   | 必选 |
 | ----------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------- | -------- | ---- |
@@ -105,9 +95,7 @@ s2.setTheme({
 
 #### ScrollBarTheme
 
-<description> **optional** _object_ </description>
-
-功能描述： 滚动条样式
+功能描述：滚动条样式。查看 [文档](/manual/basic/theme#%E8%87%AA%E5%AE%9A%E4%B9%89-schema) 和 [示例](/examples/theme/custom#custom-scrollbar)
 
 | 参数            | 说明                       | 类型                          | 默认值               | 必选 |
 | --------------- | -------------------------- | ----------------------------- | -------------------- | ---- |
@@ -122,9 +110,7 @@ s2.setTheme({
 
 #### SplitLine
 
-<description> **optional** _object_ </description>
-
-功能描述： 分割线样式
+功能描述：分割线样式
 
 | 参数                         | 说明                                                      | 类型                                   | 默认值                                                   | 必选 |
 | ---------------------------- | --------------------------------------------------------- | -------------------------------------- | -------------------------------------------------------- | ---- |
@@ -141,9 +127,7 @@ s2.setTheme({
 
 #### TextTheme
 
-<description> **optional** _object_ </description>
-
-功能描述： 文本主题
+功能描述：文本主题
 
 | 参数         | 说明                                                                           | 类型                          | 默认值                                                                                            | 必选 |
 | ------------ | ------------------------------------------------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------- | ---- |
@@ -163,9 +147,7 @@ s2.setTheme({
 
 #### CellTheme
 
-<description> **optional** _object_ </description>
-
-功能描述： 单元格通用主题
+功能描述：单元格通用主题
 
 | 参数                         | 说明                                    | 类型                                            | 默认值 | 必选 |
 | ---------------------------- | --------------------------------------- | ----------------------------------------------- | ------ | ---- |
@@ -180,13 +162,11 @@ s2.setTheme({
 | verticalBorderWidth          | 单元格垂直边线宽度                      | `number`                                        | -      |      |
 | padding                      | 单元格内边距                            | [Padding](#margin--padding)                     | -      |      |
 | interactionState             | 单元格交互态                            | [InteractionStateTheme](#interactionstatetheme) | -      |      |
-| interactionState             | 单元格交互态  ([查看默认配置](https://github.com/antvis/S2/blob/master/packages/s2-core/src/theme/index.ts#L66-L107)) ([示例](/zh/examples/interaction/basic#state-theme))                       |  Record<[InteractionStateName](#interactionstatename), [InteractionStateTheme](#interactionstatetheme)> | -      |      |
+| interactionState             | 单元格交互态  ([查看默认配置](https://github.com/antvis/S2/blob/master/packages/s2-core/src/theme/index.ts#L66-L107)) ([示例](/examples/interaction/basic#state-theme))                       |  Record<[InteractionStateName](#interactionstatename), [InteractionStateTheme](#interactionstatetheme)> | -      |      |
 | borderDash        | 单元格边线虚线 | `number \| string \| (string \| number)[]`                                        | `[]`      |      |
 
 #### IconTheme
 
-<description> **optional** _object_ </description>
-
 功能描述：icon 通用主题
 
 | 参数          | 说明             | 类型                       | 默认值    | 必选 |
@@ -197,7 +177,7 @@ s2.setTheme({
 
 #### InteractionStateName
 
-> 示例
+功能描述：交互通用主题。查看 [文档](/manual/basic/theme#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%89%B2%E6%9D%BF) 和 [示例](/examples/interaction/basic/#state-theme)
 
 ```ts
 s2.setTheme({
@@ -223,33 +203,9 @@ s2.setTheme({
 | highlight       | 高亮 | [InteractionStateTheme](#interactionstatetheme) |        |      |
 | prepareSelect           | 预选中 | [InteractionStateTheme](#interactionstatetheme) |        |      |
 
-#### InteractionStateTheme
-
-<description> **optional** _object_ </description>
-
-功能描述：交互通用主题
-
-```ts
-type InteractionState = {
-  [K in InteractionStateName]?: InteractionStateTheme;
-};
-```
-
-| 参数              | 说明       | 类型     | 默认值 | 必选 |
-| ----------------- | ---------- | -------- | ------ | ---- |
-| backgroundColor   | 背景填充色 | `string` |        |      |
-| backgroundOpacity | 背景透明度 | `number` |        |      |
-| borderColor       | 边线填充色 | `string` |        |      |
-| borderWidth       | 边线宽度   | `number` |        |      |
-| borderOpacity     | 边线透明度 | `number` |        |      |
-| textOpacity       | 文本透明度 | `number` |        |      |
-| opacity           | 整体透明度 | `number` |        |      |
-
 #### Margin ｜ Padding
 
-<description> **optional** _object_ </description>
-
-功能描述：icon 外边距，单元格内边距
+功能描述：icon 外边距，单元格内边距。
 
 | 参数   | 说明 | 类型     | 默认值 | 必选 |
 | ------ | ---- | -------- | ------ | ---- |
@@ -260,9 +216,7 @@ type InteractionState = {
 
 #### Background
 
-<description> **optional** _object_ </description>
-
-功能描述：背景配置
+功能描述：背景配置。查看 [文档](/manual/basic/theme#%E8%87%AA%E5%AE%9A%E4%B9%89-schema) 和 [示例](/examples/theme/custom/#custom-schema)
 
 | 参数    | 说明   | 类型     | 默认值 | 必选 |
 | ------- | ------ | -------- | ------ | ---- |
@@ -271,7 +225,7 @@ type InteractionState = {
 
 #### MiniChartTheme
 
-功能描述：迷你图配置
+功能描述：迷你图配置。查看 [文档](/manual/advanced/chart-in-cell) 和 [示例](examples/custom/custom-cell/#mini-chart)
 
 | 参数     | 说明           | 类型                            | 默认值 | 必选 |
 | -------- | -------------- | ------------------------------- | ------ | ---- |
@@ -280,7 +234,7 @@ type InteractionState = {
 | bullet   | 颜色           | [BulletTheme](#bullettheme)     |        |      |
 | interval | 透明度         | [IntervalTheme](#intervaltheme) |        |      |
 
-#### LineTheme
+##### LineTheme
 
 功能描述：mini 折线图样式配置
 
@@ -289,7 +243,7 @@ type InteractionState = {
 | point    | 折线图的点配置 | `{size: number; fill?: number; opacity?: number}` |        |      |
 | linkLine | 折线图的线配置 | `{size: number; fill: number; opacity: number}`   |        |      |
 
-#### BarTheme
+##### BarTheme
 
 功能描述：mini 柱状图样式配置
 
@@ -299,7 +253,7 @@ type InteractionState = {
 | fill            | 颜色填充             | `string` |        |      |
 | opacity         | 透明度               | `number` |        |      |
 
-#### BulletTheme
+##### BulletTheme
 
 功能描述：mini 子弹图样式配置
 
@@ -308,9 +262,9 @@ type InteractionState = {
 | progressBar        | 进度条样式     | [ProgressBar](#progressbar)               |        |      |
 | comparativeMeasure | 测量标记线     | [ComparativeMeasure](#comparativemeasure) |        |      |
 | rangeColors        | 子弹图状态颜色 | [RangeColors](#rangecolors)               |        |      |
-| backgroundColor    | 子弹图背景颜色 | string                                    |        |      |
+| backgroundColor    | 子弹图背景颜色 | `string`                                    |        |      |
 
-#### ProgressBar
+##### ProgressBar
 
 功能描述：mini 子弹图进度条样式配置
 
@@ -320,7 +274,7 @@ type InteractionState = {
 | height | 高度     | `number`|        |      |
 | innerHeight        | 内高度 | `number`  |        |      |
 
-#### ComparativeMeasure
+##### ComparativeMeasure
 
 功能描述：mini 子弹图测量标记线样式配置
 
@@ -331,7 +285,7 @@ type InteractionState = {
 | fill            | 颜色填充             | `string` |        |      |
 | opacity         | 透明度               | `number` |        |      |
 
-#### RangeColors
+##### RangeColors
 
 功能描述：mini 子弹图状态颜色样式配置
 
@@ -341,7 +295,7 @@ type InteractionState = {
 | satisfactory | 良好     | `string`|        |      |
 | bad            | 不符合预期             | `string` |        |      |
 
-#### IntervalTheme
+##### IntervalTheme
 
 功能描述：mini 条形图样式（条件格式）
 
diff --git a/s2-site/docs/common/browser.zh.md b/s2-site/docs/common/browser.zh.md
index b59d9bcb21..879633c565 100644
--- a/s2-site/docs/common/browser.zh.md
+++ b/s2-site/docs/common/browser.zh.md
@@ -3,7 +3,7 @@ title: 浏览器引入
 order: 5
 ---
 
-查看例子：
+查看示例：
 
 [![Edit @antv/s2 import in browser](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/antv-s2-import-in-browser-z6uspx?autoresize=1&fontsize=14&hidenavigation=1&theme=dark)
 
diff --git a/s2-site/docs/common/conditions.zh.md b/s2-site/docs/common/conditions.zh.md
index b707100c20..432468c473 100644
--- a/s2-site/docs/common/conditions.zh.md
+++ b/s2-site/docs/common/conditions.zh.md
@@ -5,9 +5,7 @@ order: 2
 
 ## Conditions
 
-类型：`object`，**必选**，默认值：`{}`
-
-<description>功能描述： 配置字段标记。分为文本 (text)，背景 (background)，柱状图 (interval)，图标 (icon)。</description>
+功能描述： 配置字段标记。分为文本 (text)，背景 (background)，柱状图 (interval)，图标 (icon)。
 
 | 参数       | 说明 | 类型            | 默认值 | 必选  |
 | ---------- | ---------- | ---------------  | ------ | ---- |
@@ -18,9 +16,7 @@ order: 2
 
 ### Condition
 
-类型：`object`，**必选**
-
-<description>功能描述： 配置条件格式。包括文本 (text)，背景 (background)，柱状图 (interval)。</description>
+功能描述： 配置条件格式。包括文本 (text)，背景 (background)，柱状图 (interval)。
 
 | 参数      | 说明                                | 类型         | 默认值      | 必选  |
 |---------|-----------------------------------|------------|----------|-----|
@@ -29,6 +25,8 @@ order: 2
 
 #### MappingFunction
 
+功能描述：字段标记处理函数。查看 [文档](/manual/basic/conditions) 和 [示例](/examples/analysis/conditions/#interval)
+
 ```ts
 type MappingFunction = (
   fieldValue: number | string | null,
@@ -90,9 +88,7 @@ const options = {
 
 ### IconCondition
 
-类型：`object`，**必选**，默认值：`null`
-
-<description>功能描述： 配置图标 (icon) 条件格式。</description>
+功能描述： 配置图标 (icon) 条件格式。查看 [文档](/manual/basic/conditions) 和 [示例](/examples/analysis/conditions/#icon)
 
 | 参数     | 说明 | 类型     | 默认值  | 必选    |
 | -------- | ------------ | -------- | ------- | ----  |
diff --git a/s2-site/docs/common/copy-export.en.md b/s2-site/docs/common/copy-export.en.md
index 5eb7586d5e..af37cc20bd 100644
--- a/s2-site/docs/common/copy-export.en.md
+++ b/s2-site/docs/common/copy-export.en.md
@@ -7,7 +7,7 @@ order: 8
 
 Functions such as copying and exporting of the component layer are encapsulated based on a series of tools and methods exposed by the core layer `@antv/s2` , which can be self-encapsulated based on tools and methods according to actual business
 
-```tsx
+```tsx | pure
 import { copyData, copyToClipboard, download } from '@antv/s2'
 
 // 拿到复制数据
diff --git a/s2-site/docs/common/custom-tooltip.zh.md b/s2-site/docs/common/custom-tooltip.zh.md
index 445ddada42..709ba97fd7 100644
--- a/s2-site/docs/common/custom-tooltip.zh.md
+++ b/s2-site/docs/common/custom-tooltip.zh.md
@@ -5,7 +5,7 @@ order: 5
 
 ## TooltipShowOptions
 
-object **必选**,_default：null_ 功能描述： tooltip 显示配置
+功能描述：tooltip 显示配置。
 
 | 参数      | 类型      | 必选  | 默认值 | 功能描述            |
 | --------- | ------- | ------ | ------ | ------------------- |
@@ -18,7 +18,7 @@ object **必选**,_default：null_ 功能描述： tooltip 显示配置
 
 ### TooltipPosition
 
-object **必选**,_default：null_ 功能描述： tooltip 坐标
+功能描述：tooltip 坐标
 
 | 参数 | 类型     | 必选  | 默认值 | 功能描述 |
 | ---- | -------- | ------ | ------ | -------- |
@@ -27,7 +27,7 @@ object **必选**,_default：null_ 功能描述： tooltip 坐标
 
 ### TooltipData
 
-object **可选**,_default：null_ 功能描述： tooltip 数据
+功能描述：tooltip 数据
 
 | 参数      | 类型                                            | 必选  | 默认值 | 功能描述                             |
 | --------- | ----------------------------------------------- | ------ | ------ | ------------------------------------ |
@@ -40,7 +40,7 @@ object **可选**,_default：null_ 功能描述： tooltip 数据
 
 #### TooltipSummaryOptions
 
-object **可选**,_default：null_ 功能描述： tooltip 所选项统计（按度量值区分）列表
+功能描述：tooltip 所选项统计（按度量值区分）列表
 
 | 参数         | 类型                  | 必选  | 默认值 | 功能描述           |
 | ------------ | --------------------- | ------ | ------ | ------------------ |
@@ -50,7 +50,7 @@ object **可选**,_default：null_ 功能描述： tooltip 所选项统计（按
 
 #### TooltipHeadInfo
 
-object **可选**,_default：null_ 功能描述： tooltip 轴（行/列头）列表
+功能描述： tooltip 轴（行/列头）列表
 
 | 参数 | 类型                  | 必选  | 默认值 | 功能描述 |
 | ---- | --------------------- | ------ | ------ | -------- |
@@ -59,7 +59,7 @@ object **可选**,_default：null_ 功能描述： tooltip 轴（行/列头）
 
 #### ListItem
 
-object **可选**,_default：null_ 功能描述： tooltip 数据点明细数据
+功能描述：tooltip 数据点明细数据
 
 | 参数  | 类型              | 必选  | 默认值 | 功能描述       |
 | ----- | ----------------- | ------ | ------ | -------------- |
@@ -69,7 +69,7 @@ object **可选**,_default：null_ 功能描述： tooltip 数据点明细数据
 
 ### TooltipOptions
 
-object **必选**,_default：null_ 功能描述： tooltip 部分配置
+功能描述：tooltip 配置
 
 | 参数           | 类型                                              | 必选  | 默认值 | 功能描述                     |
 | -------------- | ------------------------------------------------- | ------ | ------ | ---------------------------- |
@@ -84,7 +84,7 @@ object **必选**,_default：null_ 功能描述： tooltip 部分配置
 
 #### TooltipOperatorOptions
 
-object **可选**,_default：null_ 功能描述： tooltip 操作栏配置 （如果是 `@antv/s2-react` 配置等同于 `antd` 的 `Menu` [组件配置项](https://ant-design.antgroup.com/components/menu-cn#api))
+功能描述： tooltip 操作栏配置 （如果是 `@antv/s2-react` 配置等同于 `antd` 的 `Menu` [组件配置项](https://ant-design.antgroup.com/components/menu-cn#api))
 
 | 参数    | 类型                                         | 必选  | 默认值 | 功能描述                                                                                   |
 | ------- | -------------------------------------------- | ------ | ------ | ------------------------------------------------------------------------------------------ |
@@ -92,7 +92,7 @@ object **可选**,_default：null_ 功能描述： tooltip 操作栏配置 （
 
 #### TooltipOperatorMenuOptions
 
-object **可选**,_default：null_ 功能描述： tooltip 操作栏菜单配置 （如果是 `@antv/s2-react` 配置等同于 `antd` 的 `Menu` [组件配置项](https://ant-design.antgroup.com/components/menu-cn#api))
+功能描述： tooltip 操作栏菜单配置 （如果是 `@antv/s2-react` 配置等同于 `antd` 的 `Menu` [组件配置项](https://ant-design.antgroup.com/components/menu-cn#api))
 
 | 参数    | 类型                                         | 必选  | 默认值 | 功能描述                                                                                   |
 | ------- | -------------------------------------------- | ------ | ------ | ------------------------------------------------------------------------------------------ |
@@ -102,7 +102,7 @@ object **可选**,_default：null_ 功能描述： tooltip 操作栏菜单配置
 
 ##### TooltipOperatorMenuItem
 
-object **必选**,_default：null_ 功能描述： tooltip 操作项列表
+功能描述： tooltip 操作项列表
 
 | 参数     | 类型                                        | 必选  | 默认值 | 功能描述       |
 | -------- | ------------------------------------------- | ------ | ------ | -------------- |
diff --git a/s2-site/docs/common/custom/cellCallBack.zh.md b/s2-site/docs/common/custom/cellCallBack.zh.md
index 03bf834e65..795442f534 100644
--- a/s2-site/docs/common/custom/cellCallBack.zh.md
+++ b/s2-site/docs/common/custom/cellCallBack.zh.md
@@ -14,5 +14,5 @@ CellCallback = (node: Node, spreadsheet: SpreadSheet, ...restOptions: unknown[])
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | --- | --- | ---  | --- | --- |
 | node | [Node](#node) | ✓ |    | 当前渲染的 node 节点 |
-| spreadsheet | [SpreadSheet](#spreadsheet) | ✓ |    | 表类实例，可以访问任意的配置信息 |
+| spreadsheet | [SpreadSheet](#spreadsheet) | ✓ |    | 表格实例 |
 | restOptions | `unknown[]` |  |    | 不定参数，传递额外的信息 |
diff --git a/s2-site/docs/common/custom/customSvgIcons.zh.md b/s2-site/docs/common/custom/customSvgIcons.zh.md
index ab106da756..2415ae54ad 100644
--- a/s2-site/docs/common/custom/customSvgIcons.zh.md
+++ b/s2-site/docs/common/custom/customSvgIcons.zh.md
@@ -4,9 +4,9 @@ order: 7
 ---
 ## CustomSVGIcon
 
-功能描述：用于用户注册自己的 `icon` 图标， 目前只支持 `svg` 格式
+功能描述：用于用户注册自己的 `icon` 图标， 目前只支持 `svg` 格式。查看 [详细说明](/manual/advanced/custom/custom-icon)
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | --- | --- | ---  | --- | --- |
 | name | string | ✓ |    | icon 名称 |
-| svg | string | ✓ |    | 目前支持三种格式的svg字符串：base64、svg本地文件、线上图片地址 |
+| svg | string | ✓ |    | 目前支持三种格式的 svg 字符串：base64、svg 本地文件、线上图片地址 |
diff --git a/s2-site/docs/common/custom/customTreeNode.zh.md b/s2-site/docs/common/custom/customTreeNode.zh.md
index a26516d414..ed13e4bde6 100644
--- a/s2-site/docs/common/custom/customTreeNode.zh.md
+++ b/s2-site/docs/common/custom/customTreeNode.zh.md
@@ -5,7 +5,7 @@ order: 8
 
 #### CustomTreeNode
 
-功能描述：自定义树状结构的配置。查看 [详细说明](/zh/docs/manual/advanced/custom/custom-tree) 或 [例子](/zh/examples/custom/custom-tree#custom-tree)
+功能描述：自定义树状结构的配置，适用于透视表和明细表的自定义行列头。查看 [文档](/zh/docs/manual/advanced/custom/custom-tree) 和 [示例](/zh/examples/custom/custom-tree#custom-tree)
 
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --- | --- | --- | --- | :-:  |
diff --git a/s2-site/docs/common/custom/dataCellCallback.zh.md b/s2-site/docs/common/custom/dataCellCallback.zh.md
index 9bea73b3d7..0aa298371b 100644
--- a/s2-site/docs/common/custom/dataCellCallback.zh.md
+++ b/s2-site/docs/common/custom/dataCellCallback.zh.md
@@ -6,7 +6,7 @@ order: 2
 ## DataCellCallback
 
 ```js
-DataCellCallback = (viewMeta: ViewMeta, s2: Spreadsheet) => G.Group;
+DataCellCallback = (viewMeta: ViewMeta) => DataCell;
 ```
 
 功能描述：自定义数值单元格，[ViewMeta](#viewmeta)
@@ -26,5 +26,5 @@ CornerHeaderCallback = (parent: S2CellType, spreadsheet: SpreadSheet, ...restOpt
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | --- | --- | ---  | --- | --- |
 | parent | [S2CellType](#s2celltype) | ✓ |  |   父级单元格 |
-| spreadsheet | [SpreadSheet](#spreadsheet) | ✓   |  | 表类实例，可以访问任意的配置信息 |
+| spreadsheet | [SpreadSheet](#spreadsheet) | ✓   |  | 表格实例 |
 | restOptions | `unknown[]` |  |  |   不定参数，传递额外的信息 |
diff --git a/s2-site/docs/common/custom/headerActionIcons.zh.md b/s2-site/docs/common/custom/headerActionIcons.zh.md
index 8a410794dc..60222ba2a4 100644
--- a/s2-site/docs/common/custom/headerActionIcons.zh.md
+++ b/s2-site/docs/common/custom/headerActionIcons.zh.md
@@ -5,11 +5,11 @@ order: 6
 
 ## HeaderActionIcon
 
-功能描述：为表格行列头角头注册自定义操作 `icon`。如果该配置位空，则展示透视表默认操作 `icon`。
+功能描述：为表格行列头角头注册自定义操作 `icon`。如果该配置位空，则展示透视表默认操作 `icon`。查看 [详细说明](/manual/advanced/custom/custom-icon)
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 | 版本 |
 | --- | --- | ---  | --- | --- | --- |
-| icons | string[] \| `{name:string,position:'right'\|'left'}[]` | ✓ |    | 已经注册的 icon 名称，或用户通过 customSVGIcons 注册的 icon 名称，如果是字符串形式，则 position 默认为 `'right'`，也可以使用对象的形式，显示指定 icon 的位置 | `2.0.0` |
+| icons | string[] \| `{name:string,position:'right' \| 'left'}[]` | ✓ |    | 已经注册的 icon 名称，或用户通过 customSVGIcons 注册的 icon 名称，如果是字符串形式，则 position 默认为 `'right'`，也可以使用对象的形式，显示指定 icon 的位置 |  |
 | belongsCell | string[] | ✓ | |   需要增加操作图标的单元格名称 cornerCell、colCell、rowCell | |
 | defaultHide | boolean \| (mete: Node, iconName: string)=> boolean  |  |  |   是否默认隐藏，如果为 true 则为 hover 后再显示；false 则始终显示  | `1.26.0` 支持配置为一个函数 |
 | displayCondition | (mete: Node, iconName: string)=> boolean |  |  | 展示的过滤条件，可以通过该回调函数用户自定义行列头哪些层级或单元格需要展示 icon。 所有返回值为 true 的 icon 会展示给用户。 | `1.26.0` 回传 `iconName` 并按单个 icon 控制显隐 |
diff --git a/s2-site/docs/common/custom/layoutArrange.zh.md b/s2-site/docs/common/custom/layoutArrange.zh.md
index 546bd1ee61..ad589bde74 100644
--- a/s2-site/docs/common/custom/layoutArrange.zh.md
+++ b/s2-site/docs/common/custom/layoutArrange.zh.md
@@ -13,7 +13,7 @@ LayoutArrange = (spreadsheet: SpreadSheet, parent: Node, field: string, fieldVal
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | --- | --- | ---  | --- | --- |
-| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) | ✓ |    | 表类实例，可以访问任意的配置信息 |
+| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) | ✓ |    | 表格实例 |
 | node | [Node](/docs/api/basic-class/node) | ✓ |  |   当前渲染的 node 节点 |
 | field | `string` | ✓ |  |   当前的字段名 |
 | fieldValues | `string[]` | ✓ |  |   当前字段值 |
diff --git a/s2-site/docs/common/custom/layoutDataPosition.en.md b/s2-site/docs/common/custom/layoutCellMeta.en.md
similarity index 85%
rename from s2-site/docs/common/custom/layoutDataPosition.en.md
rename to s2-site/docs/common/custom/layoutCellMeta.en.md
index 6f0b9a7e00..fd0ec15702 100644
--- a/s2-site/docs/common/custom/layoutDataPosition.en.md
+++ b/s2-site/docs/common/custom/layoutCellMeta.en.md
@@ -1,12 +1,12 @@
 ---
-title: layout data position
+title: Custom Cell Meta
 order: 3
 ---
 
-## LayoutDataPosition
+## LayoutCellMeta
 
 ```js
-LayoutDataPosition = (spreadsheet: SpreadSheet, getCellData: GetCellMeta) => GetCellMeta
+LayoutCellMeta = (spreadsheet: SpreadSheet, getCellData: GetCellMeta) => GetCellMeta
 ```
 
 Function description: custom data
diff --git a/s2-site/docs/common/custom/layoutCellMeta.zh.md b/s2-site/docs/common/custom/layoutCellMeta.zh.md
new file mode 100644
index 0000000000..1c71a95ef4
--- /dev/null
+++ b/s2-site/docs/common/custom/layoutCellMeta.zh.md
@@ -0,0 +1,16 @@
+---
+title: 自定义单元格元信息
+order: 3
+---
+
+## LayoutCellMeta
+
+```js
+LayoutCellMeta = (viewMeta: ViewMeta) => ViewMeta | null;
+```
+
+功能描述：自定义单元格元信息
+
+| 参数 | 类型 | 必选  | 默认值 | 功能描述 |
+| --- | --- | --- | ---  | --- |
+| vieMeta | [ViewMeta](#viewmeta) |  |    | 单元格元信息 |
diff --git a/s2-site/docs/common/custom/layoutCoordinate.zh.md b/s2-site/docs/common/custom/layoutCoordinate.zh.md
index 6852e395d6..a9271e52dc 100644
--- a/s2-site/docs/common/custom/layoutCoordinate.zh.md
+++ b/s2-site/docs/common/custom/layoutCoordinate.zh.md
@@ -1,5 +1,5 @@
 ---
-title: 自定义行列坐标
+title: 自定义单元格行列坐标
 order: 4
 ---
 ## LayoutCoordinate
@@ -8,10 +8,10 @@ order: 4
 LayoutCoordinate = (spreadsheet: SpreadSheet, rowNode: Node, colNode: Node) => void
 ```
 
-功能描述：自定义坐标
+功能描述：自定义单元格行列坐标
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | --- | --- | ---  | --- | --- |
-| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) | ✓ |    | 表类实例，可以访问任意的配置信息 |
-| rowNode | [Node](/docs/api/basic-class/node) | ✓ |    | 行节点 |
-| colNode | [Node](/docs/api/basic-class/node) | ✓ |    | 列节点 |
+| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) | ✓ |    | 表格实例 |
+| rowNode | [Node](/docs/api/basic-class/node) | ✓ |    | 行头节点 |
+| colNode | [Node](/docs/api/basic-class/node) | ✓ |    | 列头节点 |
diff --git a/s2-site/docs/common/custom/layoutDataPosition.zh.md b/s2-site/docs/common/custom/layoutDataPosition.zh.md
deleted file mode 100644
index 52b99c37cd..0000000000
--- a/s2-site/docs/common/custom/layoutDataPosition.zh.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: 自定义单元格
-order: 3
----
-
-## LayoutDataPosition
-
-```js
-LayoutDataPosition = (spreadsheet: SpreadSheet, getCellData: GetCellMeta) => GetCellMeta
-```
-
-功能描述：自定义数据
-
-| 参数 | 类型 | 必选  | 默认值 | 功能描述 |
-| --- | --- | --- | ---  | --- |
-| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) | ✓ |    | 表类实例，可以访问任意的配置信息 |
-| getCellData | [GetCellMeta](#viewmeta) | ✓ |    | 获取单元格数据和位置等信息|
-
-```ts
-type GetCellMeta = (rowIndex?: number, colIndex?: number) => ViewMeta;
-```
diff --git a/s2-site/docs/common/custom/layoutHierarchy.zh.md b/s2-site/docs/common/custom/layoutHierarchy.zh.md
index 012dfdbaf5..61628eb580 100644
--- a/s2-site/docs/common/custom/layoutHierarchy.zh.md
+++ b/s2-site/docs/common/custom/layoutHierarchy.zh.md
@@ -13,7 +13,7 @@ LayoutHierarchy = (spreadsheet: SpreadSheet, node: Node) => LayoutHierarchyRetur
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | --- | --- | ---  | --- | --- |
-| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) | ✓ |    | 表类实例，可以访问任意的配置信息 |
+| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) | ✓ |    | 表格实例 |
 | node | [Node](/docs/api/basic-class/node) | ✓ |  |   当前渲染的 node 节点 |
 
 ```ts
diff --git a/s2-site/docs/common/custom/layoutSeriesNumberNodes.en.md b/s2-site/docs/common/custom/layoutSeriesNumberNodes.en.md
new file mode 100644
index 0000000000..61628eb580
--- /dev/null
+++ b/s2-site/docs/common/custom/layoutSeriesNumberNodes.en.md
@@ -0,0 +1,25 @@
+---
+title: 自定义层级结构
+order: 2
+---
+
+## LayoutHierarchy
+
+```js
+LayoutHierarchy = (spreadsheet: SpreadSheet, node: Node) => LayoutHierarchyReturnType;
+```
+
+功能描述：自定义层级结构
+
+| 参数 | 类型 | 必选  | 默认值 | 功能描述 |
+| --- | --- | ---  | --- | --- |
+| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) | ✓ |    | 表格实例 |
+| node | [Node](/docs/api/basic-class/node) | ✓ |  |   当前渲染的 node 节点 |
+
+```ts
+interface LayoutHierarchyReturnType {
+  push?: Node[];
+  unshift?: Node[];
+  delete?: boolean;
+}
+```
diff --git a/s2-site/docs/common/custom/layoutSeriesNumberNodes.zh.md b/s2-site/docs/common/custom/layoutSeriesNumberNodes.zh.md
new file mode 100644
index 0000000000..a2d8cdaf35
--- /dev/null
+++ b/s2-site/docs/common/custom/layoutSeriesNumberNodes.zh.md
@@ -0,0 +1,20 @@
+---
+title: 自定义序号节点
+order: 2
+tag: New
+---
+
+## LayoutSeriesNumberNodes
+
+```js
+LayoutSeriesNumberNodes = (rowsHierarchy: Hierarchy, seriesNumberWidth: number, spreadsheet: SpreadSheet) => Node[];
+
+```
+
+功能描述：自定义序号节点
+
+| 参数 | 类型 | 必选  | 默认值 | 功能描述 |
+| --- | --- | ---  | --- | --- |
+| rowsHierarchy | [Hierarchy](/docs/api/basic-class/hierarchy) |  |    | 行头层级结构 |
+| seriesNumberWidth | `number` |  |    | 表格实例 |
+| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) |  |    | 表格实例 |
diff --git a/s2-site/docs/common/export.zh.md b/s2-site/docs/common/export.zh.md
deleted file mode 100644
index 8757d38d58..0000000000
--- a/s2-site/docs/common/export.zh.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: 导出
-order: 8
----
-
-## 原始导出方法
-
-组件层的复制，导出等功能，基于核心层 `@antv/s2` 透出的一系列工具方法封装，可以根据实际业务，基于工具方法自行封装
-
-```ts
-import { copyData, copyToClipboard, download, registerTransformer, CopyMIMEType } from '@antv/s2'
-
-// 拿到复制数据 （选中的单元格）
-const data = copyData(spreadsheet, '\t', false)
-
-// 复制数据到剪贴板
-// 同步复制：copyToClipboard(data, false)
-copyToClipboard(data)
-  .then(() => {
-    console.log('复制成功')
-  })
-  .catch(() => {
-    console.log('复制失败')
-  })
-
-// 导出数据 (filename.csv)
-download(data, 'filename')
-
-// 自定义复制导出转换 （复制到 word、语雀等场景会成为一个空表格）
-registerTransformer(CopyMIMEType.HTML, (matrix) => {
-  return `<td></td>`
-})
-
-const data = copyData(spreadsheet, '\t', false)
-
-```
-
-### copyData
-
-> @deprecated 后续将废弃方法，将使用 asyncGetAllPlainData
-
-| 参数          | 说明                                    | 类型                                                                             | 默认值           | 必选 |
-| ------------|---------------------------------------|--------------------------------------------------------------------------------|---------------| --- |
-| spreadsheet | s2 实例                                 | [SpreadSheet](/docs/api/basic-class/spreadsheet)                               |               | ✓    |
-| split       | 分隔符                                   | `string`                                                                       |               | ✓    |
-| formatOptions  | 是否格式化，可以分别对数据单元格和行列头进行格式化，传布尔值会同时对单元格和行列头生效。 | <code> boolean \|  { isFormatHeader?: boolean, isFormatData?: boolean} </code> | `false`       |      |
-| customTransformer  | 导出时支持自定义 (transformer) 数据导出格式化方法        | <code> (transformer: Transformer) => Partial<Transformer> </code>              | `transformer` |      |
-| isAsyncExport  | 是否异步导出        | boolean                                                                        | false         |      |
-
-### copyToClipboard
-
-| 参数 | 说明     | 类型     | 默认值 | 必选 |
-| --- | --- | ------- | ----- | --- |
-| data | 数据源 | `string` |        | ✓    |
-| sync | 是否同步复制数据 （默认异步） | `boolean` |   `false`     |     |
-
-### download
-
-| 参数     | 说明     | 类型     | 默认值 | 必选 |
-| ------- | ------- | ------- | ----- | --- |
-| data     | 数据源 | `string` |        | ✓    |
-| filename | 文件名称 | `string` |        | ✓    |
-
-### Transformer
-
-```ts
-export interface Transformer {
-  [CopyMIMEType.PLAIN]: MatrixPlainTransformer;
-  [CopyMIMEType.HTML]: MatrixHTMLTransformer;
-}
-```
-
-| 参数 | 说明     | 类型                       | 默认值 | 必选 |
-| --- | --- |--------------------------|-----| --- |
-| type | 复制内容的 MIMEType | `CopyMIMEType`           |     | ✓    |
-| transformer | 处理函数 | `MatrixHTMLTransformer | MatrixPlainTransformer`   |      |   ✓   |
diff --git a/s2-site/docs/common/frozen.zh.md b/s2-site/docs/common/frozen.zh.md
index f082f40ccf..421502def8 100644
--- a/s2-site/docs/common/frozen.zh.md
+++ b/s2-site/docs/common/frozen.zh.md
@@ -5,11 +5,12 @@ order: 1
 
 ## Frozen
 
-功能描述：行列头冻结配置
+功能描述：行列头冻结配置。查看 [透视表示例](/examples/layout/frozen/#pivot-frozen-row-header) 和 [明细表示例](/examples/layout/frozen/#table-frozen)
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | -- | --- | --  | -- | --- |
 | rowHeader | `boolean \| number` |  |   `true` | 冻结行头<br/>当值为 number 时，标识行头冻结的最大区域，取值范围： (0, 1)，0 表示不固定行头。<br/>当值为 boolean 时，true 对应冻结最大区域为 0.5, false 对应 0。<br/> （透视表有效） |
+| firstRow | `boolean` |  |   `false` | 是否冻结首行（适用于总计置于顶部，树状模式等场景，透视表有效）[查看示例](/examples/layout/frozen/#frozen-pivot-grid) |
 | rowCount | `number` |  |  `0`  | 冻结行的数量，从顶部开始计数 （明细表有效） |
 | colCount | `number` |  |  `0`  | 冻结列的数量，从左侧开始计数 （明细表有效） |
 | trailingRowCount | `number` |    | `0` | 冻结行数量，从底部开始计数 （明细表有效） |
diff --git a/s2-site/docs/common/header.zh.md b/s2-site/docs/common/header.zh.md
index 3395d24d97..87d9ec3ba1 100644
--- a/s2-site/docs/common/header.zh.md
+++ b/s2-site/docs/common/header.zh.md
@@ -5,6 +5,8 @@ order: 0
 
 ### HeaderCfgProps
 
+功能描述：表头参数配置
+
 | 参数            | 说明                 | 类型                   | 默认值 | 必选 |
 | --------------- | ------------------ | ---------------------- | ------ | ---- |
 | title           | 自定义标题           | `React.ReactNode`      | -      |      |
diff --git a/s2-site/docs/common/interaction.zh.md b/s2-site/docs/common/interaction.zh.md
index 62abf46abb..2e78510c26 100644
--- a/s2-site/docs/common/interaction.zh.md
+++ b/s2-site/docs/common/interaction.zh.md
@@ -5,6 +5,8 @@ order: 5
 
 ## Interaction
 
+功能描述：交互配置。查看 [文档](/manual/advanced/interaction/basic) 和 [示例](/examples/interaction/basic/#hover)
+
 | 参数    | 说明                                                                                                                                                                  | 类型                                                                                                        | 默认值   |        必选        |
 | -------- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------| -------- | ---------------- |
 | linkFields  | 标记字段为链接样式，用于外链跳转                                                                                                                                                    | `string[]` \| (meta: [Node](/docs/api/basic-class/node) \| ViewMeta) => boolean                           |    |    |
@@ -30,7 +32,7 @@ order: 5
 
 ### CustomInteraction
 
-功能描述：自定义交互，继承 baseEvent:  [具体例子](/docs/manual/advanced/interaction/custom)
+功能描述：自定义交互，继承 BaseEvent:  [查看示例](/docs/manual/advanced/interaction/custom)
 
 | 参数        | 说明           | 类型                                              | 默认值 | 必选  |
 | ----------- | -------------- | ------------------------------------------------- | ------ | --- |
@@ -39,6 +41,8 @@ order: 5
 
 ### ScrollSpeedRatio
 
+功能描述：滚动速率配置。[查看示例](/examples/interaction/advanced/#scroll-speed-ratio)
+
 ```js
 interface ScrollSpeedRatio {
   horizontal?: number; // 水平滚动速率，默认为 1
@@ -48,6 +52,8 @@ interface ScrollSpeedRatio {
 
 ### ResizeInteractionOptions
 
+功能描述：宽高调整配置。[查看示例](/examples/interaction/advanced/#resize-active)
+
 | 参数                 | 说明     | 类型    | 默认值 | 必选  |
 | -------------------- | ------- | ----------------- | ------ | --- |
 | rowCellVertical      | 是否开启行头垂直方向 resize 热区                                                   | `boolean`         | true   |       |
@@ -55,13 +61,15 @@ interface ScrollSpeedRatio {
 | colCellHorizontal    | 是否开启列头水平方向 resize 热区                                                   | `boolean`         | true   |       |
 | colCellVertical      | 是否开启列头垂直方向 resize 热区 （列头隐藏时该配置无效）                                                   | `boolean`         | true   |       |
 | rowResizeType        | 用于控制行高 resize 时是同时对所有 Cell 生效，还是只对当前行生效。默认对所有行生效 | `all`\| `current` | `all`  |       |
-| disable        | 用于控制行高 resize 是否生效 查看例子 | (resizeInfo: [S2CellType](/docs/api/components/sheet-component#resizeinfo)) => boolean |   |       |
+| disable        | 用于控制行高 resize 是否生效。[查看示例](/examples/interaction/advanced/#resize-disable) | (resizeInfo: [S2CellType](/docs/api/components/sheet-component#resizeinfo)) => boolean |   |       |
 | visible        | 自定义当前单元格是否显示 resize 热区 | (cell: [S2CellType](/docs/api/basic-class/base-cell)) => boolean |   |       |
 
 ### brushSelection
 
+功能描述：单元格刷选配置。[查看示例](/examples/interaction/basic/#brush-selection)
+
 | 参数              | 说明                  | 类型              | 默认值   | 必选  |
 | ----------------- | --------------------- | ----------------- | ------- | --- |
 | dataCell            | 是否允许数值单元格刷选         | `boolean`         | true  |       |
 | rowCell             | 是否允许行头单元格刷选（仅支持透视表） | `boolean`         | false |       |
-| colCell             | 是否允许列头单元格刷选（仅支持透视表） | `boolean`         | false |       |
+| colCell             | 是否允许列头单元格刷选 | `boolean`         | false |       |
diff --git a/s2-site/docs/common/mini-chart.zh.md b/s2-site/docs/common/mini-chart.zh.md
index e751c68e3d..97b2394372 100644
--- a/s2-site/docs/common/mini-chart.zh.md
+++ b/s2-site/docs/common/mini-chart.zh.md
@@ -3,17 +3,11 @@ title: mini 图
 order: 6
 ---
 
-#### renderMiniChart
-
-在单元格内绘制 `mini` 图（支持 折线图、子弹图、柱状图）. [查看示例](/zh/examples/custom/custom-cell/#mini-chart)
-
-```ts
- renderMiniChart = (cell: S2CellType, data?: BaseChartData | BulletValue) => void;
-```
+功能描述：在单元格内绘制 `mini` 图（支持 折线图、子弹图、柱状图）. 查看 [文档](/manual/advanced/custom/custom-chart#1-%E7%BB%98%E5%88%B6-mini-%E5%9B%BE%E8%A1%A8) 和 [示例](/zh/examples/custom/custom-cell/#mini-chart)
 
 #### BaseChartData
 
-折线图、柱状图数据配置项，数据格式参考 [`G2`](https://g2.antv.antgroup.com/manual/core/api)
+功能描述：内置折线图、柱状图数据配置项，数据格式参考 [`G2`](https://g2.antv.antgroup.com/manual/core/api)
 
 | 参数 | 说明 | 类型 | 必选  | 默认值 |
 | --- | ---- | --- | ---- | ------ |
@@ -24,7 +18,7 @@ order: 6
 
 #### BulletValue
 
-子弹图数据配置项
+功能描述：内置子弹图数据配置项
 
 | 参数 | 说明 | 类型 | 必选  | 默认值 |
 | --- | ---- | --- | ---- | ------ |
diff --git a/s2-site/docs/common/pagination.zh.md b/s2-site/docs/common/pagination.zh.md
index 9bf2d24da2..c4ae20b437 100644
--- a/s2-site/docs/common/pagination.zh.md
+++ b/s2-site/docs/common/pagination.zh.md
@@ -5,10 +5,10 @@ order: 6
 
 ## Pagination
 
-boolean ｜ object **必选**,_default: null_ 功能描述： 分页配置
+功能描述：分页配置。查看 [文档](/manual/advanced/analysis/pagination) 和 [示例](/examples/react-component/pagination/#pivot)
 
 | 参数      | 说明          | 类型   | 默认值 | 必选  |
 | --------- | ------------------- | ------ | ------ | --  |
 | pageSize  | 每页数量            | `number` | - |  ✓   |
-| current   | 当前页（从 1 开始） | `number` |       1      |  ✓   |
+| current   | 当前页（从 1 开始） | `number` | `1` |  ✓   |
 | total     | 数据总条数          | `number` | - |      |
diff --git a/s2-site/docs/common/sort-param.zh.md b/s2-site/docs/common/sort-param.zh.md
index 18b6b46d48..f588ceb87f 100644
--- a/s2-site/docs/common/sort-param.zh.md
+++ b/s2-site/docs/common/sort-param.zh.md
@@ -5,7 +5,7 @@ order: 7
 
 ### SortParams
 
-功能描述：排序配置
+功能描述：排序配置。查看 [文档](/manual/basic/sort/basic) 和 [示例](/examples/analysis/sort/#table-sort)
 
 | 参数          | 说明                                        | 类型                                  | 默认值 | 必选 |
 | ------------ | ------------------------------------------ | ------------------------------------ | ------ | --- |
@@ -19,7 +19,7 @@ order: 7
 
 #### SortFuncParam
 
-功能描述：自定义排序函数参数
+功能描述：自定义排序函数参数。查看 [文档](/manual/basic/sort/custom) 和 [示例](/examples/analysis/sort/#custom-sort-func)
 
 | 参数          | 说明                                        | 类型                                  | 默认值 | 必选 |
 | ------------ | ------------------------------------------ | ------------------------------------ | ------ | --- |
diff --git a/s2-site/docs/common/style.zh.md b/s2-site/docs/common/style.zh.md
index 165d7c8315..faab8aa394 100644
--- a/s2-site/docs/common/style.zh.md
+++ b/s2-site/docs/common/style.zh.md
@@ -5,18 +5,18 @@ order: 3
 
 ## Style
 
-object **必选**,_default：null_ 功能描述：样式设置
+ 功能描述：样式设置。查看 [文档](/manual/advanced/custom/cell-size) 和 [示例](/examples/layout/custom/#custom-pivot-size)
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | --- | --- | ---  | --- | --- |
-| layoutWidthType | `adaptive` \| `colAdaptive`  \| `compact` |    |  | 单元格宽度布局类型<br> `adaptive` : 行列等宽，均分整个 `Canvas` 画布宽度 <br> `colAdaptive`：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度<br> `compact`：行列紧凑布局，指标维度少的时候无法布满整个画布 |
+| layoutWidthType | `adaptive` \| `colAdaptive`  \| `compact` |    |  | 单元格宽度布局类型<br/> `adaptive` : 行列等宽，均分整个 `Canvas` 画布宽度 <br> `colAdaptive`：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度 <br/> `compact`：行列紧凑布局，指标维度少的时候无法布满整个画布 |
 | dataCell | [DataCell](#dataCell) |  |  | 数值单元格配置 |
 | colCell | [ColCell](#colCell) |  |  |   列头单元格配置 |
 | rowCell | [RowCell](#rowCell) |  |  |   行头单元格配置 |
 
 ### DataCell
 
-object **必选**,_default：null_ 功能描述：数值单元格配置
+功能描述：数值单元格配置
 
 | 参数    | 说明 | 类型   | 默认值 | 必选  |
 | ------- | ------------ | ------ | ------ | ---- |
@@ -26,7 +26,7 @@ object **必选**,_default：null_ 功能描述：数值单元格配置
 
 ### ColCell
 
-object **必选**,_default：null_ 功能描述： 列头单元格配置
+功能描述：列头单元格配置
 
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --- | --- | --- | --- | ---  |
@@ -38,7 +38,7 @@ object **必选**,_default：null_ 功能描述： 列头单元格配置
 
 ### RowCell
 
-object **必选**,_default：null_ 功能描述： 行头单元格配置
+功能描述：行头单元格配置
 
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --- | --- | --- | --- | ---  |
diff --git a/s2-site/docs/common/tooltip.zh.md b/s2-site/docs/common/tooltip.zh.md
index caf83cbf7d..211fa54e3e 100644
--- a/s2-site/docs/common/tooltip.zh.md
+++ b/s2-site/docs/common/tooltip.zh.md
@@ -5,7 +5,7 @@ order: 4
 
 ## Tooltip
 
-object **可选**,_default：null_ 功能描述： tooltip 配置
+功能描述：tooltip 配置。查看 [文档](/manual/basic/tooltip) 和 [示例](/examples/react-component/tooltip/#basic)
 
 | 参数               | 说明   | 类型      | 默认值 | 必选 |
 | ------------------ | ----------- | ----------- | ------ | --- |
@@ -25,7 +25,7 @@ object **可选**,_default：null_ 功能描述： tooltip 配置
 
 ### BaseTooltipConfig
 
-object **可选**,_default：null_ 功能描述： tooltip 基础通用配置
+功能描述：tooltip 基础通用配置
 
 | 参数             | 说明                    | 类型                                  | 默认值 | 必选 |
 | ---------------- | ----------------------- | ------------------------------------- | ------ | --- |
@@ -35,7 +35,7 @@ object **可选**,_default：null_ 功能描述： tooltip 基础通用配置
 
 ### TooltipPositionInfo
 
-object **可选**,_default：null_ 功能描述： tooltip 坐标信息
+功能描述：tooltip 坐标信息。查看 [文档](/manual/basic/tooltip) 和 [示例](/examples/react-component/tooltip/#basic).
 
 | 参数             | 说明                    | 类型                                  | 默认值 | 必选 |
 | ---------------- | ----------------------- | ------------------------------------- | ------ | --- |
@@ -44,7 +44,7 @@ object **可选**,_default：null_ 功能描述： tooltip 坐标信息
 
 ### TooltipOperation
 
-object **可选**,_default：null_ 功能描述： tooltip 操作配置项
+功能描述：tooltip 操作配置项。查看 [文档](/manual/basic/tooltip#%E6%93%8D%E4%BD%9C%E9%85%8D%E7%BD%AE%E9%A1%B9) 和 [示例](/examples/react-component/tooltip/#custom-operation).
 
 | 参数          | 说明                          | 类型      | 默认值  | 必选 |
 | ------------- | ----------------------------- | --------- | ------- | --- |
diff --git a/s2-site/docs/common/totals.zh.md b/s2-site/docs/common/totals.zh.md
index 2d92fae22d..e05f14b53f 100644
--- a/s2-site/docs/common/totals.zh.md
+++ b/s2-site/docs/common/totals.zh.md
@@ -5,7 +5,7 @@ order: 3
 
 ## Totals
 
-object **必选**,_default：null_ 功能描述： 小计总计配置
+功能描述：行/列小计总计配置。
 
 | 参数 | 说明   | 类型                                          | 必选  | 默认值 |
 | ---- | ------ | --------------------------------------------- | ---- | ------ |
@@ -14,7 +14,7 @@ object **必选**,_default：null_ 功能描述： 小计总计配置
 
 ## Total
 
-object **必选**,_default：null_ 功能描述： 小计总计配置
+功能描述：小计总计配置。查看 [文档](/manual/basic/totals) 和 [示例](/examples/analysis/totals/#basic)
 
 | 参数                | 说明                     | 类型         | 默认值  | 必选  |
 | ------------------- | ------------------------ | ------------ | ------- | ---- |
@@ -32,9 +32,9 @@ object **必选**,_default：null_ 功能描述： 小计总计配置
 
 ## CalcTotals
 
-object **可选**,_default：null_ 功能描述： 计算小计总计配置
+功能描述： 小计总计计算方式配置。查看 [文档](/manual/basic/totals) 和 [示例](/examples/analysis/totals/#calculate)
 
 | 参数        | 说明       | 类型                                                                 | 必选  | 默认值 |
 | ----------- | ---------- | -------------------------------------------------------------------- | --- | ------ |
-| aggregation | 聚合方式   | `Aggregation.SUM` \| `Aggregation.MIN` \| `Aggregation.MAX` \| `Aggregation.AVG`                                                                |       |        |
+| aggregation | 聚合方式   | `SUM \| MIN \| MAX \| AVG`            |       |        |
 | calcFunc    | 自定义方法 | `(query: Record<string, any>, arr: Record<string, any>[]) => number` |       |        |
diff --git a/s2-site/docs/common/view-meta.zh.md b/s2-site/docs/common/view-meta.zh.md
index bac64f7193..e0f02336b8 100644
--- a/s2-site/docs/common/view-meta.zh.md
+++ b/s2-site/docs/common/view-meta.zh.md
@@ -5,11 +5,11 @@ order: 6
 
 ## ViewMeta
 
-object 必选，_default：{}_ 功能描述：单元格数据和位置等信息
+功能描述：单元格数据和位置等信息
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | --- | --- | ---  | --- | --- |
-| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) |  |   | 表类实例，可以访问任意的配置信息 |
+| spreadsheet | [SpreadSheet](/docs/api/basic-class/spreadsheet) |  |   | 表格实例 |
 | id | `string` |  |   | 单元格唯一标识 |
 | x | `number` |  |   | 单元格 x 坐标 |
 | y | `number` |  |   | 单元格 y 坐标 |
diff --git a/s2-site/docs/manual/advanced/custom/cell-size.zh.md b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
index 048f43f08d..0f63af745e 100644
--- a/s2-site/docs/manual/advanced/custom/cell-size.zh.md
+++ b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
@@ -4,7 +4,7 @@ order: 5
 tag: Updated
 ---
 
-S2 可以手动拖拽动态改变单元格的宽高，同时内置了 `行列等宽`, `列等宽` 和 `行列紧凑布局` 三种布局 ([查看例子](/examples/layout/basic/#compact))
+S2 可以手动拖拽动态改变单元格的宽高，同时内置了 `行列等宽`, `列等宽` 和 `行列紧凑布局` 三种布局 ([查看示例](/examples/layout/basic/#compact))
 
 我们可以通过 [主题](/docs/manual/basic/theme/) 修改单元格的背景色，字体大小等配置，如果想自定义单元格的宽高，可以通过 `s2Options` 的 [style](/docs/api/general/S2Options#style) 配置来实现
 
@@ -232,7 +232,7 @@ const s2Options = {
 
 ## 隐藏列头
 
-还可以将高度设置为 `0`, 从而实现**隐藏列头**的效果，[查看例子](/examples/layout/custom#hide-columns)
+还可以将高度设置为 `0`, 从而实现**隐藏列头**的效果，[查看示例](/examples/layout/custom#hide-columns)
 
 ```ts
 const s2Options = {
diff --git a/s2-site/docs/manual/advanced/custom/hook.en.md b/s2-site/docs/manual/advanced/custom/hook.en.md
index 3143695f68..2bd4daaddf 100644
--- a/s2-site/docs/manual/advanced/custom/hook.en.md
+++ b/s2-site/docs/manual/advanced/custom/hook.en.md
@@ -14,9 +14,9 @@ The order of rows and columns can be set manually, which is suitable for local a
 
 It is used to change the size (length, width) and coordinates (x, y) of row and column leaf nodes, such as changing row height and column width, etc. [example](/examples/custom/custom-layout#custom-coordinate) .
 
-## layoutDataPosition
+## layoutCellMeta
 
-Dynamically change the positioning of data and revise the value of some grids. [example](/examples/custom/custom-layout#custom-data-position) .
+Dynamically change the positioning of data and revise the value of some grids. [example](/examples/custom/custom-layout#custom-layout-cell-meta) .
 
 ## layout Hierarchy
 
diff --git a/s2-site/docs/manual/advanced/custom/hook.zh.md b/s2-site/docs/manual/advanced/custom/hook.zh.md
index 9021e05975..b2dba22b95 100644
--- a/s2-site/docs/manual/advanced/custom/hook.zh.md
+++ b/s2-site/docs/manual/advanced/custom/hook.zh.md
@@ -4,56 +4,84 @@ order: 1
 tag: Updated
 ---
 
-自定义 `Hook` 允许开发者重写表格的所有元素，你可以根据产品需要对某些元素进行自定义，比如角头、列头、行头、单元格、行头顺序、单元格位置等。如果需要，完全可以重写一个属于你的透视表！
+S2 默认提供丰富的功能配置，除此之外，也提供丰富的 [`自定义 Hook`](/api/general/s2-options) 允许开发者重写表格的所有元素，你可以根据产品需要对某些元素进行自定义，比如角头、列头、行头、单元格、行头顺序、单元格位置、单元格宽高、图标、数据集、分面、序号等。如果需要，完全可以重写一个属于你的透视表或明细表！
 
 ## layoutArrange
 
-可手动设置行、列顺序，适用于局部调整，非规则调整。比如指定某行在行首、指定某列在列尾。[例子](/examples/custom/custom-layout#custom-layout-arrange)。
+可手动设置行、列顺序，适用于局部调整，非规则调整。比如指定某行在行首、指定某列在列尾。[查看示例](/examples/custom/custom-layout#custom-layout-arrange)
 
 ## layoutCoordinate
 
-用于改变行、列叶子节点的尺寸（长、宽）和坐标（x、y），比如改变行高、列宽等。[例子](/examples/custom/custom-layout#custom-coordinate)。
+用于改变行、列叶子节点的坐标（x、y）。[查看示例](/examples/custom/custom-layout#custom-coordinate)
 
-## layoutDataPosition
+## layoutCellMeta
 
-动态改变数据的定位，修订某些格子的数值。[例子](/examples/custom/custom-layout#custom-data-position)。
+动态改变单元格的元数据，修订某些单元格的数值。[查看示例](/examples/custom/custom-layout#custom-layout-cell-meta)
 
 ## layoutHierarchy
 
-手动控制行列结构的增加、删除的特殊场景。[例子](/examples/custom/custom-layout#custom-layout-hierarchy)。
+手动控制行列结构的增加、删除的特殊场景。[查看示例](/examples/custom/custom-layout#custom-layout-hierarchy)
+
+## layoutSeriesNumberNodes
+
+自定义序号列节点，比如如将序号 1,2,3 转换成 a,b,c [查看示例](/examples/custom/custom-cell/#series-number-cell)
+
+## facet
+
+自定义分面。[查看示例](/examples/custom/custom-layout#custom-facet)
+
+## placeholder
+
+自定义单元格占位符，比如展示加密数据，空数据占位符。[查看示例](/examples/custom/custom-cell/#data-cell-placeholder)
 
 ## headerActionIcons
 
-设置行头或者列头的行动点图标，比如字段的趋势弹窗，字段的下钻等。[例子](/examples/custom/custom-icon#custom-header-action-icon)。
+设置行头，列头，角头的图标，比如字段的趋势弹窗，字段的下钻，筛选等。查看 [文档](/manual/advanced/custom/custom-icon) 和 [示例](/examples/custom/custom-icon#custom-header-action-icon)
 
 ## customSVGIcons
 
-自定义图标，当 `S2` 提供的图标不满足需求时，开发者可以自己定义图标，用于透视表上的图标展示。[例子](/examples/custom/custom-icon/#custom-svg-icon)
+自定义图标，当 `S2` 提供的图标不满足需求时，开发者可以自己定义图标，用于透视表上的图标展示。查看 [文档](/manual/advanced/custom/custom-icon#customsvgicon) 和 [示例](/examples/custom/custom-icon/#custom-svg-icon)
 
 ## dataCell
 
-改变数据单元格的默认实现，需要继承自 [dataCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#data-cell)
+改变数据单元格的默认实现，`透视表` 需要继承自 [DataCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts)，`明细表` 需要继承自 [TableDataCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts), 重写某些方法，比如字体样式、背景样式等。[查看示例](/examples/custom/custom-cell#data-cell)
 
 ## rowCell
 
-改变行头单元格的默认实现，需要继承自 [rowCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#row-cell)
+改变行头单元格的默认实现，需要继承自 [RowCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts)，重写某些方法，比如字体样式、背景样式等。[查看示例](/examples/custom/custom-cell#row-cell)
 
 ## colCell
 
-改变列头单元格的默认实现，需要继承自 [colCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#col-cell)
+改变列头单元格的默认实现，`透视表` 需要继承自 [ColCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts)，`明细表` 需要继承自 [TableColCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts), 重写某些方法，比如字体样式、背景样式等。[查看示例](/examples/custom/custom-cell#col-cell)
 
 ## cornerCell
 
-改变角头单元格的默认实现，需要继承自 [cornerCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/corner-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#corner-cell)
+改变角头单元格的默认实现，`透视表` 需要继承自 [CornerCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/corner-cell.ts)，`明细表` 需要继承自 [TableCornerCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-corner-cell.ts), 重写某些方法，比如字体样式、背景样式等。[查看示例](/examples/custom/custom-cell#corner-cell)
 
 ## seriesNumberCell
 
-改变序号单元格的默认实现，需要继承自 [seriesNumberCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/series-number-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#series-number-cell)
+改变序号单元格的默认实现，`透视表` 需要继承自 [SeriesNumberCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/series-number-cell.ts)，`明细表` 需要继承自 [TableSeriesNumberCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-series-number-cell.ts), 重写某些方法，比如字体样式、背景样式等。[查看示例](/examples/custom/custom-cell#series-number-cell)
+
+## mergedCell
+
+改变合并单元格的默认实现，需要继承自 [MergedCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/merged-cell.ts), 重写某些方法，比如字体样式、背景样式等。[查看示例](/examples/custom/custom-cell/#custom-merged-cell)
 
 ## cornerHeader
 
-改变角头的默认实现，需要继承自 [Group](https://g.antv.antgroup.com/docs/api/group)，覆盖某些方法，比如渲染内容更换等。[例子](/examples/custom/custom-cell#corner-cell)
+改变角头的默认实现，需要继承自 [Group](https://g.antv.antgroup.com/docs/api/group)，重写某些方法，比如渲染内容更换等。[查看示例](/examples/custom/custom-cell#corner-cell)
 
 ## frame
 
-修改框架的默认实现，比如修改分割线、阴影、滚动条等。[例子](/examples/case/comparison#measure-comparison)
+修改框架的默认实现，比如修改分割线、阴影、滚动条等。[查看示例](/examples/case/comparison#measure-comparison)
+
+## dataset
+
+自定义数据集，比如数据的展示方式，取数逻辑等。[查看示例](#TODO)
+
+## style
+
+自定义单元格宽高，比如给特定某一行/列设置宽高，精确到某一类维度或维值，又或者所有单元格。查看 [文档](/manual/advanced/custom/cell-size) 和 [示例](/examples/layout/custom/#custom-pivot-size)
+
+## tooltip
+
+自定义单元格提示信息，比如展示数据对应行列维值，汇总信息等。[查看示例](/examples/react-component/tooltip/#custom-content-base)
diff --git a/s2-site/docs/manual/advanced/data-process/pivot.zh.md b/s2-site/docs/manual/advanced/data-process/pivot.zh.md
index febb01385a..2d6a6df5e9 100644
--- a/s2-site/docs/manual/advanced/data-process/pivot.zh.md
+++ b/s2-site/docs/manual/advanced/data-process/pivot.zh.md
@@ -87,7 +87,7 @@ lodash.set(indexesData, dataPath, currentData);
 ```ts
 {
  "province[&]city[&]type[&]sub_type": [
-  null, 
+  null,
   [
    null,
    [
@@ -157,7 +157,7 @@ lodash.set(indexesData, dataPath, currentData);
 
 ### 获取单个数据
 
-当渲染透视表数据单元格时，需要获取对应的展示内容（数据）。举个例子，需要右下角单元格数据时，代码如下：
+当渲染透视表数据单元格时，需要获取对应的展示内容（数据）。举个示例，需要右下角单元格数据时，代码如下：
 
 ```ts
 const data = getCellData({
diff --git a/s2-site/docs/manual/advanced/interaction/basic.zh.md b/s2-site/docs/manual/advanced/interaction/basic.zh.md
index 735266b7e2..5126c98153 100644
--- a/s2-site/docs/manual/advanced/interaction/basic.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/basic.zh.md
@@ -332,7 +332,7 @@ const s2Options = {
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/0TMss8KAY/Kapture%2525202022-02-11%252520at%25252017.52.53.gif" alt="preview" width="600" />
 
-同时支持透视表，和明细表，点击叶子节点的列头后，显示隐藏列头按钮，点击隐藏后，会在紧邻的兄弟单元格显示一个展示按钮，和一个隐藏提示线，鼠标单击即可展开，可配置 `hiddenColumns` 实现 `默认隐藏` 和 `交互式隐藏`. 查看 [详情](/docs/manual/advanced/interaction/hide-columns/) 或 [具体例子](/examples/interaction/advanced#pivot-hide-columns)
+同时支持透视表，和明细表，点击叶子节点的列头后，显示隐藏列头按钮，点击隐藏后，会在紧邻的兄弟单元格显示一个展示按钮，和一个隐藏提示线，鼠标单击即可展开，可配置 `hiddenColumns` 实现 `默认隐藏` 和 `交互式隐藏`. 查看 [详情](/docs/manual/advanced/interaction/hide-columns/) 或 [示例](/examples/interaction/advanced#pivot-hide-columns)
 
 ```ts
 const s2DataConfig = {
@@ -361,7 +361,7 @@ const s2Options = {
 
 S2 默认提供 `列等宽布局` `行列等宽布局`和 `紧凑布局` 三种布局方式 ([预览](/examples/layout/basic#compact)), 也可以拖拽行/列头进行动态调整
 
-可配置 `resize` 控制需要开启的单元格宽高调整热区范围，分为 角头，行头，列头三个部分，默认为全部开启。可以通过设置`boolean` 类型值快捷开启或关闭所有 `resize` 热区，也可以通过对象类型配置各个区域的热区开启或关闭。[查看具体例子](/examples/interaction/advanced#resize-active)
+可配置 `resize` 控制需要开启的单元格宽高调整热区范围，分为 角头，行头，列头三个部分，默认为全部开启。可以通过设置`boolean` 类型值快捷开启或关闭所有 `resize` 热区，也可以通过对象类型配置各个区域的热区开启或关闭。[查看示例](/examples/interaction/advanced#resize-active)
 
 ```ts
 const s2Options = {
@@ -383,7 +383,7 @@ const s2Options = {
 // };
 ```
 
-还可以配置 `resize.visible` 和 `resize.disable` 两个属性，分别用于控制 `resize` 热区的显示和自定义拖拽校验逻辑。[查看具体例子](/examples/interaction/advanced#resize-disable)
+还可以配置 `resize.visible` 和 `resize.disable` 两个属性，分别用于控制 `resize` 热区的显示和自定义拖拽校验逻辑。[查看示例](/examples/interaction/advanced#resize-disable)
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/64tnK5%263K/Kapture%2525202022-07-19%252520at%25252015.40.15.gif" alt="preview" width="600" />
 
@@ -418,13 +418,13 @@ const s2Options = {
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/ouXuK7MMt/Kapture%2525202022-04-19%252520at%25252019.31.02.gif" alt="preview" width="600" />
 
-查看 [详情](/docs/manual/advanced/interaction/merge-cell) 或 [具体例子](/examples/interaction/advanced#merge-cell)
+查看 [详情](/docs/manual/advanced/interaction/merge-cell) 或 [示例](/examples/interaction/advanced#merge-cell)
 
 ### 链接跳转
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/W0bikxI2pn/link-pivot.gif" alt="preview" width="600" />
 
-查看 [详情](/docs/manual/advanced/interaction/link-jump) 或 [具体例子](/examples/interaction/advanced#pivot-link-jump)
+查看 [详情](/docs/manual/advanced/interaction/link-jump) 或 [示例](/examples/interaction/advanced#pivot-link-jump)
 
 ### 滚动
 
@@ -452,7 +452,7 @@ s2.on(S2Event.GLOBAL_RESET, () => {
 })
 ```
 
-可配置 `autoResetSheetStyle` 关闭重置交互。[查看具体例子](/examples/interaction/advanced#auto-reset-sheet-style)
+可配置 `autoResetSheetStyle` 关闭重置交互。[查看示例](/examples/interaction/advanced#auto-reset-sheet-style)
 
 ```ts
 const s2Options = {
diff --git a/s2-site/docs/manual/advanced/interaction/custom.zh.md b/s2-site/docs/manual/advanced/interaction/custom.zh.md
index dec795f6f8..4325755f9f 100644
--- a/s2-site/docs/manual/advanced/interaction/custom.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/custom.zh.md
@@ -3,7 +3,7 @@ title: 自定义交互
 order: 1
 ---
 
-如果内置交互未能覆盖实际的使用场景，不用担心。你可以使用 [`S2Event`](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/constant/events/basic.ts) 所提供的交互事件，进行任意排列组合，自定义交互。这里以 [**明细表双击隐藏列头**](/examples/interaction/custom#double-click-hide-columns) 的例子说明。
+如果内置交互未能覆盖实际的使用场景，不用担心。你可以使用 [`S2Event`](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/constant/events/basic.ts) 所提供的交互事件，进行任意排列组合，自定义交互。这里以 [**明细表双击隐藏列头**](/examples/interaction/custom#double-click-hide-columns) 的示例说明。
 
 ## 1. 自定义交互类
 
diff --git a/s2-site/docs/manual/advanced/interaction/hide-columns.zh.md b/s2-site/docs/manual/advanced/interaction/hide-columns.zh.md
index 3d3494d79a..c03a468396 100644
--- a/s2-site/docs/manual/advanced/interaction/hide-columns.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/hide-columns.zh.md
@@ -91,7 +91,7 @@ const s2Options = {
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/1VeZokRvz/a1933e73-f3ed-4289-beb1-8a06fa3292b6.png)
 
-`hiddenColumnFields` 支持自动分组，举个例子，比如隐藏的是 `province`, `type`, `price`
+`hiddenColumnFields` 支持自动分组，举个示例，比如隐藏的是 `province`, `type`, `price`
 
 ```ts
 const s2Options = {
diff --git a/s2-site/docs/manual/advanced/interaction/scroll.zh.md b/s2-site/docs/manual/advanced/interaction/scroll.zh.md
index 10e0210ca9..7cfc86f7f4 100644
--- a/s2-site/docs/manual/advanced/interaction/scroll.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/scroll.zh.md
@@ -13,7 +13,7 @@ S2 基于 `Canvas` 渲染，也实现了虚拟滚动，即只渲染可视区域
 
 ## 自定义滚动速度
 
-可配置 `scrollSpeedRatio` 控制滚动速率，分为 `水平` 和 `垂直` 两个方向，范围为 `0-1`, 默认为 `1`。 [查看具体例子](/examples/interaction/advanced#scroll-speed-ratio)
+可配置 `scrollSpeedRatio` 控制滚动速率，分为 `水平` 和 `垂直` 两个方向，范围为 `0-1`, 默认为 `1`。 [查看示例](/examples/interaction/advanced#scroll-speed-ratio)
 
 ```ts
 const s2Options = {
@@ -34,7 +34,7 @@ const s2Options = {
 
 对于自身和父容器都存在滚动条时，浏览器默认的滚动行为是：非边界不触发父容器滚动，到达边界后，触发父容器滚动，同时还可以配置 [overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) 改变默认行为。
 
-S2 是虚拟滚动，但是也**模拟**了浏览器的滚动行为，可配置 `overscrollBehavior` 控制非边界滚动行为。[查看例子](/examples/interaction/advanced#overscroll-behavior)
+S2 是虚拟滚动，但是也**模拟**了浏览器的滚动行为，可配置 `overscrollBehavior` 控制非边界滚动行为。[查看示例](/examples/interaction/advanced#overscroll-behavior)
 
 ```ts
 const s2Options = {
@@ -98,7 +98,7 @@ s2.on(S2Event.ROW_CELL_SCROLL, (position) => {
 
 ## 手动触发表格滚动
 
-参考以下例子：
+参考以下示例：
 
 - [滚动至指定单元格](/examples/interaction/advanced/#scroll-to-cell)
 - [循环滚动](/examples/interaction/advanced#scroll-loop)
diff --git a/s2-site/docs/manual/advanced/performance.zh.md b/s2-site/docs/manual/advanced/performance.zh.md
index 55ada9a42d..349d84ca5d 100644
--- a/s2-site/docs/manual/advanced/performance.zh.md
+++ b/s2-site/docs/manual/advanced/performance.zh.md
@@ -99,7 +99,7 @@ const rowsMeta: PivotMeta = {
 
 通过这样的数据结构，我们就实现了表格行列树结构的前端表达。「形」有了后，我们就需要「魂」，也就是数据。
 
-在 `S2` 中，我们需要将用户传入一维数据`data`通过内部的数据训练转为多维数组`indexesData`。这个多维数组是将行维度、列维度的 `path` 来组装的（底层是通过 `lodash.set` 实现），举个例子：
+在 `S2` 中，我们需要将用户传入一维数据`data`通过内部的数据训练转为多维数组`indexesData`。这个多维数组是将行维度、列维度的 `path` 来组装的（底层是通过 `lodash.set` 实现），举个示例：
 
 ![path](https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*GyJCTq-gw-sAAAAAAAAAAAAAARQnAQ)
 
diff --git a/s2-site/docs/manual/basic/base-concept.zh.md b/s2-site/docs/manual/basic/base-concept.zh.md
index d6f6d39d46..e7e0d95f4f 100644
--- a/s2-site/docs/manual/basic/base-concept.zh.md
+++ b/s2-site/docs/manual/basic/base-concept.zh.md
@@ -3,6 +3,7 @@ title: 基本概念
 order: 0
 tag: Updated
 ---
+
 本文介绍透视表的基本概念。
 
 ## 简介
@@ -11,18 +12,23 @@ tag: Updated
 
 ### 基本概念
 
-- 度量（指标）：数值本身，比如价格、数量等。
-- 维度：可以理解为分析数据的角度，比如省份、类型等。
+- **度量（指标**）：数值本身，比如 `价格`、`数量` 等。
+- **维度**：可以理解为分析数据的角度，比如 `省份`、`类型` 等。
+- **维值**：维度所对应具体的值，比如 `成都`、`杭州` 等。
 
 ### 构成
 
-透视表由五部分组成，分别是行头、列头、角头、数据单元格、框架 如下图所示：
+透视表由五部分组成，分别是 `行头`、`列头`、`角头`、`数据`、`框架`。
+
+如下图所示：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*7FRBQr_tE4YAAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />
 
 ## 行头（rowHeader）
 
-行头的结构是由 `s2DataConfig.fields.rows` 决定，用于行分析维度展示。行头支持 `平铺模式 (grid)`, `树状模式 (tree)` 两种展示形态。
+行头的结构是由 [`s2DataConfig.fields.rows`](/api/general/s2-data-config) 决定，用于行分析维度展示，同时支持自定义行头分组。[了解更多](/manual/advanced/custom/custom-header#1-%E9%80%8F%E8%A7%86%E8%A1%A8).
+
+行头支持 [`平铺模式 (grid)`](examples/basic/pivot/#grid), [`树状模式 (tree)`](/examples/basic/pivot/#tree) 两种展示形态，同时支持 [行序号](/manual/basic/sheet-type/pivot-mode#%E5%BA%8F%E5%8F%B7) 的展示以及 [行头冻结](/manual/basic/sheet-type/pivot-mode#%E5%86%BB%E7%BB%93%E8%A1%8C%E5%A4%B4)。
 
 比如行头数据配置 `province, city` 两个字段
 
@@ -34,7 +40,7 @@ const s2DataConfig = {
 }
 ```
 
-在平铺模式下展示为：
+### 平铺模式
 
 ```ts
 const s2Options = {
@@ -42,10 +48,13 @@ const s2Options = {
 }
 ```
 
-<br/>
 <img width="200" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*p71xTrX3YIEAAAAAAAAAAAAAARQnAQ" width="250"  alt="row" />
 
-在树状模式下展示为：
+<br/>
+
+[查看示例](/examples/basic/pivot/#grid)
+
+### 树状模式
 
 ```ts
 const s2Options = {
@@ -53,14 +62,19 @@ const s2Options = {
 }
 ```
 
-<br/>
 <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*zYzLQ5rgzsoAAAAAAAAAAAAAARQnAQ" height="200"  alt="column" />
 
+<br/>
+
+[查看示例](/examples/basic/pivot/#tree)
+
 ## 列头（colHeader）
 
-> 注意，当为明细表时，仅需设置 columns。
+:::warning{title="注意"}
+当为明细表时，由于只存在列头，所以仅需设置 columns。
+:::
 
-列头的结构是由 `s2DataConfig.fields.columns` 决定，用于列分析维度展示。
+列头的结构是由 [`s2DataConfig.fields.columns`](/api/general/s2-data-config) 决定，用于列分析维度展示，同时支持自定义列头分组。[了解更多](/manual/advanced/custom/custom-header#2-%E6%98%8E%E7%BB%86%E8%A1%A8)
 
 比如列头数据配置 `type, sub_type` 两个字段，展示为：
 
@@ -72,20 +86,17 @@ const s2DataConfig = {
 }
 ```
 
-<br/>
 <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*_uMfQK9VHk4AAAAAAAAAAAAAARQnAQ" width="400"  alt="column" />
 
 ## 角头（cornerHeader）
 
 角头指表格的左上角部分，在表的布局中起着重要的作用。
 
-表的布局中，`S2` 是以角头作为基础进行扩展，计算出行、列的尺寸和坐标。
-
-角头也用于展示行头、列头名称，比如示例中的 `省份`、`城市`。
+表的布局中，`S2` 是以角头作为基础进行扩展，计算出行、列的尺寸和坐标，同时角头也用于展示行头、列头名称，比如示例中的 `省份`、`城市`。
 
 另外，`S2` 还提供了自定义扩展，用于需要自定义角头的场景，详见 [cornerCell](/examples/custom/custom-cell#corner-cell) 和 [cornerHeader](/examples/custom/custom-cell#corner-header)。
 
-## 数据单元格 (dataCell)
+## 数据 (dataCell)
 
 数据单元格是表格行列维度值交叉后产生的数据区域，通常情况下应该是度量值，是表数据分析最核心的数据呈现区域。
 
@@ -93,4 +104,20 @@ const s2DataConfig = {
 
 ## 框架（frame）
 
-框架布局区域，位于其他四个区域之上，用来做区域之间的间隔框架，或者滚动条，框架间隔线的阴影等逻辑。
+框架布局区域，位于其他四个区域之上，用来做区域之间的间隔框架，或者滚动条，框架间隔线的阴影等逻辑，详见 [参考示例](/examples/case/comparison/#time-spend)。
+
+## 单元格 (cell)
+
+`角头`, `行头`, `列头` 由多个单元格组成，支持 [自定义](/manual/advanced/custom/hook).
+
+## 节点 (node)
+
+一个单元格 (cell), 对应一个节点 (node), 节点表示的是单元格的 [元信息](/api/basic-class/node)（包含可视范围外）, 单元格表示当前可视范围内，已实例化的 [单元格信息](/api/basic-class/base-cell)。
+
+## 分面 (facet)
+
+当前 [可视渲染区域](/api/basic-class/base-facet)
+
+## 数据集 (dataset)
+
+表格内部会把用户传入的 `s2DataConfig` 转换成 [数据集](/api/basic-class/base-data-set), 便于处理以及渲染数据。
diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
index 1dcd405383..56c76e678d 100644
--- a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
@@ -199,7 +199,7 @@ const s2Options = {
 }
 ```
 
-### 冻结首行 <Badge type="success">@antv/s2@^1.53.0 新增</Badge>
+### 冻结首行
 
 :::info{title="注意"}
 
@@ -248,3 +248,7 @@ const s2Options = {
 <Playground path='layout/frozen/demo/frozen-pivot-tree.ts' rid='container-tree' height='300'></playground>
 
 <br/>
+
+### 行列头自定义分组
+
+行列头结构默认根据传入的维值进行分组，同时支持自定义分组。[了解更多](/manual/advanced/custom/custom-header)
diff --git a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
index 616f09d6a1..9996441707 100644
--- a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
@@ -180,6 +180,8 @@ const s2Options = {
 }
 ```
 
-### 效果
-
 <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*tZkOSqYWVFQAAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />
+
+### 列头自定义分组
+
+列头结构默认根据传入的维值进行分组，同时支持自定义分组，可实现多级列头。[了解更多](/manual/advanced/custom/custom-header)
diff --git a/s2-site/docs/manual/basic/theme.zh.md b/s2-site/docs/manual/basic/theme.zh.md
index 242dba12fe..c8095db381 100644
--- a/s2-site/docs/manual/basic/theme.zh.md
+++ b/s2-site/docs/manual/basic/theme.zh.md
@@ -21,7 +21,7 @@ S2 中内置了 **4** 套开箱即用的主题配置，也提供了强大的主
 - 使用主题色加不同程度的 `白` 生成 `5` 个**较淡的颜色**，置于索引 `0~5` 上
 - 使用主题色加不同程度的 `黑` 生成 `5` 个**较深的颜色**，置于索引 `6~11` 上
 
-以下是使用 **#0A78F4**、**#FF5500** 不同主题色，生成标准色板的例子：
+以下是使用 **#0A78F4**、**#FF5500** 不同主题色，生成标准色板的示例：
 
 <image alt="#0A78F4 standard palette" src="https://gw.alipayobjects.com/zos/antfincdn/8BOmvrgF6/65409159-09d0-4780-a431-3bb3e61cf429.png" width="600" />
 
diff --git a/s2-site/docs/manual/basic/tooltip.zh.md b/s2-site/docs/manual/basic/tooltip.zh.md
index 568f716a4a..1921521f9f 100644
--- a/s2-site/docs/manual/basic/tooltip.zh.md
+++ b/s2-site/docs/manual/basic/tooltip.zh.md
@@ -488,7 +488,7 @@ const s2Options = {
 
 比如想自定义成鼠标悬停行头时显示 `tooltip`, 可通过自定义交互 [详情](/docs/manual/advanced/interaction/custom),
 监听行头单元格的 [交互事件](/docs/manual/advanced/interaction/basic#%E4%BA%A4%E4%BA%92%E4%BA%8B%E4%BB%B6) `S2Event.ROW_CELL_HOVER`
-. [例子](/examples/interaction/custom#row-col-hover-tooltip)
+. [示例](/examples/interaction/custom#row-col-hover-tooltip)
 
 ```ts
 import { PivotSheet, BaseEvent, S2Event } from '@antv/s2';
@@ -521,7 +521,7 @@ const s2Options = {
 ```
 
 如果使用的是 `React` 组件，也可以使用 [单元格回调函数](/docs/api/components/sheet-component)
-来进行自定义。[例子](/examples/react-component/tooltip#custom-hover-show-tooltip)
+来进行自定义。[示例](/examples/react-component/tooltip#custom-hover-show-tooltip)
 
 ```tsx
 const CustomColCellTooltip = () => <div>col cell tooltip</div>;
diff --git a/s2-site/docs/manual/basic/totals.zh.md b/s2-site/docs/manual/basic/totals.zh.md
index 54ce2a3c0c..8eeb58ff62 100644
--- a/s2-site/docs/manual/basic/totals.zh.md
+++ b/s2-site/docs/manual/basic/totals.zh.md
@@ -83,7 +83,7 @@ order: 5
 
 #### Totals
 
-object **必选**,_default：null_ 功能描述： 小计总计配置
+功能描述： 行/列小计总计配置
 
 | 参数 | 说明   | 类型                                          | 默认值 | 必选 |
 | ---- | ------ | --------------------------------------------- | ------ | ---- |
@@ -92,12 +92,12 @@ object **必选**,_default：null_ 功能描述： 小计总计配置
 
 #### Total
 
-object **必选**,_default：null_ 功能描述： 小计总计算配置
+功能描述：小计总计算配置
 
 | 参数                | 说明                     | 类型         | 默认值 | 必选 |
 | ------------------- | ------------------------ | ------------ | ------ | ---- |
 | showGrandTotals     | 是否显示总计             | `boolean`    | false  | ✓    |
-| showSubTotals       | 是否显示小计。当配置为对象时，always 控制是否在子维度不足 2 个时始终展示小计，默认不展示。             | `boolean | { always: boolean }`    | false  | ✓    |
+| showSubTotals       | 是否显示小计。当配置为对象时，always 控制是否在子维度不足 2 个时始终展示小计，默认不展示。  | `boolean \| { always: boolean }`    | false  | ✓    |
 | subTotalsDimensions | 小计的汇总维度           | `string[]`   | []     | ✓    |
 | reverseGrandTotalsLayout       | 总计布局位置，默认下或右 | `boolean`    | false  | ✓    |
 | reverseSubTotalsLayout    | 小计布局位置，默认下或右 | `boolean`    | false  | ✓    |
diff --git a/s2-site/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md
index 04b789f44b..fdddbb284e 100644
--- a/s2-site/docs/manual/faq.zh.md
+++ b/s2-site/docs/manual/faq.zh.md
@@ -327,9 +327,9 @@ const s2Options = {
 - [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)
 - [《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545)
 
-✅  一个很好的例子：[#852](https://github.com/antvis/S2/issues/852)
+✅  一个很好的示例：[#852](https://github.com/antvis/S2/issues/852)
 
-❌  一个不好的例子：[#1057](https://github.com/antvis/S2/issues/1057)
+❌  一个不好的示例：[#1057](https://github.com/antvis/S2/issues/1057)
 
 ### 我想反馈 Bug, 如何提供一个可复现的在线 demo 呢？
 
diff --git a/s2-site/examples/analysis/conditions/demo/interval.ts b/s2-site/examples/analysis/conditions/demo/interval.ts
index a31a322ae7..4dec4182a9 100644
--- a/s2-site/examples/analysis/conditions/demo/interval.ts
+++ b/s2-site/examples/analysis/conditions/demo/interval.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, S2Options, S2Options } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
diff --git a/s2-site/examples/analysis/conditions/demo/table-text.ts b/s2-site/examples/analysis/conditions/demo/table-text.ts
index ac421e5bca..11e1bb55e2 100644
--- a/s2-site/examples/analysis/conditions/demo/table-text.ts
+++ b/s2-site/examples/analysis/conditions/demo/table-text.ts
@@ -1,4 +1,4 @@
-import { S2DataConfig, S2Options, S2Options, TableSheet } from '@antv/s2';
+import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/986d48ce-cfdf-475d-980c-553762770928.json',
diff --git a/s2-site/examples/analysis/get-data/demo/get-cell-data.ts b/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
index a052fad192..93da8d30b4 100644
--- a/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
+++ b/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
@@ -1,12 +1,12 @@
-import { PivotSheet, EXTRA_FIELD } from '@antv/s2';
+import { PivotSheet, EXTRA_FIELD, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4347c2dd-6554-451b-9d44-15b04e5de657.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -33,15 +33,12 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
-      selectedCellsSpotlight: true,
-      hoverHighlight: true,
-      tooltip: {
-        showTooltip: true,
-      },
       interaction: {
+        selectedCellsSpotlight: true,
+        hoverHighlight: true,
         enableCopy: true,
       },
       // 配置小计总计显示
@@ -49,21 +46,23 @@ fetch(
         row: {
           showGrandTotals: true,
           showSubTotals: true,
-          reverseLayout: true,
-          reverseSubLayout: true,
+          reverseGrandTotalsLayout: true,
+          reverseSubTotalsLayout: true,
           subTotalsDimensions: ['province'],
         },
         col: {
           showGrandTotals: true,
           showSubTotals: true,
-          reverseLayout: true,
-          reverseSubLayout: true,
+          reverseGrandTotalsLayout: true,
+          reverseSubTotalsLayout: true,
           subTotalsDimensions: ['type'],
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
-    s2.render();
+
+    await s2.render();
 
     // 获取明细单元格
     const cellData = s2.dataSet.getCellData({
diff --git a/s2-site/examples/analysis/get-data/demo/get-multi-data.ts b/s2-site/examples/analysis/get-data/demo/get-multi-data.ts
index 59c9eeb8ee..bbd41758af 100644
--- a/s2-site/examples/analysis/get-data/demo/get-multi-data.ts
+++ b/s2-site/examples/analysis/get-data/demo/get-multi-data.ts
@@ -1,12 +1,18 @@
-import { PivotSheet, EXTRA_FIELD, QueryDataType } from '@antv/s2';
+import {
+  PivotSheet,
+  EXTRA_FIELD,
+  QueryDataType,
+  S2Options,
+  S2DataConfig,
+} from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4347c2dd-6554-451b-9d44-15b04e5de657.json',
 )
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -33,15 +39,12 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
-      selectedCellsSpotlight: true,
-      hoverHighlight: true,
-      tooltip: {
-        showTooltip: true,
-      },
       interaction: {
+        selectedCellsSpotlight: true,
+        hoverHighlight: true,
         enableCopy: true,
       },
       // 配置小计总计显示
@@ -49,45 +52,43 @@ fetch(
         row: {
           showGrandTotals: true,
           showSubTotals: true,
-          reverseLayout: true,
-          reverseSubLayout: true,
+          reverseGrandTotalsLayout: true,
+          reverseSubTotalsLayout: true,
           subTotalsDimensions: ['province'],
         },
         col: {
           showGrandTotals: true,
           showSubTotals: true,
-          reverseLayout: true,
-          reverseSubLayout: true,
+          reverseGrandTotalsLayout: true,
+          reverseSubTotalsLayout: true,
           subTotalsDimensions: ['type'],
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
-    s2.render();
+
+    await s2.render();
 
     // 获取所有浙江下的数据
-    const all = s2.dataSet.getMultiData(
-      {
+    const allData = s2.dataSet.getCellMultiData({
+      query: {
         province: '浙江',
         [EXTRA_FIELD]: 'price',
       },
-      {
-        queryType: QueryDataType.All,
-      },
-    );
+      queryType: QueryDataType.All,
+    });
 
-    console.log('所有数据', all);
+    console.log('所有数据', allData);
 
     // 获取所有浙江下的明细数据
-    const detail = s2.dataSet.getMultiData(
-      {
+    const detailData = s2.dataSet.getCellMultiData({
+      query: {
         province: '浙江',
         [EXTRA_FIELD]: 'price',
       },
-      {
-        queryType: QueryDataType.DetailOnly,
-      },
-    );
+      queryType: QueryDataType.DetailOnly,
+    });
 
-    console.log('所有明细数据', detail);
+    console.log('所有明细数据', detailData);
   });
diff --git a/s2-site/examples/analysis/totals/API.en.md b/s2-site/examples/analysis/totals/API.en.md
index 8965719ad0..22b6b8775e 100644
--- a/s2-site/examples/analysis/totals/API.en.md
+++ b/s2-site/examples/analysis/totals/API.en.md
@@ -3,4 +3,4 @@ title: API
 order: 3
 ---
 
-<embed src="@/docs/common/totals.zh.md"></embed>
+<embed src="@/docs/common/totals.en.md"></embed>
diff --git a/s2-site/examples/case/art/API.en.md b/s2-site/examples/case/art/API.en.md
new file mode 100644
index 0000000000..ab30678c65
--- /dev/null
+++ b/s2-site/examples/case/art/API.en.md
@@ -0,0 +1,6 @@
+---
+title: API
+order: 0
+---
+
+<embed src="@/docs/api/components/sheet-component.en.md"></embed>
diff --git a/s2-site/examples/case/art/API.zh.md b/s2-site/examples/case/art/API.zh.md
new file mode 100644
index 0000000000..2c1fcde71b
--- /dev/null
+++ b/s2-site/examples/case/art/API.zh.md
@@ -0,0 +1,6 @@
+---
+title: API
+order: 0
+---
+
+<embed src="@/docs/api/components/sheet-component.zh.md"></embed>
diff --git a/s2-site/examples/case/comparison/API.en.md b/s2-site/examples/case/comparison/API.en.md
index 2c1fcde71b..ab30678c65 100644
--- a/s2-site/examples/case/comparison/API.en.md
+++ b/s2-site/examples/case/comparison/API.en.md
@@ -3,4 +3,4 @@ title: API
 order: 0
 ---
 
-<embed src="@/docs/api/components/sheet-component.zh.md"></embed>
+<embed src="@/docs/api/components/sheet-component.en.md"></embed>
diff --git a/s2-site/examples/case/data-preview/API.en.md b/s2-site/examples/case/data-preview/API.en.md
new file mode 100644
index 0000000000..ab30678c65
--- /dev/null
+++ b/s2-site/examples/case/data-preview/API.en.md
@@ -0,0 +1,6 @@
+---
+title: API
+order: 0
+---
+
+<embed src="@/docs/api/components/sheet-component.en.md"></embed>
diff --git a/s2-site/examples/case/data-preview/API.zh.md b/s2-site/examples/case/data-preview/API.zh.md
new file mode 100644
index 0000000000..2c1fcde71b
--- /dev/null
+++ b/s2-site/examples/case/data-preview/API.zh.md
@@ -0,0 +1,6 @@
+---
+title: API
+order: 0
+---
+
+<embed src="@/docs/api/components/sheet-component.zh.md"></embed>
diff --git a/s2-site/examples/case/kpi-strategy/API.en.md b/s2-site/examples/case/kpi-strategy/API.en.md
index 2c1fcde71b..ab30678c65 100644
--- a/s2-site/examples/case/kpi-strategy/API.en.md
+++ b/s2-site/examples/case/kpi-strategy/API.en.md
@@ -3,4 +3,4 @@ title: API
 order: 0
 ---
 
-<embed src="@/docs/api/components/sheet-component.zh.md"></embed>
+<embed src="@/docs/api/components/sheet-component.en.md"></embed>
diff --git a/s2-site/examples/case/performance-compare/API.en.md b/s2-site/examples/case/performance-compare/API.en.md
new file mode 100644
index 0000000000..ab30678c65
--- /dev/null
+++ b/s2-site/examples/case/performance-compare/API.en.md
@@ -0,0 +1,6 @@
+---
+title: API
+order: 0
+---
+
+<embed src="@/docs/api/components/sheet-component.en.md"></embed>
diff --git a/s2-site/examples/case/performance-compare/API.zh.md b/s2-site/examples/case/performance-compare/API.zh.md
new file mode 100644
index 0000000000..2c1fcde71b
--- /dev/null
+++ b/s2-site/examples/case/performance-compare/API.zh.md
@@ -0,0 +1,6 @@
+---
+title: API
+order: 0
+---
+
+<embed src="@/docs/api/components/sheet-component.zh.md"></embed>
diff --git a/s2-site/examples/case/proportion/API.en.md b/s2-site/examples/case/proportion/API.en.md
index 2c1fcde71b..ab30678c65 100644
--- a/s2-site/examples/case/proportion/API.en.md
+++ b/s2-site/examples/case/proportion/API.en.md
@@ -3,4 +3,4 @@ title: API
 order: 0
 ---
 
-<embed src="@/docs/api/components/sheet-component.zh.md"></embed>
+<embed src="@/docs/api/components/sheet-component.en.md"></embed>
diff --git a/s2-site/examples/custom/custom-cell/demo/col-cell.ts b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
index 9b931142d3..c322cb6289 100644
--- a/s2-site/examples/custom/custom-cell/demo/col-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
@@ -4,6 +4,7 @@ import { Image as GImage } from '@antv/g';
 /**
  * 自定义 ColCell，给列头添加背景图
  * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts
+ * 明细表需要继承 TableColCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts
  */
 class CustomColCell extends ColCell {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
diff --git a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
index bed87f6065..f316ddd8a5 100644
--- a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
@@ -4,6 +4,7 @@ import { Image as GImage } from '@antv/g';
 /**
  * 自定义 CornerCell，给角头添加背景图
  * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/corner-cell.ts
+ * 明细表需要继承 TableCornerCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-corner-cell.ts
  */
 class CustomCornerCell extends CornerCell {
   drawBackgroundShape() {
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
index c2fce2e88c..9df749ebde 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
@@ -12,6 +12,7 @@ import {
 /**
  * 自定义 DataCell，通过复写基类方法, 给特定单元格设置背景色, 文字大小, 颜色等...
  * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
+ * 明细表需要继承 TableDataCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts
  */
 class CustomDataCell extends DataCell {
   getBackgroundColor() {
@@ -72,6 +73,7 @@ class CustomDataCell extends DataCell {
 /**
  * 自定义 ColCell, 通过复写基类方法, 给特定单元格设置文字大小, 颜色等...
  * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/col-cell.ts
+ * 明细表需要继承 TableColCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts
  */
 class CustomColCell extends ColCell {
   getTextStyle() {
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
index 35198d3371..277b0a84aa 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
@@ -2,7 +2,7 @@
 import { TableColCell, TableDataCell, TableSheet } from '@antv/s2';
 
 /**
- * 自定义 DataCell，通过复写基类方法, 给特定单元格设置背景色, 文字大小, 颜色等...
+ * 自定义 TableDataCell，通过复写基类方法, 给特定单元格设置背景色, 文字大小, 颜色等...
  * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-data-cell.ts
  */
 class CustomDataCell extends TableDataCell {
diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell.ts b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
index 2d1c52b9d9..0b4e022098 100644
--- a/s2-site/examples/custom/custom-cell/demo/data-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
@@ -4,6 +4,7 @@ import { Image as GImage } from '@antv/g';
 /**
  * 自定义 DataCell，给数值单元格添加背景图
  * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
+ * 明细表需要继承 TableDataCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts
  */
 class CustomDataCell extends DataCell {
   // 重写绘制背景方法, 添加一个背景图片
diff --git a/s2-site/examples/custom/custom-cell/demo/meta.json b/s2-site/examples/custom/custom-cell/demo/meta.json
index fe3b0bcee4..b6ed60c044 100644
--- a/s2-site/examples/custom/custom-cell/demo/meta.json
+++ b/s2-site/examples/custom/custom-cell/demo/meta.json
@@ -97,7 +97,7 @@
     {
       "filename": "data-cell-placeholder.ts",
       "title": {
-        "zh": "自定义空数据单元格占位符",
+        "zh": "自定义单元格占位符",
         "en": "custom cell placeholder"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B-VMT7kCWL0AAAAAAAAAAAAADmJ7AQ/original",
diff --git a/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts b/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
index 6d0c550bcc..3a9a6e56e5 100644
--- a/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
@@ -9,6 +9,7 @@ import {
 /**
  * 自定义 SeriesNumberCell，改变背景色
  * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/series-number-cell.ts
+ * 明细表需要继承 TableSeriesNumberCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-series-number-cell.ts
  */
 class CustomSeriesCell extends SeriesNumberCell {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
diff --git a/s2-site/examples/custom/custom-layout/API.en.md b/s2-site/examples/custom/custom-layout/API.en.md
index e8349fb397..3d5c5e78cc 100644
--- a/s2-site/examples/custom/custom-layout/API.en.md
+++ b/s2-site/examples/custom/custom-layout/API.en.md
@@ -7,6 +7,6 @@ order: 1
 
 <embed src="@/docs/common/custom/layoutCoordinate.en.md"></embed>
 
-<embed src="@/docs/common/custom/layoutDataPosition.en.md"></embed>
+<embed src="@/docs/common/custom/layoutCellMeta.en.md"></embed>
 
 <embed src="@/docs/common/custom/layoutHierarchy.en.md"></embed>
diff --git a/s2-site/examples/custom/custom-layout/API.zh.md b/s2-site/examples/custom/custom-layout/API.zh.md
index 0a85dca5aa..550d96279a 100644
--- a/s2-site/examples/custom/custom-layout/API.zh.md
+++ b/s2-site/examples/custom/custom-layout/API.zh.md
@@ -7,6 +7,6 @@ order: 1
 
 <embed src="@/docs/common/custom/layoutCoordinate.zh.md"></embed>
 
-<embed src="@/docs/common/custom/layoutDataPosition.zh.md"></embed>
+<embed src="@/docs/common/custom/layoutCellMeta.zh.md"></embed>
 
 <embed src="@/docs/common/custom/layoutHierarchy.zh.md"></embed>
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-facet.ts b/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
new file mode 100644
index 0000000000..a23af3e51e
--- /dev/null
+++ b/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
@@ -0,0 +1,54 @@
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
+
+// TODO: 目前没有导出 PivotFacet
+// class CustomFacet extends PivotFacet {}
+class CustomFacet {}
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
+)
+  .then((res) => res.json())
+  .then(async (res) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
+      fields: {
+        rows: ['province', 'city'],
+        columns: ['type', 'sub_type'],
+        values: ['number'],
+        valueInCols: true,
+      },
+      data: res.data,
+      meta: [
+        {
+          field: 'number',
+          name: '数量',
+        },
+        {
+          field: 'province',
+          name: '省份',
+        },
+        {
+          field: 'city',
+          name: '城市',
+        },
+        {
+          field: 'type',
+          name: '类别',
+        },
+        {
+          field: 'sub_type',
+          name: '子类别',
+        },
+      ],
+    };
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      // facet: (spreadsheet) => new CustomFacet(spreadsheet),
+    };
+
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-data-position.ts b/s2-site/examples/custom/custom-layout/demo/custom-layout-cell-meta.ts
similarity index 100%
rename from s2-site/examples/custom/custom-layout/demo/custom-data-position.ts
rename to s2-site/examples/custom/custom-layout/demo/custom-layout-cell-meta.ts
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts b/s2-site/examples/custom/custom-layout/demo/custom-layout-coordinate.ts
similarity index 96%
rename from s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts
rename to s2-site/examples/custom/custom-layout/demo/custom-layout-coordinate.ts
index acc2455fdb..c97ec45660 100644
--- a/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts
+++ b/s2-site/examples/custom/custom-layout/demo/custom-layout-coordinate.ts
@@ -41,12 +41,13 @@ fetch(
       width: 600,
       height: 480,
       layoutCoordinate: (spreadsheet, rowNode, colNode) => {
-        // layoutCoordinate 用于特定场景改变行列叶子节点的尺寸（长、宽）和坐标（x、y）
+        // layoutCoordinate 用于特定场景改变行列叶子节点的坐标（x、y）
         // 如果只希望改变宽高, 请查看 "自定义单元格宽高" 章节 https://s2.antv.antgroup.com/manual/advanced/custom/cell-size
         // 改变「宁波市」节点高度
         console.log(rowNode, colNode);
         if (rowNode?.value === '宁波市') {
           rowNode.height = 100;
+          rowNode.x += 10;
         }
       },
     };
diff --git a/s2-site/examples/custom/custom-layout/demo/meta.json b/s2-site/examples/custom/custom-layout/demo/meta.json
index d8c0202cab..10232becca 100644
--- a/s2-site/examples/custom/custom-layout/demo/meta.json
+++ b/s2-site/examples/custom/custom-layout/demo/meta.json
@@ -13,20 +13,21 @@
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/iw1AQBleoJ/634d1162-b4a4-472c-9bf5-76eca25c6b50.png"
     },
     {
-      "filename": "custom-coordinate.ts",
+      "filename": "custom-layout-coordinate.ts",
       "title": {
         "zh": "自定义行列坐标",
-        "en": "Custom Coordinate"
+        "en": "Custom Layout Coordinate"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/VGuJd4OP2J/a21c6e22-05c0-4da1-860d-75be53afc43b.png"
     },
     {
-      "filename": "custom-data-position.ts",
+      "filename": "custom-layout-cell-meta.ts",
       "title": {
-        "zh": "自定义数据位置",
-        "en": "Custom Layout Data Position"
+        "zh": "自定义单元格元数据",
+        "en": "Custom Layout Cell Meta"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/SeGpS6Mf3p/c8b32cff-49bd-49f0-a2e8-03c5a769fa4c.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/SeGpS6Mf3p/c8b32cff-49bd-49f0-a2e8-03c5a769fa4c.png",
+      "new": true
     },
     {
       "filename": "custom-layout-hierarchy.ts",
@@ -43,6 +44,15 @@
         "en": "Custom Value Order"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ofk_QYa4eE0AAAAAAAAAAAAADmJ7AQ/fmt.avif"
+    },
+    {
+      "filename": "custom-facet.ts",
+      "title": {
+        "zh": "自定义分面",
+        "en": "Custom Facet"
+      },
+      "screenshot": "",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/interaction/advanced/demo/resize-active.ts b/s2-site/examples/interaction/advanced/demo/resize-active.ts
index d89cbb0626..7e9010c326 100644
--- a/s2-site/examples/interaction/advanced/demo/resize-active.ts
+++ b/s2-site/examples/interaction/advanced/demo/resize-active.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, S2Options, SpreadSheet, SpreadSheet } from '@antv/s2';
+import { PivotSheet, S2Options, SpreadSheet } from '@antv/s2';
 import insertCSS from 'insert-css';
 
 function createRadioGroup(s2: SpreadSheet) {
@@ -17,7 +17,7 @@ function createRadioGroup(s2: SpreadSheet) {
 
     radio.addEventListener('click', async (e) => {
       const value = e.target.value;
-      const updated = !s2.options.interaction.resize[value];
+      const updated = !s2.options.interaction?.resize?.[value];
 
       radio.checked = updated;
 
diff --git a/s2-site/examples/interaction/basic/demo/brush-header.ts b/s2-site/examples/interaction/basic/demo/brush-header.ts
index 73c2a00bda..f7d56ee9b8 100644
--- a/s2-site/examples/interaction/basic/demo/brush-header.ts
+++ b/s2-site/examples/interaction/basic/demo/brush-header.ts
@@ -26,9 +26,6 @@ fetch(
           height: 100,
         },
       },
-      tooltip: {
-        enable: true,
-      },
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
diff --git a/s2-site/examples/interaction/basic/demo/brush-selection.ts b/s2-site/examples/interaction/basic/demo/brush-selection.ts
index a8e01977f3..4457e11625 100644
--- a/s2-site/examples/interaction/basic/demo/brush-selection.ts
+++ b/s2-site/examples/interaction/basic/demo/brush-selection.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     // 支持滚动圈选, 试试圈选时鼠标向下
@@ -23,9 +23,6 @@ fetch(
           height: 100,
         },
       },
-      tooltip: {
-        enable: true,
-      },
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
diff --git a/s2-site/examples/interaction/basic/demo/data-cell-click-selection.ts b/s2-site/examples/interaction/basic/demo/data-cell-click-selection.ts
index e61c375d62..aab22d9ed4 100644
--- a/s2-site/examples/interaction/basic/demo/data-cell-click-selection.ts
+++ b/s2-site/examples/interaction/basic/demo/data-cell-click-selection.ts
@@ -17,9 +17,6 @@ fetch(
         // 多选 (按住 Ctrl/Command), 默认开启
         multiSelection: true,
       },
-      tooltip: {
-        enable: true,
-      },
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
diff --git a/s2-site/examples/interaction/basic/demo/data-cell-range-selection.ts b/s2-site/examples/interaction/basic/demo/data-cell-range-selection.ts
index 6e55b39bce..ed38d95876 100644
--- a/s2-site/examples/interaction/basic/demo/data-cell-range-selection.ts
+++ b/s2-site/examples/interaction/basic/demo/data-cell-range-selection.ts
@@ -17,9 +17,6 @@ fetch(
         // 区间多选 (按住 Shift), 默认开启
         rangeSelection: true,
       },
-      tooltip: {
-        enable: true,
-      },
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
diff --git a/s2-site/examples/interaction/basic/demo/event.ts b/s2-site/examples/interaction/basic/demo/event.ts
new file mode 100644
index 0000000000..4a866a0f02
--- /dev/null
+++ b/s2-site/examples/interaction/basic/demo/event.ts
@@ -0,0 +1,48 @@
+import { PivotSheet, S2Options, S2Event } from '@antv/s2';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then(async (dataCfg) => {
+    const container = document.getElementById('container');
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      style: {
+        rowCell: {
+          width: 200,
+        },
+        dataCell: {
+          width: 100,
+          height: 100,
+        },
+      },
+      interaction: {
+        enableCopy: true,
+        hoverHighlight: true,
+        brushSelection: true,
+        multiSelection: true,
+        selectedCellHighlight: true,
+        selectedCellsSpotlight: true,
+        selectedCellMove: true,
+        overscrollBehavior: 'none',
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    [
+      S2Event.GLOBAL_SCROLL,
+      S2Event.ROW_CELL_CLICK,
+      S2Event.GLOBAL_SELECTED,
+      S2Event.DATA_CELL_BRUSH_SELECTION,
+    ].forEach((eventName) => {
+      s2.on(eventName, (...args) => {
+        console.log(eventName, ...args);
+      });
+    });
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/interaction/basic/demo/header-cell-click-selection.ts b/s2-site/examples/interaction/basic/demo/header-cell-click-selection.ts
index 3c477e7796..914c709cca 100644
--- a/s2-site/examples/interaction/basic/demo/header-cell-click-selection.ts
+++ b/s2-site/examples/interaction/basic/demo/header-cell-click-selection.ts
@@ -18,9 +18,6 @@ fetch(
         // 多选 (按住 Ctrl/Command), 默认开启
         multiSelection: true,
       },
-      tooltip: {
-        enable: true,
-      },
     };
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
diff --git a/s2-site/examples/interaction/basic/demo/hover-after-scroll.ts b/s2-site/examples/interaction/basic/demo/hover-after-scroll.ts
index 2478449bcd..36875f7543 100644
--- a/s2-site/examples/interaction/basic/demo/hover-after-scroll.ts
+++ b/s2-site/examples/interaction/basic/demo/hover-after-scroll.ts
@@ -4,14 +4,14 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
       width: 600,
       height: 480,
       style: {
-        cellCfg: {
+        dataCell: {
           height: 100,
         },
       },
@@ -21,11 +21,9 @@ fetch(
         // 滚动后自动触发悬停状态
         hoverAfterScroll: true,
       },
-      tooltip: {
-        showTooltip: true,
-      },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/hover.ts b/s2-site/examples/interaction/basic/demo/hover.ts
index 3e0f88fb64..7a3f6931a1 100644
--- a/s2-site/examples/interaction/basic/demo/hover.ts
+++ b/s2-site/examples/interaction/basic/demo/hover.ts
@@ -21,9 +21,6 @@ fetch(
         //   currentCol = true, // 高亮悬停格子所在列
         // },
       },
-      tooltip: {
-        enable: true,
-      },
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
diff --git a/s2-site/examples/interaction/basic/demo/meta.json b/s2-site/examples/interaction/basic/demo/meta.json
index 4c956de8ee..357cbafd2d 100644
--- a/s2-site/examples/interaction/basic/demo/meta.json
+++ b/s2-site/examples/interaction/basic/demo/meta.json
@@ -92,6 +92,15 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6zM5TpfV7qIAAAAAAAAAAAAADmJ7AQ/original",
       "new": true
+    },
+    {
+      "filename": "event.ts",
+      "title": {
+        "zh": "交互事件监听",
+        "en": "Interaction Event Listener"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6zM5TpfV7qIAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/interaction/basic/demo/resize.ts b/s2-site/examples/interaction/basic/demo/resize.ts
index acdf2cf183..d3bf6bb77c 100644
--- a/s2-site/examples/interaction/basic/demo/resize.ts
+++ b/s2-site/examples/interaction/basic/demo/resize.ts
@@ -14,9 +14,6 @@ fetch(
         hoverHighlight: true,
         selectedCellsSpotlight: true,
       },
-      tooltip: {
-        enable: true,
-      },
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
diff --git a/s2-site/examples/interaction/basic/demo/state-theme.ts b/s2-site/examples/interaction/basic/demo/state-theme.ts
index 3d43c15ac0..10baf71000 100644
--- a/s2-site/examples/interaction/basic/demo/state-theme.ts
+++ b/s2-site/examples/interaction/basic/demo/state-theme.ts
@@ -4,7 +4,7 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
@@ -18,19 +18,16 @@ fetch(
         selectedCellMove: true,
         rangeSelection: true,
         brushSelection: {
-          row: true,
-          col: true,
-          data: true,
+          rowCell: true,
+          colCell: true,
+          dataCell: true,
         },
       },
-      tooltip: {
-        showTooltip: true,
-      },
       style: {
-        rowCfg: {
+        rowCell: {
           width: 100,
         },
-        cellCfg: {
+        dataCell: {
           width: 120,
         },
       },
@@ -114,5 +111,5 @@ fetch(
       },
     });
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/react-component/tooltip/API.en.md b/s2-site/examples/react-component/tooltip/API.en.md
new file mode 100644
index 0000000000..ba96a1829f
--- /dev/null
+++ b/s2-site/examples/react-component/tooltip/API.en.md
@@ -0,0 +1,6 @@
+---
+title: API
+order: 0
+---
+
+<embed src="@/docs/api/general/S2Options.en.md"></embed>
diff --git a/s2-site/examples/react-component/tooltip/API.zh.md b/s2-site/examples/react-component/tooltip/API.zh.md
new file mode 100644
index 0000000000..4674d4732c
--- /dev/null
+++ b/s2-site/examples/react-component/tooltip/API.zh.md
@@ -0,0 +1,6 @@
+---
+title: API
+order: 0
+---
+
+<embed src="@/docs/api/general/S2Options.zh.md"></embed>
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
index 77850d5b37..bc440b3a97 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx
@@ -20,7 +20,7 @@ fetch(
         onMounted={(instance) => {
           instance.showTooltip = (tooltipOptions) => {
             const { position, data = {}, options } = tooltipOptions;
-            const name = `${data.name} - 测试`; // 只有单元格中文案被省略才显示
+            const name = `${data.name} - 测试`;
             const infos = '按住 Shift 多选或框选，查看多个数据点';
             const tips = '说明：这是个说明';
             const customSummaries = (data.summaries || []).map((item) => {
@@ -53,6 +53,7 @@ fetch(
                 ],
               },
             };
+
             const customOptions = {
               ...tooltipOptions,
               position: { x: position.x + 1, y: position.y + 1 },
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
index 61c3688174..e57fcf2929 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
@@ -7,6 +7,7 @@ import {
 import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
 import React from 'react';
+
 const MyCustomTooltipContent = () => (
   <div className="tooltip-custom-component">我是自定义 tooltip 内容</div>
 );
diff --git a/s2-site/examples/theme/custom/demo/custom-palette.ts b/s2-site/examples/theme/custom/demo/custom-palette.ts
index 73bfc2105e..76d12c289e 100644
--- a/s2-site/examples/theme/custom/demo/custom-palette.ts
+++ b/s2-site/examples/theme/custom/demo/custom-palette.ts
@@ -1,14 +1,6 @@
-import {
-  PivotSheet,
-  S2DataConfig,
-  S2Options,
-  S2Theme,
-  ThemeCfg,
-} from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options, ThemeCfg } from '@antv/s2';
 
-fetch(
-  'https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json',
-)
+fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
   .then((res) => res.json())
   .then(async (data) => {
     const container = document.getElementById('container');
@@ -76,6 +68,9 @@ fetch(
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.setThemeCfg({ palette: s2Palette });
+    s2.setThemeCfg({
+      palette: s2Palette,
+    });
+
     await s2.render();
   });
diff --git a/s2-site/examples/theme/custom/demo/custom-scrollbar.ts b/s2-site/examples/theme/custom/demo/custom-scrollbar.ts
new file mode 100644
index 0000000000..5f9985378c
--- /dev/null
+++ b/s2-site/examples/theme/custom/demo/custom-scrollbar.ts
@@ -0,0 +1,76 @@
+import { PivotSheet, S2DataConfig, S2Options, ThemeCfg } from '@antv/s2';
+
+fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
+  .then((res) => res.json())
+  .then(async (data) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
+      fields: {
+        rows: ['province', 'city'],
+        columns: ['type'],
+        values: ['price', 'cost'],
+      },
+      meta: [
+        {
+          field: 'province',
+          name: '省份',
+        },
+        {
+          field: 'city',
+          name: '城市',
+        },
+        {
+          field: 'type',
+          name: '商品类别',
+        },
+        {
+          field: 'price',
+          name: '价格',
+        },
+        {
+          field: 'cost',
+          name: '成本',
+        },
+      ],
+      data,
+    };
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      style: {
+        rowCell: {
+          width: 200,
+        },
+        dataCell: {
+          width: 100,
+          height: 200,
+        },
+      },
+    };
+
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    s2.setTheme({
+      scrollBar: {
+        /** 滚动条轨道颜色 */
+        trackColor: 'rgba(0,0,0,.1)',
+        /** 滚动条 hover 态颜色 */
+        thumbHoverColor: 'rgba(0,0,0,.4)',
+        /** 滚动条颜色 */
+        thumbColor: 'rgba(0,0,0,.1)',
+        /** 滚动条水平最小尺寸 */
+        thumbHorizontalMinSize: 10,
+        /** 滚动条垂直最小尺寸 */
+        thumbVerticalMinSize: 10,
+        /** 滚动条尺寸 */
+        size: 10,
+        /** 滚动条 hover 态尺寸 */
+        hoverSize: 14,
+        /** 指定如何绘制每一条线段末端，可选: 'butt' | 'round' | 'square'; */
+        lineCap: 'butt',
+      },
+    });
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/theme/custom/demo/meta.json b/s2-site/examples/theme/custom/demo/meta.json
index 17c4413632..7f1fc05e11 100644
--- a/s2-site/examples/theme/custom/demo/meta.json
+++ b/s2-site/examples/theme/custom/demo/meta.json
@@ -43,6 +43,15 @@
         "en": "Transparent background"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*4adQSLv95OkAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "custom-scrollbar.ts",
+      "title": {
+        "zh": "自定义滚动条",
+        "en": "Scrollbar theme"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NlFrSJNmH0AAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/package.json b/s2-site/package.json
index 987a9b287d..4f20a2f783 100644
--- a/s2-site/package.json
+++ b/s2-site/package.json
@@ -28,17 +28,17 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@antv/dumi-theme-antv": "^0.4.6",
-    "@antv/g": "^5.18.23",
-    "@antv/g-canvas": "^1.11.25",
-    "@antv/g-plugin-a11y": "^0.6.20",
-    "@antv/g-plugin-rough-canvas-renderer": "^1.9.25",
-    "@antv/g2": "^5.1.13",
+    "@antv/dumi-theme-antv": "^0.5.0",
+    "@antv/g": "^5.18.24",
+    "@antv/g-canvas": "^1.11.26",
+    "@antv/g-plugin-a11y": "^0.6.21",
+    "@antv/g-plugin-rough-canvas-renderer": "^1.9.26",
+    "@antv/g2": "^5.1.15",
     "@antv/s2": "next",
     "@antv/s2-react": "next",
-    "antd": "^5.12.7",
+    "antd": "^5.13.2",
     "copy-to-clipboard": "^3.3.3",
-    "dumi": "^2.2.16",
+    "dumi": "^2.2.17",
     "gh-pages": "^6.1.1",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

From b76fdbbab0ac5d2f29153118e2f075de4e5b4758 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 26 Jan 2024 11:22:31 +0800
Subject: [PATCH 30/64] =?UTF-8?q?docs:=20=E6=96=B0=E5=A2=9E=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=95=B0=E6=8D=AE=E9=9B=86=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-set/custom-tree-pivot-data-set.ts    |   4 +-
 .../s2-core/src/data-set/table-data-set.ts    |   4 +-
 s2-site/docs/api/general/S2Event.zh.md        |   2 +-
 s2-site/docs/common/contact-us.zh.md          |   2 +-
 s2-site/docs/manual/advanced/adaptive.zh.md   |   2 +-
 .../docs/manual/advanced/custom/hook.zh.md    |   2 +-
 .../docs/manual/advanced/get-cell-data.zh.md  |  54 +++++++
 .../custom/custom-cell/demo/mini-chart.ts     |   8 +-
 .../examples/custom/custom-dataset/API.en.md  |   6 +
 .../examples/custom/custom-dataset/API.zh.md  |   6 +
 .../demo/custom-strategy-sheet-dataset.ts     | 135 ++++++++++++++++++
 .../custom/custom-dataset/demo/meta.json      |  17 +++
 .../custom/custom-dataset/index.en.md         |   4 +
 .../custom/custom-dataset/index.zh.md         |   4 +
 .../examples/custom/custom-order/index.zh.md  |   2 +-
 15 files changed, 237 insertions(+), 15 deletions(-)
 create mode 100644 s2-site/examples/custom/custom-dataset/API.en.md
 create mode 100644 s2-site/examples/custom/custom-dataset/API.zh.md
 create mode 100644 s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts
 create mode 100644 s2-site/examples/custom/custom-dataset/demo/meta.json
 create mode 100644 s2-site/examples/custom/custom-dataset/index.en.md
 create mode 100644 s2-site/examples/custom/custom-dataset/index.zh.md

diff --git a/packages/s2-core/src/data-set/custom-tree-pivot-data-set.ts b/packages/s2-core/src/data-set/custom-tree-pivot-data-set.ts
index 4fea6af241..229989b430 100644
--- a/packages/s2-core/src/data-set/custom-tree-pivot-data-set.ts
+++ b/packages/s2-core/src/data-set/custom-tree-pivot-data-set.ts
@@ -8,11 +8,11 @@ import {
   transformDimensionsValues,
 } from '../utils/dataset/pivot-data-set';
 import { CellData } from './cell-data';
-import type { GetCellMultiDataParams } from './interface';
+import type { GetCellDataParams } from './interface';
 import { PivotDataSet } from './pivot-data-set';
 
 export class CustomTreePivotDataSet extends PivotDataSet {
-  getCellData(params: GetCellMultiDataParams) {
+  getCellData(params: GetCellDataParams) {
     const { query = {} } = params || {};
     const { columns, rows } = this.fields;
     const rowDimensionValues = transformDimensionsValues(
diff --git a/packages/s2-core/src/data-set/table-data-set.ts b/packages/s2-core/src/data-set/table-data-set.ts
index 72e7d233e4..e8ddf7a6ba 100644
--- a/packages/s2-core/src/data-set/table-data-set.ts
+++ b/packages/s2-core/src/data-set/table-data-set.ts
@@ -8,7 +8,7 @@ import type {
 } from '../common/interface';
 import { isAscSort, isDescSort } from '../utils/sort-action';
 import { BaseDataSet } from './base-data-set';
-import type { GetCellMultiDataParams } from './interface';
+import type { GetCellDataParams, GetCellMultiDataParams } from './interface';
 
 export class TableDataSet extends BaseDataSet {
   public processDataCfg(dataCfg: S2DataConfig): S2DataConfig {
@@ -157,7 +157,7 @@ export class TableDataSet extends BaseDataSet {
     return [];
   }
 
-  public getCellData({ query = {} }: GetCellMultiDataParams = {}):
+  public getCellData({ query = {} }: GetCellDataParams = {}):
     | Data
     | SimpleData
     | undefined {
diff --git a/s2-site/docs/api/general/S2Event.zh.md b/s2-site/docs/api/general/S2Event.zh.md
index 498e405b96..02e794ffb4 100644
--- a/s2-site/docs/api/general/S2Event.zh.md
+++ b/s2-site/docs/api/general/S2Event.zh.md
@@ -5,7 +5,7 @@ redirect_from:
   - /zh/docs/api
 ---
 
-表格事件列表，可以根据实际需要，监听所需事件，实现自定义业务。[查看全部事件定义](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/constant/events/basic.ts), 查看 [文档](/manual/advanced/interaction/basic) 和 [示例](/examples/interaction/basic/#event)
+表格事件列表，可以根据实际需要，监听所需事件，实现自定义业务。[查看全部事件定义](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/constant/events/basic.ts), [文档](/manual/advanced/interaction/basic) 和 [示例](/examples/interaction/basic/#event)
 
 :::info{title="提示"}
 如果使用的是 `s2-react` 或 `s2-vue` 表组件，则已对事件进行封装，无需额外监听，使用其回调函数即可。 [详情](/docs/api/components/sheet-component)
diff --git a/s2-site/docs/common/contact-us.zh.md b/s2-site/docs/common/contact-us.zh.md
index ffa8f7f142..04d008f5e6 100644
--- a/s2-site/docs/common/contact-us.zh.md
+++ b/s2-site/docs/common/contact-us.zh.md
@@ -3,7 +3,7 @@ title: 联系我们
 order: 5
 ---
 
-:::info{title="注意"}
+:::warning{title="注意"}
 
 群聊仅供交流，不提供任何答疑，有任何问题请 [提交 Issue](https://github.com/antvis/S2/issues/new/choose).
 
diff --git a/s2-site/docs/manual/advanced/adaptive.zh.md b/s2-site/docs/manual/advanced/adaptive.zh.md
index 544a85a68e..79c640906b 100644
--- a/s2-site/docs/manual/advanced/adaptive.zh.md
+++ b/s2-site/docs/manual/advanced/adaptive.zh.md
@@ -3,7 +3,7 @@ title: 表格自适应
 order: 9
 ---
 
-<Badge>@antv/s2-react</Badge> <Badge type="success">@antv/s2-vue</Badge>
+<Badge>@antv/s2</Badge> <Badge>@antv/s2-react</Badge> <Badge type="success">@antv/s2-vue</Badge>
 
 S2 默认根据配置的 `width` 和 `height` 进行渲染：
 
diff --git a/s2-site/docs/manual/advanced/custom/hook.zh.md b/s2-site/docs/manual/advanced/custom/hook.zh.md
index b2dba22b95..f98db28798 100644
--- a/s2-site/docs/manual/advanced/custom/hook.zh.md
+++ b/s2-site/docs/manual/advanced/custom/hook.zh.md
@@ -76,7 +76,7 @@ S2 默认提供丰富的功能配置，除此之外，也提供丰富的 [`自
 
 ## dataset
 
-自定义数据集，比如数据的展示方式，取数逻辑等。[查看示例](#TODO)
+自定义数据集，比如数据的展示方式，取数逻辑等。[查看示例](/examples/custom/custom-dataset/#custom-strategy-sheet-dataset)
 
 ## style
 
diff --git a/s2-site/docs/manual/advanced/get-cell-data.zh.md b/s2-site/docs/manual/advanced/get-cell-data.zh.md
index 791cf94833..05b5a74fc6 100644
--- a/s2-site/docs/manual/advanced/get-cell-data.zh.md
+++ b/s2-site/docs/manual/advanced/get-cell-data.zh.md
@@ -182,6 +182,60 @@ s2.interaction.getActiveCells() // 获取所有激活的单元格 （不含不
 s2.interaction.isSelectedState() // 是否是选中状态
 ```
 
+### 获取单个单元格数据
+
+[查看示例](/examples/analysis/get-data/#get-cell-data)
+
+```ts | pure
+import { EXTRA_FIELD } from '@antv/s2'
+
+// 获取明细单元格
+s2.dataSet.getCellData({
+  query: {
+    province: '浙江',
+    city: '杭州',
+    type: '笔',
+    [EXTRA_FIELD]: 'price',
+  },
+});
+
+// 获取小计数据
+s2.dataSet.getCellData({
+  query: {
+    province: '浙江',
+    type: '笔',
+    [EXTRA_FIELD]: 'price',
+  },
+  isTotals: true,
+});
+```
+
+### 获取多个单元格数据
+
+[查看示例](/examples/analysis/get-data/#get-multi-data)
+
+```ts | pure
+import { EXTRA_FIELD, QueryDataType } from '@antv/s2'
+
+// 获取所有浙江下的数据
+s2.dataSet.getCellMultiData({
+  query: {
+    province: '浙江',
+    [EXTRA_FIELD]: 'price',
+  },
+  queryType: QueryDataType.All,
+});
+
+// 获取所有浙江下的明细数据
+s2.dataSet.getCellMultiData({
+  query: {
+    province: '浙江',
+    [EXTRA_FIELD]: 'price',
+  },
+  queryType: QueryDataType.DetailOnly,
+});
+```
+
 ### 获取行/列数据
 
 表格初始化时，会将用户声明的数据配置 (s2DataConfig) 转换成内部所需要的数据集 (dataSet), 具体请查看 [数据流处理](/docs/manual/advanced/data-process/pivot)
diff --git a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
index 7bd79f25f4..bfddd7efe8 100644
--- a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
+++ b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
@@ -15,12 +15,8 @@ import { isArray, isObject } from 'lodash';
 class CustomDataCell extends DataCell {
   // 当数值为对象时，完全接管绘制, 使用内置的 `drawObjectText` 根据不同的数据结构 (见下方) 绘制不同的图形
   drawTextShape() {
-    const { fieldValue } = this.getMeta();
-
-    if (isObject(fieldValue) || isArray(fieldValue)) {
-      drawObjectText(this);
-
-      return;
+    if (this.isMultiData()) {
+      return drawObjectText(this);
     }
 
     super.drawTextShape();
diff --git a/s2-site/examples/custom/custom-dataset/API.en.md b/s2-site/examples/custom/custom-dataset/API.en.md
new file mode 100644
index 0000000000..7fbbbb954a
--- /dev/null
+++ b/s2-site/examples/custom/custom-dataset/API.en.md
@@ -0,0 +1,6 @@
+---
+title: API
+order: 1
+---
+
+<embed src="@/docs/api/general/S2Options.en.md"></embed>
diff --git a/s2-site/examples/custom/custom-dataset/API.zh.md b/s2-site/examples/custom/custom-dataset/API.zh.md
new file mode 100644
index 0000000000..16993d8a9d
--- /dev/null
+++ b/s2-site/examples/custom/custom-dataset/API.zh.md
@@ -0,0 +1,6 @@
+---
+title: API
+order: 1
+---
+
+<embed src="@/docs/api/general/S2Options.zh.md"></embed>
diff --git a/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts b/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts
new file mode 100644
index 0000000000..09185e7407
--- /dev/null
+++ b/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts
@@ -0,0 +1,135 @@
+/* eslint-disable no-console */
+/* eslint-disable max-classes-per-file */
+import {
+  CustomTreePivotDataSet,
+  DataCell,
+  EMPTY_EXTRA_FIELD_PLACEHOLDER,
+  EXTRA_COLUMN_FIELD,
+  EXTRA_FIELD,
+  GetCellDataParams,
+  GetCellMultiDataParams,
+  Meta,
+  PivotSheet,
+  RawData,
+  S2DataConfig,
+  S2Options,
+  drawObjectText,
+  i18n,
+} from '@antv/s2';
+import { isEmpty, isObject, keys, size } from 'lodash';
+
+class CustomDataSet extends CustomTreePivotDataSet {
+  // 自定义单个数据查询逻辑
+  getCellData(params: GetCellDataParams) {
+    console.log('getCellData:', params);
+
+    if (params?.rowNode?.rowIndex <= 2) {
+      return null;
+    }
+
+    return super.getCellData(params);
+  }
+
+  getExistValuesByDataItem(data: RawData) {
+    const result = keys(data).filter((key) => isObject(data[key]));
+
+    if (isEmpty(result)) {
+      result.push(EMPTY_EXTRA_FIELD_PLACEHOLDER);
+    }
+
+    return result;
+  }
+
+  // 自定义多个数据查询逻辑
+  getCellMultiData(params: GetCellMultiDataParams) {
+    return super.getCellMultiData(params);
+  }
+
+  // 自定义数据配置处理
+  processDataCfg(dataCfg: S2DataConfig): S2DataConfig {
+    const updatedDataCfg = super.processDataCfg(dataCfg);
+    // 多指标数值挂行头，单指标挂列头
+    const valueInCols = size(updatedDataCfg?.fields?.values) <= 1;
+
+    const newMeta: Meta[] = this.processMeta(dataCfg.meta, i18n('指标'));
+
+    return {
+      ...updatedDataCfg,
+      meta: newMeta,
+      fields: {
+        ...updatedDataCfg.fields,
+        rows: [...(dataCfg.fields.rows || []), EXTRA_FIELD],
+        valueInCols,
+      },
+    };
+  }
+}
+
+/**
+ * 自定义 DataCell
+ * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts
+ */
+class CustomDataCell extends DataCell {
+  drawTextShape() {
+    if (this.isMultiData()) {
+      return drawObjectText(this);
+    }
+
+    super.drawTextShape();
+  }
+}
+
+function process(children) {
+  return children.map((item) => {
+    return {
+      ...item,
+      field: item.key,
+      children: process(item.children),
+    };
+  });
+}
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/3c2009ce-8c2a-451d-b29a-619a796c7903.json',
+)
+  .then((res) => res.json())
+  .then(async (dataCfg) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
+      ...dataCfg,
+      fields: {
+        ...dataCfg.fields,
+        rows: process(dataCfg.fields.customTreeItems),
+      },
+      meta: [
+        // 日期列头 格式化
+        {
+          field: 'date',
+          name: '时间',
+          formatter: (value) => `${value}年`,
+        },
+        // 同环比名称(虚拟列头) 格式化
+        {
+          field: EXTRA_COLUMN_FIELD,
+          formatter: (value, data, meta) => {
+            console.log(value, data, meta);
+
+            return JSON.parse(value).join(' | ');
+          },
+        },
+      ],
+    };
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      hierarchyType: 'tree',
+      dataSet: (spreadsheet) => new CustomDataSet(spreadsheet),
+      dataCell: (viewMeta) =>
+        new CustomDataCell(viewMeta, viewMeta.spreadsheet),
+    };
+
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/custom/custom-dataset/demo/meta.json b/s2-site/examples/custom/custom-dataset/demo/meta.json
new file mode 100644
index 0000000000..79fd05578a
--- /dev/null
+++ b/s2-site/examples/custom/custom-dataset/demo/meta.json
@@ -0,0 +1,17 @@
+{
+  "title": {
+    "zh": "自定义数据集",
+    "en": "Custom Dataset"
+  },
+  "demos": [
+    {
+      "filename": "custom-strategy-sheet-dataset.ts",
+      "title": {
+        "zh": "自定义趋势分析表数据集",
+        "en": "Custom StrategySheet Dataset"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JS6VQKsFBSAAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
+    }
+  ]
+}
diff --git a/s2-site/examples/custom/custom-dataset/index.en.md b/s2-site/examples/custom/custom-dataset/index.en.md
new file mode 100644
index 0000000000..d36ea1dba5
--- /dev/null
+++ b/s2-site/examples/custom/custom-dataset/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Custom Dataset
+order: 10
+---
diff --git a/s2-site/examples/custom/custom-dataset/index.zh.md b/s2-site/examples/custom/custom-dataset/index.zh.md
new file mode 100644
index 0000000000..4388a66ab3
--- /dev/null
+++ b/s2-site/examples/custom/custom-dataset/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 自定义数据集
+order: 10
+---
diff --git a/s2-site/examples/custom/custom-order/index.zh.md b/s2-site/examples/custom/custom-order/index.zh.md
index 34a2b11b66..b91e823c3e 100644
--- a/s2-site/examples/custom/custom-order/index.zh.md
+++ b/s2-site/examples/custom/custom-order/index.zh.md
@@ -1,4 +1,4 @@
 ---
 title: 自定义排序功能
-order: 9 
+order: 9
 ---

From fd54740fec8a7a02c194545f5522b9e922fdc761 Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Fri, 26 Jan 2024 15:58:10 +0800
Subject: [PATCH 31/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=20icon=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/api/general/S2Options.zh.md      |  6 ++--
 s2-site/docs/common/conditions.zh.md          |  2 +-
 .../common/custom/headerActionIcons.zh.md     |  8 ++---
 s2-site/docs/common/header-action-icon.zh.md  | 34 +++++++++----------
 s2-site/docs/manual/basic/conditions.zh.md    |  2 ++
 5 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/s2-site/docs/api/general/S2Options.zh.md b/s2-site/docs/api/general/S2Options.zh.md
index 5d40ab9476..c6f946e320 100644
--- a/s2-site/docs/api/general/S2Options.zh.md
+++ b/s2-site/docs/api/general/S2Options.zh.md
@@ -29,11 +29,11 @@ const s2Options = {
 | showSeriesNumber | `boolean` |  |  `false` | 是否显示行序号 |
 | seriesNumberText | `string` |  |  `序号` | 自定义行头序号列标题 |
 | showDefaultHeaderActionIcon |`boolean` |  | `true` | 是否展示默认行列头操作图标 |
-| headerActionIcons | [HeaderActionIcon[]](#headeractionicon) |  |   `false` | 自定义行列头操作图标（需要将 `showDefaultHeaderActionIcon` 置为 `false`） |
-| customSVGIcons | [CustomSVGIcon[]](#customsvgicon) |  |   `false` | 自定义 svg 图标 |
+| headerActionIcons | [HeaderActionIcon](#headeractionicon)[] |  |   `false` | 自定义行列头操作图标（需要将 `showDefaultHeaderActionIcon` 置为 `false`） |
+| customSVGIcons | [CustomSVGIcon](#customsvgicon)[] |  |   `false` | 自定义 svg 图标 |
 | style | [Style](#style) |  |    | 单元格样式设置，比如布局类型，宽高，边距，是否隐藏数值列头等 |
 | hdAdapter | `boolean` |  |   `true` | 是否开启高清屏适配，解决多屏切换，高清视网膜屏字体渲染模糊的问题。[查看更多](/manual/advanced/hd-adapter) |
-| mergedCellsInfo | [MergedCellInfo[][]](#mergedcellinfo) |    |  | 合并单元格信息 |
+| mergedCellsInfo | [MergedCellInfo](#mergedcellinfo)[][] |    |  | 合并单元格信息 |
 | placeholder |  `string \| (meta: Record<string, any>) => string` |    |  | 自定义单元格占位符 |
 | cornerText | string |    |  | 自定义角头文本 （仅在树状模式有效） |
 | cornerExtraFieldText | string |    | `数值` | 自定义角头虚拟数值字段文本（"数值挂行头"时有效） |
diff --git a/s2-site/docs/common/conditions.zh.md b/s2-site/docs/common/conditions.zh.md
index 6a1cbdd253..bc177f9aa1 100644
--- a/s2-site/docs/common/conditions.zh.md
+++ b/s2-site/docs/common/conditions.zh.md
@@ -79,7 +79,7 @@ const options = {
 
 | 参数     | 说明                  | 类型            | 默认值  | 必选 |
 | -------- | --------------------- | --------------- | ------- | ---- |
-| position | icon 相较于文字的位置 | `left \| right` | `right` |      |
+| position | icon 相较于文字的位置 | `left` \| `right` | `right` |      |
 
 **icon condition 用法示例：**
 
diff --git a/s2-site/docs/common/custom/headerActionIcons.zh.md b/s2-site/docs/common/custom/headerActionIcons.zh.md
index 60222ba2a4..2cb56341f7 100644
--- a/s2-site/docs/common/custom/headerActionIcons.zh.md
+++ b/s2-site/docs/common/custom/headerActionIcons.zh.md
@@ -9,9 +9,9 @@ order: 6
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 | 版本 |
 | --- | --- | ---  | --- | --- | --- |
-| icons | string[] \| `{name:string,position:'right' \| 'left'}[]` | ✓ |    | 已经注册的 icon 名称，或用户通过 customSVGIcons 注册的 icon 名称，如果是字符串形式，则 position 默认为 `'right'`，也可以使用对象的形式，显示指定 icon 的位置 |  |
-| belongsCell | string[] | ✓ | |   需要增加操作图标的单元格名称 cornerCell、colCell、rowCell | |
-| defaultHide | boolean \| (mete: Node, iconName: string)=> boolean  |  |  |   是否默认隐藏，如果为 true 则为 hover 后再显示；false 则始终显示  | `1.26.0` 支持配置为一个函数 |
-| displayCondition | (mete: Node, iconName: string)=> boolean |  |  | 展示的过滤条件，可以通过该回调函数用户自定义行列头哪些层级或单元格需要展示 icon。 所有返回值为 true 的 icon 会展示给用户。 | `1.26.0` 回传 `iconName` 并按单个 icon 控制显隐 |
+| icons | `string[]` \| `{name:string,position:'right' \| 'left'}[]` | ✓ |    | 已经注册的 icon 名称，或用户通过 customSVGIcons 注册的 icon 名称，如果是字符串形式，则 position 默认为 `'right'`，也可以使用对象的形式，显示指定 icon 的位置 |  |
+| belongsCell | `string[]` | ✓ | |   需要增加操作图标的单元格名称 cornerCell、colCell、rowCell | |
+| defaultHide | `boolean` \| `(mete: Node, iconName: string)=> boolean`  |  |  |   是否默认隐藏，如果为 true 则为 hover 后再显示；false 则始终显示  | `1.26.0` 支持配置为一个函数 |
+| `displayCondition` |`(mete: Node, iconName: string)=> boolean` |  |  | 展示的过滤条件，可以通过该回调函数用户自定义行列头哪些层级或单元格需要展示 icon。 所有返回值为 true 的 icon 会展示给用户。 | `1.26.0` 回传 `iconName` 并按单个 icon 控制显隐 |
 | onClick    | `(headerIconClickParams: HeaderIconClickParams) => void;` |   ✓      |     |    | `1.26.0` |
 | onHover   | `(headerIconHoverParams: HeaderIconHoverParams) => void;` |        |     |    | `1.26.0` |
diff --git a/s2-site/docs/common/header-action-icon.zh.md b/s2-site/docs/common/header-action-icon.zh.md
index 8894107073..4f2264588d 100644
--- a/s2-site/docs/common/header-action-icon.zh.md
+++ b/s2-site/docs/common/header-action-icon.zh.md
@@ -4,14 +4,14 @@
 
 功能描述：为表格行列头角头注册自定义操作 icon。
 
-| 参数             | 说明        | 类型     | 默认值 | 必选 | 取值        |     版本     |
-| ---------------- | ----------- | ----------- | ------ | ---- | ----------- | --- |
-| icons | string[] \| `{name:string,position:'right'\|'left'}[]` | ✓ |    | 已经注册的 icon 名称，或用户通过 customSVGIcons 注册的 icon 名称，如果是字符串形式，则 position 默认为 `'right'`，也可以使用对象的形式，显示指定 icon 的位置 | `2.0.0` |
-| belongsCell      | 需要增加操作图标的单元格名称   | `string[]`     |        | ✓    | 角头：'cornerCell';<br>列头：'colCell';<br>行头：'rowCell' | |
-| defaultHide      | 控制是否 hover 才展示 icon  | `boolean | (meta: Node, iconName: string) => boolean`          | false  |      | true | `1.26.0` 支持配置为一个函数 |
-| displayCondition | 展示的过滤条件，可以通过该回调函数用户自定义行列头哪些层级或单元格需要展示 icon。 所有返回值为 true 的 icon 会展示给用户。 | `(mete: Node, iconName: string) => boolean;`         |        |      |  | `1.26.0` 回传 `iconName` 并按单个 icon 控制显隐 |
-| onClick           | icon 点击之后的执行函数   | `(headerIconClickParams: HeaderIconClickParams) => void;` |        |     |    | `1.26.0` |
-| onHover           | icon hover 开始及结束之后的执行函数   | `(headerIconHoverParams: HeaderIconHoverParams) => void;` |        |     |    | `1.26.0` |
+| 参数             | 说明                                                                                                                                                       | 类型                                                      | 默认值 | 必选 | 取值                                                       | 版本                                            |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------ | ---- | ---------------------------------------------------------- | ----------------------------------------------- |
+| icons            | 已经注册的 icon 名称，或用户通过 customSVGIcons 注册的 icon 名称，如果是字符串形式，则 position 默认为 'right'，也可以使用对象的形式，显示指定 icon 的位置 | `string[]` \| `{name:string,position:'right'\|'left'}[]`  |        | ✓    |                                                            | `2.0.0`                                         |
+| belongsCell      | 需要增加操作图标的单元格名称                                                                                                                               | `string[]`                                                |        | ✓    | 角头：'cornerCell';<br>列头：'colCell';<br>行头：'rowCell' |                                                 |
+| defaultHide      | 控制是否 hover 才展示 icon                                                                                                                                 | `boolean` \| `(meta: Node, iconName: string) => boolean`  | false  |      | true                                                       | `1.26.0` 支持配置为一个函数                     |
+| displayCondition | 展示的过滤条件，可以通过该回调函数用户自定义行列头哪些层级或单元格需要展示 icon。 所有返回值为 true 的 icon 会展示给用户。                                 | `(mete: Node, iconName: string) => boolean;`              |        |      |                                                            | `1.26.0` 回传 `iconName` 并按单个 icon 控制显隐 |
+| onClick          | icon 点击之后的执行函数                                                                                                                                    | `(headerIconClickParams: HeaderIconClickParams) => void;` |        |      |                                                            | `1.26.0`                                        |
+| onHover          | icon hover 开始及结束之后的执行函数                                                                                                                        | `(headerIconHoverParams: HeaderIconHoverParams) => void;` |        |      |                                                            | `1.26.0`                                        |
 
 ​
 
@@ -21,11 +21,11 @@
 
 功能描述： 点击自定义操作 icon 后透视表返回的当前 icon 相关的信息
 
-| 参数 | 功能描述 | 类型 | 默认值 | 必选 |
-| --- | --- | --- | --- | --- |
-| iconName | 当前 icon 名称 | string |  | ✓ |
-| meta |当前 cell 的 meta 信息| [Node](/api/basic-class/node) | | ✓ |
-| event |当前点击事件信息| Event | false | ✓ |
+| 参数     | 功能描述               | 类型                          | 默认值 | 必选 |
+| -------- | ---------------------- | ----------------------------- | ------ | ---- |
+| iconName | 当前 icon 名称         | `string`                      |        | ✓    |
+| meta     | 当前 cell 的 meta 信息 | [Node](/api/basic-class/node) |        | ✓    |
+| event    | 当前点击事件信息       | `Event`                       | false  | ✓    |
 
 ## CustomSVGIcon
 
@@ -33,7 +33,7 @@
 
 功能描述：用于用户注册自己的 icon 图标， 目前只支持 svg 格式
 
-| 参数 | 说明 | 类型 | 默认值 | 必选 |
-| --- | --- | --- | --- | --- |
-| name | icon 名称 | string | - | ✓ |
-| svg | 目前支持三种格式的 svg 字符串：<br> 1、base 64<br>2、svg 本地文件<br>3、线上图片地址 | string | - | ✓ |
+| 参数 | 说明                                                                                 | 类型     | 默认值 | 必选 |
+| ---- | ------------------------------------------------------------------------------------ | -------- | ------ | ---- |
+| name | icon 名称                                                                            | `string` | -      | ✓    |
+| svg  | 目前支持三种格式的 svg 字符串：<br> 1、base 64<br>2、svg 本地文件<br>3、线上图片地址 | `string` | -      | ✓    |
diff --git a/s2-site/docs/manual/basic/conditions.zh.md b/s2-site/docs/manual/basic/conditions.zh.md
index ff0de57905..ddac813721 100644
--- a/s2-site/docs/manual/basic/conditions.zh.md
+++ b/s2-site/docs/manual/basic/conditions.zh.md
@@ -126,6 +126,8 @@ export type ConditionMapping<T = unknown> = (
 
 <Playground path="analysis/conditions/demo/icon-with-action.ts" rid='icon-with-action' height="200"></playground>
 
+> 自定义 Icon 详情，可查看 [自定义 Icon](/docs/manual/advanced/custom/custom-icon) 章节
+
 ### 自定义柱状图范围
 
 通过显示指定 `interval` 字段标记中的 `mapping` 函数返回值  `isCompare` 属性值为 `true`，并指定 `maxValue` 和 `minValue` 的值，可以自定义柱状图的区间范围。

From d2bc52bdea67308b2581ea1c1b3cd33aa96db529 Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Fri, 26 Jan 2024 17:00:36 +0800
Subject: [PATCH 32/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E6=96=B9=E5=BC=8F=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manual/advanced/custom/cell-align.zh.md   | 101 +++++++++---------
 1 file changed, 52 insertions(+), 49 deletions(-)

diff --git a/s2-site/docs/manual/advanced/custom/cell-align.zh.md b/s2-site/docs/manual/advanced/custom/cell-align.zh.md
index 6fbd17ea6f..f21c1d5de2 100644
--- a/s2-site/docs/manual/advanced/custom/cell-align.zh.md
+++ b/s2-site/docs/manual/advanced/custom/cell-align.zh.md
@@ -1,25 +1,23 @@
 ---
 title: 自定义单元格对齐方式
 order: 4
+tag: Updated
+
 ---
 
 > **在阅读本节内容前，请确保你已经阅读 [主题配置](/docs/manual/basic/theme) 文档**
 
-为方便用户查看数据，S2 交叉表会在滑动过程中，保证行头和列头的最大可见性
+为方便用户查看数据，S2 交叉表会在滑动过程中，保证行头和列头的最大可见性。因此，S2 在行头、列头对齐方式所对应的的范围是当前格子的可视区域，而角头，数据单元格所对应的范围是当前格子的实际尺寸区域。
 
 ![img](https://gw.alipayobjects.com/zos/antfincdn/avyf3tcnW/2022-02-23%25252016.38.05.gif)
 
-因此，S2 对单元格的对齐方式有一定限制。下面分别介绍每个类型单元格可以自定义的对齐行为。
-
 ## 角头对齐方式
 
-* 行头单元格（红色部分）对齐方式受 [bolderText](/docs/api/general/S2Theme#defaultcelltheme) 控制
-* 列头单元格（蓝色部分）对齐方式受 [text](/docs/api/general/S2Theme#defaultcelltheme) 控制
+* 行头单元格（红色部分）对齐方式受 [text](/docs/api/general/S2Theme#defaultcelltheme) 控制
+* 列头单元格（蓝色部分）对齐方式受 [bolderText](/docs/api/general/S2Theme#defaultcelltheme) 控制
 
 ![img](https://gw.alipayobjects.com/zos/antfincdn/6wPCHImDZ/b36ca38e-aa8e-4ef6-a903-b9d605204de0.png)
 
-角头的 `textBaseline` 被内部规定为 `middle`，因此只能自定义 `textAlign`，下面是三种对齐方式的展示形态：
-
 <table style="width: 100%; outline: none; border-collapse: collapse;">
   <colgroup>
     <col width="20%"/>
@@ -30,11 +28,13 @@ order: 4
       <td style="text-align: center;">
         <pre class="language-js">
 cornerCell: {
-  text: {
+  bolderText: {
     textAlign: 'left',
+    textBaseline: 'middle',
   },
-  bolderText: {
+  text: {
     textAlign: 'left',
+    textBaseline: 'middle',
   }
 }
         </pre>
@@ -47,11 +47,13 @@ cornerCell: {
       <td style="text-align: center;">
          <pre class="language-js">
 cornerCell: {
-  text: {
+  bolderText: {
     textAlign: 'center',
+    textBaseline: 'middle',
   },
-  bolderText: {
+  text: {
     textAlign: 'center',
+    textBaseline: 'middle',
   }
 }
         </pre>
@@ -64,11 +66,13 @@ cornerCell: {
       <td style="text-align: center;">
                <pre class="language-js">
 cornerCell: {
-  text: {
+  bolderText: {
     textAlign: 'right',
+    textBaseline: 'middle',
   },
-  bolderText: {
+  text: {
     textAlign: 'right',
+    textBaseline: 'middle',
   }
 }
         </pre>
@@ -80,15 +84,16 @@ cornerCell: {
   </tbody>
 </table>
 
+> `textBaseline` 也有三种模式：`top`，`middle`，`bottom`。效果不再赘述。
+
 ## 行头对齐方式
 
 * 非叶子节点和小计总计单元格（红色部分）对齐方式受 [bolderText](/docs/api/general/S2Theme#defaultcelltheme) 控制
 * 叶子节点单元格（蓝色部分）对齐方式受 [text](/docs/api/general/S2Theme#defaultcelltheme) 控制
-* 序号单元格可单独控制，默认和行头对齐，对齐方式受 [seriesText](/docs/api/general/S2Theme#defaultcelltheme) 控制
+* 序号单元格（黄色部分）可单独控制，默认和行头对齐，对齐方式受 [seriesText](/docs/api/general/S2Theme#defaultcelltheme) 控制
+* 数值单元格（当数值置于行头时）可单独控制，默认和行头对齐，对齐方式受 [measureText](/docs/api/general/S2Theme#defaultcelltheme) 控制
 
-![img](https://gw.alipayobjects.com/zos/antfincdn/GPEd6w4pj/f2bb3ba9-e4a4-4304-a7b6-a1b9e59e768a.png)
-
-由于滑动居中的特性，行头的 `textBaseline` 被内部规定为 `top`，因此只能自定义 `textAlign`，下面是三种对齐方式的展示形态：
+![img](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JgZxT7sNnTgAAAAAAAAAAAAADmJ7AQ/original)
 
 <table style="width: 100%; outline: none; border-collapse: collapse;">
   <colgroup>
@@ -100,10 +105,10 @@ cornerCell: {
       <td style="text-align: center;">
         <pre class="language-js">
 rowCell: {
-  text: {
+  bolderText: {
     textAlign: 'left',
   },
-  bolderText: {
+  text: {
     textAlign: 'left',
   }
 }
@@ -117,10 +122,10 @@ rowCell: {
       <td style="text-align: center;">
          <pre class="language-js">
 rowCell: {
-  text: {
+  bolderText: {
     textAlign: 'center',
   },
-  bolderText: {
+  text: {
     textAlign: 'center',
   }
 }
@@ -134,10 +139,10 @@ rowCell: {
       <td style="text-align: center;">
                <pre class="language-js">
 rowCell: {
-  text: {
+  bolderText: {
     textAlign: 'right',
   },
-  bolderText: {
+  text: {
     textAlign: 'right',
   }
 }
@@ -152,14 +157,14 @@ rowCell: {
 
 ## 列头对齐方式
 
-为保证滑动下最大可见的特性，列头非叶子节点单元格的 `textBaseline` 被内部规定为 `middle`，`textAlign` 不受限制可按需要自定义。
+* 其他非叶子维度单元格（红色部分）对齐方式受 [bolderText](/docs/api/general/S2Theme#defaultcelltheme) 控制 （默认和数据单元格对齐）
+* 数值单元格（蓝色部分，当数值置于列头时）对齐方式受 [measureText](/docs/api/general/S2Theme#defaultcelltheme) 控制
+* 叶子维度单元格（黄色部分，当数值置于行头时，或者在列头但隐藏数值列时的最后一个维度）对齐方式受 [text](/docs/api/general/S2Theme#defaultcelltheme) 控制
 
-* 指标单元格（红色部分）对齐方式受 [bolderText](/docs/api/general/S2Theme#defaultcelltheme) 控制
-* 其他维度单元格（蓝色部分）对齐方式受 [measureText](/docs/api/general/S2Theme#defaultcelltheme) 控制 （默认和数据单元格对齐）
+> 列头的滚动对齐只针对于非叶子维度节点，叶子维度节点对齐对应的范围是当前格子的实际尺寸区域。
 
-<image alt="col cell align desc" src="https://gw.alipayobjects.com/zos/antfincdn/Jr7Gv9LQ9/1969f010-2bae-4b38-b06f-2935b2c69d1d.png" width="400" />
-
-列头单元格的三种对齐方式效果如下：
+<image alt="col cell align desc" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HRU7R4m6SMQAAAAAAAAAAAAADmJ7AQ/original" width="600" />
+<image alt="col cell align desc" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*FX28Q524QD0AAAAAAAAAAAAADmJ7AQ/original" width="658" />
 
 <table style="width: 100%; outline: none; border-collapse: collapse;">
   <colgroup>
@@ -171,44 +176,44 @@ rowCell: {
       <td style="text-align: center;">
         <pre class="language-js">
 colCell: {
-  measureText: {
+  bolderText: {
     textAlign: 'left',
   },
-  bolderText: {
+  measureText: {
     textAlign: 'left',
   }
 }
         </pre>
       </td>
       <td>
-        <img height="180" alt="left" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/nioLivnuF/CleanShot%2525202022-03-03%252520at%25252017.53.49.gif">
+        <img height="180" alt="left" style="max-height: unset; clip-path: inset(5px 0px 0px 0px);" src="https://gw.alipayobjects.com/zos/antfincdn/nioLivnuF/CleanShot%2525202022-03-03%252520at%25252017.53.49.gif">
       </td>
     </tr>
     <tr>
       <td style="text-align: center;">
          <pre class="language-js">
 colCell: {
-  measureText: {
+  bolderText: {
     textAlign: 'center',
   },
-  bolderText: {
+  measureText: {
     textAlign: 'center',
-  }
+  },
 }
         </pre>
       </td>
       <td>
-        <img height="180" alt="center" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/kn9Y4FGAb/CleanShot%2525202022-03-03%252520at%25252018.00.06.gif">
+        <img height="180" alt="center" style="max-height: unset; clip-path: inset(5px 0px 0px 0px);" src="https://gw.alipayobjects.com/zos/antfincdn/kn9Y4FGAb/CleanShot%2525202022-03-03%252520at%25252018.00.06.gif">
       </td>
     </tr>
     <tr>
       <td style="text-align: center;">
                <pre class="language-js">
 colCell: {
-  measureText: {
+  bolderText: {
     textAlign: 'right',
   },
-  bolderText: {
+  measureText: {
     textAlign: 'right',
   }
 }
@@ -228,8 +233,6 @@ colCell: {
 
 ![img](https://gw.alipayobjects.com/zos/antfincdn/WHa%26eKOrP/00951ab0-b25c-4512-a056-541efff7c9dc.png)
 
-数据单元格 `textBaseline` 和 `textAlign` 均无限制，皆可自定义：
-
 <table style="width: 100%; outline: none; border-collapse: collapse;">
   <colgroup>
     <col width="20%"/>
@@ -240,11 +243,11 @@ colCell: {
       <td style="text-align: center;">
         <pre class="language-js">
 dataCell: {
-  text: {
+  bolderText: {
     textAlign: 'left',
     textBaseline: 'top',
   },
-  bolderText: {
+  text: {
     textAlign: 'left',
     textBaseline: 'top',
   }
@@ -252,18 +255,18 @@ dataCell: {
         </pre>
       </td>
       <td>
-        <img height="240" alt="left" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/LREbNS351/3059e6bd-6602-4fa2-8213-47c7dfd65f3b.png">
+        <img height="400" alt="left" style="max-height: unset;" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3RxdRKAAGQQAAAAAAAAAAAAADmJ7AQ/original">
       </td>
     </tr>
     <tr>
       <td style="text-align: center;">
          <pre class="language-js">
 dataCell: {
-  text: {
+  bolderText: {
     textAlign: 'center',
     textBaseline: 'middle',
   },
-  bolderText: {
+  text: {
     textAlign: 'center',
     textBaseline: 'middle',
   }
@@ -271,18 +274,18 @@ dataCell: {
         </pre>
       </td>
       <td>
-        <img height="240" alt="center" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/svHPloVIR/5680cdfa-cf9e-4d22-b934-80e8591ed249.png">
+        <img height="400" alt="center" style="max-height: unset;" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HLyyQLnW39YAAAAAAAAAAAAADmJ7AQ/original">
       </td>
     </tr>
     <tr>
       <td style="text-align: center;">
                <pre class="language-js">
 dataCell: {
-  text: {
+   bolderText: {
     textAlign: 'right',
     textBaseline: 'bottom',
   },
-  bolderText: {
+  text: {
     textAlign: 'right',
     textBaseline: 'bottom',
   }
@@ -290,7 +293,7 @@ dataCell: {
         </pre>
       </td>
       <td>
-        <img height="240" alt="right" style="max-height: unset;" src="https://gw.alipayobjects.com/zos/antfincdn/5XhiGZc%26%24/b1053aa7-b9ff-4688-b8de-d33f62d26c5a.png">
+        <img height="400" alt="right" style="max-height: unset;" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DnuzQ41eFXYAAAAAAAAAAAAADmJ7AQ/original">
       </td>
     </tr>
   </tbody>

From d1b90aef3d89f66da08139918017c7a96c00a404 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 26 Jan 2024 18:06:32 +0800
Subject: [PATCH 33/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E6=95=B0=E6=8D=AE=E5=92=8C=E4=BA=A4=E4=BA=92=E7=9A=84?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/.dumi/global.ts                       |   2 +-
 s2-site/.dumirc.ts                            |   8 +-
 .../docs/manual/advanced/get-cell-data.zh.md  |  34 ++-
 .../manual/advanced/interaction/basic.zh.md   |  19 +-
 s2-site/docs/manual/faq.zh.md                 |   2 +-
 .../analysis/get-data/demo/get-cell-data.ts   | 237 ++++++++++++++++--
 ...t-multi-data.ts => get-multi-cell-data.ts} |   0
 .../get-data/demo/get-single-cell-data.ts     |  90 +++++++
 .../examples/analysis/get-data/demo/meta.json |  17 +-
 .../interaction/advanced/demo/intercepts.ts   |  66 +++++
 .../interaction/advanced/demo/meta.json       |   9 +
 11 files changed, 446 insertions(+), 38 deletions(-)
 rename s2-site/examples/analysis/get-data/demo/{get-multi-data.ts => get-multi-cell-data.ts} (100%)
 create mode 100644 s2-site/examples/analysis/get-data/demo/get-single-cell-data.ts
 create mode 100644 s2-site/examples/interaction/advanced/demo/intercepts.ts

diff --git a/s2-site/.dumi/global.ts b/s2-site/.dumi/global.ts
index b53418f978..0eda387e03 100644
--- a/s2-site/.dumi/global.ts
+++ b/s2-site/.dumi/global.ts
@@ -20,7 +20,7 @@ if (window) {
   (window as any).s2 = require('@antv/s2');
   (window as any).s2React = require('@antv/s2-react');
 
-  // 本地 link 时不需要引入样式
+  // 本地通过 monorepoRedirect link 时不需要引入样式, 发布时引入, 避免样式丢失
   if (process.env.NODE_ENV === 'production') {
     (window as any).s2CSS = require('@antv/s2/dist/style.min.css');
     (window as any).s2ReactCSS = require('@antv/s2-react/dist/style.min.css');
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 6c7a6da3c0..53a92a9d5d 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -286,16 +286,16 @@ export default defineConfig({
             <div id="container" />
             <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
             <script>
-        {{code}}
+              {{code}}
             </script>
           </body>
         </html>`,
     },
     announcement: {
-      // icon: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
+      // icon: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1PTTQLk3j5AAAAAAAAAAAAAADmJ7AQ/original',
       title: {
-        zh: '🎉 S2 2.0 版本开始内测啦!',
-        en: '🎉 S2 Next version 2.0 is in beta!',
+        zh: '🎉 S2 2.0 版本开始内测啦! 文档焕新计划, 原 1.x 官网已迁移至 https://s2-v1.antv.antgroup.com',
+        en: '🎉 S2 Next version 2.0 is in beta! see 1.x docs: https://s2-v1.antv.antgroup.com',
       },
       link: {
         text: {
diff --git a/s2-site/docs/manual/advanced/get-cell-data.zh.md b/s2-site/docs/manual/advanced/get-cell-data.zh.md
index 05b5a74fc6..232ae6c1d7 100644
--- a/s2-site/docs/manual/advanced/get-cell-data.zh.md
+++ b/s2-site/docs/manual/advanced/get-cell-data.zh.md
@@ -19,6 +19,8 @@ tag: Updated
 
 `S2` 提供了一系列获取数据的 [API](/docs/api/basic-class/spreadsheet), 下面介绍一些常用的场景：
 
+<Playground path="analysis/get-data/demo/get-cell-data.ts" rid='get-cell-data' height='300'></playground>
+
 ### 获取指定区域单元格节点
 
 在渲染完成后，访问 `s2.facet.getLayoutResult()` 获取到当前所有（**含不在可视范围的**）[单元格节点](/docs/api/basic-class/node)。
@@ -176,15 +178,23 @@ s2.on(S2Event.GLOBAL_SELECTED, (cells) => {
 也可以调用 [交互方法](/docs/manual/advanced/interaction/basic#%E8%B0%83%E7%94%A8%E4%BA%A4%E4%BA%92%E6%96%B9%E6%B3%95), 手动的获取
 
 ```ts
-s2.interaction.getAllCells() // 获取行/列/数值区域所有单元格
-s2.interaction.getCells() // 获取所有激活的单元格 （包含不在可视范围内的）
-s2.interaction.getActiveCells() // 获取所有激活的单元格 （不含不在可视范围内的）
-s2.interaction.isSelectedState() // 是否是选中状态
+// 获取所有激活的单元格 （包含不在可视范围内的）
+s2.interaction.getCells();
+// 获取所有激活的单元格 （不含不在可视范围内的）
+s2.interaction.getActiveCells();
+// 是否是选中状态
+s2.interaction.isSelectedState();
+// 获取当前交互状态
+s2.interaction.getCurrentStateName();
+// 获取当前发生过交互的单元格
+s2.interaction.getInteractedCells();
+// 获取未选中的单元格
+s2.interaction.getUnSelectedDataCells();
 ```
 
 ### 获取单个单元格数据
 
-[查看示例](/examples/analysis/get-data/#get-cell-data)
+[查看示例](/examples/analysis/get-data/#get-single-cell-data)
 
 ```ts | pure
 import { EXTRA_FIELD } from '@antv/s2'
@@ -212,7 +222,7 @@ s2.dataSet.getCellData({
 
 ### 获取多个单元格数据
 
-[查看示例](/examples/analysis/get-data/#get-multi-data)
+[查看示例](/examples/analysis/get-data/#get-multi-cell-data)
 
 ```ts | pure
 import { EXTRA_FIELD, QueryDataType } from '@antv/s2'
@@ -330,13 +340,13 @@ s2.on(S2Event.DATA_CELL_CLICK, (event) => {
 
 如图，比如我们想获取舟山市下的办公用品纸张的数量
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/jHILwaZ50/d9af2488-add9-46ec-b0da-81fc4da2b7a1.png" width="600" alt="preview"/>
+<img src="https://gw.alipayobjects.com/zos/antfincdn/jHILwaZ50/d9af2488-add9-46ec-b0da-81fc4da2b7a1.png" width="600" alt="preview" />
 
 ```ts
 // 找到 "舟山市" 对应的行头单元格节点
-const rowCellNode = s2.facet.getRowCellNodes().find((node) => node.id === 'root[&] 浙江省 [&] 舟山市')
+const rowCellNode = s2.facet.getRowNodes().find((node) => node.id === 'root[&]浙江省[&]舟山市')
 // 找到 "办公用品" 下 "纸张" 对应的 "数量"列头单元格节点
-const colCellNode = s2.facet.getColCellNodes().find((node) => node.id === 'root[&] 办公用品 [&] 纸张 [&]number')
+const colCellNode = s2.facet.getColNodes().find((node) => node.id === 'root[&]办公用品[&]纸张[&]数量')
 
 const data = s2.dataSet.getCellMultiData({
   query: {
@@ -345,6 +355,12 @@ const data = s2.dataSet.getCellMultiData({
   }
 })
 
+// 或者
+const cellMeta = s2.facet.getCellMeta(
+  rowCellNode?.rowIndex,
+  colCellNode?.colIndex,
+);
+
 /**
   {
     "number": 1634,
diff --git a/s2-site/docs/manual/advanced/interaction/basic.zh.md b/s2-site/docs/manual/advanced/interaction/basic.zh.md
index 5126c98153..ae56e11970 100644
--- a/s2-site/docs/manual/advanced/interaction/basic.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/basic.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 基础交互
 order: 0
+tag: Updated
 ---
 
 ## 交互种类
@@ -468,13 +469,29 @@ const s2Options = {
 
 可以通过 [主题配置](https://s2.antv.antgroup.com/api/general/s2-theme#interactionstatename) 对应的 [交互主题](https://s2.antv.antgroup.com/api/general/s2-theme#interactionstatename), 调整选中/悬停/圈选等交互主题。
 
+## 交互拦截
+
+可以通过自定义屏蔽交互事件，如不响应表格的 hover, click 事件等。[查看示例](/examples/interaction/advanced#intercepts)
+
+```ts
+import { InterceptType } from '@antv/s2'
+
+// 添加拦截
+s2.interaction.addIntercepts([InterceptType.HOVER, InterceptType.CLICK]);
+
+// 移除拦截
+s2.interaction.removeIntercepts([InterceptType.HOVER, InterceptType.CLICK]);
+```
+
 ## 调用 API
 
-`S2` 内置了一些交互相关的 `API`，统一挂载在 `s2.interaction` 命名空间下，你可以在拿到 [SpreadSheet 实例](/docs/api/basic-class/spreadsheet) 后调用它们来实现你的效果，比如 `选中所有单元格`, `获取列头单元格` 等常用方法，具体请查看 [Interaction 实例类](/docs/api/basic-class/interaction)
+`S2` 内置了一些交互相关的 `API`，统一挂载在 `s2.interaction` 命名空间下，你可以在拿到 [SpreadSheet 实例](/docs/api/basic-class/spreadsheet) 后调用它们来实现你的效果，比如 `选中所有单元格`, `获取列头单元格` 等常用方法，具体请查看 [Interaction 实例类](/docs/api/basic-class/interaction) 和 [示例](/examples/analysis/get-data/#get-cell-data)
 
 ```ts
 const s2 = new PivotSheet()
 s2.interaction.selectAll()
 ```
 
+## 扩展阅读
+
 对背后的交互实现原理感兴趣？欢迎阅读文章 [《你不知道的 Canvas 表格交互》](https://www.yuque.com/antv/vo4vyz/bvzbaz)
diff --git a/s2-site/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md
index fdddbb284e..44a4013dde 100644
--- a/s2-site/docs/manual/faq.zh.md
+++ b/s2-site/docs/manual/faq.zh.md
@@ -132,7 +132,7 @@ await s2.render(false)
 
 ### 如何获取单元格数据？
 
-请查看 [这篇文章](/docs/manual/advanced/get-cell-data)
+请查看 [这篇文章](/docs/manual/advanced/get-cell-data) 和 [示例](/examples/analysis/get-data/#get-cell-data)
 
 ### 为什么 Tooltip 在 `@antv/s2` 中不显示，在 `@antv/s2-react` `@antv/s2-vue` 中可以正常显示？
 
diff --git a/s2-site/examples/analysis/get-data/demo/get-cell-data.ts b/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
index 93da8d30b4..b5c1d347ca 100644
--- a/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
+++ b/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
@@ -1,4 +1,194 @@
-import { PivotSheet, EXTRA_FIELD, S2DataConfig, S2Options } from '@antv/s2';
+/* eslint-disable no-console */
+import {
+  EXTRA_FIELD,
+  PivotSheet,
+  QueryDataType,
+  S2DataConfig,
+  S2Event,
+  S2Options,
+  SpreadSheet,
+} from '@antv/s2';
+import insertCSS from 'insert-css';
+
+// 了解更多请阅读文档: https://s2.antv.antgroup.com/manual/advanced/get-cell-data
+
+function addButton(text, handler) {
+  const btn = document.createElement('button');
+
+  btn.className = 'ant-btn ant-btn-default';
+  btn.innerHTML = text;
+
+  btn.addEventListener('click', () => {
+    handler?.();
+  });
+
+  document.querySelector('#container > canvas')?.before(btn);
+}
+
+function logLayoutResult(s2: SpreadSheet) {
+  console.log('布局信息:', s2.facet.getLayoutResult());
+  console.log(
+    '序号单元格和节点:',
+    s2.facet.getSeriesNumberCells(),
+    s2.facet.getSeriesNumberNodes(),
+  );
+  console.log(
+    '角头单元格和节点:',
+    s2.facet.getCornerCells(),
+    s2.facet.getCornerNodes(),
+  );
+  console.log(
+    '行头单元格和节点:',
+    s2.facet.getRowCells(),
+    s2.facet.getRowNodes(),
+  );
+  console.log(
+    '列头单元格和节点:',
+    s2.facet.getColCells(),
+    s2.facet.getColNodes(),
+  );
+  console.log('数值单元格:', s2.facet.getDataCells());
+  console.log('表头单元格:', s2.facet.getHeaderCells());
+  console.log('行头总计节点:', s2.facet.getRowGrandTotalsNodes());
+  console.log('行头小计节点:', s2.facet.getRowSubTotalsNodes());
+  console.log('列头总计节点:', s2.facet.getRowGrandTotalsNodes());
+  console.log('列头小计节点:', s2.facet.getRowSubTotalsNodes());
+  console.log('当前可视范围内所有单元格:', s2.facet.getCells());
+}
+
+function logEvent(s2: SpreadSheet) {
+  s2.on(S2Event.ROW_CELL_CLICK, (event) => {
+    // 根据 event.target 拿到表格内部当前坐标对应的单元格
+    const cell = s2.getCell(event.target);
+    // 获取当前单元格对应的信息
+    const meta = cell.getMeta();
+
+    const rowData = s2.dataSet.getCellMultiData({ query: meta.query });
+    const rowCellData = s2.dataSet.getCellData({ query: meta.query });
+    const dimensionValues = s2.dataSet.getDimensionValues(meta.field);
+
+    console.log('当前行数据：', rowData);
+    console.log('当前行头单元格数据：', rowCellData);
+    console.log('当前行头维值：', dimensionValues);
+    console.log('当前行头单元格信息:', cell, meta);
+  });
+
+  s2.on(S2Event.COL_CELL_CLICK, (event) => {
+    const cell = s2.getCell(event.target);
+    const meta = cell.getMeta();
+
+    const colData = s2.dataSet.getCellMultiData({ query: meta.query });
+    const colCellData = s2.dataSet.getCellData({ query: meta.query });
+    const dimensionValues = s2.dataSet.getDimensionValues(meta.field);
+
+    console.log('当前列数据：', colData);
+    console.log('当前列头单元格数据：', colCellData);
+    console.log('当前列头维值：', dimensionValues);
+    console.log('当前列头单元格信息:', cell, meta);
+  });
+
+  s2.on(S2Event.DATA_CELL_CLICK, (event) => {
+    const cell = s2.getCell(event.target);
+    const meta = cell.getMeta();
+
+    // 获取当前行数据
+    const rowData = s2.dataSet.getCellMultiData({ query: meta.rowQuery });
+    // 获取当前列数据
+    const colData = s2.dataSet.getCellMultiData({ query: meta.colQuery });
+
+    console.log('当前行数据', rowData);
+    console.log('当前行数据', colData);
+    console.log('当前单元格数据', meta.data);
+    console.log('当前数值单元格信息:', cell, meta);
+  });
+
+  s2.on(S2Event.GLOBAL_SELECTED, (cells) => {
+    console.log('选中的单元格', cells);
+  });
+}
+
+// 获取行列对应数值单元格数据
+function logData(s2: SpreadSheet) {
+  // 找到 "舟山市" 对应的行头单元格节点
+  const rowCellNode = s2.facet
+    .getRowNodes()
+    .find((node) => node.id === 'root[&]浙江省[&]舟山市');
+
+  // 找到 "办公用品" 下 "纸张" 对应的 "数量"列头单元格节点
+  const colCellNode = s2.facet
+    .getColNodes()
+    .find((node) => node.id === 'root[&]纸张[&]价格');
+
+  const data = s2.dataSet.getCellMultiData({
+    query: {
+      ...rowCellNode?.query,
+      ...colCellNode?.query,
+      [EXTRA_FIELD]: 'price',
+    },
+    queryType: QueryDataType.DetailOnly,
+    // queryType: QueryDataType.All,
+  });
+
+  const cellMeta = s2.facet.getCellMeta(
+    rowCellNode?.rowIndex,
+    colCellNode?.colIndex,
+  );
+
+  console.log(data, cellMeta);
+}
+
+// 获取 [杭州] 对应的整行明细数据
+function logRowData(s2: SpreadSheet) {
+  const rowCellNode = s2.facet
+    .getRowNodes()
+    .find((node) => node.id === 'root[&]浙江省[&]杭州');
+
+  const data = s2.dataSet.getCellMultiData({
+    query: { ...rowCellNode?.query, [EXTRA_FIELD]: 'price' },
+    queryType: QueryDataType.DetailOnly,
+    // queryType: QueryDataType.All,
+  });
+
+  console.log('rowData:', data);
+}
+
+// 获取 [纸张] 对应的整列明细数据
+function logColData(s2: SpreadSheet) {
+  const colCellNode = s2.facet
+    .getColNodes()
+    .find((node) => node.id === 'root[&]纸张[&]价格');
+
+  const data = s2.dataSet.getCellMultiData({
+    query: { ...colCellNode?.query, [EXTRA_FIELD]: 'price' },
+    queryType: QueryDataType.DetailOnly,
+    // queryType: QueryDataType.All,
+  });
+
+  console.log('colData:', data);
+}
+
+function logCellMeta(s2: SpreadSheet) {
+  const rowIndex = 1;
+  const colIndex = 2;
+  const cellMeta = s2.facet.getCellMeta(rowIndex, colIndex);
+
+  console.log('cellMeta:', cellMeta);
+}
+
+function logInteractionData(s2: SpreadSheet) {
+  // 获取所有激活的单元格 （包含不在可视范围内的）
+  console.log(s2.interaction.getCells());
+  // 获取所有激活的单元格 （不含不在可视范围内的）
+  console.log(s2.interaction.getActiveCells());
+  // 是否是选中状态
+  console.log(s2.interaction.isSelectedState());
+  // 获取当前交互状态
+  console.log(s2.interaction.getCurrentStateName());
+  // 获取当前发生过交互的单元格
+  console.log(s2.interaction.getInteractedCells());
+  // 获取未选中的单元格
+  console.log(s2.interaction.getUnSelectedDataCells());
+}
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4347c2dd-6554-451b-9d44-15b04e5de657.json',
@@ -36,6 +226,7 @@ fetch(
     const s2Options: S2Options = {
       width: 600,
       height: 480,
+      showSeriesNumber: true,
       interaction: {
         selectedCellsSpotlight: true,
         hoverHighlight: true,
@@ -64,27 +255,35 @@ fetch(
 
     await s2.render();
 
-    // 获取明细单元格
-    const cellData = s2.dataSet.getCellData({
-      query: {
-        province: '浙江',
-        city: '杭州',
-        type: '笔',
-        [EXTRA_FIELD]: 'price',
-      },
+    logEvent(s2);
+
+    addButton('获取布局信息', () => {
+      logLayoutResult(s2);
     });
 
-    console.log('单个数据', cellData);
+    addButton('获取行列对应数值单元格数据', () => {
+      logData(s2);
+    });
 
-    // 获取小计数据
-    const subTotalData = s2.dataSet.getCellData({
-      query: {
-        province: '浙江',
-        type: '笔',
-        [EXTRA_FIELD]: 'price',
-      },
-      isTotals: true,
+    addButton('根据行列索引获取数值单元格信息', () => {
+      logCellMeta(s2);
     });
 
-    console.log('小计数据', subTotalData);
+    addButton('获取整行数据', () => {
+      logRowData(s2);
+    });
+
+    addButton('获取整列数据', () => {
+      logColData(s2);
+    });
+
+    addButton('获取交互信息', () => {
+      logInteractionData(s2);
+    });
   });
+
+insertCSS(`
+  #container > canvas {
+    margin-top: 10px;
+  }
+`);
diff --git a/s2-site/examples/analysis/get-data/demo/get-multi-data.ts b/s2-site/examples/analysis/get-data/demo/get-multi-cell-data.ts
similarity index 100%
rename from s2-site/examples/analysis/get-data/demo/get-multi-data.ts
rename to s2-site/examples/analysis/get-data/demo/get-multi-cell-data.ts
diff --git a/s2-site/examples/analysis/get-data/demo/get-single-cell-data.ts b/s2-site/examples/analysis/get-data/demo/get-single-cell-data.ts
new file mode 100644
index 0000000000..80353a31cd
--- /dev/null
+++ b/s2-site/examples/analysis/get-data/demo/get-single-cell-data.ts
@@ -0,0 +1,90 @@
+import { PivotSheet, EXTRA_FIELD, S2DataConfig, S2Options } from '@antv/s2';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/4347c2dd-6554-451b-9d44-15b04e5de657.json',
+)
+  .then((res) => res.json())
+  .then(async (data) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
+      fields: {
+        rows: ['province', 'city'],
+        columns: ['type'],
+        values: ['price'],
+      },
+      meta: [
+        {
+          field: 'province',
+          name: '省份',
+        },
+        {
+          field: 'city',
+          name: '城市',
+        },
+        {
+          field: 'type',
+          name: '商品类别',
+        },
+        {
+          field: 'price',
+          name: '价格',
+        },
+      ],
+      data,
+    };
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      interaction: {
+        selectedCellsSpotlight: true,
+        hoverHighlight: true,
+        enableCopy: true,
+      },
+      // 配置小计总计显示
+      totals: {
+        row: {
+          showGrandTotals: true,
+          showSubTotals: true,
+          reverseGrandTotalsLayout: true,
+          reverseSubTotalsLayout: true,
+          subTotalsDimensions: ['province'],
+        },
+        col: {
+          showGrandTotals: true,
+          showSubTotals: true,
+          reverseGrandTotalsLayout: true,
+          reverseSubTotalsLayout: true,
+          subTotalsDimensions: ['type'],
+        },
+      },
+    };
+
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    await s2.render();
+
+    // 获取明细数据
+    const cellData = s2.dataSet.getCellData({
+      query: {
+        province: '浙江',
+        city: '杭州',
+        type: '笔',
+        [EXTRA_FIELD]: 'price',
+      },
+    });
+
+    console.log('单个数据', cellData);
+
+    // 获取小计数据
+    const subTotalData = s2.dataSet.getCellData({
+      query: {
+        province: '浙江',
+        type: '笔',
+        [EXTRA_FIELD]: 'price',
+      },
+      isTotals: true,
+    });
+
+    console.log('小计数据', subTotalData);
+  });
diff --git a/s2-site/examples/analysis/get-data/demo/meta.json b/s2-site/examples/analysis/get-data/demo/meta.json
index 0902e6e7ca..2c17aba635 100644
--- a/s2-site/examples/analysis/get-data/demo/meta.json
+++ b/s2-site/examples/analysis/get-data/demo/meta.json
@@ -6,19 +6,30 @@
   "demos": [
     {
       "filename": "get-cell-data.ts",
+      "title": {
+        "zh": "获取单元格数据",
+        "en": "Get Cell Data"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*l-MsQKCGsnEAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
+    },
+    {
+      "filename": "get-single-cell-data.ts",
       "title": {
         "zh": "获取单个单元格数据",
         "en": "Get Single Cell Data"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/S4FZba2BY7/8e25e21c-28d3-4572-8585-f0b7435ab7c8.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/S4FZba2BY7/8e25e21c-28d3-4572-8585-f0b7435ab7c8.png",
+      "new": true
     },
     {
-      "filename": "get-multi-data.ts",
+      "filename": "get-multi-cell-data.ts",
       "title": {
         "zh": "获取多个单元格数据",
         "en": "Get Multi Cell Data"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/S4FZba2BY7/8e25e21c-28d3-4572-8585-f0b7435ab7c8.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/S4FZba2BY7/8e25e21c-28d3-4572-8585-f0b7435ab7c8.png",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/interaction/advanced/demo/intercepts.ts b/s2-site/examples/interaction/advanced/demo/intercepts.ts
new file mode 100644
index 0000000000..41b853ee24
--- /dev/null
+++ b/s2-site/examples/interaction/advanced/demo/intercepts.ts
@@ -0,0 +1,66 @@
+import { S2Event, PivotSheet, S2Options, InterceptType } from '@antv/s2';
+import '@antv/s2/dist/style.min.css';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then(async (dataCfg) => {
+    const container = document.getElementById('container');
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      interaction: {
+        autoResetSheetStyle: true,
+        hoverHighlight: true,
+        hoverFocus: true,
+      },
+      tooltip: {
+        enable: true,
+        getContainer() {
+          return document.getElementById('container');
+        },
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    s2.on(S2Event.CORNER_CELL_CLICK, (event) => {
+      s2.interaction.addIntercepts([InterceptType.HOVER, InterceptType.CLICK]);
+
+      s2.showTooltip({
+        position: {
+          x: event.clientX,
+          y: event.clientY,
+        },
+        options: {
+          forceRender: true,
+        },
+        content:
+          '点击角头后, 整个表格不再响应 click 和 hover 和事件, 在按下 ESC, 或点击空白处关闭 tooltip 后, 移除屏蔽',
+      });
+    });
+
+    s2.on(S2Event.GLOBAL_RESET, () => {
+      s2.interaction.removeIntercepts([
+        InterceptType.HOVER,
+        InterceptType.CLICK,
+      ]);
+      s2.hideTooltip();
+    });
+
+    s2.on(S2Event.GLOBAL_SELECTED, (cells) => {
+      console.log('selected:', cells);
+    });
+
+    s2.on(S2Event.GLOBAL_HOVER, (event) => {
+      console.log('hover:', event);
+    });
+
+    s2.on(S2Event.LAYOUT_DESTROY, () => {
+      s2.hideTooltip();
+    });
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/interaction/advanced/demo/meta.json b/s2-site/examples/interaction/advanced/demo/meta.json
index d68eaec408..77922ee0e1 100644
--- a/s2-site/examples/interaction/advanced/demo/meta.json
+++ b/s2-site/examples/interaction/advanced/demo/meta.json
@@ -107,6 +107,15 @@
         "en": "Reaching the boundary of a scrolling area"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/JRAt1kb93/Kapture%2525202022-06-06%252520at%25252011.28.43.gif"
+    },
+    {
+      "filename": "intercepts.ts",
+      "title": {
+        "zh": "屏蔽交互事件",
+        "en": "Interaction Intercepts"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/JRAt1kb93/Kapture%2525202022-06-06%252520at%25252011.28.43.gif",
+      "new": true
     }
   ]
 }

From 49ce65ff6fc1e41a3c7b05108ae392e9fb08fb2e Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Mon, 29 Jan 2024 14:25:58 +0800
Subject: [PATCH 34/64] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=95=B0=E6=8D=AE=E9=9B=86=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__snapshots__/custom-dataset-spec.ts.snap | 38 +++++++++++
 .../spreadsheet/custom-dataset-spec.ts        | 27 ++++++++
 .../spreadsheet/custom-facet-spec.ts          | 66 ++++++++++++++-----
 .../s2-core/src/common/interface/s2Options.ts | 12 ++--
 packages/s2-core/src/facet/base-facet.ts      |  1 +
 packages/s2-core/src/facet/table-facet.ts     | 22 ++++---
 .../custom/custom-layout/demo/custom-facet.ts | 64 +++++++++++++++++-
 7 files changed, 196 insertions(+), 34 deletions(-)
 create mode 100644 packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-dataset-spec.ts.snap
 create mode 100644 packages/s2-core/__tests__/spreadsheet/custom-dataset-spec.ts

diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-dataset-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-dataset-spec.ts.snap
new file mode 100644
index 0000000000..c29660508c
--- /dev/null
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-dataset-spec.ts.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpreadSheet Custom Dataset Tests should render custom data set 1`] = `
+Array [
+  Object {
+    "id": "province",
+    "value": "test",
+  },
+  Object {
+    "id": "city",
+    "value": "test",
+  },
+  Object {
+    "id": "type",
+    "value": "test",
+  },
+  Object {
+    "id": "root[&]test",
+    "value": "test",
+  },
+  Object {
+    "id": "root[&]test[&]test",
+    "value": "test",
+  },
+  Object {
+    "id": "root[&]test",
+    "value": "test",
+  },
+  Object {
+    "id": "root[&]test[&]test",
+    "value": "test",
+  },
+  Object {
+    "id": "root[&]test[&]test",
+    "value": "test",
+  },
+]
+`;
diff --git a/packages/s2-core/__tests__/spreadsheet/custom-dataset-spec.ts b/packages/s2-core/__tests__/spreadsheet/custom-dataset-spec.ts
new file mode 100644
index 0000000000..bb243972e8
--- /dev/null
+++ b/packages/s2-core/__tests__/spreadsheet/custom-dataset-spec.ts
@@ -0,0 +1,27 @@
+import { pick } from 'lodash';
+import { createPivotSheet } from 'tests/util/helpers';
+import { Node, PivotDataSet } from '../../src';
+
+describe('SpreadSheet Custom Dataset Tests', () => {
+  class CustomDataSet extends PivotDataSet {
+    public getFieldName() {
+      return 'test';
+    }
+  }
+
+  const mapNodes = (nodes: Node[]) => {
+    return nodes.map((node) => pick(node, ['id', 'value']));
+  };
+
+  test('should render custom data set', async () => {
+    const s2 = createPivotSheet({
+      dataSet: (spreadsheet) => new CustomDataSet(spreadsheet),
+    });
+
+    await s2.render();
+
+    const headerNodes = mapNodes(s2.facet.getHeaderNodes());
+
+    expect(headerNodes).toMatchSnapshot();
+  });
+});
diff --git a/packages/s2-core/__tests__/spreadsheet/custom-facet-spec.ts b/packages/s2-core/__tests__/spreadsheet/custom-facet-spec.ts
index 312daad105..9b0775bc2b 100644
--- a/packages/s2-core/__tests__/spreadsheet/custom-facet-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/custom-facet-spec.ts
@@ -1,43 +1,75 @@
 /* eslint-disable max-classes-per-file */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { createPivotSheet, createTableSheet } from 'tests/util/helpers';
+import { PivotFacet, TableFacet, type ViewMeta } from '../../src';
 
 describe('SpreadSheet Custom Facet Tests', () => {
   test('should render custom pivot facet for custom cell meta', async () => {
     const getCellMeta = jest.fn();
 
-    const layoutCellMeta = () => {
-      getCellMeta();
-
-      return null;
-    };
-
     const s2 = createPivotSheet({
-      layoutCellMeta,
+      layoutCellMeta() {
+        getCellMeta();
+
+        return {} as ViewMeta;
+      },
     });
 
     await s2.render();
 
-    expect(s2.facet.getCellMeta(0, 0)).toBeNull();
-    expect(getCellMeta).toHaveBeenCalledTimes(1);
+    expect(s2.facet.getCellMeta(0, 0)).toEqual({});
+    expect(getCellMeta).toHaveBeenCalledTimes(5);
   });
 
   test('should render custom table facet for custom cell meta', async () => {
     const getCellMeta = jest.fn();
 
-    const layoutCellMeta = () => {
-      getCellMeta();
+    const s2 = createTableSheet({
+      layoutCellMeta() {
+        getCellMeta();
+
+        return {} as ViewMeta;
+      },
+    });
+
+    await s2.render();
+
+    expect(s2.facet.getCellMeta(0, 0)).toEqual({});
+    expect(getCellMeta).toHaveBeenCalledTimes(4);
+  });
+
+  test('should render custom pivot facet', async () => {
+    // @ts-ignore
+    class CustomPivotFacet extends PivotFacet {
+      calculateColLeafNodesWidth() {
+        return 200;
+      }
+    }
+
+    const s2 = createPivotSheet({
+      facet: (spreadsheet) => new CustomPivotFacet(spreadsheet),
+    });
+
+    await s2.render();
+
+    expect(s2.facet.getColLeafNodes().map((node) => node.width)).toEqual([
+      200, 200,
+    ]);
+  });
 
-      return null;
-    };
+  test('should render custom table facet', async () => {
+    // @ts-ignore
+    class CustomTableFacet extends TableFacet {
+      calculateColLeafNodesWidth() {
+        return 200;
+      }
+    }
 
     const s2 = createTableSheet({
-      layoutCellMeta,
+      facet: (spreadsheet) => new CustomTableFacet(spreadsheet),
     });
 
     await s2.render();
 
-    expect(s2.facet.getCellMeta(0, 0)).toBeNull();
-    expect(getCellMeta).toHaveBeenCalledTimes(1);
+    expect(s2.facet.getColLeafNodes().map((node) => node.width)).toEqual([200]);
   });
 });
diff --git a/packages/s2-core/src/common/interface/s2Options.ts b/packages/s2-core/src/common/interface/s2Options.ts
index e7261bd23f..9db2300d3a 100644
--- a/packages/s2-core/src/common/interface/s2Options.ts
+++ b/packages/s2-core/src/common/interface/s2Options.ts
@@ -120,6 +120,7 @@ export interface S2BasicOptions<
 
   /**
    * 空值单元格占位符
+   * @see https://s2.antv.antgroup.com/zh/examples/custom/custom-cell/#data-cell-placeholder
    */
   placeholder?:
     | ((meta: Record<string, any>) => string | undefined | null)
@@ -136,6 +137,7 @@ export interface S2BasicOptions<
    * 自定义 AntV/G 渲染引擎配置参数 & 插件注册
    * @see https://g.antv.antgroup.com/plugins/intro
    * @see https://g.antv.antgroup.com/api/canvas/options
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-plugins/#a11y
    * @example
     import { Plugin as PluginA11y } from '@antv/g-plugin-a11y';
 
@@ -211,19 +213,19 @@ export interface S2BasicOptions<
 
   /**
    * 自定义节点排列顺序 (树状模式有效)
-   * @see https://s2.antv.antgroup.com/examples/custom/custom-layout#custom-layout-arrange
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-layout/#custom-layout-arrange
    */
   layoutArrange?: LayoutArrange;
 
   /**
    * 自定义单元格节点坐标
-   * @see https://s2.antv.antgroup.com/examples/custom/custom-layout#custom-layout-coordinate
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-layout/#custom-coordinate
    */
   layoutCoordinate?: LayoutCoordinate;
 
   /**
    * 自定义单元格对应元数据
-   * @see https://s2.antv.antgroup.com/examples/custom/custom-layout/#custom-data-position
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-layout/#custom-layout-cell-meta
    */
   layoutCellMeta?: LayoutCellMeta;
 
@@ -235,8 +237,8 @@ export interface S2BasicOptions<
 
   /** *********** 数据集 **************** */
   /**
-   * 自定义数据集 TODO:
-   * @see https://s2.antv.antgroup.com/
+   * 自定义数据集
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-dataset/#custom-strategy-sheet-dataset
    */
   dataSet?: (spreadsheet: SpreadSheet) => BaseDataSet;
 
diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
index 2c8d8c9aed..095ca8f45e 100644
--- a/packages/s2-core/src/facet/base-facet.ts
+++ b/packages/s2-core/src/facet/base-facet.ts
@@ -1899,6 +1899,7 @@ export abstract class BaseFacet {
 
   /**
    * 获取行头叶子节点节点 (含非可视区域)
+   * @example 获取全部: facet.getRowLeafNodes()
    */
   public getRowLeafNodes(): Node[] {
     return this.layoutResult.rowLeafNodes || [];
diff --git a/packages/s2-core/src/facet/table-facet.ts b/packages/s2-core/src/facet/table-facet.ts
index 9393666d63..1816d486d5 100644
--- a/packages/s2-core/src/facet/table-facet.ts
+++ b/packages/s2-core/src/facet/table-facet.ts
@@ -10,12 +10,15 @@ import {
 } from '../common/constant';
 import { DebuggerUtil } from '../common/debug';
 import type {
+  DataItem,
   FilterParam,
   LayoutResult,
   ResizeInteractionOptions,
+  SimpleData,
   SortParams,
   TableSortParam,
   ViewMeta,
+  ViewMetaData,
 } from '../common/interface';
 import type { TableDataSet } from '../data-set';
 import type { SpreadSheet } from '../sheet-type';
@@ -195,6 +198,7 @@ export class TableFacet extends FrozenFacet {
   }
 
   public getCellMeta = (rowIndex = 0, colIndex = 0) => {
+    const { options, dataSet } = this.spreadsheet;
     const { colLeafNodes } = this.getLayoutResult();
     const colNode = colLeafNodes[colIndex];
 
@@ -202,7 +206,6 @@ export class TableFacet extends FrozenFacet {
       return null;
     }
 
-    const { showSeriesNumber } = this.spreadsheet.options;
     const cellHeight = this.getCellHeightByRowIndex(rowIndex);
     const cellRange = this.getCellRange();
     const { trailingRowCount = 0 } = getValidFrozenOptions(
@@ -211,7 +214,7 @@ export class TableFacet extends FrozenFacet {
       cellRange.end - cellRange.start + 1,
     );
 
-    let data;
+    let data: ViewMetaData | SimpleData | undefined;
 
     const x = colNode.x;
     let y = this.viewCellHeights.getCellOffsetY(rowIndex);
@@ -222,10 +225,10 @@ export class TableFacet extends FrozenFacet {
         this.getTotalHeightForRange(rowIndex, cellRange.end);
     }
 
-    if (showSeriesNumber && colNode.field === SERIES_NUMBER_FIELD) {
+    if (options.showSeriesNumber && colNode.field === SERIES_NUMBER_FIELD) {
       data = rowIndex + 1;
     } else {
-      data = this.spreadsheet.dataSet.getCellData({
+      data = dataSet.getCellData({
         query: {
           field: colNode.field,
           rowIndex,
@@ -233,7 +236,7 @@ export class TableFacet extends FrozenFacet {
       });
     }
 
-    return {
+    const cellMeta: ViewMeta = {
       spreadsheet: this.spreadsheet,
       x,
       y,
@@ -241,16 +244,18 @@ export class TableFacet extends FrozenFacet {
       height: cellHeight,
       data: {
         [colNode.field]: data,
-      },
+      } as unknown as SimpleData,
       rowIndex,
       colIndex,
       isTotals: false,
       colId: colNode.id,
       rowId: String(rowIndex),
       valueField: colNode.field,
-      fieldValue: data,
+      fieldValue: data as DataItem,
       id: getDataCellId(String(rowIndex), colNode.id),
-    } as ViewMeta;
+    };
+
+    return options.layoutCellMeta?.(cellMeta) ?? cellMeta;
   };
 
   private getAdaptiveColWidth(colLeafNodes: Node[]) {
@@ -265,7 +270,6 @@ export class TableFacet extends FrozenFacet {
         seriesNumberWidth -
         Frame.getVerticalBorderWidth(this.spreadsheet);
 
-      // TODO: 向下取整, 导致单元格未撑满 canvas, 在冻结情况下会有问题, 待冻结重构后解决
       return Math.max(
         dataCell?.width!,
         floor(canvasW / Math.max(1, colHeaderColSize)),
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-facet.ts b/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
index a23af3e51e..a0acd1a225 100644
--- a/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
+++ b/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
@@ -1,8 +1,66 @@
-import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
+import {
+  Hierarchy,
+  LayoutResult,
+  Node,
+  PivotSheet,
+  S2DataConfig,
+  S2Options,
+} from '@antv/s2';
 
 // TODO: 目前没有导出 PivotFacet
-// class CustomFacet extends PivotFacet {}
-class CustomFacet {}
+/**
+ * 自定义 Facet, 修改单元格布局逻辑和宽高坐标
+ * 查看更多 https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/pivot-facet.ts
+ */
+// class CustomFacet extends PivotFacet {
+//   // 自定义行头节点高度
+//   getRowNodeHeight(rowNode: Node) {
+//     const defaultHeight = super.getRowNodeHeight(rowNode);
+
+//     return 200;
+//   }
+
+//   // 自定义列头节点高度
+//   getColNodeHeight(colNode: Node, colsHierarchy: Hierarchy) {
+//     const defaultHeight = super.getRowNodeHeight(colNode, colsHierarchy);
+
+//     return 100;
+//   }
+
+//   // 自定义行头节点坐标
+//   calculateRowNodesCoordinate(layoutResult: LayoutResult) {
+//     super.calculateRowNodesCoordinate(layoutResult);
+//     // 你的自定义逻辑...
+//   }
+
+//   // 自定义列头节点坐标
+//   calculateColNodesCoordinate(layoutResult: LayoutResult) {
+//     super.calculateRowNodesCoordinate(layoutResult);
+//     // 你的自定义逻辑...
+//   }
+
+//   // 自定义内容区域高度
+//   getContentHeight() {
+//     const defaultHeight = super.getContentHeight();
+
+//     // 你的自定义逻辑...
+//     return defaultHeight;
+//   }
+
+//   // 自定义单元格元数据
+//   getCellMeta(rowIndex: number, colIndex: number) {
+//     const cellMeta = super.getCellMeta(rowIndex, colIndex);
+
+//     // 你的自定义逻辑...
+//     return cellMeta;
+//   }
+
+//   // 自定义渲染逻辑
+//   render() {
+//     super.render();
+//     // 你的自定义逻辑...
+//   }
+// }
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',

From 84003e43e9b15962d648388b0aa2083696c2392f Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Mon, 29 Jan 2024 14:37:43 +0800
Subject: [PATCH 35/64] refactor: drawObjectText => drawCustomContent

---
 .../s2-core/__tests__/bugs/issue-2359-spec.ts |  4 +-
 packages/s2-core/src/cell/merged-cell.ts      | 14 ++--
 packages/s2-core/src/utils/text.ts            |  2 +-
 .../custom-cell/data-cell.ts                  |  4 +-
 .../strategy-sheet/custom-cell/col-cell.ts    | 10 ++-
 .../strategy-sheet/custom-cell/data-cell.ts   |  4 +-
 .../docs/manual/advanced/chart-in-cell.zh.md  |  8 +-
 .../custom/custom-cell/demo/mini-chart.ts     |  8 +-
 .../demo/custom-strategy-sheet-dataset.ts     |  4 +-
 .../custom/custom-layout/demo/custom-facet.ts | 81 ++++++++++---------
 10 files changed, 73 insertions(+), 66 deletions(-)

diff --git a/packages/s2-core/__tests__/bugs/issue-2359-spec.ts b/packages/s2-core/__tests__/bugs/issue-2359-spec.ts
index 2d4ad61d5e..ea393dadc6 100644
--- a/packages/s2-core/__tests__/bugs/issue-2359-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-2359-spec.ts
@@ -5,12 +5,12 @@
  */
 import { pick } from 'lodash';
 import { createTableSheet } from 'tests/util/helpers';
-import { TableColCell, drawObjectText } from '../../src';
+import { TableColCell, drawCustomContent } from '../../src';
 import type { S2CellType, S2Options } from '@/common/interface';
 
 class TestColCell extends TableColCell {
   drawTextShape() {
-    drawObjectText(this, {
+    drawCustomContent(this, {
       values: [['A', 'B', 'C']],
     });
   }
diff --git a/packages/s2-core/src/cell/merged-cell.ts b/packages/s2-core/src/cell/merged-cell.ts
index b3d84810b2..4c7ca45b8c 100644
--- a/packages/s2-core/src/cell/merged-cell.ts
+++ b/packages/s2-core/src/cell/merged-cell.ts
@@ -1,14 +1,14 @@
-import { isEmpty, isObject } from 'lodash';
+import { isEmpty } from 'lodash';
 import { CellType } from '../common/constant';
 import { CellBorderPosition, type ViewMeta } from '../common/interface';
 import type { SpreadSheet } from '../sheet-type';
+import { getBorderPositionAndStyle } from '../utils';
 import { renderLine, renderPolygon } from '../utils/g-renders';
 import {
   getPolygonPoints,
   getRightAndBottomCells,
 } from '../utils/interaction/merge-cell';
-import { drawObjectText } from '../utils/text';
-import { getBorderPositionAndStyle } from '../utils';
+import { drawCustomContent } from '../utils/text';
 import { DataCell } from './data-cell';
 
 /**
@@ -61,11 +61,11 @@ export class MergedCell extends DataCell {
       return;
     }
 
-    if (isObject(this.meta.fieldValue)) {
-      drawObjectText(this);
-    } else {
-      super.drawTextShape();
+    if (this.isMultiData()) {
+      return drawCustomContent(this);
     }
+
+    super.drawTextShape();
   }
 
   override drawBorders(): void {
diff --git a/packages/s2-core/src/utils/text.ts b/packages/s2-core/src/utils/text.ts
index 084eba979a..224c6682d7 100644
--- a/packages/s2-core/src/utils/text.ts
+++ b/packages/s2-core/src/utils/text.ts
@@ -453,7 +453,7 @@ export const getContentAreaForMultiData = (
  * @useCondition 是否使用条件格式
  */
 // eslint-disable-next-line max-lines-per-function
-export const drawObjectText = (
+export const drawCustomContent = (
   cell: S2CellType,
   multiData?: MultiData,
   useCondition = true,
diff --git a/packages/s2-react/src/components/sheets/grid-analysis-sheet/custom-cell/data-cell.ts b/packages/s2-react/src/components/sheets/grid-analysis-sheet/custom-cell/data-cell.ts
index f9316a7b80..c04715f68c 100644
--- a/packages/s2-react/src/components/sheets/grid-analysis-sheet/custom-cell/data-cell.ts
+++ b/packages/s2-react/src/components/sheets/grid-analysis-sheet/custom-cell/data-cell.ts
@@ -1,4 +1,4 @@
-import { DataCell, drawObjectText } from '@antv/s2';
+import { DataCell, drawCustomContent } from '@antv/s2';
 
 /**
  * Cell for panelGroup area
@@ -11,7 +11,7 @@ import { DataCell, drawObjectText } from '@antv/s2';
 export class GridAnalysisSheetDataCell extends DataCell {
   public drawTextShape() {
     if (this.isMultiData()) {
-      return drawObjectText(this);
+      return drawCustomContent(this);
     }
 
     super.drawTextShape();
diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/col-cell.ts b/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/col-cell.ts
index 0f430ac21b..9fc8936e0e 100644
--- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/col-cell.ts
+++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/col-cell.ts
@@ -1,7 +1,7 @@
 import {
   ColCell,
   type ColHeaderConfig,
-  drawObjectText,
+  drawCustomContent,
   Node,
   safeJsonParse,
   SpreadSheet,
@@ -37,6 +37,12 @@ export class StrategySheetColCell extends ColCell {
     const displayValues =
       formattedValue !== meta?.value ? [[formattedValue]] : [value];
 
-    drawObjectText(this, { values: displayValues }, false);
+    drawCustomContent(
+      this,
+      {
+        values: displayValues,
+      },
+      false,
+    );
   }
 }
diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/data-cell.ts b/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/data-cell.ts
index 946e315a4f..766df6061a 100644
--- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/data-cell.ts
+++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/data-cell.ts
@@ -1,4 +1,4 @@
-import { DataCell, drawObjectText } from '@antv/s2';
+import { DataCell, drawCustomContent } from '@antv/s2';
 
 /**
  * Cell for panelGroup area
@@ -10,7 +10,7 @@ import { DataCell, drawObjectText } from '@antv/s2';
 export class StrategySheetDataCell extends DataCell {
   public drawTextShape() {
     if (this.isMultiData()) {
-      return drawObjectText(this);
+      return drawCustomContent(this);
     }
 
     super.drawTextShape();
diff --git a/s2-site/docs/manual/advanced/chart-in-cell.zh.md b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
index c068c13a94..0d9d519ba8 100644
--- a/s2-site/docs/manual/advanced/chart-in-cell.zh.md
+++ b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
@@ -167,16 +167,16 @@ const s2DataConfig = {
 
 #### 1.2 自定义单元格
 
-自定义 `DataCell`, 然后使用 `drawObjectText` 接管绘制逻辑
+自定义 `DataCell`, 然后使用 `drawCustomContent` 接管绘制逻辑
 
 ```ts
-import { DataCell, drawObjectText } from '@antv/s2';
+import { DataCell, drawCustomContent } from '@antv/s2';
 
 class CustomDataCell extends DataCell {
   drawTextShape() {
-    // 当数值为对象时，完全接管绘制，使用内置的 `drawObjectText` 根据不同的数据结构 （见下方） 绘制不同的图形
+    // 当数值为对象时，完全接管绘制，使用内置的 `drawCustomContent` 根据不同的数据结构 （见下方） 绘制不同的图形
     if (this.isMultiData()) {
-      drawObjectText(this);
+      drawCustomContent(this);
       return;
     }
 
diff --git a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
index bfddd7efe8..bd0a1959c6 100644
--- a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
+++ b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
@@ -2,21 +2,21 @@
 import {
   PivotSheet,
   DataCell,
-  drawObjectText,
+  drawCustomContent,
   S2DataConfig,
   S2Options,
 } from '@antv/s2';
 import { isArray, isObject } from 'lodash';
 
 /**
- * 自定义 DataCell，使用 drawObjectText 绘制简易的 mini 图
+ * 自定义 DataCell，使用 drawCustomContent 绘制简易的 mini 图
  * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts
  */
 class CustomDataCell extends DataCell {
-  // 当数值为对象时，完全接管绘制, 使用内置的 `drawObjectText` 根据不同的数据结构 (见下方) 绘制不同的图形
+  // 当数值为对象时，完全接管绘制, 使用内置的 `drawCustomContent` 根据不同的数据结构 (见下方) 绘制不同的图形
   drawTextShape() {
     if (this.isMultiData()) {
-      return drawObjectText(this);
+      return drawCustomContent(this);
     }
 
     super.drawTextShape();
diff --git a/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts b/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts
index 09185e7407..3c1c8272fe 100644
--- a/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts
+++ b/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts
@@ -13,7 +13,7 @@ import {
   RawData,
   S2DataConfig,
   S2Options,
-  drawObjectText,
+  drawCustomContent,
   i18n,
 } from '@antv/s2';
 import { isEmpty, isObject, keys, size } from 'lodash';
@@ -72,7 +72,7 @@ class CustomDataSet extends CustomTreePivotDataSet {
 class CustomDataCell extends DataCell {
   drawTextShape() {
     if (this.isMultiData()) {
-      return drawObjectText(this);
+      return drawCustomContent(this);
     }
 
     super.drawTextShape();
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-facet.ts b/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
index a0acd1a225..dd9c133ff5 100644
--- a/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
+++ b/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
@@ -5,6 +5,7 @@ import {
   PivotSheet,
   S2DataConfig,
   S2Options,
+  PivotFacet,
 } from '@antv/s2';
 
 // TODO: 目前没有导出 PivotFacet
@@ -12,55 +13,55 @@ import {
  * 自定义 Facet, 修改单元格布局逻辑和宽高坐标
  * 查看更多 https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/pivot-facet.ts
  */
-// class CustomFacet extends PivotFacet {
-//   // 自定义行头节点高度
-//   getRowNodeHeight(rowNode: Node) {
-//     const defaultHeight = super.getRowNodeHeight(rowNode);
+class CustomFacet extends PivotFacet {
+  // 自定义行头节点高度
+  getRowNodeHeight(rowNode: Node) {
+    const defaultHeight = super.getRowNodeHeight(rowNode);
 
-//     return 200;
-//   }
+    return 200;
+  }
 
-//   // 自定义列头节点高度
-//   getColNodeHeight(colNode: Node, colsHierarchy: Hierarchy) {
-//     const defaultHeight = super.getRowNodeHeight(colNode, colsHierarchy);
+  // 自定义列头节点高度
+  getColNodeHeight(colNode: Node, colsHierarchy: Hierarchy) {
+    const defaultHeight = super.getColNodeHeight(colNode, colsHierarchy);
 
-//     return 100;
-//   }
+    return 100;
+  }
 
-//   // 自定义行头节点坐标
-//   calculateRowNodesCoordinate(layoutResult: LayoutResult) {
-//     super.calculateRowNodesCoordinate(layoutResult);
-//     // 你的自定义逻辑...
-//   }
+  // 自定义行头节点坐标
+  calculateRowNodesCoordinate(layoutResult: LayoutResult) {
+    super.calculateRowNodesCoordinate(layoutResult);
+    // 你的自定义逻辑...
+  }
 
-//   // 自定义列头节点坐标
-//   calculateColNodesCoordinate(layoutResult: LayoutResult) {
-//     super.calculateRowNodesCoordinate(layoutResult);
-//     // 你的自定义逻辑...
-//   }
+  // 自定义列头节点坐标
+  calculateColNodesCoordinate(layoutResult: LayoutResult) {
+    super.calculateRowNodesCoordinate(layoutResult);
+    // 你的自定义逻辑...
+  }
 
-//   // 自定义内容区域高度
-//   getContentHeight() {
-//     const defaultHeight = super.getContentHeight();
+  // 自定义内容区域高度
+  getContentHeight() {
+    const defaultHeight = super.getContentHeight();
 
-//     // 你的自定义逻辑...
-//     return defaultHeight;
-//   }
+    // 你的自定义逻辑...
+    return defaultHeight;
+  }
 
-//   // 自定义单元格元数据
-//   getCellMeta(rowIndex: number, colIndex: number) {
-//     const cellMeta = super.getCellMeta(rowIndex, colIndex);
+  // 自定义单元格元数据
+  getCellMeta(rowIndex: number, colIndex: number) {
+    const cellMeta = super.getCellMeta(rowIndex, colIndex);
 
-//     // 你的自定义逻辑...
-//     return cellMeta;
-//   }
+    // 你的自定义逻辑...
+    return cellMeta;
+  }
 
-//   // 自定义渲染逻辑
-//   render() {
-//     super.render();
-//     // 你的自定义逻辑...
-//   }
-// }
+  // 自定义渲染逻辑
+  render() {
+    super.render();
+    // 你的自定义逻辑...
+  }
+}
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
@@ -103,7 +104,7 @@ fetch(
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      // facet: (spreadsheet) => new CustomFacet(spreadsheet),
+      facet: (spreadsheet) => new CustomFacet(spreadsheet),
     };
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);

From a55631818fa3d31e47c53250c716052d81055d2e Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Tue, 30 Jan 2024 10:16:13 +0800
Subject: [PATCH 36/64] =?UTF-8?q?refactor:=20=E8=BF=81=E7=A7=BB=20type=20u?=
 =?UTF-8?q?til=20=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-core/src/common/interface/index.ts                | 2 +-
 packages/s2-core/src/common/interface/theme.ts                | 2 +-
 .../s2-core/src/common/interface/{util.ts => type-utils.ts}   | 4 ++++
 packages/s2-core/src/common/interface/utils.ts                | 3 ---
 packages/s2-core/src/utils/dataset/pivot-data-set.ts          | 2 +-
 5 files changed, 7 insertions(+), 6 deletions(-)
 rename packages/s2-core/src/common/interface/{util.ts => type-utils.ts} (62%)
 delete mode 100644 packages/s2-core/src/common/interface/utils.ts

diff --git a/packages/s2-core/src/common/interface/index.ts b/packages/s2-core/src/common/interface/index.ts
index 610f33fbff..c2352c7846 100644
--- a/packages/s2-core/src/common/interface/index.ts
+++ b/packages/s2-core/src/common/interface/index.ts
@@ -17,5 +17,5 @@ export * from './facet';
 export * from './style';
 export * from './collapse';
 export * from './text';
-export * from './utils';
+export * from './type-utils';
 export * from './export';
diff --git a/packages/s2-core/src/common/interface/theme.ts b/packages/s2-core/src/common/interface/theme.ts
index 06bccdb352..604537f4e0 100644
--- a/packages/s2-core/src/common/interface/theme.ts
+++ b/packages/s2-core/src/common/interface/theme.ts
@@ -2,7 +2,7 @@ import type { LineStyleProps, TextStyleProps } from '@antv/g';
 import type { CellType } from '../../common/constant/interaction';
 import type { InteractionStateName } from '../constant';
 import type { PALETTE_MAP } from '../constant/theme';
-import type { DeepRequired } from './util';
+import type { DeepRequired } from './type-utils';
 
 // 文本内容的水平对齐方式, 默认 left
 export type TextAlign = 'left' | 'center' | 'right';
diff --git a/packages/s2-core/src/common/interface/util.ts b/packages/s2-core/src/common/interface/type-utils.ts
similarity index 62%
rename from packages/s2-core/src/common/interface/util.ts
rename to packages/s2-core/src/common/interface/type-utils.ts
index 399fc8d14d..132fbd1a27 100644
--- a/packages/s2-core/src/common/interface/util.ts
+++ b/packages/s2-core/src/common/interface/type-utils.ts
@@ -1,3 +1,7 @@
+export type PickEssential<O> = {
+  [K in keyof O as Pick<Partial<O>, K> extends Pick<O, K> ? never : K]: O[K];
+};
+
 export type DeepRequired<T extends Record<string, any>> = {
   [K in keyof T]-?: NonNullable<T[K]> extends Record<string, any>
     ? DeepRequired<NonNullable<T[K]>>
diff --git a/packages/s2-core/src/common/interface/utils.ts b/packages/s2-core/src/common/interface/utils.ts
deleted file mode 100644
index 503aba346b..0000000000
--- a/packages/s2-core/src/common/interface/utils.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type PickEssential<O> = {
-  [K in keyof O as Pick<Partial<O>, K> extends Pick<O, K> ? never : K]: O[K];
-};
diff --git a/packages/s2-core/src/utils/dataset/pivot-data-set.ts b/packages/s2-core/src/utils/dataset/pivot-data-set.ts
index 013c4654df..356431fb3e 100644
--- a/packages/s2-core/src/utils/dataset/pivot-data-set.ts
+++ b/packages/s2-core/src/utils/dataset/pivot-data-set.ts
@@ -23,7 +23,7 @@ import {
   TOTAL_VALUE,
 } from '../../common/constant';
 import type { Meta } from '../../common/interface/basic';
-import type { PickEssential } from '../../common/interface/utils';
+import type { PickEssential } from '../../common/interface/type-utils';
 import type { CellData } from '../../data-set/cell-data';
 import type {
   DataPath,

From bf24a91e0dc3e55f61daab10e9436a5f920a9f77 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Tue, 30 Jan 2024 11:46:06 +0800
Subject: [PATCH 37/64] =?UTF-8?q?refactor:=20=E5=A4=9A=E8=A1=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E9=85=8D=E7=BD=AE=E4=BB=8E=20theme=20=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=88=B0=20s2Option.style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../s2-core/__tests__/bugs/issue-2359-spec.ts |   3 +-
 .../multi-line-text-spec.ts.snap              |  14 +-
 .../__snapshots__/theme-spec.ts.snap          | 234 ------------------
 .../spreadsheet/multi-line-text-spec.ts       | 112 ++++-----
 .../row-column-resize-spec.ts.snap            | 144 +++++++++++
 .../interaction/row-column-resize-spec.ts     | 118 ++-------
 .../utils/__snapshots__/merge-spec.ts.snap    | 108 ++++++++
 .../__tests__/unit/utils/merge-spec.ts        |  88 +------
 packages/s2-core/src/cell/base-cell.ts        |  14 +-
 packages/s2-core/src/cell/data-cell.ts        |   6 +-
 packages/s2-core/src/cell/header-cell.ts      |   8 +-
 .../s2-core/src/cell/series-number-cell.ts    |  18 +-
 packages/s2-core/src/cell/table-col-cell.ts   |   8 +-
 .../src/cell/table-series-number-cell.ts      |  10 +-
 .../s2-core/src/common/constant/options.ts    |  15 +-
 .../s2-core/src/common/interface/style.ts     |  33 ++-
 .../s2-core/src/common/interface/theme.ts     |   3 -
 packages/s2-core/src/facet/base-facet.ts      |   2 -
 packages/s2-core/src/theme/index.ts           |  46 +---
 .../playground/components/ResizeConfig.tsx    |  32 ++-
 .../utils/__snapshots__/options-spec.ts.snap  | 108 ++++++++
 .../s2-shared/__tests__/utils/options-spec.ts |  88 +------
 s2-site/.dumirc.ts                            |  24 +-
 s2-site/docs/api/basic-class/base-cell.zh.md  |   3 +-
 s2-site/docs/api/general/S2Event.zh.md        |  14 +-
 s2-site/docs/api/general/S2Theme.zh.md        |   3 -
 s2-site/docs/common/copy-export.zh.md         |   4 +-
 s2-site/docs/common/style.zh.md               |  35 ++-
 .../docs/manual/advanced/chart-in-cell.zh.md  |   4 +-
 .../docs/manual/basic/multi-line-text.zh.md   |  46 ++--
 s2-site/docs/manual/basic/theme.zh.md         |  23 +-
 .../data-process/pivot.en.md                  |   0
 .../data-process/pivot.zh.md                  |   0
 .../data-process/table.en.md                  |   0
 .../data-process/table.zh.md                  |   0
 .../performance.en.md                         |   2 +-
 .../performance.zh.md                         |   2 +-
 s2-site/docs/manual/migration-v2.en.md        |   2 +-
 s2-site/docs/manual/migration-v2.zh.md        |  42 ----
 .../custom/custom-cell/demo/mini-chart.ts     |   1 -
 .../custom/custom-layout/demo/custom-facet.ts |   2 +-
 .../interaction/advanced/demo/intercepts.ts   |   2 +-
 .../interaction/advanced/demo/meta.json       |   2 +-
 .../interaction/basic/demo/copy-export.ts     |   7 +-
 .../examples/interaction/basic/demo/meta.json |  19 +-
 .../layout/custom/demo/multi-line-text.ts     |  49 ++--
 46 files changed, 668 insertions(+), 830 deletions(-)
 create mode 100644 packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap
 create mode 100644 packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
 create mode 100644 packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
 rename s2-site/docs/manual/{advanced => extended-reading}/data-process/pivot.en.md (100%)
 rename s2-site/docs/manual/{advanced => extended-reading}/data-process/pivot.zh.md (100%)
 rename s2-site/docs/manual/{advanced => extended-reading}/data-process/table.en.md (100%)
 rename s2-site/docs/manual/{advanced => extended-reading}/data-process/table.zh.md (100%)
 rename s2-site/docs/manual/{advanced => extended-reading}/performance.en.md (99%)
 rename s2-site/docs/manual/{advanced => extended-reading}/performance.zh.md (99%)

diff --git a/packages/s2-core/__tests__/bugs/issue-2359-spec.ts b/packages/s2-core/__tests__/bugs/issue-2359-spec.ts
index ea393dadc6..a5b5d70d96 100644
--- a/packages/s2-core/__tests__/bugs/issue-2359-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-2359-spec.ts
@@ -47,6 +47,7 @@ describe('Table Sheet Custom Multiple Values Tests', () => {
         },
       },
     });
+
     await s2.render();
 
     const mapTheme = (cell: S2CellType) => {
@@ -56,11 +57,9 @@ describe('Table Sheet Custom Multiple Values Tests', () => {
     };
 
     const colCellTexts = s2.facet.getColCells().map(mapTheme);
-
     const dataCellTexts = s2.facet.getDataCells().map(mapTheme);
 
     expect(colCellTexts).toMatchSnapshot();
-
     expect(dataCellTexts).toMatchSnapshot();
   });
 });
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap
index f9206280f8..3c0f82550e 100644
--- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap
@@ -2526,12 +2526,12 @@ Array [
     "width": 96,
   },
   Object {
-    "actualText": "数量数量数😸",
+    "actualText": "数量数@@@",
     "actualTextHeight": 15,
     "actualTextWidth": 73,
     "height": 30,
     "multiLineActualTexts": Array [
-      "数量数量数😸",
+      "数量数@@@",
     ],
     "originalText": "数量数量数量数量数量数量数量数量数量数量数量",
     "width": 96,
@@ -2548,12 +2548,12 @@ Array [
     "width": 96,
   },
   Object {
-    "actualText": "数量数量数😸",
+    "actualText": "数量数@@@",
     "actualTextHeight": 15,
     "actualTextWidth": 73,
     "height": 30,
     "multiLineActualTexts": Array [
-      "数量数量数😸",
+      "数量数@@@",
     ],
     "originalText": "数量数量数量数量数量数量数量数量数量数量数量",
     "width": 96,
@@ -2575,12 +2575,12 @@ Array [
     "width": 96,
   },
   Object {
-    "actualText": "浙我是省略号",
+    "actualText": "浙江省@@@",
     "actualTextHeight": 16,
-    "actualTextWidth": 73,
+    "actualTextWidth": 72,
     "height": 30,
     "multiLineActualTexts": Array [
-      "浙我是省略号",
+      "浙江省@@@",
     ],
     "originalText": "浙江省浙江省浙江省浙江省浙江省浙江省浙江省浙江省浙江省浙江省",
     "width": 96,
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
index 81c158e752..31774e852c 100644
--- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
@@ -12,12 +12,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#3471F9",
@@ -79,24 +76,18 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#FFFFFF",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "cornerCell": Object {
@@ -105,12 +96,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#3471F9",
@@ -142,12 +130,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "dataCell": Object {
@@ -157,12 +142,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#2C60D4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FFFFFF",
@@ -272,12 +254,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#2C60D4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -287,12 +266,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#2C60D4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FFFFFF",
@@ -402,12 +378,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#2C60D4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -440,12 +413,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#2C60D4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#F5F8FF",
@@ -506,12 +476,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#2C60D4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "seriesNumberWidth": 80,
     "seriesText": Object {
@@ -520,12 +487,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#2C60D4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#000000",
@@ -533,12 +497,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#2C60D4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
@@ -581,12 +542,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#133aad",
@@ -648,24 +606,18 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#ffffff",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "cornerCell": Object {
@@ -674,12 +626,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#133aad",
@@ -711,12 +660,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "dataCell": Object {
@@ -726,12 +672,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#191919",
@@ -841,12 +784,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -856,12 +796,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#191919",
@@ -971,12 +908,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -1009,12 +943,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#151a27",
@@ -1075,12 +1006,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "seriesNumberWidth": 80,
     "seriesText": Object {
@@ -1089,12 +1017,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#dcdcdc",
@@ -1102,12 +1027,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
@@ -1150,12 +1072,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#E0E9FD",
@@ -1217,24 +1136,18 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "cornerCell": Object {
@@ -1243,12 +1156,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#E0E9FD",
@@ -1280,12 +1190,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "dataCell": Object {
@@ -1295,12 +1202,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FFFFFF",
@@ -1410,12 +1314,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -1425,12 +1326,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FFFFFF",
@@ -1540,12 +1438,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -1578,12 +1473,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#F5F8FE",
@@ -1644,12 +1536,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "seriesNumberWidth": 80,
     "seriesText": Object {
@@ -1658,12 +1547,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#000000",
@@ -1671,12 +1557,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
@@ -1719,12 +1602,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#F0F2F4",
@@ -1786,24 +1666,18 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "cornerCell": Object {
@@ -1812,12 +1686,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#F0F2F4",
@@ -1849,12 +1720,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "dataCell": Object {
@@ -1864,12 +1732,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FFFFFF",
@@ -1979,12 +1844,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -1994,12 +1856,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FFFFFF",
@@ -2109,12 +1968,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -2147,12 +2003,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FAFBFB",
@@ -2213,12 +2066,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "seriesNumberWidth": 80,
     "seriesText": Object {
@@ -2227,12 +2077,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#000000",
@@ -2240,12 +2087,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
@@ -2288,12 +2132,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#E0E9FD",
@@ -2355,24 +2196,18 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "cornerCell": Object {
@@ -2381,12 +2216,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#E0E9FD",
@@ -2418,12 +2250,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "dataCell": Object {
@@ -2433,12 +2262,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FFFFFF",
@@ -2548,12 +2374,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -2563,12 +2386,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FFFFFF",
@@ -2678,12 +2498,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -2716,12 +2533,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#F5F8FE",
@@ -2782,12 +2596,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "seriesNumberWidth": 80,
     "seriesText": Object {
@@ -2796,12 +2607,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#000000",
@@ -2809,12 +2617,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
@@ -2857,12 +2662,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#E0E9FD",
@@ -2924,24 +2726,18 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "cornerCell": Object {
@@ -2950,12 +2746,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#E0E9FD",
@@ -2987,12 +2780,9 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "dataCell": Object {
@@ -3002,12 +2792,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FFFFFF",
@@ -3117,12 +2904,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -3132,12 +2916,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#FFFFFF",
@@ -3247,12 +3028,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -3285,12 +3063,9 @@ Object {
       "fontSize": 12,
       "fontWeight": 700,
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "cell": Object {
       "backgroundColor": "#F5F8FE",
@@ -3351,12 +3126,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "seriesNumberWidth": 80,
     "seriesText": Object {
@@ -3365,12 +3137,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
     "text": Object {
       "fill": "#000000",
@@ -3378,12 +3147,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
diff --git a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
index d2e48ca6ea..8009c7c80e 100644
--- a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
@@ -1,7 +1,11 @@
 /* eslint-disable jest/expect-expect */
 import { getContainer } from 'tests/util/helpers';
 import { PivotSheet, TableSheet, type SpreadSheet } from '../../src';
-import type { DefaultCellTheme, S2CellType, S2Options } from '../../src/common';
+import type {
+  CellTextWordWrapStyle,
+  S2CellType,
+  S2Options,
+} from '../../src/common';
 import {
   PivotSheetMultiLineTextDataCfg,
   TableSheetMultiLineTextDataCfg,
@@ -27,25 +31,19 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     });
   };
 
-  const updateTheme = (maxLines: number) => {
-    const cellTheme: DefaultCellTheme = {
-      text: {
-        maxLines,
-      },
-      bolderText: {
-        maxLines,
-      },
-      measureText: {
-        maxLines,
-      },
+  const updateStyle = (maxLines: number) => {
+    const cellStyle: CellTextWordWrapStyle = {
+      maxLines,
     };
 
-    s2.setTheme({
-      seriesNumberCell: cellTheme,
-      colCell: cellTheme,
-      cornerCell: cellTheme,
-      rowCell: cellTheme,
-      dataCell: cellTheme,
+    s2.setOptions({
+      style: {
+        seriesNumberCell: cellStyle,
+        colCell: cellStyle,
+        cornerCell: cellStyle,
+        rowCell: cellStyle,
+        dataCell: cellStyle,
+      },
     });
   };
 
@@ -126,7 +124,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     });
 
     test('should custom two max text lines', async () => {
-      updateTheme(2);
+      updateStyle(2);
       await s2.render(false);
 
       getCells().forEach((cells) => {
@@ -136,7 +134,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     });
 
     test('should custom three max text lines', async () => {
-      updateTheme(3);
+      updateStyle(3);
       await s2.render(false);
 
       getCells().forEach((cells) => {
@@ -147,27 +145,19 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     });
 
     test('should render custom text overflow text', async () => {
-      const cellTheme: DefaultCellTheme = {
-        text: {
-          textOverflow: '@@@',
-          maxLines: 1,
-        },
-        bolderText: {
-          textOverflow: '我是省略号',
-          maxLines: 1,
-        },
-        measureText: {
-          textOverflow: '😸',
-          maxLines: 1,
-        },
+      const cellTheme: CellTextWordWrapStyle = {
+        textOverflow: '@@@',
+        maxLines: 1,
       };
 
-      s2.setTheme({
-        seriesNumberCell: cellTheme,
-        colCell: cellTheme,
-        cornerCell: cellTheme,
-        rowCell: cellTheme,
-        dataCell: cellTheme,
+      s2.setOptions({
+        style: {
+          seriesNumberCell: cellTheme,
+          colCell: cellTheme,
+          cornerCell: cellTheme,
+          rowCell: cellTheme,
+          dataCell: cellTheme,
+        },
       });
       await s2.render(false);
 
@@ -178,24 +168,18 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     });
 
     test('should not render word wrap text', async () => {
-      const cellTheme: DefaultCellTheme = {
-        text: {
-          wordWrap: false,
-        },
-        bolderText: {
-          wordWrap: false,
-        },
-        measureText: {
-          wordWrap: false,
-        },
+      const cellTheme: CellTextWordWrapStyle = {
+        wordWrap: false,
       };
 
-      s2.setTheme({
-        seriesNumberCell: cellTheme,
-        colCell: cellTheme,
-        cornerCell: cellTheme,
-        rowCell: cellTheme,
-        dataCell: cellTheme,
+      s2.setOptions({
+        style: {
+          seriesNumberCell: cellTheme,
+          colCell: cellTheme,
+          cornerCell: cellTheme,
+          rowCell: cellTheme,
+          dataCell: cellTheme,
+        },
       });
       await s2.render(false);
 
@@ -228,7 +212,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
         },
       });
 
-      updateTheme(2);
+      updateStyle(2);
       await s2.render(false);
 
       getCells().forEach((cells) => {
@@ -254,7 +238,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
         },
       });
 
-      updateTheme(2);
+      updateStyle(2);
       await s2.render(false);
 
       [
@@ -282,7 +266,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
 
     test('should render correctly layout if enable totals for multiple text lines', async () => {
       setupTotalsOptions();
-      updateTheme(3);
+      updateStyle(3);
       await s2.render(false);
 
       expectHierarchyHeight(165, 112, 53);
@@ -311,7 +295,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
         },
       });
 
-      updateTheme(1);
+      updateStyle(1);
       await s2.render(false);
 
       getCells().forEach((cells) => {
@@ -349,7 +333,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     });
 
     test('should custom two max text lines', async () => {
-      updateTheme(2);
+      updateStyle(2);
       await s2.render(false);
 
       getCells().forEach((cells) => {
@@ -359,7 +343,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     });
 
     test('should custom three max text lines', async () => {
-      updateTheme(3);
+      updateStyle(3);
       await s2.render(false);
 
       getCells().forEach((cells) => {
@@ -381,7 +365,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
         },
       });
 
-      updateTheme(2);
+      updateStyle(2);
       await s2.render(false);
 
       getCells().forEach((cells) => {
@@ -401,7 +385,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
         },
       });
 
-      updateTheme(2);
+      updateStyle(2);
       await s2.render(false);
 
       [s2.facet.getColLeafCells()].forEach((cells) => {
@@ -418,7 +402,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     test.skip.each([1, 2, 3, 4, 5])(
       'should always render default cell height when set %s line, but actual text not wrap',
       async (maxLines) => {
-        updateTheme(maxLines);
+        updateStyle(maxLines);
 
         s2.setDataCfg(SimpleDataCfg);
         await s2.render();
diff --git a/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap b/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap
new file mode 100644
index 0000000000..38bc0fd437
--- /dev/null
+++ b/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap
@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Interaction Row Column Resize Tests should get horizontal filed resize style by field for all resize type and table mode 1`] = `
+Object {
+  "height": 30,
+  "heightByField": null,
+  "maxLines": 1,
+  "textOverflow": "ellipsis",
+  "width": 5,
+  "widthByField": Object {
+    "testField": 5,
+  },
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should get horizontal filed resize style by field for current resize type 1`] = `
+Object {
+  "height": 30,
+  "heightByField": null,
+  "maxLines": 1,
+  "textOverflow": "ellipsis",
+  "width": null,
+  "widthByField": Object {
+    "testFieldId": 5,
+  },
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should get horizontal filed resize style by field for current resize type and table mode 1`] = `
+Object {
+  "height": 30,
+  "heightByField": null,
+  "maxLines": 1,
+  "textOverflow": "ellipsis",
+  "width": null,
+  "widthByField": Object {
+    "testField": 5,
+  },
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should get vertical cell resize style 1`] = `
+Object {
+  "height": 2,
+  "heightByField": Object {
+    "testField": 2,
+  },
+  "maxLines": 1,
+  "showTreeLeafNodeAlignDot": false,
+  "textOverflow": "ellipsis",
+  "widthByField": null,
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should get vertical cell resize style 2`] = `
+Object {
+  "height": 30,
+  "heightByField": null,
+  "maxLines": 1,
+  "textOverflow": "ellipsis",
+  "widthByField": null,
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should get vertical cell resize style 3`] = `
+Object {
+  "height": 30,
+  "maxLines": 1,
+  "textOverflow": "ellipsis",
+  "width": 96,
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should get vertical filed resize style by field for current resize type 1`] = `
+Object {
+  "height": null,
+  "heightByField": Object {
+    "testFieldId": 2,
+  },
+  "maxLines": 1,
+  "showTreeLeafNodeAlignDot": false,
+  "textOverflow": "ellipsis",
+  "widthByField": null,
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should get vertical filed resize style by rowId for table mode 1`] = `
+Object {
+  "height": 2,
+  "heightByField": Object {
+    "0": 2,
+  },
+  "maxLines": 1,
+  "showTreeLeafNodeAlignDot": false,
+  "textOverflow": "ellipsis",
+  "widthByField": null,
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should rerender by resize col cell 1`] = `
+Object {
+  "height": 30,
+  "heightByField": null,
+  "maxLines": 1,
+  "textOverflow": "ellipsis",
+  "width": 42,
+  "widthByField": Object {
+    "testField": 42,
+  },
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should rerender by resize row cell 1`] = `
+Object {
+  "height": 2,
+  "heightByField": Object {
+    "testField": 2,
+  },
+  "maxLines": 1,
+  "showTreeLeafNodeAlignDot": false,
+  "textOverflow": "ellipsis",
+  "widthByField": null,
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should rerender by resize row cell 2`] = `
+Object {
+  "height": 30,
+  "maxLines": 1,
+  "textOverflow": "ellipsis",
+  "width": 96,
+  "wordWrap": true,
+}
+`;
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 8953d35524..cbd8277cd4 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
@@ -319,14 +319,7 @@ describe('Interaction Row Column Resize Tests', () => {
     expect(colWidthResize).toHaveBeenLastCalledWith(resizeDetail);
 
     // update style options
-    expect(s2.options.style!.colCell).toEqual({
-      width: resizeInfo.resizedWidth!,
-      height: 30,
-      heightByField: null,
-      widthByField: {
-        [resizeInfo.meta.field!]: resizeInfo.resizedWidth!,
-      },
-    });
+    expect(s2.options.style!.colCell).toMatchSnapshot();
 
     // mark resized flag for rerender
     expect(s2.store.get('resized')).toBeTruthy();
@@ -441,18 +434,8 @@ describe('Interaction Row Column Resize Tests', () => {
     expect(rowWidthResize).toHaveBeenLastCalledWith(resizeDetail);
 
     // update style options
-    expect(s2.options.style!.rowCell).toEqual({
-      height: 2,
-      heightByField: {
-        [resizeInfo.meta.field!]: 2,
-      },
-      widthByField: null,
-      showTreeLeafNodeAlignDot: false,
-    });
-    expect(s2.options.style!.dataCell).toEqual({
-      width: 96,
-      height: 30,
-    });
+    expect(s2.options.style!.rowCell).toMatchSnapshot();
+    expect(s2.options.style!.dataCell).toMatchSnapshot();
 
     // mark resized flag for rerender
     expect(s2.store.get('resized')).toBeTruthy();
@@ -577,28 +560,11 @@ describe('Interaction Row Column Resize Tests', () => {
   });
 
   test('should get vertical cell resize style', () => {
-    const resizeInfo = emitResize(
-      ResizeDirectionType.Vertical,
-      ResizeAreaEffect.Cell,
-    );
+    emitResize(ResizeDirectionType.Vertical, ResizeAreaEffect.Cell);
 
-    expect(s2.options.style!.rowCell).toEqual({
-      height: 2,
-      heightByField: {
-        [resizeInfo.meta.field!]: 2,
-      },
-      widthByField: null,
-      showTreeLeafNodeAlignDot: false,
-    });
-    expect(s2.options.style!.colCell).toEqual({
-      height: 30,
-      heightByField: null,
-      widthByField: null,
-    });
-    expect(s2.options.style!.dataCell).toEqual({
-      width: 96,
-      height: 30,
-    });
+    expect(s2.options.style!.rowCell).toMatchSnapshot();
+    expect(s2.options.style!.colCell).toMatchSnapshot();
+    expect(s2.options.style!.dataCell).toMatchSnapshot();
   });
 
   test('should get vertical filed resize style', () => {
@@ -687,19 +653,9 @@ describe('Interaction Row Column Resize Tests', () => {
       },
     });
 
-    const resizeInfo = emitResize(
-      ResizeDirectionType.Horizontal,
-      ResizeAreaEffect.Cell,
-    );
+    emitResize(ResizeDirectionType.Horizontal, ResizeAreaEffect.Cell);
 
-    expect(s2.options.style!.colCell).toEqual({
-      height: 30,
-      heightByField: null,
-      width: null,
-      widthByField: {
-        [resizeInfo.meta.id]: resizeInfo.width,
-      },
-    });
+    expect(s2.options.style!.colCell).toMatchSnapshot();
   });
 
   test('should get vertical filed resize style by field for current resize type', () => {
@@ -711,19 +667,9 @@ describe('Interaction Row Column Resize Tests', () => {
       },
     });
 
-    const resizeInfo = emitResize(
-      ResizeDirectionType.Vertical,
-      ResizeAreaEffect.Cell,
-    );
+    emitResize(ResizeDirectionType.Vertical, ResizeAreaEffect.Cell);
 
-    expect(s2.options.style!.rowCell).toEqual({
-      widthByField: null,
-      height: null,
-      heightByField: {
-        [resizeInfo.meta.id]: resizeInfo.height,
-      },
-      showTreeLeafNodeAlignDot: false,
-    });
+    expect(s2.options.style!.rowCell).toMatchSnapshot();
   });
 
   test('should set no drop cursor and gray guide line if disable resize', () => {
@@ -820,19 +766,9 @@ describe('Interaction Row Column Resize Tests', () => {
   test('should get vertical filed resize style by rowId for table mode', () => {
     jest.spyOn(s2, 'isTableMode').mockImplementationOnce(() => true);
 
-    const resizeInfo = emitResize(
-      ResizeDirectionType.Vertical,
-      ResizeAreaEffect.Cell,
-    );
+    emitResize(ResizeDirectionType.Vertical, ResizeAreaEffect.Cell);
 
-    expect(s2.options.style!.rowCell).toEqual({
-      height: 2,
-      heightByField: {
-        [resizeInfo.meta.rowId]: 2,
-      },
-      widthByField: null,
-      showTreeLeafNodeAlignDot: false,
-    });
+    expect(s2.options.style!.rowCell).toMatchSnapshot();
   });
 
   test('should get horizontal filed resize style by field for current resize type and table mode', () => {
@@ -843,19 +779,9 @@ describe('Interaction Row Column Resize Tests', () => {
     };
     jest.spyOn(s2, 'isTableMode').mockImplementationOnce(() => true);
 
-    const resizeInfo = emitResize(
-      ResizeDirectionType.Horizontal,
-      ResizeAreaEffect.Cell,
-    );
+    emitResize(ResizeDirectionType.Horizontal, ResizeAreaEffect.Cell);
 
-    expect(s2.options.style!.colCell).toEqual({
-      height: 30,
-      heightByField: null,
-      width: null,
-      widthByField: {
-        [resizeInfo.meta.field!]: 5,
-      },
-    });
+    expect(s2.options.style!.colCell).toMatchSnapshot();
   });
 
   test('should get horizontal filed resize style by field for all resize type and table mode', () => {
@@ -866,18 +792,8 @@ describe('Interaction Row Column Resize Tests', () => {
     };
     jest.spyOn(s2, 'isTableMode').mockImplementationOnce(() => true);
 
-    const resizeInfo = emitResize(
-      ResizeDirectionType.Horizontal,
-      ResizeAreaEffect.Cell,
-    );
+    emitResize(ResizeDirectionType.Horizontal, ResizeAreaEffect.Cell);
 
-    expect(s2.options.style!.colCell).toEqual({
-      height: 30,
-      heightByField: null,
-      width: 5,
-      widthByField: {
-        [resizeInfo.meta.field!]: 5,
-      },
-    });
+    expect(s2.options.style!.colCell).toMatchSnapshot();
   });
 });
diff --git a/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
new file mode 100644
index 0000000000..17e1e4c96f
--- /dev/null
+++ b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`merge test should get safety options 1`] = `
+Object {
+  "conditions": Object {},
+  "cornerExtraFieldText": "",
+  "cornerText": "",
+  "customSVGIcons": Array [],
+  "debug": false,
+  "device": "pc",
+  "frozen": Object {
+    "colCount": 0,
+    "rowCount": 0,
+    "rowHeader": true,
+    "trailingColCount": 0,
+    "trailingRowCount": 0,
+  },
+  "hdAdapter": true,
+  "headerActionIcons": Array [],
+  "height": 480,
+  "hierarchyType": "grid",
+  "interaction": Object {
+    "autoResetSheetStyle": true,
+    "brushSelection": Object {
+      "colCell": false,
+      "dataCell": true,
+      "rowCell": false,
+    },
+    "eventListenerOptions": false,
+    "hiddenColumnFields": Array [],
+    "hoverFocus": Object {
+      "duration": 800,
+    },
+    "hoverHighlight": true,
+    "linkFields": Array [],
+    "multiSelection": true,
+    "overscrollBehavior": "auto",
+    "rangeSelection": true,
+    "resize": Object {
+      "colCellHorizontal": true,
+      "colCellVertical": true,
+      "colResizeType": "current",
+      "cornerCellHorizontal": true,
+      "rowCellVertical": true,
+      "rowResizeType": "current",
+    },
+    "scrollSpeedRatio": Object {
+      "horizontal": 1,
+      "vertical": 1,
+    },
+    "scrollbarPosition": "content",
+    "selectedCellHighlight": false,
+    "selectedCellsSpotlight": false,
+  },
+  "placeholder": "-",
+  "showDefaultHeaderActionIcon": false,
+  "showSeriesNumber": false,
+  "style": Object {
+    "colCell": Object {
+      "height": 30,
+      "heightByField": null,
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "widthByField": null,
+      "wordWrap": true,
+    },
+    "cornerCell": Object {
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "wordWrap": true,
+    },
+    "dataCell": Object {
+      "height": 30,
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "width": 96,
+      "wordWrap": true,
+    },
+    "layoutWidthType": "adaptive",
+    "rowCell": Object {
+      "heightByField": null,
+      "maxLines": 1,
+      "showTreeLeafNodeAlignDot": false,
+      "textOverflow": "ellipsis",
+      "widthByField": null,
+      "wordWrap": true,
+    },
+    "seriesNumberCell": Object {
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "wordWrap": true,
+    },
+  },
+  "tooltip": Object {
+    "autoAdjustBoundary": "body",
+    "enable": false,
+    "operation": Object {
+      "hiddenColumns": false,
+      "menu": Object {
+        "items": Array [],
+      },
+      "sort": false,
+    },
+  },
+  "totals": Object {},
+  "width": 600,
+}
+`;
diff --git a/packages/s2-core/__tests__/unit/utils/merge-spec.ts b/packages/s2-core/__tests__/unit/utils/merge-spec.ts
index 6ebe33c4ac..a7bfb4a191 100644
--- a/packages/s2-core/__tests__/unit/utils/merge-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/merge-spec.ts
@@ -176,93 +176,7 @@ describe('merge test', () => {
 
   test('should get safety options', () => {
     // 加这个测试可以防止 本地跑 demo 修改了默认配置 直接提交
-    expect(getSafetyOptions(null)).toMatchInlineSnapshot(`
-      Object {
-        "conditions": Object {},
-        "cornerExtraFieldText": "",
-        "cornerText": "",
-        "customSVGIcons": Array [],
-        "debug": false,
-        "device": "pc",
-        "frozen": Object {
-          "colCount": 0,
-          "rowCount": 0,
-          "rowHeader": true,
-          "trailingColCount": 0,
-          "trailingRowCount": 0,
-        },
-        "hdAdapter": true,
-        "headerActionIcons": Array [],
-        "height": 480,
-        "hierarchyType": "grid",
-        "interaction": Object {
-          "autoResetSheetStyle": true,
-          "brushSelection": Object {
-            "colCell": false,
-            "dataCell": true,
-            "rowCell": false,
-          },
-          "eventListenerOptions": false,
-          "hiddenColumnFields": Array [],
-          "hoverFocus": Object {
-            "duration": 800,
-          },
-          "hoverHighlight": true,
-          "linkFields": Array [],
-          "multiSelection": true,
-          "overscrollBehavior": "auto",
-          "rangeSelection": true,
-          "resize": Object {
-            "colCellHorizontal": true,
-            "colCellVertical": true,
-            "colResizeType": "current",
-            "cornerCellHorizontal": true,
-            "rowCellVertical": true,
-            "rowResizeType": "current",
-          },
-          "scrollSpeedRatio": Object {
-            "horizontal": 1,
-            "vertical": 1,
-          },
-          "scrollbarPosition": "content",
-          "selectedCellHighlight": false,
-          "selectedCellsSpotlight": false,
-        },
-        "placeholder": "-",
-        "showDefaultHeaderActionIcon": false,
-        "showSeriesNumber": false,
-        "style": Object {
-          "colCell": Object {
-            "height": 30,
-            "heightByField": null,
-            "widthByField": null,
-          },
-          "dataCell": Object {
-            "height": 30,
-            "width": 96,
-          },
-          "layoutWidthType": "adaptive",
-          "rowCell": Object {
-            "heightByField": null,
-            "showTreeLeafNodeAlignDot": false,
-            "widthByField": null,
-          },
-        },
-        "tooltip": Object {
-          "autoAdjustBoundary": "body",
-          "enable": false,
-          "operation": Object {
-            "hiddenColumns": false,
-            "menu": Object {
-              "items": Array [],
-            },
-            "sort": false,
-          },
-        },
-        "totals": Object {},
-        "width": 600,
-      }
-    `);
+    expect(getSafetyOptions(null)).toMatchSnapshot();
   });
 
   test('should get custom options', () => {
diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
index 3c9ce0cc0b..0d8b2696c2 100644
--- a/packages/s2-core/src/cell/base-cell.ts
+++ b/packages/s2-core/src/cell/base-cell.ts
@@ -1,7 +1,7 @@
 import type {
   DisplayObject,
-  Line,
   Image,
+  Line,
   PointLike,
   Polygon,
   Rect,
@@ -33,6 +33,7 @@ import type { GuiIcon } from '../common/icons/gui-icon';
 import {
   CellBorderPosition,
   CellClipBox,
+  type CellTextWordWrapStyle,
   type Condition,
   type ConditionMappingResult,
   type Conditions,
@@ -207,6 +208,17 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     return false;
   }
 
+  public getCellTextWordWrapStyle(cellType?: CellType): CellTextWordWrapStyle {
+    const { wordWrap, maxLines, textOverflow } = (this.spreadsheet.options
+      ?.style?.[cellType || this.cellType] || {}) as CellTextWordWrapStyle;
+
+    return {
+      wordWrap,
+      maxLines,
+      textOverflow,
+    };
+  }
+
   /**
    * 获取实际渲染的文本 (含省略号)
    */
diff --git a/packages/s2-core/src/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts
index 2ef1f17867..f50a7d5469 100644
--- a/packages/s2-core/src/cell/data-cell.ts
+++ b/packages/s2-core/src/cell/data-cell.ts
@@ -306,11 +306,15 @@ export class DataCell extends BaseCell<ViewMeta> {
   }
 
   protected getTextStyle(): TextTheme {
+    const textOverflowStyle = this.getCellTextWordWrapStyle();
     const { isTotals } = this.meta;
     const { dataCell } = this.theme;
     const textStyle = isTotals ? dataCell?.bolderText : dataCell?.text;
 
-    return this.getContainConditionMappingResultTextStyle(textStyle);
+    return this.getContainConditionMappingResultTextStyle({
+      ...textOverflowStyle,
+      ...textStyle,
+    });
   }
 
   protected drawConditionIntervalShape() {
diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts
index 0ad55dcc9a..9edae0b968 100644
--- a/packages/s2-core/src/cell/header-cell.ts
+++ b/packages/s2-core/src/cell/header-cell.ts
@@ -1,6 +1,6 @@
 import type {
-  DisplayObject,
   FederatedPointerEvent as CanvasEvent,
+  DisplayObject,
   PointLike,
 } from '@antv/g';
 import {
@@ -388,6 +388,7 @@ export abstract class HeaderCell<
   }
 
   protected getTextStyle(): TextTheme {
+    const textOverflowStyle = this.getCellTextWordWrapStyle();
     const { text, bolderText, measureText } = this.getStyle()!;
     let style: TextTheme | undefined;
 
@@ -399,7 +400,10 @@ export abstract class HeaderCell<
       style = text;
     }
 
-    return this.getContainConditionMappingResultTextStyle(style);
+    return this.getContainConditionMappingResultTextStyle({
+      ...textOverflowStyle,
+      ...style,
+    });
   }
 
   public getBackgroundColor() {
diff --git a/packages/s2-core/src/cell/series-number-cell.ts b/packages/s2-core/src/cell/series-number-cell.ts
index 7b190ceee8..79b20b51a8 100644
--- a/packages/s2-core/src/cell/series-number-cell.ts
+++ b/packages/s2-core/src/cell/series-number-cell.ts
@@ -1,9 +1,9 @@
 import type { PointLike } from '@antv/g';
-import type { TextTheme, FormatResult, AreaRange } from '../common/interface';
-import { CellBorderPosition, CellClipBox } from '../common/interface/basic';
 import { CellType } from '../common/constant/interaction';
-import type { Node } from '../facet/layout/node';
+import type { AreaRange, FormatResult } from '../common/interface';
+import { CellBorderPosition, CellClipBox } from '../common/interface/basic';
 import type { BaseHeaderConfig } from '../facet/header/interface';
+import type { Node } from '../facet/layout/node';
 import { getHorizontalTextIconPosition } from '../utils/cell/cell';
 import { adjustTextIconPositionWhileScrolling } from '../utils/cell/text-scrolling';
 import { normalizeTextAlign } from '../utils/normalize';
@@ -49,8 +49,16 @@ export class SeriesNumberCell extends BaseCell<Node> {
     /** 序号单元格暂时没有交互的联动 */
   }
 
-  protected getTextStyle(): TextTheme {
-    return this.getStyle()?.seriesText!;
+  protected getTextStyle() {
+    const textOverflowStyle = this.getCellTextWordWrapStyle(
+      CellType.SERIES_NUMBER_CELL,
+    );
+    const style = this.getStyle()?.seriesText!;
+
+    return {
+      ...textOverflowStyle,
+      ...style,
+    };
   }
 
   protected getFormattedFieldValue(): FormatResult {
diff --git a/packages/s2-core/src/cell/table-col-cell.ts b/packages/s2-core/src/cell/table-col-cell.ts
index 11cc2c1d99..5dbf055ce4 100644
--- a/packages/s2-core/src/cell/table-col-cell.ts
+++ b/packages/s2-core/src/cell/table-col-cell.ts
@@ -117,9 +117,13 @@ export class TableColCell extends ColCell {
   }
 
   protected getTextStyle() {
-    const style = this.getStyle();
+    const textOverflowStyle = this.getCellTextWordWrapStyle();
+    const style = this.getStyle()?.bolderText!;
 
-    return style?.bolderText!;
+    return {
+      ...textOverflowStyle,
+      ...style,
+    };
   }
 
   protected getHorizontalResizeAreaName() {
diff --git a/packages/s2-core/src/cell/table-series-number-cell.ts b/packages/s2-core/src/cell/table-series-number-cell.ts
index d5a0faef26..b1e0be0066 100644
--- a/packages/s2-core/src/cell/table-series-number-cell.ts
+++ b/packages/s2-core/src/cell/table-series-number-cell.ts
@@ -14,6 +14,14 @@ export class TableSeriesNumberCell extends TableDataCell {
   }
 
   protected getTextStyle(): TextTheme {
-    return this.theme.rowCell!.seriesText!;
+    const textOverflowStyle = this.getCellTextWordWrapStyle(
+      CellType.SERIES_NUMBER_CELL,
+    );
+    const style = this.theme.rowCell!.seriesText!;
+
+    return {
+      ...textOverflowStyle,
+      ...style,
+    };
   }
 }
diff --git a/packages/s2-core/src/common/constant/options.ts b/packages/s2-core/src/common/constant/options.ts
index 2dc5fa57b3..0613b48e1a 100644
--- a/packages/s2-core/src/common/constant/options.ts
+++ b/packages/s2-core/src/common/constant/options.ts
@@ -3,7 +3,7 @@ import {
   HOVER_FOCUS_DURATION,
   ScrollbarPositionType,
 } from '../constant/interaction';
-import type { S2Style } from '../interface';
+import type { CellTextWordWrapStyle, S2Style } from '../interface';
 import type { S2Options } from '../interface/s2Options';
 import { DeviceType } from '../interface/s2Options';
 import { EMPTY_PLACEHOLDER } from './basic';
@@ -14,7 +14,7 @@ export const MIN_DEVICE_PIXEL_RATIO = 1;
  * 布局类型：
  * adaptive: 行列等宽，均分整个 canvas 画布宽度
  * colAdaptive：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度
- * compact：行列紧凑布局，指标维度少的时候无法布满整个画布
+ * compact：行列紧凑布局，指标维度少的时候无法布满整个画布，列头宽度为实际内容宽度（取当前列最大值，采样每一列前 50 条数据
  */
 export enum LayoutWidthType {
   Adaptive = 'adaptive',
@@ -26,19 +26,30 @@ export const SPLIT_LINE_WIDTH = 1;
 
 export const DEFAULT_TREE_ROW_CELL_WIDTH = 120;
 
+export const DEFAULT_CELL_TEXT_WORD_WRAP_STYLE: CellTextWordWrapStyle = {
+  wordWrap: true,
+  maxLines: 1,
+  textOverflow: 'ellipsis',
+};
+
 export const DEFAULT_STYLE: S2Style = {
   layoutWidthType: LayoutWidthType.Adaptive,
+  seriesNumberCell: DEFAULT_CELL_TEXT_WORD_WRAP_STYLE,
+  cornerCell: DEFAULT_CELL_TEXT_WORD_WRAP_STYLE,
   rowCell: {
+    ...DEFAULT_CELL_TEXT_WORD_WRAP_STYLE,
     showTreeLeafNodeAlignDot: false,
     widthByField: null,
     heightByField: null,
   },
   colCell: {
+    ...DEFAULT_CELL_TEXT_WORD_WRAP_STYLE,
     height: 30,
     widthByField: null,
     heightByField: null,
   },
   dataCell: {
+    ...DEFAULT_CELL_TEXT_WORD_WRAP_STYLE,
     width: 96,
     height: 30,
   },
diff --git a/packages/s2-core/src/common/interface/style.ts b/packages/s2-core/src/common/interface/style.ts
index f3cce47eea..c3ec6db737 100644
--- a/packages/s2-core/src/common/interface/style.ts
+++ b/packages/s2-core/src/common/interface/style.ts
@@ -1,3 +1,4 @@
+import type { TextStyleProps } from '@antv/g';
 import type { Node } from '../../facet/layout/node';
 import type { LayoutWidthType } from '../constant';
 
@@ -37,7 +38,10 @@ export interface BaseCellStyle {
   heightByField?: Record<string, number> | null;
 }
 
-export interface DataCellStyle {
+export interface CellTextWordWrapStyle
+  extends Pick<TextStyleProps, 'wordWrap' | 'maxLines' | 'textOverflow'> {}
+
+export interface DataCellStyle extends CellTextWordWrapStyle {
   /**
    * 宽度
    */
@@ -55,11 +59,13 @@ export interface DataCellStyle {
      * 原始值字段
      */
     originalValueField?: string;
+
     /**
      * 每一列数值占单元格宽度百分比
      * @example [0.1, 0.3, 0.6]
      */
     widthPercent?: number[];
+
     /**
      * 是否显示原始值 (tooltip 中显示)
      */
@@ -67,7 +73,7 @@ export interface DataCellStyle {
   };
 }
 
-export interface RowCellStyle extends BaseCellStyle {
+export interface RowCellStyle extends BaseCellStyle, CellTextWordWrapStyle {
   /**
    * 是否展示树状分层下的层级占位点
    */
@@ -92,13 +98,19 @@ export interface RowCellStyle extends BaseCellStyle {
   expandDepth?: number | null;
 }
 
-export interface ColCellStyle extends BaseCellStyle {
+export interface ColCellStyle extends BaseCellStyle, CellTextWordWrapStyle {
   /**
    * 数值挂列头时, 是否隐藏数值 (即 s2DataConfig.fields.values 只有一个数值时生效)
    */
   hideValue?: boolean;
 }
 
+export interface CornerCellStyle extends CellTextWordWrapStyle {}
+
+export interface SeriesNumberCellStyle extends CellTextWordWrapStyle {}
+
+export interface MergedCellStyle extends CellTextWordWrapStyle {}
+
 export interface S2Style {
   /**
    * 布局类型
@@ -119,4 +131,19 @@ export interface S2Style {
    * 行头单元格配置
    */
   rowCell?: RowCellStyle | null;
+
+  /**
+   * 角头单元格配置
+   */
+  cornerCell?: CornerCellStyle | null;
+
+  /**
+   * 合并单元格配置
+   */
+  mergedCell?: MergedCellStyle | null;
+
+  /**
+   * 序号单元格配置
+   */
+  seriesNumberCell?: SeriesNumberCellStyle | null;
 }
diff --git a/packages/s2-core/src/common/interface/theme.ts b/packages/s2-core/src/common/interface/theme.ts
index 06bccdb352..dba4f65413 100644
--- a/packages/s2-core/src/common/interface/theme.ts
+++ b/packages/s2-core/src/common/interface/theme.ts
@@ -117,10 +117,7 @@ export interface TextTheme
       | 'fontWeight'
       | 'fill'
       | 'opacity'
-      | 'wordWrap'
-      | 'maxLines'
       | 'lineHeight'
-      | 'textOverflow'
       | 'fontStyle'
       | 'fontVariant'
     > {
diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
index 095ca8f45e..c3ab65cbc6 100644
--- a/packages/s2-core/src/facet/base-facet.ts
+++ b/packages/s2-core/src/facet/base-facet.ts
@@ -439,8 +439,6 @@ export abstract class BaseFacet {
       const originEvent = ev.originalEvent;
       const { deltaX, deltaY, x, y } = ev;
 
-      // The coordinates of mobile and pc are three times different
-      // TODO: 手指快速往上滚动时, deltaY 有时会为负数, 导致向下滚动时然后回弹, 看起来就像表格在抖动, 需要判断滚动方向, next 版本未复现
       this.onWheel({
         ...originEvent,
         deltaX,
diff --git a/packages/s2-core/src/theme/index.ts b/packages/s2-core/src/theme/index.ts
index 6ca136d7e1..fe2874c81b 100644
--- a/packages/s2-core/src/theme/index.ts
+++ b/packages/s2-core/src/theme/index.ts
@@ -1,15 +1,6 @@
 /* eslint-disable max-lines-per-function */
-import {
-  FONT_FAMILY,
-  INTERVAL_BAR_HEIGHT,
-  LayoutWidthType,
-} from '../common/constant';
-import type {
-  DefaultCellTheme,
-  S2Theme,
-  TextTheme,
-  ThemeCfg,
-} from '../common/interface';
+import { FONT_FAMILY, INTERVAL_BAR_HEIGHT } from '../common/constant';
+import type { DefaultCellTheme, S2Theme, ThemeCfg } from '../common/interface';
 import type { SpreadSheet } from '../sheet-type';
 import { isMobile, isWindows } from '../utils/is-mobile';
 import { getPalette } from '../utils/theme';
@@ -28,28 +19,8 @@ export const getTheme = (
   } = themeCfg?.palette || getPalette(themeCfg?.name);
 
   const isTable = themeCfg?.spreadsheet?.isTableMode();
-  const isCompactMode =
-    themeCfg?.spreadsheet?.getLayoutWidthType() === LayoutWidthType.Compact;
   const boldTextDefaultFontWeight = isWindows() ? 'bold' : 700;
 
-  const getHeaderCellTextOverflow = (): TextTheme => {
-    return {
-      wordWrap: true,
-      maxLines: 1,
-      textOverflow: 'ellipsis',
-    };
-  };
-
-  const getDataCellTextOverflow = (): TextTheme => {
-    return {
-      // 紧凑模式下文本内容自适应, 不显示省略号
-      wordWrap: !isCompactMode,
-      // 数值单元格不建议文字换行, 通常是展示数值, 会有歧义 (明细表除外, 自行覆盖主题配置)
-      maxLines: 1,
-      textOverflow: isCompactMode ? '' : 'ellipsis',
-    };
-  };
-
   const getDataCell = (): DefaultCellTheme => ({
     bolderText: {
       fontFamily: FONT_FAMILY,
@@ -60,7 +31,6 @@ export const getTheme = (
       textAlign: 'right',
       textBaseline: 'middle',
       linkTextFill: basicColors[6],
-      ...getDataCellTextOverflow(),
     },
     text: {
       fontFamily: FONT_FAMILY,
@@ -71,7 +41,6 @@ export const getTheme = (
       textAlign: 'right',
       textBaseline: 'middle',
       linkTextFill: basicColors[6],
-      ...getDataCellTextOverflow(),
     },
     cell: {
       // ----------- background color -----------
@@ -206,7 +175,6 @@ export const getTheme = (
         opacity: 1,
         textAlign: isTable ? 'center' : 'left',
         textBaseline: 'middle',
-        ...getHeaderCellTextOverflow(),
       },
       bolderText: {
         fontFamily: FONT_FAMILY,
@@ -216,7 +184,6 @@ export const getTheme = (
         opacity: 1,
         textAlign: isTable ? 'center' : 'right',
         textBaseline: 'middle',
-        ...getHeaderCellTextOverflow(),
       },
       cell: {
         // ----------- background color -----------
@@ -259,9 +226,6 @@ export const getTheme = (
         opacity: 1,
         textBaseline: 'middle',
         textAlign: 'center',
-        ...getHeaderCellTextOverflow(),
-        // 序号不换行
-        maxLines: 1,
       },
       measureText: {
         fontFamily: FONT_FAMILY,
@@ -272,7 +236,6 @@ export const getTheme = (
         opacity: 1,
         textAlign: isTable ? 'center' : 'left',
         textBaseline: 'middle',
-        ...getHeaderCellTextOverflow(),
       },
       bolderText: {
         fontFamily: FONT_FAMILY,
@@ -283,7 +246,6 @@ export const getTheme = (
         opacity: 1,
         textAlign: isTable ? 'center' : 'left',
         textBaseline: 'middle',
-        ...getHeaderCellTextOverflow(),
       },
       text: {
         fontFamily: FONT_FAMILY,
@@ -295,7 +257,6 @@ export const getTheme = (
         textBaseline: 'middle',
         // default align center for row cell in table mode
         textAlign: isTable ? 'center' : 'left',
-        ...getHeaderCellTextOverflow(),
       },
       cell: {
         // ----------- background color -----------
@@ -375,7 +336,6 @@ export const getTheme = (
         // 默认列头的数值字段和 dataCell 数值对齐
         textAlign: 'right',
         textBaseline: 'middle',
-        ...getHeaderCellTextOverflow(),
       },
       bolderText: {
         fontFamily: FONT_FAMILY,
@@ -385,7 +345,6 @@ export const getTheme = (
         opacity: 1,
         textAlign: 'center',
         textBaseline: 'middle',
-        ...getHeaderCellTextOverflow(),
       },
       text: {
         fontFamily: FONT_FAMILY,
@@ -395,7 +354,6 @@ export const getTheme = (
         opacity: 1,
         textAlign: 'center',
         textBaseline: 'middle',
-        ...getHeaderCellTextOverflow(),
       },
       cell: {
         // ----------- background color -----------
diff --git a/packages/s2-react/playground/components/ResizeConfig.tsx b/packages/s2-react/playground/components/ResizeConfig.tsx
index 6601c70472..04e7225239 100644
--- a/packages/s2-react/playground/components/ResizeConfig.tsx
+++ b/packages/s2-react/playground/components/ResizeConfig.tsx
@@ -1,7 +1,6 @@
 import {
   ResizeType,
   customMerge,
-  type DefaultCellTheme,
   type ResizeInteractionOptions,
   type S2Theme,
   type ThemeCfg,
@@ -96,25 +95,24 @@ export const ResizeConfig: React.FC<{
   const onMaxLinesChange = (e: RadioChangeEvent) => {
     const maxLines = e.target.value;
 
-    const cellTheme: DefaultCellTheme = {
-      text: {
-        maxLines,
-      },
-      bolderText: {
-        maxLines,
-      },
-      measureText: {
-        maxLines,
+    const updatedOptions: SheetComponentOptions = {
+      style: {
+        rowCell: {
+          maxLines,
+        },
+        colCell: {
+          maxLines,
+        },
+        cornerCell: {
+          maxLines,
+        },
+        dataCell: {
+          maxLines,
+        },
       },
     };
 
-    const theme: S2Theme = {
-      colCell: cellTheme,
-      rowCell: cellTheme,
-      cornerCell: cellTheme,
-    };
-
-    setThemeCfg((prev) => customMerge(prev, { theme }));
+    setOptions((prev) => customMerge(prev, updatedOptions));
 
     props.onMaxLinesChange?.(maxLines);
   };
diff --git a/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
new file mode 100644
index 0000000000..10cae86c57
--- /dev/null
+++ b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Options Tests should get safety options 1`] = `
+Object {
+  "conditions": Object {},
+  "cornerExtraFieldText": "",
+  "cornerText": "",
+  "customSVGIcons": Array [],
+  "debug": false,
+  "device": "pc",
+  "frozen": Object {
+    "colCount": 0,
+    "rowCount": 0,
+    "rowHeader": true,
+    "trailingColCount": 0,
+    "trailingRowCount": 0,
+  },
+  "hdAdapter": true,
+  "headerActionIcons": Array [],
+  "height": 480,
+  "hierarchyType": "grid",
+  "interaction": Object {
+    "autoResetSheetStyle": true,
+    "brushSelection": Object {
+      "colCell": false,
+      "dataCell": true,
+      "rowCell": false,
+    },
+    "eventListenerOptions": false,
+    "hiddenColumnFields": Array [],
+    "hoverFocus": Object {
+      "duration": 800,
+    },
+    "hoverHighlight": true,
+    "linkFields": Array [],
+    "multiSelection": true,
+    "overscrollBehavior": "auto",
+    "rangeSelection": true,
+    "resize": Object {
+      "colCellHorizontal": true,
+      "colCellVertical": true,
+      "colResizeType": "current",
+      "cornerCellHorizontal": true,
+      "rowCellVertical": true,
+      "rowResizeType": "current",
+    },
+    "scrollSpeedRatio": Object {
+      "horizontal": 1,
+      "vertical": 1,
+    },
+    "scrollbarPosition": "content",
+    "selectedCellHighlight": false,
+    "selectedCellsSpotlight": false,
+  },
+  "placeholder": "-",
+  "showDefaultHeaderActionIcon": true,
+  "showSeriesNumber": false,
+  "style": Object {
+    "colCell": Object {
+      "height": 30,
+      "heightByField": null,
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "widthByField": null,
+      "wordWrap": true,
+    },
+    "cornerCell": Object {
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "wordWrap": true,
+    },
+    "dataCell": Object {
+      "height": 30,
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "width": 96,
+      "wordWrap": true,
+    },
+    "layoutWidthType": "adaptive",
+    "rowCell": Object {
+      "heightByField": null,
+      "maxLines": 1,
+      "showTreeLeafNodeAlignDot": false,
+      "textOverflow": "ellipsis",
+      "widthByField": null,
+      "wordWrap": true,
+    },
+    "seriesNumberCell": Object {
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "wordWrap": true,
+    },
+  },
+  "tooltip": Object {
+    "autoAdjustBoundary": "body",
+    "enable": true,
+    "operation": Object {
+      "hiddenColumns": true,
+      "menu": Object {
+        "items": Array [],
+      },
+      "sort": true,
+    },
+  },
+  "totals": Object {},
+  "width": 600,
+}
+`;
diff --git a/packages/s2-shared/__tests__/utils/options-spec.ts b/packages/s2-shared/__tests__/utils/options-spec.ts
index 4b3315e387..c2b6520bb7 100644
--- a/packages/s2-shared/__tests__/utils/options-spec.ts
+++ b/packages/s2-shared/__tests__/utils/options-spec.ts
@@ -14,93 +14,7 @@ describe('Options Tests', () => {
   test('should get safety options', () => {
     const options = getBaseSheetComponentOptions();
 
-    expect(options).toMatchInlineSnapshot(`
-      Object {
-        "conditions": Object {},
-        "cornerExtraFieldText": "",
-        "cornerText": "",
-        "customSVGIcons": Array [],
-        "debug": false,
-        "device": "pc",
-        "frozen": Object {
-          "colCount": 0,
-          "rowCount": 0,
-          "rowHeader": true,
-          "trailingColCount": 0,
-          "trailingRowCount": 0,
-        },
-        "hdAdapter": true,
-        "headerActionIcons": Array [],
-        "height": 480,
-        "hierarchyType": "grid",
-        "interaction": Object {
-          "autoResetSheetStyle": true,
-          "brushSelection": Object {
-            "colCell": false,
-            "dataCell": true,
-            "rowCell": false,
-          },
-          "eventListenerOptions": false,
-          "hiddenColumnFields": Array [],
-          "hoverFocus": Object {
-            "duration": 800,
-          },
-          "hoverHighlight": true,
-          "linkFields": Array [],
-          "multiSelection": true,
-          "overscrollBehavior": "auto",
-          "rangeSelection": true,
-          "resize": Object {
-            "colCellHorizontal": true,
-            "colCellVertical": true,
-            "colResizeType": "current",
-            "cornerCellHorizontal": true,
-            "rowCellVertical": true,
-            "rowResizeType": "current",
-          },
-          "scrollSpeedRatio": Object {
-            "horizontal": 1,
-            "vertical": 1,
-          },
-          "scrollbarPosition": "content",
-          "selectedCellHighlight": false,
-          "selectedCellsSpotlight": false,
-        },
-        "placeholder": "-",
-        "showDefaultHeaderActionIcon": true,
-        "showSeriesNumber": false,
-        "style": Object {
-          "colCell": Object {
-            "height": 30,
-            "heightByField": null,
-            "widthByField": null,
-          },
-          "dataCell": Object {
-            "height": 30,
-            "width": 96,
-          },
-          "layoutWidthType": "adaptive",
-          "rowCell": Object {
-            "heightByField": null,
-            "showTreeLeafNodeAlignDot": false,
-            "widthByField": null,
-          },
-        },
-        "tooltip": Object {
-          "autoAdjustBoundary": "body",
-          "enable": true,
-          "operation": Object {
-            "hiddenColumns": true,
-            "menu": Object {
-              "items": Array [],
-            },
-            "sort": true,
-          },
-        },
-        "totals": Object {},
-        "width": 600,
-      }
-    `);
+    expect(options).toMatchSnapshot();
   });
 
   test('should get custom options', () => {
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 53a92a9d5d..4a9252de7d 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -146,14 +146,6 @@ export default defineConfig({
         },
         order: 4,
       },
-      {
-        slug: 'manual/advanced/data-process',
-        title: {
-          zh: '数据流处理',
-          en: 'Data Process',
-        },
-        order: 2,
-      },
       {
         slug: 'manual/advanced/layout',
         title: {
@@ -194,6 +186,22 @@ export default defineConfig({
         },
         order: 6,
       },
+      {
+        slug: 'manual/extended-reading',
+        title: {
+          zh: '扩展阅读',
+          en: 'extended-reading',
+        },
+        order: 6,
+      },
+      {
+        slug: 'manual/extended-reading/data-process',
+        title: {
+          zh: '数据流处理',
+          en: 'Data Process',
+        },
+        order: 1,
+      },
     ],
     tutorials: [
       {
diff --git a/s2-site/docs/api/basic-class/base-cell.zh.md b/s2-site/docs/api/basic-class/base-cell.zh.md
index 6ef5cd4e03..20ca60b7a1 100644
--- a/s2-site/docs/api/basic-class/base-cell.zh.md
+++ b/s2-site/docs/api/basic-class/base-cell.zh.md
@@ -17,10 +17,11 @@ cell.getActualText()
 | getIconStyle | 获取单元格图标样式 | () => [IconTheme](/docs/api/general/S2Theme#icontheme) |
 | getStyle | 获取单元格样式 | () => [DefaultCellTheme](/docs/api/general/S2Theme#defaultcelltheme) |
 | getTextAndIconPosition | 获取单元格文本和图标的位置 | (iconCount: `number`) => [TextAndIconPosition](#textandiconposition) |
-| cellType | 单元格类型 | [CellType](#celltypes) |
+| cellType | 单元格类型 | [CellType](#celltype) |
 | initCell | 初始化单元格 | `() => void` |
 | update | 更新单元格 | `() => void` |
 | getTextStyle | 获取文本样式 | `() => void` |
+| getCellTextWordWrapStyle | 获取文本换行配置 | `() => { wordWrap: boolean, maxLines: number, textOverflow: string \| boolean }` |
 | getFormattedFieldValue | 获取格式化后的字段值 | `() => { formattedValue: string, value: string }` |
 | getMaxTextWidth | 获取文本最大宽度 | `() => number` |
 | getTextPosition | 获取文本坐标 | [Point](#point) |
diff --git a/s2-site/docs/api/general/S2Event.zh.md b/s2-site/docs/api/general/S2Event.zh.md
index 02e794ffb4..5fe4d0ed5d 100644
--- a/s2-site/docs/api/general/S2Event.zh.md
+++ b/s2-site/docs/api/general/S2Event.zh.md
@@ -87,13 +87,13 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => {
 
 | 名称     | 事件名                             | 描述               |
 | ------- | --------------------------------- | ----------------- |
-| 点击     | `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.MERGED_CELLS_CLICK`        | 合并单元格点击     |
+| 双击     | `S2Event.MERGED_CELLS_DOUBLE_CLICK` | 合并单元格双击     |
+| 右键     | `S2Event.MERGED_CELLS_CONTEXT_MENU` | 合并单元格右键     |
+| 悬停     | `S2Event.MERGED_CELLS_HOVER`        | 合并单元格悬停     |
+| 鼠标按下 | `S2Event.MERGED_CELLS_MOUSE_DOWN`   | 合并单元格鼠标按下 |
+| 鼠标移动 | `S2Event.MERGED_CELLS_MOUSE_MOVE`   | 合并单元格鼠标移动 |
+| 鼠标松开 | `S2Event.MERGED_CELLS_MOUSE_UP`     | 合并单元格鼠标松开 |
 | 单元格渲染                 | `S2Event.MERGED_CELLS_RENDER`       | 合并单元格布局渲染完成事件                  |
 
 ### 序号单元格 (SeriesNumberCell)
diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md
index c1d28b43db..7bc5643ec4 100644
--- a/s2-site/docs/api/general/S2Theme.zh.md
+++ b/s2-site/docs/api/general/S2Theme.zh.md
@@ -141,9 +141,6 @@ s2.setTheme({
 | fill         | 字体颜色                                                                       | `string`                      | -                                                                                                 |      |
 | linkTextFill | 链接文本颜色                                                                   | `string`                      | -                                                                                                 |      |
 | opacity      | 字体透明度                                                                     | `number`                      | 1                                                                                                 |      |
-| wordWrap      | 文本是否自动换行 （数值单元格不建议换行）。[了解更多](https://g.antv.antgroup.com/api/basic/text#wordwrap)                                                                    | `boolean`                      | `true`                                                                                                 |      |
-| maxLines      | 最大行数，文本超出后将被截断 （数值单元格不建议换行），需要配合 `wordWrap` 和 `textOverflow` 一起使用。[了解更多](https://g.antv.antgroup.com/api/basic/text#maxlines)                                                                      | `number`                      | `1`                                                                                                 |      |
-| textOverflow      | 自定义隐藏的文本溢出内容，例如直接裁剪、追加省略号或一个自定义字符串，需要配合 `wordWrap` 和 `maxLines` 一起使用。[了解更多](https://g.antv.antgroup.com/api/basic/text#textoverflow)                                                                 | `string`                      | `ellipsis`                                                                                                |      |
 
 #### CellTheme
 
diff --git a/s2-site/docs/common/copy-export.zh.md b/s2-site/docs/common/copy-export.zh.md
index d09efb0043..2deca46a94 100644
--- a/s2-site/docs/common/copy-export.zh.md
+++ b/s2-site/docs/common/copy-export.zh.md
@@ -39,7 +39,7 @@ copyToClipboard(data)
 
 #### 1.2 格式化数据全量复制
 
-如果配置了 `S2DataConfig.meta` 对数据有 [格式化处理](/manual/basic/formatter), 可以开启 `copyWithFormat`, 这样复制时会拿到格式化之后的数据。
+如果配置了 [`S2DataConfig.meta`](http://localhost:8000/api/general/s2-data-config#meta) 对数据有 [格式化处理](/manual/basic/formatter), 那么可以开启 `copyWithFormat`, 这样复制时会拿到格式化之后的数据。
 
 ```ts
 const s2Options = {
@@ -56,7 +56,7 @@ const s2Options = {
 
 ### 2. 局部复制
 
-S2 默认提供复制的能力，开启后，使用快捷键 `Command/Ctrl + C` 即可复制选中区域（局部复制）.
+S2 默认提供局部复制的能力，开启后，使用快捷键 `Command/Ctrl + C` 即可复制选中区域，支持 `单选/多选/刷选/区间多选`.
 
 ```ts
 const s2Options = {
diff --git a/s2-site/docs/common/style.zh.md b/s2-site/docs/common/style.zh.md
index faab8aa394..b0a95f5dc7 100644
--- a/s2-site/docs/common/style.zh.md
+++ b/s2-site/docs/common/style.zh.md
@@ -9,10 +9,13 @@ order: 3
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | --- | --- | ---  | --- | --- |
-| layoutWidthType | `adaptive` \| `colAdaptive`  \| `compact` |    |  | 单元格宽度布局类型<br/> `adaptive` : 行列等宽，均分整个 `Canvas` 画布宽度 <br> `colAdaptive`：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度 <br/> `compact`：行列紧凑布局，指标维度少的时候无法布满整个画布 |
-| dataCell | [DataCell](#dataCell) |  |  | 数值单元格配置 |
-| colCell | [ColCell](#colCell) |  |  |   列头单元格配置 |
-| rowCell | [RowCell](#rowCell) |  |  |   行头单元格配置 |
+| layoutWidthType | `adaptive \| colAdaptive \| compact` |    |  | 单元格宽度布局类型<br/> `adaptive` : 行列等宽，均分整个 `Canvas` 画布宽度 <br> `colAdaptive`：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度 <br/> `compact`：行列紧凑布局，指标维度少的时候无法布满整个画布，列头宽度为实际内容宽度（取当前列最大值，采样每一列前 50 条数据）|
+| dataCell | [DataCell](#datacell) |  |  | 数值单元格配置 |
+| rowCell | [RowCell](#rowcell) |  |  | 行头单元格配置 |
+| colCell | [ColCell](#colcell) |  |  |   列头单元格配置 |
+| cornerCell | [CornerCell](#cornercell) |  |  |   角头单元格配置 |
+| mergedCell | [MergedCell](#mergedcell) |  |  |   合并单元格配置 |
+| seriesNumberCell | [SeriesNumberCell](#seriesnumbercell) |  |  |   序号单元格配置 |
 
 ### DataCell
 
@@ -24,6 +27,8 @@ order: 3
 | height  | 单元格高度   | `number` |    30 | - |
 | valuesCfg  | 单元格配置   | `{ originalValueField?: string, widthPercent?: number[], showOriginalValue?: boolean }` |   | - |
 
+其他公用配置见 [CellTextWordWrapStyle](#celltextwordwrapstyle)
+
 ### ColCell
 
 功能描述：列头单元格配置
@@ -50,3 +55,25 @@ order: 3
 | showTreeLeafNodeAlignDot | 树状模式下行头叶子节点是否显示层级占位点 | `boolean` | `false` |  |
 | withByField | 根据 `field` 设置每行的宽度。`field` 对应 `s2DataConfig.fields.rows` 中的 `field` 或 列头 id, [查看详情](/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` 设置每行的高度。<br/> 1. 透视表：`field` 对应 `s2DataConfig.fields.rows` 中的 `field` 或 列头 id. <br/> 2. 明细表：`field` 对应 行序号，从 `1` 开始。[查看详情](/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>` | - |  |
+
+### CornerCell
+
+其他公用配置见 [CellTextWordWrapStyle](#celltextwordwrapstyle)
+
+### MergedCell
+
+其他公用配置见 [CellTextWordWrapStyle](#celltextwordwrapstyle)
+
+### SeriesNumberCell
+
+其他公用配置见 [CellTextWordWrapStyle](#celltextwordwrapstyle)
+
+### CellTextWordWrapStyle
+
+功能描述：单元格换行配置
+
+| 参数    | 说明 | 类型   | 默认值 | 必选  |
+| ------- | ------------ | ------ | ------ | ---- |
+| wordWrap      | 文本是否自动换行 （数值单元格不建议换行）。[了解更多](https://g.antv.antgroup.com/api/basic/text#wordwrap)                                                                    | `boolean`                      | `true`                                                                                                 |      |
+| maxLines      | 最大行数，文本超出后将被截断 （数值单元格不建议换行），需要配合 `wordWrap` 和 `textOverflow` 一起使用。[了解更多](https://g.antv.antgroup.com/api/basic/text#maxlines)                                                                      | `number`                      | `1`                                                                                                 |      |
+| textOverflow      | 自定义隐藏的文本溢出内容，例如直接裁剪、追加省略号或一个自定义字符串，需要配合 `wordWrap` 和 `maxLines` 一起使用。[了解更多](https://g.antv.antgroup.com/api/basic/text#textoverflow)                                                                 | `string`                      | `ellipsis`                                                                                                |      |
diff --git a/s2-site/docs/manual/advanced/chart-in-cell.zh.md b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
index 0d9d519ba8..99c8968db9 100644
--- a/s2-site/docs/manual/advanced/chart-in-cell.zh.md
+++ b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
@@ -4,7 +4,7 @@ order: 11
 tag: New
 ---
 
-如果纯文本的表格不够直观，S2 支持 [自定义单元格](/examples#custom-custom-cell)，也内置了 [简单的 mini 图绘制](/examples/custom/custom-cell/#mini-chart)
+如果纯文本的表格不够直观，S2 支持 [自定义单元格](/examples#custom-custom-cell)，也内置了 [简单的 mini 图绘制](/examples/custom/custom-cell/#mini-chart), 来实现一个组合图表。
 
 ### 数据格式
 
@@ -43,6 +43,8 @@ const s2DataConfig = {
 
 ### 1. 绘制 mini 图表
 
+S2 内置了几种简单的 `mini` 图形的绘制，无需依赖 `G2` 等专业图表库，适用于简单的展示场景。
+
 <Playground path='custom/custom-cell/demo/mini-chart.ts' rid='mini' height='400'></playground>
 
 #### 1.1 数据准备
diff --git a/s2-site/docs/manual/basic/multi-line-text.zh.md b/s2-site/docs/manual/basic/multi-line-text.zh.md
index 1ed12e6f18..a89461dde0 100644
--- a/s2-site/docs/manual/basic/multi-line-text.zh.md
+++ b/s2-site/docs/manual/basic/multi-line-text.zh.md
@@ -8,7 +8,7 @@ tag: New
 请确保已经阅读了 [基础教程](/manual/basic/base-concept) 和 [主题配置](/manual/basic/theme) 等章节。
 :::
 
-基于 `DOM` 的 表格中，我们可以写一些简单的 [CSS 属性](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow), 就可以实现文本的自动换行，溢出隐藏，因为浏览器已经帮我们计算好了，而在 `Canvas` 中，`文本是否溢出`, `文字换行坐标计算`, `多行文本高度自适应` 等特性都需要自行实现。
+在基于 `DOM` 的 表格中，我们可以写一些简单的 [CSS 属性](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow), 就可以实现文本的`自动换行`, `溢出隐藏`等特性，因为浏览器已经帮我们计算好了，而在 `Canvas` 中，`文本是否溢出`, `文字换行坐标计算`, `多行文本高度自适应` 等特性都需要自行实现。
 
 得益于 `AntV/G` 5.0 渲染引擎的升级，`S2 2.0` 现在只需要简单的配置即可支持多行文本的渲染，支持自动换行。
 
@@ -23,45 +23,39 @@ S2 内部适配了 `AntV/G 5.0` 的 [多行布局能力](https://g.antv.antgroup
 具体参数请跳转 `AntV/G` [官网查看](https://g.antv.antgroup.com/api/basic/text#%E5%A4%9A%E8%A1%8C%E5%B8%83%E5%B1%80).
 
 - `maxLines`: 最大行数，文本超出后将被截断。
-- `wordWrap`: 是否开启自动折行，默认值为 false,
-- `wordWrapWidth`: 开启自动折行后，超出该宽度则换行。
+- `wordWrap`: 是否开启自动折行，默认值为 false.
 - `textOverflow`:
   - 'clip' 直接截断文本
   - 'ellipsis' 使用 ... 表示被截断的文本
   - 自定义字符串，使用它表示被截断的文本
 :::
 
-在 S2 中，通过 [配置主题](/manual/basic/theme) 即可实现多行文本，当文本自动换行后，如小于单元格高度，则会自动调整。
+在 S2 中，通过 [Style](/api/general/s2-options#style) 即可实现渲染多行文本，当文本自动换行后，如果小于单元格高度，则会自动调整。
 
 :::warning{title="注意"}
 数值单元格 (dataCell) 不建议换行，容易产生歧义。
 :::
 
 ```ts
-const cellTheme = {
-  text: {
-    // 最大行数，文本超出后将被截断
-    maxLines: 2,
-    // 文本是否换行
-    wordWrap: true,
-    // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
-    textOverflow: 'ellipsis',
-  },
-  bolderText: {
-    maxLines: 2,
-  },
-  measureText: {
-    maxLines: 2,
-  },
+const cellTextWordWrapStyle = {
+  // 最大行数，文本超出后将被截断
+  maxLines: 2,
+  // 文本是否换行
+  wordWrap: true,
+  // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
+  textOverflow: 'ellipsis',
 };
 
-s2.setTheme({
-  seriesNumberCell: cellTheme,
-  colCell: cellTheme,
-  cornerCell: cellTheme,
-  rowCell: cellTheme,
-  // dataCell: cellTheme,
-});
+const s2Options = {
+  style: {
+    seriesNumberCell: cellTextWordWrapStyle,
+    colCell: cellTextWordWrapStyle,
+    cornerCell: cellTextWordWrapStyle,
+    rowCell: cellTextWordWrapStyle,
+    // 数值不建议换行，容易产生歧义
+    // dataCell: cellTheme,
+  },
+};
 
 ```
 
diff --git a/s2-site/docs/manual/basic/theme.zh.md b/s2-site/docs/manual/basic/theme.zh.md
index c8095db381..c5c690f300 100644
--- a/s2-site/docs/manual/basic/theme.zh.md
+++ b/s2-site/docs/manual/basic/theme.zh.md
@@ -31,8 +31,8 @@ S2 中内置了 **4** 套开箱即用的主题配置，也提供了强大的主
 
 色板的定义为 [Palette](/docs/api/general/S2Theme#palette)，当生成主题 schema 时会从中取用颜色，而它的颜色则来自于标准色板中，Palette 的关键属性有：
 
-- basicColors：基础颜色，共 15 个色彩位，本质上确定了表格的配色方案，生成主题 schema 时会从 basicColors 固定索引上取色，如行头背景颜色固定会取 `basicColors[1]` 的颜色
-- basicColorRelations：basicColors 与标准色板的对应关系，如内置的 colorful 主题中，行头背景色 `basicColors[1]` 是取用标准色板中的索引 0 的颜色
+- `basicColors`：基础颜色，共 15 个色彩位，本质上确定了表格的配色方案，生成主题 schema 时会从 basicColors 固定索引上取色，如行头背景颜色固定会取 `basicColors[1]` 的颜色
+- `basicColorRelations`：basicColors 与标准色板的对应关系，如内置的 colorful 主题中，行头背景色 `basicColors[1]` 是取用标准色板中的索引 0 的颜色
 
 由此 S2 保证了，所有绘制时使用的颜色均来自于主题色或主题色的派生颜色。这样使表格界面颜色统一，也便于用户根据自己需要的主题色，生成个性化主题。
 
@@ -145,8 +145,7 @@ const customTheme = {
   },
 };
 
-// 等价与：s2.setThemeCfg({ theme: customTheme })
-s2.setTheme(customTheme)
+s2.setTheme(customTheme) // 等价与：s2.setThemeCfg({ theme: customTheme })
 await s2.render(false);
 ```
 
@@ -154,22 +153,6 @@ await s2.render(false);
 
 <br/>
 
-#### 自定义单元格文本换行和省略
-
-[查看详情](/layout/custom/#multi-line-text) 和 [完整 API](/api/general/s2theme#s2theme)
-
-```ts
-s2.setTheme({
-  rowCell: {
-    text: {
-      wordWrap: true,
-      maxLines: 2,
-      textOverflow: 'ellipsis',
-    },
-  },
-});
-```
-
 #### 自定义单元格对齐方式
 
 [查看详情](/manual/advanced/custom/cell-align) 和 [完整 API](/api/general/s2theme#s2theme)
diff --git a/s2-site/docs/manual/advanced/data-process/pivot.en.md b/s2-site/docs/manual/extended-reading/data-process/pivot.en.md
similarity index 100%
rename from s2-site/docs/manual/advanced/data-process/pivot.en.md
rename to s2-site/docs/manual/extended-reading/data-process/pivot.en.md
diff --git a/s2-site/docs/manual/advanced/data-process/pivot.zh.md b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
similarity index 100%
rename from s2-site/docs/manual/advanced/data-process/pivot.zh.md
rename to s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
diff --git a/s2-site/docs/manual/advanced/data-process/table.en.md b/s2-site/docs/manual/extended-reading/data-process/table.en.md
similarity index 100%
rename from s2-site/docs/manual/advanced/data-process/table.en.md
rename to s2-site/docs/manual/extended-reading/data-process/table.en.md
diff --git a/s2-site/docs/manual/advanced/data-process/table.zh.md b/s2-site/docs/manual/extended-reading/data-process/table.zh.md
similarity index 100%
rename from s2-site/docs/manual/advanced/data-process/table.zh.md
rename to s2-site/docs/manual/extended-reading/data-process/table.zh.md
diff --git a/s2-site/docs/manual/advanced/performance.en.md b/s2-site/docs/manual/extended-reading/performance.en.md
similarity index 99%
rename from s2-site/docs/manual/advanced/performance.en.md
rename to s2-site/docs/manual/extended-reading/performance.en.md
index 60ee05c455..1bcf4cf931 100644
--- a/s2-site/docs/manual/advanced/performance.en.md
+++ b/s2-site/docs/manual/extended-reading/performance.en.md
@@ -1,6 +1,6 @@
 ---
 title: Performance
-order: 6
+order: 2
 tag: Updated
 ---
 
diff --git a/s2-site/docs/manual/advanced/performance.zh.md b/s2-site/docs/manual/extended-reading/performance.zh.md
similarity index 99%
rename from s2-site/docs/manual/advanced/performance.zh.md
rename to s2-site/docs/manual/extended-reading/performance.zh.md
index 349d84ca5d..93d74d6d14 100644
--- a/s2-site/docs/manual/advanced/performance.zh.md
+++ b/s2-site/docs/manual/extended-reading/performance.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 性能介绍
-order: 6
+order: 2
 tag: Updated
 ---
 
diff --git a/s2-site/docs/manual/migration-v2.en.md b/s2-site/docs/manual/migration-v2.en.md
index 856f67697f..7f091e9975 100644
--- a/s2-site/docs/manual/migration-v2.en.md
+++ b/s2-site/docs/manual/migration-v2.en.md
@@ -1,5 +1,5 @@
 ---
-title: S2 2.0 升级指南
+title: S2 2.0 Migration
 order: 9
 tag: New
 ---
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index 3baaeaaed5..fcc1495b30 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -46,48 +46,6 @@ TODO:
 
 TODO:
 
-## 多版本共存
-
-> 该部分文档参考 <https://ant-design.antgroup.com/docs/react/migration-v5-cn>
-
-### 通过别名安装 v2
-
-```bash
-$ npm install --save @antv/s2-v2@npm:@antv/s2-v2@2
-# or
-$ yarn add @antv/s2-v2@npm:@antv/s2-v2@2
-# or
-$ pnpm add @antv/s2-v2@npm:@antv/s2-v2@2
-```
-
-对应的 package.json 为：
-
-```json
-{
-  "@antv/s2": "1.x",
-  "@antv/s2-v2": "npm:@antv/s2-v2@2"
-}
-```
-
-现在，你项目中的 `S2` 还是 `v1` 版本，`@antv/s2-v2` 是 `v2` 版本。
-
-```ts
-import { PivotSheet as  PivotSheetV1 } from '@antv/s2';
-import { PivotSheet as  PivotSheetV2 } from '@antv/s2-v2';
-
-async function bootstrap(){
-  const container = document.getElementById('container');
-
-  const s2V1 = new PivotSheetV1(container, s2DataConfig, s2Options);
-  const s2V2 = new PivotSheetV2(container, s2DataConfig, s2Options);
-
-  s2V1.render();
-  await s2V2.render();
-}
-
-bootstrap()
-```
-
 ## 遇到问题
 
 如果您在升级过程中遇到了问题，请到 [GitHub issues](https://github.com/antvis/S2/issues/2454) 或者 [GitHub Discussions](https://github.com/antvis/S2/discussions/1933) 进行反馈。我们会尽快响应和相应改进这篇文档。
diff --git a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
index bd0a1959c6..81d7ef8c6d 100644
--- a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
+++ b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
@@ -6,7 +6,6 @@ import {
   S2DataConfig,
   S2Options,
 } from '@antv/s2';
-import { isArray, isObject } from 'lodash';
 
 /**
  * 自定义 DataCell，使用 drawCustomContent 绘制简易的 mini 图
diff --git a/s2-site/examples/custom/custom-layout/demo/custom-facet.ts b/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
index dd9c133ff5..9860947209 100644
--- a/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
+++ b/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
@@ -36,7 +36,7 @@ class CustomFacet extends PivotFacet {
 
   // 自定义列头节点坐标
   calculateColNodesCoordinate(layoutResult: LayoutResult) {
-    super.calculateRowNodesCoordinate(layoutResult);
+    super.calculateColNodesCoordinate(layoutResult);
     // 你的自定义逻辑...
   }
 
diff --git a/s2-site/examples/interaction/advanced/demo/intercepts.ts b/s2-site/examples/interaction/advanced/demo/intercepts.ts
index 41b853ee24..4763420c79 100644
--- a/s2-site/examples/interaction/advanced/demo/intercepts.ts
+++ b/s2-site/examples/interaction/advanced/demo/intercepts.ts
@@ -38,7 +38,7 @@ fetch(
           forceRender: true,
         },
         content:
-          '点击角头后, 整个表格不再响应 click 和 hover 和事件, 在按下 ESC, 或点击空白处关闭 tooltip 后, 移除屏蔽',
+          '点击角头后, 整个表格不再响应 click 和 hover 事件, 在按下 ESC, 或点击空白处关闭 tooltip 后, 移除屏蔽',
       });
     });
 
diff --git a/s2-site/examples/interaction/advanced/demo/meta.json b/s2-site/examples/interaction/advanced/demo/meta.json
index 77922ee0e1..19351fd460 100644
--- a/s2-site/examples/interaction/advanced/demo/meta.json
+++ b/s2-site/examples/interaction/advanced/demo/meta.json
@@ -114,7 +114,7 @@
         "zh": "屏蔽交互事件",
         "en": "Interaction Intercepts"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/JRAt1kb93/Kapture%2525202022-06-06%252520at%25252011.28.43.gif",
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*XpoiQbJ0kugAAAAAAAAAAAAADmJ7AQ/original",
       "new": true
     }
   ]
diff --git a/s2-site/examples/interaction/basic/demo/copy-export.ts b/s2-site/examples/interaction/basic/demo/copy-export.ts
index aa43218ea4..94e9030471 100644
--- a/s2-site/examples/interaction/basic/demo/copy-export.ts
+++ b/s2-site/examples/interaction/basic/demo/copy-export.ts
@@ -64,7 +64,7 @@ const downloadData = async (s2: SpreadSheet, isFormat: boolean) => {
   }
 };
 
-function addScrollButton(s2: SpreadSheet) {
+function addButtons(s2: SpreadSheet) {
   const copyBtn = document.createElement('button');
 
   copyBtn.className = 'ant-btn ant-btn-default';
@@ -109,11 +109,14 @@ fetch(
         copyWithHeader: true,
         // 是否使用格式化数据
         copyWithFormat: true,
+        // 刷选
         brushSelection: {
           rowCell: true,
           colCell: true,
           dataCell: true,
         },
+        // 多选
+        multiSelection: true,
       },
     };
 
@@ -125,5 +128,5 @@ fetch(
 
     await s2.render();
 
-    addScrollButton(s2);
+    addButtons(s2);
   });
diff --git a/s2-site/examples/interaction/basic/demo/meta.json b/s2-site/examples/interaction/basic/demo/meta.json
index 357cbafd2d..2de2b9e100 100644
--- a/s2-site/examples/interaction/basic/demo/meta.json
+++ b/s2-site/examples/interaction/basic/demo/meta.json
@@ -68,14 +68,6 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/Lb0%26u6LtAu/reset.gif"
     },
-    {
-      "filename": "copy-export.ts",
-      "title": {
-        "zh": "复制与导出",
-        "en": "Copy and export"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*LzTYTpFosccAAAAAAAAAAAAAARQnAQ"
-    },
     {
       "filename": "hover-after-scroll.ts",
       "title": {
@@ -84,6 +76,15 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NbG7SakRzXUAAAAAAAAAAAAADmJ7AQ/original.gif"
     },
+    {
+      "filename": "copy-export.ts",
+      "title": {
+        "zh": "复制与导出",
+        "en": "Copy and export"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*LzTYTpFosccAAAAAAAAAAAAAARQnAQ",
+      "new": true
+    },
     {
       "filename": "state-theme.ts",
       "title": {
@@ -99,7 +100,7 @@
         "zh": "交互事件监听",
         "en": "Interaction Event Listener"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6zM5TpfV7qIAAAAAAAAAAAAADmJ7AQ/original",
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/a6zSe1gvvy/f97ed6ec-0a5d-49b7-8492-754611d0aea6.png",
       "new": true
     }
   ]
diff --git a/s2-site/examples/layout/custom/demo/multi-line-text.ts b/s2-site/examples/layout/custom/demo/multi-line-text.ts
index 537d3dbb2a..fb9b75ee3b 100644
--- a/s2-site/examples/layout/custom/demo/multi-line-text.ts
+++ b/s2-site/examples/layout/custom/demo/multi-line-text.ts
@@ -1,5 +1,5 @@
 import {
-  DefaultCellTheme,
+  CellTextWordWrapStyle,
   PivotSheet,
   S2DataConfig,
   S2Options,
@@ -50,6 +50,15 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       ],
     };
 
+    const cellTextWordWrapStyle: CellTextWordWrapStyle = {
+      // 最大行数，文本超出后将被截断
+      maxLines: 2,
+      // 文本是否换行
+      wordWrap: true,
+      // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
+      textOverflow: 'ellipsis',
+    };
+
     const s2Options: S2Options = {
       width: 600,
       height: 480,
@@ -78,45 +87,19 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
         },
       },
       style: {
+        seriesNumberCell: cellTextWordWrapStyle,
+        colCell: cellTextWordWrapStyle,
+        cornerCell: cellTextWordWrapStyle,
         rowCell: {
+          ...cellTextWordWrapStyle,
           height: 50,
         },
-        colCell: {},
-        dataCell: {},
+        // 数值不建议换行, 容易产生歧义
+        // dataCell: cellTheme,
       },
     };
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    const cellTheme: DefaultCellTheme = {
-      text: {
-        // 最大行数，文本超出后将被截断
-        maxLines: 2,
-        // 文本是否换行
-        wordWrap: true,
-        // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
-        textOverflow: 'ellipsis',
-      },
-      bolderText: {
-        maxLines: 2,
-        wordWrap: true,
-        textOverflow: 'ellipsis',
-      },
-      measureText: {
-        maxLines: 2,
-        wordWrap: true,
-        textOverflow: 'ellipsis',
-      },
-    };
-
-    s2.setTheme({
-      seriesNumberCell: cellTheme,
-      colCell: cellTheme,
-      cornerCell: cellTheme,
-      rowCell: cellTheme,
-      // 数值不建议换行, 容易产生歧义
-      // dataCell: cellTheme,
-    });
-
     await s2.render();
   });

From 4f722c41d39acd5f790301360e9a00432be7a1c6 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Tue, 30 Jan 2024 16:14:00 +0800
Subject: [PATCH 38/64] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E6=96=87=E6=A1=A3=E5=92=8C=E7=A4=BA=E4=BE=8B,=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=20selectedCellHighlight=20=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/interface/interaction.ts       |  25 ++-
 packages/s2-core/src/interaction/root.ts      |   4 +-
 packages/s2-react/playground/config.tsx       |   2 +
 packages/s2-react/playground/index.tsx        | 188 +++++++++++++-----
 s2-site/docs/common/interaction.zh.md         |   2 +-
 .../manual/advanced/interaction/basic.zh.md   |  50 ++++-
 .../advanced/demo/scroll-speed-ratio.ts       |   4 +-
 .../interaction/basic/demo/copy-export.ts     |   1 +
 .../examples/interaction/basic/demo/event.ts  | 118 ++++++++++-
 .../examples/interaction/basic/demo/meta.json |  20 +-
 .../basic/demo/selected-cell-highlight.ts     |  31 +++
 .../basic/demo/selected-cell-move.ts          |  27 +++
 12 files changed, 398 insertions(+), 74 deletions(-)
 create mode 100644 s2-site/examples/interaction/basic/demo/selected-cell-highlight.ts
 create mode 100644 s2-site/examples/interaction/basic/demo/selected-cell-move.ts

diff --git a/packages/s2-core/src/common/interface/interaction.ts b/packages/s2-core/src/common/interface/interaction.ts
index c2024be3d6..12484f6e9f 100644
--- a/packages/s2-core/src/common/interface/interaction.ts
+++ b/packages/s2-core/src/common/interface/interaction.ts
@@ -56,18 +56,22 @@ export interface InteractionStateInfo {
    * 交互状态名
    */
   stateName?: InteractionStateName;
+
   /**
    * 单元格元数据 (包含不在可视范围内的)
    */
   cells?: CellMeta[];
+
   /**
    * 交互状态发生改变的单元格实例
    */
   interactedCells?: S2CellType[];
+
   /**
    * 选中的单元格节点
    */
   nodes?: Node[];
+
   /**
    * 如果单元格为空, 是否强制更新 (适用于反选等场景)
    */
@@ -100,7 +104,6 @@ export interface BrushPoint {
   y: number;
   scrollX?: number;
   scrollY?: number;
-
   /** 用于标记 row cell 和 col cell 点的 x, y 坐标 */
   headerX?: number;
   headerY?: number;
@@ -157,11 +160,13 @@ export interface InteractionOptions {
 
   /**
    * 选中单元格高亮聚焦
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#header-cell-click-selection
    */
   selectedCellsSpotlight?: boolean;
 
   /**
    * 十字器高亮效果
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#hover
    */
   hoverHighlight?: InteractionCellHighlightOptions | boolean;
 
@@ -172,6 +177,7 @@ export interface InteractionOptions {
 
   /**
    * 开启复制 Command/Ctrl + C
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#copy-export
    */
   enableCopy?: boolean;
 
@@ -186,11 +192,13 @@ export interface InteractionOptions {
   copyWithHeader?: boolean;
 
   /**
-   * 复制时支持自定义(transformer)数据导出格式化方法
+   * 复制时支持自定义 (transformer) 数据导出格式化方法
    */
   customTransformer?: (transformer: Transformer) => Partial<Transformer>;
+
   /**
    * 自动重置表格样式 (按下 ESC 键, 点击空白区域时, 关闭 tooltip/交互状态)
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#auto-reset-sheet-style
    */
   autoResetSheetStyle?: boolean;
 
@@ -198,65 +206,76 @@ export interface InteractionOptions {
    * 隐藏列头配置, 支持维度 (S2DataConfig.fields) 和具体维值 (id)
    * @example hiddenColumnFields: ['type', 'subType'];
    * @example hiddenColumnFields: ['root[&]家具[&]桌子[&]number']
+   * @see https://s2.antv.antgroup.com/examples/interaction/advanced/#pivot-hide-columns
    */
   hiddenColumnFields?: string[];
 
   /**
    * 自定义滚动速率, 默认 1
-   * @see https://s2.antv.antgroup.com/manual/advanced/interaction/scroll
+   * @see http://localhost:8000/examples/interaction/advanced/#scroll-speed-ratio
    */
   scrollSpeedRatio?: ScrollSpeedRatio;
 
   /**
    * 宽高调整
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#resize
    */
   resize?: ResizeInteractionOptions | boolean;
 
   /**
    * 刷选
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#brush-selection
    */
   brushSelection?: BrushSelectionOptions | boolean;
 
   /**
    * 多选 Command/Ctrl + click
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#header-cell-click-selection
    */
   multiSelection?: boolean;
 
   /**
    * 区间快捷多选 Shift + click
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#data-cell-range-selection
    */
   rangeSelection?: boolean;
 
   /**
    * 键盘方向键移动选中单元格
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#selected-cell-move
    */
   selectedCellMove?: boolean;
 
   /**
    * 滚动条位置 (可用于表格内容未撑满 Canvas 的场景)
+   * @example scrollbarPosition: 'content'
    */
   scrollbarPosition?: ScrollbarPositionType;
 
   /**
    * 透传 listener 属性的可选参数对象
    * @see https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#event
    */
   eventListenerOptions?: boolean | AddEventListenerOptions;
 
   /**
    * 选中单元格高亮联动 (高亮所对应行头/列头, 高亮当前行/当前列)
+   * https://s2.antv.antgroup.com/examples/interaction/basic#selected-cell-highlight
    */
   selectedCellHighlight?: boolean | InteractionCellHighlightOptions;
 
   /**
    * 滚动到边界的行为
    * @see https://s2.antv.antgroup.com/manual/advanced/interaction/scroll
+   * @see https://s2.antv.antgroup.com/examples/interaction/advanced/#overscroll-behavior
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
    */
   overscrollBehavior?: 'auto' | 'none' | 'contain' | null;
 
   /**
    * 表格滚动后是否触发 hover
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#hover-after-scroll
    */
   hoverAfterScroll?: boolean;
 
diff --git a/packages/s2-core/src/interaction/root.ts b/packages/s2-core/src/interaction/root.ts
index 7c34578467..3302b69a30 100644
--- a/packages/s2-core/src/interaction/root.ts
+++ b/packages/s2-core/src/interaction/root.ts
@@ -552,8 +552,8 @@ export class RootInteraction {
       return {
         rowHeader: selectedCellHighlight,
         colHeader: selectedCellHighlight,
-        currentRow: false,
-        currentCol: false,
+        currentRow: selectedCellHighlight,
+        currentCol: selectedCellHighlight,
       };
     }
 
diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx
index b7508f73b5..9fd19e1fd5 100644
--- a/packages/s2-react/playground/config.tsx
+++ b/packages/s2-react/playground/config.tsx
@@ -325,6 +325,8 @@ export const s2Options: SheetComponentOptions = {
     copyWithFormat: true,
     copyWithHeader: true,
     hoverAfterScroll: true,
+    selectedCellMove: true,
+    rangeSelection: true,
     // 防止 mac 触摸板横向滚动触发浏览器返回, 和移动端下拉刷新
     overscrollBehavior: 'none',
     brushSelection: {
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
index 722ce26b66..03720cff50 100644
--- a/packages/s2-react/playground/index.tsx
+++ b/packages/s2-react/playground/index.tsx
@@ -40,7 +40,7 @@ import {
   Tooltip,
   type RadioChangeEvent,
 } from 'antd';
-import { debounce, isBoolean, isEmpty } from 'lodash';
+import { debounce, isEmpty } from 'lodash';
 import React from 'react';
 import { ChromePicker } from 'react-color';
 import { createRoot } from 'react-dom/client';
@@ -228,13 +228,18 @@ function MainLayout() {
     }
   };
 
-  const getColumnOptions = (type: SheetType) => {
-    if (type === 'table') {
-      return dataCfg.fields?.columns || [];
-    }
+  const getColumnOptions = React.useCallback(
+    (type: SheetType) => {
+      if (type === 'table') {
+        return dataCfg.fields?.columns || [];
+      }
 
-    return s2Ref.current?.facet.getInitColLeafNodes().map(({ id }) => id) || [];
-  };
+      return (
+        s2Ref.current?.facet.getInitColLeafNodes().map(({ id }) => id) || []
+      );
+    },
+    [dataCfg.fields?.columns],
+  );
 
   //  ================== Hooks ========================
 
@@ -251,7 +256,7 @@ function MainLayout() {
     }
     setColumnOptions(getColumnOptions(sheetType));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sheetType]);
+  }, [sheetType, getColumnOptions]);
 
   React.useEffect(() => {
     console.log('env:', process.env);
@@ -862,6 +867,7 @@ function MainLayout() {
                                     onChange={onAutoAdjustBoundaryChange}
                                     style={{ width: 230 }}
                                     size="small"
+                                    allowClear
                                   >
                                     <Select.Option value="container">
                                       container (表格区域)
@@ -957,6 +963,7 @@ function MainLayout() {
                                     onChange={onOverscrollBehaviorChange}
                                     style={{ width: 150 }}
                                     size="small"
+                                    allowClear
                                   >
                                     <Select.Option value="auto">
                                       auto
@@ -1125,6 +1132,7 @@ function MainLayout() {
                                     }
                                     placeholder="默认行头展开层级"
                                     size="small"
+                                    allowClear
                                     onChange={(level) => {
                                       updateOptions({
                                         style: {
@@ -1209,24 +1217,7 @@ function MainLayout() {
                           label: '交互配置',
                           children: (
                             <Space>
-                              <Tooltip title="高亮选中单元格">
-                                <Switch
-                                  checkedChildren="选中聚光灯开"
-                                  unCheckedChildren="选中聚光灯关"
-                                  checked={
-                                    mergedOptions?.interaction
-                                      ?.selectedCellsSpotlight
-                                  }
-                                  onChange={(checked) => {
-                                    updateOptions({
-                                      interaction: {
-                                        selectedCellsSpotlight: checked,
-                                      },
-                                    });
-                                  }}
-                                />
-                              </Tooltip>
-                              <Tooltip title="高亮选中单元格行为，演示这里旧配置优先级最高">
+                              <Tooltip title="选中单元格后高亮联动, selectedCellHighlight 为 boolean 值时代表全开或全关">
                                 <Select
                                   style={{ width: 260 }}
                                   placeholder="单元格选中高亮"
@@ -1236,36 +1227,25 @@ function MainLayout() {
                                     let selectedCellHighlight:
                                       | boolean
                                       | InteractionCellHighlightOptions = false;
-                                    const oldIdx = type.findIndex(
-                                      (typeItem: any) => isBoolean(typeItem),
-                                    );
 
-                                    if (oldIdx > -1) {
-                                      selectedCellHighlight = type[oldIdx];
-                                    } else {
-                                      selectedCellHighlight = {
-                                        rowHeader: false,
-                                        colHeader: false,
-                                        currentCol: false,
-                                        currentRow: false,
-                                      };
-                                      type.forEach((i: number) => {
-                                        // @ts-ignore
-                                        selectedCellHighlight[i] = true;
-                                      });
-                                    }
+                                    selectedCellHighlight = {
+                                      rowHeader: false,
+                                      colHeader: false,
+                                      currentCol: false,
+                                      currentRow: false,
+                                    };
+                                    type.forEach((i: number) => {
+                                      // @ts-ignore
+                                      selectedCellHighlight[i] = true;
+                                    });
 
                                     updateOptions({
                                       interaction: {
-                                        // @ts-ignore
                                         selectedCellHighlight,
                                       },
                                     });
                                   }}
                                 >
-                                  <Select.Option value={true}>
-                                    （旧）高亮选中单元格所在行列头
-                                  </Select.Option>
                                   <Select.Option value="rowHeader">
                                     rowHeader: 高亮所在行头
                                   </Select.Option>
@@ -1280,10 +1260,27 @@ function MainLayout() {
                                   </Select.Option>
                                 </Select>
                               </Tooltip>
+                              <Tooltip title="高亮选中单元格">
+                                <Switch
+                                  checkedChildren="选中聚光灯开"
+                                  unCheckedChildren="选中聚光灯关"
+                                  checked={
+                                    mergedOptions?.interaction
+                                      ?.selectedCellsSpotlight
+                                  }
+                                  onChange={(checked) => {
+                                    updateOptions({
+                                      interaction: {
+                                        selectedCellsSpotlight: checked,
+                                      },
+                                    });
+                                  }}
+                                />
+                              </Tooltip>
                               <Tooltip title="高亮当前行列单元格">
                                 <Switch
-                                  checkedChildren="hover十字器开"
-                                  unCheckedChildren="hover十字器关"
+                                  checkedChildren="hover 十字器开"
+                                  unCheckedChildren="hover 十字器关"
                                   checked={Boolean(
                                     mergedOptions?.interaction?.hoverHighlight,
                                   )}
@@ -1296,10 +1293,10 @@ function MainLayout() {
                                   }}
                                 />
                               </Tooltip>
-                              <Tooltip title="在数值单元格悬停800ms,显示tooltip">
+                              <Tooltip title="在数值单元格悬停 800ms,显示 tooltip">
                                 <Switch
-                                  checkedChildren="hover聚焦开"
-                                  unCheckedChildren="hover聚焦关"
+                                  checkedChildren="hover 聚焦开"
+                                  unCheckedChildren="hover 聚焦关"
                                   checked={
                                     mergedOptions?.interaction
                                       ?.hoverFocus as boolean
@@ -1313,6 +1310,88 @@ function MainLayout() {
                                   }}
                                 />
                               </Tooltip>
+                              <Tooltip title="开启后,可通过键盘方向键移动单元格, 如果有滚动条则自动滚动">
+                                <Switch
+                                  checkedChildren="键盘方向键移动选中单元格开"
+                                  unCheckedChildren="键盘方向键移动选中单元关"
+                                  checked={Boolean(
+                                    mergedOptions?.interaction
+                                      ?.selectedCellMove,
+                                  )}
+                                  onChange={(checked) => {
+                                    updateOptions({
+                                      interaction: {
+                                        selectedCellMove: checked,
+                                      },
+                                    });
+                                  }}
+                                />
+                              </Tooltip>
+                              <Tooltip title="行头, 列头, 数值区域可单独配置">
+                                <Switch
+                                  checkedChildren="刷选开启"
+                                  unCheckedChildren="刷选关闭"
+                                  checked={Boolean(
+                                    mergedOptions?.interaction?.brushSelection,
+                                  )}
+                                  onChange={(checked) => {
+                                    updateOptions({
+                                      interaction: {
+                                        brushSelection: checked,
+                                      },
+                                    });
+                                  }}
+                                />
+                              </Tooltip>
+                              <Tooltip title="按住 Ctrl/Command + click">
+                                <Switch
+                                  checkedChildren="多选开启"
+                                  unCheckedChildren="多选关闭"
+                                  checked={Boolean(
+                                    mergedOptions?.interaction?.multiSelection,
+                                  )}
+                                  onChange={(checked) => {
+                                    updateOptions({
+                                      interaction: {
+                                        multiSelection: checked,
+                                      },
+                                    });
+                                  }}
+                                />
+                              </Tooltip>
+                              <Tooltip title="区间快捷多选 Shift + click">
+                                <Switch
+                                  checkedChildren="区间快捷多选开启"
+                                  unCheckedChildren="区间快捷多选关闭"
+                                  checked={Boolean(
+                                    mergedOptions?.interaction?.rangeSelection,
+                                  )}
+                                  onChange={(checked) => {
+                                    updateOptions({
+                                      interaction: {
+                                        rangeSelection: checked,
+                                      },
+                                    });
+                                  }}
+                                />
+                              </Tooltip>
+                              <Tooltip title="滚动后手动触发一次 hover, 触发单元格高亮效果">
+                                <Switch
+                                  checkedChildren="表格滚动后触发 hover 开启"
+                                  unCheckedChildren="表格滚动后触发 hover 关闭"
+                                  checked={Boolean(
+                                    mergedOptions?.interaction
+                                      ?.hoverAfterScroll,
+                                  )}
+                                  onChange={(checked) => {
+                                    updateOptions({
+                                      interaction: {
+                                        hoverAfterScroll: checked,
+                                      },
+                                    });
+                                  }}
+                                />
+                              </Tooltip>
                               <Tooltip title="开启后,点击空白处,按下ESC键, 取消高亮, 清空选中单元格, 等交互样式">
                                 <Switch
                                   checkedChildren="自动重置交互样式开"
@@ -1436,7 +1515,10 @@ function MainLayout() {
                           onAfterRender={logHandler('onAfterRender')}
                           onRangeSort={logHandler('onRangeSort')}
                           onRangeSorted={logHandler('onRangeSorted')}
-                          onMounted={onSheetMounted}
+                          onMounted={(s2) => {
+                            onSheetMounted(s2);
+                            setColumnOptions(getColumnOptions(sheetType));
+                          }}
                           onDestroy={onSheetDestroy}
                           onColCellClick={onColCellClick}
                           onRowCellClick={logHandler('onRowCellClick')}
diff --git a/s2-site/docs/common/interaction.zh.md b/s2-site/docs/common/interaction.zh.md
index 2e78510c26..e47e256bec 100644
--- a/s2-site/docs/common/interaction.zh.md
+++ b/s2-site/docs/common/interaction.zh.md
@@ -27,7 +27,7 @@ order: 5
 | rangeSelection                       | 是否允许区间快捷多选                                                                                                                                                          | `boolean`                                                                                                 | `true`                                                |                  |
 | scrollbarPosition                    | 用于控制滚动条展示在内容区边缘还是画布边缘                                                                                                                                               | `content \| canvas`                                                                                       |    `content`     |   |
 | eventListenerOptions                 | 事件监听函数 `addEventListener` 的 [可选项配置](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener), 可控制事件从冒泡阶段还是捕获阶段触发                              | `false`                                                                                                   |                                                       |
-| selectedCellHighlight                | 选中格子后的高亮行为<br/>rowHeader：是否高亮选中格子所在行头<br/>colHeader：是否高亮选中格子所在列头<br/>currentRow：是否高亮选中格子所在行<br/>currentCol：是否高亮选中格子所在列<br/>true：同{rowHeader: true, colHeader: true} | `boolean \| { rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean }`     |                                  | `false`                                               |                  |
+| selectedCellHighlight                | 选中数值单元格后的行列高亮联动<br/>rowHeader：选中数值单元格后高亮对应行头 <br/> colHeader：选中数值单元格后高亮对应列头 <br/> currentRow：选中数值单元格后高亮整行 <br/> currentCol：选中数值单元格后高亮整列 <br/>true：同 { rowHeader: true, colHeader: true, currentRow: true, currentCol: true } | `boolean \| { rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean }`     |                                  | `false`                                               |                  |
 | overscrollBehavior                   | 控制滚动至边界的行为，可禁用浏览器的默认滚动行为。[详情](/docs/manual/advanced/interaction/basic/#修改滚动至边界行为)                                                                                   | `auto \| contain \| none \| null`                                                                         |  `auto` |
 
 ### CustomInteraction
diff --git a/s2-site/docs/manual/advanced/interaction/basic.zh.md b/s2-site/docs/manual/advanced/interaction/basic.zh.md
index ae56e11970..23bcb559d0 100644
--- a/s2-site/docs/manual/advanced/interaction/basic.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/basic.zh.md
@@ -165,6 +165,8 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/basic/#data-cell-click-selection)
+
 ### 行列联动高亮
 
 在鼠标悬停时，高亮当前单元格和对应的行列头单元格，形成一个"十字高亮"的效果，更直观的查看数据，默认开启，可配置 `hoverHighlight` 关闭：
@@ -186,11 +188,13 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/basic/#hover)
+
 ### 单选后行列头高亮
 
 在鼠标选中单元格或刷选选中单元格时，高亮当前单元格对应的行列头单元格，利于快速定位单元格所在行列。默认关闭，可配置 `selectedCellHighlight` 开启：
 
-<img src="https://gw.alipayobjects.com/mdn/rms_28a65c/afts/img/A*bqsoRpdz8mgAAAAAAAAAAAAAARQnAQ" alt="preview" width="600" />
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PEYmR6HdlMEAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="600" />
 
 ```ts
 // selectedCellHighlight 的类型为  boolean | { rowHeader: boolean, colHeader: boolean, rowCells: boolean, colCells: boolean }
@@ -207,13 +211,15 @@ const s2Options = {
     selectedCellHighlight: {
       rowHeader: true,  // 选中单元格时，高亮行头
       colHeader: true,  // 选中单元格时，高亮列头
-      currentRow: false,  // 选中单元格时，高亮当前行
-      currentCol: false,  // 选中单元格时，高亮当前列
+      currentRow: true,  // 选中单元格时，高亮当前行
+      currentCol: true,  // 选中单元格时，高亮当前列
     },
   },
 };
 ```
 
+[查看示例](/examples/interaction/basic/#selected-cell-highlight)
+
 ### 悬停聚焦
 
 鼠标悬停在当前单元格超过 `800ms` 后，保持当前高亮，显示 `tooltip`, 聚焦于当前数据，默认开启，可配置 `hoverFocus` 关闭，也可配置 `hoverFocus.duration` 更改出现 `tooltip` 的时间间隔。如果希望 hover 后立刻出现 tooltip，可以设置 `duration` 为 0;
@@ -252,6 +258,8 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/basic/#brush-selection)
+
 #### 行头单元格圈选
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/1M9vUtedn/hangtoushuaxuan.gif" alt="preview" width="600" />
@@ -266,6 +274,8 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/basic/#brush-header)
+
 #### 列头单元格圈选
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/%24DEZUiWFW/lietoushuaxuan.gif" alt="preview" width="600" />
@@ -280,17 +290,19 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/basic/#brush-header)
+
 #### 滚动圈选
 
 ##### 数值滚动圈选
 
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*pmskQL_WvMIAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="600" />
 
-##### 行头滚动圈选 <Badge type="success">@antv/s2@^1.42.0 新增</Badge>
+##### 行头滚动圈选
 
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*r8fFQ6ySwScAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="600" />
 
-### 角头选中 <Badge type="success">@antv/s2@^1.42.0 新增</Badge>
+### 角头选中
 
 单击行头所对应的角头，可以快捷选中当前列
 
@@ -315,11 +327,13 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/basic/#header-cell-click-selection)
+
 ### 移动高亮单元格
 
 点击数值单元格后，使用键盘方向键即可移动当前高亮单元格，默认开启，可配置 `selectedCellMove` 关闭：
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*w2M7Q7PzS3gAAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aj4OTJZG2VsAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="preview" />
 
 ```ts
 const s2Options = {
@@ -329,6 +343,8 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/basic/#selected-cell-move)
+
 ### 隐藏列头
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/0TMss8KAY/Kapture%2525202022-02-11%252520at%25252017.52.53.gif" alt="preview" width="600" />
@@ -356,6 +372,8 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/advanced/#pivot-hide-columns)
+
 ### 行列宽高调整
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/F6l3SoxBCx/resize.gif" alt="preview" width="600" />
@@ -415,25 +433,27 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/basic/#resize)
+
 ### 合并单元格
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/ouXuK7MMt/Kapture%2525202022-04-19%252520at%25252019.31.02.gif" alt="preview" width="600" />
 
-查看 [详情](/docs/manual/advanced/interaction/merge-cell) 或 [示例](/examples/interaction/advanced#merge-cell)
+查看 [文档](/docs/manual/advanced/interaction/merge-cell) 和 [示例](/examples/interaction/advanced#merge-cell)
 
 ### 链接跳转
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/W0bikxI2pn/link-pivot.gif" alt="preview" width="600" />
 
-查看 [详情](/docs/manual/advanced/interaction/link-jump) 或 [示例](/examples/interaction/advanced#pivot-link-jump)
+查看 [文档](/docs/manual/advanced/interaction/link-jump) 和 [示例](/examples/interaction/advanced#pivot-link-jump)
 
 ### 滚动
 
-查看 [详情](/docs/manual/advanced/interaction/scroll)
+查看 [文档](/docs/manual/advanced/interaction/scroll)
 
 ### 复制与导出
 
-查看 [详情](/docs/manual/advanced/interaction/copy)
+查看 [文档](/docs/manual/advanced/interaction/copy)
 
 ### 重置交互
 
@@ -463,15 +483,19 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/basic/#auto-reset-sheet-style)
+
 ## 调整交互主题
 
 <Playground path='interaction/basic/demo/state-theme.ts' rid='container' height='300'></playground>
 
 可以通过 [主题配置](https://s2.antv.antgroup.com/api/general/s2-theme#interactionstatename) 对应的 [交互主题](https://s2.antv.antgroup.com/api/general/s2-theme#interactionstatename), 调整选中/悬停/圈选等交互主题。
 
+[查看示例](/examples/interaction/basic/#state-theme)
+
 ## 交互拦截
 
-可以通过自定义屏蔽交互事件，如不响应表格的 hover, click 事件等。[查看示例](/examples/interaction/advanced#intercepts)
+可以通过自定义屏蔽交互事件，如不响应表格的 hover, click 事件等。
 
 ```ts
 import { InterceptType } from '@antv/s2'
@@ -483,6 +507,8 @@ s2.interaction.addIntercepts([InterceptType.HOVER, InterceptType.CLICK]);
 s2.interaction.removeIntercepts([InterceptType.HOVER, InterceptType.CLICK]);
 ```
 
+[查看示例](/examples/interaction/advanced#intercepts)
+
 ## 调用 API
 
 `S2` 内置了一些交互相关的 `API`，统一挂载在 `s2.interaction` 命名空间下，你可以在拿到 [SpreadSheet 实例](/docs/api/basic-class/spreadsheet) 后调用它们来实现你的效果，比如 `选中所有单元格`, `获取列头单元格` 等常用方法，具体请查看 [Interaction 实例类](/docs/api/basic-class/interaction) 和 [示例](/examples/analysis/get-data/#get-cell-data)
@@ -492,6 +518,8 @@ const s2 = new PivotSheet()
 s2.interaction.selectAll()
 ```
 
+[查看示例](/examples/interaction/basic/#event)
+
 ## 扩展阅读
 
 对背后的交互实现原理感兴趣？欢迎阅读文章 [《你不知道的 Canvas 表格交互》](https://www.yuque.com/antv/vo4vyz/bvzbaz)
diff --git a/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts b/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts
index ae794dc316..2c9b6c0642 100644
--- a/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts
+++ b/s2-site/examples/interaction/advanced/demo/scroll-speed-ratio.ts
@@ -120,7 +120,7 @@ insertCSS(`
   input[type='range']::before {
     content: attr(title);
     position: absolute;
-    left: 15px;
-    top: 12px;
+    left: 0;
+    top: -10px;
   }
 `);
diff --git a/s2-site/examples/interaction/basic/demo/copy-export.ts b/s2-site/examples/interaction/basic/demo/copy-export.ts
index 94e9030471..67cdbdfcf2 100644
--- a/s2-site/examples/interaction/basic/demo/copy-export.ts
+++ b/s2-site/examples/interaction/basic/demo/copy-export.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import {
   CopyMIMEType,
   PivotSheet,
diff --git a/s2-site/examples/interaction/basic/demo/event.ts b/s2-site/examples/interaction/basic/demo/event.ts
index 4a866a0f02..a5837bc81c 100644
--- a/s2-site/examples/interaction/basic/demo/event.ts
+++ b/s2-site/examples/interaction/basic/demo/event.ts
@@ -1,4 +1,108 @@
-import { PivotSheet, S2Options, S2Event } from '@antv/s2';
+/* eslint-disable no-console */
+import {
+  PivotSheet,
+  S2Options,
+  S2Event,
+  SpreadSheet,
+  InteractionStateName,
+} from '@antv/s2';
+
+function addButtons(s2: SpreadSheet) {
+  const selectAllBtn = document.createElement('button');
+  const selectHeaderCellBtn = document.createElement('button');
+  const selectDataCellBtn = document.createElement('button');
+  const hideColumnsBtn = document.createElement('button');
+  const resetBtn = document.createElement('button');
+
+  [
+    selectAllBtn,
+    selectHeaderCellBtn,
+    selectDataCellBtn,
+    hideColumnsBtn,
+    resetBtn,
+  ].forEach((btn) => {
+    btn.className = 'ant-btn ant-btn-default';
+  });
+
+  selectAllBtn.innerHTML = '选中全部';
+  selectHeaderCellBtn.innerHTML = '选中指定行列头单元格';
+  selectDataCellBtn.innerHTML = '选中指定数值单元格';
+  hideColumnsBtn.innerHTML = '隐藏指定列头';
+  resetBtn.innerHTML = '重置';
+
+  // 查看更多 API: https://s2.antv.antgroup.com/api/basic-class/interaction
+  selectAllBtn.addEventListener('click', () => {
+    s2.interaction.selectAll();
+  });
+
+  selectHeaderCellBtn.addEventListener('click', () => {
+    const rowNode = s2.facet.getRowNodeById('root[&]浙江省[&]杭州市');
+
+    console.log(
+      '🚀 ~ selectHeaderCellBtn.addEventListener ~ rowNode:',
+      rowNode,
+    );
+
+    s2.interaction.selectHeaderCell({
+      cell: rowNode?.belongsCell,
+    });
+  });
+
+  selectDataCellBtn.addEventListener('click', () => {
+    const dataCells = s2.facet
+      .getDataCells()
+      .slice(0, 4)
+      .map((cell) => {
+        const meta = cell.getMeta();
+
+        return {
+          id: meta.id,
+          rowIndex: meta.rowIndex,
+          colIndex: meta.colIndex,
+          type: cell.cellType,
+        };
+      });
+
+    console.log(
+      '🚀 ~ selectDataCellBtn.addEventListener ~ dataCells:',
+      dataCells,
+    );
+
+    s2.interaction.setState({
+      stateName: InteractionStateName.SELECTED,
+      cells: dataCells,
+    });
+  });
+
+  hideColumnsBtn.addEventListener('click', () => {
+    s2.interaction.hideColumns([
+      'root[&]家具[&]桌子[&]数量',
+      'root[&]办公用品[&]笔[&]数量',
+    ]);
+  });
+
+  resetBtn.addEventListener('click', () => {
+    console.log('当前状态:', s2.interaction.getState());
+    console.log('当前发生过交互的单元格:', s2.interaction.getInteractedCells());
+    console.log('当前激活的单元格', s2.interaction.getActiveCells());
+    console.log('当前未选中的单元格:', s2.interaction.getUnSelectedDataCells());
+
+    s2.interaction.reset();
+    s2.interaction.resetState();
+    s2.interaction.hideColumns([]);
+  });
+
+  const canvas = document.querySelector('#container > canvas');
+
+  if (canvas) {
+    canvas.style.marginTop = '10px';
+    canvas.before(selectAllBtn);
+    canvas.before(selectHeaderCellBtn);
+    canvas.before(selectDataCellBtn);
+    canvas.before(hideColumnsBtn);
+    canvas.before(resetBtn);
+  }
+}
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
@@ -28,6 +132,16 @@ fetch(
         selectedCellsSpotlight: true,
         selectedCellMove: true,
         overscrollBehavior: 'none',
+
+        /**
+         * 透传底层 Event Listener 属性的可选参数对象
+         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
+         */
+        // eventListenerOptions: {
+        //   once: true,
+        //   capture: false,
+        //   passive: true
+        // }
       },
     };
 
@@ -45,4 +159,6 @@ fetch(
     });
 
     await s2.render();
+
+    addButtons(s2);
   });
diff --git a/s2-site/examples/interaction/basic/demo/meta.json b/s2-site/examples/interaction/basic/demo/meta.json
index 2de2b9e100..6d089f3c9a 100644
--- a/s2-site/examples/interaction/basic/demo/meta.json
+++ b/s2-site/examples/interaction/basic/demo/meta.json
@@ -76,6 +76,24 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NbG7SakRzXUAAAAAAAAAAAAADmJ7AQ/original.gif"
     },
+    {
+      "filename": "selected-cell-highlight.ts",
+      "title": {
+        "zh": "选中单元格联动高亮",
+        "en": "Selected cell highlight"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PEYmR6HdlMEAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
+    },
+    {
+      "filename": "selected-cell-move.ts",
+      "title": {
+        "zh": "键盘方向键移动选中单元格",
+        "en": "Selected cell move"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aj4OTJZG2VsAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
+    },
     {
       "filename": "copy-export.ts",
       "title": {
@@ -97,7 +115,7 @@
     {
       "filename": "event.ts",
       "title": {
-        "zh": "交互事件监听",
+        "zh": "交互事件监听和 API",
         "en": "Interaction Event Listener"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/a6zSe1gvvy/f97ed6ec-0a5d-49b7-8492-754611d0aea6.png",
diff --git a/s2-site/examples/interaction/basic/demo/selected-cell-highlight.ts b/s2-site/examples/interaction/basic/demo/selected-cell-highlight.ts
new file mode 100644
index 0000000000..caf69a4c21
--- /dev/null
+++ b/s2-site/examples/interaction/basic/demo/selected-cell-highlight.ts
@@ -0,0 +1,31 @@
+import { PivotSheet, S2Options } from '@antv/s2';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then(async (dataCfg) => {
+    const container = document.getElementById('container');
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      interaction: {
+        // selectedCellHighlight: true,
+        selectedCellHighlight: {
+          // 选中数值单元格后高亮对应行头
+          rowHeader: true,
+          // 选中数值单元格后高亮对应列头
+          colHeader: true,
+          // 选中数值单元格后高亮整行
+          currentRow: true,
+          // 选中数值单元格后高亮整列
+          currentCol: true,
+        },
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/interaction/basic/demo/selected-cell-move.ts b/s2-site/examples/interaction/basic/demo/selected-cell-move.ts
new file mode 100644
index 0000000000..c459676082
--- /dev/null
+++ b/s2-site/examples/interaction/basic/demo/selected-cell-move.ts
@@ -0,0 +1,27 @@
+import { PivotSheet, S2Event, S2Options } from '@antv/s2';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then(async (dataCfg) => {
+    const container = document.getElementById('container');
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      interaction: {
+        // 选中一个单元格, 然后使用键盘方向键移动
+        selectedCellMove: true,
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    // 也可以监听全局的选中事件
+    s2.on(S2Event.GLOBAL_SELECTED, (cells) => {
+      console.log('selected', cells);
+    });
+
+    await s2.render();
+  });

From fba788d4b23456c398606a688abbee092915ac7d Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Tue, 30 Jan 2024 17:27:00 +0800
Subject: [PATCH 39/64] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=E5=AF=BC=E5=87=BA=20API=20&=20=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=BC=80=E5=90=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...interaction-brush-selection-scroll-spec.ts |   4 +-
 .../__tests__/spreadsheet/table-sheet-spec.ts |   2 +-
 .../__tests__/unit/cell/data-cell-spec.ts     |   2 +-
 .../unit/interaction/event-controller-spec.ts |   2 +-
 .../utils/__snapshots__/merge-spec.ts.snap    |   5 +
 .../export/__snapshots__/copy-spec.ts.snap    |   2 +-
 .../__tests__/unit/utils/export/copy-spec.ts  | 138 ++++++++++--------
 .../unit/utils/export/export-pivot-spec.ts    |  26 ++--
 .../unit/utils/export/export-spec.ts          |   6 +-
 .../unit/utils/export/export-table-spec.ts    |   4 +-
 .../s2-core/src/common/constant/options.ts    |   5 +
 .../s2-core/src/common/interface/export.ts    |   8 +-
 .../src/common/interface/interaction.ts       |  41 +++---
 .../src/interaction/event-controller.ts       |   5 +-
 .../s2-core/src/utils/export/copy/common.ts   |  31 ++--
 .../utils/export/copy/pivot-data-cell-copy.ts |  17 +--
 .../src/utils/export/copy/table-copy.ts       |  14 +-
 packages/s2-core/src/utils/theme.ts           |   3 +-
 .../spreadsheet/filter-sheet-spec.tsx         |   2 +-
 .../spreadsheet/table-sheet-spec.tsx          |   2 +-
 .../unit/components/header/index-spec.tsx     |  12 +-
 .../unit/components/sheets/index-spec.tsx     |   6 +-
 .../playground/components/ChartSheet.tsx      |   5 +-
 .../playground/components/StrategySheet.tsx   |   4 +-
 packages/s2-react/playground/config.tsx       |   8 +-
 packages/s2-react/playground/index.tsx        |  26 ++--
 .../src/components/advanced-sort/index.tsx    |   4 +-
 .../s2-react/src/components/export/index.tsx  |   4 +-
 .../src/components/export/strategy-copy.ts    |   6 +-
 .../s2-react/src/components/header/index.tsx  |  38 +++--
 packages/s2-react/src/components/index.ts     |   2 +-
 .../src/components/sheets/interface.ts        |   4 +-
 .../src/components/switcher/header.tsx        |   6 +-
 .../utils/__snapshots__/options-spec.ts.snap  |   5 +
 .../docs/api/components/advanced-sort.en.md   |   2 +-
 .../docs/api/components/advanced-sort.zh.md   |   2 +-
 s2-site/docs/api/components/export.en.md      |   2 +-
 s2-site/docs/api/components/export.zh.md      |   2 +-
 s2-site/docs/api/components/header.en.md      |   6 +-
 s2-site/docs/api/components/header.zh.md      |   6 +-
 s2-site/docs/common/copy-export.en.md         |   2 +-
 s2-site/docs/common/copy-export.zh.md         |  52 ++++---
 s2-site/docs/common/header.en.md              |   6 +-
 s2-site/docs/common/header.zh.md              |   6 +-
 s2-site/docs/common/interaction.en.md         |   4 +-
 s2-site/docs/common/interaction.zh.md         |  18 ++-
 .../manual/advanced/analysis/export.en.md     |  22 +--
 .../manual/advanced/analysis/export.zh.md     |  10 +-
 s2-site/docs/manual/basic/formatter.zh.md     |   4 +-
 s2-site/docs/manual/basic/sort/advanced.en.md |   8 +-
 s2-site/docs/manual/basic/sort/advanced.zh.md |   8 +-
 .../analysis/get-data/demo/get-cell-data.ts   |   2 +-
 .../get-data/demo/get-multi-cell-data.ts      |   2 +-
 .../get-data/demo/get-single-cell-data.ts     |   2 +-
 .../examples/analysis/sort/demo/advanced.tsx  |   6 +-
 .../examples/analysis/totals/demo/basic.ts    |   2 +-
 .../analysis/totals/demo/multiple-values.ts   |   2 +-
 s2-site/examples/analysis/totals/demo/tree.ts |   2 +-
 s2-site/examples/basic/pivot/demo/grid.ts     |   6 +-
 s2-site/examples/case/art/demo/lost-text.tsx  |   2 +-
 .../examples/case/data-preview/demo/excel.tsx |   7 +-
 .../examples/case/data-preview/demo/index.tsx |   2 +-
 .../case/proportion/demo/group-drill-down.tsx |   2 +-
 .../interaction/basic/demo/brush-header.ts    |   2 +-
 .../interaction/basic/demo/copy-export.ts     |  14 +-
 .../examples/interaction/basic/demo/event.ts  |   2 +-
 .../layout/custom/demo/multi-line-text.ts     |   8 +-
 .../react-component/export/demo/export.tsx    |   4 +-
 .../react-component/header/demo/default.tsx   |   8 +-
 .../switcher/demo/pivot-header.tsx            |   3 +-
 70 files changed, 381 insertions(+), 306 deletions(-)

diff --git a/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts b/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts
index a579f830b5..f51e75778b 100644
--- a/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts
@@ -66,7 +66,9 @@ const options: S2Options = {
     pageSize: 100,
   },
   interaction: {
-    enableCopy: true,
+    copy: {
+      enable: true,
+    },
     hoverHighlight: false,
     resize: true,
   },
diff --git a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
index 19c04800dc..27344a21c5 100644
--- a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
@@ -80,7 +80,7 @@ const options: S2Options = {
     },
   },
   interaction: {
-    enableCopy: true,
+    copy: { enable: true },
     hoverHighlight: false,
     selectedCellHighlight: true,
     linkFields: ['order_id', 'customer_name'],
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 6ce23c12d3..790033668c 100644
--- a/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts
+++ b/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts
@@ -601,7 +601,7 @@ describe('Data Cell Tests', () => {
       s2 = createPivotSheet({
         showSeriesNumber: true,
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
         },
       });
       await s2.render();
diff --git a/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts b/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts
index 0eb3b690ac..a884abaad5 100644
--- a/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts
+++ b/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts
@@ -54,7 +54,7 @@ const s2Options: S2Options = {
     enable: true,
   },
   interaction: {
-    enableCopy: true,
+    copy: { enable: true },
     autoResetSheetStyle: true,
   },
 };
diff --git a/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
index 17e1e4c96f..b0d8671177 100644
--- a/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
+++ b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
@@ -26,6 +26,11 @@ Object {
       "dataCell": true,
       "rowCell": false,
     },
+    "copy": Object {
+      "enable": true,
+      "withFormat": true,
+      "withHeader": false,
+    },
     "eventListenerOptions": false,
     "hiddenColumnFields": Array [],
     "hoverFocus": Object {
diff --git a/packages/s2-core/__tests__/unit/utils/export/__snapshots__/copy-spec.ts.snap b/packages/s2-core/__tests__/unit/utils/export/__snapshots__/copy-spec.ts.snap
index c7c3058c62..5088023b5d 100644
--- a/packages/s2-core/__tests__/unit/utils/export/__snapshots__/copy-spec.ts.snap
+++ b/packages/s2-core/__tests__/unit/utils/export/__snapshots__/copy-spec.ts.snap
@@ -109,7 +109,7 @@ number	number	小计	number	number",
 ]
 `;
 
-exports[`Tree Table Core Data Process should copy normal data with header for custom field formatter if enable copyWithFormat 1`] = `
+exports[`Tree Table Core Data Process should copy normal data with header for custom field formatter if enable withFormat 1`] = `
 Array [
   Object {
     "content": "		家具	家具	家具	办公用品	办公用品
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 086fa5ec1f..96cf0f5d21 100644
--- a/packages/s2-core/__tests__/unit/utils/export/copy-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/export/copy-spec.ts
@@ -128,7 +128,9 @@ describe('List Table Core Data Process', () => {
   it('should copy normal data with header in table mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: true,
+        copy: {
+          withHeader: true,
+        },
       },
       showSeriesNumber: false,
     });
@@ -157,8 +159,7 @@ describe('List Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
         },
         showSeriesNumber: true,
       }),
@@ -188,8 +189,7 @@ describe('List Table Core Data Process', () => {
 
     s2.setOptions({
       interaction: {
-        enableCopy: true,
-        copyWithFormat: true,
+        copy: { enable: true, withFormat: true },
       },
       showSeriesNumber: false,
     });
@@ -221,8 +221,7 @@ describe('List Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
         },
       }),
     );
@@ -259,7 +258,9 @@ describe('List Table Core Data Process', () => {
   it('should copy correct data with data filtered', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: false,
+        copy: {
+          withHeader: false,
+        },
       },
     });
     await s2.render();
@@ -337,7 +338,7 @@ describe('List Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
         },
         showSeriesNumber: true,
       }),
@@ -374,7 +375,7 @@ describe('List Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
         },
         showSeriesNumber: true,
       }),
@@ -420,12 +421,14 @@ describe('List Table Core Data Process', () => {
     s2.setOptions({
       showSeriesNumber: false,
       interaction: {
-        customTransformer: () => {
-          return {
-            [CopyMIMEType.PLAIN]: () => {
-              return { type: CopyMIMEType.PLAIN, content: 'custom data' };
-            },
-          };
+        copy: {
+          customTransformer: () => {
+            return {
+              [CopyMIMEType.PLAIN]: () => {
+                return { type: CopyMIMEType.PLAIN, content: 'custom data' };
+              },
+            };
+          },
         },
       },
     });
@@ -468,7 +471,7 @@ describe('Pivot Table Core Data Process', () => {
     return assembleOptions({
       hierarchyType: 'grid',
       interaction: {
-        enableCopy: true,
+        copy: { enable: true },
       },
       totals: TOTALS_OPTIONS,
     });
@@ -520,8 +523,7 @@ describe('Pivot Table Core Data Process', () => {
   it('should copy format data when valueInCols is false in grid mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithFormat: true,
-        enableCopy: true,
+        copy: { enable: true, withFormat: true },
       },
     });
 
@@ -563,9 +565,7 @@ describe('Pivot Table Core Data Process', () => {
   it('should copy format total data in grid mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithFormat: true,
-        enableCopy: true,
-        copyWithHeader: true,
+        copy: { enable: true, withHeader: true, withFormat: true },
       },
       totals: {
         row: {
@@ -647,7 +647,7 @@ describe('Pivot Table Core Data Process', () => {
       assembleOptions({
         hierarchyType: 'grid',
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
         },
       }),
     );
@@ -685,8 +685,7 @@ describe('Pivot Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
         },
         showSeriesNumber: false,
       }),
@@ -705,7 +704,9 @@ describe('Pivot Table Core Data Process', () => {
   it('should copy normal data with header in grid mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: true,
+        copy: {
+          withHeader: true,
+        },
       },
     });
     await s2.render();
@@ -738,9 +739,7 @@ describe('Pivot Table Core Data Process', () => {
   it('should copy normal data with format header in grid mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: true,
-        copyWithFormat: true,
-        enableCopy: true,
+        copy: { enable: true, withHeader: true, withFormat: true },
       },
     });
 
@@ -793,7 +792,9 @@ describe('Pivot Table Core Data Process', () => {
   it('should copy col data with header in grid mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: true,
+        copy: {
+          withHeader: true,
+        },
       },
     });
     await s2.render();
@@ -819,7 +820,9 @@ describe('Pivot Table Core Data Process', () => {
   it('should copy row data with header in grid mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: true,
+        copy: {
+          withHeader: true,
+        },
       },
     });
     await s2.render();
@@ -855,8 +858,11 @@ describe('Pivot Table Core Data Process', () => {
   it('should copy row data with format header in grid mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: true,
-        copyWithFormat: true,
+        copy: {
+          enable: true,
+          withHeader: true,
+          withFormat: true,
+        },
       },
     });
     s2.setDataCfg({
@@ -905,7 +911,9 @@ describe('Pivot Table Core Data Process', () => {
   it('should copy all data with header in grid mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: true,
+        copy: {
+          withHeader: true,
+        },
       },
     });
     await s2.render();
@@ -925,7 +933,9 @@ describe('Pivot Table Core Data Process', () => {
   it('should copy correct data with data sorted in grid mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: false,
+        copy: {
+          withHeader: false,
+        },
       },
     });
     const node = s2.facet.getColLeafNodes()[0];
@@ -962,8 +972,7 @@ describe('Pivot Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
         },
         showSeriesNumber: false,
       }),
@@ -1001,8 +1010,7 @@ describe('Pivot Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
         },
         showSeriesNumber: false,
       }),
@@ -1034,8 +1042,7 @@ describe('Pivot Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
         },
         showSeriesNumber: false,
       }),
@@ -1088,7 +1095,7 @@ describe('Pivot Table Core Data Process', () => {
   });
 
   // https://github.com/antvis/S2/issues/1955
-  it('should get correct data with hideMeasureColumn、showSeriesNumber and copyWithHeader are all true', async () => {
+  it('should get correct data with hideMeasureColumn、showSeriesNumber and withHeader are all true', async () => {
     const sheet = new PivotSheet(getContainer(), getDataCfg(), getOptions());
 
     sheet.setOptions({
@@ -1098,8 +1105,7 @@ describe('Pivot Table Core Data Process', () => {
         },
       },
       interaction: {
-        enableCopy: true,
-        copyWithHeader: true,
+        copy: { enable: true, withHeader: true },
       },
       showSeriesNumber: true,
     });
@@ -1132,12 +1138,14 @@ describe('Pivot Table Core Data Process', () => {
   it('should support custom copy matrix transformer', async () => {
     s2.setOptions({
       interaction: {
-        customTransformer: () => {
-          return {
-            [CopyMIMEType.PLAIN]: () => {
-              return { type: CopyMIMEType.PLAIN, content: 'custom data' };
-            },
-          };
+        copy: {
+          customTransformer: () => {
+            return {
+              [CopyMIMEType.PLAIN]: () => {
+                return { type: CopyMIMEType.PLAIN, content: 'custom data' };
+              },
+            };
+          },
         },
       },
     });
@@ -1180,7 +1188,7 @@ describe('Tree Table Core Data Process', () => {
       assembleOptions({
         hierarchyType: 'tree',
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
         },
         totals: TOTALS_OPTIONS,
       }),
@@ -1283,7 +1291,10 @@ describe('Tree Table Core Data Process', () => {
     } as S2DataConfig);
     s2.setOptions({
       interaction: {
-        copyWithFormat: true,
+        copy: {
+          enable: true,
+          withFormat: true,
+        },
       },
     });
     await s2.render();
@@ -1308,8 +1319,7 @@ describe('Tree Table Core Data Process', () => {
   it('should copy normal data with header in tree mode', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: true,
-        enableCopy: true,
+        copy: { enable: true, withHeader: true },
       },
     });
     await s2.render();
@@ -1337,7 +1347,10 @@ describe('Tree Table Core Data Process', () => {
   it('should copy normal data with header for custom field name', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: true,
+        copy: {
+          enable: true,
+          withHeader: true,
+        },
       },
     });
     s2.setDataCfg({
@@ -1355,11 +1368,14 @@ describe('Tree Table Core Data Process', () => {
     expect(getSelectedData(s2)).toMatchSnapshot();
   });
 
-  it('should copy normal data with header for custom field formatter if enable copyWithFormat', async () => {
+  it('should copy normal data with header for custom field formatter if enable withFormat', async () => {
     s2.setOptions({
       interaction: {
-        copyWithHeader: true,
-        copyWithFormat: true,
+        copy: {
+          enable: true,
+          withHeader: true,
+          withFormat: true,
+        },
       },
     });
     s2.setDataCfg({
@@ -1394,7 +1410,7 @@ describe('Pivot Table getBrushHeaderCopyable', () => {
   const options = assembleOptions({
     hierarchyType: 'grid',
     interaction: {
-      enableCopy: true,
+      copy: { enable: true },
       brushSelection: true,
     },
   });
@@ -1671,7 +1687,7 @@ describe('Pivot Table getBrushHeaderCopyable', () => {
       assembleOptions({
         hierarchyType: 'grid',
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
           brushSelection: true,
         },
         totals: TOTALS_OPTIONS,
@@ -1712,7 +1728,7 @@ describe('Pivot Table getBrushHeaderCopyable', () => {
       assembleOptions({
         hierarchyType: 'grid',
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
           brushSelection: true,
         },
         totals: TOTALS_OPTIONS,
diff --git a/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts b/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts
index 2a46ca4d72..a3d4c01b35 100644
--- a/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts
@@ -304,7 +304,7 @@ describe('PivotSheet Export Test', () => {
     });
   });
 
-  it('should export correct data when isFormat: {isFormatHeader: true}', async () => {
+  it('should export correct data when isFormat: {formatHeader: true}', async () => {
     const s2 = new PivotSheet(
       getContainer(),
       assembleDataCfg({
@@ -327,9 +327,7 @@ describe('PivotSheet Export Test', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithHeader: true,
-          copyWithFormat: true,
+          copy: { enable: true, withHeader: true, withFormat: true },
         },
       }),
     );
@@ -338,7 +336,7 @@ describe('PivotSheet Export Test', () => {
     const data = await asyncGetAllPlainData({
       sheetInstance: s2,
       split: NewTab,
-      formatOptions: { isFormatHeader: true },
+      formatOptions: { formatHeader: true },
     });
 
     const rows = data.split('\n');
@@ -350,7 +348,7 @@ describe('PivotSheet Export Test', () => {
     expect(rows[3].split(NewTab)[0]).toEqual('家具-type');
   });
 
-  it('should export correct data when isFormat: {isFormatData: true}', async () => {
+  it('should export correct data when isFormat: {formatData: true}', async () => {
     const s2 = new PivotSheet(
       getContainer(),
       assembleDataCfg({
@@ -363,8 +361,7 @@ describe('PivotSheet Export Test', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
         },
       }),
     );
@@ -374,7 +371,7 @@ describe('PivotSheet Export Test', () => {
     const data = await asyncGetAllPlainData({
       sheetInstance: s2,
       split: NewTab,
-      formatOptions: { isFormatData: true },
+      formatOptions: { formatData: true },
     });
 
     expect(data).toMatchInlineSnapshot(`
@@ -444,7 +441,12 @@ describe('PivotSheet Export Test', () => {
       assembleOptions({
         hierarchyType: 'grid',
         showSeriesNumber: true,
-        interaction: { enableCopy: true, copyWithHeader: true },
+        interaction: {
+          copy: {
+            enable: true,
+            withHeader: true,
+          },
+        },
       }),
     );
 
@@ -484,7 +486,7 @@ describe('PivotSheet Export Test', () => {
       }),
       assembleOptions({
         hierarchyType: 'grid',
-        interaction: { enableCopy: true, copyWithHeader: true },
+        interaction: { copy: { enable: true, withHeader: true } },
       }),
     );
 
@@ -542,7 +544,7 @@ describe('PivotSheet Export Test', () => {
       sheetInstance: pivotSheet,
       split: ',',
       formatOptions: {
-        isFormatHeader: true,
+        formatHeader: true,
       },
     });
 
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 00f03a3b42..001e3316df 100644
--- a/packages/s2-core/__tests__/unit/utils/export/export-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/export/export-spec.ts
@@ -29,7 +29,7 @@ describe('TableSheet Export Test', () => {
       sheetInstance: s2,
       split: '\t',
       formatOptions: {
-        isFormatHeader: true,
+        formatHeader: true,
       },
     });
 
@@ -394,7 +394,7 @@ describe('PivotSheet Export Test', () => {
     });
   });
 
-  it('should export correct data when isFormat: {isFormatHeader: true}', async () => {
+  it('should export correct data when isFormat: {formatHeader: true}', async () => {
     const s2 = new PivotSheet(
       getContainer(),
       assembleDataCfg({
@@ -427,7 +427,7 @@ describe('PivotSheet Export Test', () => {
       sheetInstance: s2,
       split: '\t',
       formatOptions: {
-        isFormatHeader: true,
+        formatHeader: true,
       },
     });
     const rows = data.split('\n');
diff --git a/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts b/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts
index 726ebc946d..50c407541c 100644
--- a/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts
@@ -65,7 +65,7 @@ describe('TableSheet Export Test', () => {
       sheetInstance: s2,
       split: NewTab,
       formatOptions: {
-        isFormatHeader: true,
+        formatHeader: true,
       },
     });
 
@@ -75,7 +75,7 @@ describe('TableSheet Export Test', () => {
       sheetInstance: s2,
       split: NewTab,
       formatOptions: {
-        isFormatHeader: true,
+        formatHeader: true,
       },
       isAsyncExport: true,
     });
diff --git a/packages/s2-core/src/common/constant/options.ts b/packages/s2-core/src/common/constant/options.ts
index 0613b48e1a..476af3ab71 100644
--- a/packages/s2-core/src/common/constant/options.ts
+++ b/packages/s2-core/src/common/constant/options.ts
@@ -75,6 +75,11 @@ export const DEFAULT_OPTIONS: S2Options = {
     },
   },
   interaction: {
+    copy: {
+      enable: true,
+      withFormat: true,
+      withHeader: false,
+    },
     linkFields: [],
     hiddenColumnFields: [],
     selectedCellsSpotlight: false,
diff --git a/packages/s2-core/src/common/interface/export.ts b/packages/s2-core/src/common/interface/export.ts
index 4480aab47f..4bda53072d 100644
--- a/packages/s2-core/src/common/interface/export.ts
+++ b/packages/s2-core/src/common/interface/export.ts
@@ -36,8 +36,8 @@ export type Copyable = CopyableItem | CopyableItem[];
 export type FormatOptions =
   | boolean
   | {
-      isFormatHeader?: boolean;
-      isFormatData?: boolean;
+      formatHeader?: boolean;
+      formatData?: boolean;
     };
 
 export interface Transformer {
@@ -55,8 +55,8 @@ export interface CopyOrExportConfig {
 
 export interface CopyAndExportUnifyConfig {
   separator: string;
-  isFormatHeader: boolean;
-  isFormatData: boolean;
+  formatHeader: boolean;
+  formatData: boolean;
   selectedCells: CellMeta[];
   transformers: Transformer;
   isAsyncExport: boolean;
diff --git a/packages/s2-core/src/common/interface/interaction.ts b/packages/s2-core/src/common/interface/interaction.ts
index 12484f6e9f..f03c15c886 100644
--- a/packages/s2-core/src/common/interface/interaction.ts
+++ b/packages/s2-core/src/common/interface/interaction.ts
@@ -176,25 +176,30 @@ export interface InteractionOptions {
   hoverFocus?: HoverFocusOptions | boolean;
 
   /**
-   * 开启复制 Command/Ctrl + C
+   * 单元格文本复制
    * @see https://s2.antv.antgroup.com/examples/interaction/basic/#copy-export
    */
-  enableCopy?: boolean;
-
-  /**
-   * 复制带格式的数据
-   */
-  copyWithFormat?: boolean;
-
-  /**
-   * 复制包含其对应行列头的数据
-   */
-  copyWithHeader?: boolean;
-
-  /**
-   * 复制时支持自定义 (transformer) 数据导出格式化方法
-   */
-  customTransformer?: (transformer: Transformer) => Partial<Transformer>;
+  copy?: {
+    /**
+     * 开启复制 Command/Ctrl + C
+     */
+    enable?: boolean;
+
+    /**
+     * 复制带格式的数据
+     */
+    withFormat?: boolean;
+
+    /**
+     * 复制包含其对应行列头的数据
+     */
+    withHeader?: boolean;
+
+    /**
+     * 复制时支持自定义 (transformer) 数据导出格式化方法
+     */
+    customTransformer?: (transformer: Transformer) => Partial<Transformer>;
+  };
 
   /**
    * 自动重置表格样式 (按下 ESC 键, 点击空白区域时, 关闭 tooltip/交互状态)
@@ -212,7 +217,7 @@ export interface InteractionOptions {
 
   /**
    * 自定义滚动速率, 默认 1
-   * @see http://localhost:8000/examples/interaction/advanced/#scroll-speed-ratio
+   * @see https://s2.antv.antgroup.com/examples/interaction/advanced/#scroll-speed-ratio
    */
   scrollSpeedRatio?: ScrollSpeedRatio;
 
diff --git a/packages/s2-core/src/interaction/event-controller.ts b/packages/s2-core/src/interaction/event-controller.ts
index f4670994df..56e753b24f 100644
--- a/packages/s2-core/src/interaction/event-controller.ts
+++ b/packages/s2-core/src/interaction/event-controller.ts
@@ -120,10 +120,11 @@ export class EventController {
 
   // Windows and Mac OS
   private onKeyboardCopy(event: KeyboardEvent) {
+    const { copy } = this.spreadsheet.options.interaction!;
+
     if (
       this.isCanvasEffect &&
-      this.spreadsheet.options.interaction?.enableCopy &&
-      // todo: 在copy header 时有问题
+      copy?.enable &&
       keyEqualTo(event.key, InteractionKeyboardKey.COPY) &&
       (event.metaKey || event.ctrlKey)
     ) {
diff --git a/packages/s2-core/src/utils/export/copy/common.ts b/packages/s2-core/src/utils/export/copy/common.ts
index d6976f6664..966e376710 100644
--- a/packages/s2-core/src/utils/export/copy/common.ts
+++ b/packages/s2-core/src/utils/export/copy/common.ts
@@ -60,10 +60,10 @@ export const Transformers: {
 
 export function getFormatter(
   field: string,
-  isFormatData = false,
+  formatData = false,
   dataSet: BaseDataSet,
 ) {
-  if (isFormatData) {
+  if (formatData) {
     return dataSet.getFieldFormatter(field!);
   }
 
@@ -143,17 +143,17 @@ export function completeMatrix(matrix: string[][]): string[][] {
   });
 }
 
-export const getFormatOptions = (isFormat?: FormatOptions) => {
-  if (typeof isFormat === 'object') {
+export const getFormatOptions = (formatOptions?: FormatOptions) => {
+  if (typeof formatOptions === 'object') {
     return {
-      isFormatHeader: isFormat.isFormatHeader ?? false,
-      isFormatData: isFormat.isFormatData ?? false,
+      formatHeader: formatOptions.formatHeader ?? false,
+      formatData: formatOptions.formatData ?? false,
     };
   }
 
   return {
-    isFormatHeader: isFormat ?? false,
-    isFormatData: isFormat ?? false,
+    formatHeader: formatOptions ?? false,
+    formatData: formatOptions ?? false,
   };
 };
 
@@ -190,24 +190,23 @@ export function unifyConfig({
   },
   isExport,
 }: SheetCopyConstructorParams): CopyAndExportUnifyConfig {
-  const { copyWithFormat, customTransformer: brushCopyCustomTransformer } =
-    interaction ?? {};
-  const { isFormatData, isFormatHeader } = isExport
+  const { copy } = interaction!;
+  const { formatData, formatHeader } = isExport
     ? getFormatOptions(formatOptions)
     : {
-        isFormatData: copyWithFormat ?? false,
-        isFormatHeader: copyWithFormat ?? false,
+        formatData: copy?.withFormat ?? false,
+        formatHeader: copy?.withFormat ?? false,
       };
   const transformers = getTransformer(
-    isExport ? customTransformer : brushCopyCustomTransformer,
+    isExport ? customTransformer : copy?.customTransformer,
   );
 
   return {
     separator,
     selectedCells,
     transformers,
-    isFormatData,
-    isFormatHeader,
+    formatData,
+    formatHeader,
     isAsyncExport,
   };
 }
diff --git a/packages/s2-core/src/utils/export/copy/pivot-data-cell-copy.ts b/packages/s2-core/src/utils/export/copy/pivot-data-cell-copy.ts
index 8c8471dbce..b6d61e9e91 100644
--- a/packages/s2-core/src/utils/export/copy/pivot-data-cell-copy.ts
+++ b/packages/s2-core/src/utils/export/copy/pivot-data-cell-copy.ts
@@ -228,7 +228,7 @@ export class PivotDataCellCopy extends BaseDataCellCopy {
 
     const formatter = getFormatter(
       field ?? colNode.field,
-      this.config.isFormatData,
+      this.config.formatData,
       dataSet,
     );
 
@@ -274,21 +274,21 @@ export class PivotDataCellCopy extends BaseDataCellCopy {
   protected getColMatrix(): string[][] {
     return zip(
       ...map(this.leafColNodes, (n) =>
-        this.config.isFormatHeader ? getNodeFormatData(n) : getHeaderList(n.id),
+        this.config.formatHeader ? getNodeFormatData(n) : getHeaderList(n.id),
       ),
     ) as string[][];
   }
 
   protected getRowMatrix(): string[][] {
     const rowMatrix: string[][] = map(this.leafRowNodes, (n) =>
-      this.config.isFormatHeader ? getNodeFormatData(n) : getHeaderList(n.id),
+      this.config.formatHeader ? getNodeFormatData(n) : getHeaderList(n.id),
     );
 
     return completeMatrix(rowMatrix);
   }
 
   getDataMatrixByDataCell = (cellMetaMatrix: CellMeta[][]): CopyableList => {
-    const { copyWithHeader } = this.spreadsheet.options.interaction!;
+    const { copy } = this.spreadsheet.options.interaction!;
     const measureQuery = this.compatibleHideMeasureColumn();
 
     const dataMatrix = map(cellMetaMatrix, (cellsMeta) =>
@@ -312,13 +312,12 @@ export class PivotDataCellCopy extends BaseDataCellCopy {
     ) as string[][];
 
     // 不带表头复制
-    if (!copyWithHeader) {
+    if (!copy?.withHeader) {
       return this.matrixTransformer(dataMatrix, this.config.separator);
     }
 
     // 带表头复制
     const rowMatrix = this.getRowMatrix();
-
     const colMatrix = this.getColMatrix();
 
     return this.matrixTransformer(
@@ -328,18 +327,16 @@ export class PivotDataCellCopy extends BaseDataCellCopy {
   };
 
   getPivotCopyData(): CopyableList {
-    const { copyWithHeader } = this.spreadsheet.options.interaction!;
-
+    const { copy } = this.spreadsheet.options.interaction!;
     const dataMatrix = this.getDataMatrixByHeaderNode() as string[][];
 
     // 不带表头复制
-    if (!copyWithHeader) {
+    if (!copy?.withHeader) {
       return this.matrixTransformer(dataMatrix, this.config.separator);
     }
 
     // 带表头复制
     const rowMatrix = this.getRowMatrix();
-
     const colMatrix = this.getColMatrix();
 
     return this.matrixTransformer(
diff --git a/packages/s2-core/src/utils/export/copy/table-copy.ts b/packages/s2-core/src/utils/export/copy/table-copy.ts
index 92117589f8..45779bba94 100644
--- a/packages/s2-core/src/utils/export/copy/table-copy.ts
+++ b/packages/s2-core/src/utils/export/copy/table-copy.ts
@@ -70,7 +70,7 @@ class TableDataCellCopy extends BaseDataCellCopy {
 
         const formatter = getFormatter(
           field,
-          this.config.isFormatData,
+          this.config.formatData,
           this.spreadsheet.dataSet,
         );
         const value = row[field];
@@ -112,7 +112,7 @@ class TableDataCellCopy extends BaseDataCellCopy {
 
                 const formatter = getFormatter(
                   field,
-                  this.config.isFormatData,
+                  this.config.formatData,
                   this.spreadsheet.dataSet,
                 );
                 const value = rowData[field];
@@ -141,14 +141,14 @@ class TableDataCellCopy extends BaseDataCellCopy {
   }
 
   private getColMatrix(): string[] {
-    const { isFormatHeader } = this.config;
+    const { formatHeader } = this.config;
     const { showSeriesNumber } = this.spreadsheet.options;
 
     // 明细表的表头，没有格式化
     return this.columnNodes.map((node) => {
       const field: string = node.field;
 
-      if (!isFormatHeader) {
+      if (!formatHeader) {
         return field;
       }
 
@@ -169,7 +169,7 @@ class TableDataCellCopy extends BaseDataCellCopy {
 
     const formatter = getFormatter(
       fieldKey!,
-      this.config.isFormatData,
+      this.config.formatData,
       this.spreadsheet.dataSet,
     );
 
@@ -177,14 +177,14 @@ class TableDataCellCopy extends BaseDataCellCopy {
   };
 
   getDataMatrixByDataCell(cellMetaMatrix: CellMeta[][]): CopyableList {
-    const { copyWithHeader } = this.spreadsheet.options.interaction!;
+    const { copy } = this.spreadsheet.options.interaction!;
 
     // 因为通过复制数据单元格的方式和通过行列头复制的方式不同，所以不能复用 getDataMatrix 方法
     const dataMatrix = map(cellMetaMatrix, (cellsMeta) =>
       map(cellsMeta, (it) => convertString(this.getValueFromMeta(it))),
     ) as string[][];
 
-    if (!copyWithHeader) {
+    if (!copy?.withHeader) {
       return this.matrixTransformer(dataMatrix, this.config.separator);
     }
 
diff --git a/packages/s2-core/src/utils/theme.ts b/packages/s2-core/src/utils/theme.ts
index 106c48c5e6..f8dc7d93c1 100644
--- a/packages/s2-core/src/utils/theme.ts
+++ b/packages/s2-core/src/utils/theme.ts
@@ -1,6 +1,7 @@
 import { PALETTE_MAP, STYLE_ELEMENT_ID } from '../common/constant';
 import type { Palette, ThemeName } from '../common/interface/theme';
-import DarkVars from '../styles/theme/dark.less?inline';
+// import DarkVars from '../styles/theme/dark.less?inline';
+import DarkVars from '../styles/theme/dark.less';
 import { injectCssText } from './inject-css-text';
 
 /**
diff --git a/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx
index d92a210ab7..f37b643bec 100644
--- a/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx
@@ -62,7 +62,7 @@ function MainLayout() {
     showSeriesNumber: true,
     device: DeviceType.PC,
     interaction: {
-      enableCopy: true,
+      copy: { enable: true },
       linkFields: ['order_id', 'customer_name'],
     },
     style: {
diff --git a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx
index ff719c9a78..df67d28198 100644
--- a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx
@@ -139,7 +139,7 @@ function MainLayout({ callback }: Props) {
         }
       : undefined,
     interaction: {
-      enableCopy: true,
+      copy: { enable: true },
       hoverHighlight: false,
       linkFields: ['order_id', 'customer_name'],
       hiddenColumnFields,
diff --git a/packages/s2-react/__tests__/unit/components/header/index-spec.tsx b/packages/s2-react/__tests__/unit/components/header/index-spec.tsx
index c0695cb928..999d597230 100644
--- a/packages/s2-react/__tests__/unit/components/header/index-spec.tsx
+++ b/packages/s2-react/__tests__/unit/components/header/index-spec.tsx
@@ -25,9 +25,9 @@ describe('Header Component Tests', () => {
     const { container } = render(
       <Header
         sheet={sheet}
-        exportCfg={{ open: true }}
-        advancedSortCfg={{ open: true }}
-        switcherCfg={{ open: true }}
+        export={{ open: true }}
+        advancedSort={{ open: true }}
+        switcher={{ open: true }}
       />,
     );
 
@@ -52,9 +52,9 @@ describe('Header Component Tests', () => {
         title={'title'}
         extra="extra"
         className={className}
-        exportCfg={{ open: true }}
-        advancedSortCfg={{ open: true }}
-        switcherCfg={{ open: true }}
+        export={{ open: true }}
+        advancedSort={{ open: true }}
+        switcher={{ open: true }}
       />,
     );
 
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 0cae2a10fb..01c90c05cf 100644
--- a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx
+++ b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx
@@ -44,9 +44,9 @@ describe('<SheetComponent/> Tests', () => {
       dataCfg: null as unknown as S2DataConfig,
       showPagination: true,
       header: {
-        switcherCfg: { open: true },
-        exportCfg: { open: true },
-        advancedSortCfg: { open: true },
+        switcher: { open: true },
+        export: { open: true },
+        advancedSort: { open: true },
       },
     };
 
diff --git a/packages/s2-react/playground/components/ChartSheet.tsx b/packages/s2-react/playground/components/ChartSheet.tsx
index 33c6ebc8b6..b310275492 100644
--- a/packages/s2-react/playground/components/ChartSheet.tsx
+++ b/packages/s2-react/playground/components/ChartSheet.tsx
@@ -13,8 +13,7 @@ import { usePlaygroundContext } from '../context/playground.context';
 const options: SheetComponentOptions = {
   height: 900,
   interaction: {
-    enableCopy: true,
-    copyWithFormat: true,
+    copy: { enable: true, withFormat: true },
     brushSelection: {
       rowCell: true,
       colCell: true,
@@ -69,7 +68,7 @@ export const ChartSheet: React.FC<
       header={{
         title: 'S2 & G2',
         description: '单元格内绘制 G2 图表',
-        exportCfg: { open: true },
+        export: { open: true },
       }}
     />
   );
diff --git a/packages/s2-react/playground/components/StrategySheet.tsx b/packages/s2-react/playground/components/StrategySheet.tsx
index 7fa3bdf9c5..1849eb8169 100644
--- a/packages/s2-react/playground/components/StrategySheet.tsx
+++ b/packages/s2-react/playground/components/StrategySheet.tsx
@@ -96,8 +96,8 @@ export const StrategySheet: React.FC<
       header={{
         title: '趋势分析表',
         description: '支持子弹图',
-        switcherCfg: { open: true },
-        exportCfg: { open: true },
+        switcher: { open: true },
+        export: { open: true },
         extra: (
           <>
             <Switch
diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx
index 9fd19e1fd5..8a3a62286b 100644
--- a/packages/s2-react/playground/config.tsx
+++ b/packages/s2-react/playground/config.tsx
@@ -321,9 +321,11 @@ export const s2Options: SheetComponentOptions = {
   },
   cornerText: '测试测试测试测试测试测试测试测试测试测试',
   interaction: {
-    enableCopy: true,
-    copyWithFormat: true,
-    copyWithHeader: true,
+    copy: {
+      enable: true,
+      withFormat: true,
+      withHeader: true,
+    },
     hoverAfterScroll: true,
     selectedCellMove: true,
     rangeSelection: true,
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
index 03720cff50..4d15d9af5c 100644
--- a/packages/s2-react/playground/index.tsx
+++ b/packages/s2-react/playground/index.tsx
@@ -1165,12 +1165,14 @@ function MainLayout() {
                                     checkedChildren="允许复制"
                                     unCheckedChildren="禁用复制"
                                     checked={
-                                      mergedOptions.interaction?.enableCopy
+                                      mergedOptions.interaction?.copy?.enable
                                     }
                                     onChange={(checked) => {
                                       updateOptions({
                                         interaction: {
-                                          enableCopy: checked,
+                                          copy: {
+                                            enable: checked,
+                                          },
                                         },
                                       });
                                     }}
@@ -1181,12 +1183,15 @@ function MainLayout() {
                                     checkedChildren="复制包含其对应行列头的数据"
                                     unCheckedChildren="复制不包含其对应行列头的数据"
                                     checked={
-                                      mergedOptions.interaction?.copyWithHeader
+                                      mergedOptions.interaction?.copy
+                                        ?.withHeader
                                     }
                                     onChange={(checked) => {
                                       updateOptions({
                                         interaction: {
-                                          copyWithHeader: checked,
+                                          copy: {
+                                            withHeader: checked,
+                                          },
                                         },
                                       });
                                     }}
@@ -1197,12 +1202,15 @@ function MainLayout() {
                                     checkedChildren="复制带格式后的数据"
                                     unCheckedChildren="复制未格式化的数据"
                                     checked={
-                                      mergedOptions.interaction?.copyWithFormat
+                                      mergedOptions.interaction?.copy
+                                        ?.withFormat
                                     }
                                     onChange={(checked) => {
                                       updateOptions({
                                         interaction: {
-                                          copyWithFormat: checked,
+                                          copy: {
+                                            withFormat: checked,
+                                          },
                                         },
                                       });
                                     }}
@@ -1506,9 +1514,9 @@ function MainLayout() {
                                 </span>
                               </Space>
                             ),
-                            switcherCfg: { open: true },
-                            exportCfg: { open: true },
-                            advancedSortCfg: {
+                            switcher: { open: true },
+                            export: { open: true },
+                            advancedSort: {
                               open: true,
                             },
                           }}
diff --git a/packages/s2-react/src/components/advanced-sort/index.tsx b/packages/s2-react/src/components/advanced-sort/index.tsx
index a0e63ceafb..98fb55d31d 100644
--- a/packages/s2-react/src/components/advanced-sort/index.tsx
+++ b/packages/s2-react/src/components/advanced-sort/index.tsx
@@ -52,7 +52,7 @@ export interface RuleValue {
   sortByMeasure?: string;
 }
 
-export interface AdvancedSortCfgProps {
+export interface AdvancedSortBaseProps {
   open: boolean;
   className?: string;
   icon?: React.ReactNode;
@@ -65,7 +65,7 @@ export interface AdvancedSortCfgProps {
   onSortConfirm?: (ruleValues: RuleValue[], sortParams: SortParam[]) => void;
 }
 
-export interface AdvancedSortProps extends AdvancedSortCfgProps {
+export interface AdvancedSortProps extends AdvancedSortBaseProps {
   sheet: SpreadSheet;
 }
 
diff --git a/packages/s2-react/src/components/export/index.tsx b/packages/s2-react/src/components/export/index.tsx
index 88018e5960..ffdfe2fa6b 100644
--- a/packages/s2-react/src/components/export/index.tsx
+++ b/packages/s2-react/src/components/export/index.tsx
@@ -14,7 +14,7 @@ import cx from 'classnames';
 import React from 'react';
 import { DotIcon } from '../icons';
 
-export interface ExportCfgProps {
+export interface ExportBaseProps {
   open: boolean;
   className?: string;
   icon?: React.ReactNode;
@@ -30,7 +30,7 @@ export interface ExportCfgProps {
   dropdown?: DropDownProps;
 }
 
-export interface ExportProps extends ExportCfgProps {
+export interface ExportProps extends ExportBaseProps {
   sheet: SpreadSheet;
 }
 
diff --git a/packages/s2-react/src/components/export/strategy-copy.ts b/packages/s2-react/src/components/export/strategy-copy.ts
index 110f259de5..5eea0ed5c8 100644
--- a/packages/s2-react/src/components/export/strategy-copy.ts
+++ b/packages/s2-react/src/components/export/strategy-copy.ts
@@ -80,7 +80,7 @@ class StrategyCopyData extends PivotDataCellCopy {
     if (isObject(fieldValue)) {
       tempCells = processObjectValueInRow(
         fieldValue,
-        this.config.isFormatHeader,
+        this.config.formatHeader,
       ) as unknown as string[];
 
       return tempCells ?? placeholder;
@@ -92,7 +92,7 @@ class StrategyCopyData extends PivotDataCellCopy {
     }
 
     // The main measure.
-    if (!this.config.isFormatHeader) {
+    if (!this.config.formatHeader) {
       tempCells.push((fieldValue as string) ?? '');
     } else {
       const mainFormatter =
@@ -154,7 +154,7 @@ class StrategyCopyData extends PivotDataCellCopy {
     const result: string[][] = [];
 
     forEach(this.leafColNodes, (n) => {
-      const colList = this.config.isFormatHeader
+      const colList = this.config.formatHeader
         ? getNodeFormatData(n)
         : getHeaderList(n.id);
       // 倒着循环 colList
diff --git a/packages/s2-react/src/components/header/index.tsx b/packages/s2-react/src/components/header/index.tsx
index c46a175d86..cc496b41fc 100644
--- a/packages/s2-react/src/components/header/index.tsx
+++ b/packages/s2-react/src/components/header/index.tsx
@@ -2,24 +2,24 @@ import React from 'react';
 import { Space } from 'antd';
 import cx from 'classnames';
 import { S2_PREFIX_CLS, type S2DataConfig, type SpreadSheet } from '@antv/s2';
-import { Export, type ExportCfgProps } from '../export';
-import { AdvancedSort, type AdvancedSortCfgProps } from '../advanced-sort';
-import { type SwitcherCfgProps, SwitcherHeader } from '../switcher/header';
+import { Export, type ExportBaseProps } from '../export';
+import { AdvancedSort, type AdvancedSortBaseProps } from '../advanced-sort';
+import { type SwitcherProps, SwitcherHeader } from '../switcher/header';
 import './index.less';
 import type { SheetComponentOptions } from '../sheets/interface';
 
-export interface HeaderCfgProps {
+export interface HeaderBaseProps {
   style?: React.CSSProperties;
   className?: string;
   title?: React.ReactNode;
   description?: React.ReactNode;
-  exportCfg?: ExportCfgProps;
-  advancedSortCfg?: AdvancedSortCfgProps;
-  switcherCfg?: SwitcherCfgProps;
+  export?: ExportBaseProps;
+  advancedSort?: AdvancedSortBaseProps;
+  switcher?: SwitcherProps;
   extra?: React.ReactNode;
 }
 
-export interface HeaderProps extends HeaderCfgProps {
+export interface HeaderProps extends HeaderBaseProps {
   dataCfg?: S2DataConfig;
   options?: SheetComponentOptions;
   sheet: SpreadSheet;
@@ -31,9 +31,9 @@ export const Header: React.FC<HeaderProps> = React.memo(
     style,
     title,
     description,
-    exportCfg,
-    advancedSortCfg,
-    switcherCfg,
+    export: exportProps,
+    advancedSort,
+    switcher,
     sheet,
     extra,
     dataCfg,
@@ -45,18 +45,16 @@ export const Header: React.FC<HeaderProps> = React.memo(
     const renderExtra = () => (
       <Space align="center">
         {extra}
-        {switcherCfg?.open && (
+        {switcher?.open && (
           <SwitcherHeader
             sheet={sheet}
             dataCfg={dataCfg!}
             options={options!}
-            {...switcherCfg}
+            {...switcher}
           />
         )}
-        {advancedSortCfg?.open && (
-          <AdvancedSort sheet={sheet} {...advancedSortCfg} />
-        )}
-        {exportCfg?.open && <Export sheet={sheet} {...exportCfg} />}
+        {advancedSort?.open && <AdvancedSort sheet={sheet} {...advancedSort} />}
+        {exportProps?.open && <Export sheet={sheet} {...exportProps} />}
       </Space>
     );
 
@@ -76,7 +74,7 @@ export const Header: React.FC<HeaderProps> = React.memo(
 
 Header.displayName = 'Header';
 Header.defaultProps = {
-  exportCfg: { open: false },
-  advancedSortCfg: { open: false },
-  switcherCfg: { open: false },
+  export: { open: false },
+  advancedSort: { open: false },
+  switcher: { open: false },
 };
diff --git a/packages/s2-react/src/components/index.ts b/packages/s2-react/src/components/index.ts
index e8ef0584d0..1e0fd2d612 100644
--- a/packages/s2-react/src/components/index.ts
+++ b/packages/s2-react/src/components/index.ts
@@ -8,7 +8,7 @@ export * from './sheets/strategy-sheet/custom-cell';
 export {
   AdvancedSort,
   type AdvancedSortProps,
-  type AdvancedSortCfgProps,
+  type AdvancedSortBaseProps as AdvancedSortCfgProps,
 } from './advanced-sort';
 export {
   DrillDown,
diff --git a/packages/s2-react/src/components/sheets/interface.ts b/packages/s2-react/src/components/sheets/interface.ts
index 8f067c2d13..bccff5c643 100644
--- a/packages/s2-react/src/components/sheets/interface.ts
+++ b/packages/s2-react/src/components/sheets/interface.ts
@@ -6,7 +6,7 @@ import type {
 import type { PaginationProps as AntdPaginationProps } from 'antd';
 import type { ReactNode } from 'react';
 import type { DrillDownProps } from '../drill-down';
-import type { HeaderCfgProps } from '../header';
+import type { HeaderBaseProps } from '../header';
 import type { TooltipOperatorMenuOptions } from '../tooltip/interface';
 
 export type PartDrillDown = BasePartDrillDown<DrillDownProps>;
@@ -19,6 +19,6 @@ export type SheetComponentOptions = S2Options<
 
 export type SheetComponentsProps = BaseSheetComponentProps<
   PartDrillDown,
-  HeaderCfgProps,
+  HeaderBaseProps,
   SheetComponentOptions
 > & { children?: React.ReactNode };
diff --git a/packages/s2-react/src/components/switcher/header.tsx b/packages/s2-react/src/components/switcher/header.tsx
index 825fa295c1..8c0d09348d 100644
--- a/packages/s2-react/src/components/switcher/header.tsx
+++ b/packages/s2-react/src/components/switcher/header.tsx
@@ -9,11 +9,11 @@ import {
   getSheetType,
 } from './headerUtil';
 import type { SwitcherResult } from './interface';
-import { Switcher, type SwitcherProps } from './';
+import { Switcher, type SwitcherProps as DefaultSwitcherProps } from './';
 import './index.less';
 
 type SwitcherBasicCfg = Pick<
-  SwitcherProps,
+  DefaultSwitcherProps,
   | 'title'
   | 'resetText'
   | 'innerContentClassName'
@@ -23,7 +23,7 @@ type SwitcherBasicCfg = Pick<
   | 'allowExchangeHeader'
 >;
 
-export interface SwitcherCfgProps extends SwitcherBasicCfg {
+export interface SwitcherProps extends SwitcherBasicCfg {
   open: boolean;
 }
 
diff --git a/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
index 10cae86c57..37efb47068 100644
--- a/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
+++ b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
@@ -26,6 +26,11 @@ Object {
       "dataCell": true,
       "rowCell": false,
     },
+    "copy": Object {
+      "enable": true,
+      "withFormat": true,
+      "withHeader": false,
+    },
     "eventListenerOptions": false,
     "hiddenColumnFields": Array [],
     "hoverFocus": Object {
diff --git a/s2-site/docs/api/components/advanced-sort.en.md b/s2-site/docs/api/components/advanced-sort.en.md
index 1f8873d7dd..68c1bad810 100644
--- a/s2-site/docs/api/components/advanced-sort.en.md
+++ b/s2-site/docs/api/components/advanced-sort.en.md
@@ -25,7 +25,7 @@ The `props` of the `AdvancedSort` component
 
 ### AdvancedSortCfgProps
 
-Configure the `props` of `advancedSortCfg` in the `header`
+Configure the `props` of `advancedSort` in the `header`
 
 | parameter     | illustrate                                                             | type                                                                                                                           | required | Defaults |
 | ------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- |
diff --git a/s2-site/docs/api/components/advanced-sort.zh.md b/s2-site/docs/api/components/advanced-sort.zh.md
index 7d8178ae13..c419b0a8c6 100644
--- a/s2-site/docs/api/components/advanced-sort.zh.md
+++ b/s2-site/docs/api/components/advanced-sort.zh.md
@@ -25,7 +25,7 @@ order: 4
 
 ### AdvancedSortCfgProps
 
-在 `header` 中配置 `advancedSortCfg` 的 `props`
+在 `header` 中配置 `advancedSort` 的 `props`
 
 | 参数 | 说明 | 类型 | 必选 | 默认值 |
 | -- | -- | -- | -- | -- |
diff --git a/s2-site/docs/api/components/export.en.md b/s2-site/docs/api/components/export.en.md
index a417d420e8..197b477ee6 100644
--- a/s2-site/docs/api/components/export.en.md
+++ b/s2-site/docs/api/components/export.en.md
@@ -10,7 +10,7 @@ tag: Updated
 <SheetComponent
   dataCfg={dataCfg}
   options={options}
-  header={{ exportCfg: { open: true } }}
+  header={{ export: { open: true } }}
 />
 ```
 
diff --git a/s2-site/docs/api/components/export.zh.md b/s2-site/docs/api/components/export.zh.md
index 4d0168814c..ff6022ffee 100644
--- a/s2-site/docs/api/components/export.zh.md
+++ b/s2-site/docs/api/components/export.zh.md
@@ -10,7 +10,7 @@ tag: Updated
 <SheetComponent
   dataCfg={dataCfg}
   options={options}
-  header={{ exportCfg: { open: true } }}
+  header={{ export: { open: true } }}
 />
 ```
 
diff --git a/s2-site/docs/api/components/header.en.md b/s2-site/docs/api/components/header.en.md
index 3e46c51344..8cc9b31831 100644
--- a/s2-site/docs/api/components/header.en.md
+++ b/s2-site/docs/api/components/header.en.md
@@ -17,9 +17,9 @@ The table header, located at the top of the table container, functions as a cont
   header={ {
     title: '表头标题',
     description: '表头描述',
-    exportCfg: { open: true }, // 开启导出功能
-    advancedSortCfg: { open: true }, // 开启高级排序功能
-    switcherCfg: { open: true }, // 开启维度切换功能
+    export: { open: true }, // 开启导出功能
+    advancedSort: { open: true }, // 开启高级排序功能
+    switcher: { open: true }, // 开启维度切换功能
     extra: <button> 插入内容 </button>, //自定义 ReactNode
   } }
 />
diff --git a/s2-site/docs/api/components/header.zh.md b/s2-site/docs/api/components/header.zh.md
index 7a8e695c9f..762432c67e 100644
--- a/s2-site/docs/api/components/header.zh.md
+++ b/s2-site/docs/api/components/header.zh.md
@@ -16,11 +16,11 @@ tag: Updated
     title: '表头标题',
     description: '表头描述',
     // 开启导出功能
-    exportCfg: { open: true },
+    export: { open: true },
     // 开启高级排序功能
-    advancedSortCfg: { open: true },
+    advancedSort: { open: true },
     // 开启维度切换功能
-    switcherCfg: { open: true },
+    switcher: { open: true },
     // 自定义 ReactNode
     extra: <button> 插入内容 </button>,
   } }
diff --git a/s2-site/docs/common/copy-export.en.md b/s2-site/docs/common/copy-export.en.md
index af37cc20bd..e6843fafc9 100644
--- a/s2-site/docs/common/copy-export.en.md
+++ b/s2-site/docs/common/copy-export.en.md
@@ -33,7 +33,7 @@ download(data, 'filename')
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | -------- | -------- |
 | spreadsheet   | s2 instance                                                                                                                                                         | [SpreadSheet](/docs/api/basic-class/spreadsheet)                           |          | ✓        |
 | split         | delimiter                                                                                                                                                           | `string`                                                                   |          | ✓        |
-| formatOptions | Whether to format, you can format the data cell and row header separately, and passing Boolean values will take effect on the cell and row header at the same time. | <code>boolean | { isFormatHeader?: boolean, isFormatData?: boolean}</code> | `false`  |          |
+| formatOptions | Whether to format, you can format the data cell and row header separately, and passing Boolean values will take effect on the cell and row header at the same time. | <code>boolean | { formatHeader?: boolean, formatData?: boolean}</code> | `false`  |          |
 
 ### copyToClipboard
 
diff --git a/s2-site/docs/common/copy-export.zh.md b/s2-site/docs/common/copy-export.zh.md
index 2deca46a94..44303e3a14 100644
--- a/s2-site/docs/common/copy-export.zh.md
+++ b/s2-site/docs/common/copy-export.zh.md
@@ -18,8 +18,8 @@ const data = await asyncGetAllPlainData({
   split: '\t',
   formatOptions: false,
   // formatOptions: {
-  //   isFormatHeader: false,
-  //   isFormatData: true
+  //   formatHeader: false,
+  //   formatData: true
   // },
 });
 
@@ -33,21 +33,27 @@ copyToClipboard(data)
   })
 ```
 
+[查看示例](/examples/interaction/basic/#copy-export)
+
 #### 1.1 原始数据全量复制
 
 <img alt="originFullCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*pfSsTrvuJ0UAAAAAAAAAAAAAARQnAQ" width="1000" />
 
 #### 1.2 格式化数据全量复制
 
-如果配置了 [`S2DataConfig.meta`](http://localhost:8000/api/general/s2-data-config#meta) 对数据有 [格式化处理](/manual/basic/formatter), 那么可以开启 `copyWithFormat`, 这样复制时会拿到格式化之后的数据。
+如果配置了 [`S2DataConfig.meta`](/api/general/s2-data-config#meta) 对数据有 [格式化处理](/manual/basic/formatter), 那么可以开启 `withFormat`, 这样复制时会拿到格式化之后的数据。
 
 ```ts
 const s2Options = {
   interaction: {
-    // 复制时携带表头
-    copyWithHeader: true,
-    // 复制格式化后的数据
-    copyWithFormat: true
+    copy: {
+      // 开启复制
+      enable: true,
+      // 复制时携带表头
+      withHeader: true,
+      // 复制格式化后的数据
+      withFormat: true
+    }
   }
 }
 ```
@@ -61,12 +67,14 @@ S2 默认提供局部复制的能力，开启后，使用快捷键 `Command/Ctrl
 ```ts
 const s2Options = {
   interaction: {
-    // 是否开启复制
-    enableCopy: true,
-    // 复制时携带表头
-    copyWithHeader: true,
-    // 复制格式化后的数据
-    copyWithFormat: true,
+    copy: {
+      // 是否开启复制
+      enable: true,
+      // 复制时携带表头
+      withHeader: true,
+      // 复制格式化后的数据
+      withFormat: true,
+    },
 
     // 可选：圈选复制前，需要开启圈选功能
     brushSelection: {
@@ -99,18 +107,20 @@ const s2Options = {
 
 #### 2.5 带表头复制
 
-开启 `copyWithHeader` 后，复制时会携带当前选中数据对应的行列头单元格数据。
+开启 `withHeader` 后，复制时会携带当前选中数据对应的行列头单元格数据。
 
 ```ts
 const s2Options = {
   interaction: {
-    enableCopy: true,
-    copyWithHeader: true,
+    copy: {
+      enable: true,
+      withHeader: true,
+    },
   }
 };
 ```
 
-<img alt="copyWithHeader" src="https://gw.alipayobjects.com/zos/antfincdn/wSBjSYKSM/3eee7bc2-7f8e-4dd9-8836-52a978d9718a.png" width="1000"/>
+<img alt="withHeader" src="https://gw.alipayobjects.com/zos/antfincdn/wSBjSYKSM/3eee7bc2-7f8e-4dd9-8836-52a978d9718a.png" width="1000"/>
 
 ## 导出
 
@@ -133,8 +143,8 @@ const data = await asyncGetAllPlainData({
   split: '\t',
   formatOptions: false,
   // formatOptions: {
-  //   isFormatHeader: false,
-  //   isFormatData: true
+  //   formatHeader: false,
+  //   formatData: true
   // },
 });
 
@@ -198,8 +208,8 @@ const data = await asyncGetAllPlainData({
 | ------------|-----------------|---------------|---------------| --- |
 | sheetInstance | s2 实例    | [SpreadSheet](/docs/api/basic-class/spreadsheet)     |      | ✓    |
 | split       | 分隔符           | `string`       |     | ✓    |
-| formatOptions  | 是否格式化，可以分别对数据单元格和行列头进行格式化，传布尔值会同时对单元格和行列头生效。 | `boolean \|  { isFormatHeader?: boolean, isFormatData?: boolean }`| `false`  |      |
-| customTransformer  | 导出时支持自定义 (transformer) 数据导出格式化方法  | (transformer: `Transformer`) => `Partial<Transformer>`      | `transformer` |      |
+| formatOptions  | 是否格式化，可以分别对数据单元格和行列头进行格式化，传 `boolean` 会同时对单元格和行列头生效。 | `boolean \|  { formatHeader?: boolean, formatData?: boolean }`| `false`  |      |
+| customTransformer  | 导出时支持自定义 (transformer) 数据导出格式化方法  | (transformer: `Transformer`) => [`Partial<Transformer>`](#transformer)      |  |      |
 | isAsyncExport  | 是否异步导出        | boolean      | false         |      |
 
 ##### copyToClipboard
diff --git a/s2-site/docs/common/header.en.md b/s2-site/docs/common/header.en.md
index 805a72295e..ae99ad34b3 100644
--- a/s2-site/docs/common/header.en.md
+++ b/s2-site/docs/common/header.en.md
@@ -12,6 +12,6 @@ order: 0
 | className       | header class name                                                  | `string`                                                           | -               |          |
 | style           | header style                                                       | `React.CSSProperties`                                              | -               |          |
 | extra           | Customize the operation area on the right side of the table header | `React.ReactNode`                                                  | -               |          |
-| advancedSortCfg | Configure advanced sorting                                         | [AdvancedSortCfgProps](/docs/api/components/advanced-sort)         | `{open: false}` |          |
-| exportCfg       | configuration export                                               | [ExportCfgProps](/docs/api/components/export)                      | `{open: false}` |          |
-| switcherCfg     | Configure indicator switching                                      | [SwitcherCfgProps](/docs/api/components/switcher#switchercfgprops) | `{open: false}` |          |
+| advancedSort | Configure advanced sorting                                         | [AdvancedSortCfgProps](/docs/api/components/advanced-sort)         | `{open: false}` |          |
+| export       | configuration export                                               | [ExportCfgProps](/docs/api/components/export)                      | `{open: false}` |          |
+| switcher     | Configure indicator switching                                      | [SwitcherCfgProps](/docs/api/components/switcher#switchercfgprops) | `{open: false}` |          |
diff --git a/s2-site/docs/common/header.zh.md b/s2-site/docs/common/header.zh.md
index 87d9ec3ba1..7dd6b93c0c 100644
--- a/s2-site/docs/common/header.zh.md
+++ b/s2-site/docs/common/header.zh.md
@@ -14,6 +14,6 @@ order: 0
 | className       | 表头类名             | `string`               | -      |      |
 | style           | 表头样式             | `React.CSSProperties`  | -      |      |
 | extra           | 自定义表头右侧操作区   |  `React.ReactNode`         | -       |      |
-| advancedSortCfg | 配置高级排序         | [AdvancedSortCfgProps](/docs/api/components/advanced-sort) | `{open: false}` |      |
-| exportCfg       | 配置导出             | [ExportCfgProps](/docs/api/components/export)  | `{open: false}` |      |
-| switcherCfg       | 配置维度切换             | [SwitcherCfgProps](/docs/api/components/switcher#switchercfgprops)  | `{open: false}` |      |
+| advancedSort | 配置高级排序         | [AdvancedSortCfgProps](/docs/api/components/advanced-sort) | `{open: false}` |      |
+| export       | 配置导出             | [ExportCfgProps](/docs/api/components/export)  | `{open: false}` |      |
+| switcher       | 配置维度切换             | [SwitcherCfgProps](/docs/api/components/switcher#switchercfgprops)  | `{open: false}` |      |
diff --git a/s2-site/docs/common/interaction.en.md b/s2-site/docs/common/interaction.en.md
index c288bfb4a4..a1acb81972 100644
--- a/s2-site/docs/common/interaction.en.md
+++ b/s2-site/docs/common/interaction.en.md
@@ -13,8 +13,8 @@ order: 5
 | hoverFocus             | After the mouse hovers over the current cell for more than the default 800ms, it will keep the current highlight and display the tooltip. The hovering time is controlled by setting the `duration`                                                                                                                                                                                                                       | \`boolean\\                                                                     | {duration: number}\`                                                                       | `true`    |
 | hiddenColumnFields     | It is used to configure the columns that are hidden by default. The pivot table needs to configure the unique id of the column header, and the detail table can be configured with the field field of the column header.                                                                                                                                                                                                  | `string[]`                                                                      |                                                                                            |           |
 | enableCopy             | Whether to allow copying                                                                                                                                                                                                                                                                                                                                                                                                  | `boolean`                                                                       | `false`                                                                                    |           |
-| copyWithHeader         | Whether to copy data with header information                                                                                                                                                                                                                                                                                                                                                                              | `boolean`                                                                       | `false`                                                                                    |           |
-| copyWithFormat         | Whether to use the field format format to copy                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                       | `false`                                                                                    |           |
+| withHeader         | Whether to copy data with header information                                                                                                                                                                                                                                                                                                                                                                              | `boolean`                                                                       | `false`                                                                                    |           |
+| withFormat         | Whether to use the field format format to copy                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                       | `false`                                                                                    |           |
 | customInteractions     | Customize interaction [details](/docs/manual/advanced/interaction/custom)                                                                                                                                                                                                                                                                                                                                                 | [CustomInteraction\[\]](#custominteraction)                                     |                                                                                            |           |
 | scrollSpeedRatio       | Used to control the scroll rate, divided into horizontal and vertical directions, the default is 1                                                                                                                                                                                                                                                                                                                        | [ScrollSpeedRatio](#scrollspeedratio)                                           |                                                                                            |           |
 | autoResetSheetStyle    | Used to control whether to reset the interactive state when clicking the area outside the table and pressing the esc key                                                                                                                                                                                                                                                                                                  | `boolean`                                                                       | `true`                                                                                     |           |
diff --git a/s2-site/docs/common/interaction.zh.md b/s2-site/docs/common/interaction.zh.md
index e47e256bec..eb7f35008e 100644
--- a/s2-site/docs/common/interaction.zh.md
+++ b/s2-site/docs/common/interaction.zh.md
@@ -14,10 +14,7 @@ order: 5
 | 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`                                               |                  |
-| customTransformer  | 复制时支持自定义 (transformer) 数据格式化方法                                                                                                                                      | (transformer: [Transformer](/docs/api/components/export#transformer)) => `Partial<Transformer>` | `transformer` |      |
+| copy                   | 单元格复制配置  | [Copy](#copy)         |         |                  |
 | customInteractions                   | 自定义交互 [详情](/docs/manual/advanced/interaction/custom)                                                                                                                | [CustomInteraction[]](#custominteraction)                                                                 |                                                       |                  |
 | scrollSpeedRatio                     | 用于控制滚动速率，分水平和垂直两个方向，默认为 1                                                                                                                                           | [ScrollSpeedRatio](#scrollspeedratio)                                                                     |                                                       |                  |
 | autoResetSheetStyle                  | 用于控制点击表格外区域和按下 esc 键时是否重置交互状态                                                                                                                                       | `boolean`                                                                                                 | `true`                                                |                  |
@@ -30,6 +27,17 @@ order: 5
 | selectedCellHighlight                | 选中数值单元格后的行列高亮联动<br/>rowHeader：选中数值单元格后高亮对应行头 <br/> colHeader：选中数值单元格后高亮对应列头 <br/> currentRow：选中数值单元格后高亮整行 <br/> currentCol：选中数值单元格后高亮整列 <br/>true：同 { rowHeader: true, colHeader: true, currentRow: true, currentCol: true } | `boolean \| { rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean }`     |                                  | `false`                                               |                  |
 | overscrollBehavior                   | 控制滚动至边界的行为，可禁用浏览器的默认滚动行为。[详情](/docs/manual/advanced/interaction/basic/#修改滚动至边界行为)                                                                                   | `auto \| contain \| none \| null`                                                                         |  `auto` |
 
+### Copy
+
+功能描述：单元格复制。查看 [文档](/manual/advanced/interaction/copy) 和 [示例](/examples/interaction/basic/#copy-export)
+
+| 参数        | 说明           | 类型     | 默认值 | 必选  |
+| ----------- | -------------- | ------------------------------------------------- | ------ | --- |
+| enable | 是否允许复制       | `boolean`          | `true`  |     |
+| withFormat   | 是否使用 [s2DataConfig](/api/general/s2-data-config#meta) 的 `formatter` 格式复制数据      | `boolean`      | `true`            |    |
+| withHeader  | 复制数据是否带表头信息    | `boolean`  | `false`              |   |
+| customTransformer  | 复制时支持自定义 (transformer) 数据格式化方法    | (transformer: [Transformer](/docs/api/components/export#transformer)) => `Partial<Transformer>` | `transformer` |      |
+
 ### CustomInteraction
 
 功能描述：自定义交互，继承 BaseEvent:  [查看示例](/docs/manual/advanced/interaction/custom)
@@ -37,7 +45,7 @@ order: 5
 | 参数        | 说明           | 类型                                              | 默认值 | 必选  |
 | ----------- | -------------- | ------------------------------------------------- | ------ | --- |
 | key         | 交互的唯一标识 | `string`                                          |        |   ✓   |
-| interaction |                | [InteractionConstructor](/docs/api/basic-class/interaction#interactionconstructor) |        |   ✓   |
+| interaction |  交互实例             | [InteractionConstructor](/docs/api/basic-class/interaction#interactionconstructor) |        |   ✓   |
 
 ### ScrollSpeedRatio
 
diff --git a/s2-site/docs/manual/advanced/analysis/export.en.md b/s2-site/docs/manual/advanced/analysis/export.en.md
index 210875bd90..e77eb772c3 100644
--- a/s2-site/docs/manual/advanced/analysis/export.en.md
+++ b/s2-site/docs/manual/advanced/analysis/export.en.md
@@ -32,11 +32,11 @@ Use the shortcut key `command/ctrl + c` to copy the selected area (partial copy)
 const s2Options = {
   interaction: {
     // 是否开启复制
-    enableCopy: true,
+    copy: { enable: true },
     // 复制格式化后的数据 (s2DataConfig.meta 中配置的 formatter)
-    copyWithFormat: false,
+    withFormat: false,
     // 复制数值时是否携带所对应的行列头维值
-    copyWithHeader: true,
+    withHeader: true,
     // 圈选复制前，需要开启圈选功能
     brushSelection: {
       dataCell: true, // 圈选数值单元格 （默认开启）
@@ -63,24 +63,24 @@ const s2Options = {
 
 <img alt="CopyCol" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*_NukQpysLC8AAAAAAAAAAAAAARQnAQ" width="600"/>
 
-* CopyWithHeader **copyWithHeader** : whether to copy data with header information, the default is `false`
+* CopyWithHeader **withHeader** : whether to copy data with header information, the default is `false`
 
 ```ts
 const s2Options = {
   interaction: {
-    enableCopy: true,
-    copyWithHeader: true,
+    copy: { enable: true },
+    withHeader: true,
   }
 };
 ```
 
-<img alt="copyWithHeader" src="https://gw.alipayobjects.com/zos/antfincdn/wSBjSYKSM/3eee7bc2-7f8e-4dd9-8836-52a978d9718a.png" width="600" />
+<img alt="withHeader" src="https://gw.alipayobjects.com/zos/antfincdn/wSBjSYKSM/3eee7bc2-7f8e-4dd9-8836-52a978d9718a.png" width="600" />
 
 <br/>
 
 ##### 复制格式化后的数据
 
-**copyWithFormat**: 当 `S2DataConfig` 的 `meta` 中配置了 [自定义格式函数时](/api/general/s2-data-config#meta), 是否按照 `formatter` 复制数据
+**withFormat**: 当 `S2DataConfig` 的 `meta` 中配置了 [自定义格式函数时](/api/general/s2-data-config#meta), 是否按照 `formatter` 复制数据
 
 ```ts
 const s2DataConfig = {
@@ -96,8 +96,8 @@ const s2DataConfig = {
 
 const s2Options = {
   interaction: {
-    enableCopy: true,
-    copyWithFormat: true,
+    copy: { enable: true },
+    withFormat: true,
   }
 };
 ```
@@ -117,7 +117,7 @@ import { SheetComponent } from '@antv/s2-react'
   dataCfg={dataCfg}
   options={options}
   header={{
-    exportCfg: {
+    export: {
       open: true
     }
   }}
diff --git a/s2-site/docs/manual/advanced/analysis/export.zh.md b/s2-site/docs/manual/advanced/analysis/export.zh.md
index d85ff3e72b..95466e30e1 100644
--- a/s2-site/docs/manual/advanced/analysis/export.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/export.zh.md
@@ -10,13 +10,15 @@ tag: Updated
 
 ## 使用
 
-```tsx | {15-19}
+```tsx | {17-21}
 import { SheetComponent } from '@antv/s2-react'
 
 const S2Options = {
   interaction: {
     // 开启复制
-    enableCopy: true
+    copy: {
+      enable: true
+    }
   }
 }
 
@@ -26,7 +28,7 @@ const App = () => {
       dataCfg={dataCfg}
       options={S2Options}
       header={{
-        exportCfg: {
+        export: {
           open: true
         }
       }}
@@ -48,6 +50,8 @@ const App = () => {
   Your browser does not support HTML video.
 </video>
 
+[查看示例](/examples/react-component/export/#export)
+
 ## 在非 React 应用中使用
 
 :::info{title="提示"}
diff --git a/s2-site/docs/manual/basic/formatter.zh.md b/s2-site/docs/manual/basic/formatter.zh.md
index fc759ced9c..5be94a73e9 100644
--- a/s2-site/docs/manual/basic/formatter.zh.md
+++ b/s2-site/docs/manual/basic/formatter.zh.md
@@ -87,12 +87,12 @@ tag: New
 
 ## 复制导出时保留格式化信息
 
-复制导出默认使用原数据进行处理，开启 `copyWithFormat` 后，则以 `meta` 中的 `name` 和 `formatter` 进行复制导出。
+复制导出默认使用原数据进行处理，开启 `withFormat` 后，则以 `meta` 中的 `name` 和 `formatter` 进行复制导出。
 
 ```ts
 const s2Options = {
   interaction: {
-    copyWithFormat: true
+    withFormat: true
   }
 }
 ```
diff --git a/s2-site/docs/manual/basic/sort/advanced.en.md b/s2-site/docs/manual/basic/sort/advanced.en.md
index 6c3b7d7ee1..611730e285 100644
--- a/s2-site/docs/manual/basic/sort/advanced.en.md
+++ b/s2-site/docs/manual/basic/sort/advanced.en.md
@@ -10,7 +10,7 @@ The `React` version provides an advanced sorting component, optionally available
 
 ## Get started quickly
 
-Use the `SheetComponent` component of `@antv/s2-react` , and configure `advancedSortCfg` for the `header` . For configuration details, see [AdvancedSortCfgProps](/docs/api/components/advanced-sort#advancedsortcfgprops)
+Use the `SheetComponent` component of `@antv/s2-react` , and configure `advancedSort` for the `header` . For configuration details, see [AdvancedSortCfgProps](/docs/api/components/advanced-sort#advancedsortcfgprops)
 
 ```ts
 import React, { useState } from 'react';
@@ -29,7 +29,7 @@ const AdvancedSortDemo = () => {
       dataCfg={dataCfg}
       options={s2Options}
       header={{
-        advancedSortCfg: {
+        advancedSort: {
           open: true,
           sortParams: [{ sortFieldId: 'province', sortMethod: 'DESC' }],
           onSortConfirm: (ruleValues, sortParams: SortParams) => {
@@ -49,7 +49,7 @@ ReactDOM.render(<AdvancedSortDemo />, document.getElementById('container'));
 ### show
 
 ```ts
-advancedSortCfg: {
+advancedSort: {
   open: true,
 }
 ```
@@ -61,7 +61,7 @@ advancedSortCfg: {
 Through the `onSortConfirm` function, the selected rule data `ruleValues` and the data `sortParams` that can be processed into a table can be directly used
 
 ```ts
-advancedSortCfg: {
+advancedSort: {
   open: true,
   onSortConfirm: (ruleValues: RuleValue[], sortParams: SortParams) => {
     console.log(ruleValues, sortParams)
diff --git a/s2-site/docs/manual/basic/sort/advanced.zh.md b/s2-site/docs/manual/basic/sort/advanced.zh.md
index 8540b29ef4..21dcf4e101 100644
--- a/s2-site/docs/manual/basic/sort/advanced.zh.md
+++ b/s2-site/docs/manual/basic/sort/advanced.zh.md
@@ -10,7 +10,7 @@ tag: Updated
 
 ## 快速上手
 
-使用 `@antv/s2-react` 的 `SheetComponent` 组件 ，并给 `header` 配置 `advancedSortCfg` ，配置具体信息可查看 [AdvancedSortCfgProps](/docs/api/components/advanced-sort#advancedsortcfgprops)
+使用 `@antv/s2-react` 的 `SheetComponent` 组件 ，并给 `header` 配置 `advancedSort` ，配置具体信息可查看 [AdvancedSortCfgProps](/docs/api/components/advanced-sort#advancedsortcfgprops)
 
 ```tsx
 import React from 'react';
@@ -29,7 +29,7 @@ export const AdvancedSortDemo = () => {
       dataCfg={dataCfg}
       options={s2Options}
       header={{
-        advancedSortCfg: {
+        advancedSort: {
           open: true,
           sortParams: [{ sortFieldId: 'province', sortMethod: 'DESC' }],
           onSortConfirm: (ruleValues, sortParams: SortParams) => {
@@ -50,7 +50,7 @@ export const AdvancedSortDemo = () => {
 ```tsx
 <SheetComponent
   header={{
-    advancedSortCfg: {
+    advancedSort: {
       open: true,
     },
   }}
@@ -66,7 +66,7 @@ export const AdvancedSortDemo = () => {
 ```tsx
 <SheetComponent
   header={{
-    advancedSortCfg: {
+    advancedSort: {
       open: true,
       onSortConfirm: (ruleValues: RuleValue[], sortParams: SortParams) => {
         console.log(ruleValues, sortParams)
diff --git a/s2-site/examples/analysis/get-data/demo/get-cell-data.ts b/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
index b5c1d347ca..13ed6085c2 100644
--- a/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
+++ b/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
@@ -230,7 +230,7 @@ fetch(
       interaction: {
         selectedCellsSpotlight: true,
         hoverHighlight: true,
-        enableCopy: true,
+        copy: { enable: true },
       },
       // 配置小计总计显示
       totals: {
diff --git a/s2-site/examples/analysis/get-data/demo/get-multi-cell-data.ts b/s2-site/examples/analysis/get-data/demo/get-multi-cell-data.ts
index bbd41758af..4b2a4263ca 100644
--- a/s2-site/examples/analysis/get-data/demo/get-multi-cell-data.ts
+++ b/s2-site/examples/analysis/get-data/demo/get-multi-cell-data.ts
@@ -45,7 +45,7 @@ fetch(
       interaction: {
         selectedCellsSpotlight: true,
         hoverHighlight: true,
-        enableCopy: true,
+        copy: { enable: true },
       },
       // 配置小计总计显示
       totals: {
diff --git a/s2-site/examples/analysis/get-data/demo/get-single-cell-data.ts b/s2-site/examples/analysis/get-data/demo/get-single-cell-data.ts
index 80353a31cd..723cbecce3 100644
--- a/s2-site/examples/analysis/get-data/demo/get-single-cell-data.ts
+++ b/s2-site/examples/analysis/get-data/demo/get-single-cell-data.ts
@@ -39,7 +39,7 @@ fetch(
       interaction: {
         selectedCellsSpotlight: true,
         hoverHighlight: true,
-        enableCopy: true,
+        copy: { enable: true },
       },
       // 配置小计总计显示
       totals: {
diff --git a/s2-site/examples/analysis/sort/demo/advanced.tsx b/s2-site/examples/analysis/sort/demo/advanced.tsx
index a2a34a6f1c..c4ab97c4c1 100644
--- a/s2-site/examples/analysis/sort/demo/advanced.tsx
+++ b/s2-site/examples/analysis/sort/demo/advanced.tsx
@@ -4,9 +4,7 @@ import insertCSS from 'insert-css';
 
 import '@antv/s2-react/dist/style.min.css';
 
-fetch(
-  'https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json',
-)
+fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
   .then((res) => res.json())
   .then((data) => {
     const defaultSortParams = [
@@ -64,7 +62,7 @@ fetch(
             dataCfg={dataCfg}
             options={s2Options}
             header={{
-              advancedSortCfg: {
+              advancedSort: {
                 open: true,
                 sortParams,
                 onSortConfirm: (ruleValues, sortParams) => {
diff --git a/s2-site/examples/analysis/totals/demo/basic.ts b/s2-site/examples/analysis/totals/demo/basic.ts
index f4f39b9aa9..9f4b88ee49 100644
--- a/s2-site/examples/analysis/totals/demo/basic.ts
+++ b/s2-site/examples/analysis/totals/demo/basic.ts
@@ -42,7 +42,7 @@ fetch(
       interaction: {
         selectedCellsSpotlight: true,
         hoverHighlight: true,
-        enableCopy: true,
+        copy: { enable: true },
       },
       // 配置小计总计显示
       totals: {
diff --git a/s2-site/examples/analysis/totals/demo/multiple-values.ts b/s2-site/examples/analysis/totals/demo/multiple-values.ts
index a59fd46bd9..ee5970a1d7 100644
--- a/s2-site/examples/analysis/totals/demo/multiple-values.ts
+++ b/s2-site/examples/analysis/totals/demo/multiple-values.ts
@@ -48,7 +48,7 @@ fetch(
         enable: true,
       },
       interaction: {
-        enableCopy: true,
+        copy: { enable: true },
         selectedCellsSpotlight: true,
         hoverHighlight: true,
       },
diff --git a/s2-site/examples/analysis/totals/demo/tree.ts b/s2-site/examples/analysis/totals/demo/tree.ts
index 5afb41b85e..eeaca53550 100644
--- a/s2-site/examples/analysis/totals/demo/tree.ts
+++ b/s2-site/examples/analysis/totals/demo/tree.ts
@@ -41,7 +41,7 @@ fetch(
         enable: true,
       },
       interaction: {
-        enableCopy: true,
+        copy: { enable: true },
         selectedCellsSpotlight: true,
         hoverHighlight: true,
       },
diff --git a/s2-site/examples/basic/pivot/demo/grid.ts b/s2-site/examples/basic/pivot/demo/grid.ts
index ded83122d6..6c20b24d14 100644
--- a/s2-site/examples/basic/pivot/demo/grid.ts
+++ b/s2-site/examples/basic/pivot/demo/grid.ts
@@ -41,9 +41,9 @@ fetch(
       height: 480,
       hierarchyType: 'grid',
       interaction: {
-        enableCopy: true,
-        copyWithFormat: true,
-        copyWithHeader: true,
+        copy: { enable: true },
+        withFormat: true,
+        withHeader: true,
       },
       // 显示序号
       // showSeriesNumber: true,
diff --git a/s2-site/examples/case/art/demo/lost-text.tsx b/s2-site/examples/case/art/demo/lost-text.tsx
index 5f23880720..dfb163ffe2 100644
--- a/s2-site/examples/case/art/demo/lost-text.tsx
+++ b/s2-site/examples/case/art/demo/lost-text.tsx
@@ -208,7 +208,7 @@ export const s2Options = {
   showSeriesNumber: false,
   showDefaultHeaderActionIcon: false,
   interaction: {
-    enableCopy: true,
+    copy: { enable: true },
     // 防止 mac 触摸板横向滚动触发浏览器返回, 和移动端下拉刷新
     overscrollBehavior: 'none',
     brushSelection: {
diff --git a/s2-site/examples/case/data-preview/demo/excel.tsx b/s2-site/examples/case/data-preview/demo/excel.tsx
index 1ae0a52ecd..21c920c1a0 100644
--- a/s2-site/examples/case/data-preview/demo/excel.tsx
+++ b/s2-site/examples/case/data-preview/demo/excel.tsx
@@ -9,7 +9,12 @@ const s2Options: SheetComponentOptions = {
   height: 400,
   showSeriesNumber: true,
   tooltip: { enable: false },
-  interaction: { enableCopy: true, hoverHighlight: false },
+  interaction: {
+    copy: {
+      enable: true,
+    },
+    hoverHighlight: false,
+  },
   showDefaultHeaderActionIcon: false,
 };
 
diff --git a/s2-site/examples/case/data-preview/demo/index.tsx b/s2-site/examples/case/data-preview/demo/index.tsx
index eacfd0eb28..0f61fb88bc 100644
--- a/s2-site/examples/case/data-preview/demo/index.tsx
+++ b/s2-site/examples/case/data-preview/demo/index.tsx
@@ -261,7 +261,7 @@ const App = ({ data }) => {
     height: 400,
     showSeriesNumber: true,
     interaction: {
-      enableCopy: true,
+      copy: { enable: true },
       autoResetSheetStyle: false,
       hoverFocus: false,
     },
diff --git a/s2-site/examples/case/proportion/demo/group-drill-down.tsx b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
index 1d729ec904..360f311466 100644
--- a/s2-site/examples/case/proportion/demo/group-drill-down.tsx
+++ b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
@@ -145,7 +145,7 @@ fetch(
           sheetType="gridAnalysis"
           header={{
             title: '人群网络分析',
-            advancedSortCfg: { open: true },
+            advancedSort: { open: true },
             extra: <Breadcrumb />,
           }}
           onDataCellMouseUp={onDataCellMouseUp}
diff --git a/s2-site/examples/interaction/basic/demo/brush-header.ts b/s2-site/examples/interaction/basic/demo/brush-header.ts
index f7d56ee9b8..473bfa8948 100644
--- a/s2-site/examples/interaction/basic/demo/brush-header.ts
+++ b/s2-site/examples/interaction/basic/demo/brush-header.ts
@@ -19,7 +19,7 @@ fetch(
           colCell: true,
         },
         // 圈选功能 + 复制功能开启后，可以通过使用快捷键 `command/ctrl + c` 即可复制选中区域（局部复制）
-        enableCopy: true,
+        copy: { enable: true },
       },
       style: {
         dataCell: {
diff --git a/s2-site/examples/interaction/basic/demo/copy-export.ts b/s2-site/examples/interaction/basic/demo/copy-export.ts
index 67cdbdfcf2..2d44506a51 100644
--- a/s2-site/examples/interaction/basic/demo/copy-export.ts
+++ b/s2-site/examples/interaction/basic/demo/copy-export.ts
@@ -104,12 +104,14 @@ fetch(
       width: 600,
       height: 480,
       interaction: {
-        // 允许复制
-        enableCopy: true,
-        // 是否携带行列头数据
-        copyWithHeader: true,
-        // 是否使用格式化数据
-        copyWithFormat: true,
+        copy: {
+          // 允许复制
+          enable: true,
+          // 是否携带行列头数据
+          withHeader: true,
+          // 是否使用格式化数据
+          withFormat: true,
+        },
         // 刷选
         brushSelection: {
           rowCell: true,
diff --git a/s2-site/examples/interaction/basic/demo/event.ts b/s2-site/examples/interaction/basic/demo/event.ts
index a5837bc81c..a3e82408c3 100644
--- a/s2-site/examples/interaction/basic/demo/event.ts
+++ b/s2-site/examples/interaction/basic/demo/event.ts
@@ -124,7 +124,7 @@ fetch(
         },
       },
       interaction: {
-        enableCopy: true,
+        copy: { enable: true },
         hoverHighlight: true,
         brushSelection: true,
         multiSelection: true,
diff --git a/s2-site/examples/layout/custom/demo/multi-line-text.ts b/s2-site/examples/layout/custom/demo/multi-line-text.ts
index fb9b75ee3b..6a261f4622 100644
--- a/s2-site/examples/layout/custom/demo/multi-line-text.ts
+++ b/s2-site/examples/layout/custom/demo/multi-line-text.ts
@@ -77,9 +77,11 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
       },
       // 如果有省略号, 复制到的是完整文本
       interaction: {
-        enableCopy: true,
-        copyWithFormat: true,
-        copyWithHeader: true,
+        copy: {
+          enable: true,
+          withFormat: true,
+          withHeader: true,
+        },
         brushSelection: {
           dataCell: true,
           rowCell: true,
diff --git a/s2-site/examples/react-component/export/demo/export.tsx b/s2-site/examples/react-component/export/demo/export.tsx
index 0a894892b0..00dd4b79f4 100644
--- a/s2-site/examples/react-component/export/demo/export.tsx
+++ b/s2-site/examples/react-component/export/demo/export.tsx
@@ -12,7 +12,7 @@ fetch(
       width: 600,
       height: 480,
       interaction: {
-        enableCopy: true,
+        copy: { enable: true },
       },
     };
 
@@ -31,7 +31,7 @@ fetch(
         dataCfg={s2DataConfig}
         options={s2Options}
         header={{
-          exportCfg: {
+          export: {
             open: true,
           },
         }}
diff --git a/s2-site/examples/react-component/header/demo/default.tsx b/s2-site/examples/react-component/header/demo/default.tsx
index 2deabd11dd..865fe32328 100644
--- a/s2-site/examples/react-component/header/demo/default.tsx
+++ b/s2-site/examples/react-component/header/demo/default.tsx
@@ -18,7 +18,7 @@ fetch(
       width: 600,
       height: 480,
       interaction: {
-        enableCopy: true,
+        copy: { enable: true },
       },
     };
 
@@ -38,8 +38,8 @@ fetch(
       const header: SheetComponentsProps['header'] = {
         title: '表头标题',
         description: '表头描述',
-        exportCfg: { open: true },
-        advancedSortCfg: {
+        export: { open: true },
+        advancedSort: {
           open: true,
           sortParams,
           onSortConfirm: (ruleValues, sortParams) => {
@@ -47,7 +47,7 @@ fetch(
             setSortParams(sortParams);
           },
         },
-        switcherCfg: { open: true },
+        switcher: { open: true },
         extra: (
           <Button size={'small'} style={{ verticalAlign: 'top' }}>
             自定义按钮
diff --git a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
index bda17c1a06..1418455b4e 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
@@ -2,6 +2,7 @@ import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
 import React from 'react';
+
 fetch(
   'https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json',
 )
@@ -26,7 +27,7 @@ fetch(
             adaptive={false}
             dataCfg={{ data, fields }}
             options={s2Options}
-            header={{ switcherCfg: { open: true } }}
+            header={{ switcher: { open: true } }}
           />
         </div>
       );

From 4e3fc6c36e74b921f0b411a2d70fdf7391c755dd Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Wed, 31 Jan 2024 14:22:31 +0800
Subject: [PATCH 40/64] =?UTF-8?q?build:=20=E4=BF=AE=E5=A4=8D=E6=89=93?=
 =?UTF-8?q?=E5=8C=85=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-core/rollup.config.mjs  | 8 +++++++-
 packages/s2-core/src/utils/theme.ts | 3 +--
 packages/s2-core/tsconfig.json      | 8 ++++----
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/s2-core/rollup.config.mjs b/packages/s2-core/rollup.config.mjs
index 1534a61c85..21433d1dff 100644
--- a/packages/s2-core/rollup.config.mjs
+++ b/packages/s2-core/rollup.config.mjs
@@ -32,7 +32,13 @@ const output = {
 const plugins = [
   peerDepsExternal(),
   alias({
-    entries: [{ find: 'lodash', replacement: 'lodash-es' }],
+    entries: [
+      { find: 'lodash', replacement: 'lodash-es' },
+      {
+        find: /^(?<name>.*).less\?inline$/,
+        replacement: '$1.less',
+      },
+    ],
   }),
   replace({
     'process.env.NODE_ENV': JSON.stringify('production'),
diff --git a/packages/s2-core/src/utils/theme.ts b/packages/s2-core/src/utils/theme.ts
index f8dc7d93c1..106c48c5e6 100644
--- a/packages/s2-core/src/utils/theme.ts
+++ b/packages/s2-core/src/utils/theme.ts
@@ -1,7 +1,6 @@
 import { PALETTE_MAP, STYLE_ELEMENT_ID } from '../common/constant';
 import type { Palette, ThemeName } from '../common/interface/theme';
-// import DarkVars from '../styles/theme/dark.less?inline';
-import DarkVars from '../styles/theme/dark.less';
+import DarkVars from '../styles/theme/dark.less?inline';
 import { injectCssText } from './inject-css-text';
 
 /**
diff --git a/packages/s2-core/tsconfig.json b/packages/s2-core/tsconfig.json
index c916f25107..0a9a0a49ae 100644
--- a/packages/s2-core/tsconfig.json
+++ b/packages/s2-core/tsconfig.json
@@ -2,10 +2,10 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "paths": {
-      "@antv/s2":["s2-core/src/index.ts"],
-      "@antv/s2-shared":["s2-shared/src/index.ts"],
-      "@/*":["s2-core/src/*"],
-      "tests/*":["s2-core/__tests__/*"]
+      "@antv/s2": ["s2-core/src/index.ts"],
+      "@antv/s2-shared": ["s2-shared/src/index.ts"],
+      "@/*": ["s2-core/src/*"],
+      "tests/*": ["s2-core/__tests__/*"]
     },
   },
   "exclude": ["node_modules", "coverage", "esm", "lib", "dist", "temp"]

From b5c24aa861e971a77e84bff8ad90f692ef9fb1ab Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Wed, 31 Jan 2024 14:23:38 +0800
Subject: [PATCH 41/64] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20seriesNu?=
 =?UTF-8?q?mber=20=E9=85=8D=E7=BD=AE=EF=BC=8C=E6=94=B6=E6=95=9B=E5=88=B0?=
 =?UTF-8?q?=20seriesNumber=20=E5=91=BD=E5=90=8D=E7=A9=BA=E9=97=B4=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../s2-core/__tests__/bugs/issue-1539-spec.ts |  4 +-
 .../s2-core/__tests__/bugs/issue-2199-spec.ts |  4 +-
 .../s2-core/__tests__/bugs/issue-2322-spec.ts |  4 +-
 .../s2-core/__tests__/bugs/issue-2359-spec.ts |  4 +-
 .../s2-core/__tests__/bugs/issue-446-spec.ts  | 12 ++-
 .../__snapshots__/corner-spec.ts.snap         | 72 +++++++++++++++---
 .../__tests__/spreadsheet/corner-spec.ts      | 46 ++++++++---
 .../spreadsheet/custom-table-col-spec.ts      | 18 +++--
 ...interaction-brush-selection-scroll-spec.ts |  4 +-
 .../spreadsheet/multi-line-text-spec.ts       |  8 +-
 .../spread-sheet-facet-layout-api-spec.ts     | 76 +++++++++++++------
 .../spread-sheet-series-number-spec.ts        |  4 +-
 .../spreadsheet/table-resize-spec.ts          |  8 +-
 .../__tests__/spreadsheet/table-sheet-spec.ts |  4 +-
 .../__tests__/spreadsheet/theme-spec.ts       |  4 +-
 .../__tests__/unit/cell/data-cell-spec.ts     |  4 +-
 .../unit/facet/header/corner-spec.ts          |  2 +-
 .../unit/facet/header/frozen-row-spec.ts      |  4 +-
 .../unit/facet/layout/col-node-width-spec.ts  |  8 +-
 .../__tests__/unit/facet/table-facet-spec.ts  | 26 +++++--
 .../unit/sheet-type/pivot-sheet-spec.ts       | 10 ++-
 .../utils/__snapshots__/merge-spec.ts.snap    |  4 +-
 .../__tests__/unit/utils/export/copy-spec.ts  | 54 +++++++++----
 .../unit/utils/export/export-pivot-spec.ts    |  4 +-
 .../unit/utils/export/export-spec.ts          |  8 +-
 .../unit/utils/export/export-table-spec.ts    | 16 +++-
 .../utils/interaction/select-event-spec.ts    |  4 +-
 .../__tests__/unit/utils/tooltip-spec.ts      |  6 +-
 .../s2-core/src/common/constant/options.ts    |  4 +-
 .../s2-core/src/common/interface/s2Options.ts | 19 ++---
 packages/s2-core/src/facet/base-facet.ts      |  4 +-
 packages/s2-core/src/facet/header/corner.ts   |  4 +-
 packages/s2-core/src/facet/header/frame.ts    |  4 +-
 .../facet/layout/build-header-hierarchy.ts    |  6 +-
 .../src/facet/layout/build-table-hierarchy.ts |  6 +-
 packages/s2-core/src/facet/table-facet.ts     |  7 +-
 packages/s2-core/src/facet/utils.ts           |  6 +-
 .../s2-core/src/sheet-type/table-sheet.ts     |  2 +-
 packages/s2-core/src/utils/cell/data-cell.ts  |  5 +-
 .../src/utils/export/copy/table-copy.ts       | 12 +--
 .../src/utils/interaction/select-event.ts     |  2 +-
 .../data-accuracy-one-measure-spec.tsx        |  4 +-
 .../data-accuracy-two-measures-spec.tsx       |  4 +-
 .../spreadsheet/filter-sheet-spec.tsx         |  4 +-
 .../spreadsheet/multiple-values-cell-spec.tsx |  4 +-
 .../spreadsheet/pressure-test-spec.tsx        |  4 +-
 .../spreadsheet/table-sheet-spec.tsx          |  4 +-
 .../playground/components/CustomGrid.tsx      |  6 +-
 packages/s2-react/playground/config.tsx       |  1 -
 packages/s2-react/playground/index.tsx        | 18 +++--
 50 files changed, 395 insertions(+), 157 deletions(-)

diff --git a/packages/s2-core/__tests__/bugs/issue-1539-spec.ts b/packages/s2-core/__tests__/bugs/issue-1539-spec.ts
index 969fec6aac..fb10718516 100644
--- a/packages/s2-core/__tests__/bugs/issue-1539-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-1539-spec.ts
@@ -31,7 +31,9 @@ describe('Table Left Border Tests', () => {
   test('should draw left border with series number', async () => {
     const s2 = new TableSheet(getContainer(), dataCfg, {
       ...s2Options,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     });
 
     await s2.render();
diff --git a/packages/s2-core/__tests__/bugs/issue-2199-spec.ts b/packages/s2-core/__tests__/bugs/issue-2199-spec.ts
index fa82bb1813..0df3c6c85b 100644
--- a/packages/s2-core/__tests__/bugs/issue-2199-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-2199-spec.ts
@@ -11,7 +11,9 @@ import type { S2Options } from '@/common/interface';
 const s2Options: S2Options = {
   width: 300,
   height: 480,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true,
+  },
   frozen: {
     colCount: 1,
   },
diff --git a/packages/s2-core/__tests__/bugs/issue-2322-spec.ts b/packages/s2-core/__tests__/bugs/issue-2322-spec.ts
index 3b5a8874dd..cf8375ce0d 100644
--- a/packages/s2-core/__tests__/bugs/issue-2322-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-2322-spec.ts
@@ -12,7 +12,9 @@ import { TableSheet } from '@/sheet-type';
 const s2Options: S2Options = {
   width: 800,
   height: 480,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true,
+  },
   frozen: {
     colCount: 1,
   },
diff --git a/packages/s2-core/__tests__/bugs/issue-2359-spec.ts b/packages/s2-core/__tests__/bugs/issue-2359-spec.ts
index a5b5d70d96..ec0d777158 100644
--- a/packages/s2-core/__tests__/bugs/issue-2359-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-2359-spec.ts
@@ -19,7 +19,9 @@ class TestColCell extends TableColCell {
 const s2Options: S2Options = {
   width: 300,
   height: 480,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true,
+  },
   colCell: (...args) => new TestColCell(...args),
 };
 
diff --git a/packages/s2-core/__tests__/bugs/issue-446-spec.ts b/packages/s2-core/__tests__/bugs/issue-446-spec.ts
index 6d9bb914ac..a3c838222b 100644
--- a/packages/s2-core/__tests__/bugs/issue-446-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-446-spec.ts
@@ -12,11 +12,13 @@ import { asyncGetAllPlainData } from '@/utils';
 const s2Options = {
   width: 800,
   height: 600,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true,
+  },
 };
 
 describe('export', () => {
-  test('should export correct data with showSeriesNumber', async () => {
+  test('should export correct data with show seriesNumber', async () => {
     const s2 = new TableSheet(getContainer(), mockDataConfig, s2Options);
 
     await s2.render();
@@ -36,10 +38,12 @@ describe('export', () => {
     `);
   });
 
-  test('should export correct data without showSeriesNumber', async () => {
+  test('should export correct data without show seriesNumber', async () => {
     const s2 = new TableSheet(getContainer(), mockDataConfig, {
       ...s2Options,
-      showSeriesNumber: false,
+      seriesNumber: {
+        enable: false,
+      },
     });
 
     await s2.render();
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap
index fd66e35672..574008d2be 100644
--- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PivotSheet Corner Tests should render row corner when columns and values is empty for { hierarchyType: 'grid', cornerNodeCount: 2, showSeriesNumber: false } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when columns and values is empty for {
+  hierarchyType: 'grid',
+  cornerNodeCount: 2,
+  seriesNumber: { enable: false }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -67,7 +71,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when columns and values is empty for { hierarchyType: 'grid', cornerNodeCount: 3, showSeriesNumber: true } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when columns and values is empty for {
+  hierarchyType: 'grid',
+  cornerNodeCount: 3,
+  seriesNumber: { enable: true }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -165,7 +173,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when columns and values is empty for { hierarchyType: 'tree', cornerNodeCount: 1, showSeriesNumber: false } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when columns and values is empty for {
+  hierarchyType: 'tree',
+  cornerNodeCount: 1,
+  seriesNumber: { enable: false }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -201,7 +213,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when columns and values is empty for { hierarchyType: 'tree', cornerNodeCount: 2, showSeriesNumber: true } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when columns and values is empty for {
+  hierarchyType: 'tree',
+  cornerNodeCount: 2,
+  seriesNumber: { enable: true }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -268,7 +284,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when columns is empty and measure hidden for { hierarchyType: 'grid', cornerNodeCount: 2, showSeriesNumber: false } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when columns is empty and measure hidden for {
+  hierarchyType: 'grid',
+  cornerNodeCount: 2,
+  seriesNumber: { enable: false }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -335,7 +355,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when columns is empty and measure hidden for { hierarchyType: 'grid', cornerNodeCount: 3, showSeriesNumber: true } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when columns is empty and measure hidden for {
+  hierarchyType: 'grid',
+  cornerNodeCount: 3,
+  seriesNumber: { enable: true }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -433,7 +457,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when columns is empty and measure hidden for { hierarchyType: 'tree', cornerNodeCount: 1, showSeriesNumber: false } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when columns is empty and measure hidden for {
+  hierarchyType: 'tree',
+  cornerNodeCount: 1,
+  seriesNumber: { enable: false }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -469,7 +497,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when columns is empty and measure hidden for { hierarchyType: 'tree', cornerNodeCount: 2, showSeriesNumber: true } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when columns is empty and measure hidden for {
+  hierarchyType: 'tree',
+  cornerNodeCount: 2,
+  seriesNumber: { enable: true }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -536,7 +568,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when measure hidden for { hierarchyType: 'grid', cornerNodeCount: 2, showSeriesNumber: false } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when measure hidden for {
+  hierarchyType: 'grid',
+  cornerNodeCount: 2,
+  seriesNumber: { enable: false }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -603,7 +639,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when measure hidden for { hierarchyType: 'grid', cornerNodeCount: 3, showSeriesNumber: true } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when measure hidden for {
+  hierarchyType: 'grid',
+  cornerNodeCount: 3,
+  seriesNumber: { enable: true }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -701,7 +741,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when measure hidden for { hierarchyType: 'tree', cornerNodeCount: 1, showSeriesNumber: false } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when measure hidden for {
+  hierarchyType: 'tree',
+  cornerNodeCount: 1,
+  seriesNumber: { enable: false }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
@@ -737,7 +781,11 @@ Array [
 ]
 `;
 
-exports[`PivotSheet Corner Tests should render row corner when measure hidden for { hierarchyType: 'tree', cornerNodeCount: 2, showSeriesNumber: true } 1`] = `
+exports[`PivotSheet Corner Tests should render row corner when measure hidden for {
+  hierarchyType: 'tree',
+  cornerNodeCount: 2,
+  seriesNumber: { enable: true }
+} 1`] = `
 Array [
   Object {
     "belongsCell": undefined,
diff --git a/packages/s2-core/__tests__/spreadsheet/corner-spec.ts b/packages/s2-core/__tests__/spreadsheet/corner-spec.ts
index 4acec56dde..45dac87339 100644
--- a/packages/s2-core/__tests__/spreadsheet/corner-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/corner-spec.ts
@@ -16,13 +16,37 @@ describe('PivotSheet Corner Tests', () => {
 
   const cornerTypes: Array<{
     hierarchyType: S2Options['hierarchyType'];
-    showSeriesNumber: S2Options['showSeriesNumber'];
+    seriesNumber: S2Options['seriesNumber'];
     cornerNodeCount: number;
   }> = [
-    { hierarchyType: 'tree', cornerNodeCount: 1, showSeriesNumber: false },
-    { hierarchyType: 'grid', cornerNodeCount: 2, showSeriesNumber: false },
-    { hierarchyType: 'tree', cornerNodeCount: 2, showSeriesNumber: true },
-    { hierarchyType: 'grid', cornerNodeCount: 3, showSeriesNumber: true },
+    {
+      hierarchyType: 'tree',
+      cornerNodeCount: 1,
+      seriesNumber: {
+        enable: false,
+      },
+    },
+    {
+      hierarchyType: 'grid',
+      cornerNodeCount: 2,
+      seriesNumber: {
+        enable: false,
+      },
+    },
+    {
+      hierarchyType: 'tree',
+      cornerNodeCount: 2,
+      seriesNumber: {
+        enable: true,
+      },
+    },
+    {
+      hierarchyType: 'grid',
+      cornerNodeCount: 3,
+      seriesNumber: {
+        enable: true,
+      },
+    },
   ];
 
   beforeEach(async () => {
@@ -43,7 +67,7 @@ describe('PivotSheet Corner Tests', () => {
   // https://github.com/antvis/S2/issues/1929
   test.each(cornerTypes)(
     'should render row corner when columns is empty and measure hidden for %o',
-    async ({ hierarchyType, cornerNodeCount, showSeriesNumber }) => {
+    async ({ hierarchyType, cornerNodeCount, seriesNumber }) => {
       s2.setDataCfg({
         ...simpleDataConfig,
         fields: {
@@ -54,7 +78,7 @@ describe('PivotSheet Corner Tests', () => {
       });
       s2.setOptions({
         hierarchyType,
-        showSeriesNumber,
+        seriesNumber,
         style: {
           colCell: {
             hideValue: true,
@@ -87,10 +111,10 @@ describe('PivotSheet Corner Tests', () => {
 
   test.each(cornerTypes)(
     'should render row corner when measure hidden for %o',
-    async ({ hierarchyType, cornerNodeCount, showSeriesNumber }) => {
+    async ({ hierarchyType, cornerNodeCount, seriesNumber }) => {
       s2.setOptions({
         hierarchyType,
-        showSeriesNumber,
+        seriesNumber,
         style: {
           colCell: {
             hideValue: true,
@@ -134,7 +158,7 @@ describe('PivotSheet Corner Tests', () => {
 
   test.each(cornerTypes)(
     'should render row corner when columns and values is empty for %o',
-    async ({ hierarchyType, cornerNodeCount, showSeriesNumber }) => {
+    async ({ hierarchyType, cornerNodeCount, seriesNumber }) => {
       s2.setDataCfg({
         ...simpleDataConfig,
         fields: {
@@ -145,7 +169,7 @@ describe('PivotSheet Corner Tests', () => {
       });
       s2.setOptions({
         hierarchyType,
-        showSeriesNumber,
+        seriesNumber,
       });
       await s2.render();
 
diff --git a/packages/s2-core/__tests__/spreadsheet/custom-table-col-spec.ts b/packages/s2-core/__tests__/spreadsheet/custom-table-col-spec.ts
index b637d4ac0a..fc070792ce 100644
--- a/packages/s2-core/__tests__/spreadsheet/custom-table-col-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/custom-table-col-spec.ts
@@ -207,7 +207,9 @@ describe('TableSheet Custom Tests', () => {
 
   test('should render default series number text', async () => {
     s2.setOptions({
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     });
     await s2.render(false);
 
@@ -218,8 +220,10 @@ describe('TableSheet Custom Tests', () => {
     const seriesNumberText = '牛';
 
     s2.setOptions({
-      seriesNumberText,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+        text: seriesNumberText,
+      },
     });
     await s2.render(false);
 
@@ -228,7 +232,9 @@ describe('TableSheet Custom Tests', () => {
 
   test('should render correctly column height if enable series number', async () => {
     s2.setOptions({
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     });
     await s2.render(false);
 
@@ -244,7 +250,9 @@ describe('TableSheet Custom Tests', () => {
 
   test('should not sample series node', async () => {
     s2.setOptions({
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     });
     await s2.render(false);
 
diff --git a/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts b/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts
index f51e75778b..e915671631 100644
--- a/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts
@@ -53,7 +53,9 @@ const options: S2Options = {
   width: 800,
   height: 600,
   hdAdapter: false,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true,
+  },
   placeholder: '',
   style: {
     layoutWidthType: LayoutWidthType.Compact,
diff --git a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
index 8009c7c80e..27b41720bc 100644
--- a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
@@ -100,7 +100,9 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     const s2Options: S2Options = {
       width: 300,
       height: 400,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     };
 
     beforeEach(async () => {
@@ -309,7 +311,9 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     const s2Options: S2Options = {
       width: 600,
       height: 400,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     };
 
     beforeEach(async () => {
diff --git a/packages/s2-core/__tests__/spreadsheet/spread-sheet-facet-layout-api-spec.ts b/packages/s2-core/__tests__/spreadsheet/spread-sheet-facet-layout-api-spec.ts
index da32d09082..ea6d0ad8b4 100644
--- a/packages/s2-core/__tests__/spreadsheet/spread-sheet-facet-layout-api-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/spread-sheet-facet-layout-api-spec.ts
@@ -20,7 +20,9 @@ describe('Facet Layout API Tests', () => {
       s2 = createPivotSheet({
         width: 300,
         height: 300,
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       });
       await s2.render();
     });
@@ -94,7 +96,9 @@ describe('Facet Layout API Tests', () => {
 
       test('#getHeaderNodes() for seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
@@ -372,7 +376,9 @@ describe('Facet Layout API Tests', () => {
 
       test('#getCornerNodes() for seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
@@ -426,7 +432,9 @@ describe('Facet Layout API Tests', () => {
 
       test('#getCornerCells() for seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
@@ -466,7 +474,9 @@ describe('Facet Layout API Tests', () => {
 
       test('#getSeriesNumberNodes() for seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
@@ -490,7 +500,9 @@ describe('Facet Layout API Tests', () => {
 
       test('#getSeriesNumberCells() for seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
@@ -658,7 +670,9 @@ describe('Facet Layout API Tests', () => {
             {
               width: 300,
               height: 300,
-              showSeriesNumber: false,
+              seriesNumber: {
+                enable: false,
+              },
               totals: {
                 row: {
                   showGrandTotals: true,
@@ -846,7 +860,9 @@ describe('Facet Layout API Tests', () => {
             {
               width: 300,
               height: 300,
-              showSeriesNumber: false,
+              seriesNumber: {
+                enable: false,
+              },
               totals: {
                 col: {
                   showGrandTotals: true,
@@ -914,9 +930,11 @@ describe('Facet Layout API Tests', () => {
         `);
       });
 
-      test('#getDataCells() for showSeriesNumber enable', async () => {
+      test('#getDataCells() for show seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
@@ -945,7 +963,9 @@ describe('Facet Layout API Tests', () => {
       s2 = createTableSheet({
         width: 300,
         height: 300,
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       });
       await s2.render();
     });
@@ -970,9 +990,11 @@ describe('Facet Layout API Tests', () => {
         ).toMatchInlineSnapshot(`Array []`);
       });
 
-      test('#getHeaderNodes() for showSeriesNumber enable', async () => {
+      test('#getHeaderNodes() for show seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
@@ -1012,9 +1034,11 @@ describe('Facet Layout API Tests', () => {
         ).toMatchInlineSnapshot(`Array []`);
       });
 
-      test('#getHeaderCells() for showSeriesNumber enable', async () => {
+      test('#getHeaderCells() for show seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
@@ -1072,9 +1096,11 @@ describe('Facet Layout API Tests', () => {
         ).toMatchInlineSnapshot(`Array []`);
       });
 
-      test('#getCells() for showSeriesNumber enable', async () => {
+      test('#getCells() for show seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
@@ -1152,7 +1178,9 @@ describe('Facet Layout API Tests', () => {
     describe('SeriesNumberCell', () => {
       beforeEach(async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
       });
@@ -1197,9 +1225,11 @@ describe('Facet Layout API Tests', () => {
         );
       });
 
-      test('#getColNodes() for showSeriesNumber enable', async () => {
+      test('#getColNodes() for show seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
@@ -1304,9 +1334,11 @@ describe('Facet Layout API Tests', () => {
         `);
       });
 
-      test('#getDataCells() for showSeriesNumber enable', async () => {
+      test('#getDataCells() for show seriesNumber enable', async () => {
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
         await s2.render(false);
 
diff --git a/packages/s2-core/__tests__/spreadsheet/spread-sheet-series-number-spec.ts b/packages/s2-core/__tests__/spreadsheet/spread-sheet-series-number-spec.ts
index 0573dc8232..5153995acc 100644
--- a/packages/s2-core/__tests__/spreadsheet/spread-sheet-series-number-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/spread-sheet-series-number-spec.ts
@@ -6,7 +6,9 @@ const s2Options: S2Options = {
   width: 400,
   height: 400,
   hierarchyType: 'grid',
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true,
+  },
 };
 
 describe('SpreadSheet Series Number Tests', () => {
diff --git a/packages/s2-core/__tests__/spreadsheet/table-resize-spec.ts b/packages/s2-core/__tests__/spreadsheet/table-resize-spec.ts
index 2918f804d3..bd1d301376 100644
--- a/packages/s2-core/__tests__/spreadsheet/table-resize-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/table-resize-spec.ts
@@ -9,7 +9,9 @@ describe('Table Sheet Resize Test', () => {
     const s2 = new TableSheet(getContainer(), mockDataConfig, {
       width: 800,
       height: 600,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     });
 
     await s2.render();
@@ -25,7 +27,9 @@ describe('Table Sheet Resize Test', () => {
     const s2 = new TableSheet(getContainer(), mockDataConfig, {
       width: 800,
       height: 600,
-      showSeriesNumber: false,
+      seriesNumber: {
+        enable: false,
+      },
     });
 
     await s2.render();
diff --git a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
index 27344a21c5..c4a66fc3dc 100644
--- a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
@@ -71,7 +71,9 @@ const dataCfg: S2DataConfig = {
 const options: S2Options = {
   width: 800,
   height: 600,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true,
+  },
   placeholder: '',
   style: {
     layoutWidthType: LayoutWidthType.Compact,
diff --git a/packages/s2-core/__tests__/spreadsheet/theme-spec.ts b/packages/s2-core/__tests__/spreadsheet/theme-spec.ts
index 2a9e180e62..6a966d945a 100644
--- a/packages/s2-core/__tests__/spreadsheet/theme-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/theme-spec.ts
@@ -484,7 +484,9 @@ describe('SpreadSheet Theme Tests', () => {
         });
 
         s2.setOptions({
-          showSeriesNumber: true,
+          seriesNumber: {
+            enable: true,
+          },
         });
 
         await s2.render();
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 790033668c..fcbc34d9ae 100644
--- a/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts
+++ b/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts
@@ -599,7 +599,9 @@ describe('Data Cell Tests', () => {
   describe('Data Cell Interaction', () => {
     beforeEach(async () => {
       s2 = createPivotSheet({
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
         interaction: {
           copy: { enable: true },
         },
diff --git a/packages/s2-core/__tests__/unit/facet/header/corner-spec.ts b/packages/s2-core/__tests__/unit/facet/header/corner-spec.ts
index ee22993fd2..eefcd31769 100644
--- a/packages/s2-core/__tests__/unit/facet/header/corner-spec.ts
+++ b/packages/s2-core/__tests__/unit/facet/header/corner-spec.ts
@@ -40,7 +40,7 @@ describe('Corner Tests', () => {
   });
 
   test('should get custom series number text', () => {
-    s2.options.seriesNumberText = 'test';
+    s2.options.seriesNumber!.text = 'test';
     const cornerNode = createCornerNode();
 
     expect(cornerNode.value).toEqual('test');
diff --git a/packages/s2-core/__tests__/unit/facet/header/frozen-row-spec.ts b/packages/s2-core/__tests__/unit/facet/header/frozen-row-spec.ts
index 43e038b1b0..2e11f10094 100644
--- a/packages/s2-core/__tests__/unit/facet/header/frozen-row-spec.ts
+++ b/packages/s2-core/__tests__/unit/facet/header/frozen-row-spec.ts
@@ -12,7 +12,9 @@ const s2 = createPivotSheet(
       firstRow: true,
     },
     totals: { row: { showGrandTotals: true, reverseGrandTotalsLayout: true } },
-    showSeriesNumber: false,
+    seriesNumber: {
+      enable: false,
+    },
   },
   { useSimpleData: false },
 );
diff --git a/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts b/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts
index b6d1e7fc98..49ec4d43c6 100644
--- a/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts
+++ b/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts
@@ -40,7 +40,9 @@ describe('Col width Test', () => {
 
     test('get correct width in layoutWidthType adaptive mode when enable series number', async () => {
       s2.setOptions({
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
       });
       await s2.render();
 
@@ -59,7 +61,9 @@ describe('Col width Test', () => {
     test('get correct width in layoutWidthType adaptive tree mode when enable series number', async () => {
       s2.setOptions({
         hierarchyType: 'tree',
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
       });
       await s2.render();
 
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 c5b621d547..3a5f141b03 100644
--- a/packages/s2-core/__tests__/unit/facet/table-facet-spec.ts
+++ b/packages/s2-core/__tests__/unit/facet/table-facet-spec.ts
@@ -154,7 +154,9 @@ describe('Table Mode Facet Test', () => {
 
   test('should get default seriesNumberText', () => {
     const { facet } = createMockTableFacet({
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     });
 
     expect(facet.getColLeafNodes()[0].value).toEqual('序号');
@@ -163,8 +165,10 @@ describe('Table Mode Facet Test', () => {
   test('should get custom seriesNumberText', () => {
     const seriesNumberText = 'test';
     const { facet } = createMockTableFacet({
-      showSeriesNumber: true,
-      seriesNumberText,
+      seriesNumber: {
+        enable: true,
+        text: seriesNumberText,
+      },
     });
 
     expect(facet.getColLeafNodes()[0].value).toEqual(seriesNumberText);
@@ -216,7 +220,9 @@ describe('Table Mode Facet Test With Adaptive Layout', () => {
   describe('should get correct col layout', () => {
     test('col hierarchy coordinate with adaptive layout', () => {
       const { facet } = createMockTableFacet({
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       });
 
       expect(
@@ -230,7 +236,9 @@ describe('Table Mode Facet Test With Adaptive Layout', () => {
   describe('should get correct col layout with seriesNumber', () => {
     test('col hierarchy coordinate with adaptive layout with seriesNumber', () => {
       const { facet, s2 } = createMockTableFacet({
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
       });
       const { colCell } = s2.options.style!;
       const colLeafNodes = facet.getColLeafNodes();
@@ -276,7 +284,9 @@ describe('Table Mode Facet Test With Compact Layout', () => {
 
     const { facet, s2 } = createMockTableFacet(
       {
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       },
       undefined,
       (spreadsheet) => {
@@ -323,7 +333,9 @@ describe('Table Mode Facet Test With Compact Layout', () => {
 
     const { facet, s2 } = createMockTableFacet(
       {
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
       },
       undefined,
       (spreadsheet) => {
diff --git a/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts b/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
index 1a62ea9e86..4f7dcfdfee 100644
--- a/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
+++ b/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
@@ -468,14 +468,16 @@ describe('PivotSheet Tests', () => {
       .mockImplementation(() => {});
 
     const options: Partial<S2Options> = {
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     };
 
     s2.setOptions(options);
 
     // should hide tooltip if options updated
     expect(hideTooltipSpy).toHaveBeenCalledTimes(1);
-    expect(s2.options.showSeriesNumber).toBeTruthy();
+    expect(s2.options.seriesNumber?.enable).toBeTruthy();
   });
 
   test('should init new tooltip', () => {
@@ -569,7 +571,9 @@ describe('PivotSheet Tests', () => {
     const sheet = createPivotSheet(
       {
         ...s2Options,
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
       },
       { useSimpleData: false },
     );
diff --git a/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
index b0d8671177..e47d848801 100644
--- a/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
+++ b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
@@ -58,8 +58,10 @@ Object {
     "selectedCellsSpotlight": false,
   },
   "placeholder": "-",
+  "seriesNumber": Object {
+    "enable": false,
+  },
   "showDefaultHeaderActionIcon": false,
-  "showSeriesNumber": false,
   "style": Object {
     "colCell": Object {
       "height": 30,
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 96cf0f5d21..ada2221484 100644
--- a/packages/s2-core/__tests__/unit/utils/export/copy-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/export/copy-spec.ts
@@ -52,7 +52,9 @@ describe('List Table Core Data Process', () => {
         data: testData,
       }),
       assembleOptions({
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
         interaction: {
           selectedCellHighlight: {
             currentRow: true,
@@ -132,7 +134,9 @@ describe('List Table Core Data Process', () => {
           withHeader: true,
         },
       },
-      showSeriesNumber: false,
+      seriesNumber: {
+        enable: false,
+      },
     });
     await s2.render();
 
@@ -161,7 +165,9 @@ describe('List Table Core Data Process', () => {
         interaction: {
           copy: { enable: true, withFormat: true },
         },
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
       }),
     );
 
@@ -191,7 +197,9 @@ describe('List Table Core Data Process', () => {
       interaction: {
         copy: { enable: true, withFormat: true },
       },
-      showSeriesNumber: false,
+      seriesNumber: {
+        enable: false,
+      },
     });
 
     await s2.render();
@@ -340,7 +348,9 @@ describe('List Table Core Data Process', () => {
         interaction: {
           copy: { enable: true },
         },
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
       }),
     );
 
@@ -377,7 +387,9 @@ describe('List Table Core Data Process', () => {
         interaction: {
           copy: { enable: true },
         },
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
       }),
     );
 
@@ -396,7 +408,9 @@ describe('List Table Core Data Process', () => {
 
   it('should copy row data when select data row cell', async () => {
     s2.setOptions({
-      showSeriesNumber: false,
+      seriesNumber: {
+        enable: false,
+      },
       interaction: {
         selectedCellHighlight: {
           currentRow: true,
@@ -419,7 +433,9 @@ describe('List Table Core Data Process', () => {
 
   it('should support custom copy matrix transformer', async () => {
     s2.setOptions({
-      showSeriesNumber: false,
+      seriesNumber: {
+        enable: false,
+      },
       interaction: {
         copy: {
           customTransformer: () => {
@@ -687,7 +703,9 @@ describe('Pivot Table Core Data Process', () => {
         interaction: {
           copy: { enable: true, withFormat: true },
         },
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       }),
     );
 
@@ -974,7 +992,9 @@ describe('Pivot Table Core Data Process', () => {
         interaction: {
           copy: { enable: true, withFormat: true },
         },
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       }),
     );
 
@@ -1012,7 +1032,9 @@ describe('Pivot Table Core Data Process', () => {
         interaction: {
           copy: { enable: true, withFormat: true },
         },
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       }),
     );
 
@@ -1044,7 +1066,9 @@ describe('Pivot Table Core Data Process', () => {
         interaction: {
           copy: { enable: true, withFormat: true },
         },
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       }),
     );
 
@@ -1095,7 +1119,7 @@ describe('Pivot Table Core Data Process', () => {
   });
 
   // https://github.com/antvis/S2/issues/1955
-  it('should get correct data with hideMeasureColumn、showSeriesNumber and withHeader are all true', async () => {
+  it('should get correct data with hideMeasureColumn、show seriesNumber and withHeader are all true', async () => {
     const sheet = new PivotSheet(getContainer(), getDataCfg(), getOptions());
 
     sheet.setOptions({
@@ -1107,7 +1131,9 @@ describe('Pivot Table Core Data Process', () => {
       interaction: {
         copy: { enable: true, withHeader: true },
       },
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     });
     await sheet.render();
     const cells = sheet.facet.getDataCells();
diff --git a/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts b/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts
index a3d4c01b35..e1ed556290 100644
--- a/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts
@@ -440,7 +440,9 @@ describe('PivotSheet Export Test', () => {
       }),
       assembleOptions({
         hierarchyType: 'grid',
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
         interaction: {
           copy: {
             enable: true,
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 001e3316df..f414c4e708 100644
--- a/packages/s2-core/__tests__/unit/utils/export/export-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/export/export-spec.ts
@@ -20,7 +20,9 @@ describe('TableSheet Export Test', () => {
         },
       }),
       assembleOptions({
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
       }),
     );
 
@@ -57,7 +59,9 @@ describe('TableSheet Export Test', () => {
         },
       }),
       assembleOptions({
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       }),
     );
 
diff --git a/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts b/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts
index 50c407541c..26f3d6f269 100644
--- a/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts
@@ -25,7 +25,9 @@ describe('TableSheet Export Test', () => {
         data: slice(originData, 0, 10),
       }),
       assembleOptions({
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
       }),
     );
 
@@ -94,7 +96,9 @@ describe('TableSheet Export Test', () => {
         data: slice(originData, 0, 10),
       }),
       assembleOptions({
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       }),
     );
 
@@ -135,7 +139,9 @@ describe('TableSheet Export Test', () => {
         },
       }),
       assembleOptions({
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       }),
     );
 
@@ -166,7 +172,9 @@ describe('TableSheet Export Test', () => {
         },
       }),
       assembleOptions({
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       }),
     );
 
diff --git a/packages/s2-core/__tests__/unit/utils/interaction/select-event-spec.ts b/packages/s2-core/__tests__/unit/utils/interaction/select-event-spec.ts
index 929ee66cc5..a49bf97778 100644
--- a/packages/s2-core/__tests__/unit/utils/interaction/select-event-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/interaction/select-event-spec.ts
@@ -50,7 +50,9 @@ describe('Select Event Utils Tests', () => {
           { colId: 'city', rowIndex: 5 } as unknown as ViewMeta,
           {
             options: {
-              showSeriesNumber: true,
+              seriesNumber: {
+                enable: true,
+              },
             },
             interaction: {
               getAllCells: () => [cell],
diff --git a/packages/s2-core/__tests__/unit/utils/tooltip-spec.ts b/packages/s2-core/__tests__/unit/utils/tooltip-spec.ts
index 00cbc509af..8535ece96e 100644
--- a/packages/s2-core/__tests__/unit/utils/tooltip-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/tooltip-spec.ts
@@ -877,7 +877,11 @@ describe('Tooltip Utils Tests', () => {
     describe('Tooltip Get Data Tests For TableSheet', () => {
       beforeEach(() => {
         s2 = createTableSheet(
-          { showSeriesNumber: true },
+          {
+            seriesNumber: {
+              enable: true,
+            },
+          },
           { useSimpleData: false },
         );
         s2.render();
diff --git a/packages/s2-core/src/common/constant/options.ts b/packages/s2-core/src/common/constant/options.ts
index 476af3ab71..cd259d6feb 100644
--- a/packages/s2-core/src/common/constant/options.ts
+++ b/packages/s2-core/src/common/constant/options.ts
@@ -110,7 +110,9 @@ export const DEFAULT_OPTIONS: S2Options = {
     selectedCellHighlight: false,
     overscrollBehavior: 'auto',
   },
-  showSeriesNumber: false,
+  seriesNumber: {
+    enable: false,
+  },
   customSVGIcons: [],
   showDefaultHeaderActionIcon: false,
   headerActionIcons: [],
diff --git a/packages/s2-core/src/common/interface/s2Options.ts b/packages/s2-core/src/common/interface/s2Options.ts
index 9db2300d3a..55731c2a77 100644
--- a/packages/s2-core/src/common/interface/s2Options.ts
+++ b/packages/s2-core/src/common/interface/s2Options.ts
@@ -79,15 +79,16 @@ export interface S2BasicOptions<
    */
   pagination?: P;
 
-  /**
-   * 自定义序号列文本, 默认为 "序号"
-   */
-  seriesNumberText?: string;
-
-  /**
-   * 是否显示序号
-   */
-  showSeriesNumber?: boolean;
+  seriesNumber?: {
+    /**
+     * 是否显示序号
+     */
+    enable?: boolean;
+    /**
+     * 自定义序号列文本, 默认为 "序号"
+     */
+    text?: string;
+  };
 
   /**
    * 是否显示表头默认操作图标
diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
index c3ab65cbc6..d2c29478b8 100644
--- a/packages/s2-core/src/facet/base-facet.ts
+++ b/packages/s2-core/src/facet/base-facet.ts
@@ -483,9 +483,9 @@ export abstract class BaseFacet {
   }
 
   public getSeriesNumberWidth(): number {
-    const { showSeriesNumber } = this.spreadsheet.options;
+    const { seriesNumber } = this.spreadsheet.options;
 
-    return showSeriesNumber
+    return seriesNumber?.enable
       ? this.spreadsheet.theme.rowCell?.seriesNumberWidth ?? 0
       : 0;
   }
diff --git a/packages/s2-core/src/facet/header/corner.ts b/packages/s2-core/src/facet/header/corner.ts
index c076d5b3d6..ff342ae2f1 100644
--- a/packages/s2-core/src/facet/header/corner.ts
+++ b/packages/s2-core/src/facet/header/corner.ts
@@ -132,7 +132,9 @@ export class CornerHeader extends BaseHeader<CornerHeaderConfig> {
       const sNode: Node = new Node({
         id: '',
         field: '',
-        value: getDefaultSeriesNumberText(spreadsheet.options.seriesNumberText),
+        value: getDefaultSeriesNumberText(
+          spreadsheet.options.seriesNumber?.text,
+        ),
       });
 
       sNode.x = position?.x;
diff --git a/packages/s2-core/src/facet/header/frame.ts b/packages/s2-core/src/facet/header/frame.ts
index 2f09fcafab..158d9406ea 100644
--- a/packages/s2-core/src/facet/header/frame.ts
+++ b/packages/s2-core/src/facet/header/frame.ts
@@ -56,7 +56,7 @@ export class Frame extends Group {
      */
     return Math.max(
       dataCell!.cell!.verticalBorderWidth!,
-      spreadsheet.options.showSeriesNumber
+      spreadsheet.options.seriesNumber?.enable
         ? cornerCell!.cell!.verticalBorderWidth!
         : colCell!.cell!.verticalBorderWidth!,
     );
@@ -112,7 +112,7 @@ export class Frame extends Group {
     const {
       verticalBorderColor: headerVerticalBorderColor,
       verticalBorderColorOpacity: headerVerticalBorderColorOpacity,
-    } = spreadsheet.options.showSeriesNumber
+    } = spreadsheet.options.seriesNumber?.enable
       ? spreadsheet.theme.cornerCell!.cell!
       : spreadsheet.theme.colCell!.cell!;
 
diff --git a/packages/s2-core/src/facet/layout/build-header-hierarchy.ts b/packages/s2-core/src/facet/layout/build-header-hierarchy.ts
index aad0d6c24c..815ccefe3f 100644
--- a/packages/s2-core/src/facet/layout/build-header-hierarchy.ts
+++ b/packages/s2-core/src/facet/layout/build-header-hierarchy.ts
@@ -108,15 +108,15 @@ const handleRowHeaderHierarchy = (params: HeaderParams) => {
 
 const handleTableHierarchy = (params: HeaderParams) => {
   const { isCustomTreeFields, spreadsheet } = params;
-  const { showSeriesNumber, seriesNumberText } = spreadsheet.options;
+  const { enable, text } = spreadsheet.options.seriesNumber ?? {};
 
   if (isCustomTreeFields) {
     const seriesNumberField: CustomTreeNode = {
       field: SERIES_NUMBER_FIELD,
-      title: getDefaultSeriesNumberText(seriesNumberText),
+      title: getDefaultSeriesNumberText(text),
     };
 
-    const fields = showSeriesNumber
+    const fields = enable
       ? [seriesNumberField, ...params.fields]
       : (params.fields as CustomTreeNode[]).filter(
           (node) => node?.field !== SERIES_NUMBER_FIELD,
diff --git a/packages/s2-core/src/facet/layout/build-table-hierarchy.ts b/packages/s2-core/src/facet/layout/build-table-hierarchy.ts
index d5d5ec9a93..e49da166f9 100644
--- a/packages/s2-core/src/facet/layout/build-table-hierarchy.ts
+++ b/packages/s2-core/src/facet/layout/build-table-hierarchy.ts
@@ -6,16 +6,16 @@ import type { HeaderParams } from './interface';
 export const buildTableHierarchy = (params: HeaderParams) => {
   const { spreadsheet, rootNode, fields, hierarchy } = params;
   const { columns = [] } = spreadsheet.dataSet.fields;
-  const { showSeriesNumber, seriesNumberText } = spreadsheet.options;
+  const { enable, text } = spreadsheet.options.seriesNumber ?? {};
 
-  const seriesNumberNodeValue = getDefaultSeriesNumberText(seriesNumberText);
+  const seriesNumberNodeValue = getDefaultSeriesNumberText(text);
   const fieldValues = columns.map((field) => {
     return field === SERIES_NUMBER_FIELD
       ? seriesNumberNodeValue
       : spreadsheet.dataSet.getFieldName(field);
   });
 
-  if (showSeriesNumber && !fields.includes(SERIES_NUMBER_FIELD)) {
+  if (enable && !fields.includes(SERIES_NUMBER_FIELD)) {
     fields.unshift(SERIES_NUMBER_FIELD);
     fieldValues.unshift(seriesNumberNodeValue);
   }
diff --git a/packages/s2-core/src/facet/table-facet.ts b/packages/s2-core/src/facet/table-facet.ts
index 1816d486d5..bd004f0132 100644
--- a/packages/s2-core/src/facet/table-facet.ts
+++ b/packages/s2-core/src/facet/table-facet.ts
@@ -225,7 +225,7 @@ export class TableFacet extends FrozenFacet {
         this.getTotalHeightForRange(rowIndex, cellRange.end);
     }
 
-    if (options.showSeriesNumber && colNode.field === SERIES_NUMBER_FIELD) {
+    if (options.seriesNumber?.enable && colNode.field === SERIES_NUMBER_FIELD) {
       data = rowIndex + 1;
     } else {
       data = dataSet.getCellData({
@@ -260,11 +260,12 @@ export class TableFacet extends FrozenFacet {
 
   private getAdaptiveColWidth(colLeafNodes: Node[]) {
     const { dataCell } = this.spreadsheet.options.style!;
-    const { showSeriesNumber } = this.spreadsheet.options;
+    const { seriesNumber } = this.spreadsheet.options;
 
     if (this.spreadsheet.getLayoutWidthType() !== LayoutWidthType.Compact) {
       const seriesNumberWidth = this.getSeriesNumberWidth();
-      const colHeaderColSize = colLeafNodes.length - (showSeriesNumber ? 1 : 0);
+      const colHeaderColSize =
+        colLeafNodes.length - (seriesNumber?.enable ? 1 : 0);
       const canvasW =
         this.getCanvasSize().width -
         seriesNumberWidth -
diff --git a/packages/s2-core/src/facet/utils.ts b/packages/s2-core/src/facet/utils.ts
index d17a8c33e3..172cd4c4b0 100644
--- a/packages/s2-core/src/facet/utils.ts
+++ b/packages/s2-core/src/facet/utils.ts
@@ -495,15 +495,15 @@ export const getFrozenRowCfgPivot = (
   } => {
   /**
    * series number cell 可以自定义布局，和 row cell 不一定是 1 对 1 的关系
-   * showSeriesNumber 暂时禁用 首行冻结
+   * seriesNumber 暂时禁用 首行冻结
    * */
-  const { pagination, frozen, hierarchyType, showSeriesNumber } = options;
+  const { pagination, frozen, hierarchyType, seriesNumber } = options;
 
   const enablePagination = pagination && pagination.pageSize;
   let firstRow = false;
   const headNode = rowNodes?.[0];
 
-  if (!enablePagination && !showSeriesNumber && frozen?.firstRow) {
+  if (!enablePagination && !seriesNumber?.enable && frozen?.firstRow) {
     const treeMode = hierarchyType === 'tree';
 
     // tree mode
diff --git a/packages/s2-core/src/sheet-type/table-sheet.ts b/packages/s2-core/src/sheet-type/table-sheet.ts
index 980d21712f..911602bde5 100644
--- a/packages/s2-core/src/sheet-type/table-sheet.ts
+++ b/packages/s2-core/src/sheet-type/table-sheet.ts
@@ -78,7 +78,7 @@ export class TableSheet extends SpreadSheet {
 
   protected buildFacet() {
     const defaultCell = (viewMeta: ViewMeta) => {
-      if (this.options.showSeriesNumber && viewMeta.colIndex === 0) {
+      if (this.options.seriesNumber?.enable && viewMeta.colIndex === 0) {
         return new TableSeriesNumberCell(viewMeta, this);
       }
 
diff --git a/packages/s2-core/src/utils/cell/data-cell.ts b/packages/s2-core/src/utils/cell/data-cell.ts
index 50e972bdd8..855c5f4993 100644
--- a/packages/s2-core/src/utils/cell/data-cell.ts
+++ b/packages/s2-core/src/utils/cell/data-cell.ts
@@ -94,7 +94,10 @@ export const updateBySelectedCellsHighlight = (
   const isRowCell = dataCell.cellType === CellType.ROW_CELL;
   // 高亮序号
   const showSNWhenRowHeaderHighlight =
-    s2.isTableMode() && s2.options.showSeriesNumber && rowHeader && isRowCell;
+    s2.isTableMode() &&
+    s2.options.seriesNumber?.enable &&
+    rowHeader &&
+    isRowCell;
 
   if (currentRow || showSNWhenRowHeaderHighlight) {
     updateCurrentRowCellState(cells, dataCell);
diff --git a/packages/s2-core/src/utils/export/copy/table-copy.ts b/packages/s2-core/src/utils/export/copy/table-copy.ts
index 45779bba94..f49a674cab 100644
--- a/packages/s2-core/src/utils/export/copy/table-copy.ts
+++ b/packages/s2-core/src/utils/export/copy/table-copy.ts
@@ -58,13 +58,13 @@ class TableDataCellCopy extends BaseDataCellCopy {
   }
 
   private getDataMatrix(): string[][] {
-    const { showSeriesNumber } = this.spreadsheet.options;
+    const { seriesNumber } = this.spreadsheet.options;
 
     return this.displayData.map((row, i) =>
       this.columnNodes.map((node) => {
         const field = node.field;
 
-        if (SERIES_NUMBER_FIELD === field && showSeriesNumber) {
+        if (SERIES_NUMBER_FIELD === field && seriesNumber?.enable) {
           return (i + 1).toString();
         }
 
@@ -81,7 +81,7 @@ class TableDataCellCopy extends BaseDataCellCopy {
   }
 
   protected getDataMatrixRIC(): Promise<string[][]> {
-    const { showSeriesNumber } = this.spreadsheet.options;
+    const { seriesNumber } = this.spreadsheet.options;
     const result: string[][] = [];
     let rowIndex = 0;
 
@@ -104,7 +104,7 @@ class TableDataCellCopy extends BaseDataCellCopy {
                 const colNode = this.columnNodes[i];
                 const field = colNode.field;
 
-                if (SERIES_NUMBER_FIELD === field && showSeriesNumber) {
+                if (SERIES_NUMBER_FIELD === field && seriesNumber?.enable) {
                   row.push((j + 1).toString());
                   // eslint-disable-next-line no-continue
                   continue;
@@ -142,7 +142,7 @@ class TableDataCellCopy extends BaseDataCellCopy {
 
   private getColMatrix(): string[] {
     const { formatHeader } = this.config;
-    const { showSeriesNumber } = this.spreadsheet.options;
+    const { seriesNumber } = this.spreadsheet.options;
 
     // 明细表的表头，没有格式化
     return this.columnNodes.map((node) => {
@@ -152,7 +152,7 @@ class TableDataCellCopy extends BaseDataCellCopy {
         return field;
       }
 
-      return SERIES_NUMBER_FIELD === field && showSeriesNumber
+      return SERIES_NUMBER_FIELD === field && seriesNumber?.enable
         ? getDefaultSeriesNumberText()
         : this.spreadsheet.dataSet.getFieldName(field);
     }) as string[];
diff --git a/packages/s2-core/src/utils/interaction/select-event.ts b/packages/s2-core/src/utils/interaction/select-event.ts
index b35da0dbb8..b94893437d 100644
--- a/packages/s2-core/src/utils/interaction/select-event.ts
+++ b/packages/s2-core/src/utils/interaction/select-event.ts
@@ -86,7 +86,7 @@ export function getRowCellForSelectedCell(
   const { facet, options } = spreadsheet;
 
   if (spreadsheet.isTableMode()) {
-    if (!options.showSeriesNumber) {
+    if (!options.seriesNumber?.enable) {
       return [];
     }
 
diff --git a/packages/s2-react/__tests__/spreadsheet/data-accuracy-one-measure-spec.tsx b/packages/s2-react/__tests__/spreadsheet/data-accuracy-one-measure-spec.tsx
index 5fe68be23a..6a0b17eeae 100644
--- a/packages/s2-react/__tests__/spreadsheet/data-accuracy-one-measure-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/data-accuracy-one-measure-spec.tsx
@@ -117,7 +117,9 @@ const getOptions = (): SheetComponentOptions => {
     width: 800,
     height: 600,
     hierarchyType: 'grid',
-    showSeriesNumber: false,
+    seriesNumber: {
+      enable: false,
+    },
     frozen: {
       rowHeader: false,
     },
diff --git a/packages/s2-react/__tests__/spreadsheet/data-accuracy-two-measures-spec.tsx b/packages/s2-react/__tests__/spreadsheet/data-accuracy-two-measures-spec.tsx
index 311e5053d2..fa61a3e7fd 100644
--- a/packages/s2-react/__tests__/spreadsheet/data-accuracy-two-measures-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/data-accuracy-two-measures-spec.tsx
@@ -106,7 +106,9 @@ const getOptions = (): SheetComponentsProps['options'] => {
     width: 800,
     height: 600,
     hierarchyType: 'grid',
-    showSeriesNumber: false,
+    seriesNumber: {
+      enable: false,
+    },
     frozen: {
       rowHeader: false,
     },
diff --git a/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx
index f37b643bec..f85fd43578 100644
--- a/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx
@@ -59,7 +59,9 @@ function MainLayout() {
   const options: SheetComponentOptions = {
     width: 800,
     height: 600,
-    showSeriesNumber: true,
+    seriesNumber: {
+      enable: true,
+    },
     device: DeviceType.PC,
     interaction: {
       copy: { enable: true },
diff --git a/packages/s2-react/__tests__/spreadsheet/multiple-values-cell-spec.tsx b/packages/s2-react/__tests__/spreadsheet/multiple-values-cell-spec.tsx
index 6d5601c7b6..f16653c733 100644
--- a/packages/s2-react/__tests__/spreadsheet/multiple-values-cell-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/multiple-values-cell-spec.tsx
@@ -82,7 +82,9 @@ const getOptions = (): SheetComponentsProps['options'] => {
     width: 800,
     height: 600,
     hierarchyType: 'tree',
-    showSeriesNumber: true,
+    seriesNumber: {
+      enable: true,
+    },
     frozen: {
       rowHeader: false,
     },
diff --git a/packages/s2-react/__tests__/spreadsheet/pressure-test-spec.tsx b/packages/s2-react/__tests__/spreadsheet/pressure-test-spec.tsx
index 7db9f0d5f6..770fad543b 100644
--- a/packages/s2-react/__tests__/spreadsheet/pressure-test-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/pressure-test-spec.tsx
@@ -54,7 +54,9 @@ const getOptions = (): SheetComponentsProps['options'] => {
     width: 800,
     height: 600,
     hierarchyType: 'grid',
-    showSeriesNumber: false,
+    seriesNumber: {
+      enable: false,
+    },
     frozen: {
       rowHeader: false,
     },
diff --git a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx
index df67d28198..10d3ef9f14 100644
--- a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx
@@ -125,7 +125,9 @@ function MainLayout({ callback }: Props) {
     width: 800,
     height: 600,
     device: DeviceType.PC,
-    showSeriesNumber: true,
+    seriesNumber: {
+      enable: true,
+    },
     placeholder: '',
     style: {
       dataCell: {
diff --git a/packages/s2-react/playground/components/CustomGrid.tsx b/packages/s2-react/playground/components/CustomGrid.tsx
index d2cdac8062..941930e7f8 100644
--- a/packages/s2-react/playground/components/CustomGrid.tsx
+++ b/packages/s2-react/playground/components/CustomGrid.tsx
@@ -145,10 +145,12 @@ export const CustomGrid = React.forwardRef<SpreadSheet, CustomGridProps>(
           <Switch
             checkedChildren="序号开"
             unCheckedChildren="序号关"
-            checked={options.showSeriesNumber}
+            checked={options.seriesNumber?.enable}
             onChange={(checked) => {
               setOptions({
-                showSeriesNumber: checked,
+                seriesNumber: {
+                  enable: checked,
+                },
               });
             }}
           />
diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx
index 8a3a62286b..0744b36154 100644
--- a/packages/s2-react/playground/config.tsx
+++ b/packages/s2-react/playground/config.tsx
@@ -311,7 +311,6 @@ export const s2Options: SheetComponentOptions = {
       // cursor: 'crosshair',
     };
   },
-  // showSeriesNumber: false,
   frozen: {
     rowHeader: true,
     // rowCount: 1,
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
index 4d15d9af5c..41445b7cef 100644
--- a/packages/s2-react/playground/index.tsx
+++ b/packages/s2-react/playground/index.tsx
@@ -645,10 +645,12 @@ function MainLayout() {
                                 <Switch
                                   checkedChildren="显示序号"
                                   unCheckedChildren="不显示序号"
-                                  checked={mergedOptions.showSeriesNumber}
+                                  checked={mergedOptions.seriesNumber?.enable}
                                   onChange={(checked) => {
                                     updateOptions({
-                                      showSeriesNumber: checked,
+                                      seriesNumber: {
+                                        enable: checked,
+                                      },
                                     });
                                   }}
                                 />
@@ -656,17 +658,19 @@ function MainLayout() {
                                   checkedChildren="自定义序号文本"
                                   unCheckedChildren="默认序号文本"
                                   checked={
-                                    mergedOptions.seriesNumberText ===
+                                    mergedOptions.seriesNumber?.text ===
                                     '自定义序号文本'
                                   }
                                   onChange={(checked) => {
                                     updateOptions({
-                                      seriesNumberText: checked
-                                        ? '自定义序号文本'
-                                        : getDefaultSeriesNumberText(),
+                                      seriesNumber: {
+                                        text: checked
+                                          ? '自定义序号文本'
+                                          : getDefaultSeriesNumberText(),
+                                      },
                                     });
                                   }}
-                                  disabled={!mergedOptions.showSeriesNumber}
+                                  disabled={!mergedOptions.seriesNumber?.enable}
                                 />
                                 <Switch
                                   checkedChildren="分页"

From 417f6a82f4fc7882a6dcb746c7bea8be2ebc3140 Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Wed, 31 Jan 2024 14:56:33 +0800
Subject: [PATCH 42/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20seriesNumber?=
 =?UTF-8?q?=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/api/general/S2Options.en.md      |   6 +-
 s2-site/docs/api/general/S2Options.zh.md      | 119 +++++++++---------
 s2-site/docs/common/series-number.en.md       |  13 ++
 s2-site/docs/common/series-number.zh.md       |  13 ++
 .../advanced/interaction/merge-cell.en.md     |   4 +-
 .../advanced/interaction/merge-cell.zh.md     |   4 +-
 .../manual/basic/sheet-type/pivot-mode.zh.md  |   8 +-
 .../manual/basic/sheet-type/table-mode.en.md  |   6 +-
 .../manual/basic/sheet-type/table-mode.zh.md  |   8 +-
 .../analysis/get-data/demo/get-cell-data.ts   |   4 +-
 s2-site/examples/basic/pivot/demo/grid.ts     |   8 +-
 s2-site/examples/basic/pivot/demo/tree.ts     |  10 +-
 s2-site/examples/basic/table/demo/table.ts    |   8 +-
 s2-site/examples/case/art/demo/lost-text.tsx  |   4 +-
 .../examples/case/data-preview/demo/excel.tsx |   4 +-
 .../examples/case/data-preview/demo/index.tsx |   4 +-
 .../case/performance-compare/demo/table.tsx   |   4 +-
 .../custom-cell/demo/custom-table-cell.ts     |   4 +-
 .../custom-cell/demo/series-number-cell.ts    |   4 +-
 .../demo/custom-table-col-header.ts           |   4 +-
 .../layout/custom/demo/multi-line-text.ts     |   6 +-
 .../layout/frozen/demo/table-frozen.ts        |   4 +-
 .../react-component/sheet/demo/editable.tsx   |   4 +-
 s2-site/playground/sheet-component/index.tsx  |   4 +-
 24 files changed, 161 insertions(+), 96 deletions(-)
 create mode 100644 s2-site/docs/common/series-number.en.md
 create mode 100644 s2-site/docs/common/series-number.zh.md

diff --git a/s2-site/docs/api/general/S2Options.en.md b/s2-site/docs/api/general/S2Options.en.md
index 603d4dc0c8..ba16f2ec69 100644
--- a/s2-site/docs/api/general/S2Options.en.md
+++ b/s2-site/docs/api/general/S2Options.en.md
@@ -26,7 +26,7 @@ const s2Options = {
 | interaction                 | [Interaction](#interaction)                         |          |                           | Form interaction configuration                                                                                                                                                                                        |
 | pagination                  | [Pagination](#pagination)                           |          |                           | paging configuration                                                                                                                                                                                                  |
 | frozen                      | [Frozen](#frozen)                                   |          |                           | Column Header Freezing Configuration                                                                                                                                                                                  |
-| showSeriesNumber            | `boolean`                                           |          | `false`                   | Whether to display the line number                                                                                                                                                                                    |
+| seriesNumber                | [SeriesNumber](#seriesnumber)                       |          |                           | Whether to display the series number                                                                                                                                                                                  |
 | showDefaultHeaderActionIcon | `boolean`                                           |          | `true`                    | Whether to display the default row and column header operation icons                                                                                                                                                  |
 | headerActionIcons           | [HeaderActionIcon\[\]](#headeractionicon)           |          | `false`                   | Customize row and column header action icons (need to set `showDefaultHeaderActionIcon` to `false` )                                                                                                                  |
 | customSVGIcons              | [CustomSVGIcon\[\]](#customsvgicon)                 |          | `false`                   | Custom svg icons                                                                                                                                                                                                      |
@@ -48,9 +48,11 @@ const s2Options = {
 | filterDisplayDataItem       | [FilterDataItemCallback](#filterdataitemcallback)   |          |                           | filter data                                                                                                                                                                                                           |
 | mappingDisplayDataItem      | [MappingDataItemCallback](#mappingdataitemcallback) |          |                           | Convert data for tooltip display                                                                                                                                                                                      |
 | dataSet                     | [DataSet](#dataset)                                 |          |                           | custom data set                                                                                                                                                                                                       |
-| supportsCSSTransform         | `boolean`                                           |          | `false`                   | After enabling it, CSS transform is supported, which solves the problem that the mouse coordinates respond incorrectly after the parent element is set to `transform`                                                 |
+| supportsCSSTransform        | `boolean`                                           |          | `false`                   | After enabling it, CSS transform is supported, which solves the problem that the mouse coordinates respond incorrectly after the parent element is set to `transform`                                                 |
 | devicePixelRatio            | `number`                                            |          | `window.devicePixelRatio` | Custom Device Pixel Ratio                                                                                                                                                                                             |
 
+<embed src="@/docs/common/series-number.en.md"></embed>
+
 <embed src="@/docs/common/frozen.en.md"></embed>
 
 <embed src="@/docs/common/interaction.en.md"></embed>
diff --git a/s2-site/docs/api/general/S2Options.zh.md b/s2-site/docs/api/general/S2Options.zh.md
index c6f946e320..5577b81dac 100644
--- a/s2-site/docs/api/general/S2Options.zh.md
+++ b/s2-site/docs/api/general/S2Options.zh.md
@@ -14,51 +14,50 @@ const s2Options = {
 }
 ```
 
-| 参数 | 类型 | 必选  | 默认值 | 功能描述 | 版本 |
-| -- | --- | --  | -- | --- | --- |
-| width | `number` |    | `600`  | 表格宽度 |
-| height | `number` |    | `480`  | 表格高度 |
-| debug | `boolean` |   | `false` | 是否开启调试模式 |
-| hierarchyType | `"grid" \| "tree"` |    | `grid` | 行头的展示方式，grid：平铺网格结构， tree： 树状结构。 支持 [自定义结构](/manual/advanced/custom/custom-header) |
-| conditions | [Conditions](#conditions) |  |    | 字段标记，条件格式配置 |
-| totals | [Totals](#totals) |  |    | 小计总计配置 |
-| tooltip | [Tooltip](#tooltip) |    |  |  tooltip 配置 |
-| interaction | [Interaction](#interaction) |    |  |  表格交互配置 |
-| pagination | [Pagination](#pagination) |  |    | 分页配置 |
-| frozen | [Frozen](#frozen) |  |    | 行列头冻结配置 |
-| showSeriesNumber | `boolean` |  |  `false` | 是否显示行序号 |
-| seriesNumberText | `string` |  |  `序号` | 自定义行头序号列标题 |
-| showDefaultHeaderActionIcon |`boolean` |  | `true` | 是否展示默认行列头操作图标 |
-| headerActionIcons | [HeaderActionIcon](#headeractionicon)[] |  |   `false` | 自定义行列头操作图标（需要将 `showDefaultHeaderActionIcon` 置为 `false`） |
-| customSVGIcons | [CustomSVGIcon](#customsvgicon)[] |  |   `false` | 自定义 svg 图标 |
-| style | [Style](#style) |  |    | 单元格样式设置，比如布局类型，宽高，边距，是否隐藏数值列头等 |
-| hdAdapter | `boolean` |  |   `true` | 是否开启高清屏适配，解决多屏切换，高清视网膜屏字体渲染模糊的问题。[查看更多](/manual/advanced/hd-adapter) |
-| mergedCellsInfo | [MergedCellInfo](#mergedcellinfo)[][] |    |  | 合并单元格信息 |
-| placeholder |  `string \| (meta: Record<string, any>) => string` |    |  | 自定义单元格占位符 |
-| cornerText | string |    |  | 自定义角头文本 （仅在树状模式有效） |
-| cornerExtraFieldText | string |    | `数值` | 自定义角头虚拟数值字段文本（"数值挂行头"时有效） |
-| dataCell | [DataCellCallback](#datacellcallback) |  |    | 自定义单元格 cell |
-| cornerCell | [CellCallback](#cellcallback) |  |    | 自定义 cornerCell |
-| rowCell | [CellCallback](#cellcallback) |  |  |   自定义行头 cell |
-| colCell | [CellCallback](#cellcallback) |  |  |   自定义列头 cell |
-| mergedCell | [MergedCellCallback](#mergedcellcallback) |  |  |   自定义合并单元格 |
-| frame | [FrameCallback](#framecallback) |    |  | 自定义表格框架/边框 |
-| cornerHeader | [CornerHeaderCallback](#cornerheadercallback) |    |  | 自定义角头 |
-| layoutHierarchy | [LayoutHierarchy](#layouthierarchy) |  |    | 自定义层级结构 |
-| layoutArrange | [LayoutArrange](#layoutarrange) |  |  |   自定义排列顺序 （树状模式有效） |
-| layoutCoordinate | [layoutCoordinate](#layoutcoordinate) |    |  | 自定义单元格节点坐标 |
-| layoutCellMeta | [layoutCellMeta](#layoutcellmeta)   |  |  | 自定义单元格元数据 |
-| layoutSeriesNumberNodes | [LayoutSeriesNumberNodes](#layoutseriesnumbernodes)   |  |  | 自定义序号节点 |
-| dataSet | [DataSet](#dataset) |  |  |   自定义数据集 |
-| facet | (spreadsheet: [SpreadSheet](/api/basic-class/spreadsheet)) => [BaseFacet](/api/basic-class/base-facet) |  |  |   自定义分面 |
-| transformCanvasConfig | (renderer: [Renderer](https://g.antv.antgroup.com/api/canvas/options#renderer), spreadsheet: [SpreadSheet](/api/basic-class/spreadsheet)) => Partial<[CanvasConfig](https://g.antv.antgroup.com/api/canvas/options)> \| void |  |   `-` | 自定义 AntV/G 渲染引擎 [配置参数](https://g.antv.antgroup.com/api/canvas/options) & [插件注册](https://g.antv.antgroup.com/plugins/intro)  |
+| 参数                        | 类型                                                                                                                                                                                                                         | 必选 | 默认值  | 功能描述                                                                                                                                  | 版本 |
+| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| width                       | `number`                                                                                                                                                                                                                     |      | `600`   | 表格宽度                                                                                                                                  |
+| height                      | `number`                                                                                                                                                                                                                     |      | `480`   | 表格高度                                                                                                                                  |
+| debug                       | `boolean`                                                                                                                                                                                                                    |      | `false` | 是否开启调试模式                                                                                                                          |
+| hierarchyType               | `"grid" \| "tree"`                                                                                                                                                                                                           |      | `grid`  | 行头的展示方式，grid：平铺网格结构， tree： 树状结构。 支持 [自定义结构](/manual/advanced/custom/custom-header)                           |
+| conditions                  | [Conditions](#conditions)                                                                                                                                                                                                    |      |         | 字段标记，条件格式配置                                                                                                                    |
+| totals                      | [Totals](#totals)                                                                                                                                                                                                            |      |         | 小计总计配置                                                                                                                              |
+| tooltip                     | [Tooltip](#tooltip)                                                                                                                                                                                                          |      |         | tooltip 配置                                                                                                                              |
+| interaction                 | [Interaction](#interaction)                                                                                                                                                                                                  |      |         | 表格交互配置                                                                                                                              |
+| pagination                  | [Pagination](#pagination)                                                                                                                                                                                                    |      |         | 分页配置                                                                                                                                  |
+| frozen                      | [Frozen](#frozen)                                                                                                                                                                                                            |      |         | 行列头冻结配置                                                                                                                            |
+| seriesNumber                | [SeriesNumber](#seriesnumber)                                                                                                                                                                                                |      |         | 序号列展示及自定义文字配置                                                                                                                |
+| showDefaultHeaderActionIcon | `boolean`                                                                                                                                                                                                                    |      | `true`  | 是否展示默认行列头操作图标                                                                                                                |
+| headerActionIcons           | [HeaderActionIcon](#headeractionicon)[]                                                                                                                                                                                      |      | `false` | 自定义行列头操作图标（需要将 `showDefaultHeaderActionIcon` 置为 `false`）                                                                 |
+| customSVGIcons              | [CustomSVGIcon](#customsvgicon)[]                                                                                                                                                                                            |      | `false` | 自定义 svg 图标                                                                                                                           |
+| style                       | [Style](#style)                                                                                                                                                                                                              |      |         | 单元格样式设置，比如布局类型，宽高，边距，是否隐藏数值列头等                                                                              |
+| hdAdapter                   | `boolean`                                                                                                                                                                                                                    |      | `true`  | 是否开启高清屏适配，解决多屏切换，高清视网膜屏字体渲染模糊的问题。[查看更多](/manual/advanced/hd-adapter)                                 |
+| mergedCellsInfo             | [MergedCellInfo](#mergedcellinfo)[][]                                                                                                                                                                                        |      |         | 合并单元格信息                                                                                                                            |
+| placeholder                 | `string \| (meta: Record<string, any>) => string`                                                                                                                                                                            |      |         | 自定义单元格占位符                                                                                                                        |
+| cornerText                  | string                                                                                                                                                                                                                       |      |         | 自定义角头文本 （仅在树状模式有效）                                                                                                       |
+| cornerExtraFieldText        | string                                                                                                                                                                                                                       |      | `数值`  | 自定义角头虚拟数值字段文本（"数值挂行头"时有效）                                                                                          |
+| dataCell                    | [DataCellCallback](#datacellcallback)                                                                                                                                                                                        |      |         | 自定义单元格 cell                                                                                                                         |
+| cornerCell                  | [CellCallback](#cellcallback)                                                                                                                                                                                                |      |         | 自定义 cornerCell                                                                                                                         |
+| rowCell                     | [CellCallback](#cellcallback)                                                                                                                                                                                                |      |         | 自定义行头 cell                                                                                                                           |
+| colCell                     | [CellCallback](#cellcallback)                                                                                                                                                                                                |      |         | 自定义列头 cell                                                                                                                           |
+| mergedCell                  | [MergedCellCallback](#mergedcellcallback)                                                                                                                                                                                    |      |         | 自定义合并单元格                                                                                                                          |
+| frame                       | [FrameCallback](#framecallback)                                                                                                                                                                                              |      |         | 自定义表格框架/边框                                                                                                                       |
+| cornerHeader                | [CornerHeaderCallback](#cornerheadercallback)                                                                                                                                                                                |      |         | 自定义角头                                                                                                                                |
+| layoutHierarchy             | [LayoutHierarchy](#layouthierarchy)                                                                                                                                                                                          |      |         | 自定义层级结构                                                                                                                            |
+| layoutArrange               | [LayoutArrange](#layoutarrange)                                                                                                                                                                                              |      |         | 自定义排列顺序 （树状模式有效）                                                                                                           |
+| layoutCoordinate            | [layoutCoordinate](#layoutcoordinate)                                                                                                                                                                                        |      |         | 自定义单元格节点坐标                                                                                                                      |
+| layoutCellMeta              | [layoutCellMeta](#layoutcellmeta)                                                                                                                                                                                            |      |         | 自定义单元格元数据                                                                                                                        |
+| layoutSeriesNumberNodes     | [LayoutSeriesNumberNodes](#layoutseriesnumbernodes)                                                                                                                                                                          |      |         | 自定义序号节点                                                                                                                            |
+| dataSet                     | [DataSet](#dataset)                                                                                                                                                                                                          |      |         | 自定义数据集                                                                                                                              |
+| facet                       | (spreadsheet: [SpreadSheet](/api/basic-class/spreadsheet)) => [BaseFacet](/api/basic-class/base-facet)                                                                                                                       |      |         | 自定义分面                                                                                                                                |
+| transformCanvasConfig       | (renderer: [Renderer](https://g.antv.antgroup.com/api/canvas/options#renderer), spreadsheet: [SpreadSheet](/api/basic-class/spreadsheet)) => Partial<[CanvasConfig](https://g.antv.antgroup.com/api/canvas/options)> \| void |      | `-`     | 自定义 AntV/G 渲染引擎 [配置参数](https://g.antv.antgroup.com/api/canvas/options) & [插件注册](https://g.antv.antgroup.com/plugins/intro) |
+
+<embed src="@/docs/common/series-number.zh.md"></embed>
 
 <embed src="@/docs/common/frozen.zh.md"></embed>
 
 <embed src="@/docs/common/interaction.zh.md"></embed>
 
-<embed src="@/docs/common/conditions.zh.md"></embed>
-
 <embed src="@/docs/common/totals.zh.md"></embed>
 
 <embed src="@/docs/common/tooltip.zh.md"></embed>
@@ -87,11 +86,11 @@ CellCallback = (node: Node, spreadsheet: SpreadSheet, ...restOptions: unknown[])
 
 功能描述：自定义单元格。[查看示例](/examples/custom/custom-cell#row-cell)
 
-| 参数        | 说明                             | 类型                                             | 默认值 | 必选 |
-| ----------- | -------------------------------- | ------------------------------------------------ | ------ | ---- |
-| node        | 当前渲染的 node 节点             | [Node](/docs/api/basic-class/node)               | -      | ✓    |
-| spreadsheet | 表格实例 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | -      | ✓    |
-| restOptions | 不定参数，传递额外的信息         | `unknown[]`                                      | -      |      |
+| 参数        | 说明                     | 类型                                             | 默认值 | 必选 |
+| ----------- | ------------------------ | ------------------------------------------------ | ------ | ---- |
+| node        | 当前渲染的 node 节点     | [Node](/docs/api/basic-class/node)               | -      | ✓    |
+| spreadsheet | 表格实例                 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | -      | ✓    |
+| restOptions | 不定参数，传递额外的信息 | `unknown[]`                                      | -      |      |
 
 ## MergedCellCallback
 
@@ -111,11 +110,11 @@ CornerHeaderCallback = (parent: S2CellType, spreadsheet: SpreadSheet, ...restOpt
 
 功能描述：自定义角头。[查看示例](/examples/custom/custom-cell#corner-cell)
 
-| 参数        | 说明                             | 类型                                             | 默认值 | 必选 |
-| ----------- | -------------------------------- | ------------------------------------------------ | ------ | ---- |
-| parent      | 父级单元格                       | [S2CellType](#s2celltype)                        | -      | ✓    |
-| spreadsheet | 表格实例 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | -      | ✓    |
-| restOptions | 不定参数，传递额外的信息         | `unknown[]`                                      | -      |      |
+| 参数        | 说明                     | 类型                                             | 默认值 | 必选 |
+| ----------- | ------------------------ | ------------------------------------------------ | ------ | ---- |
+| parent      | 父级单元格               | [S2CellType](#s2celltype)                        | -      | ✓    |
+| spreadsheet | 表格实例                 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | -      | ✓    |
+| restOptions | 不定参数，传递额外的信息 | `unknown[]`                                      | -      |      |
 
 <embed src="@/docs/common/custom/layoutHierarchy.zh.md"></embed>
 
@@ -209,16 +208,16 @@ export type Data = RawData & ExtraData;
 
 功能描述：基本数据格式。[查看文档](/manual/advanced/get-cell-data#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%8C%BA%E5%9F%9F%E5%8D%95%E5%85%83%E6%A0%BC%E8%8A%82%E7%82%B9)
 
-| 参数          | 说明                             | 类型                                               | 默认值 | 必选 |
-| ------------- | -------------------------------- | -------------------------------------------------- | ------ | ---- |
-| colNodes      | 列头节点，对应 ColCell （含可视范围外）                     | [Node[]](/docs/api/basic-class/node)               |        |      |
-| colLeafNodes  | 列头叶子节点，对应 ColCell （含可视范围外） | [Node[]](/docs/api/basic-class/node)               |        |      |
-| colsHierarchy | 列头节点层级结构 （含可视范围外）                     | [Hierarchy](#hierarchy)                            |        |      |
-| rowNodes      | 行头节点，对应 RowCell （含可视范围外）                     | [Node[]](#node)                                    |        |      |
-| rowLeafNodes  | 行头叶子节点，对应 RowCell （含可视范围外） | [Node[]](/docs/api/basic-class/node)               |        |      |
-| rowsHierarchy | 行头节点层级结构 （含可视范围外）                     | [Hierarchy](#hierarchy)                            |        | ✓    |
-| seriesNumberNodes  | 序号节点，对应 SeriesNumberCell （含可视范围外） | [Node[]](/docs/api/basic-class/node)               |        |      |
-| cornerNodes  | 角头节点，对应 CornerCell （含可视范围外） | [Node[]](/docs/api/basic-class/node)               |        |      |
+| 参数              | 说明                                             | 类型                                 | 默认值 | 必选 |
+| ----------------- | ------------------------------------------------ | ------------------------------------ | ------ | ---- |
+| colNodes          | 列头节点，对应 ColCell （含可视范围外）          | [Node[]](/docs/api/basic-class/node) |        |      |
+| colLeafNodes      | 列头叶子节点，对应 ColCell （含可视范围外）      | [Node[]](/docs/api/basic-class/node) |        |      |
+| colsHierarchy     | 列头节点层级结构 （含可视范围外）                | [Hierarchy](#hierarchy)              |        |      |
+| rowNodes          | 行头节点，对应 RowCell （含可视范围外）          | [Node[]](#node)                      |        |      |
+| rowLeafNodes      | 行头叶子节点，对应 RowCell （含可视范围外）      | [Node[]](/docs/api/basic-class/node) |        |      |
+| rowsHierarchy     | 行头节点层级结构 （含可视范围外）                | [Hierarchy](#hierarchy)              |        | ✓    |
+| seriesNumberNodes | 序号节点，对应 SeriesNumberCell （含可视范围外） | [Node[]](/docs/api/basic-class/node) |        |      |
+| cornerNodes       | 角头节点，对应 CornerCell （含可视范围外）       | [Node[]](/docs/api/basic-class/node) |        |      |
 
 ## DataSet
 
diff --git a/s2-site/docs/common/series-number.en.md b/s2-site/docs/common/series-number.en.md
new file mode 100644
index 0000000000..a4c28d7a5b
--- /dev/null
+++ b/s2-site/docs/common/series-number.en.md
@@ -0,0 +1,13 @@
+---
+title: SeriesNumber
+order: 6
+---
+
+## SeriesNumber
+
+Function description: SeriesNumber configuration
+
+| parameter | illustrate                            | type      | Defaults | required |
+| --------- | ------------------------------------- | --------- | -------- | -------- |
+| enable    | Whether to display the series number  | `boolean` | `false`  |          |
+| text      | custom series number header cell text | `string`  | -        |          |
diff --git a/s2-site/docs/common/series-number.zh.md b/s2-site/docs/common/series-number.zh.md
new file mode 100644
index 0000000000..a21f1fe770
--- /dev/null
+++ b/s2-site/docs/common/series-number.zh.md
@@ -0,0 +1,13 @@
+---
+title: 序号列
+order: 6
+---
+
+## SeriesNumber
+
+功能描述：序号列配置。
+
+| 参数   | 说明                 | 类型      | 默认值  | 必选 |
+| ------ | -------------------- | --------- | ------- | ---- |
+| enable | 是否显示行序号       | `boolean` | `false` |      |
+| text   | 自定义行头序号列标题 | `string`  | -       |      |
diff --git a/s2-site/docs/manual/advanced/interaction/merge-cell.en.md b/s2-site/docs/manual/advanced/interaction/merge-cell.en.md
index e84cbe3ea6..7805c26147 100644
--- a/s2-site/docs/manual/advanced/interaction/merge-cell.en.md
+++ b/s2-site/docs/manual/advanced/interaction/merge-cell.en.md
@@ -280,7 +280,9 @@ const s2DataConfig = {
 const s2Options = {
     width: 600,
     height: 400,
-    showSeriesNumber: true,
+    seriesNumber: {
+      enable: true
+    },
     tooltip: {
       content: TooltipContent,
     },
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 0571e6898c..4f9a1f2cfe 100644
--- a/s2-site/docs/manual/advanced/interaction/merge-cell.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/merge-cell.zh.md
@@ -283,7 +283,9 @@ const s2DataConfig = {
 const s2Options = {
   width: 600,
   height: 400,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true
+  },
   tooltip: {
     content: TooltipContent,
   },
diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
index 56c76e678d..53322a56d6 100644
--- a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
@@ -154,12 +154,14 @@ const App = () => {
 
 ### 序号
 
-在 `s2Options` 中传入 `showSeriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看示例](/examples/basic/pivot#grid)
+在 `s2Options` 中传入 `seriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看示例](/examples/basic/pivot#grid)
 
 ```ts
 const s2Options = {
-  showSeriesNumber: true,
-  seriesNumberText: '自定义序号标题' // 默认 "序号"
+  seriesNumber: {
+    enable: true,
+    text: '自定义序号标题' // 默认 "序号"
+  }
 }
 ```
 
diff --git a/s2-site/docs/manual/basic/sheet-type/table-mode.en.md b/s2-site/docs/manual/basic/sheet-type/table-mode.en.md
index 29a3b1ca8b..7a1b174183 100644
--- a/s2-site/docs/manual/basic/sheet-type/table-mode.en.md
+++ b/s2-site/docs/manual/basic/sheet-type/table-mode.en.md
@@ -101,11 +101,13 @@ s2.render();
 
 ### serial number
 
-Pass in `s2Options` in `showSeriesNumber` to display the built-in serial number. [view demo](/examples/basic/table#table)
+Pass in `s2Options` in `seriesNumber` to display the built-in serial number. [view demo](/examples/basic/table#table)
 
 ```ts
 const s2Options = {
-  showSeriesNumber: true
+  seriesNumber: {
+    enable: true
+  }
 }
 ```
 
diff --git a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
index 9996441707..b690a42f5c 100644
--- a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
@@ -150,12 +150,14 @@ const App = () => {
 
 ### 序号
 
-在 `s2Options` 中传入 `showSeriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看示例](/examples/basic/table#table)
+在 `s2Options` 中传入 `seriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看示例](/examples/basic/table#table)
 
 ```ts
 const s2Options = {
-  showSeriesNumber: true,
-  seriesNumberText: '序号',
+  seriesNumber: {
+    enable: true,
+    text: '序号'
+  }
 }
 ```
 
diff --git a/s2-site/examples/analysis/get-data/demo/get-cell-data.ts b/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
index 13ed6085c2..eb1380e236 100644
--- a/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
+++ b/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
@@ -226,7 +226,9 @@ fetch(
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true
+      },
       interaction: {
         selectedCellsSpotlight: true,
         hoverHighlight: true,
diff --git a/s2-site/examples/basic/pivot/demo/grid.ts b/s2-site/examples/basic/pivot/demo/grid.ts
index 6c20b24d14..b3b75e858f 100644
--- a/s2-site/examples/basic/pivot/demo/grid.ts
+++ b/s2-site/examples/basic/pivot/demo/grid.ts
@@ -46,9 +46,11 @@ fetch(
         withHeader: true,
       },
       // 显示序号
-      // showSeriesNumber: true,
-      // 自定义序号列文本, 默认 "序号"
-      // seriesNumberText: '自定义序号标题',
+      // seriesNumber: {
+      //   enable: true,
+      //   自定义序号列文本, 默认 "序号"
+      //   text: '自定义序号标题', 
+      //},
       frozen: {
         // 默认冻结行头, 行头和数值区域都会展示滚动条
         // rowHeader: false,
diff --git a/s2-site/examples/basic/pivot/demo/tree.ts b/s2-site/examples/basic/pivot/demo/tree.ts
index 594cd7927d..a737c53c4b 100644
--- a/s2-site/examples/basic/pivot/demo/tree.ts
+++ b/s2-site/examples/basic/pivot/demo/tree.ts
@@ -11,10 +11,12 @@ fetch(
       width: 600,
       height: 480,
       hierarchyType: 'tree',
-      // 显示序号
-      // showSeriesNumber: true,
-      // 自定义序号列文本, 默认 "序号"
-      // seriesNumberText: '自定义序号标题',
+     // 显示序号
+      // seriesNumber: {
+      //   enable: true,
+      //   自定义序号列文本, 默认 "序号"
+      //   text: '自定义序号标题', 
+      //},
       style: {
         rowCell: {
           // 自定义树状模式下行头宽度
diff --git a/s2-site/examples/basic/table/demo/table.ts b/s2-site/examples/basic/table/demo/table.ts
index 11a387b7d5..799f85ab2b 100644
--- a/s2-site/examples/basic/table/demo/table.ts
+++ b/s2-site/examples/basic/table/demo/table.ts
@@ -36,10 +36,10 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      // 显示序号
-      showSeriesNumber: true,
-      // 自定义序号列文本, 默认 "序号"
-      seriesNumberText: '序号',
+      seriesNumber: {
+        enable: true,
+        text: '序号',
+      },
     };
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
diff --git a/s2-site/examples/case/art/demo/lost-text.tsx b/s2-site/examples/case/art/demo/lost-text.tsx
index dfb163ffe2..99e6d747e6 100644
--- a/s2-site/examples/case/art/demo/lost-text.tsx
+++ b/s2-site/examples/case/art/demo/lost-text.tsx
@@ -205,7 +205,9 @@ export const s2Options = {
   debug: true,
   width: 600,
   height: 400,
-  showSeriesNumber: false,
+  seriesNumber: {
+    enable: false
+  },
   showDefaultHeaderActionIcon: false,
   interaction: {
     copy: { enable: true },
diff --git a/s2-site/examples/case/data-preview/demo/excel.tsx b/s2-site/examples/case/data-preview/demo/excel.tsx
index 21c920c1a0..69c69ab86b 100644
--- a/s2-site/examples/case/data-preview/demo/excel.tsx
+++ b/s2-site/examples/case/data-preview/demo/excel.tsx
@@ -7,7 +7,9 @@ import '@antv/s2-react/dist/style.min.css';
 const s2Options: SheetComponentOptions = {
   width: 600,
   height: 400,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true
+  },
   tooltip: { enable: false },
   interaction: {
     copy: {
diff --git a/s2-site/examples/case/data-preview/demo/index.tsx b/s2-site/examples/case/data-preview/demo/index.tsx
index 0f61fb88bc..72fbc7eb68 100644
--- a/s2-site/examples/case/data-preview/demo/index.tsx
+++ b/s2-site/examples/case/data-preview/demo/index.tsx
@@ -259,7 +259,9 @@ const App = ({ data }) => {
   const options: SheetComponentOptions = {
     width: 600,
     height: 400,
-    showSeriesNumber: true,
+    seriesNumber: {
+      enable: true
+    },
     interaction: {
       copy: { enable: true },
       autoResetSheetStyle: false,
diff --git a/s2-site/examples/case/performance-compare/demo/table.tsx b/s2-site/examples/case/performance-compare/demo/table.tsx
index 5d7816c5ac..c34f16f141 100644
--- a/s2-site/examples/case/performance-compare/demo/table.tsx
+++ b/s2-site/examples/case/performance-compare/demo/table.tsx
@@ -3,7 +3,9 @@ import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
 const s2Options: S2Options = {
   width: 600,
   height: 480,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true
+  }  
 };
 
 export function generateRawData(
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
index 277b0a84aa..5914297e9a 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
@@ -125,7 +125,9 @@ fetch(
     const s2Options = {
       width: 600,
       height: 480,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true
+      },
       colCell: (node, spreadsheet, headerConfig) => {
         return new CustomColCell(node, spreadsheet, headerConfig);
       },
diff --git a/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts b/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
index 3a9a6e56e5..9a01ba0d4d 100644
--- a/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/series-number-cell.ts
@@ -71,7 +71,9 @@ fetch(
       height: 480,
       // 切换到 grid 模式试试看
       hierarchyType: 'tree',
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true
+      },
       layoutSeriesNumberNodes,
       seriesNumberCell: (node, s2, headConfig) => {
         return new CustomSeriesCell(node, s2, headConfig);
diff --git a/s2-site/examples/layout/custom-header-group/demo/custom-table-col-header.ts b/s2-site/examples/layout/custom-header-group/demo/custom-table-col-header.ts
index b5ecd4b07f..312f71a21b 100644
--- a/s2-site/examples/layout/custom-header-group/demo/custom-table-col-header.ts
+++ b/s2-site/examples/layout/custom-header-group/demo/custom-table-col-header.ts
@@ -48,7 +48,9 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true
+      }
     };
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
diff --git a/s2-site/examples/layout/custom/demo/multi-line-text.ts b/s2-site/examples/layout/custom/demo/multi-line-text.ts
index 6a261f4622..ea91c58921 100644
--- a/s2-site/examples/layout/custom/demo/multi-line-text.ts
+++ b/s2-site/examples/layout/custom/demo/multi-line-text.ts
@@ -62,8 +62,10 @@ fetch('https://assets.antv.antgroup.com/s2/basic.json')
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      showSeriesNumber: true,
-      seriesNumberText: '序号序号序号序号序号序号',
+      seriesNumber: {
+        enable: true,
+        text: '序号序号序号序号序号序号',
+      },
       tooltip: {
         enable: true,
         content: (cell) => {
diff --git a/s2-site/examples/layout/frozen/demo/table-frozen.ts b/s2-site/examples/layout/frozen/demo/table-frozen.ts
index 24d93980d8..36daa3c266 100644
--- a/s2-site/examples/layout/frozen/demo/table-frozen.ts
+++ b/s2-site/examples/layout/frozen/demo/table-frozen.ts
@@ -33,7 +33,9 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
     const s2Options: S2Options = {
       width: 450,
       height: 480,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true
+      },
       frozen: {
         // 行头冻结数量
         rowCount: 1,
diff --git a/s2-site/examples/react-component/sheet/demo/editable.tsx b/s2-site/examples/react-component/sheet/demo/editable.tsx
index 67dc663a46..ce76fd1100 100644
--- a/s2-site/examples/react-component/sheet/demo/editable.tsx
+++ b/s2-site/examples/react-component/sheet/demo/editable.tsx
@@ -37,7 +37,9 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
     const s2Options: SheetComponentOptions = {
       width: 480,
       height: 480,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
       frozen: {
         // 行头冻结数量
         rowCount: 1,
diff --git a/s2-site/playground/sheet-component/index.tsx b/s2-site/playground/sheet-component/index.tsx
index 88c8766a4c..2d3b559b52 100644
--- a/s2-site/playground/sheet-component/index.tsx
+++ b/s2-site/playground/sheet-component/index.tsx
@@ -207,7 +207,9 @@ export const CustomSheet: React.FC<Props> = (props) => {
     const { showSeriesNumber, showPagination } = sheetConfig;
 
     setOptions({
-      showSeriesNumber,
+      seriesNumber: {
+        enable: showSeriesNumber,
+      },
       pagination: showPagination && {
         pageSize: 10,
         current: 1,

From 32636aff06c3808d60288e9b7369a1552ffaccff Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Wed, 31 Jan 2024 14:58:59 +0800
Subject: [PATCH 43/64] =?UTF-8?q?test:=20=E5=BF=AB=E7=85=A7=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/utils/__snapshots__/options-spec.ts.snap        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
index 37efb47068..b8b5ab8f0a 100644
--- a/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
+++ b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
@@ -58,8 +58,10 @@ Object {
     "selectedCellsSpotlight": false,
   },
   "placeholder": "-",
+  "seriesNumber": Object {
+    "enable": false,
+  },
   "showDefaultHeaderActionIcon": true,
-  "showSeriesNumber": false,
   "style": Object {
     "colCell": Object {
       "height": 30,

From 3fe97004a53a8385d1602772a805ad2c9360f21d Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Wed, 31 Jan 2024 15:50:24 +0800
Subject: [PATCH 44/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20performance?=
 =?UTF-8?q?=20=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/manual/extended-reading/performance.zh.md   | 8 +++++---
 s2-site/examples/case/performance-compare/demo/basic.tsx | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/s2-site/docs/manual/extended-reading/performance.zh.md b/s2-site/docs/manual/extended-reading/performance.zh.md
index 93d74d6d14..7d40fd4e21 100644
--- a/s2-site/docs/manual/extended-reading/performance.zh.md
+++ b/s2-site/docs/manual/extended-reading/performance.zh.md
@@ -25,7 +25,8 @@ tag: Updated
 ## 性能优化
 
 以如下透视表为例：
-![pivot sheet](https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*8FDiR45m_tsAAAAAAAAAAAAAARQnAQ)
+
+<img alt="pivot sheet" height="400" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*8FDiR45m_tsAAAAAAAAAAAAAARQnAQ">
 
 ```ts
 const dataCfg={
@@ -101,7 +102,7 @@ const rowsMeta: PivotMeta = {
 
 在 `S2` 中，我们需要将用户传入一维数据`data`通过内部的数据训练转为多维数组`indexesData`。这个多维数组是将行维度、列维度的 `path` 来组装的（底层是通过 `lodash.set` 实现），举个示例：
 
-![path](https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*GyJCTq-gw-sAAAAAAAAAAAAAARQnAQ)
+<image alt="path" height="400" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*GyJCTq-gw-sAAAAAAAAAAAAAARQnAQ">
 
 上图中，紫色单元格对应的坐标为：
 
@@ -206,7 +207,8 @@ public getFieldMeta = memoize((field: string, meta?: Meta[]): Meta => {
 * [明细表](/examples/case/performance-compare#table)
 
 详细的性能对比数据如下：
-![performance](https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*G1ITQJTTa4YAAAAAAAAAAAAAARQnAQ)
+
+<img alt="performance" height="600" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*OncTQr-vD0gAAAAAAAAAAAAADmJ7AQ/original">
 
 > 备注：
 >
diff --git a/s2-site/examples/case/performance-compare/demo/basic.tsx b/s2-site/examples/case/performance-compare/demo/basic.tsx
index 15590c2eaf..ea1d75afaf 100644
--- a/s2-site/examples/case/performance-compare/demo/basic.tsx
+++ b/s2-site/examples/case/performance-compare/demo/basic.tsx
@@ -64,7 +64,7 @@ function getDataConfig(rawData: S2DataConfig['data']): S2DataConfig {
 
 function getOptions(rawData: S2DataConfig['data']): SheetComponentOptions {
   return {
-    width: 600,
+    width: 800, 
     height: 200,
     interaction: {
       selectedCellsSpotlight: false,
@@ -87,7 +87,7 @@ function getOptions(rawData: S2DataConfig['data']): SheetComponentOptions {
   };
 }
 
-fetch('https://assets.antv.antgroup.com/s2/compare.json')
+fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/performance.json')
   .then((res) => res.json())
   .then((data) => {
     reactDOMClient.createRoot(document.getElementById('container')).render(

From 886b633b209f3fc629f2385c27bd823686799e52 Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Wed, 31 Jan 2024 16:05:54 +0800
Subject: [PATCH 45/64] =?UTF-8?q?docs:=20layout=20=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/.dumirc.ts                               | 16 ++++++++--------
 .../extended-reading/data-process/pivot.zh.md    | 12 +++++++-----
 .../layout/pivot.en.md                           |  0
 .../layout/pivot.zh.md                           |  0
 .../layout/table.en.md                           |  0
 .../layout/table.zh.md                           |  0
 .../manual/extended-reading/performance.en.md    |  2 +-
 .../manual/extended-reading/performance.zh.md    |  2 +-
 8 files changed, 17 insertions(+), 15 deletions(-)
 rename s2-site/docs/manual/{advanced => extended-reading}/layout/pivot.en.md (100%)
 rename s2-site/docs/manual/{advanced => extended-reading}/layout/pivot.zh.md (100%)
 rename s2-site/docs/manual/{advanced => extended-reading}/layout/table.en.md (100%)
 rename s2-site/docs/manual/{advanced => extended-reading}/layout/table.zh.md (100%)

diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 4a9252de7d..19afec32b4 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -146,14 +146,6 @@ export default defineConfig({
         },
         order: 4,
       },
-      {
-        slug: 'manual/advanced/layout',
-        title: {
-          zh: '布局',
-          en: 'Layout',
-        },
-        order: 3,
-      },
       {
         slug: 'manual/advanced/custom',
         title: {
@@ -202,6 +194,14 @@ export default defineConfig({
         },
         order: 1,
       },
+      {
+        slug: 'manual/extended-reading/layout',
+        title: {
+          zh: '布局流程',
+          en: 'Layout',
+        },
+        order: 2,
+      },
     ],
     tutorials: [
       {
diff --git a/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
index 2d6a6df5e9..c9669110dd 100644
--- a/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
+++ b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
@@ -151,7 +151,9 @@ lodash.set(indexesData, dataPath, currentData);
 
 接下来是按照数据结构，分别生成行列的树状结构。我们知道，存储明细数据的 Meta 结构一般有三种：扁平数组、图、树，对于表场景查询频率非常高，透视表本身的展现形式也表达了一种树形结构，因此我们选择了构建树形结构来实现 Meta。
 
-下面，我们以行树结构为例，生成的 Map 结构是：<br/>![rowPivotMeta](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BScNTbO2TrIAAAAAAAAAAAAADmJ7AQ/original)
+下面，我们以行树结构为例，生成的 Map 结构是：<br/>
+
+![rowPivotMeta](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BScNTbO2TrIAAAAAAAAAAAAADmJ7AQ/original)
 
 ## 获取数据
 
@@ -176,15 +178,15 @@ const colDimensionValues = transformDimensionsValues(query, ['type', 'sub_type',
 
 ```ts
 const path = getDataPath({ rowDimensionValues, colDimensionValues });
-const rowData = lodash.get(indexesData, path);
+const rawData = lodash.get(indexesData, path);
 ```
 
-在拿到数据后，我们需要为原始数据增加 `$$extra$$` 等信息，用于标识所选择的具体是哪个维度，因此，内部使用了 Proxy 对 rowData 进行包裹，对其行为进行增强。
+在拿到数据后，我们需要为原始数据增加 `$$extra$$` 等信息，用于标识所选择的具体是哪个维度，因此，内部使用了 [CellData](https://github.com/antvis/S2/blob/next/packages/s2-core/src/data-set/cell-data.ts) 类对 rawData 进行包裹，对其行为进行增强。
 
 ```ts
-const data=new Proxy(rowData,handler);
+const data = CellData.getCellData(rawData, query[EXTRA_FIELD]);
 
-console.log({...data}); //{ "price": 4,"province": "浙江省","city": "绍兴市","type": "家具","sub_type": "沙发", "$$extra$$": "price", "$$value$$": 4 }
+console.log(data); //{ raw: rawData, extraField: "xxx" }
 ```
 
 ### 获取多个数据
diff --git a/s2-site/docs/manual/advanced/layout/pivot.en.md b/s2-site/docs/manual/extended-reading/layout/pivot.en.md
similarity index 100%
rename from s2-site/docs/manual/advanced/layout/pivot.en.md
rename to s2-site/docs/manual/extended-reading/layout/pivot.en.md
diff --git a/s2-site/docs/manual/advanced/layout/pivot.zh.md b/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
similarity index 100%
rename from s2-site/docs/manual/advanced/layout/pivot.zh.md
rename to s2-site/docs/manual/extended-reading/layout/pivot.zh.md
diff --git a/s2-site/docs/manual/advanced/layout/table.en.md b/s2-site/docs/manual/extended-reading/layout/table.en.md
similarity index 100%
rename from s2-site/docs/manual/advanced/layout/table.en.md
rename to s2-site/docs/manual/extended-reading/layout/table.en.md
diff --git a/s2-site/docs/manual/advanced/layout/table.zh.md b/s2-site/docs/manual/extended-reading/layout/table.zh.md
similarity index 100%
rename from s2-site/docs/manual/advanced/layout/table.zh.md
rename to s2-site/docs/manual/extended-reading/layout/table.zh.md
diff --git a/s2-site/docs/manual/extended-reading/performance.en.md b/s2-site/docs/manual/extended-reading/performance.en.md
index 1bcf4cf931..652ca4d7d1 100644
--- a/s2-site/docs/manual/extended-reading/performance.en.md
+++ b/s2-site/docs/manual/extended-reading/performance.en.md
@@ -1,6 +1,6 @@
 ---
 title: Performance
-order: 2
+order: 3
 tag: Updated
 ---
 
diff --git a/s2-site/docs/manual/extended-reading/performance.zh.md b/s2-site/docs/manual/extended-reading/performance.zh.md
index 7d40fd4e21..43c54fb0c3 100644
--- a/s2-site/docs/manual/extended-reading/performance.zh.md
+++ b/s2-site/docs/manual/extended-reading/performance.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 性能介绍
-order: 2
+order: 3
 tag: Updated
 ---
 

From 9290095d390f1a44ab9077e18890685297409cba Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Wed, 31 Jan 2024 18:25:18 +0800
Subject: [PATCH 46/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E8=A1=A8?=
 =?UTF-8?q?=E5=A4=B4,=20=E8=87=AA=E5=AE=9A=E4=B9=89=20icon=20=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=20&=20=E4=BF=AE=E5=A4=8D=E5=9C=A8=E7=BA=BF=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=E6=89=93=E4=B8=8D=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .markdownlint.json                            |   1 +
 .../s2-core/src/common/interface/basic.ts     |   2 +-
 s2-site/.dumi/pages/playground.en.tsx         |   3 +
 s2-site/.dumi/pages/playground.zh.tsx         |  16 +
 s2-site/.dumirc.ts                            |  60 ++-
 s2-site/docs/common/header.zh.md              |   6 +-
 .../advanced/analysis/editable-mode.zh.md     |  14 +-
 .../manual/advanced/analysis/header.en.md     |   5 +
 .../manual/advanced/analysis/header.zh.md     |  64 +++
 .../manual/advanced/analysis/strategy.en.md   |  11 +-
 .../manual/advanced/analysis/strategy.zh.md   |   1 +
 .../custom/custom-collapse-nodes.zh.md        |   9 +-
 .../manual/advanced/custom/custom-icon.en.md  |   2 +-
 .../manual/advanced/custom/custom-icon.zh.md  |  66 ++-
 s2-site/docs/manual/basic/tooltip.zh.md       |  15 +-
 s2-site/docs/manual/migration-v2.zh.md        | 399 +++++++++++++++++-
 ...cell-icon.tsx => custom-data-cell-icon.ts} |   0
 .../custom-icon/demo/custom-svg-icon.ts       |   8 +-
 .../custom-icon/demo/display-condition.ts     |  72 ++++
 .../custom/custom-icon/demo/meta.json         |  14 +-
 .../react-component/header/demo/meta.json     |   2 +-
 .../tooltip/demo/custom-operation.tsx         |   2 +
 .../tooltip/demo/operation.tsx                |   4 +-
 s2-site/package.json                          |   2 +-
 24 files changed, 700 insertions(+), 78 deletions(-)
 create mode 100644 s2-site/.dumi/pages/playground.en.tsx
 create mode 100644 s2-site/.dumi/pages/playground.zh.tsx
 create mode 100644 s2-site/docs/manual/advanced/analysis/header.en.md
 create mode 100644 s2-site/docs/manual/advanced/analysis/header.zh.md
 rename s2-site/examples/custom/custom-icon/demo/{custom-data-cell-icon.tsx => custom-data-cell-icon.ts} (100%)
 create mode 100644 s2-site/examples/custom/custom-icon/demo/display-condition.ts

diff --git a/.markdownlint.json b/.markdownlint.json
index b7a690510e..9431a3a547 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -9,6 +9,7 @@
   "link-fragments": false,
   "code-block-style": false,
   "no-bare-urls": false,
+  "ol-prefix": false,
   "MD003": {
     "style": "atx"
   },
diff --git a/packages/s2-core/src/common/interface/basic.ts b/packages/s2-core/src/common/interface/basic.ts
index 5480d9511b..4e306dec79 100644
--- a/packages/s2-core/src/common/interface/basic.ts
+++ b/packages/s2-core/src/common/interface/basic.ts
@@ -337,7 +337,7 @@ export interface HeaderActionIconBaseOptions {
    * 是否展示, 可根据当前单元格信息动态判断
    * @example displayCondition: (meta, iconName) => !meta.isTotals
    */
-  displayCondition?: (mete: Node, iconName: string) => boolean;
+  displayCondition?: (meta: Node, iconName: string) => boolean;
 
   /**
    * 点击回调函数
diff --git a/s2-site/.dumi/pages/playground.en.tsx b/s2-site/.dumi/pages/playground.en.tsx
new file mode 100644
index 0000000000..46b5455d1e
--- /dev/null
+++ b/s2-site/.dumi/pages/playground.en.tsx
@@ -0,0 +1,3 @@
+import Playground from './playground.zh';
+
+export default Playground;
diff --git a/s2-site/.dumi/pages/playground.zh.tsx b/s2-site/.dumi/pages/playground.zh.tsx
new file mode 100644
index 0000000000..bd0cb0681d
--- /dev/null
+++ b/s2-site/.dumi/pages/playground.zh.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Page from '../../playground/layouts';
+import { Header } from '@antv/dumi-theme-antv/dist/slots/Header';
+import { Footer } from '@antv/dumi-theme-antv/dist/slots/Footer';
+
+const Playground: React.FC = () => {
+  return (
+    <>
+      <Header />
+      <Page />
+      <Footer />
+    </>
+  );
+};
+
+export default Playground;
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 4a9252de7d..968cf441ef 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -31,7 +31,7 @@ export default defineConfig({
     showLanguageSwitcher: true, // 是否显示官网语言切换
     showWxQrcode: true, // 是否显示头部菜单的微信公众号
     showChartResize: true, // 是否在 demo 页展示图表视图切换
-    showAPIDoc: true, // 是否在 demo 页展示API文档
+    showAPIDoc: true, // 是否在 demo 页展示 API 文档
     es5: false,
     versions: {
       // 历史版本以及切换下拉菜单
@@ -102,7 +102,7 @@ export default defineConfig({
         slug: 'api/general',
         title: {
           zh: '基础配置项',
-          en: 'Common configuration',
+          en: 'Common Configuration',
         },
         order: 0,
       },
@@ -110,7 +110,7 @@ export default defineConfig({
         slug: 'api/basic-class',
         title: {
           zh: '基础类',
-          en: 'Basic class',
+          en: 'Basic Class',
         },
         order: 1,
       },
@@ -126,7 +126,7 @@ export default defineConfig({
         slug: 'manual/basic',
         title: {
           zh: '基础教程',
-          en: 'Basic tutorial',
+          en: 'Basic Tutorial',
         },
         order: 3,
       },
@@ -134,7 +134,7 @@ export default defineConfig({
         slug: 'manual/basic/sheet-type',
         title: {
           zh: '表形态',
-          en: 'Sheet type',
+          en: 'Sheet Type',
         },
         order: 1,
       },
@@ -142,7 +142,7 @@ export default defineConfig({
         slug: 'manual/advanced',
         title: {
           zh: '进阶教程',
-          en: 'Advanced tutorial',
+          en: 'Advanced Tutorial',
         },
         order: 4,
       },
@@ -166,7 +166,7 @@ export default defineConfig({
         slug: 'manual/advanced/interaction',
         title: {
           zh: '交互',
-          en: 'interaction',
+          en: 'Interaction',
         },
         order: 5,
       },
@@ -174,7 +174,7 @@ export default defineConfig({
         slug: 'manual/advanced/analysis',
         title: {
           zh: '分析组件',
-          en: 'Analyze component',
+          en: 'Analyze Component',
         },
         order: 6,
       },
@@ -190,7 +190,7 @@ export default defineConfig({
         slug: 'manual/extended-reading',
         title: {
           zh: '扩展阅读',
-          en: 'extended-reading',
+          en: 'Extended Reading',
         },
         order: 6,
       },
@@ -341,6 +341,14 @@ export default defineConfig({
           },
           link: `/manual/migration-v2`,
         },
+        {
+          text: {
+            zh: '查看 1.x 官网',
+            en: 'View 1.x Website',
+          },
+          link: `https://s2-v1.antv.antgroup.com`,
+          type: 'primary',
+        },
         // 右上角有图表示例的入口, 2.0 过渡期间透出 [升级指南]
         // {
         //   text: {
@@ -363,27 +371,39 @@ export default defineConfig({
     news: [
       {
         type: {
-          zh: 'S2 2.0',
-          en: 'S2 2.0',
+          zh: '初心 · 出新 AntV 2023 年度发布',
+          en: 'AntV 2023',
         },
         title: {
-          zh: 'S2 2.0 版本开始内测啦! 欢迎尝鲜使用.',
-          en: 'S2 2.0 is in beta! Welcome to use.',
+          zh: 'S2 2.0 表格看数新纪元',
+          en: 'S2 2.0 Next Version',
+        },
+        date: '2023.11.22',
+        link: 'https://www.yuque.com/antv/blog/1122_7_s2',
+      },
+      {
+        type: {
+          zh: 'S2 Next',
+          en: 'S2 Next',
         },
-        date: '2023.12.06',
+        title: {
+          zh: '2.0 版本开始内测啦! 欢迎尝鲜使用.',
+          en: '2.0 is in beta! Welcome to use.',
+        },
+        date: '2024.1.31',
         link: 'https://github.com/antvis/S2/issues/2454',
       },
       {
         type: {
-          zh: '初心 · 出新 AntV 2023 年度发布',
-          en: 'AntV 2023',
+          zh: 'S2 1.x',
+          en: 'S2 1.x',
         },
         title: {
-          zh: 'S2 2.0 表格看数新纪元',
-          en: 'S2 2.0 Next Version',
+          zh: '原 v1 文档已迁移至 https://s2-v1.antv.antgroup.com',
+          en: 'S2 2.0 is in beta! Welcome to use.',
         },
-        date: '2023.11.22',
-        link: 'https://www.yuque.com/antv/blog/1122_7_s2',
+        date: '2024.1.31',
+        link: 'https://s2-v1.antv.antgroup.com',
       },
     ],
     /** 首页特性介绍 */
diff --git a/s2-site/docs/common/header.zh.md b/s2-site/docs/common/header.zh.md
index 7dd6b93c0c..d051fd80b6 100644
--- a/s2-site/docs/common/header.zh.md
+++ b/s2-site/docs/common/header.zh.md
@@ -14,6 +14,6 @@ order: 0
 | className       | 表头类名             | `string`               | -      |      |
 | style           | 表头样式             | `React.CSSProperties`  | -      |      |
 | extra           | 自定义表头右侧操作区   |  `React.ReactNode`         | -       |      |
-| advancedSort | 配置高级排序         | [AdvancedSortCfgProps](/docs/api/components/advanced-sort) | `{open: false}` |      |
-| export       | 配置导出             | [ExportCfgProps](/docs/api/components/export)  | `{open: false}` |      |
-| switcher       | 配置维度切换             | [SwitcherCfgProps](/docs/api/components/switcher#switchercfgprops)  | `{open: false}` |      |
+| advancedSort | 高级排序         | [AdvancedSortCfgProps](/docs/api/components/advanced-sort) | `{ open: false }` |      |
+| export       | 导出             | [ExportCfgProps](/docs/api/components/export)  | `{ open: false }` |      |
+| switcher       | 维度切换             | [SwitcherCfgProps](/docs/api/components/switcher#switchercfgprops)  | `{ open: false }` |      |
diff --git a/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md b/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md
index 0bea452643..fc9dd90aa0 100644
--- a/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md
@@ -11,10 +11,6 @@ order: 3
 
 ## 快速上手
 
-```html
-<div id="container"></div>
-```
-
 <details>
   <summary>查看数据</summary>
 
@@ -123,7 +119,7 @@ order: 3
 
 </details>
 
-```typescript
+```tsx
 import React from "react";
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
@@ -160,12 +156,18 @@ const s2Options = {
 };
 
 const App = () => {
+  // 编辑完成
+  const onDataCellEditEnd = (meta) => {
+    console.log('onDataCellEditEnd', meta);
+  };
+
   return (
     <SheetComponent
       sheetType="editable"
       dataCfg={s2DataCfg}
       options={s2Options}
-    />,
+      onDataCellEditEnd={onDataCellEditEnd}
+    />
   )
 }
 ```
diff --git a/s2-site/docs/manual/advanced/analysis/header.en.md b/s2-site/docs/manual/advanced/analysis/header.en.md
new file mode 100644
index 0000000000..ea5b1f26bb
--- /dev/null
+++ b/s2-site/docs/manual/advanced/analysis/header.en.md
@@ -0,0 +1,5 @@
+---
+title: Header
+order: 2
+tag: Updated
+---
diff --git a/s2-site/docs/manual/advanced/analysis/header.zh.md b/s2-site/docs/manual/advanced/analysis/header.zh.md
new file mode 100644
index 0000000000..855ce8672d
--- /dev/null
+++ b/s2-site/docs/manual/advanced/analysis/header.zh.md
@@ -0,0 +1,64 @@
+---
+title: 表头
+order: 2
+tag: Updated
+---
+
+<Badge>@antv/s2-react</Badge>
+
+表头组件基于 `@antv/s2` 和 `antd` 进行封装，内置了 `标题`, `描述`, `行列切换`, `高级排序`, `导出` 等能力。
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Pui0SaMs910AAAAAAAAAAAAADmJ7AQ/original" width="600" alt="header"/>
+
+## 快速上手
+
+```tsx
+import React from 'react'
+import { SheetComponent } from '@antv/s2-react'
+import { Button } from 'antd'
+
+const App = () => {
+  const [dataCfg, setDataCfg] = React.useState(s2DataConfig);
+  const [sortParams, setSortParams] = React.useState([]);
+
+  const header =  {
+    title: '表头标题',
+    description: '表头描述',
+    export: { open: true },
+    advancedSort: {
+      open: true,
+      sortParams,
+      onSortConfirm: (ruleValues, sortParams) => {
+        setDataCfg({ ...dataCfg, sortParams });
+        setSortParams(sortParams);
+      },
+    },
+    switcher: { open: true },
+    extra: (
+      <Button size={'small'} style={{ verticalAlign: 'top' }}>
+        自定义按钮
+      </Button>
+    ),
+  };
+
+  return (
+    <SheetComponent
+      dataCfg={dataCfg}
+      options={s2Options}
+      header={header}
+      adaptive={false}
+    />
+  );
+};
+
+```
+
+## 效果
+
+[查看示例](/examples/react-component/header#default)
+
+<Playground path='/react-component/header/demo/default.tsx' rid='header'></playground>
+
+## API
+
+<embed src="@/docs/common/header.zh.md"></embed>
diff --git a/s2-site/docs/manual/advanced/analysis/strategy.en.md b/s2-site/docs/manual/advanced/analysis/strategy.en.md
index e15062b2fb..9c64817e80 100644
--- a/s2-site/docs/manual/advanced/analysis/strategy.en.md
+++ b/s2-site/docs/manual/advanced/analysis/strategy.en.md
@@ -1,6 +1,7 @@
 ---
 title: Strategy Sheet
 order: 9
+tag: Updated
 ---
 
 In order to meet more analysis scenarios, S2 provides an out-of-the-box scenario table component - trend analysis table. With it, you can easily implement a scene table that displays multiple indicators in a cell.
@@ -28,11 +29,11 @@ The trend analysis table component uses various capabilities provided by S2 for
 <details><summary>check the details</summary><pre> <code class="language-js">const&#x26;nbsp;s2Options&#x26;nbsp;=&#x26;nbsp;{
 &#x26;nbsp;&#x26;nbsp;width:&#x26;nbsp;600,
 &#x26;nbsp;&#x26;nbsp;height:&#x26;nbsp;480,
-&#x26;nbsp;&#x26;nbsp;//&#x26;nbsp;角头文本
+&#x26;nbsp;&#x26;nbsp;//&#x26;nbsp; 角头文本
 &#x26;nbsp;&#x26;nbsp;cornerText:&#x26;nbsp;'指标层级',
-&#x26;nbsp;&#x26;nbsp;//&#x26;nbsp;条件格式
+&#x26;nbsp;&#x26;nbsp;//&#x26;nbsp; 条件格式
 &#x26;nbsp;&#x26;nbsp;conditions:&#x26;nbsp;{
-&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;//&#x26;nbsp;同环比数值映射规则
+&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;//&#x26;nbsp; 同环比数值映射规则
 &#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;text:&#x26;nbsp;[
 &#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;{
 &#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;field:&#x26;nbsp;'number',
@@ -57,7 +58,7 @@ The trend analysis table component uses various capabilities provided by S2 for
 &#x26;nbsp;&#x26;nbsp;style:&#x26;nbsp;{
 &#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;dataCell:&#x26;nbsp;{
 &#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;valuesCfg:&#x26;nbsp;{
-&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;//&#x26;nbsp;原始数据字段，用于原始数据导出和&#x26;nbsp;tooltip&#x26;nbsp;展示
+&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;//&#x26;nbsp; 原始数据字段，用于原始数据导出和&#x26;nbsp;tooltip&#x26;nbsp; 展示
 &#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;originalValueField:&#x26;nbsp;'originalValues',
 &#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;},
 &#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;},
@@ -163,7 +164,7 @@ const s2DataConfig = {
 
 ## Tooltips
 
-The `Tooltip` of the trend analysis table uses the [customization capabilities](/docs/manual/basic/tooltip#%E8%87%AA%E5%AE%9A%E4%B9%89-tooltip-%E5%86%85%E5%AE%B9) provided by `S2` to [customize](https://github.com/antvis/S2/blob/f35ff01400384cd2f3d84705e9daf75fc11b0149/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx#L105) the`行头(row)` ,`列头(col)` and`数值(data)` , and can be imported separately in the `@antv/s2-react` package
+The `Tooltip` of the trend analysis table uses the [customization capabilities](/docs/manual/basic/tooltip#%E8%87%AA%E5%AE%9A%E4%B9%89-tooltip-%E5%86%85%E5%AE%B9) provided by `S2` to [customize](https://github.com/antvis/S2/blob/f35ff01400384cd2f3d84705e9daf75fc11b0149/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx#L105) the`行头 (row)` ,`列头 (col)` and`数值 (data)` , and can be imported separately in the `@antv/s2-react` package
 
 | Configuration item name   | illustrate                             | type                            | Defaults                                                   | required |
 | ------------------------- | -------------------------------------- | ------------------------------- | ---------------------------------------------------------- | -------- |
diff --git a/s2-site/docs/manual/advanced/analysis/strategy.zh.md b/s2-site/docs/manual/advanced/analysis/strategy.zh.md
index 42c0641e64..56ae9c0ac7 100644
--- a/s2-site/docs/manual/advanced/analysis/strategy.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/strategy.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 趋势分析表组件
 order: 9
+tag: Updated
 ---
 
 <Badge>@antv/s2-react</Badge>
diff --git a/s2-site/docs/manual/advanced/custom/custom-collapse-nodes.zh.md b/s2-site/docs/manual/advanced/custom/custom-collapse-nodes.zh.md
index c620a61d76..fcd07a2895 100644
--- a/s2-site/docs/manual/advanced/custom/custom-collapse-nodes.zh.md
+++ b/s2-site/docs/manual/advanced/custom/custom-collapse-nodes.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 自定义折叠/展开节点
 order: 7
+tag: New
 ---
 
 S2 支持在树状结构下，配置折叠/展开的节点，默认**展开所有节点**.
@@ -31,7 +32,7 @@ const s2Options = {
 
 ## 折叠指定节点
 
-配置 `collapseFields`, 支持 `维值 id` 和 `维度 field` 两种方式，即可以是 `root[&]浙江省` 和 `city`
+配置 `collapseFields`, 支持 `维值 id` 和 `维度 field` 两种方式，即可以是 `root[&] 浙江省` 和 `city`
 
 ```ts
 const s2Options = {
@@ -45,13 +46,13 @@ const s2Options = {
 
 ### 根据节点对应维值 id
 
-指定 `id` 可以折叠指定节点，如配置为 `root[&]浙江省`, 那么 `浙江省` 下所有节点都会被折叠
+指定 `id` 可以折叠指定节点，如配置为 `root[&] 浙江省`, 那么 `浙江省` 下所有节点都会被折叠
 
 ```ts
 const s2Options = {
   style: {
     rowCell: {
-      collapseFields: { 
+      collapseFields: {
         'root[& 浙江省': true
       },
     },
@@ -79,7 +80,7 @@ const s2DataConfig = {
 const s2Options = {
   style: {
     rowCell: {
-      collapseFields: { 
+      collapseFields: {
         province: false,
         city: true
       }
diff --git a/s2-site/docs/manual/advanced/custom/custom-icon.en.md b/s2-site/docs/manual/advanced/custom/custom-icon.en.md
index ed325cbd1d..c6dc25f13b 100644
--- a/s2-site/docs/manual/advanced/custom/custom-icon.en.md
+++ b/s2-site/docs/manual/advanced/custom/custom-icon.en.md
@@ -91,4 +91,4 @@ const s2Options = {
 }
 ```
 
-<Playground path="custom/custom-icon/demo/custom-data-cell-icon.tsx" rid="customDataCellIcon" height="400"></Playground>
+<Playground path="custom/custom-icon/demo/custom-data-cell-icon.ts" rid="custom-data-cell-icon" height="400"></Playground>
diff --git a/s2-site/docs/manual/advanced/custom/custom-icon.zh.md b/s2-site/docs/manual/advanced/custom/custom-icon.zh.md
index 08b439f511..e1195580b1 100644
--- a/s2-site/docs/manual/advanced/custom/custom-icon.zh.md
+++ b/s2-site/docs/manual/advanced/custom/custom-icon.zh.md
@@ -1,13 +1,29 @@
 ---
 title: 自定义 Icon
 order: 3
+tag: Updated
 ---
 
-默认情况下，`S2` 会在指标行头（指标挂行头）或列头 （指标挂列头）展示默认的组内排序操作 icon，如下图：
+默认情况下，表格只会展示排序 icon, 但在很多情况下，会需要展示其他的操作 `icon`，例如：`筛选`、`下钻`、 `提示信息` 等，`S2` 提供了 `headerActionIcons` 参数让你可以通过简单的配置项快速实现行头、列头、角头的操作 `icon` 自定义。
 
-<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qqLAS5Q3obUAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="preview" />
+<Playground path='custom/custom-icon/demo/custom-header-action-icon.tsx' rid='custom-header-action-icon' height='400'></playground>
 
-但在很多情况下，会需要展示其他的操作 `icon`，例如：筛选、下钻等，`S2` 提供了 `headerActionIcons` 参数让你可以通过简单的配置项快速实现行头、列头、角头的操作 `icon` 自定义。
+### 关闭默认排序 icon
+
+表格的数值默认会渲染排序 icon, 可以配置 `showDefaultHeaderActionIcon` 关闭。
+
+```ts
+const s2Options = {
+  showDefaultHeaderActionIcon: false
+}
+```
+
+### 自定义行列头 icon
+
+#### 1. 使用内置 icon
+
+- `icons`: 内置 icon 或者自定义注册的 icon 名称。
+- `belongsCell`:  当前一组 icon 展示在哪个单元格内。
 
 ```ts
 const s2Options = {
@@ -20,13 +36,18 @@ const s2Options = {
 }
 ```
 
-自定义操作 `icon` 默认会展示在行列头的右侧，如果需要展示在左侧，可以使用对象的形式，如下：
+<embed src="@/docs/common/icon.zh.md"></embed>​
 
-```ts
+#### 2. 自定义展示位置
+
+自定义操作 `icon` 默认会展示在**行列头文字的右侧**，如果需要展示在左侧，可以使用对象的形式，支持更丰富的配置：
+
+```diff
 const s2Options = {
   headerActionIcons: [
     {
-      icons: [{ name: 'SortDown', position: 'left' }],
+-     icons: ['SortDown'],
++     icons: [{ name: 'SortDown', position: 'left' }],
       belongsCell: 'colCell',
     },
   ],
@@ -34,7 +55,9 @@ const s2Options = {
 
 ```
 
-1、如果内置 `icon` 不满足，可以配置 `customSVGIcons` 参数额外注册自己的 `icon`, 自定义 `icon` 同时适用于**主题配置**，意味着你也可以调整它的大小，颜色，具体请查看 [主题配置](/docs/manual/basic/theme) 章节。
+#### 3. 使用自定义 icon
+
+如果内置 `icon` 不满足诉求，可以配置 `customSVGIcons` 来额外注册自己的 `icon`, 自定义 `icon` 同时适用于**主题配置**，意味着你也可以调整它的大小，颜色，具体请查看 [主题配置](/docs/manual/basic/theme) 章节。
 
 ```ts
 const s2Options = {
@@ -47,7 +70,7 @@ const s2Options = {
 }
 ```
 
-或者覆盖默认 `icon`, 例如自定义树状表格收起展开 `icon`
+也可以覆盖内置 `icon`, 例如自定义树状表格收起展开 `icon`
 
 ``` ts
 const s2Options = {
@@ -65,25 +88,20 @@ const s2Options = {
 
 ```
 
-<embed src="@/docs/common/icon.zh.md"></embed>​
-
-2、配置 `headerActionIcons` 参数
-​
-⚠️ 注：注册自定义行列头操作图标需要先将 `options` 的 `showDefaultHeaderActionIcon` 设置为 `false`, 否则默认展示在指标列头的排序 icon 并不会消失
+#### 自定义展示逻辑
 
-### 配置参数
+- `defaultHide`: 默认隐藏，鼠标在对应单元格悬停时才展示。
+- `displayCondition`: 动态控制 icon 是否渲染。
 
-<embed src="@/docs/common/header-action-icon.zh.md"></embed>
-
-### 自定义行列头 icon 示例
-
-<Playground path='custom/custom-icon/demo/custom-header-action-icon.tsx' rid='container' height='400'></playground>
+<Playground path='custom/custom-icon/demo/display-condition.ts' rid='display-condition' height='400'></playground
 
-### 自定义单元格 icon 示例
+### 自定义数值单元格 icon
 
-> 单元格标记详情，可查看 [字段标记](/docs/manual/basic/conditions) 章节
+:::info{title="提示"}
+对于数值单元格，我们可以使用通用的 `字段标记` 能力来进行自定义 icon 的展示，详情请查看 [字段标记](/docs/manual/basic/conditions) 章节。
+:::
 
-```javascript
+```ts | {15}
 const s2Options = {
   customSVGIcons: [
     {
@@ -108,4 +126,6 @@ const s2Options = {
 }
 ```
 
-<Playground path='custom/custom-icon/demo/custom-data-cell-icon.tsx' rid='customDataCellIcon' height='400'></playground>
+<Playground path='custom/custom-icon/demo/custom-data-cell-icon.ts' rid='custom-data-cell-icon' height='400'></playground>
+
+<embed src="@/docs/common/header-action-icon.zh.md"></embed>
diff --git a/s2-site/docs/manual/basic/tooltip.zh.md b/s2-site/docs/manual/basic/tooltip.zh.md
index 1921521f9f..c9e7f706a1 100644
--- a/s2-site/docs/manual/basic/tooltip.zh.md
+++ b/s2-site/docs/manual/basic/tooltip.zh.md
@@ -261,6 +261,17 @@ s2.showTooltip({
 除了默认提供的操作项，还可以配置 `operation.menu` 自定义操作项，支持嵌套，也可以监听各自的 `onClick` 点击事件，可以拿到当前 `tooltip`
 对应的菜单项信息以及 [单元格信息](/docs/api/basic-class/base-cell).
 
+:::info{title="注意"}
+如果使用的是 `@antv/s2-react`, 支持透传 Ant Design [Menu 组件 API](https://ant-design.antgroup.com/components/menu-cn#api)
+
+```ts
+menu: {
+  mode: 'vertical'
+}
+```
+
+:::
+
 ```ts
 const s2Options = {
   tooltip: {
@@ -278,14 +289,14 @@ const s2Options = {
               console.log('操作 1 点击');
               console.log('tooltip 对应的单元格：', info, cell)
             },
-            children: [ {
+            children: [{
               key: 'custom-a-a',
               label: '操作 1-1',
               icon: 'Trend',
               onClick: (info, cell) => {
                 console.log('操作 1-1 点击', info, cell);
               },
-            } ]
+            }]
           },
           {
             key: 'custom-b',
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index fcc1495b30..af1cef00c5 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -28,24 +28,411 @@ tag: New
 - `@antv/s2@next` 对应 `2.x` 版本
 - `@antv/s2@latest` 对应 `1.x` 版本
 
-在 `@antv/s2@next` 版本稳定后，**`latest` 将默认指向 `2.x` 版本**。
+**在 `@antv/s2@next` 版本稳定后，`latest` 将默认指向 `2.x` 版本。**
 
 :::
 
+## v1 版本维护期
+
+目前 `v1` 版本会继续维护，针对 `BUG` 发布 `Patch` 版本修复，但不再接收新的 `Feature Request` 和 `Pull Request`，截止日期为 `2024` 年年底。
+
+## 新增功能
+
+官网目录标记为 <Badge type="success">New</Badge> 和 <Badge>Updated</Badge> 则表示新增功能，也可以查看官网语雀博客 [S2 2.0 表格看数新纪元](https://www.yuque.com/antv/blog/1122_7_s2)
+
 ## 不兼容的变化
 
-TODO:
+### `@antv/s2`
 
-### 底层渲染引擎升级为 `AntV/G` 5.0
+#### 底层渲染引擎升级为 `AntV/G 5.0`
 
-TODO:
+表格绘制引擎升级到 [`G 5.0`](https://g.antv.antgroup.com/) 大版本，和 `AntV` [其他技术栈](https://antv.antgroup.com/) 保持同步，渲染方式升级为异步。
+
+```diff
+- s2.render()
++ await s2.render()
+```
+
+如果在你的业务场景中，有使用 `G` 的一些自定义 `shape`, 如自定义矩形，图片等场景，请注意替换，具体请查看 G 的 [官网文档](https://g.antv.antgroup.com/api/basic/image).
+
+```diff
++ import { Image } from '@antv/g';
+
++ this.appendChild(new Image({ style: {} }))
+
+- this.addShape('image', { attrs: {} });
+```
+
+其他 [图形](https://g.antv.antgroup.com/api/basic/concept) 同理，不再过多赘述。
+
+#### S2 和 G 的配置分离
+
+在 `1.x` 中，我们会将 `S2Options` 中的 `supportsCSSTransform` 和 `devicePixelRatio` 等熟悉透传给 `G`
+
+在 `2.x` 中：
+
+- 移除 `devicePixelRatio` 和 `supportsCSSTransform (supportCSSTransform)`
+- 新增 `transformCanvasConfig` 支持透传 `G` 的配置，以及注册插件，具体请查阅 [注册 AntV/G 插件](/manual/advanced/g-plugins) 相关文档。
+
+```tsx
+const s2Options = {
+  transformCanvasConfig(renderer) {
+    renderer.registerPlugin(new PluginA11y({ enableExtractingText: true }));
+
+    return {
+      supportsCSSTransform: true,
+      devicePixelRatio: 2
+    };
+  },
+}
+```
+
+#### 自定义宽高配置调整
+
+1. `rowCfg/colCfg/cellCfg` 调整为 `rowCell/colCell/dataCell`
+
+```diff
+const s2Options = {
+  style: {
+-   rowCfg: {},
+-   colCfg: {},
+-   cellCfg: {},
+
++   rowCell: {},
++   colCell: {},
++   cellCell: {},
+  }
+}
+```
+
+2. 废弃 `widthByFieldValue`, 新增 `widthByField`
+3. 行列宽高支持动态配置
+
+```diff
+export interface ColCfg {
+  width?: CellCustomWidth;
+- height?: number;
++ height?: number | (cell) => number;
+- widthByFieldValue?: Record<string, number>;
++ widthByField?: Record<string, number>;
+  heightByField?: Record<string, number>;
+}
+```
+
+具体请查看 [自定义单元格宽高](/manual/advanced/custom/cell-size) 相关文档。
+
+#### Tooltip 配置调整
+
+1. `row/col/data/corner` 调整为 `rowCell/colCell/dataCell/cornerCell`
+
+```diff
+const s2Options = {
+  tooltip: {
+-   row: {},
+-   col: {},
+-   data: {},
+-   corner: {},
+
++   rowCell: {},
++   colCell: {},
++   dataCell: {},
++   cornerCell: {},
+  }
+}
+```
+
+2. `showTooltip` 和 `renderTooltip` 调整为 `enable` 和 `render`
+
+```diff
+const s2Options = {
+  tooltip: {
+-   showTooltip: true,
+-   renderTooltip: () => new CustomTooltip(),
+
++   enable: true,
++   render: () => new CustomTooltip(),
+  }
+}
+```
+
+具体请查看 [Tooltip](/manual/basic/tooltip) 相关文档。
+
+#### 复制导出调整
+
+1. 配置收拢到 `interaction.copy` 下，新增 `customTransformer` 自定义转换器。
+
+```diff
+const s2Options = {
+  interaction: {
+-   enableCopy: true,
+-   copyWithHeader: true,
+-   copyWithFormat: true
+
++   copy: {
++     enable: true,
++     withHeader: true,
++     withFormat: true,
++     customTransformer: () => {}
++   },
+  }
+}
+```
+
+2. 废弃 `copyData`, 新增 `asyncGetAllPlainData`, 支持异步获取数据。
+
+```diff
+- const data = copyData(spreadsheet, '\t', false)
+
++ const data = await asyncGetAllPlainData({
++  sheetInstance: s2,
++  split: '\t',
++  formatOptions: false,
+});
+```
+
+具体请查看 [复制与导出](/manual/advanced/interaction/copy) 相关文档。
+
+#### 刷选配置调整
+
+`row/col/data` 调整为 `rowCell/colCell/dataCell`, 所有单元格默认开启刷选。
+
+```diff
+const s2Options = {
+  interaction: {
+-   brushSelection: {
+-     row: false,
+-     col: false,
+-     data: true,
+-   },
+
++   brushSelection: {
++     rowCell: true,
++     colCell: true,
++     dataCell: true,
++   }
+  }
+}
+```
+
+具体请查看 [基础交互](/manual/advanced/interaction/basic) 相关文档。
 
-### xxx
+#### headerActionIcons 配置调整
+
+`iconsNames` 调整为 `icons`, 废弃 `action`, 新增 `onClick` 和 `onHover`
+
+```diff
+const s2Options = {
+  headerActionIcons: [
+    {
+-      iconNames: ['SortDown'],
+-      action: () => {}
+
++      icons: ['SortDown'],
++      onClick: () => {}
++      onHover: () => {}
+    },
+  ],
+}
+```
+
+现在支持配置 `position (icon 相对文本的位置）` 和 `fill （颜色配置）`, 并且支持给单个 icon 配置独立的 `displayCondition` 和 `defaultHide`
+
+```diff
+const s2Options = {
+  headerActionIcons: [
+    {
++     icons: [{
++        name: 'SortDown',
++        position: 'right',
++        fill: '#000',
++        displayCondition: () => {},
++        defaultHide: () => {},
+      }]
+    },
+  ],
+}
+```
+
+具体请查看 [自定义 Icon](/manual/advanced/custom/custom-icon) 相关文档。
+
+#### 树状结构配置调整
+
+1. 行头折叠展开配置调整
+
+废弃 `rowExpandDepth/collapsedRows/hierarchyCollapse`, 使用更表意的 `expandDepth/collapseFields/collapseAll` 代替。
+
+```diff
+const s2Options = {
+  hierarchyType: 'tree',
+  style: {
+-   rowExpandDepth: 0,
+-   collapsedRows: {},
+-   hierarchyCollapse: true,
+
++   rowCell: {
++     expandDepth: 0,
++     collapseFields: {},
++     collapseAll: true
+    }
+  },
+}
+```
+
+2. 树状结构下行头宽度配置调整
+
+废弃 `treeRowsWidth`, 使用 `rowCell.width` 代替。
+
+```diff
+const s2Options = {
+  hierarchyType: 'tree',
+  style: {
+-   treeRowsWidth: 200
++   rowCell: {
++     width: 200,
++   }
+  },
+}
+```
+
+3. `customTree` 和 `customTreeItems` 已废弃
+
+原本自定义树状结构的方式已废弃，现在自定义结构同时支持 `平铺` 和 `树状` 两种模式。
+
+```diff
+const s2Options = {
+-  hierarchyType: 'customTree',
++  hierarchyType: 'tree',
+}
+
+const s2DataConfig = {
+  fields: {
+-    customTreeItems: [
+-      {
+-        key: 'custom-node-1',
+-        title: '自定义节点 A',
+-        description: '自定义节点 A 描述',
+-        children: []
+-      }
+
++    rows: [
++      {
++        field: 'custom-node-1',
++        title: '自定义节点 A',
++        description: '自定义节点 A 描述',
++        children: []
++      }
+    ]
+  }
+}
+```
+
+具体请查看 [自定义行列头分组](/manual/advanced/custom/custom-header) 相关文档。
+
+#### 行列冻结配置调整
+
+透视表和明细表的行列冻结配置统一收拢到 `frozen`
+
+```diff
+const s2Options = {
++   frozenRowHeader: true,
++   frozenFirstRow: true,
++   frozenRowCount: true;
++   frozenColCount: true;
++   frozenTrailingRowCount: true;
++   frozenTrailingColCount: true;
+
++  frozen: {
++    rowHeader: true,
++    firstRow: true,
++    rowCount: true;
++    colCount: true;
++    trailingRowCount: true;
++    trailingColCount: true;
++  }
+}
+```
+
+### `@antv/s2-react`
+
+#### 支持 React 18 和 Ant Design 5.0
+
+`@antv/s2-react` 2.x 版本适配了 `React 18`, 并兼容 `React 16 和 17`, 分析组件升级到了 `antd@v5`.
+
+#### 表头组件配置调整
+
+`exportCfg/advancedSortCfg/switcherCfg` 调整为 `export/advancedSort/switcher`
+
+```diff
+const header = {
+-  exportCfg: {},
+-  advancedSortCfg: {},
+-  switcherCfg: {},
+
++  export: {},
++  advancedSort: {},
++  switcher: {},
+};
+
+<SheetComponent header={header} />
+```
+
+具体请查看 [表头](/manual/advanced/analysis/header) 相关文档。
+
+#### Tooltip 菜单项配置调整
+
+菜单项调整到 `menu` 下，和 Ant Design [Menu 组件 API](https://ant-design.antgroup.com/components/menu-cn#api) 保持一致，同时支持透传 props.
+
+```diff
+ const s2Options = {
+  tooltip: {
+    operation: {
+      onClick: (info, cell) => {},
+-     menus: [
+-       {
+-         key: 'custom-a',
+-         text: '操作 1',
+-         icon: 'Trend',
+-         onClick: (info, cell) => {},
+-         children: [],
+-       }
+-     ],
+
++     menu: {
++       mode: 'vertical',
++       onClick: (info, cell) => {},
++       items: [
++         {
++           key: 'custom-a',
++           label: '操作 1',
++           icon: 'Trend',
++           onClick: (info, cell) => {},
++           children: [],
++         }
++       ],
++     },
+    },
+  },
+};
+
+<SheetComponent options={s2Options} />
+```
+
+具体请查看 [Tooltip](/manual/basic/tooltip) 相关文档。
 
 ## API 调整
 
+### `@antv/s2`
+
+### `@antv/s2-react`
+
+### `@antv/s2-vue`
+
+TODO:
+
+## 未来迭代计划
+
 TODO:
 
 ## 遇到问题
 
-如果您在升级过程中遇到了问题，请到 [GitHub issues](https://github.com/antvis/S2/issues/2454) 或者 [GitHub Discussions](https://github.com/antvis/S2/discussions/1933) 进行反馈。我们会尽快响应和相应改进这篇文档。
+更多新特性和改动请阅读文档，如果您在升级过程中遇到了问题，请到 [GitHub issues](https://github.com/antvis/S2/issues/2454) 或者 [GitHub Discussions](https://github.com/antvis/S2/discussions/1933) 进行反馈。我们会尽快响应和相应改进这篇文档。
diff --git a/s2-site/examples/custom/custom-icon/demo/custom-data-cell-icon.tsx b/s2-site/examples/custom/custom-icon/demo/custom-data-cell-icon.ts
similarity index 100%
rename from s2-site/examples/custom/custom-icon/demo/custom-data-cell-icon.tsx
rename to s2-site/examples/custom/custom-icon/demo/custom-data-cell-icon.ts
diff --git a/s2-site/examples/custom/custom-icon/demo/custom-svg-icon.ts b/s2-site/examples/custom/custom-icon/demo/custom-svg-icon.ts
index 391b40a478..1ca9d9f0f5 100644
--- a/s2-site/examples/custom/custom-icon/demo/custom-svg-icon.ts
+++ b/s2-site/examples/custom/custom-icon/demo/custom-svg-icon.ts
@@ -22,8 +22,14 @@ fetch(
       customSVGIcons: [
         {
           name: 'customKingIcon',
-          // svg 为 url 地址或字符串
+          // 1. 字符串
           // svg: `<?xml version="1.0" encoding="UTF-8"?><svg t="1634603945212" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="558" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M605.61 884.79h-24.26c-21.34 0-38.66 17.32-38.66 38.66 0 21.34 17.32 38.66 38.66 38.66h24.26c21.34 0 38.66-17.32 38.66-38.66 0-21.35-17.32-38.66-38.66-38.66z" fill="#040000" p-id="559"></path><path d="M950.47 419.76c-22.17-15.48-51.17-16.01-73.92-1.33L715.7 522.53 573.09 223.42c-10.95-22.98-33.55-37.43-58.97-37.75h-0.85c-25.09 0-47.67 13.84-59.05 36.29L302.25 521.82 154.9 419.61c-22-15.18-50.71-15.73-73.27-1.46-22.53 14.32-34.23 40.57-29.8 66.9l70.9 421.76c5.33 32.04 32.82 55.3 65.31 55.3h272.43c21.34 0 38.66-17.32 38.66-38.66 0-21.34-17.32-38.66-38.66-38.66H197.44l-64.99-386.62 136.17 94.46a66.14 66.14 0 0 0 54.01 9.79 66.097 66.097 0 0 0 42.81-34.28l147.54-291.11 138.35 290.2c8.21 17.19 23.41 30.03 41.76 35.19 18.37 5.24 38 2.21 53.99-8.1l148.62-96.17-87.74 386.65h-60.1c-21.34 0-38.66 17.32-38.66 38.66 0 21.34 17.32 38.66 38.66 38.66h68.96c31.16 0 57.71-21.22 64.58-51.57l95.72-421.86c5.97-26.39-4.47-53.42-26.65-68.93zM514.74 151.68c28.08 0 50.85-22.76 50.85-50.85s-22.77-50.85-50.85-50.85c-28.09 0-50.85 22.76-50.85 50.85s22.77 50.85 50.85 50.85zM973.15 277.37c-28.08 0-50.85 22.77-50.85 50.85 0 28.09 22.76 50.85 50.85 50.85 28.08 0 50.85-22.76 50.85-50.85 0-28.08-22.77-50.85-50.85-50.85zM101.69 328.22c0-28.08-22.76-50.85-50.85-50.85S0 300.14 0 328.22c0 28.09 22.76 50.85 50.85 50.85s50.84-22.77 50.84-50.85z" fill="#040000" p-id="560"></path></svg>`,
+
+          // import Icon from '/path/to/icon.svg'
+          // 2. 本地文件 (本质上也是字符串)
+          // svg: Icon,
+
+          // 3. 在线链接
           svg: 'https://gw.alipayobjects.com/zos/bmw-prod/f44eb1f5-7cea-45df-875e-76e825a6e0ab.svg',
         },
       ],
diff --git a/s2-site/examples/custom/custom-icon/demo/display-condition.ts b/s2-site/examples/custom/custom-icon/demo/display-condition.ts
new file mode 100644
index 0000000000..a2d21f40ce
--- /dev/null
+++ b/s2-site/examples/custom/custom-icon/demo/display-condition.ts
@@ -0,0 +1,72 @@
+import { PivotSheet, S2Options, S2DataConfig } from '@antv/s2';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
+)
+  .then((res) => res.json())
+  .then(async (res) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
+      fields: {
+        rows: ['province', 'city'],
+        columns: ['type', 'sub_type'],
+        values: ['number'],
+      },
+      meta: res.meta,
+      data: res.data,
+    };
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      showDefaultHeaderActionIcon: false,
+      headerActionIcons: [
+        // 对一组 icon 统一配置展示逻辑
+        {
+          icons: ['SortDown', 'Plus'],
+          belongsCell: 'colCell',
+          // defaultHide: true,
+          // 是否默认隐藏 (鼠标 hover 到对应单元格时才展示)
+          defaultHide(meta, iconName) {
+            return true;
+          },
+          // 根据单元格信息判断是否展示
+          displayCondition(meta, iconName) {
+            return meta.level >= 1;
+          },
+        },
+        // 对单个 icon 独立配置展示逻辑
+        {
+          icons: [
+            {
+              name: 'SortDown',
+              position: 'left',
+              fill: '#396',
+              defaultHide(meta, iconName) {
+                return true;
+              },
+              displayCondition(meta, iconName) {
+                return true;
+              },
+            },
+            {
+              name: 'SortUp',
+              position: 'right',
+              fill: '#06a',
+              defaultHide(meta, iconName) {
+                return true;
+              },
+              displayCondition(meta, iconName) {
+                return meta.isLeaf;
+              },
+            },
+          ],
+          belongsCell: 'rowCell',
+        },
+      ],
+    };
+
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/custom/custom-icon/demo/meta.json b/s2-site/examples/custom/custom-icon/demo/meta.json
index 88dba0eb0a..63a4b6f230 100644
--- a/s2-site/examples/custom/custom-icon/demo/meta.json
+++ b/s2-site/examples/custom/custom-icon/demo/meta.json
@@ -7,7 +7,7 @@
     {
       "filename": "custom-svg-icon.ts",
       "title": {
-        "zh": "自定义SVG图标",
+        "zh": "自定义 SVG 图标",
         "en": "custom svg icon"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%24KQ3JqKkrA/67f074b6-739b-4a61-a5c5-b18488a65797.png"
@@ -21,12 +21,20 @@
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/pBAAuAlwEB/custom.gif"
     },
     {
-      "filename": "custom-data-cell-icon.tsx",
+      "filename": "custom-data-cell-icon.ts",
       "title": {
-        "zh": "自定义单元格图标",
+        "zh": "自定义数值单元格图标",
         "en": "Custom data cell icons"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/5a0Ad8vz3/2689a04f-7965-4e30-be6f-9aaefc007482.png"
+    },
+    {
+      "filename": "display-condition.ts",
+      "title": {
+        "zh": "自定义展示条件",
+        "en": "Custom display condition"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Eb5CSq0nszQAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
diff --git a/s2-site/examples/react-component/header/demo/meta.json b/s2-site/examples/react-component/header/demo/meta.json
index cc2fa3f220..7e7e1f1345 100644
--- a/s2-site/examples/react-component/header/demo/meta.json
+++ b/s2-site/examples/react-component/header/demo/meta.json
@@ -10,7 +10,7 @@
         "zh": "表头组件",
         "en": "Header component"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/dI0e27cdHW/header.gif"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Pui0SaMs910AAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
index 820e5f9267..a8a62d8d93 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx
@@ -13,6 +13,8 @@ fetch(
       tooltip: {
         operation: {
           menu: {
+            // 支持透传 Ant Design <Menu/> 组件 API: https://ant-design.antgroup.com/components/menu-cn#api
+            // mode: 'vertical',
             onClick(info, cell) {
               console.log('菜单项点击: ', info, cell);
             },
diff --git a/s2-site/examples/react-component/tooltip/demo/operation.tsx b/s2-site/examples/react-component/tooltip/demo/operation.tsx
index 081e71108e..1a1e762557 100644
--- a/s2-site/examples/react-component/tooltip/demo/operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/operation.tsx
@@ -13,9 +13,11 @@ fetch(
       height: 480,
       tooltip: {
         operation: {
+          // 内置操作项
           hiddenColumns: true,
-          // 其他配置, 透传 Antd Design <Menu/> 组件 API: https://ant-design.antgroup.com/components/menu-cn#api
           menu: {
+            // 支持透传 Ant Design <Menu/> 组件 API: https://ant-design.antgroup.com/components/menu-cn#api
+            // mode: 'vertical',
             onClick(info, cell) {
               console.log('菜单项点击:', info, cell);
             },
diff --git a/s2-site/package.json b/s2-site/package.json
index 4f20a2f783..6008cbfc7a 100644
--- a/s2-site/package.json
+++ b/s2-site/package.json
@@ -36,7 +36,7 @@
     "@antv/g2": "^5.1.15",
     "@antv/s2": "next",
     "@antv/s2-react": "next",
-    "antd": "^5.13.2",
+    "antd": "^5.13.3",
     "copy-to-clipboard": "^3.3.3",
     "dumi": "^2.2.17",
     "gh-pages": "^6.1.1",

From b07630dc206338403dc168b5a6a2383eb426a6e9 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Wed, 31 Jan 2024 18:31:26 +0800
Subject: [PATCH 47/64] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/manual/migration-v2.zh.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index af1cef00c5..453e71d084 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -334,12 +334,12 @@ const s2DataConfig = {
 
 ```diff
 const s2Options = {
-+   frozenRowHeader: true,
-+   frozenFirstRow: true,
-+   frozenRowCount: true;
-+   frozenColCount: true;
-+   frozenTrailingRowCount: true;
-+   frozenTrailingColCount: true;
+-   frozenRowHeader: true,
+-   frozenFirstRow: true,
+-   frozenRowCount: true;
+-   frozenColCount: true;
+-   frozenTrailingRowCount: true;
+-   frozenTrailingColCount: true;
 
 +  frozen: {
 +    rowHeader: true,
@@ -423,15 +423,15 @@ const header = {
 
 ### `@antv/s2`
 
-### `@antv/s2-react`
+TODO:
 
-### `@antv/s2-vue`
+### `@antv/s2-react`
 
 TODO:
 
 ## 未来迭代计划
 
-TODO:
+TODO: 是否需要？
 
 ## 遇到问题
 

From b5aa6cf58576a29010dff357af4230772221ee9f Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Thu, 1 Feb 2024 11:22:52 +0800
Subject: [PATCH 48/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=B5=81=E7=A8=8B=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/api/general/S2DataConfig.zh.md   |  67 +++++----
 .../extended-reading/data-process/pivot.zh.md |  66 ++++-----
 .../extended-reading/data-process/table.zh.md | 127 ++++++++++--------
 .../extended-reading/layout/pivot.zh.md       |   2 +-
 4 files changed, 139 insertions(+), 123 deletions(-)

diff --git a/s2-site/docs/api/general/S2DataConfig.zh.md b/s2-site/docs/api/general/S2DataConfig.zh.md
index e610fb0fe1..c6bcdf65b6 100644
--- a/s2-site/docs/api/general/S2DataConfig.zh.md
+++ b/s2-site/docs/api/general/S2DataConfig.zh.md
@@ -20,13 +20,13 @@ const s2DataConfig = {
 }
 ```
 
-| 参数 | 说明 | 类型 | 默认值 | 必选  |
-| ------------- | ----------------- | --------- | ----- | --- |
-| data           | 原始数据        | [Data[]](#data) |    |   ✓   |
-| fields         | 维度指标       | [Fields](#fields) |    |   ✓     |
-| meta    | 字段元数据，可配置字段别名和数值格式化 | [Meta[]](#meta)  |  |       |
-| sortParams    | 排序参数配置 | [SortParam[]](#sortparam)  |  |       |
-| filterParams    | 筛选参数配置 | [FilterParam[]](#filterparam)  |  |       |
+| 参数         | 说明                                   | 类型                          | 默认值 | 必选 |
+| ------------ | -------------------------------------- | ----------------------------- | ------ | ---- |
+| data         | 原始数据                               | [RawData](#rawdata)[]         |        | ✓    |
+| fields       | 维度指标                               | [Fields](#fields)             |        | ✓    |
+| meta         | 字段元数据，可配置字段别名和数值格式化 | [Meta](#meta)[]               |        |      |
+| sortParams   | 排序参数配置                           | [SortParam](#sortparam)[]     |        |      |
+| filterParams | 筛选参数配置                           | [FilterParam](#filterparam)[] |        |      |
 
 ### RawData
 
@@ -68,6 +68,10 @@ const data = [
 ];
 ```
 
+#### MiniChartData
+
+<embed src="@/docs/common/mini-chart.zh.md"></embed>
+
 #### MultiData
 
 功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：[趋势分析表](/examples/react-component/sheet#strategy)
@@ -94,40 +98,35 @@ const data = [
 
 功能描述： 配置表格的维度域，即对应行列维度。
 
-| 配置项名称 | 说明     | 类型   | 默认值 | 必选 |
-| ------------- | ----------------- | --------- | ----- | --- |
-| rows             | 行维度 （可自定义行头，[查看示例](/examples/layout/custom-header-group/#custom-pivot-row-header)) | `string[]` \| [CustomTreeNode[]](#customtreenode) | `[]`   |      |
-| columns          | 列维度 （可自定义列头，[查看示例](/examples/layout/custom-header-group/#custom-pivot-col-header)) | `string[]` \| [CustomTreeNode[]](#customtreenode) | `[]`   |      |
-| values           | 指标维度                                  | `string[]`                                        | `[]`   |      |
-| valueInCols      | 指标维度是否在列头                        | `boolean`                                         |
-| customValueOrder | 自定义指标维度在行列头中的层级顺序 （即 `values` 的 顺序，从 `0` 开始） [查看示例](/examples/custom/custom-layout/#custom-value-order) | `number`  | - |      |
+| 配置项名称       | 说明                                                                                                                                   | 类型                                              | 默认值 | 必选 |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------ | ---- |
+| rows             | 行维度 （可自定义行头，[查看示例](/examples/layout/custom-header-group/#custom-pivot-row-header))                                      | `string[]` \| [CustomTreeNode[]](#customtreenode) | `[]`   |      |
+| columns          | 列维度 （可自定义列头，[查看示例](/examples/layout/custom-header-group/#custom-pivot-col-header))                                      | `string[]` \| [CustomTreeNode[]](#customtreenode) | `[]`   |      |
+| values           | 指标维度                                                                                                                               | `string[]`                                        | `[]`   |      |
+| valueInCols      | 指标维度是否在列头                                                                                                                     | `boolean`                                         |
+| customValueOrder | 自定义指标维度在行列头中的层级顺序 （即 `values` 的 顺序，从 `0` 开始） [查看示例](/examples/custom/custom-layout/#custom-value-order) | `number`                                          | -      |      |
 
 ### Meta
 
 功能描述：字段元数据，可配置字段别名和数值格式化。[查看示例](/examples/basic/pivot/#grid)
 
-| 参数 | 说明 | 类型 | 默认值 | 必选  |
-| --| --------| --- | ----- | --- |
-| field  | 字段 id | `string` | |    |
-| name | 字段名称 | `string`|  |   |
-| description | 字段描述，会显示在行头、列头、单元格对应的 tooltip 中 | `string`|  |   |
-| formatter | 格式化 <br/> 单元格、行头和列头支持格式化，角头不支持格式化。只有单元格存在第二个参数。 <br/>数值字段：一般用于格式化数字单位<br/>文本字段：一般用于做字段枚举值的别名<br/> 第二个参数在以下情况会传入：data cell 格式化，复制/导出，tooltip 展示（**且仅在选择多个单元格时，data 类型为数组**） | `(value: unknown, data?: Data \| Data[], meta?: Node \| ViewMeta) => string` | | |
-
-### MiniChartData
-
-<embed src="@/docs/common/mini-chart.zh.md"></embed>
+| 参数        | 说明                                                                                                                                                                                                                                                                                             | 类型                                                                         | 默认值 | 必选 |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- | ------ | ---- |
+| field       | 字段 id                                                                                                                                                                                                                                                                                          | `string`                                                                     |        |      |
+| name        | 字段名称                                                                                                                                                                                                                                                                                         | `string`                                                                     |        |      |
+| description | 字段描述，会显示在行头、列头、单元格对应的 tooltip 中                                                                                                                                                                                                                                            | `string`                                                                     |        |      |
+| formatter   | 格式化 <br/> 单元格、行头和列头支持格式化，角头不支持格式化。只有单元格存在第二个参数。 <br/>数值字段：一般用于格式化数字单位<br/>文本字段：一般用于做字段枚举值的别名<br/> 第二个参数在以下情况会传入：data cell 格式化，复制/导出，tooltip 展示（**且仅在选择多个单元格时，data 类型为数组**） | `(value: unknown, data?: Data \| Data[], meta?: Node \| ViewMeta) => string` |        |      |
 
-### MultiData
+<embed src="@/docs/common/custom/customTreeNode.zh.md"></embed>
 
-功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：[趋势分析表](/examples/react-component/sheet#strategy)
+<embed src="@/docs/common/sort-param.zh.md"></embed>
 
-| 配置项名称 | 说明     | 类型   | 默认值 | 必选 |
-| ------------- | ----------------- | --------- | ----- | --- |
-| values           | 格式化后的数据，直接展示在 dataCfg 中 | `(string \| number)[][]`   |  ✓   |
-| originalValues | 原始数据，用于原始数据导出 | `(string \| number)[][]`  |  |      |
-| label        | 用作单元格小标题，单独占一行展示    | `string` |    |      |
-| [key: string]       | 其他透传字段，用于自定义单元格的定制化展示       | `unknown` | ``   |      |
+### FilterParam
 
-<embed src="@/docs/common/sort-param.zh.md"></embed>
+功能描述：用于**明细表**做数据筛选。
 
-<embed src="@/docs/common/custom/customTreeNode.zh.md"></embed>
+| 配置项名称       | 说明                                                                           | 类型                      | 默认值 | 必选 |
+| :--------------- | :----------------------------------------------------------------------------- | :------------------------ | :----- | :--- |
+| `filterKey`      | 需要筛选的字段 id                                                              | `string`                  |        | ✓    |
+| `filteredValues` | 不包含的维度值                                                                 | `unknown[]`               |        |      |
+| `customFilter`   | 自定义筛选函数，最终筛选的结果是同时满足 customFilter 且不在 filteredValues 中 | `(raw: Record<string, string>) => boolean` |        |      |
diff --git a/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
index c9669110dd..f993b011a7 100644
--- a/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
+++ b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
@@ -7,7 +7,7 @@ order: 1
 
 数据处理流程是：`原始数据 -> 生成 indexesData 多维数据 -> 生成层级结构 -> 获取数据` ，接下来我们会逐一讲解，目标是实现下图透视表：
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*J2fuRIJnQdgAAAAAAAAAAAAAARQnAQ" alt="s2-data-process-demo" width="600" />
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mTjfRr7PwDwAAAAAAAAAAAAADmJ7AQ/original" alt="透视表" />
 
 ## 原始数据
 
@@ -15,37 +15,43 @@ order: 1
 
 ```tsx
 const dataCfg = {
-    fields: {
-        rows: ['province', 'city'],
-        columns: ['type', 'sub_type'],
-        values: ['price']
+  fields: {
+    rows: ['province', 'city'],
+    columns: ['type', 'sub_type'],
+    values: ['price'],
+  },
+  data: [
+    {
+      price: 1,
+      province: '浙江省',
+      city: '杭州市',
+      type: '家具',
+      sub_type: '桌子',
     },
-    data: [{
-        "price": 1,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "桌子"
-    }, {
-        "price": 2,
-        "province": "浙江省",
-        "city": "绍兴市",
-        "type": "家具",
-        "sub_type": "桌子"
-    }, {
-        "price": 3,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "沙发"
-    }, {
-        "price": 4,
-        "province": "浙江省",
-        "city": "绍兴市",
-        "type": "家具",
-        "sub_type": "沙发"
-    }]
+    {
+      price: 2,
+      province: '浙江省',
+      city: '绍兴市',
+      type: '家具',
+      sub_type: '桌子',
+    },
+    {
+      price: 3,
+      province: '浙江省',
+      city: '杭州市',
+      type: '家具',
+      sub_type: '沙发',
+    },
+    {
+      price: 4,
+      province: '浙江省',
+      city: '绍兴市',
+      type: '家具',
+      sub_type: '沙发',
+    },
+  ]
 };
+
 const options = {
     width: 600,
     height: 600
diff --git a/s2-site/docs/manual/extended-reading/data-process/table.zh.md b/s2-site/docs/manual/extended-reading/data-process/table.zh.md
index 6989bb451a..157ecf48dc 100644
--- a/s2-site/docs/manual/extended-reading/data-process/table.zh.md
+++ b/s2-site/docs/manual/extended-reading/data-process/table.zh.md
@@ -5,41 +5,49 @@ order: 2
 
 本文会介绍明细表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。明细表的数据处理流程相对透视表更简单，主要是针对筛选和排序，对数据做了预处理。
 
+![明细表](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gkCGSrcKrZYAAAAAAAAAAAAADmJ7AQ/original)
+
 ## 原始数据
 
 初始配置和数据如下：
 
 ```tsx
 const dataCfg = {
-    fields: {
-        columns: ['city', 'type', 'sub_type', 'price'],
+  fields: {
+    columns: ['city', 'type', 'sub_type', 'price'],
+  },
+  data: [
+    {
+      price: 1,
+      province: '浙江省',
+      city: '杭州市',
+      type: '家具',
+      sub_type: '桌子',
     },
-    data: [{
-        "price": 1,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "桌子"
-    }, {
-        "price": 2,
-        "province": "浙江省",
-        "city": "绍兴市",
-        "type": "家具",
-        "sub_type": "桌子"
-    }, {
-        "price": 3,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "沙发"
-    }, {
-        "price": 4,
-        "province": "浙江省",
-        "city": "绍兴市",
-        "type": "家具",
-        "sub_type": "沙发"
-    }]
+    {
+      price: 2,
+      province: '浙江省',
+      city: '绍兴市',
+      type: '家具',
+      sub_type: '桌子',
+    },
+    {
+      price: 3,
+      province: '浙江省',
+      city: '杭州市',
+      type: '家具',
+      sub_type: '沙发',
+    },
+    {
+      price: 4,
+      province: '浙江省',
+      city: '绍兴市',
+      type: '家具',
+      sub_type: '沙发',
+    },
+  ],
 };
+
 const options = {
     width: 800,
     height: 600
@@ -64,8 +72,7 @@ const options = {
     filterParams: [
         {
             filterKey: 'city',
-            filteredValues: ['杭州市'],
-            customFilter: (row) => row['city'] === '杭州市' || row['city'] === '宁波市',
+            customFilter: (row) => row['city'] === '杭州市',
         }
     ]
 }
@@ -73,22 +80,24 @@ const options = {
 
 这次 S2 会对 `city` 字段做筛选，只保留值为杭州市的记录：
 
+![过滤](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*vUW1TYf_1fgAAAAAAAAAAAAADmJ7AQ/original)
+
 ```tsx
 [
-    {
-        "price": 1,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "桌子"
-    }, 
-    {
-        "price": 3,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "沙发"
-    },
+  {
+    price: 1,
+    province: '浙江省',
+    city: '杭州市',
+    type: '家具',
+    sub_type: '桌子',
+  },
+  {
+    price: 3,
+    province: '浙江省',
+    city: '杭州市',
+    type: '家具',
+    sub_type: '沙发',
+  },
 ]
 ```
 
@@ -108,22 +117,24 @@ const options = {
 
 S2 会对 `price` 字段做降序排序，数据最终变成了这样：
 
+![排序](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZrYCQKpWGw4AAAAAAAAAAAAADmJ7AQ/original)
+
 ```tsx
 [
-    {
-        "price": 3,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "沙发"
-    },
-    {
-        "price": 1,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "桌子"
-    }, 
+  {
+    price: 3,
+    province: '浙江省',
+    city: '杭州市',
+    type: '家具',
+    sub_type: '沙发',
+  },
+  {
+    price: 1,
+    province: '浙江省',
+    city: '杭州市',
+    type: '家具',
+    sub_type: '桌子',
+  },
 ]
 ```
 
@@ -133,4 +144,4 @@ S2 会对 `price` 字段做降序排序，数据最终变成了这样：
 
 我们可以通过 `s2Instance.dataSet.displayData` 获取。
 
-同时可以可以通过 `s2Instance.dataSet.getCellData({ rowIndex: number; col: number; })` API 来获取某个行列格子的数据。同样的，这里获取的是经过筛选和排序之后的展示数据。
+同时可以可以通过 `s2Instance.dataSet.getCellData({ rowIndex: number; field: string; })` API 来获取某个行列格子的数据。同样的，这里获取的是经过筛选和排序之后的展示数据。
diff --git a/s2-site/docs/manual/extended-reading/layout/pivot.zh.md b/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
index ae68aa1d34..d0dd2cb699 100644
--- a/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
+++ b/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
@@ -7,7 +7,7 @@ order: 1
 
 在解析布局过程中，以下图透视表为例：
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*J2fuRIJnQdgAAAAAAAAAAAAAARQnAQ" alt="s2-data-process-demo" width="600" />
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mTjfRr7PwDwAAAAAAAAAAAAADmJ7AQ/original" alt="透视表"/>
 
 ## 基础概念
 

From c46f53d1cef04497fc9fcab44e5dea697e03af29 Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Thu, 1 Feb 2024 11:39:32 +0800
Subject: [PATCH 49/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E6=96=87=E6=A1=A3=E6=8F=92=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/manual/extended-reading/data-process/pivot.zh.md | 4 ++--
 s2-site/docs/manual/extended-reading/layout/pivot.zh.md       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
index f993b011a7..cdce310a95 100644
--- a/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
+++ b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
@@ -3,11 +3,11 @@ title: 透视表
 order: 1
 ---
 
-本文会介绍透视表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。
+本文会介绍透视表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。数据流处理逻辑大部分都在 [data-set](https://github.com/antvis/S2/tree/next/packages/s2-core/src/data-set) 文件夹中.
 
 数据处理流程是：`原始数据 -> 生成 indexesData 多维数据 -> 生成层级结构 -> 获取数据` ，接下来我们会逐一讲解，目标是实现下图透视表：
 
-<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mTjfRr7PwDwAAAAAAAAAAAAADmJ7AQ/original" alt="透视表" />
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Wd1xTZoHhWwAAAAAAAAAAAAADmJ7AQ/original" alt="透视表" />
 
 ## 原始数据
 
diff --git a/s2-site/docs/manual/extended-reading/layout/pivot.zh.md b/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
index d0dd2cb699..56ebdd5fd8 100644
--- a/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
+++ b/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
@@ -3,11 +3,11 @@ title: 透视表
 order: 1
 ---
 
-本文会介绍透视表的布局过程，让读者更直接了解 `S2` 内部布局逻辑。
+本文会介绍透视表的布局过程，让读者更直接了解 `S2` 内部布局逻辑。布局处理逻辑大部分都在 [facet](https://github.com/antvis/S2/tree/next/packages/s2-core/src/facet) 文件夹中.
 
 在解析布局过程中，以下图透视表为例：
 
-<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mTjfRr7PwDwAAAAAAAAAAAAADmJ7AQ/original" alt="透视表"/>
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Wd1xTZoHhWwAAAAAAAAAAAAADmJ7AQ/original" alt="透视表"/>
 
 ## 基础概念
 

From 298c22023de30a66a0fb0fe192fafe5a11db7748 Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Thu, 1 Feb 2024 13:54:54 +0800
Subject: [PATCH 50/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=94=B9=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E6=96=87=E6=A1=A3=20demo=20=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/manual/advanced/interaction/custom.en.md | 2 +-
 s2-site/docs/manual/advanced/interaction/custom.zh.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/s2-site/docs/manual/advanced/interaction/custom.en.md b/s2-site/docs/manual/advanced/interaction/custom.en.md
index c4ffd34072..355bd99b3a 100644
--- a/s2-site/docs/manual/advanced/interaction/custom.en.md
+++ b/s2-site/docs/manual/advanced/interaction/custom.en.md
@@ -102,4 +102,4 @@ const s2 = new TableSheet(container, s2DataConfig, s2Options);
 s2.render();
 ```
 
-<Playground path="interaction/advanced/demo/double-click-hide-columns.ts" rid="container" height="400"></Playground>
+<Playground path="interaction/custom/demo/double-click-hide-columns.ts" rid="container"></playground>
diff --git a/s2-site/docs/manual/advanced/interaction/custom.zh.md b/s2-site/docs/manual/advanced/interaction/custom.zh.md
index 4325755f9f..2d9a7339a8 100644
--- a/s2-site/docs/manual/advanced/interaction/custom.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/custom.zh.md
@@ -103,4 +103,4 @@ const s2 = new TableSheet(container, s2DataConfig, s2Options);
 await s2.render();
 ```
 
-<Playground path='interaction/advanced/demo/double-click-hide-columns.ts' rid='container' height='400'></playground>
+<Playground path="interaction/custom/demo/double-click-hide-columns.ts" rid="container"></playground>

From f21c69bdec737c914a8588dac24e64ba8fd64a3f Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Thu, 1 Feb 2024 16:21:16 +0800
Subject: [PATCH 51/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=B5=81=E5=92=8C=E5=B8=83=E5=B1=80=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-core/src/facet/frozen-facet.ts    |   4 -
 .../extended-reading/data-process/pivot.zh.md | 124 ++++------
 .../extended-reading/data-process/table.zh.md |   2 +-
 .../extended-reading/layout/pivot.zh.md       | 216 +++++-------------
 .../extended-reading/layout/table.zh.md       |  11 -
 .../manual/extended-reading/performance.zh.md |  17 +-
 s2-site/s2.drawio                             |   1 +
 7 files changed, 119 insertions(+), 256 deletions(-)
 create mode 100644 s2-site/s2.drawio

diff --git a/packages/s2-core/src/facet/frozen-facet.ts b/packages/s2-core/src/facet/frozen-facet.ts
index 5045e4b778..b7b7343df2 100644
--- a/packages/s2-core/src/facet/frozen-facet.ts
+++ b/packages/s2-core/src/facet/frozen-facet.ts
@@ -588,10 +588,6 @@ export abstract class FrozenFacet extends BaseFacet {
     }
   };
 
-  protected init(): void {
-    super.init();
-  }
-
   public render(): void {
     this.calculateFrozenGroupInfo();
     this.renderFrozenPanelCornerGroup();
diff --git a/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
index cdce310a95..8f98f507a6 100644
--- a/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
+++ b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
@@ -3,12 +3,20 @@ title: 透视表
 order: 1
 ---
 
-本文会介绍透视表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。数据流处理逻辑大部分都在 [data-set](https://github.com/antvis/S2/tree/next/packages/s2-core/src/data-set) 文件夹中.
+本文会介绍透视表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。
 
-数据处理流程是：`原始数据 -> 生成 indexesData 多维数据 -> 生成层级结构 -> 获取数据` ，接下来我们会逐一讲解，目标是实现下图透视表：
+数据处理流程是：
+
+![s2-data-process](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TFcyS6P0IPsAAAAAAAAAAAAADmJ7AQ/original)
+
+![dataSet](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yJaCSqkl4HIAAAAAAAAAAAAADmJ7AQ/original)
+
+以下图透视表为例：
 
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Wd1xTZoHhWwAAAAAAAAAAAAADmJ7AQ/original" alt="透视表" />
 
+> 以下的代码都是伪代码，只是为了说明关键步骤，数据流处理逻辑大部分都在 [data-set](https://github.com/antvis/S2/tree/next/packages/s2-core/src/data-set) 文件夹中。
+
 ## 原始数据
 
 初始配置和数据如下：
@@ -64,104 +72,66 @@ const options = {
 />
 ```
 
-## 生成 indexesData 多维数据
+## 数据处理
+
+### processDataCfg
+
+这一步主要是对用户传入的配置根据当前的表格类型进行配置转换，主要是处理 `fields` 的信息，增加 `meta` 配置，并根据 `valueInCols` 配置，在`rows`或者`columns`中增加 `$$extra$$` 指标字段。
+
+### transformIndexesData
+
+在这一步，S2 会将用户传入的 data 信息做映射转换，从一维数组转换为多维数组 `indexesData`，并在转换过程中生成行列头的维度信息 `rowPivotMeta`，`colPivotMeta`。索引建立后，后续获取数据就能通过映射快速查询，增加查询效率。
+
+以下面的数据为例：
+
+```js
+{
+  price: 4,
+  province: '浙江省',
+  city: '绍兴市',
+  type: '家具',
+  sub_type: '沙发',
+};
+```
 
 首先，处理数据，提取当前明细数据在初始配置条件下的行、列维度结果。
 
 ```ts
-// 以第四条数据为例
-// { "price": 4,"province": "浙江省","city": "绍兴市","type": "家具","sub_type": "沙发" }
-const rowDimensionValues = transformDimensionsValues(currentData, ['province', 'city']); // 结果是 ['浙江省', '绍兴市']
-const colDimensionValues = transformDimensionsValues(currentData, ['type', 'sub_type']); // 结果是 ['家具', '沙发']
+
+const rowDimensionValues = transformDimensionsValues(data, ['province', 'city']); // 结果是 ['浙江省', '绍兴市']
+const colDimensionValues = transformDimensionsValues(data, ['type', 'sub_type']); // 结果是 ['家具', '沙发']
 ```
 
-然后，根据数据的行列维度结果和初始配置条件，我们可以获取到当前明细数据的路径（即在行树结构和列树结构的坐标索引）
+然后，根据数据的行列维度结果和 `fields` 配置信息，S2 会同步的生成 `indexesData`, `rowPivotMeta` 和 `colPivotMeta`
 
 ```ts
-// 以第四条数据为例
+// indexesData 使用 prefix 区分普通数据和下钻数据
 const prefix = 'province[&]city[&]type[&]sub_type';
+
+// getDataPath 内部同步生成 rowPivotMeta 和 colPivotMeta 信息
 // 第 0 位 始终是小计、总计的专属位，明细数据都是从第 1 位开始
 const rowPath = getDataPath(rowDimensionValues); // 结果是 [1, 2];
 const colPath = getDataPath(colDimensionValues); // 结果是 [1, 2];
+
 const dataPath =[prefix, ...rowPath.concat(...colPath)] ; // 结果是 ['province[&]city[&]type[&]sub_type', 1, 2, 1, 2];
+
 const indexesData={};
 lodash.set(indexesData, dataPath, currentData);
 ```
 
-最后，按照上述流程，遍历所有数据，得到最终的 indexesData，结果是：
+对于表场景查询频率非常高，透视表本身的展现形式也表达了一种树形结构，因此我们选择了构建树形 Map 结构来实现 `rowPivotMeta` 和 `colPivotMeta`。
 
-```ts
-{
- "province[&]city[&]type[&]sub_type": [
-  null,
-  [
-   null,
-   [
-    null,
-    [
-     null,
-     [
-      null,
-      {
-       "price": 1,
-       "province": "浙江省",
-       "city": "杭州市",
-       "type": "家具",
-       "sub_type": "桌子"
-      }
-     ],
-     [
-      null,
-      {
-       "price": 3,
-       "province": "浙江省",
-       "city": "杭州市",
-       "type": "家具",
-       "sub_type": "沙发"
-      }
-     ]
-    ]
-   ],
-   [
-    null,
-    [
-     null,
-     [
-      null,
-      {
-       "price": 2,
-       "province": "浙江省",
-       "city": "绍兴市",
-       "type": "家具",
-       "sub_type": "桌子"
-      }
-     ],
-     [
-      null,
-      {
-       "price": 4,
-       "province": "浙江省",
-       "city": "绍兴市",
-       "type": "家具",
-       "sub_type": "沙发"
-      }
-     ]
-    ]
-   ]
-  ]
- ]
-}
-```
+最后，按照上述流程，遍历所有数据，就能得到最终的  `indexesData`, `rowPivotMeta` 和 `colPivotMeta`，可以通过 S2 实例中的 `dataSet` 字段查看详情：
 
-## 生成层级结构
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rOySQIXC0tUAAAAAAAAAAAAADmJ7AQ/original" style="border-radius: 5px; margin-bottom: 20px; display:block;" width="500" alt="indexesData">
 
-接下来是按照数据结构，分别生成行列的树状结构。我们知道，存储明细数据的 Meta 结构一般有三种：扁平数组、图、树，对于表场景查询频率非常高，透视表本身的展现形式也表达了一种树形结构，因此我们选择了构建树形结构来实现 Meta。
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lFmhQ7wd3TwAAAAAAAAAAAAADmJ7AQ/original" style="border-radius: 5px; display:block;" width="500" alt="rowPivotMeta">
 
-下面，我们以行树结构为例，生成的 Map 结构是：<br/>
+### handleSort
 
-![rowPivotMeta](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BScNTbO2TrIAAAAAAAAAAAAADmJ7AQ/original)
+`rowPivotMeta` 和 `colPivotMeta` 都是 Map 结构，当 Map 结构获取 `keys` 或者 `values` 时，是结果按照插入顺序排序的。当存在 `sortParams` 时，我们希望获取的结果顺序就是排序后的顺序，所以在这一步，会根据排序配置，重新生成 Map 结构，使之满足排序后的结果。在后续布局时，就无需在重新排序，可以加速布局效率。
 
-## 获取数据
+## 数据获取
 
 ### 获取单个数据
 
diff --git a/s2-site/docs/manual/extended-reading/data-process/table.zh.md b/s2-site/docs/manual/extended-reading/data-process/table.zh.md
index 157ecf48dc..d5ba2e9ae5 100644
--- a/s2-site/docs/manual/extended-reading/data-process/table.zh.md
+++ b/s2-site/docs/manual/extended-reading/data-process/table.zh.md
@@ -3,7 +3,7 @@ title: 明细表
 order: 2
 ---
 
-本文会介绍明细表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。明细表的数据处理流程相对透视表更简单，主要是针对筛选和排序，对数据做了预处理。
+本文会介绍明细表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。明细表的数据处理流程相对透视表更简单，无需数据转化和映射流程，主要是针对筛选和排序，对数据做了预处理。
 
 ![明细表](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gkCGSrcKrZYAAAAAAAAAAAAADmJ7AQ/original)
 
diff --git a/s2-site/docs/manual/extended-reading/layout/pivot.zh.md b/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
index 56ebdd5fd8..559f898a8a 100644
--- a/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
+++ b/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
@@ -3,204 +3,102 @@ title: 透视表
 order: 1
 ---
 
-本文会介绍透视表的布局过程，让读者更直接了解 `S2` 内部布局逻辑。布局处理逻辑大部分都在 [facet](https://github.com/antvis/S2/tree/next/packages/s2-core/src/facet) 文件夹中.
+本文会介绍透视表的布局过程，让读者更直接了解 `S2` 内部布局逻辑。
 
-在解析布局过程中，以下图透视表为例：
+主要流程：
+
+![s2-data-process](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TFcyS6P0IPsAAAAAAAAAAAAADmJ7AQ/original)
+
+![facet](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*5ctFS7NPhsoAAAAAAAAAAAAADmJ7AQ/original)
+
+在数据处理完成后，就会进入布局阶段，主要分为布局生成，和实时渲染。布局生成后会重复使用，直到配置信息发生改变为止；表格会根据用户的交互信息做实时渲染。
+
+以下图透视表为例：
 
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Wd1xTZoHhWwAAAAAAAAAAAAADmJ7AQ/original" alt="透视表"/>
 
-## 基础概念
+> 以下的代码都是伪代码，只是为了说明关键步骤，布局处理逻辑大部分都在 [facet](https://github.com/antvis/S2/tree/next/packages/s2-core/src/facet) 文件夹中。
 
-### Node
+## 布局生成
 
-透视表节点类，用于行头、列头、角头单元格渲染。
+### initLayers
 
-```ts
-class Node {
-    x, y, width, height, label, level, ...
-}
-```
+生成各种各样的 layerGroup 信息，包括 `backgroundGroup`，`foregroundGroup`， `panelGroup`，`panelScrollGroup` 和各类冻结 `frozenGroup` 等等。
 
-### Hierarchy
+### buildHierarchy & layoutCoordinates
 
-透视表层级结构，管理行头、列头的所有节点。
+生成行头，列头层级节点信息，并且计算好每个单元格的尺寸信息。可以通过 S2 实例中 `facet.getLayoutResult()` 获取各种节点信息：
 
-```ts
-class Hierarchy {
-    width, height, sampleNodesForAllLevels, allNodesWithoutRoot, indexNode,
-    getLeaves: () => {},
-    getNodes: () => {},
-    getIndexNodes: () => {},
-    pushNode: () => {}
-}
-```
+![layoutResult](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*coR0S65SKy4AAAAAAAAAAAAADmJ7AQ/original)
 
-## 层级结构
+### buildBBox
 
-生成行列层级结构的过程，也是遍历行列配置的过程，下面以行头层级结构为例。
+生成 PanelBBox 和 CornerBBox 结构，这两个BBox 主要用于后续用作角头，行列头，数据单元格区域的尺寸标识，和 clip 裁切
+![bbox](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*coR0S65SKy4AAAAAAAAAAAAADmJ7AQ/original)
 
-```ts
-// 生成行层级结构入口
-buildGridHierarchy('province', ['province', 'city'], {}, new Hierarchy());
-
-// 生成树状结构
-function buildGridHierarchy({ currentField, fields, facetCfg, hierarchy }) { // currentField 为 province
-    const fieldValues = dataSet.getDimensionValues(currentField); // ['浙江省']
-    generateHeaderNodes({ // 生成浙江省下面的层级结构
-        currentField, fields, facetCfg, hierarchy,
-        fieldValues // ['浙江省']
-    });
-}
-
-// 生成当前字段下面的层级结构，比如浙江省下面的 [杭州市， 绍兴市]
-function generateHeaderNodes(...args) {
-    for(let fieldValue of fieldValues.entries()) { // 浙江省
-        const node = new Node({ value: fieldValue, parent: parentNode });
-        hierarchy.pushIndexNode(node);
-        hierarchy.sampleNodesForAllLevels.push(node);
-        if (!node.isLeafNode) {
-            // 生成叶子节点
-            buildGridHierarchy({
-                parentNode: node, // 递归生成子结构，如果还有 region, 会继续生成杭州市下面的 [西湖区，余杭区]
-                currentField: fields[level + 1], // 下一个维度作为下个循环的维度，比如第一次是 province，第二次是 city
-                hierarchy,
-                fields,
-                facetCfg,
-            });
-        }
-    }
-}
-```
+### bindEvents
 
-当第一层结构执行完后， `rowHierarchy` 的结构如下：
+绑定鼠标滚轮事件，分页事件等。
 
-```ts
-rowHierarchy: {
-    height: 0,
-    width: 0,
-    maxLevel: 1,
-    allNodesWithoutRoot: [(Node){ label: '浙江省', key: 'province', ...}],
-    sampleNodesForAllLevels: [(Node){ label: '浙江省', key: 'province', ...}],
-}
-```
+## 实时渲染
 
-然后递归调用浙江省的子层级，`rowHierarchy` 的结构如下：
+### adjustScrollOffset
 
-```ts
-rowHierarchy: {
-    height: 0,
-    width: 0,
-    maxLevel: 2,
-    allNodesWithoutRoot: [(Node){ label: '浙江省', key: 'province', ...}, (Node){ label: '杭州市', key: 'city', ...}, (Node){ label: '绍兴市', key: 'city', ...}],
-    indexNode: [(Node){ label: '杭州市', key: 'city', ...}, (Node){ label: '绍兴市', key: 'city', ...}],
-    sampleNodeForLastLevel: [(Node){ label: '杭州市', key: 'city', ...}],
-    sampleNodesForAllLevels: [(Node){ label: '浙江省', key: 'province', ...}, (Node){ label: '杭州市', key: 'city', ...}]
-}
-```
+将表格的滚动数据调整到合理的范围了，比如表格宽度突然发生变小，原本的滚动条已经滚动到100%的状态的前提下，需要根据当前的宽度重新调整，否则会出现偏移过多，出现空白的情况。
 
-同理，列头也是类似的过程，生成 `colsHierarchy`。
+### renderHeaders & renderScrollBars & renderBackground
 
-## 层级坐标
+渲染行头、列头、角头，滚动条，背景色等等。
 
-上面确定了行、列的层级结构，但是注意 `rowHierarchy` 的 `width` 和 `height` 都是 0。接下来我们会确定层级中各个节点的坐标值，也就是确定他们在画布中的位置。
+### dynamicRenderDataCell
 
-为了简化坐标计算过程，我们不考虑树形、用户拖拽宽度，考虑最简单的场景。
+对于表格的单元格，在大量数据的情况下，全量单元格会非常多，所以 `S2` 的策略是渲染可视区域内的单元格（按需渲染），滚动后动态新增和删除单元格，达到性能最佳。
 
-首先，计算单元格的宽度：
+通过 `scrollX` 和 `scrollY`，计算当前可视视窗中的单元格的节点索引。
 
 ```ts
-const cellWidth = calcCellWidth(); // 行、列 单元格宽度
-
-// 计算单元格宽度
-function calcCellWidth() {
-    const rowHeaderColSize = rows.length; // [province, city]，结果是 2
-    const colHeaderColSize = colLeafNodes.length; // 列叶子节点，结果是 2
-    const { width } = this.getCanvasSize(); // 画布宽度
-    const size = Math.max(1, rowHeaderColSize + colHeaderColSize); // 行+列 总数量，结果是 4
-    return Math.max(dataCell.width, canvasW / size); // 用户配置的宽度和计算宽度取最大值
-}
+const indexes = this.calculateXYIndexes(scrollX, scrollY); // indexes 结果是当前可视视窗节点的坐标索引集合。
 ```
 
-然后，计算 `rowHierarchy` 的尺寸和各个子节点 (`Node`) 的坐标和尺寸。
+对比当前可视视窗节点索引集合和上次索引集合的差值。
 
 ```ts
-// 计算 rowsHierarchy 宽度
-for (const levelSample of rowsHierarchy.sampleNodesForAllLevels) {
-    levelSample.width = cellWidth; // 各层级样例节点的宽度
-    rowsHierarchy.width += levelSample.width; // 计算 rowsHierarchy 总宽度
-}
-// 计算节点的尺寸和坐标
-let preLeafNode = Node.blankNode();
-for (let i = 0; i < rowsHierarchy.getNodes().length; i++) {
-    const currentNode = allNodes[i]; // 当前节点
-    if (isLeaf) {
-        // 叶子节点
-        currentNode.x = 0;
-        currentNode.y = preLeafNode.y + preLeafNode.height;
-        currentNode.height = dataCell.height + dataCell.padding?.top + dataCell.padding?.bottom;
-        preLeafNode = currentNode; // 更改前一个叶子节点
-        rowsHierarchy.height += currentNode.height; // 更新 rowsHierarchy 高度
-    } else {
-        // 非叶子节点
-        currentNode.x = preLevelSample?.x + preLevelSample?.width; // 非叶子节点的 x 坐标
-    }
-    currentNode.width = cellWidth; // 当前节点的宽度
-}
-
+const { add, remove } = diffPanelIndexes(this.preCellIndexes, indexes); // add 和 remove 也是节点坐标索引集合
 ```
 
-同理，我们也可以计算出 `colsHierarchy` 的尺寸和各个子节点的尺寸和坐标。
+针对新增和删除的节点分别进行渲染和删除。
+
+```ts
+each(add, (x, y) => renderCell(x, y));
+each(remove, (x, y) => getCell(x, y).remove());
+```
 
-## 按需渲染
+通过按需渲染，极大的提高了 `S2` 的渲染效率，这也是为什么我们支持百万级别数据渲染的原因。
 
-上面，我们已经生成层级结构和各个子节点的坐标。接下来，我们开始渲染节点。
+### 缓存设计
 
-首先渲染行头、列头、角头：
+对于数据的频繁读取，我们也做了性能提升，比如缓存数据读取结果、缓存字体宽度计算等。
 
 ```ts
-this.rowHeader = new RowHeader({
-    width,
-    height,
-    data: rowNodes // rowNodes 中的节点有坐标和尺寸信息，调用 g2 的 <Group>RowHeader.add(<Group>RowCell)
+/**
+ * 查找字段信息
+ */
+public getFieldMeta = memoize((field: string, meta?: Meta[]): Meta => {
+  return find(this.meta || meta, (m: Meta) => m.field === field);
 });
-this.colHeader = new ColHeader({
-    width,
-    height,
-    data: colNodes // 同上
-});
-this.cornerHeader = new CornerHeader({
-    data: cornerNodes,
-    width: cornerWidth,
-    height: cornerHeight,
-});
-this.foregroundGroup.add([this.rowHeader, this.colHeader, this.cornerHeader]);
 ```
 
-其次渲染单元格：
+另外，`S2` 还做了其他的一些优化来提升渲染效率，比如滚动合帧（解决滚动白屏问题）、懒渲染（解决多次重复渲染问题）。
 
-```ts
-// 动态按需渲染
-function dynamicRender() {
-    const indexes = this.calculateXYIndexes(scrollX, scrollY); // 根据滚动坐标计算当前视窗的坐标集合
-    const { add, remove } = diffPanelIndexes(this.preCellIndexes, indexes); // 根据上次和这次坐标集合差值计算增加和减少的坐标集合
-
-    each(add, ([i, j]) => {
-        const viewMeta = this.getCellMeta(j, i);
-        const cell = this.cfg.dataCell(viewMeta);
-        this.addCell(cell); // 渲染增加的单元格
-    });
-    each(remove, ([i, j]) => {
-        const findOne = find(
-            allCells,
-            (cell) => cell.get('name') === `${i}-${j}`,
-        );
-        findOne?.remove(true); // 移除减少的单元格
-    });
-    this.preCellIndexes = indexes; // 更新本次坐标集合为上次渲染的集合
-}
+### 行列冻结
 
-```
+行列冻结相关的处理都被抽象到 `FrozenFacet` 中处理，会重新基础的实时渲染链路，增加对各类冻结 `frozenGroup` 的绘制步骤。
+
+被冻结的行列，在布局上会有特殊处理。简单的说，冻结行列格子的定位是固定的。其中：
 
-最后渲染滚动条、背景等，不做过多解释。
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*tZkOSqYWVFQAAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />
 
-以上就是 `S2` 的布局过程，包含了层级结构 `rowsHierarchy` 和 `colsHierarchy` 的生成过程，各个节点坐标计算过程，以及按需渲染过程。
++ 冻结行（frozenRow) 在 y 轴上冻结
++ 冻结尾部行（frozenTrailingRow) 在 y 轴上冻结，并且 y 坐标从表格可视区底部开始逆向计算布局。
++ 冻结列（frozenCol) 在 x 轴上冻结
++ 冻结尾部列（frozenTrailingCol) 在 x 轴上冻结，并且 x 坐标从表格可视区最右侧开始逆向计算布局。
diff --git a/s2-site/docs/manual/extended-reading/layout/table.zh.md b/s2-site/docs/manual/extended-reading/layout/table.zh.md
index 37dda55d99..8735797c2a 100644
--- a/s2-site/docs/manual/extended-reading/layout/table.zh.md
+++ b/s2-site/docs/manual/extended-reading/layout/table.zh.md
@@ -20,14 +20,3 @@ order: 2
 ## 序列号
 
 序列号列是 S2 为了方便用户使用，自动根据数据生成的一列，用于展示序列号。这列本质上和内容区没有区别。但在样式层面可以通过 `theme.rowCell` 进行单独个性化配置。
-
-## 行列冻结
-
-被冻结的行列，在布局上会有特殊处理。简单的说，冻结行列格子的定位是固定的。其中：
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*tZkOSqYWVFQAAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />
-
-+ 冻结行（frozenRow) 在 y 轴上冻结
-+ 冻结尾部行（frozenTrailingRow) 在 y 轴上冻结，并且 y 坐标从表格可视区底部开始逆向计算布局。
-+ 冻结列（frozenCol) 在 x 轴上冻结
-+ 冻结尾部列（frozenTrailingCol) 在 x 轴上冻结，并且 x 坐标从表格可视区最右侧开始逆向计算布局。
diff --git a/s2-site/docs/manual/extended-reading/performance.zh.md b/s2-site/docs/manual/extended-reading/performance.zh.md
index 43c54fb0c3..8af090db0a 100644
--- a/s2-site/docs/manual/extended-reading/performance.zh.md
+++ b/s2-site/docs/manual/extended-reading/performance.zh.md
@@ -16,9 +16,15 @@ tag: Updated
 
 在研究 `S2` 的性能之前，我们先熟悉其核心渲染链路，弄清楚哪些环节可能会耗时，优化从何做起。
 
-`S2` 的渲染流程是，通过配置信息将原始数据处理，转换为以 行、列 纬度值为 `path` 的多维数组。在此之后，通过 `hierarchy` 来改变自动生成的层级结构。然后通过 `layout` 更改任意行、列、单元格的坐标信息。最后由 `layoutResult` 来确定行、列的笛卡尔交集的 `dataCell` 数据信息。如下图所示：
+`S2` 的渲染流程是：
 
-![s2-data-process](https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ZLfHQoNsLrYAAAAAAAAAAAAAARQnAQ)
+* 通过配置信息将原始数据处理，转换为以 行、列 纬度值为 `path` 的多维数组
+* 在此之后，通过 `hierarchy` 来改变自动生成的层级结构。然后通过 `layout` 更改任意行、列、单元格的坐标信息
+* 最后由 `layoutResult` 来确定行、列的笛卡尔交集的 `dataCell` 数据信息
+  
+如下图所示：
+
+![s2-data-process](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TFcyS6P0IPsAAAAAAAAAAAAADmJ7AQ/original)
 
 明确核心渲染链路后，我们就可以发现，耗时环节「发生在数据转换」、「层级结构生成」、「单元格信息获取」三个阶段。接下来，我们看看 S2 如何性能优化。
 
@@ -58,9 +64,9 @@ const dataCfg={
 
 `S2` 渲染流程的第一步，就是把用户的明细数据转换为二维数组和具有层级的数据结构，在表格布局中会频繁的查询和排序，因此数据结构的设计显得尤为重要。
 
-我们知道，存储明细数据的 `Meta` 结构一般有三种：扁平数组、图、树。对于表场景查询频率非常高，透视表本身的展现形式也表达了一种树形结构，因此我们选择了构建树形结构来实现 `Meta`。
+对于表场景查询频率非常高，透视表本身的展现形式也表达了一种树形结构，因此我们选择了构建树形结构 `Map` 来实现 `rowPivotMeta` 和 `colPivotMeta`。
 
-另外，我们选择 `Map` 而不是 `Object` 实现树形结构，对于读取顺序和排序效率更高，对于删除 Key 的性能更友好，其`Map`具体类型定义可以参见 [PivotMeta](https://github.com/antvis/S2/blob/c76203072a78dbf6656a70bc1c5487e6b1d9f009/packages/s2-core/src/data-set/interface.ts#L7-L15)。数据结构如下：
+另外，我们选择 `Map` 而不是 `Object` 实现树形结构，对于读取顺序和排序效率更高，对于删除 Key 的性能更友好，其 `Map` 具体类型定义可以参见 [PivotMeta](https://github.com/antvis/S2/blob/ddc12830fa32f001ff7009a2bee8ce8624a1a187/packages/s2-core/src/data-set/interface.ts#L9)。数据结构如下：
 
 ```ts
 // Meta
@@ -153,6 +159,9 @@ const rowsMeta: PivotMeta = {
 
 因此在 `S2` 中查询数据不是循环遍历底层数据，基于层级结构和查询数组路径获取数据。在第一次遍历原始数据，生成必要的 `Meta` 和多维数组信息后，查询数据时间复杂度是 **O(n)**。此方案的优点是性能优异。
 
+> 实际上 `indexesData` 还包含了单元格行列信息的前缀用于区分普通数据和下钻数据，所以其真正结构是：
+> `Record<string, RawData[][]>`，其中 `RawData[][]` 对应上面的多维数组。
+
 ### 按需渲染
 
 对于表格的单元格，`S2` 的策略是渲染可视区域内的单元格（按需渲染），滚动后动态新增和删除单元格，达到性能最佳。
diff --git a/s2-site/s2.drawio b/s2-site/s2.drawio
new file mode 100644
index 0000000000..f8d602c9ee
--- /dev/null
+++ b/s2-site/s2.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2024-02-01T08:06:16.828Z" agent="5.0 (Macintosh; Intel Mac OS X 13_4_0) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.9.6 Chrome/89.0.4389.128 Electron/12.0.16 Safari/537.36" etag="LHgJB2QA4S5alYa0467t" version="14.9.6" type="device"><diagram id="Ahhd4kyiwwfnaZKAL9wK" name="第 1 页">7V3bd6I4GP9reGwPEAjwWK3d2XOmO3Ome5vHCFGZQeJCbHX/+k2AKBC0tKuEKvah5AuXkO/7fbdc0MB4ufklQavFIwlwpJl6sNHAvWaawLEh+8cp25xiOKaVU+ZJGOQ0fU94Cv/FxYmCug4DnBa0nEQJiWi4qhJ9EsfYpxUaShLyUj1tRqKgQlihOa40gxOefBRh6bS/woAucqprOnv6JxzOF+LJBvTyminyf84Tso6L58UkxnnNEonbFI9MFyggLyUSmGhgnBBC86PlZowj3q/VHns4ULtrcoJj2uYCZ5uAu4012Xybf3387c/RIg7+uDHtonF0K/oCB6xrimL2OmCUvSDm99FZKf2Jqc/fzWAFktAFmZMYRZ8JWRXEH5jSbcFltKaEkRZ0GRW1rL3J9u/iZlnhOy/c2qJ4vylX3m+L0ozE9AEtw4gTxmQZ+qzhTyhO2b/HJ3ZC/iq8/Qe7qCClZJ34+Ei/CCFEyRzTY/23YyQDByZLzBrMrktwhGj4XG0HKoR0vjtvzy12UDDsDcwr7vuMonXxJG1ia+5E8x74wZ2juSNtAjXP1kY6P3DvtbuJxPCUJuTnTu7NKrOY1K74ecvNnGP/dhaRF3+BEnobIIqmKOXy8bIIKX5aoaxLX9h5bbjFTxByZlSEzKgL2SyMojGJSJI1GMxs/sdPylpeqoHZr7h5iZ7/diLyjBOKN8eFRGZqccGNodsFagp15xbK7mWvOmAB+kVJawjayeXAhN2DuEswmi3BCFWC0ZTBWGdKE0xKXYqmKYnWFN8lftHtGXVfsnYiL8DaihMBShc7XB0CxhH0MeAHIa5cNst+uXrIjRqXqXmE0lTIVx2aXvY7EQQ926wgUPR+CYE7u1uGoAnOhUHQwH4Y0aLHK3IA/1kTUXGTZry9YyeY1mqzr2RH8+z/xNNcm2vuiaONMv09cbODsdDouyexhucPKy6tyx/rcFrT7hUuFYqirG0LEorCecyKPmMQZvQRZ1/I/Ke7omIZBkH0blNwRPhOIi2gJi22LC6G2yQu55IWS5KWe2ZNx7P5W3XG61a2ajoDhN2Z32g6fRdPZ2+zyydhjl5lThNvmqBsnYs3tsSbLysaEt6l184bw3QVM0dEZEO80uD6tHCRDL2Z4934SHDwkbrzkaALe+YjOQd9pHSF4v/jI0kxLg9/LY0FZsxr8nSNd8XOR8ofNvhIVWmBNWlR7iMZcmrq44awbkv97KlUz4acR7j8HjcslV3uSipxhFLMg4En1uozO5yzGYZ+o8MZON5UFz5Mhw4ntKyKFmryNwHs0N/0JP58DZ8JvV4G1cyEAWQOuV6HDBIjSINP2YVPaRnVzLd6n9JoGAQ5kVPJPEpXc0F2YGjM9xmcyjeKC/Bq4qLeqZQzb7+jaXS9Ftd29H4p9Ab93WGGZ5/U+a6VczrqMzyG09KhNZWmeAw5yOce7QND0NnRFdjYDawmdLnmFOzGhTtEF3BABV1QsTtryPFG5s9eK3s8r6r8oGpvVo43MvN0pfwxPdgv/phgME6HbU6bbIur0jiJWYkXwT68CWlxXwiKMr+xcatbory/Ny9sS4WvOAlZp/KYIqMpEQal2U5Tzhw8JORfHF+psq37Kg2z2rp1VnYCdwloVYEvtZEAaJGZUz9N8dAcjAx8+V1NOf9nnpijbQcrTLUaU44eVgnxcZp+yNlLdRafQolaRi3gE/nJkhYFepeTg8XctwGGr8PQawlDcEAKOoKhHCTShPXljCTLXxnTNjjD4wBGu5ra7AEW5cGKBYqDCD8xTF09v4Bh9Y1f8qxuphj4lV0A7LSDBWexdno1f+aI5WTqOCaP7xQce1xHNBzY1uSkuEDOS3fMtkua1tupzwLslj6LqTTzBuRZ9e1mbZ4Zq66Pm7E6dW3L7gFWHcfpm1F0Lxir+6Sq58FSUlW/BVDUt0+qnhf5bef8516MMuR7VyAuRkVU7KOC0hOhUDrtFTSsBGkwBy5fzD5yslXtD5o3mIMbx63GtI6r2uO2mla+Xn5+6VUkipnMryLRgq2loBtwWnIMNV2HUfApxAlK/MX23DDsfabipoZCw7SBYhjCpnmw/YNhI9xKDNaz37mtpNXWSkKlI2iWbCUjtCVrOiYkCcIYUfzBFiWfAYtmbdi6D1hsWug4YPGAkLcd+4RKt3ex5LFP9GOd0ic/IVH0ZTZLP9rs8bNkFkF1wr9hAdXpCjEIdJHx5+ncVbvtjmfQ7Jm7ajd4Pg1rdxzNs7KN0Vh06fLs4uRBG43ZcUA+Z0ZVEOR8xRVGmW7fbKpYOXSRMD5rGul16LeOVN2+QV+OVLMxhInmTbJ8kqONID9gymCUZ5geNA/soM9eI8DJAPw98L1aYKvefsOGkaPBmT4ar7ax4krTv1CeGpplmEYjsjk3CHsf0EKzOuLXA+MLlS576cSHbgfV9xjqU8LbbGup1cLblOAdxiFlbjZOhoQVC5Kr89z6APCGlH8YB5Nn/k7XzjDPNXrHL3kK8OAUHeys1tl+pVOkoJztz+OTTxgFHSjO/mcX66Nu6oMTZxh1ewMO22b6HbWblMqZ/hyHeap/igYosp6rLczvARQ/xjyUfkDRaZsncEyVUHTkPEEOxdH+szvXDkUIat5pD6Aox3/BNmad7n/LuJetFs3uc+W889z+qdFL+iDUSVI9t7ohEjx5syxRrWR3DaftaE0+FK9MdSv4JtEHkyPbU7pNS3tBUjrxxmn+VkoXmzW2+8zYO83HoQ1hT2BW5C+UQceT7IohslhluyI27Dw9Gy951dA79YHuVfQB8Dyl+qDtBpO20jF/IcmDIJUMi1MRJAiOj0j1RpCUjlI58izdTnb++shmBdR3fxdJljPYFY1vxyY+jpvVlb4+DCb/AQ==</diagram></mxfile>
\ No newline at end of file

From 14a94299261b5139d558cdf978229d5d5d2f06ce Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Thu, 1 Feb 2024 16:48:14 +0800
Subject: [PATCH 52/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20faq?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/manual/faq.zh.md | 8 ++++++++
 s2-site/s2.drawio             | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/s2-site/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md
index 44a4013dde..ecd92aeec7 100644
--- a/s2-site/docs/manual/faq.zh.md
+++ b/s2-site/docs/manual/faq.zh.md
@@ -214,6 +214,14 @@ s2.showTooltip({ ... })
 
 ![excel](https://gw.alipayobjects.com/zos/antfincdn/G1FBvKgYe/5e4e38fd-cd0d-4d98-b897-b40dd97effdc.png)
 
+### 表格导出后数据没有正确按格子分隔怎么办？
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*IfmPQo7qieAAAAAAAAAAAAAADmJ7AQ/original" width="900" alt="现象">
+
+请检查 `Excel` 的分隔符设置是否正确
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*OTz2Toh9H6EAAAAAAAAAAAAADmJ7AQ/original" height="500" alt="excel">
+
 ### 鼠标滚轮如何进行水平滚动？
 
 按住 `Shift` 键的同时滚动鼠标
diff --git a/s2-site/s2.drawio b/s2-site/s2.drawio
index f8d602c9ee..a428b44ba6 100644
--- a/s2-site/s2.drawio
+++ b/s2-site/s2.drawio
@@ -1 +1 @@
-<mxfile host="Electron" modified="2024-02-01T08:06:16.828Z" agent="5.0 (Macintosh; Intel Mac OS X 13_4_0) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.9.6 Chrome/89.0.4389.128 Electron/12.0.16 Safari/537.36" etag="LHgJB2QA4S5alYa0467t" version="14.9.6" type="device"><diagram id="Ahhd4kyiwwfnaZKAL9wK" name="第 1 页">7V3bd6I4GP9reGwPEAjwWK3d2XOmO3Ome5vHCFGZQeJCbHX/+k2AKBC0tKuEKvah5AuXkO/7fbdc0MB4ufklQavFIwlwpJl6sNHAvWaawLEh+8cp25xiOKaVU+ZJGOQ0fU94Cv/FxYmCug4DnBa0nEQJiWi4qhJ9EsfYpxUaShLyUj1tRqKgQlihOa40gxOefBRh6bS/woAucqprOnv6JxzOF+LJBvTyminyf84Tso6L58UkxnnNEonbFI9MFyggLyUSmGhgnBBC86PlZowj3q/VHns4ULtrcoJj2uYCZ5uAu4012Xybf3387c/RIg7+uDHtonF0K/oCB6xrimL2OmCUvSDm99FZKf2Jqc/fzWAFktAFmZMYRZ8JWRXEH5jSbcFltKaEkRZ0GRW1rL3J9u/iZlnhOy/c2qJ4vylX3m+L0ozE9AEtw4gTxmQZ+qzhTyhO2b/HJ3ZC/iq8/Qe7qCClZJ34+Ei/CCFEyRzTY/23YyQDByZLzBrMrktwhGj4XG0HKoR0vjtvzy12UDDsDcwr7vuMonXxJG1ia+5E8x74wZ2juSNtAjXP1kY6P3DvtbuJxPCUJuTnTu7NKrOY1K74ecvNnGP/dhaRF3+BEnobIIqmKOXy8bIIKX5aoaxLX9h5bbjFTxByZlSEzKgL2SyMojGJSJI1GMxs/sdPylpeqoHZr7h5iZ7/diLyjBOKN8eFRGZqccGNodsFagp15xbK7mWvOmAB+kVJawjayeXAhN2DuEswmi3BCFWC0ZTBWGdKE0xKXYqmKYnWFN8lftHtGXVfsnYiL8DaihMBShc7XB0CxhH0MeAHIa5cNst+uXrIjRqXqXmE0lTIVx2aXvY7EQQ926wgUPR+CYE7u1uGoAnOhUHQwH4Y0aLHK3IA/1kTUXGTZry9YyeY1mqzr2RH8+z/xNNcm2vuiaONMv09cbODsdDouyexhucPKy6tyx/rcFrT7hUuFYqirG0LEorCecyKPmMQZvQRZ1/I/Ke7omIZBkH0blNwRPhOIi2gJi22LC6G2yQu55IWS5KWe2ZNx7P5W3XG61a2ajoDhN2Z32g6fRdPZ2+zyydhjl5lThNvmqBsnYs3tsSbLysaEt6l184bw3QVM0dEZEO80uD6tHCRDL2Z4934SHDwkbrzkaALe+YjOQd9pHSF4v/jI0kxLg9/LY0FZsxr8nSNd8XOR8ofNvhIVWmBNWlR7iMZcmrq44awbkv97KlUz4acR7j8HjcslV3uSipxhFLMg4En1uozO5yzGYZ+o8MZON5UFz5Mhw4ntKyKFmryNwHs0N/0JP58DZ8JvV4G1cyEAWQOuV6HDBIjSINP2YVPaRnVzLd6n9JoGAQ5kVPJPEpXc0F2YGjM9xmcyjeKC/Bq4qLeqZQzb7+jaXS9Ftd29H4p9Ab93WGGZ5/U+a6VczrqMzyG09KhNZWmeAw5yOce7QND0NnRFdjYDawmdLnmFOzGhTtEF3BABV1QsTtryPFG5s9eK3s8r6r8oGpvVo43MvN0pfwxPdgv/phgME6HbU6bbIur0jiJWYkXwT68CWlxXwiKMr+xcatbory/Ny9sS4WvOAlZp/KYIqMpEQal2U5Tzhw8JORfHF+psq37Kg2z2rp1VnYCdwloVYEvtZEAaJGZUz9N8dAcjAx8+V1NOf9nnpijbQcrTLUaU44eVgnxcZp+yNlLdRafQolaRi3gE/nJkhYFepeTg8XctwGGr8PQawlDcEAKOoKhHCTShPXljCTLXxnTNjjD4wBGu5ra7AEW5cGKBYqDCD8xTF09v4Bh9Y1f8qxuphj4lV0A7LSDBWexdno1f+aI5WTqOCaP7xQce1xHNBzY1uSkuEDOS3fMtkua1tupzwLslj6LqTTzBuRZ9e1mbZ4Zq66Pm7E6dW3L7gFWHcfpm1F0Lxir+6Sq58FSUlW/BVDUt0+qnhf5bef8516MMuR7VyAuRkVU7KOC0hOhUDrtFTSsBGkwBy5fzD5yslXtD5o3mIMbx63GtI6r2uO2mla+Xn5+6VUkipnMryLRgq2loBtwWnIMNV2HUfApxAlK/MX23DDsfabipoZCw7SBYhjCpnmw/YNhI9xKDNaz37mtpNXWSkKlI2iWbCUjtCVrOiYkCcIYUfzBFiWfAYtmbdi6D1hsWug4YPGAkLcd+4RKt3ex5LFP9GOd0ic/IVH0ZTZLP9rs8bNkFkF1wr9hAdXpCjEIdJHx5+ncVbvtjmfQ7Jm7ajd4Pg1rdxzNs7KN0Vh06fLs4uRBG43ZcUA+Z0ZVEOR8xRVGmW7fbKpYOXSRMD5rGul16LeOVN2+QV+OVLMxhInmTbJ8kqONID9gymCUZ5geNA/soM9eI8DJAPw98L1aYKvefsOGkaPBmT4ar7ax4krTv1CeGpplmEYjsjk3CHsf0EKzOuLXA+MLlS576cSHbgfV9xjqU8LbbGup1cLblOAdxiFlbjZOhoQVC5Kr89z6APCGlH8YB5Nn/k7XzjDPNXrHL3kK8OAUHeys1tl+pVOkoJztz+OTTxgFHSjO/mcX66Nu6oMTZxh1ewMO22b6HbWblMqZ/hyHeap/igYosp6rLczvARQ/xjyUfkDRaZsncEyVUHTkPEEOxdH+szvXDkUIat5pD6Aox3/BNmad7n/LuJetFs3uc+W889z+qdFL+iDUSVI9t7ohEjx5syxRrWR3DaftaE0+FK9MdSv4JtEHkyPbU7pNS3tBUjrxxmn+VkoXmzW2+8zYO83HoQ1hT2BW5C+UQceT7IohslhluyI27Dw9Gy951dA79YHuVfQB8Dyl+qDtBpO20jF/IcmDIJUMi1MRJAiOj0j1RpCUjlI58izdTnb++shmBdR3fxdJljPYFY1vxyY+jpvVlb4+DCb/AQ==</diagram></mxfile>
\ No newline at end of file
+<mxfile host="Electron" modified="2024-02-01T08:29:26.062Z" agent="5.0 (Macintosh; Intel Mac OS X 13_4_0) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.9.6 Chrome/89.0.4389.128 Electron/12.0.16 Safari/537.36" etag="UVxsBsrMOb0z3JGtE8pj" version="14.9.6" type="device"><diagram id="Ahhd4kyiwwfnaZKAL9wK" name="第 1 页">7V3bd6I4GP9reGwPEAjwWK3d2XOmO3Ome5vHCFGZQeJCbHX/+k2AKBC0tKuEKvah5AuXkO/7fbdc0MB4ufklQavFIwlwpJl6sNHAvWaawLEh+8cp25xiOKaVU+ZJGOQ0fU94Cv/FxYmCug4DnBa0nEQJiWi4qhJ9EsfYpxUaShLyUj1tRqKgQlihOa40gxOefBRh6bS/woAucqprOnv6JxzOF+LJBvTyminyf84Tso6L58UkxnnNEonbFI9MFyggLyUSmGhgnBBC86PlZowj3q/VHns4ULtrcoJj2uYCZ5uAu4012Xybf3387c/RIg7+uDHtonF0K/oCB6xrimL2OmCUvSDm99FZKf2Jqc/fzWAFktAFmZMYRZ8JWRXEH5jSbcFltKaEkRZ0GRW1rL3J9u/iZlnhOy/c2qJ4vylX3m+L0ozE9AEtw4gTxmQZ+qzhTyhO2b/HJ3ZC/iq8/Qe7qCClZJ34+Ei/CCFEyRzTY/23YyQDByZLzBrMrktwhGj4XG0HKoR0vjtvzy12UDDsDcwr7vuMonXxJG1ia+5E8x74wZ2juSNtAjXP1kY6P3DvtbuJxPCUJuTnTu7NKrOY1K74ecvNnGP/dhaRF3+BEnobIIqmKOXy8bIIKX5aoaxLX9h5bbjFTxByZlSEzKgL2SyMojGJSJI1GMxs/sdPylpeqoHZr7h5iZ7/diLyjBOKN8eFRGZqccGNodsFagp15xbK7mWvOmAB+kVJawjayeXAhN2DuEswmi3BCFWC0ZTBWGdKE0xKXYqmKYnWFN8lftHtGXVfsnYiL8DaihMBShc7XB0CxhH0MeAHIa5cNst+uXrIjRqXqXmE0lTIVx2aXvY7EQQ926wgUPR+CYE7u1uGoAnOhUHQwH4Y0aLHK3IA/1kTUXGTZry9YyeY1mqzr2RH8+z/xNNcm2vuiaONMv09cbODsdDouyexhucPKy6tyx/rcFrT7hUuFYqirG0LEorCecyKPmMQZvQRZ1/I/Ke7omIZBkH0blNwRPhOIi2gJi22LC6G2yQu55IWS5KWe2ZNx7P5W3XG61a2ajoDhN2Z32g6fRdPZ2+zyydhjl5lThNvmqBsnYs3tsSbLysaEt6l184bw3QVM0dEZEO80uD6tHCRDL2Z4934SHDwkbrzkaALe+YjOQd9pHSF4v/jI0kxLg9/LY0FZsxr8nSNd8XOR8ofNvhIVWmBNWlR7iMZcmrq44awbkv97KlUz4acR7j8HjcslV3uSipxhFLMg4En1uozO5yzGYZ+o8MZON5UFz5Mhw4ntKyKFmryNwHs0N/0JP58DZ8JvV4G1cyEAWQOuV6HDBIjSINP2YVPaRnVzLd6n9JoGAQ5kVPJPEpXc0F2YGjM9xmcyjeKC/Bq4qLeqZQzb7+jaXS9Ftd29H4p9Ab93WGGZ5/U+a6VczrqMzyG09KhNZWmeAw5yOce7QND0NnRFdjYDawmdLnmFOzGhTtEF3BABV1QsTtryPFG5s9eK3s8r6r8oGpvVo43MvN0pfwxPdgv/phgME6HbU6bbIur0jiJWYkXwT68CWlxXwiKMr+xcatbory/Ny9sS4WvOAlZp/KYIqMpEQal2U5Tzhw8JORfHF+psq37Kg2z2rp1VnYCdwloVYEvtZEAaJGZUz9N8dAcjAx8+V1NOf9nnpijbQcrTLUaU44eVgnxcZp+yNlLdRafQolaRi3gE/nJkhYFepeTg8XctwGGr8PQawlDcEAKOoKhHCTShPXljCTLXxnTNjjD4wBGu5ra7AEW5cGKBYqDCD8xTF09v4Bh9Y1f8qxuphj4lV0A7LSDBWexdno1f+aI5WTqOCaP7xQce1xHNBzY1uSkuEDOS3fMtkua1tupzwLslj6LqTTzBuRZ9e1mbZ4Zq66Pm7E6dW3L7gFWHcfpm1F0Lxir+6Sq58FSUlW/BVDUt0+qnhf5bef8516MMuR7VyAuRkVU7KOC0hOhUDrtFTSsBGkwBy5fzD5yslXtD5o3mIMbx63GtI6r2uO2mla+Xn5+6VUkipnMryLRgq2loBtwWnIMNV2HUfApxAlK/MX23DDsfabipoZCw7SBYhjCpnmw/YNhI9xKDNaz37mtpNXWSkKlI2iWbCUjtCVrOiYkCcIYUfzBFiWfAYtmbdi6D1hsWug4YPGAkLcd+4RKt3ex5LFP9GOd0ic/IVH0ZTZLP9rs8bNkFkF1wr9hAdXpCjEIdJHx5+ncVbvtjmfQ7Jm7ajd4Pg1rdxzNs7KN0Vh06fLs4uRBG43ZcUA+Z0ZVEOR8xRVGmW7fbKpYOXSRMD5rGul16LeOVN2+QV+OVLMxhInmTbJ8kqONID9gymCUZ5geNA/soM9eI8DJAPw98L1aYKvefsOGkaPBmT4ar7ax4krTv1CeGpplmEYjsjk3CHsf0EKzOuLXA+MLlS576cSHbgfV9xjqU8LbbGup1cLblOAdxiFlbjZOhoQVC5Kr89z6APCGlH8YB5Nn/k7XzjDPNXrHL3kK8OAUHeys1tl+pVOkoJztz+OTTxgFHSjO/mcX66Nu6oMTZxh1ewMO22b6HbWblMqZ/hyHeap/igYosp6rLczvARQ/xjyUfkDRaZsncEyVUHTkPEEOxdH+szvXDkUIat5pD6Aox3/BNmad7n/LuJetFs3uc+W889z+qdFL+iDUSVI9t7ohEjx5syxRrWR3DaftaE0+FK9MdSv4JtEHkyPbU7pNS3tBUjrxxmn+VkoXmzW2+8zYO83HoQ1hT2BW5C+UQceT7IohslhluyI27Dw9Gy951dA79YHuVfQB8Dyl+qDtBpO20jF/IcmDIJUMi1MRJAiOj0j1RpCUjlI58izdTnb++shmBdR3fxdJljPYFY1vxyY+jpvVlb4+DCb/AQ==</diagram></mxfile>
\ No newline at end of file

From 1d1fe4e088c9d888b3faf78ce7ada7ce118aa203 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Thu, 1 Feb 2024 17:57:26 +0800
Subject: [PATCH 53/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E7=BB=84=E4=BB=B6=20&=20=E8=A1=8C=E5=88=97=E5=AE=BD?=
 =?UTF-8?q?=E9=AB=98=E6=8B=96=E6=8B=BD=20&=20=E8=BF=81=E7=A7=BB=E6=8C=87?=
 =?UTF-8?q?=E5=8D=97=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-core/CHANGELOG.md                 |   2 +-
 .../s2-core/__tests__/bugs/issue-1191-spec.ts |   2 +-
 .../s2-core/__tests__/bugs/issue-1624-spec.ts |   2 +-
 ...interaction-brush-selection-scroll-spec.ts |   2 +-
 .../spreadsheet/sort-by-order-spec.ts         |   2 +-
 .../spreadsheet/spread-sheet-spec.ts          |  15 +--
 .../unit/ui/hd-adapter/index-spec.ts          |   2 +-
 .../utils/__snapshots__/merge-spec.ts.snap    |   2 +-
 packages/s2-core/__tests__/util/helpers.ts    |   4 +-
 .../s2-core/src/common/constant/options.ts    |   2 +-
 .../s2-core/src/common/interface/s2Options.ts |   6 +-
 .../s2-core/src/sheet-type/spread-sheet.ts    |   2 +-
 .../__tests__/spreadsheet/adaptive-spec.tsx   |   2 +-
 .../__tests__/spreadsheet/tooltip-spec.tsx    |   2 +-
 .../sheets/mobile-sheet/index-spec.tsx        |   2 +-
 .../__tests__/unit/hooks/useEvents-spec.ts    |   2 +-
 .../__tests__/unit/hooks/useLoading-spec.ts   |   2 +-
 .../unit/hooks/usePagination-spec.ts          |   2 +-
 .../__tests__/unit/hooks/useResize-spec.ts    |   2 +-
 .../unit/hooks/useSpreadSheet-spec.ts         |   2 +-
 packages/s2-react/playground/config.tsx       |   2 +-
 .../src/components/advanced-sort/index.tsx    |   4 +-
 .../utils/__snapshots__/options-spec.ts.snap  |   2 +-
 s2-site/.dumirc.ts                            |   2 +-
 .../docs/api/basic-class/spreadsheet.en.md    |   2 +-
 .../docs/api/basic-class/spreadsheet.zh.md    |   3 +-
 s2-site/docs/api/components/drill-down.zh.md  |   7 +-
 .../docs/api/components/sheet-component.zh.md |   1 +
 s2-site/docs/api/general/S2Options.en.md      |   2 +-
 s2-site/docs/api/general/S2Options.zh.md      |   2 +-
 .../sort => advanced/analysis}/advanced.en.md |   0
 .../sort => advanced/analysis}/advanced.zh.md |  34 +++---
 .../manual/advanced/analysis/drill-down.zh.md |   9 +-
 .../advanced/analysis/editable-mode.zh.md     |  12 +-
 .../manual/advanced/analysis/export.en.md     |   2 +-
 .../manual/advanced/analysis/export.zh.md     |   4 +-
 .../manual/advanced/analysis/header.zh.md     |  24 +++-
 .../manual/advanced/analysis/strategy.zh.md   |   2 +-
 .../manual/advanced/analysis/switcher.en.md   |   2 +-
 .../manual/advanced/analysis/switcher.zh.md   |   4 +-
 s2-site/docs/manual/advanced/hd-adapter.en.md |   6 +-
 s2-site/docs/manual/advanced/hd-adapter.zh.md |  25 +++--
 .../manual/advanced/interaction/basic.zh.md   |  59 +---------
 .../manual/advanced/interaction/resize.en.md  |   4 +
 .../manual/advanced/interaction/resize.zh.md  |  87 +++++++++++++++
 .../manual/advanced/interaction/scroll.zh.md  |   2 +-
 s2-site/docs/manual/basic/sort/basic.zh.md    |  40 ++++---
 s2-site/docs/manual/migration-v2.zh.md        | 104 ++++++++++++++++--
 s2-site/examples/case/art/demo/lost-text.tsx  |   4 +-
 .../examples/interaction/basic/demo/meta.json |   4 +-
 .../examples/interaction/basic/demo/resize.ts |  43 +++++++-
 51 files changed, 379 insertions(+), 178 deletions(-)
 rename s2-site/docs/manual/{basic/sort => advanced/analysis}/advanced.en.md (100%)
 rename s2-site/docs/manual/{basic/sort => advanced/analysis}/advanced.zh.md (75%)
 create mode 100644 s2-site/docs/manual/advanced/interaction/resize.en.md
 create mode 100644 s2-site/docs/manual/advanced/interaction/resize.zh.md

diff --git a/packages/s2-core/CHANGELOG.md b/packages/s2-core/CHANGELOG.md
index d2bec1e76c..453f4842c6 100644
--- a/packages/s2-core/CHANGELOG.md
+++ b/packages/s2-core/CHANGELOG.md
@@ -510,7 +510,7 @@
 
 * 🐛 明细表大数据量下滚动条无法滚动到顶部 ([#1529](https://github.com/antvis/S2/issues/1529)) ([2791be9](https://github.com/antvis/S2/commit/2791be9769b3082bdfe8ae9a8ae0831ca821251a)), closes [#1528](https://github.com/antvis/S2/issues/1528)
 * **drill-down:** values 配置为空时未显示下钻 icon ([#1535](https://github.com/antvis/S2/issues/1535)) ([8a1d27c](https://github.com/antvis/S2/commit/8a1d27c1a517e7a04d1037ef95b57450adc7df2c))
-* **interaction:** 修复按下快捷选中按钮之后通过触摸板切换页面，快捷键状态没有 reset 的问题 ([#1496](https://github.com/antvis/S2/issues/1496)) ([704e8e0](https://github.com/antvis/S2/commit/704e8e0f4e8cbbeb2b1e0e1dacbd2c3dd13b9dbc))
+* **interaction:** 修复按下快捷选中按钮之后通过触控板切换页面，快捷键状态没有 reset 的问题 ([#1496](https://github.com/antvis/S2/issues/1496)) ([704e8e0](https://github.com/antvis/S2/commit/704e8e0f4e8cbbeb2b1e0e1dacbd2c3dd13b9dbc))
 * **interaction:** 修复链接跳转会触发单选和 Tooltip 显示的问题 ([#1498](https://github.com/antvis/S2/issues/1498)) ([ebcb0c2](https://github.com/antvis/S2/commit/ebcb0c2c663da89c457a2149f6bc19fbde2ab8c9))
 * **theme:** 修复调整序号列后色板丢失 close [#1538](https://github.com/antvis/S2/issues/1538) ([#1543](https://github.com/antvis/S2/issues/1543)) ([6678848](https://github.com/antvis/S2/commit/6678848094c5c707a5586b33117bfd0b968fc302))
 * 优化 mini 图坐标计算逻辑 ([#1534](https://github.com/antvis/S2/issues/1534)) ([88a61e0](https://github.com/antvis/S2/commit/88a61e08b70750401d86e99dd5a6d320a1390da8))
diff --git a/packages/s2-core/__tests__/bugs/issue-1191-spec.ts b/packages/s2-core/__tests__/bugs/issue-1191-spec.ts
index 696f9e0ca1..b648bff8b0 100644
--- a/packages/s2-core/__tests__/bugs/issue-1191-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-1191-spec.ts
@@ -25,7 +25,7 @@ const s2options: S2Options = {
   interaction: {
     linkFields: ['province'],
   },
-  hdAdapter: false,
+  hd: false,
 };
 
 const dataCfg: S2DataConfig = {
diff --git a/packages/s2-core/__tests__/bugs/issue-1624-spec.ts b/packages/s2-core/__tests__/bugs/issue-1624-spec.ts
index 9ce404a029..cc74b2a846 100644
--- a/packages/s2-core/__tests__/bugs/issue-1624-spec.ts
+++ b/packages/s2-core/__tests__/bugs/issue-1624-spec.ts
@@ -12,7 +12,7 @@ import { PivotSheet } from '@/sheet-type';
 const s2Options: S2Options = {
   width: 800,
   height: 600,
-  hdAdapter: false,
+  hd: false,
 };
 
 describe('Data Cell Border Tests', () => {
diff --git a/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts b/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts
index e915671631..d89c6f5beb 100644
--- a/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts
@@ -52,7 +52,7 @@ const dataCfg: S2DataConfig = {
 const options: S2Options = {
   width: 800,
   height: 600,
-  hdAdapter: false,
+  hd: false,
   seriesNumber: {
     enable: true,
   },
diff --git a/packages/s2-core/__tests__/spreadsheet/sort-by-order-spec.ts b/packages/s2-core/__tests__/spreadsheet/sort-by-order-spec.ts
index ab07de4ac3..57f92a5b19 100644
--- a/packages/s2-core/__tests__/spreadsheet/sort-by-order-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/sort-by-order-spec.ts
@@ -6,7 +6,7 @@ const s2Options: S2Options = {
   width: 400,
   height: 400,
   hierarchyType: 'grid',
-  hdAdapter: true,
+  hd: true,
 };
 
 describe('Manual Sort Tests', () => {
diff --git a/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts
index 955b611046..7e3e978f6c 100644
--- a/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts
@@ -14,7 +14,7 @@ const s2Options: S2Options = {
   width: 200,
   height: 200,
   hierarchyType: 'grid',
-  hdAdapter: true,
+  hd: true,
 };
 
 describe('SpreadSheet Tests', () => {
@@ -502,7 +502,7 @@ describe('SpreadSheet Tests', () => {
       const s2 = new PivotSheet(container, mockDataConfig, s2Options);
 
       await s2.render();
-      const emitAttrs = ['width', 'height', 'hierarchyType', 'hdAdapter'];
+      const emitAttrs = ['width', 'height', 'hierarchyType', 'hd'];
       const partialOptions = pick(s2.options, emitAttrs);
 
       expect(partialOptions).toEqual(s2Options);
@@ -510,15 +510,16 @@ describe('SpreadSheet Tests', () => {
       s2.setOptions(
         {
           width: 300,
-          hdAdapter: false,
+          hd: false,
         },
         true,
       );
+
       expect(pick(s2.options, emitAttrs)).toEqual({
         height: DEFAULT_OPTIONS.height,
         hierarchyType: DEFAULT_OPTIONS.hierarchyType,
         width: 300,
-        hdAdapter: false,
+        hd: false,
       });
     });
 
@@ -526,12 +527,12 @@ describe('SpreadSheet Tests', () => {
       const s2 = new PivotSheet(container, mockDataConfig, s2Options);
 
       await s2.render();
-      const emitAttrs = ['width', 'height', 'hierarchyType', 'hdAdapter'];
+      const emitAttrs = ['width', 'height', 'hierarchyType', 'hd'];
 
       s2.setOptions(
         {
           width: 300,
-          hdAdapter: false,
+          hd: false,
         },
         false,
       );
@@ -540,7 +541,7 @@ describe('SpreadSheet Tests', () => {
         height: s2Options.height,
         hierarchyType: s2Options.hierarchyType,
         width: 300,
-        hdAdapter: false,
+        hd: false,
       });
     });
 
diff --git a/packages/s2-core/__tests__/unit/ui/hd-adapter/index-spec.ts b/packages/s2-core/__tests__/unit/ui/hd-adapter/index-spec.ts
index 038de56961..46bfd931d6 100644
--- a/packages/s2-core/__tests__/unit/ui/hd-adapter/index-spec.ts
+++ b/packages/s2-core/__tests__/unit/ui/hd-adapter/index-spec.ts
@@ -13,7 +13,7 @@ describe.skip('HD Adapter Tests', () => {
   const s2Options: S2Options = {
     width: 600,
     height: 600,
-    hdAdapter: true,
+    hd: true,
     transformCanvasConfig() {
       return {
         devicePixelRatio: DPR,
diff --git a/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
index e47d848801..7dc5b6ad85 100644
--- a/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
+++ b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
@@ -15,7 +15,7 @@ Object {
     "trailingColCount": 0,
     "trailingRowCount": 0,
   },
-  "hdAdapter": true,
+  "hd": true,
   "headerActionIcons": Array [],
   "height": 480,
   "hierarchyType": "grid",
diff --git a/packages/s2-core/__tests__/util/helpers.ts b/packages/s2-core/__tests__/util/helpers.ts
index 596827ab0f..ba66984dd1 100644
--- a/packages/s2-core/__tests__/util/helpers.ts
+++ b/packages/s2-core/__tests__/util/helpers.ts
@@ -83,7 +83,7 @@ export const createFakeSpreadSheet = (config?: {
   s2.options = assembleOptions(
     {
       ...DEFAULT_OPTIONS,
-      hdAdapter: false,
+      hd: false,
     },
     s2Options,
   );
@@ -316,7 +316,7 @@ export const createTableSheet = (
     getContainer(),
     useSimpleData ? simpleDataConfig : dataConfig,
     {
-      hdAdapter: false,
+      hd: false,
       ...s2Options,
     },
   );
diff --git a/packages/s2-core/src/common/constant/options.ts b/packages/s2-core/src/common/constant/options.ts
index cd259d6feb..5b186e191a 100644
--- a/packages/s2-core/src/common/constant/options.ts
+++ b/packages/s2-core/src/common/constant/options.ts
@@ -124,7 +124,7 @@ export const DEFAULT_OPTIONS: S2Options = {
     trailingRowCount: 0,
     trailingColCount: 0,
   },
-  hdAdapter: true,
+  hd: true,
   cornerText: '',
   cornerExtraFieldText: '',
   placeholder: EMPTY_PLACEHOLDER,
diff --git a/packages/s2-core/src/common/interface/s2Options.ts b/packages/s2-core/src/common/interface/s2Options.ts
index 55731c2a77..495f3994c1 100644
--- a/packages/s2-core/src/common/interface/s2Options.ts
+++ b/packages/s2-core/src/common/interface/s2Options.ts
@@ -79,6 +79,10 @@ export interface S2BasicOptions<
    */
   pagination?: P;
 
+  /**
+   * 序号列配置
+   * @see https://s2.antv.antgroup.com/manual/basic/sheet-type/pivot-mode#%E5%BA%8F%E5%8F%B7
+   */
   seriesNumber?: {
     /**
      * 是否显示序号
@@ -117,7 +121,7 @@ export interface S2BasicOptions<
    * 是否开启高清适配
    * @see https://s2.antv.antgroup.com/manual/advanced/hd-adapter
    */
-  hdAdapter?: boolean;
+  hd?: boolean;
 
   /**
    * 空值单元格占位符
diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
index 1d3929e21d..fa77c6cf95 100644
--- a/packages/s2-core/src/sheet-type/spread-sheet.ts
+++ b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -242,7 +242,7 @@ export abstract class SpreadSheet extends EE {
   }
 
   private initHdAdapter() {
-    if (this.options.hdAdapter) {
+    if (this.options.hd) {
       this.hdAdapter = new HdAdapter(this);
       this.hdAdapter.init();
     }
diff --git a/packages/s2-react/__tests__/spreadsheet/adaptive-spec.tsx b/packages/s2-react/__tests__/spreadsheet/adaptive-spec.tsx
index 96ff941df0..955802b193 100644
--- a/packages/s2-react/__tests__/spreadsheet/adaptive-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/adaptive-spec.tsx
@@ -19,7 +19,7 @@ interface Props {
 const s2Options: SheetComponentsProps['options'] = {
   width: 200,
   height: 200,
-  hdAdapter: false,
+  hd: false,
 };
 
 let s2: SpreadSheet | null;
diff --git a/packages/s2-react/__tests__/spreadsheet/tooltip-spec.tsx b/packages/s2-react/__tests__/spreadsheet/tooltip-spec.tsx
index 53ec94b800..7d83e3d3f9 100644
--- a/packages/s2-react/__tests__/spreadsheet/tooltip-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/tooltip-spec.tsx
@@ -13,7 +13,7 @@ import { SheetComponent } from '@/components/sheets';
 const s2Options: SheetComponentOptions = {
   width: 200,
   height: 200,
-  hdAdapter: false,
+  hd: false,
   tooltip: {
     enable: true,
   },
diff --git a/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/index-spec.tsx
index 62483bb200..970c47e39b 100644
--- a/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/index-spec.tsx
+++ b/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/index-spec.tsx
@@ -46,7 +46,7 @@ describe('MobileSheet Tests', () => {
         options={{
           height: 300,
           width: 300,
-          hdAdapter: false,
+          hd: false,
           transformCanvasConfig() {
             return {
               devicePixelRatio: 2,
diff --git a/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts b/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts
index d39a4ddd3c..8cfd3adde7 100644
--- a/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts
+++ b/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts
@@ -15,7 +15,7 @@ import { useCellEvent, useEvents, useS2Event } from '@/hooks';
 const s2Options: SheetComponentsProps['options'] = {
   width: 200,
   height: 200,
-  hdAdapter: false,
+  hd: false,
 };
 
 const S2EventCases: Array<{ event: S2Event; name: string }> = [
diff --git a/packages/s2-react/__tests__/unit/hooks/useLoading-spec.ts b/packages/s2-react/__tests__/unit/hooks/useLoading-spec.ts
index 8b8feecdb8..2c5a5e5213 100644
--- a/packages/s2-react/__tests__/unit/hooks/useLoading-spec.ts
+++ b/packages/s2-react/__tests__/unit/hooks/useLoading-spec.ts
@@ -7,7 +7,7 @@ import { useLoading } from '@/hooks';
 const s2Options: S2Options = {
   width: 200,
   height: 200,
-  hdAdapter: false,
+  hd: false,
 };
 
 describe('useLoading tests', () => {
diff --git a/packages/s2-react/__tests__/unit/hooks/usePagination-spec.ts b/packages/s2-react/__tests__/unit/hooks/usePagination-spec.ts
index 4ea1cec56a..60731b3326 100644
--- a/packages/s2-react/__tests__/unit/hooks/usePagination-spec.ts
+++ b/packages/s2-react/__tests__/unit/hooks/usePagination-spec.ts
@@ -9,7 +9,7 @@ import type { SheetComponentsProps } from '@/components/sheets/interface';
 const s2Options: S2Options = {
   width: 200,
   height: 200,
-  hdAdapter: false,
+  hd: false,
   pagination: {
     current: 1,
     pageSize: 5,
diff --git a/packages/s2-react/__tests__/unit/hooks/useResize-spec.ts b/packages/s2-react/__tests__/unit/hooks/useResize-spec.ts
index d73d7bea91..2310009d6d 100644
--- a/packages/s2-react/__tests__/unit/hooks/useResize-spec.ts
+++ b/packages/s2-react/__tests__/unit/hooks/useResize-spec.ts
@@ -7,7 +7,7 @@ import { useResize } from '@/hooks';
 const s2Options: S2Options = {
   width: 200,
   height: 200,
-  hdAdapter: false,
+  hd: false,
 };
 
 describe('useResize tests', () => {
diff --git a/packages/s2-react/__tests__/unit/hooks/useSpreadSheet-spec.ts b/packages/s2-react/__tests__/unit/hooks/useSpreadSheet-spec.ts
index f66ef38e60..974416c429 100644
--- a/packages/s2-react/__tests__/unit/hooks/useSpreadSheet-spec.ts
+++ b/packages/s2-react/__tests__/unit/hooks/useSpreadSheet-spec.ts
@@ -16,7 +16,7 @@ import type { SheetComponentsProps } from '@/components';
 const s2Options: SheetComponentsProps['options'] = {
   width: 200,
   height: 200,
-  hdAdapter: false,
+  hd: false,
 };
 
 describe('useSpreadSheet tests', () => {
diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx
index 0744b36154..0081510f1a 100644
--- a/packages/s2-react/playground/config.tsx
+++ b/packages/s2-react/playground/config.tsx
@@ -328,7 +328,7 @@ export const s2Options: SheetComponentOptions = {
     hoverAfterScroll: true,
     selectedCellMove: true,
     rangeSelection: true,
-    // 防止 mac 触摸板横向滚动触发浏览器返回, 和移动端下拉刷新
+    // 防止 mac 触控板横向滚动触发浏览器返回, 和移动端下拉刷新
     overscrollBehavior: 'none',
     brushSelection: {
       dataCell: true,
diff --git a/packages/s2-react/src/components/advanced-sort/index.tsx b/packages/s2-react/src/components/advanced-sort/index.tsx
index 98fb55d31d..6d931c17c0 100644
--- a/packages/s2-react/src/components/advanced-sort/index.tsx
+++ b/packages/s2-react/src/components/advanced-sort/index.tsx
@@ -56,8 +56,8 @@ export interface AdvancedSortBaseProps {
   open: boolean;
   className?: string;
   icon?: React.ReactNode;
-  text?: string;
-  ruleText?: string;
+  text?: React.ReactNode;
+  ruleText?: React.ReactNode;
   dimensions?: Dimension[];
   ruleOptions?: RuleOption[];
   sortParams?: SortParam[];
diff --git a/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
index b8b5ab8f0a..a0635acd4e 100644
--- a/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
+++ b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
@@ -15,7 +15,7 @@ Object {
     "trailingColCount": 0,
     "trailingRowCount": 0,
   },
-  "hdAdapter": true,
+  "hd": true,
   "headerActionIcons": Array [],
   "height": 480,
   "hierarchyType": "grid",
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 47cf4176bd..0071a375b5 100644
--- a/s2-site/.dumirc.ts
+++ b/s2-site/.dumirc.ts
@@ -302,7 +302,7 @@ export default defineConfig({
     announcement: {
       // icon: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1PTTQLk3j5AAAAAAAAAAAAAADmJ7AQ/original',
       title: {
-        zh: '🎉 S2 2.0 版本开始内测啦! 文档焕新计划, 原 1.x 官网已迁移至 https://s2-v1.antv.antgroup.com',
+        zh: '🎉 S2 2.0 版本开始内测啦! 文档焕新升级, 原 1.x 官网已迁移至 https://s2-v1.antv.antgroup.com',
         en: '🎉 S2 Next version 2.0 is in beta! see 1.x docs: https://s2-v1.antv.antgroup.com',
       },
       link: {
diff --git a/s2-site/docs/api/basic-class/spreadsheet.en.md b/s2-site/docs/api/basic-class/spreadsheet.en.md
index c5a1b7d25b..a1d1f136bd 100644
--- a/s2-site/docs/api/basic-class/spreadsheet.en.md
+++ b/s2-site/docs/api/basic-class/spreadsheet.en.md
@@ -23,7 +23,7 @@ s2.isPivotMode()
 | tooltip                    | tooltip                                                                                                                                                                                          | [BaseTooltip](/docs/api/basic-class/base-tooltip)                                                                                                                      |                                                                      |
 | container                  | g-canvas example                                                                                                                                                                                 | [Canvas](https://g.antv.vision/zh/docs/api/canvas)                                                                                                                     |                                                                      |
 | interaction                | interact                                                                                                                                                                                         | [Interaction](/zh/docs/api/basic-class/interaction)                                                                                                                    |                                                                      |
-| hdAdapter                  | HD adaptation                                                                                                                                                                                    | [HdAdapter](https://github.com/antvis/S2/blob/master/packages/s2-core/src/ui/hd-adapter/index.ts)                                                                      |                                                                      |
+| hd                  | HD adaptation                                                                                                                                                                                    | [HdAdapter](https://github.com/antvis/S2/blob/master/packages/s2-core/src/ui/hd-adapter/index.ts)                                                                      |                                                                      |
 | on                         | event subscription                                                                                                                                                                               | (event: [S2Event](/docs/manual/advanced/interaction/basic) , listener: () => void) => void                                                                             |                                                                      |
 | emit                       | event release                                                                                                                                                                                    | (event: [S2Event](/docs/manual/advanced/interaction/basic) , ...args: any\[]) => void                                                                                  |                                                                      |
 | getDataSet                 | get dataset                                                                                                                                                                                      | (options: [S2Options](/docs/api/general/S2Options) ) => [BaseDataSet](/docs/api/basic-class/base-data-set)                                                             |                                                                      |
diff --git a/s2-site/docs/api/basic-class/spreadsheet.zh.md b/s2-site/docs/api/basic-class/spreadsheet.zh.md
index 6005b319fe..1804458660 100644
--- a/s2-site/docs/api/basic-class/spreadsheet.zh.md
+++ b/s2-site/docs/api/basic-class/spreadsheet.zh.md
@@ -1,6 +1,7 @@
 ---
 title: SpreadSheet
 order: 1
+tag: Updated
 ---
 
 功能描述：表格实例相关属性和方法。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/sheet-type/spread-sheet.ts)
@@ -23,7 +24,7 @@ s2.isPivotMode()
 | tooltip | 提示信息                                                                                                                | [BaseTooltip](/docs/api/basic-class/base-tooltip) |    |
 | container | g-canvas 实例                                                                                                            | [Canvas](https://g.antv.antgroup.com/docs/api/canvas) |    |
 | interaction | 交互                                                                                                                     |  [Interaction](/zh/docs/api/basic-class/interaction) |    |
-| hdAdapter | 高清适配                                                                                                                   | [HdAdapter](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/hd-adapter/index.ts) |    |
+| hd | 开启高清适配                                                                                                                   | [HdAdapter](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/hd-adapter/index.ts) |    |
 | on | 事件订阅                                                                                                                   | (event: [S2Event](/docs/manual/advanced/interaction/basic), listener: () => void) => void |    |
 | emit | 事件发布                                                                                                                   | (event: [S2Event](/docs/manual/advanced/interaction/basic), ...args: any[]) => void |    |
 | getDataSet | 获取数据集                                                                                                                  | (options: [S2Options](/docs/api/general/S2Options)) => [BaseDataSet](/docs/api/basic-class/base-data-set) |    |
diff --git a/s2-site/docs/api/components/drill-down.zh.md b/s2-site/docs/api/components/drill-down.zh.md
index 8b4ada095b..c2b157967e 100644
--- a/s2-site/docs/api/components/drill-down.zh.md
+++ b/s2-site/docs/api/components/drill-down.zh.md
@@ -6,13 +6,14 @@ order: 2
 :::warning{title="注意"}
 维度下钻功能需要满足以下两个前置条件：
 
-- 透视表，即 `sheetType="pivot"`
-- 树状模式，即 `hierarchyType="tree"`
+- `透视表`: 即 `sheetType="pivot"`
+- `树状模式`: 即 `hierarchyType="tree"`
+
 :::
 
 ## React 下钻组件 <Badge>@antv/s2-react</Badge>
 
-​查看 [示例](/examples/react-component/drill-dwon#for-pivot)
+[​查看示例](/examples/react-component/drill-dwon#for-pivot)
 
 ```jsx
 const s2Options = {
diff --git a/s2-site/docs/api/components/sheet-component.zh.md b/s2-site/docs/api/components/sheet-component.zh.md
index 1fc9035f0b..bc53d783c4 100644
--- a/s2-site/docs/api/components/sheet-component.zh.md
+++ b/s2-site/docs/api/components/sheet-component.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 表组件
 order: 0
+tag: Updated
 ---
 
 ## React 表组件 <Badge>@antv/s2-react</Badge>
diff --git a/s2-site/docs/api/general/S2Options.en.md b/s2-site/docs/api/general/S2Options.en.md
index ba16f2ec69..32583322e5 100644
--- a/s2-site/docs/api/general/S2Options.en.md
+++ b/s2-site/docs/api/general/S2Options.en.md
@@ -31,7 +31,7 @@ const s2Options = {
 | headerActionIcons           | [HeaderActionIcon\[\]](#headeractionicon)           |          | `false`                   | Customize row and column header action icons (need to set `showDefaultHeaderActionIcon` to `false` )                                                                                                                  |
 | customSVGIcons              | [CustomSVGIcon\[\]](#customsvgicon)                 |          | `false`                   | Custom svg icons                                                                                                                                                                                                      |
 | style                       | [style](#style)                                     |          |                           | Cell style settings, such as layout type, width and height, margin, whether to hide the value column header, etc.                                                                                                     |
-| hdAdapter                   | `boolean`                                           |          | `true`                    | Whether to enable high-definition screen adaptation to solve the problem of blurred font rendering on high-definition retina screens when switching between multiple screens. [see more](/manual/advanced/hd-adapter) |
+| hd                   | `boolean`                                           |          | `true`                    | Whether to enable high-definition screen adaptation to solve the problem of blurred font rendering on high-definition retina screens when switching between multiple screens. [see more](/manual/advanced/hd-adapter) |
 | mergedCellsInfo             | [MergedCellInfo\[\]\[\]](#mergedcellinfo)           |          |                           | Merge cell information                                                                                                                                                                                                |
 | placeholder                 | `string \| (meta: Record<string, any>) => string`   |          |                           | fill content for empty cells                                                                                                                                                                                          |
 | cornerText                  | string                                              |          |                           | Custom corner header text (valid when custom tree `hierarchyType: customTree` )                                                                                                                                       |
diff --git a/s2-site/docs/api/general/S2Options.zh.md b/s2-site/docs/api/general/S2Options.zh.md
index 5577b81dac..1448ccf9cc 100644
--- a/s2-site/docs/api/general/S2Options.zh.md
+++ b/s2-site/docs/api/general/S2Options.zh.md
@@ -31,7 +31,7 @@ const s2Options = {
 | headerActionIcons           | [HeaderActionIcon](#headeractionicon)[]                                                                                                                                                                                      |      | `false` | 自定义行列头操作图标（需要将 `showDefaultHeaderActionIcon` 置为 `false`）                                                                 |
 | customSVGIcons              | [CustomSVGIcon](#customsvgicon)[]                                                                                                                                                                                            |      | `false` | 自定义 svg 图标                                                                                                                           |
 | style                       | [Style](#style)                                                                                                                                                                                                              |      |         | 单元格样式设置，比如布局类型，宽高，边距，是否隐藏数值列头等                                                                              |
-| hdAdapter                   | `boolean`                                                                                                                                                                                                                    |      | `true`  | 是否开启高清屏适配，解决多屏切换，高清视网膜屏字体渲染模糊的问题。[查看更多](/manual/advanced/hd-adapter)                                 |
+| hd                   | `boolean`                                                                                                                                                                                                                    |      | `true`  | 是否开启高清屏适配，解决多屏切换，高清视网膜屏字体渲染模糊的问题。[查看更多](/manual/advanced/hd-adapter)                                 |
 | mergedCellsInfo             | [MergedCellInfo](#mergedcellinfo)[][]                                                                                                                                                                                        |      |         | 合并单元格信息                                                                                                                            |
 | placeholder                 | `string \| (meta: Record<string, any>) => string`                                                                                                                                                                            |      |         | 自定义单元格占位符                                                                                                                        |
 | cornerText                  | string                                                                                                                                                                                                                       |      |         | 自定义角头文本 （仅在树状模式有效）                                                                                                       |
diff --git a/s2-site/docs/manual/basic/sort/advanced.en.md b/s2-site/docs/manual/advanced/analysis/advanced.en.md
similarity index 100%
rename from s2-site/docs/manual/basic/sort/advanced.en.md
rename to s2-site/docs/manual/advanced/analysis/advanced.en.md
diff --git a/s2-site/docs/manual/basic/sort/advanced.zh.md b/s2-site/docs/manual/advanced/analysis/advanced.zh.md
similarity index 75%
rename from s2-site/docs/manual/basic/sort/advanced.zh.md
rename to s2-site/docs/manual/advanced/analysis/advanced.zh.md
index 21dcf4e101..54d272d8cd 100644
--- a/s2-site/docs/manual/basic/sort/advanced.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/advanced.zh.md
@@ -4,9 +4,13 @@ order: 2
 tag: Updated
 ---
 
-`@antv/s2-react` 提供高级排序组件，可选择使用。[查看示例](/examples/analysis/sort#advanced)
+<Badge>@antv/s2-react</Badge>
 
-> 注意：内部不维护状态
+`@antv/s2-react` 基于 `@antv/s2` 的 [排序能力](/manual/basic/sort/basic)，结合 `antd` 封装了 `高级排序组件`，可按需使用。[查看示例](/examples/analysis/sort#advanced)
+
+:::warning{title="注意"}
+组件内部不维护状态，可自行实现成受控模式。
+:::
 
 ## 快速上手
 
@@ -14,9 +18,7 @@ tag: Updated
 
 ```tsx
 import React from 'react';
-import { SortParams } from '@antv/s2';
 import { SheetComponent } from '@antv/s2-react';
-
 import '@antv/s2-react/dist/style.min.css';
 
 export const AdvancedSortDemo = () => {
@@ -32,7 +34,7 @@ export const AdvancedSortDemo = () => {
         advancedSort: {
           open: true,
           sortParams: [{ sortFieldId: 'province', sortMethod: 'DESC' }],
-          onSortConfirm: (ruleValues, sortParams: SortParams) => {
+          onSortConfirm: (ruleValues, sortParams) => {
             setDataCfg({ ...dataCfg, sortParams });
           },
         },
@@ -68,7 +70,7 @@ export const AdvancedSortDemo = () => {
   header={{
     advancedSort: {
       open: true,
-      onSortConfirm: (ruleValues: RuleValue[], sortParams: SortParams) => {
+      onSortConfirm: (ruleValues, sortParams) => {
         console.log(ruleValues, sortParams)
       }
     },
@@ -77,7 +79,7 @@ export const AdvancedSortDemo = () => {
 
 ```
 
-### 定制化
+### 自定义
 
 #### 文案显示
 
@@ -88,11 +90,11 @@ export const AdvancedSortDemo = () => {
 | className    | class 类名称    | `string`            | -      |      |
 | icon    | 排序按钮图标    | `ReactNode`          | -      |      |
 | text    | 排序按钮名称    | `ReactNode`             | -      |      |
-| ruleText    | 规则描述    | `string`            | -      |      |
+| ruleText    | 规则描述    | `ReactNode`            | -      |      |
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*R45ZQK4Xk3kAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*R45ZQK4Xk3kAAAAAAAAAAAAAARQnAQ" width="600"  alt="row" />
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*myN3SYxjPXsAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*myN3SYxjPXsAAAAAAAAAAAAAARQnAQ" width="600"  alt="row" />
 
 #### 维度列表
 
@@ -112,18 +114,24 @@ export const AdvancedSortDemo = () => {
 
 #### 规则列表
 
-支持自定义规则配置列表，不配置默认为：`首字母、手动排序、其他字段`
+支持自定义规则配置列表，默认规则为：`首字母、手动排序、其他字段`
 
-> 注意：如果这里自定义，则需在 onSortConfirm 中通过 ruleValues 自定义 sortParams
+:::warning{title="注意"}
+如果这里自定义，则需在 `onSortConfirm` 中通过 `ruleValues` 自定义 `sortParams`
+:::
 
 | 属性     | 类型                                        | 必选 | 默认值 | 功能描述   |
 | ------- | ------------------------------------------ | --- | ----- | --------- |
 | label    | `string`                                    |      | ✓      | 规则名称   |
 | value    | `'sortMethod' \| 'sortBy' \| 'sortByMeasure'` | ✓    |        | 规则值     |
-| children | `RuleOption[]`                              |      | ✓      | 规则子列表 |
+| children | [RuleOption](/api/components/advanced-sort#ruleoption)[]                              |      | ✓      | 规则子列表 |
 
 <img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*V2PWTItVICQAAAAAAAAAAAAAARQnAQ" width="600" alt="row" />
 
 #### 打开排序弹窗
 
 可通过 `onSortOpen: () => void` 回调来支持自定义打开排序弹窗，一般用于提前获取弹框数据。
+
+## 示例
+
+<Playground path='/analysis/sort/demo/advanced.tsx' rid='advanced-sort'></playground>
diff --git a/s2-site/docs/manual/advanced/analysis/drill-down.zh.md b/s2-site/docs/manual/advanced/analysis/drill-down.zh.md
index 5b9e1c918d..83e820a82a 100644
--- a/s2-site/docs/manual/advanced/analysis/drill-down.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/drill-down.zh.md
@@ -5,7 +5,7 @@ order: 13
 
 <Badge>@antv/s2-react</Badge> <Badge type="success">@antv/s2-vue</Badge>
 
-S2 提供 `维度下钻` 的基础能力，`@antv/s2-react` 和 `@antv/s2-vue` 基于 `@antv/s2-core` 封装了 `维度下钻` 的组件，可以为你挖掘不同维度下更详细的数据，让你的数据洞察变得更清晰。
+S2 提供 `维度下钻` 的基础能力，`@antv/s2-react` 和 `@antv/s2-vue` 基于 `@antv/s2` 封装了 `维度下钻` 的组件，可以为你挖掘不同维度下更详细的数据，让你的数据洞察变得更清晰, 也可以通过下钻的方式实现数据按需渲染。
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/J7bnG8lcf/xiazuan.gif" height="400" alt="preview" />
 
@@ -24,18 +24,19 @@ S2 提供 `维度下钻` 的基础能力，`@antv/s2-react` 和 `@antv/s2-vue` 
 
 向上钻取： 存在向上钻取，查看不同区域的销售数据，您查看浙江省销售额时，可以上钻查看华东区的销售额。
 
-## 快速上手
+## 示例
 
 <details>
 <summary>点击查看 PartDrillDown 维度下钻配置</summary>
 
 ```js
 
-const sex = [ '男', '女' ];
+const sex = ['男', '女'\];
 
 const PartDrillDown = {
   drillConfig: {
-    dataSet: [ // 下钻数据源配置
+    // 下钻数据源配置
+    dataSet: [
       {
         name: '客户性别',
         value: 'sex',
diff --git a/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md b/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md
index fc9dd90aa0..5bc335ff4a 100644
--- a/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md
@@ -5,7 +5,11 @@ order: 3
 
 <Badge>@antv/s2-react</Badge>
 
-编辑表是 `S2` 明细表的衍生形态之一。在提供完整的明细表的分析功能之外，还支持对数据的修改操作（**透视表暂不支持**）。
+编辑表是明细表的衍生形态之一。在提供完整的明细表的分析功能之外，还支持对数据的修改操作，双击数值单元格后，会添加一个带有 `<input />` 的  `div` 蒙层，定位到当前单元格上方，从而实现数据的编辑能力。
+
+:::warning{title="注意"}
+**透视表**定位更多是看数分析，暂不支持编辑能力，如有必要，或者想直接使用 `@antv/s2` 实现编辑功能，可参考 [明细表的实现](https://github.com/antvis/S2/blob/next/packages/s2-react/src/components/sheets/editable-sheet/custom-cell/edit-cell/index.tsx) 自行封装。
+:::
 
 <img alt="editable-mode" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*9RoBT5FIJG0AAAAAAAAAAAAAARQnAQ" width="600" />
 
@@ -172,8 +176,6 @@ const App = () => {
 }
 ```
 
-## 效果
-
-[查看示例](/examples/react-component/sheet#editable)
+## 示例
 
-<Playground path='s2-site/examples/react-component/sheet/demo/editable.tsx' rid='editable'></playground>
+<Playground path='react-component/sheet/demo/editable.tsx' rid='editable'></playground>
diff --git a/s2-site/docs/manual/advanced/analysis/export.en.md b/s2-site/docs/manual/advanced/analysis/export.en.md
index e77eb772c3..fe0d331544 100644
--- a/s2-site/docs/manual/advanced/analysis/export.en.md
+++ b/s2-site/docs/manual/advanced/analysis/export.en.md
@@ -1,6 +1,6 @@
 ---
 title: Export
-order: 11
+order: 3
 tag: Updated
 ---
 
diff --git a/s2-site/docs/manual/advanced/analysis/export.zh.md b/s2-site/docs/manual/advanced/analysis/export.zh.md
index 95466e30e1..017fde04aa 100644
--- a/s2-site/docs/manual/advanced/analysis/export.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/export.zh.md
@@ -1,12 +1,12 @@
 ---
 title: 导出
-order: 11
+order: 3
 tag: Updated
 ---
 
 <Badge>@antv/s2</Badge> <Badge>@antv/s2-react</Badge>
 
-`@antv/s2` 提供了 [复制导出的基础能力](/manual/advanced/interaction/copy), `@antv/s2-react` 组件层基于 `@antv/s2` 封装了开箱即用的导出功能。
+`@antv/s2` 提供了 [复制导出的基础能力](/manual/advanced/interaction/copy), `@antv/s2-react` 组件层基于 `@antv/s2` 和 `antd` 封装了开箱即用的导出功能。
 
 ## 使用
 
diff --git a/s2-site/docs/manual/advanced/analysis/header.zh.md b/s2-site/docs/manual/advanced/analysis/header.zh.md
index 855ce8672d..b3612f87de 100644
--- a/s2-site/docs/manual/advanced/analysis/header.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/header.zh.md
@@ -8,7 +8,7 @@ tag: Updated
 
 表头组件基于 `@antv/s2` 和 `antd` 进行封装，内置了 `标题`, `描述`, `行列切换`, `高级排序`, `导出` 等能力。
 
-<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Pui0SaMs910AAAAAAAAAAAAADmJ7AQ/original" width="600" alt="header"/>
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Pui0SaMs910AAAAAAAAAAAAADmJ7AQ/original" width="600" alt="header" />
 
 ## 快速上手
 
@@ -53,12 +53,28 @@ const App = () => {
 
 ```
 
-## 效果
-
-[查看示例](/examples/react-component/header#default)
+## 示例
 
 <Playground path='/react-component/header/demo/default.tsx' rid='header'></playground>
 
+## 维度切换组件
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*FTYGTLw7e5wAAAAAAAAAAAAAARQnAQ" width="600" alt="switcher" />
+
+具体请查看 [维度切换](/manual/advanced/analysis/swticher) 章节。
+
+## 导出组件
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*pfSsTrvuJ0UAAAAAAAAAAAAAARQnAQ" width="600" alt="export" />
+
+具体请查看 [导出](/manual/advanced/analysis/export) 章节。
+
+## 高级排序组件
+
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*R45ZQK4Xk3kAAAAAAAAAAAAAARQnAQ" width="600" alt="advanced-sort" />
+
+具体请查看 [高级排序](/manual/advanced/analysis/advanced) 章节。
+
 ## API
 
 <embed src="@/docs/common/header.zh.md"></embed>
diff --git a/s2-site/docs/manual/advanced/analysis/strategy.zh.md b/s2-site/docs/manual/advanced/analysis/strategy.zh.md
index 56ae9c0ac7..887fc35ff6 100644
--- a/s2-site/docs/manual/advanced/analysis/strategy.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/strategy.zh.md
@@ -1,5 +1,5 @@
 ---
-title: 趋势分析表组件
+title: 趋势分析表
 order: 9
 tag: Updated
 ---
diff --git a/s2-site/docs/manual/advanced/analysis/switcher.en.md b/s2-site/docs/manual/advanced/analysis/switcher.en.md
index 9b650e6845..ef12323d9e 100644
--- a/s2-site/docs/manual/advanced/analysis/switcher.en.md
+++ b/s2-site/docs/manual/advanced/analysis/switcher.en.md
@@ -1,6 +1,6 @@
 ---
 title: Switcher
-order: 10
+order: 2
 ---
 
 S2 provides out-of-the-box dimension switching component `Switcher` . With it, you can easily implement interactive row and column switching, as well as the function of dimension hiding.
diff --git a/s2-site/docs/manual/advanced/analysis/switcher.zh.md b/s2-site/docs/manual/advanced/analysis/switcher.zh.md
index 1bf6f1f477..d4d0303e75 100644
--- a/s2-site/docs/manual/advanced/analysis/switcher.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/switcher.zh.md
@@ -1,6 +1,6 @@
 ---
-title: 维度切换组件
-order: 10
+title: 维度切换
+order: 2
 ---
 
 <Badge>@antv/s2-react</Badge>
diff --git a/s2-site/docs/manual/advanced/hd-adapter.en.md b/s2-site/docs/manual/advanced/hd-adapter.en.md
index 4b0019164e..d6904e4c13 100644
--- a/s2-site/docs/manual/advanced/hd-adapter.en.md
+++ b/s2-site/docs/manual/advanced/hd-adapter.en.md
@@ -12,7 +12,7 @@ HD adaptation is enabled by default and can be manually disabled
 
 ```ts
 const s2Options = {
-  hdAdapter: false
+  hd: false
 }
 ```
 
@@ -54,7 +54,7 @@ Different from the browser's zoom in and zoom out, ordinary `resize` events cann
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/gBRpqwZkj/a14f1e5a-540e-4bb8-a6a4-2ff693542296.png)
 
 ```ts
-// 触摸板双指缩放 无法触发
+// 触控板双指缩放 无法触发
 window.addEventListener('resize', ...)
 ```
 
@@ -66,7 +66,7 @@ touchpad pinch zoom
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/ZDSjxFBGd/Kapture%2525202021-10-19%252520at%25252014.27.00.gif)
 
-So what if it is solved? The answer is to use the [VisualViewport API](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport) , `VisualViewport` can be used as a pinch zoom monitor on the mobile terminal, and it is also applicable to the `mac 触摸板`
+So what if it is solved? The answer is to use the [VisualViewport API](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport) , `VisualViewport` can be used as a pinch zoom monitor on the mobile terminal, and it is also applicable to the `mac 触控板`
 
 ```ts
 window.viewport?.visualViewport?.addEventListener(
diff --git a/s2-site/docs/manual/advanced/hd-adapter.zh.md b/s2-site/docs/manual/advanced/hd-adapter.zh.md
index 52346c76f4..f08763372f 100644
--- a/s2-site/docs/manual/advanced/hd-adapter.zh.md
+++ b/s2-site/docs/manual/advanced/hd-adapter.zh.md
@@ -1,30 +1,31 @@
 ---
 title: 高清适配
 order: 7
+tag: Updated
 ---
 
 S2 基于 `Canvas` 渲染，在实际的业务场景开发中，我们发现有以下使用场景会导致 **表格渲染模糊**
 
-1. 不同 `DPR` 的设备之间来回切换：比如一台 mac （视网膜屏）, 外接一台显示器 （普通 2k 屏）, 将浏览器移到外接设备查看
-2. 使用 `mac` 触摸板对页面进行缩放：双指缩放，来放大显示，而不是传统的 `cmd` + `+`, `cmd` + `-` 缩放浏览器窗口大小
+1. **不同 `DPR` 的设备之间来回切换**：比如一台 MacBook（视网膜屏）, 外接一台显示器 （普通 2k 屏）, 将浏览器移到外接设备查看。
+2. **使用 `笔记本触控板` 对页面进行双指捏合缩放**：使用双指缩放，来放大显示，而不是传统的 `cmd` + `+`, `cmd` + `-` 缩放浏览器窗口大小。
 
-默认开启高清适配，可以手动关闭
+高清适配默认开启，可以手动关闭
 
 ```ts
 const s2Options = {
-  hdAdapter: false
+  hd: false
 }
 ```
 
-首先看一下开启前后的对比图
+## 效果对比
 
 关闭高清适配
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/mc5rt%24aNB/128c0063-67a5-4d06-a5a5-fe5f341fa94e.png" width="600" alt="preview" />
+<img src="https://gw.alipayobjects.com/zos/antfincdn/mc5rt%24aNB/128c0063-67a5-4d06-a5a5-fe5f341fa94e.png" width="800" alt="disable" />
 
 开启高清适配
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/TtuUHO%26Pb/d32dc287-af59-4b1c-ba7d-17dacd4ffa24.png" width="600" alt="preview" />
+<img src="https://gw.alipayobjects.com/zos/antfincdn/TtuUHO%26Pb/d32dc287-af59-4b1c-ba7d-17dacd4ffa24.png" width="800" alt="enable" />
 
 ## 不同 DPR 设备间切换
 
@@ -47,14 +48,16 @@ const renderByDevicePixelRatio = (ratio = window.devicePixelRatio) => {
 };
 ```
 
-## Mac 触摸板双指缩放
+## 笔记本触控板双指缩放
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rmOLTLaWtGMAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="preview" />
 
 区别于浏览器的放大缩小，普通的 `resize` 事件是无法触发的
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/gBRpqwZkj/a14f1e5a-540e-4bb8-a6a4-2ff693542296.png)
 
 ```ts
-// 触摸板双指缩放 无法触发
+// 触控板双指缩放 无法触发
 window.addEventListener('resize', ...)
 ```
 
@@ -62,11 +65,11 @@ window.addEventListener('resize', ...)
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/%24vCHFUDnZ/Kapture%2525202021-10-19%252520at%25252014.24.19.gif)
 
-触摸板双指缩放
+触控板双指缩放
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/ZDSjxFBGd/Kapture%2525202021-10-19%252520at%25252014.27.00.gif)
 
-那么如果解决呢？答案就是 使用 [VisualViewport API](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport), `VisualViewport` 可以被用做移动端的双指缩放监听，同样适用于 `mac 触摸板`
+那么如果解决呢？答案就是 使用 [VisualViewport API](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport), `VisualViewport` 可以被用做移动端的双指缩放监听，同样适用于 `mac 触控板`
 
 ```ts
 window.viewport?.visualViewport?.addEventListener(
diff --git a/s2-site/docs/manual/advanced/interaction/basic.zh.md b/s2-site/docs/manual/advanced/interaction/basic.zh.md
index 23bcb559d0..196e5bf551 100644
--- a/s2-site/docs/manual/advanced/interaction/basic.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/basic.zh.md
@@ -376,64 +376,9 @@ const s2Options = {
 
 ### 行列宽高调整
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/F6l3SoxBCx/resize.gif" alt="preview" width="600" />
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WdvmQ5pd4BwAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="600" />
 
-S2 默认提供 `列等宽布局` `行列等宽布局`和 `紧凑布局` 三种布局方式 ([预览](/examples/layout/basic#compact)), 也可以拖拽行/列头进行动态调整
-
-可配置 `resize` 控制需要开启的单元格宽高调整热区范围，分为 角头，行头，列头三个部分，默认为全部开启。可以通过设置`boolean` 类型值快捷开启或关闭所有 `resize` 热区，也可以通过对象类型配置各个区域的热区开启或关闭。[查看示例](/examples/interaction/advanced#resize-active)
-
-```ts
-const s2Options = {
-  interaction: {
-    resize: true
-  },
-};
-
-// 等价于
-// const s2Options = {
-//   interaction: {
-//     resize: {
-//       rowCellVertical:true,
-//       cornerCellHorizontal:true,
-//       colCellHorizontal:true,
-//       colCellVertical:true
-//     }
-//   },
-// };
-```
-
-还可以配置 `resize.visible` 和 `resize.disable` 两个属性，分别用于控制 `resize` 热区的显示和自定义拖拽校验逻辑。[查看示例](/examples/interaction/advanced#resize-disable)
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/64tnK5%263K/Kapture%2525202022-07-19%252520at%25252015.40.15.gif" alt="preview" width="600" />
-
-> 例：不允许调小单元格宽度
-
-```ts
-const s2Options = {
-  interaction: {
-    resize: {
-      disable: (resizeInfo) => resizeInfo.resizedWidth <= resizeInfo.width;
-    }
-  },
-};
-```
-
-> 例：只有前 4 个单元格显示 resize 热区
-
-```ts
-const s2Options = {
-  interaction: {
-    resize: {
-      enable: (cell) => {
-        const meta = cell.getMeta();
-        return meta.colIndex < 3
-      }
-    }
-  },
-};
-```
-
-[查看示例](/examples/interaction/basic/#resize)
+查看 [文档](/docs/manual/advanced/interaction/resize) 和 [示例](/examples/interaction/advanced#merge-cell)
 
 ### 合并单元格
 
diff --git a/s2-site/docs/manual/advanced/interaction/resize.en.md b/s2-site/docs/manual/advanced/interaction/resize.en.md
new file mode 100644
index 0000000000..5603705ccb
--- /dev/null
+++ b/s2-site/docs/manual/advanced/interaction/resize.en.md
@@ -0,0 +1,4 @@
+---
+title: Cell Resize
+order: 3
+---
diff --git a/s2-site/docs/manual/advanced/interaction/resize.zh.md b/s2-site/docs/manual/advanced/interaction/resize.zh.md
new file mode 100644
index 0000000000..8865376102
--- /dev/null
+++ b/s2-site/docs/manual/advanced/interaction/resize.zh.md
@@ -0,0 +1,87 @@
+---
+title: 行列宽高调整
+order: 3
+tag: New
+---
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WdvmQ5pd4BwAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="600" />
+
+S2 默认提供 [`行列等宽`](/examples/layout/basic#adaptive), [`列等宽`](/examples/layout/basic#colAdaptive), [`紧凑`](/examples/layout/basic#compact) 三种布局方式，**也可以拖拽行/列头的单元格进行行列宽高动态调整**.
+
+### 基本使用
+
+可配置 `resize` 控制需要开启的单元格宽高调整热区范围，分为 `角头`，`行头`，`列头` 三个部分，默认为**全部开启**。可以通过设置 `boolean` 类型值快捷开启或关闭所有 `resize` 热区，也可以通过对象类型配置各个区域的热区开启或关闭。[查看示例](/examples/interaction/advanced#resize-active)
+
+```ts
+const s2Options = {
+  interaction: {
+    resize: true
+  },
+};
+
+// 等价于
+// const s2Options = {
+//   interaction: {
+//     resize: {
+//       rowCellVertical: true,
+//       cornerCellHorizontal: true,
+//       colCellHorizontal: true,
+//       colCellVertical: true
+//     }
+//   },
+// };
+```
+
+<Playground path="interaction/basic/demo/resize.ts" rid="resize"></playground>
+
+### 热区控制
+
+除了 `rowCellVertical`, `cornerCellHorizontal`, `colCellHorizontal`, `colCellVertical` 便捷的区域热区控制外，还支持 `resize.visible` 动态控制热区是否展示。[查看示例](/examples/interaction/basic#resize)
+
+#### 例：只有前 4 个单元格显示 resize 热区
+
+```ts
+const s2Options = {
+  interaction: {
+    resize: {
+      visible: (cell) => {
+        const meta = cell.getMeta();
+        return meta.colIndex < 3
+      }
+    }
+  },
+};
+```
+
+#### 例：只有某一个单元格系那是 resize 热区
+
+```ts
+const s2Options = {
+  interaction: {
+    resize: {
+      visible: (cell) => {
+        const meta = cell.getMeta();
+        return meta.id === 'root[&]家具[&]桌子[&]数量'
+      }
+    }
+  },
+};
+```
+
+### 拖拽禁用
+
+配置 `resize.disable`，用于控制热区的自定义拖拽校验逻辑。[查看示例](/examples/interaction/advanced#resize-disable)
+
+<img src="https://gw.alipayobjects.com/zos/antfincdn/64tnK5%263K/Kapture%2525202022-07-19%252520at%25252015.40.15.gif" alt="preview" width="600" />
+
+#### 例：不允许调小单元格宽度
+
+```ts
+const s2Options = {
+  interaction: {
+    resize: {
+      disable: (resizeInfo) => resizeInfo.resizedWidth <= resizeInfo.width;
+    }
+  },
+};
+```
diff --git a/s2-site/docs/manual/advanced/interaction/scroll.zh.md b/s2-site/docs/manual/advanced/interaction/scroll.zh.md
index 7cfc86f7f4..898797830a 100644
--- a/s2-site/docs/manual/advanced/interaction/scroll.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/scroll.zh.md
@@ -53,7 +53,7 @@ const s2Options = {
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/38KkNLcWR/Kapture%2525202022-06-06%252520at%25252011.31.55.gif" alt="preview" width="600" />
 
-- `none`: 滚动至边界后，不会触发父容器滚动，同时禁用浏览器的**默认滚动行为**，比如：触发页面**下拉刷新**，**Mac 触摸板横向滚动时触发返回**. [查看更多](https://css-tricks.com/almanac/properties/o/overscroll-behavior/)
+- `none`: 滚动至边界后，不会触发父容器滚动，同时禁用浏览器的**默认滚动行为**，比如：触发页面**下拉刷新**，**Mac 触控板横向滚动时触发返回**. [查看更多](https://css-tricks.com/almanac/properties/o/overscroll-behavior/)
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/8pm8Gr0Qy/437b682d-edbd-4943-a9b7-808b6a3a8461.png" alt="preview" width="600" />
 
diff --git a/s2-site/docs/manual/basic/sort/basic.zh.md b/s2-site/docs/manual/basic/sort/basic.zh.md
index a5bf37d06c..d05dad82af 100644
--- a/s2-site/docs/manual/basic/sort/basic.zh.md
+++ b/s2-site/docs/manual/basic/sort/basic.zh.md
@@ -37,7 +37,7 @@ const s2DataConfig = {
     },
   ],
   ...
-};
+}
 ```
 
 ## 方式
@@ -47,27 +47,31 @@ const s2DataConfig = {
 支持对 `行头/列头` 进行排序，类型包括数字、类数字、普通字符串，非数字兜底使用 **localeCompare** 进行比较，举例如下：
 
 ```ts
-sortParams: [
-  { sortFieldId: 'province', sortMethod: 'DESC' },
-  { sortFieldId: 'type', sortMethod: 'ASC' },
-];
+const s2DataConfig = {
+  sortParams: [
+    { sortFieldId: 'province', sortMethod: 'DESC' },
+    { sortFieldId: 'type', sortMethod: 'ASC' },
+  ]
+}
 ```
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DlG8SYEFlS8AAAAAAAAAAAAAARQnAQ" width = "500"  alt="row" />
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DlG8SYEFlS8AAAAAAAAAAAAAARQnAQ" width="500" alt="row" />
 
 ### 2. 维度值列表（sortBy）
 
 支持对 `行头/列头` 按照指定的维值列表排序，如果行列有多级，则各子级内部进行组内排序（如下 `city` ），举例如下：
 
 ```ts
-sortParams: [
-  { sortFieldId: 'province', sortBy: ['浙江', '吉林'] },
-  { sortFieldId: 'city', sortBy: ['舟山', '杭州', '白山', '长春'] },
-  { sortFieldId: 'type', sortBy: ['纸张', '笔'] },
-];
+const s2DataConfig = {
+  sortParams: [
+    { sortFieldId: 'province', sortBy: ['浙江', '吉林'] },
+    { sortFieldId: 'city', sortBy: ['舟山', '杭州', '白山', '长春'] },
+    { sortFieldId: 'type', sortBy: ['纸张', '笔'] },
+  ]
+}
 ```
 
-<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jD1iTZdrUZwAAAAAAAAAAAAADmJ7AQ/original" width = "500"  alt="row" />
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jD1iTZdrUZwAAAAAAAAAAAAADmJ7AQ/original" width="500" alt="row" />
 
 ### 3. 度量值字段（sortByMeasure）
 
@@ -81,7 +85,7 @@ sortParams: [
 
 - `sortByMeasure` 取具体数值，如 `number`
 - `sortFieldId` 为 `行/列` 维度最后一个字段，如行维度中的 `city`
-- `query` 能限定到最后一级明细数据，如包含所有列维度 `type`、`sub_type` 的维值【见示例1】
+- `query` 能限定到最后一级明细数据，如包含所有列维度 `type`、`sub_type` 的维值【见示例 1】
 
 #### 按汇总数据排序
 
@@ -92,8 +96,8 @@ sortParams: [
 
 - `sortByMeasure` 取 `TOTAL_VALUE`
 - `sortFieldId` 可以取任意维度字段（非末级的 `province` 或末级的 `city`）
-  - 取 `province` 时，`query` 可限定 `type`、`sub_type` 所有维值或部分维值，此时是以 `province` 的行小计交叉格为准【见示例2】
-  - 取 `city` 时，`query` 只可限定到部分列维度，如 `type`，此时以列小计交叉格数据为准【见示例3】
+  - 取 `province` 时，`query` 可限定 `type`、`sub_type` 所有维值或部分维值，此时是以 `province` 的行小计交叉格为准【见示例 2】
+  - 取 `city` 时，`query` 只可限定到部分列维度，如 `type`，此时以列小计交叉格数据为准【见示例 3】
 
 #### 示例 1，明细数据排序
 
@@ -147,7 +151,7 @@ sortParams: [
 
 <image src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8MlDSbozN0gAAAAAAAAAAAAADmJ7AQ/original" width="600" />
 
-#### 示例3，最内侧维度按汇总数据排序
+#### 示例 3，最内侧维度按汇总数据排序
 
 ```javascript
 {
@@ -196,7 +200,7 @@ const s2DataConfig = {
 };
 ```
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*7MLkQLxhliAAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*7MLkQLxhliAAAAAAAAAAAAAAARQnAQ" width="600" alt="row" />
 
 #### 度量值（数值）
 
@@ -227,7 +231,7 @@ const s2DataConfig = {
 };
 ```
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/xZbG1ALW0/cd83b502-cde6-4a7b-a581-36aae26b4028.png" width = "600"  alt="row" />
+<img src="https://gw.alipayobjects.com/zos/antfincdn/xZbG1ALW0/cd83b502-cde6-4a7b-a581-36aae26b4028.png" width="600" alt="row" />
 
 📊 查看 demo [自定义排序](/examples/analysis/sort#custom-sort-func)。
 
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index 453e71d084..fab9517a8b 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -42,7 +42,7 @@ tag: New
 
 ## 不兼容的变化
 
-### `@antv/s2`
+### 基础包 <Badge>@antv/s2</Badge>
 
 #### 底层渲染引擎升级为 `AntV/G 5.0`
 
@@ -190,11 +190,13 @@ const s2Options = {
 });
 ```
 
+3. 复制默认开启。
+
 具体请查看 [复制与导出](/manual/advanced/interaction/copy) 相关文档。
 
 #### 刷选配置调整
 
-`row/col/data` 调整为 `rowCell/colCell/dataCell`, 所有单元格默认开启刷选。
+1. `row/col/data` 调整为 `rowCell/colCell/dataCell`。
 
 ```diff
 const s2Options = {
@@ -214,6 +216,8 @@ const s2Options = {
 }
 ```
 
+2. 所有单元格默认开启刷选。
+
 具体请查看 [基础交互](/manual/advanced/interaction/basic) 相关文档。
 
 #### headerActionIcons 配置调整
@@ -352,7 +356,93 @@ const s2Options = {
 }
 ```
 
-### `@antv/s2-react`
+### 高清适配配置调整
+
+```diff
+const s2Options = {
+-  hdAdapter: true,
++  hd: true,
+}
+```
+
+### 序号配置变更
+
+序号相关配置统一收拢在 `seriesNumber`
+
+```diff
+const s2Options = {
+- showSeriesNumber: true,
+- seriesNumberText: '序号';
+
++ seriesNumber: {
++   enable: true;
++   text: '序号';
++ }
+}
+```
+
+### 单元格宽高拖拽逻辑变更
+
+1. 在 `1.x` 中，宽高调整对所有单元格生效，`2.x` 新增 `rowResizeType/colResizeType` 选择对当前还是所有单元格生效。
+
+```diff
+const s2Options = {
+  interaction: {
+    resize: {
++     rowResizeType: 'current', // 'all'
++     colResizeType: 'current'  // 'all'
+    }
+  }
+}
+```
+
+2. 默认调整只对当前单元格生效。
+
+具体请查看 [行列宽高调整](/manual/advanced/interaction/basic#%E8%A1%8C%E5%88%97%E5%AE%BD%E9%AB%98%E8%B0%83%E6%95%B4) 相关文档。
+
+### Facet 变更
+
+1. 静态属性 `layoutResult` 废弃，使用 `s2.facet.getLayoutResult()` 动态获取。
+
+```diff
+- s2.facet.layoutResult
++ s2.facet.getLayoutResult()
+```
+
+2. `getCellMeta` 从 `layoutResult` 中移除，移动到 `facet` 层级，现在 `layoutResult` 只包含布局节点。
+
+```diff
+- s2.facet.layoutResult.getCellMeta(rowIndex, colIndex)
++ s2.facet.getCellMeta(rowIndex, colIndex)
+```
+
+3. 布局结构 `layoutResult` 新增 `角头节点 (cornerNodes)` 和 `序号节点 (seriesNumberNodes)`
+
+```diff
+export interface LayoutResult {
+  colNodes: Node[];
+  colLeafNodes: Node[];
+  colsHierarchy: Hierarchy;
+  rowNodes: Node[];
+  rowsHierarchy: Hierarchy;
+  rowLeafNodes: Node[];
+- getCellMeta: (rowIndex: number, colIndex: number) => ViewMeta
++ seriesNumberNodes?: Node[];
++ cornerNodes?: Node[];
+}
+```
+
+具体请查看 [获取单元格数据](/manual/advanced/get-cell-data) 相关文档。
+
+### 数据集处理逻辑变更
+
+TODO:
+
+### 边框绘制逻辑变更
+
+TODO:
+
+### 组件层 `@antv/s2-react`
 
 #### 支持 React 18 和 Ant Design 5.0
 
@@ -421,13 +511,7 @@ const header = {
 
 ## API 调整
 
-### `@antv/s2`
-
-TODO:
-
-### `@antv/s2-react`
-
-TODO:
+具体请查看标记为 <Badge type="success">New</Badge> 和 <Badge>Updated</Badge> 的 [`API 文档`](/api)
 
 ## 未来迭代计划
 
diff --git a/s2-site/examples/case/art/demo/lost-text.tsx b/s2-site/examples/case/art/demo/lost-text.tsx
index 99e6d747e6..df735452e6 100644
--- a/s2-site/examples/case/art/demo/lost-text.tsx
+++ b/s2-site/examples/case/art/demo/lost-text.tsx
@@ -206,12 +206,12 @@ export const s2Options = {
   width: 600,
   height: 400,
   seriesNumber: {
-    enable: false
+    enable: false,
   },
   showDefaultHeaderActionIcon: false,
   interaction: {
     copy: { enable: true },
-    // 防止 mac 触摸板横向滚动触发浏览器返回, 和移动端下拉刷新
+    // 防止 mac 触控板横向滚动触发浏览器返回, 和移动端下拉刷新
     overscrollBehavior: 'none',
     brushSelection: {
       data: true,
diff --git a/s2-site/examples/interaction/basic/demo/meta.json b/s2-site/examples/interaction/basic/demo/meta.json
index 6d089f3c9a..42631712bb 100644
--- a/s2-site/examples/interaction/basic/demo/meta.json
+++ b/s2-site/examples/interaction/basic/demo/meta.json
@@ -55,10 +55,10 @@
     {
       "filename": "resize.ts",
       "title": {
-        "zh": "行高列宽调整",
+        "zh": "行列宽高调整",
         "en": "Resize Height And Width"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/F6l3SoxBCx/resize.gif"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WdvmQ5pd4BwAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
       "filename": "auto-reset-sheet-style.ts",
diff --git a/s2-site/examples/interaction/basic/demo/resize.ts b/s2-site/examples/interaction/basic/demo/resize.ts
index d3bf6bb77c..10db2736c6 100644
--- a/s2-site/examples/interaction/basic/demo/resize.ts
+++ b/s2-site/examples/interaction/basic/demo/resize.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, S2Options } from '@antv/s2';
+import { PivotSheet, ResizeType, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
@@ -12,11 +12,50 @@ fetch(
       height: 480,
       interaction: {
         hoverHighlight: true,
-        selectedCellsSpotlight: true,
+        // resize: true,
+        resize: {
+          // 热区是否展示
+          visible: (cell) => true,
+          // 是否禁用拖拽
+          disable: (resizeInfo) => {
+            return resizeInfo.meta.id === 'root[&]家具[&]桌子[&]数量';
+          },
+          // 行高调整时，影响全部行
+          rowResizeType: ResizeType.ALL,
+          // 列宽调整时，只影响当前列
+          colResizeType: ResizeType.CURRENT,
+        },
       },
     };
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
+    // 支持通过调整主题修改热区大小/颜色
+    s2.setTheme({
+      resizeArea: {
+        // 这里默认将热区显示, 仅供演示使用, 请勿无脑复制.
+        backgroundOpacity: 1,
+
+        // 热区大小
+        size: 3,
+        // 热区背景色
+        background: '#326EF4',
+        // 拖拽参考线颜色
+        guideLineColor: '#326EF4',
+        // 拖拽参考线禁用颜色
+        guideLineDisableColor: 'rgba(0,0,0,0.25)',
+        //  参考线间隔
+        guideLineDash: [3, 3],
+        // 交互状态
+        interactionState: {
+          // 热区 hover 时的背景色和透明度
+          hover: {
+            backgroundColor: '#326EF4',
+            backgroundOpacity: 1,
+          },
+        },
+      },
+    });
+
     await s2.render();
   });

From 77a8aa91719899b248c96facbfd9237a4e6afc23 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 2 Feb 2024 13:53:54 +0800
Subject: [PATCH 54/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CONTRIBUTING.en-US.md                         |   2 +-
 CONTRIBUTING.md                               |  55 ++++----
 README.en-US.md                               |  30 ++--
 README.md                                     |  30 ++--
 packages/s2-core/README.en-US.md              |   8 +-
 packages/s2-core/README.md                    |  10 +-
 .../src/common/interface/interaction.ts       |   6 +-
 .../s2-core/src/common/interface/resize.ts    |   2 +
 .../s2-core/src/facet/mobile/wheelEvent.ts    |   2 +-
 s2-site/docs/api/basic-class/base-cell.en.md  |   2 +-
 .../docs/api/basic-class/base-data-set.en.md  |   2 +-
 s2-site/docs/api/basic-class/base-facet.en.md |   2 +-
 .../docs/api/basic-class/base-tooltip.en.md   |   2 +-
 .../docs/api/basic-class/interaction.en.md    |   2 +-
 s2-site/docs/api/basic-class/node.en.md       |   2 +-
 .../docs/api/basic-class/spreadsheet.en.md    |   4 +-
 s2-site/docs/api/basic-class/store.en.md      |   2 +-
 s2-site/docs/api/general/S2Event.en.md        |   2 +-
 s2-site/docs/api/general/S2Theme.zh.md        |   2 +-
 s2-site/docs/common/env.en.md                 |   2 +-
 s2-site/docs/common/env.zh.md                 |   2 +-
 s2-site/docs/common/packages.en.md            |   6 +-
 s2-site/docs/common/packages.zh.md            |   6 +-
 .../manual/advanced/analysis/pagination.en.md |   4 +-
 .../docs/manual/advanced/custom/hook.en.md    |   8 +-
 s2-site/docs/manual/advanced/hd-adapter.en.md |   2 +-
 .../manual/advanced/interaction/custom.en.md  |   2 +-
 .../manual/advanced/interaction/resize.zh.md  | 129 ++++++++++++++++--
 .../manual/basic/analysis/pagination.zh.md    |   4 +-
 s2-site/docs/manual/basic/i18n.en.md          |   2 +-
 s2-site/docs/manual/basic/i18n.zh.md          |   2 +-
 s2-site/docs/manual/basic/theme.en.md         |   2 +-
 s2-site/docs/manual/basic/tooltip.en.md       |   6 +-
 s2-site/docs/manual/contribution.en.md        |   2 +-
 s2-site/docs/manual/contribution.zh.md        |   2 +-
 s2-site/docs/manual/faq.zh.md                 |   2 +-
 s2-site/docs/manual/introduction.en.md        |   2 +-
 s2-site/docs/manual/introduction.zh.md        |   2 +-
 s2-site/docs/manual/migration-v2.zh.md        |  44 +++---
 .../custom-cell/demo/custom-specified-cell.ts |   6 +-
 .../custom-cell/demo/custom-table-cell.ts     |   6 +-
 .../custom/custom-cell/demo/mini-chart.ts     |   2 +-
 .../custom/custom-cell/demo/totals-cell.ts    |   2 +-
 .../demo/custom-strategy-sheet-dataset.ts     |   2 +-
 .../advanced/demo/resize-active.ts            |  15 +-
 .../examples/interaction/basic/demo/resize.ts |   8 --
 46 files changed, 283 insertions(+), 156 deletions(-)

diff --git a/CONTRIBUTING.en-US.md b/CONTRIBUTING.en-US.md
index 4b8eaa1a40..8e2c9de096 100644
--- a/CONTRIBUTING.en-US.md
+++ b/CONTRIBUTING.en-US.md
@@ -11,7 +11,7 @@ a cool [pull request](https://github.com/antvis/S2/pulls), or a DingTalk group d
 
 ## Branch Management
 
-Currently, we are developing based on the `master` branch. Please check out a branch based on `master,` and Pull Request if you have any modifications. We will review your `PR` for the first time and give you feedback.
+Currently, we are developing based on the `next` branch. Please check out a branch based on `next,` and Pull Request if you have any modifications. We will review your `PR` for the first time and give you feedback.
 
 ## Report bugs
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5f81433362..3f5be49551 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -7,57 +7,64 @@
 
 "我代码水平不行", "会不会受到鄙视？", "会不会不太好？", 放心，不存在的！
 
-我们欢迎任何形式的贡献，不管是一个错别字的修改，还是一次友好的建议，不管是通过 提交 [Issue](https://github.com/antvis/S2/issues/new/choose)
-还是一个帅气 [pull request](https://github.com/antvis/S2/pulls), 亦或是一次钉钉群的讨论，参与 [discussions](https://github.com/antvis/S2/discussions) 的讨论，期待在 [贡献者列表](https://github.com/antvis/S2/graphs/contributors) 里看见你的头像。
+我们欢迎任何形式的贡献，不管是一个**错别字的修改**，还是**一次友好的建议**，不管是通过提交 [Issue](https://github.com/antvis/S2/issues/new/choose), 还是一个帅气 [pull request](https://github.com/antvis/S2/pulls), 亦或是一次钉钉群的讨论，参与 [discussions](https://github.com/antvis/S2/discussions) 的讨论，期待在 [贡献者列表](https://github.com/antvis/S2/graphs/contributors) 里看见你的头像。
 
 ## 分支管理
 
-目前，我们基于 `master` 分支开发，有任何修改，请基于 `master` 拉一个分支，然后通过 `PR` 的形式，我们集成了钉钉机器人，会第一次时间 review 你的 PR, 给与反馈
+目前我们主要基于 `master` 和 `next` 分支开发，有任何修改，请基于 `master` 或 `next` 拉一个分支，然后通过 `PR` 的形式提交，我们集成了钉钉机器人，会第一次时间 `review` 你的 `PR`, 给与反馈。
 
-## 提交 Bug
+- `master`: `1.x` 版本
+- `next`: `2.x` 版本
+- `alpha`: `1.x-alpha.x` 版本
+- `beta`: `1.x-beta.x` 版本
 
-很抱歉又写了一些 bug, 对于没一个 bug report 我们都会非常感激。为了提高沟通效率，请尽量多一些细节描述。
+## 🐛 提交 Bug 反馈
 
-### 错误示范
+很抱歉又写了一些 bug, 但求友好的提交一个有意义的 bug 反馈，谁也不希望反馈的 bug 是这样：
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/j0jUvKwT%26/dd59fe64-7108-4ad7-a544-e19d79eea890.png)
 
-### 推荐步骤
+没有版本信息，没有复现步骤，没有问题描述，没有代码片段，开局一句话，内容全靠猜。
 
-1. 首先选择 [Bug report]
+首先选择 [Bug report](https://github.com/antvis/S2/issues/new?assignees=&labels=&projects=&template=bug-report.md&title=%F0%9F%90%9B)
 
-    ![preview](https://gw.alipayobjects.com/zos/antfincdn/oAnzfiVl2/9d83b3e8-b05c-4475-b736-92c45448546a.png)
+![preview](https://gw.alipayobjects.com/zos/antfincdn/oAnzfiVl2/9d83b3e8-b05c-4475-b736-92c45448546a.png)
 
-2. 按照 Issue 模板 填写相关的信息，是的，这些步骤稍微一些繁琐，但确实必须的，每个用户使用的场景都不同，系统环境，软件版本，又或是需要一些特定的步骤才能复现 bug, 这个时候说清楚，可以节省大家的时间呢～
+按照 [Issue 模板](https://github.com/antvis/S2/tree/next/.github/ISSUE_TEMPLATE) 填写相关信息。
+是的，这些步骤稍微有一些繁琐，但的确是有效且必须的，每个用户使用的场景都不同，系统环境，软件版本，又或是需要一些特定的步骤才能复现 bug, 这个时候说清楚，可以节省大家的时间！
 
-    ![preview](https://gw.alipayobjects.com/zos/antfincdn/05O3p5nE5/d0d4b120-e5aa-4b51-918b-8a573f8fb794.png)
+![preview](https://gw.alipayobjects.com/zos/antfincdn/05O3p5nE5/d0d4b120-e5aa-4b51-918b-8a573f8fb794.png)
 
-## Pull Request
+## 🙋‍♂️ Pull Request
 
-1. fork 项目 并 clone 下来 （或者使用 GitHub 的 Codespace 功能，非常方便）
-2. 安装依赖：`pnpm install`
-3. 提交你的改动，commit 请遵守 [AngularJS Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.uyo6cb12dt6w)
-4. 如果你的改动是修复 bug, 还可以在提交信息后面加上 `close #issue 号`, 这样可以在 pr 合并后，可以自动关闭对应的 issue, 比如 `fix: render bug close #123`
-5. 确保加上了对应的单元测试和文档 (如果有 `Snapshot` UI 快照 (.snap 文件)更新, 可以运行 `yarn core:test -- -u` 和 `yarn react:test -- -u` 自动更新, 并一起提交上来, 请勿手动编辑)
+> 示例 [PR](https://github.com/antvis/S2/pull/1652) (pr 描述参考）
+
+1. fork 项目 并 clone 下来 （或者使用 GitHub 的 Codespaces 功能，非常方便）.
+2. 安装依赖：`pnpm install` 或者 `pnpm bootstrap` 然后本地启动项目。
+3. 提交你的改动，commit 请遵守 [AngularJS Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.uyo6cb12dt6w).
+4. 如果你的改动是修复 bug, 还可以在提交信息后面加上 `close #issue 号`, 这样可以在 pr 合并后，可以自动关闭对应的 issue, 比如 `fix: render bug close #123`.
+5. 确保加上了对应的单元测试和文档 （如果有 `Snapshot` UI 快照 (.snap 文件）更新，可以运行 `pnpm core:test -- -u` 和 `pnpm react:test -- -u` 自动更新，并一起提交上来，请勿手动编辑）
 6. 所有 Lint 和 Test 检查通过后，并且 review 通过，我们会合并你的 pr.
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/ssOxFrycD/86339514-5f9a-4101-8690-e47c97cd8af5.png)
 
 ## 开发流程
 
-我们使用 `pnpm@v7` 作为包管理
+我们使用 `pnpm` 作为包管理
 
 ```bash
 npm i -g pnpm
 ```
 
+推荐本地运行 `pnpm react:playground` 来调试 `@antv/s2` 和 `@antv/s2-react`
+
 1. `pnpm install` 安装依赖
 2. `pnpm site:bootstrap` 安装网站相关依赖
 3. `pnpm site:start` 启动本地的 `S2` 网站
-4. `pnpm core:start` 可视化的方式调试核心层 `@antv/s2` (基于 jest-electron)
-5. `pnpm react:start` 可视化的方式调试组件层 `@antv/s2-react` (基于 jest-electron)
-6. `pnpm vue:start` 可视化的方式调试组件层 `@antv/s2-vue` (基于 jest-electron)
-7. `pnpm react:playground` 启动本地的组件层 `@antv/s2-react` demo (基于 vite)
-8. `pnpm vue:playground` 启动本地的组件层 `@antv/s2-vue` demo (基于 vite)
-9. `pnpm build` 构建 `@antv/s2` 和 `@antv/s2-react` 和 `@antv/s2-vue` 三个包, 分别输出 `umd`, `esm` 和 `lib` 目录
+4. `pnpm core:start` 可视化的方式调试核心层 `@antv/s2` （基于 jest-electron)
+5. `pnpm react:start` 可视化的方式调试组件层 `@antv/s2-react` （基于 jest-electron)
+6. `pnpm vue:start` 可视化的方式调试组件层 `@antv/s2-vue` （基于 jest-electron)
+7. `pnpm react:playground` 启动本地的组件层 `@antv/s2-react` demo （基于 vite)
+8. `pnpm vue:playground` 启动本地的组件层 `@antv/s2-vue` demo （基于 vite)
+9. `pnpm build` 构建 `@antv/s2` 和 `@antv/s2-react` 和 `@antv/s2-vue` 三个包，分别输出 `umd`, `esm` 和 `lib` 目录
 10. `pnpm test` 运行单元格测试
diff --git a/README.en-US.md b/README.en-US.md
index 99b62403fb..3a93ec1ed3 100644
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -21,7 +21,7 @@ A practical visualization library for tabular analysis.
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
   </a>
   <a href="https://codecov.io/gh/antvis/S2" target="_blank">
-    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="test coverage"/>
+    <img src="https://codecov.io/gh/antvis/S2/branch/next/graph/badge.svg" alt="test coverage"/>
   </a>
   <a href="https://github.com/antvis/S2/releases" target="_blank">
     <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/>
@@ -30,7 +30,7 @@ A practical visualization library for tabular analysis.
 
 <p>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
+    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
   </a>
   <a href="https://github.com/antvis/S2/discussions" target="_blank">
     <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>
@@ -38,16 +38,16 @@ A practical visualization library for tabular analysis.
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
     <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
-  <a href="https://github.com/antvis/S2/blob/next/LICENSE" target="_blank" target="_blank">
+  <a href="https://github.com/antvis/S2/blob/next/LICENSE" target="_blank">
     <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
-  <a href="https://github.com/antvis/S2/graphs/contributors">
+  <a href="https://github.com/antvis/S2/graphs/contributors" target="_blank">
     <img src="https://img.shields.io/github/contributors/antvis/S2" alt="contributors"/>
   <a/>
-  <a href="https://github.com/antvis/S2/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed">
+  <a href="https://github.com/antvis/S2/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed" >
     <img src="https://img.shields.io/github/issues-closed/antvis/S2" alt="issues closed"/>
   <a/>
-  <a href="https://github.com/antvis/S2/pulls">
+  <a href="https://github.com/antvis/S2/pulls" target="_blank">
     <img src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg" alt="pr welcome"/>
   <a/>
 </p>
@@ -78,8 +78,8 @@ demo components and expansion capabilities, it allows developers to use it quick
 
 ```bash
 $ npm install @antv/s2@next --save
-# yarn add @antv/s2@next --save
-# pnpm add @antv/s2@next --save
+# yarn add @antv/s2@next
+# pnpm add @antv/s2@next
 ```
 
 ## 🔨 Getting Started
@@ -210,15 +210,15 @@ bootstrap()
 
 | Package  | Latest   | Beta   | Alpha   | Next | Size   | Download     |
 | - | - | - | - | - | - | - |
-| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
-| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
-| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
+| [@antv/s2](https://github.com/antvis/S2/tree/next/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/next/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
+| [@antv/s2-vue](https://github.com/antvis/S2/tree/next/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
 
-### 🖥️ browser compatibility
+### 🖥️ Browser Compatibility
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
-| --- | --- | --- |
-| last 2 versions | last 2 versions | last 2 versions |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- |  --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 `@antv/s2-react` and `@antv/s2-vue` see [React JavaScript environment requirements](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite browser compatibility](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
 
diff --git a/README.md b/README.md
index e927555f33..79641fd5a7 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
   </a>
   <a href="https://codecov.io/gh/antvis/S2" target="_blank">
-    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="test coverage"/>
+    <img src="https://codecov.io/gh/antvis/S2/branch/next/graph/badge.svg" alt="test coverage"/>
   </a>
   <a href="https://github.com/antvis/S2/releases" target="_blank">
     <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/>
@@ -29,7 +29,7 @@
 
 <p>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
+    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
   </a>
   <a href="https://github.com/antvis/S2/discussions" target="_blank">
     <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>
@@ -37,16 +37,16 @@
   <a href="https://github.com/actions-cool/issues-helper" target="_blank">
     <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/>
   </a>
-  <a href="https://github.com/antvis/S2/blob/next/LICENSE" target="_blank" target="_blank">
+  <a href="https://github.com/antvis/S2/blob/next/LICENSE" target="_blank">
     <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" />
   </a>
-  <a href="https://github.com/antvis/S2/graphs/contributors">
+  <a href="https://github.com/antvis/S2/graphs/contributors" target="_blank">
     <img src="https://img.shields.io/github/contributors/antvis/S2" alt="contributors"/>
   <a/>
-  <a href="https://github.com/antvis/S2/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed">
+  <a href="https://github.com/antvis/S2/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed" >
     <img src="https://img.shields.io/github/issues-closed/antvis/S2" alt="issues closed"/>
   <a/>
-  <a href="https://github.com/antvis/S2/pulls">
+  <a href="https://github.com/antvis/S2/pulls" target="_blank">
     <img src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg" alt="pr welcome"/>
   <a/>
 </p>
@@ -73,9 +73,9 @@ S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数
 ## 📦 安装
 
 ```bash
-$ pnpm add @antv/s2@next --save
-# npm install @antv/s2@next --save
-# yarn add @antv/s2@next --save
+$ npm install @antv/s2@next --save
+# yarn add @antv/s2@next
+# pnpm add @antv/s2@next
 ```
 
 ## 🔨 使用
@@ -206,15 +206,15 @@ bootstrap()
 
 | Package  | Latest   | Beta   | Alpha   | Next | Size   | Download     |
 | - | - | - | - | - | - | - |
-| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
-| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
-| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
+| [@antv/s2](https://github.com/antvis/S2/tree/next/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/next/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
+| [@antv/s2-vue](https://github.com/antvis/S2/tree/next/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
 
 ### 🖥️ 兼容环境
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
-| --- | --- | --- |
-| last 2 versions | last 2 versions | last 2 versions |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- |  --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 `@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
 
diff --git a/packages/s2-core/README.en-US.md b/packages/s2-core/README.en-US.md
index 2bc15f6100..b1a3490577 100644
--- a/packages/s2-core/README.en-US.md
+++ b/packages/s2-core/README.en-US.md
@@ -21,7 +21,7 @@ Data-driven multi-dimensional analysis table.
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
   </a>
   <a href="https://codecov.io/gh/antvis/S2" target="_blank">
-    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="test coverage"/>
+    <img src="https://codecov.io/gh/antvis/S2/branch/next/graph/badge.svg" alt="test coverage"/>
   </a>
   <a href="https://github.com/antvis/S2/releases" target="_blank">
     <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/>
@@ -210,9 +210,9 @@ bootstrap()
 
 | Package  | Latest   | Beta   | Alpha   | Next | Size   | Download     |
 | - | - | - | - | - | - | - |
-| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
-| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
-| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
+| [@antv/s2](https://github.com/antvis/S2/tree/next/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/next/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
+| [@antv/s2-vue](https://github.com/antvis/S2/tree/next/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
 
 ## 👤 Author
 
diff --git a/packages/s2-core/README.md b/packages/s2-core/README.md
index f0c4f441cc..6dabd81804 100644
--- a/packages/s2-core/README.md
+++ b/packages/s2-core/README.md
@@ -20,7 +20,7 @@
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
   </a>
   <a href="https://codecov.io/gh/antvis/S2" target="_blank">
-    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="test coverage"/>
+    <img src="https://codecov.io/gh/antvis/S2/branch/next/graph/badge.svg" alt="test coverage"/>
   </a>
   <a href="https://github.com/antvis/S2/releases" target="_blank">
     <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/>
@@ -29,7 +29,7 @@
 
 <p>
   <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
-    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
+    <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
   </a>
   <a href="https://github.com/antvis/S2/discussions" target="_blank">
     <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>
@@ -206,9 +206,9 @@ bootstrap()
 
 | Package  | Latest   | Beta   | Alpha   | Next | Size   | Download     |
 | - | - | - | - | - | - | - |
-| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
-| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
-| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
+| [@antv/s2](https://github.com/antvis/S2/tree/next/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/next/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
+| [@antv/s2-vue](https://github.com/antvis/S2/tree/next/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
 
 ## 问题反馈
 
diff --git a/packages/s2-core/src/common/interface/interaction.ts b/packages/s2-core/src/common/interface/interaction.ts
index f03c15c886..256ca688e5 100644
--- a/packages/s2-core/src/common/interface/interaction.ts
+++ b/packages/s2-core/src/common/interface/interaction.ts
@@ -181,12 +181,12 @@ export interface InteractionOptions {
    */
   copy?: {
     /**
-     * 开启复制 Command/Ctrl + C
+     * 开启复制 Command/Ctrl + C (默认开启)
      */
     enable?: boolean;
 
     /**
-     * 复制带格式的数据
+     * 复制带格式的数据 (默认开启)
      */
     withFormat?: boolean;
 
@@ -223,7 +223,7 @@ export interface InteractionOptions {
 
   /**
    * 宽高调整
-   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#resize
+   * @see https://s2.antv.antgroup.com/manual/advanced/interaction/resize
    */
   resize?: ResizeInteractionOptions | boolean;
 
diff --git a/packages/s2-core/src/common/interface/resize.ts b/packages/s2-core/src/common/interface/resize.ts
index f51ff2fe03..edaf16f11c 100644
--- a/packages/s2-core/src/common/interface/resize.ts
+++ b/packages/s2-core/src/common/interface/resize.ts
@@ -92,8 +92,10 @@ export interface ResizeInteractionOptions {
 
   /** 列高调整时，影响当前列还是全部列 */
   colResizeType?: ResizeType;
+
   /** 是否允许调整, 返回 false 时拖拽的宽高无效 */
   disable?: (resizeInfo: ResizeInfo) => boolean;
+
   /** 是否显示热区 */
   visible?: (cell: S2CellType) => boolean;
 }
diff --git a/packages/s2-core/src/facet/mobile/wheelEvent.ts b/packages/s2-core/src/facet/mobile/wheelEvent.ts
index 6397156ab6..cc37ef1580 100644
--- a/packages/s2-core/src/facet/mobile/wheelEvent.ts
+++ b/packages/s2-core/src/facet/mobile/wheelEvent.ts
@@ -18,7 +18,7 @@ const SWIPE_TIME_GAP = 100;
 
 /**
  * 移动端滚动事件
- * @see https://github.com/antvis/g-gesture/blob/master/src/event/wheel.ts
+ * @see https://github.com/antvis/g-gesture/blob/next/src/event/wheel.ts
  */
 export class WheelEvent extends EE {
   private canvas: Canvas;
diff --git a/s2-site/docs/api/basic-class/base-cell.en.md b/s2-site/docs/api/basic-class/base-cell.en.md
index cb8adba66b..574118d16b 100644
--- a/s2-site/docs/api/basic-class/base-cell.en.md
+++ b/s2-site/docs/api/basic-class/base-cell.en.md
@@ -4,7 +4,7 @@ order: 4
 tag: Updated
 ---
 
-Function description: cell base class. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/base-cell.ts)
+Function description: cell base class. [details](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/base-cell.ts)
 
 ```ts
 cell.getActualText()
diff --git a/s2-site/docs/api/basic-class/base-data-set.en.md b/s2-site/docs/api/basic-class/base-data-set.en.md
index eb53db279c..5d4e39a8d9 100644
--- a/s2-site/docs/api/basic-class/base-data-set.en.md
+++ b/s2-site/docs/api/basic-class/base-data-set.en.md
@@ -4,7 +4,7 @@ order: 5
 ---
 
 Function description: tabular data
-set. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/data-set/pivot-data-set.ts)
+set. [details](https://github.com/antvis/S2/blob/next/packages/s2-core/src/data-set/pivot-data-set.ts)
 
 ```ts
 s2.dataSet.getFieldName('type')
diff --git a/s2-site/docs/api/basic-class/base-facet.en.md b/s2-site/docs/api/basic-class/base-facet.en.md
index aff55eca99..3dc3293738 100644
--- a/s2-site/docs/api/basic-class/base-facet.en.md
+++ b/s2-site/docs/api/basic-class/base-facet.en.md
@@ -4,7 +4,7 @@ order: 7
 tag: Updated
 ---
 
-Function description: the current visible rendering area. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/facet/base-facet.ts)
+Function description: the current visible rendering area. [details](https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/base-facet.ts)
 
 ```ts
 s2.facet.getRealWidth()
diff --git a/s2-site/docs/api/basic-class/base-tooltip.en.md b/s2-site/docs/api/basic-class/base-tooltip.en.md
index 9716d00857..b705e1519b 100644
--- a/s2-site/docs/api/basic-class/base-tooltip.en.md
+++ b/s2-site/docs/api/basic-class/base-tooltip.en.md
@@ -3,7 +3,7 @@ title: BaseTooltip
 order: 6
 ---
 
-Function description: Tooltip class. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/ui/tooltip/index.ts)
+Function description: Tooltip class. [details](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/tooltip/index.ts)
 
 ```ts
 s2.tooltip.show({
diff --git a/s2-site/docs/api/basic-class/interaction.en.md b/s2-site/docs/api/basic-class/interaction.en.md
index 546f740561..e26f869d57 100644
--- a/s2-site/docs/api/basic-class/interaction.en.md
+++ b/s2-site/docs/api/basic-class/interaction.en.md
@@ -4,7 +4,7 @@ order: 2
 tag: Updated
 ---
 
-Functional description: properties and methods related to the interaction class. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/interaction/root.ts)
+Functional description: properties and methods related to the interaction class. [details](https://github.com/antvis/S2/blob/next/packages/s2-core/src/interaction/root.ts)
 
 ```ts
 s2.interaction.reset()
diff --git a/s2-site/docs/api/basic-class/node.en.md b/s2-site/docs/api/basic-class/node.en.md
index 141d7707b3..635bb10c75 100644
--- a/s2-site/docs/api/basic-class/node.en.md
+++ b/s2-site/docs/api/basic-class/node.en.md
@@ -3,7 +3,7 @@ title: Node
 order: 5
 ---
 
-Function description: layout node. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/facet/layout/node.ts)
+Function description: layout node. [details](https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/layout/node.ts)
 
 ```ts
 node.isTotals // false
diff --git a/s2-site/docs/api/basic-class/spreadsheet.en.md b/s2-site/docs/api/basic-class/spreadsheet.en.md
index a1d1f136bd..1f35246c1c 100644
--- a/s2-site/docs/api/basic-class/spreadsheet.en.md
+++ b/s2-site/docs/api/basic-class/spreadsheet.en.md
@@ -3,7 +3,7 @@ title: SpreadSheet
 order: 1
 ---
 
-Function description: properties and methods related to form instances. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/sheet-type/spread-sheet.ts)
+Function description: properties and methods related to form instances. [details](https://github.com/antvis/S2/blob/next/packages/s2-core/src/sheet-type/spread-sheet.ts)
 
 ```ts
 const s2 = new PivotSheet()
@@ -23,7 +23,7 @@ s2.isPivotMode()
 | tooltip                    | tooltip                                                                                                                                                                                          | [BaseTooltip](/docs/api/basic-class/base-tooltip)                                                                                                                      |                                                                      |
 | container                  | g-canvas example                                                                                                                                                                                 | [Canvas](https://g.antv.vision/zh/docs/api/canvas)                                                                                                                     |                                                                      |
 | interaction                | interact                                                                                                                                                                                         | [Interaction](/zh/docs/api/basic-class/interaction)                                                                                                                    |                                                                      |
-| hd                  | HD adaptation                                                                                                                                                                                    | [HdAdapter](https://github.com/antvis/S2/blob/master/packages/s2-core/src/ui/hd-adapter/index.ts)                                                                      |                                                                      |
+| hd                  | HD adaptation                                                                                                                                                                                    | [HdAdapter](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/hd-adapter/index.ts)                                                                      |                                                                      |
 | on                         | event subscription                                                                                                                                                                               | (event: [S2Event](/docs/manual/advanced/interaction/basic) , listener: () => void) => void                                                                             |                                                                      |
 | emit                       | event release                                                                                                                                                                                    | (event: [S2Event](/docs/manual/advanced/interaction/basic) , ...args: any\[]) => void                                                                                  |                                                                      |
 | getDataSet                 | get dataset                                                                                                                                                                                      | (options: [S2Options](/docs/api/general/S2Options) ) => [BaseDataSet](/docs/api/basic-class/base-data-set)                                                             |                                                                      |
diff --git a/s2-site/docs/api/basic-class/store.en.md b/s2-site/docs/api/basic-class/store.en.md
index b6223af741..e070c324ce 100644
--- a/s2-site/docs/api/basic-class/store.en.md
+++ b/s2-site/docs/api/basic-class/store.en.md
@@ -3,7 +3,7 @@ title: Store
 order: 3
 ---
 
-Function description: store some information. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/common/store/index.ts)
+Function description: store some information. [details](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/store/index.ts)
 
 ```ts
 s2.store.get('key') // 获取
diff --git a/s2-site/docs/api/general/S2Event.en.md b/s2-site/docs/api/general/S2Event.en.md
index e4e6b8e356..95ae195a5d 100644
--- a/s2-site/docs/api/general/S2Event.en.md
+++ b/s2-site/docs/api/general/S2Event.en.md
@@ -3,7 +3,7 @@ title: S2Event
 order: 4
 ---
 
-Table event list, you can listen to the required events according to actual needs, and realize custom business. [details](https://github.com/antvis/S2/blob/master/packages/s2-core/src/common/constant/events/basic.ts)
+Table event list, you can listen to the required events according to actual needs, and realize custom business. [details](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/constant/events/basic.ts)
 
 If you are using the `s2-react` or `s2-vue` table component, the event has been encapsulated, and no additional monitoring is required, just use its callback function. [details](/docs/api/components/sheet-component)
 
diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md
index 7bc5643ec4..ecd1034591 100644
--- a/s2-site/docs/api/general/S2Theme.zh.md
+++ b/s2-site/docs/api/general/S2Theme.zh.md
@@ -159,7 +159,7 @@ s2.setTheme({
 | verticalBorderWidth          | 单元格垂直边线宽度                      | `number`                                        | -      |      |
 | padding                      | 单元格内边距                            | [Padding](#margin--padding)                     | -      |      |
 | interactionState             | 单元格交互态                            | [InteractionStateTheme](#interactionstatetheme) | -      |      |
-| interactionState             | 单元格交互态  ([查看默认配置](https://github.com/antvis/S2/blob/master/packages/s2-core/src/theme/index.ts#L66-L107)) ([示例](/examples/interaction/basic#state-theme))                       |  Record<[InteractionStateName](#interactionstatename), [InteractionStateTheme](#interactionstatetheme)> | -      |      |
+| interactionState             | 单元格交互态  ([查看默认配置](https://github.com/antvis/S2/blob/next/packages/s2-core/src/theme/index.ts#L66-L107)) ([示例](/examples/interaction/basic#state-theme))                       |  Record<[InteractionStateName](#interactionstatename), [InteractionStateTheme](#interactionstatetheme)> | -      |      |
 | borderDash        | 单元格边线虚线 | `number \| string \| (string \| number)[]`                                        | `[]`      |      |
 
 #### IconTheme
diff --git a/s2-site/docs/common/env.en.md b/s2-site/docs/common/env.en.md
index a20f1f4198..91173e52f2 100644
--- a/s2-site/docs/common/env.en.md
+++ b/s2-site/docs/common/env.en.md
@@ -1,6 +1,6 @@
 默认支持**现代浏览器**, 如果出现兼容性问题请结合 `babel` 和 `@babel/polyfill` 使用
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
 | --- | --- | --- |
 | last 2 versions | last 2 versions | last 2 versions |
 
diff --git a/s2-site/docs/common/env.zh.md b/s2-site/docs/common/env.zh.md
index 4d08e124ec..ecb0cddf16 100644
--- a/s2-site/docs/common/env.zh.md
+++ b/s2-site/docs/common/env.zh.md
@@ -1,4 +1,4 @@
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
 | --- |  --- | --- | --- |
 | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
diff --git a/s2-site/docs/common/packages.en.md b/s2-site/docs/common/packages.en.md
index 7d2b6ec233..bbcb09cdb9 100644
--- a/s2-site/docs/common/packages.en.md
+++ b/s2-site/docs/common/packages.en.md
@@ -5,6 +5,6 @@ order: 5
 
 | version number                                                               | stable version                                                    | Beta                                                          | preview edition                                                 | Early version                                                 | packet size                                                                                                                    | Downloads                                                     |
 | ---------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- |
-| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)       | ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)       | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size\&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
-| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) | ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size\&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
-| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)   | ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg)   | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size\&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
+| [@antv/s2](https://github.com/antvis/S2/tree/next/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)       | ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)       | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size\&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/next/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) | ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size\&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
+| [@antv/s2-vue](https://github.com/antvis/S2/tree/next/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)   | ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg)   | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size\&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
diff --git a/s2-site/docs/common/packages.zh.md b/s2-site/docs/common/packages.zh.md
index 5419708476..9e798b12e9 100644
--- a/s2-site/docs/common/packages.zh.md
+++ b/s2-site/docs/common/packages.zh.md
@@ -16,9 +16,9 @@ order: 5
 
 | 版本号  | 稳定版    | 测试版   | 预览版  | 先行版 | 包大小  | 下载量    |
 | -------- | ------ | --------- | ---------- | ----------  | ----------  | ------ |
-| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg?logo=npm)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg?logo=npm)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg?logo=npm)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg?logo=npm)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg?logo=npm)       |
-| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg?logo=npm) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg?logo=npm) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg?logo=npm) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg?logo=npm)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg?logo=npm) |
-| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg?logo=npm)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg?logo=npm)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg?logo=npm)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg?logo=npm) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg?logo=npm)   |
+| [@antv/s2](https://github.com/antvis/S2/tree/next/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg?logo=npm)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg?logo=npm)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg?logo=npm)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg?logo=npm)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg?logo=npm)       |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/next/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg?logo=npm) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg?logo=npm) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg?logo=npm) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg?logo=npm)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg?logo=npm) |
+| [@antv/s2-vue](https://github.com/antvis/S2/tree/next/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg?logo=npm)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg?logo=npm)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg?logo=npm)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg?logo=npm) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg?logo=npm)   |
 
 :::info{title='如何获取新版本发布通知？'}
 
diff --git a/s2-site/docs/manual/advanced/analysis/pagination.en.md b/s2-site/docs/manual/advanced/analysis/pagination.en.md
index 586a20553c..5127e587fc 100644
--- a/s2-site/docs/manual/advanced/analysis/pagination.en.md
+++ b/s2-site/docs/manual/advanced/analysis/pagination.en.md
@@ -19,8 +19,8 @@ First, you need to configure the `pagination` attribute in `s2Options`
 If you develop based on `@antv/s2-core` , you need to **introduce** or **implement paging components** yourself.
 The `core` layer only provides paging capabilities. Refer to the example
 
-* [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)
+* [React](https://github.com/antvis/S2/blob/next/packages/s2-react/src/components/pagination/index.tsx)
+* [Vue 3.0](https://github.com/antvis/S2/blob/next/packages/s2-vue/src/components/pagination/index.vue)
 
 If you develop based on `@antv/s2-react` or `@antv/s2-vue` , you only need to configure pagination-related configuration
 items to use it out of the box.
diff --git a/s2-site/docs/manual/advanced/custom/hook.en.md b/s2-site/docs/manual/advanced/custom/hook.en.md
index 2bd4daaddf..de870d4d73 100644
--- a/s2-site/docs/manual/advanced/custom/hook.en.md
+++ b/s2-site/docs/manual/advanced/custom/hook.en.md
@@ -32,19 +32,19 @@ Custom icons. When the icons provided by `S2` do not meet the requirements, deve
 
 ## dataCell
 
-To change the default implementation of data cells, you need to inherit from [dataCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts) and override some methods, such as font style, background style, etc. [example](/examples/custom/custom-cell#data-cell)
+To change the default implementation of data cells, you need to inherit from [dataCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts) and override some methods, such as font style, background style, etc. [example](/examples/custom/custom-cell#data-cell)
 
 ## rowCell
 
-To change the default implementation of row header cells, you need to inherit from [rowCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/row-cell.ts) and override some methods, such as font style, background style, etc. [example](/examples/custom/custom-cell#row-cell)
+To change the default implementation of row header cells, you need to inherit from [rowCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts) and override some methods, such as font style, background style, etc. [example](/examples/custom/custom-cell#row-cell)
 
 ## colCell
 
-To change the default implementation of column header cells, you need to inherit from [colCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/col-cell.ts) and override some methods, such as font style, background style, etc. [example](/examples/custom/custom-cell#col-cell)
+To change the default implementation of column header cells, you need to inherit from [colCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts) and override some methods, such as font style, background style, etc. [example](/examples/custom/custom-cell#col-cell)
 
 ## cornerCell
 
-To change the default implementation of corner cells, you need to inherit from [cornerCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/corner-cell.ts) and override some methods, such as font style, background style, etc. [example](/examples/custom/custom-cell#corner-cell)
+To change the default implementation of corner cells, you need to inherit from [cornerCell](https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/corner-cell.ts) and override some methods, such as font style, background style, etc. [example](/examples/custom/custom-cell#corner-cell)
 
 ## cornerHeader
 
diff --git a/s2-site/docs/manual/advanced/hd-adapter.en.md b/s2-site/docs/manual/advanced/hd-adapter.en.md
index d6904e4c13..063072e89d 100644
--- a/s2-site/docs/manual/advanced/hd-adapter.en.md
+++ b/s2-site/docs/manual/advanced/hd-adapter.en.md
@@ -96,7 +96,7 @@ Turn on HD adaptation
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/Q1782WWQ3/Kapture%2525202021-10-19%252520at%25252014.36.05.gif)
 
-[full code](https://github.com/antvis/S2/blob/master/packages/s2-core/src/ui/hd-adapter/index.ts)
+[full code](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/hd-adapter/index.ts)
 
 ## Custom Device Pixel Ratio
 
diff --git a/s2-site/docs/manual/advanced/interaction/custom.en.md b/s2-site/docs/manual/advanced/interaction/custom.en.md
index 355bd99b3a..c0e282dfc9 100644
--- a/s2-site/docs/manual/advanced/interaction/custom.en.md
+++ b/s2-site/docs/manual/advanced/interaction/custom.en.md
@@ -3,7 +3,7 @@ title: Custom Interaction
 order: 1
 ---
 
-Don't worry if the built-in interactions fail to cover actual usage scenarios. You can use the interaction events provided by [`S2Event`](https://github.com/antvis/S2/blob/master/packages/s2-core/src/common/constant/events/basic.ts) to perform any permutation and combination to customize the interaction. Here is an example of [**double-clicking to hide the column header in the schedule**](/examples/interaction/custom#double-click-hide-columns) .
+Don't worry if the built-in interactions fail to cover actual usage scenarios. You can use the interaction events provided by [`S2Event`](https://github.com/antvis/S2/blob/next/packages/s2-core/src/common/constant/events/basic.ts) to perform any permutation and combination to customize the interaction. Here is an example of [**double-clicking to hide the column header in the schedule**](/examples/interaction/custom#double-click-hide-columns) .
 
 ## 1. Custom interaction class
 
diff --git a/s2-site/docs/manual/advanced/interaction/resize.zh.md b/s2-site/docs/manual/advanced/interaction/resize.zh.md
index 8865376102..612cb8d9bc 100644
--- a/s2-site/docs/manual/advanced/interaction/resize.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/resize.zh.md
@@ -1,7 +1,7 @@
 ---
 title: 行列宽高调整
 order: 3
-tag: New
+tag: Updated
 ---
 
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WdvmQ5pd4BwAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="600" />
@@ -36,9 +36,52 @@ const s2Options = {
 
 ### 热区控制
 
-除了 `rowCellVertical`, `cornerCellHorizontal`, `colCellHorizontal`, `colCellVertical` 便捷的区域热区控制外，还支持 `resize.visible` 动态控制热区是否展示。[查看示例](/examples/interaction/basic#resize)
-
-#### 例：只有前 4 个单元格显示 resize 热区
+支持配置 `rowCellVertical`, `cornerCellHorizontal`, `colCellHorizontal`, `colCellVertical` 来便捷的控制区域热区控制。
+
+<table style="width: 100%; outline: none; border-collapse: collapse;">
+  <colgroup>
+    <col width="40%"/>
+    <col width="60%" />
+  </colgroup>
+  <tbody>
+    <tr>
+      <td style="text-align: center;">
+        rowCellVertical（行头垂直方向） - 针对行头叶子节点
+      </td>
+      <td>
+        <img height="300" alt="default" style="max-height: unset;" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*LdioQJ5NU-MAAAAAAAAAAAAADmJ7AQ/original" />
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align: center;">
+        cornerCellHorizontal |（角头水平方向） - 针对角头 CornerNodeType 为 Series 和 Row
+      </td>
+      <td>
+        <img height="300" alt="colorful" style="max-height: unset;" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*57S1QLpmaY8AAAAAAAAAAAAADmJ7AQ/original" />
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align: center;">
+        colCellHorizontal |（列头水平方向） - 针对列头叶子节点
+      </td>
+      <td>
+        <img height="300" alt="gray" style="max-height: unset;" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Zni8Ro69STkAAAAAAAAAAAAADmJ7AQ/original" />
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align: center;">
+        colCellVertical |（列头垂直方向） - 针对列头各层级节点
+      </td>
+      <td>
+        <img height="300" alt="dark" style="max-height: unset;" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qtxcR7_YAYgAAAAAAAAAAAAADmJ7AQ/original" />
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+除此之外，还支持 `resize.visible` 动态控制热区是否展示。[查看示例](/examples/interaction/basic#resize)
+
+1. 例：只有叶子节点才显示 resize 热区：
 
 ```ts
 const s2Options = {
@@ -46,14 +89,14 @@ const s2Options = {
     resize: {
       visible: (cell) => {
         const meta = cell.getMeta();
-        return meta.colIndex < 3
+        return meta.isLeaf
       }
     }
   },
 };
 ```
 
-#### 例：只有某一个单元格系那是 resize 热区
+2. 例：只有某一个单元格显示 resize 热区：
 
 ```ts
 const s2Options = {
@@ -61,7 +104,7 @@ const s2Options = {
     resize: {
       visible: (cell) => {
         const meta = cell.getMeta();
-        return meta.id === 'root[&]家具[&]桌子[&]数量'
+        return meta.id === 'root[&] 家具[&]桌子[&]数量'
       }
     }
   },
@@ -74,7 +117,7 @@ const s2Options = {
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/64tnK5%263K/Kapture%2525202022-07-19%252520at%25252015.40.15.gif" alt="preview" width="600" />
 
-#### 例：不允许调小单元格宽度
+例：不允许调小单元格宽度：
 
 ```ts
 const s2Options = {
@@ -85,3 +128,73 @@ const s2Options = {
   },
 };
 ```
+
+### 拖拽影响范围
+
+默认宽高调整只作用于当前单元格，可以通过 `rowResizeType`, `colResizeType` 配置拖拽后是影响所有行（列）, 还是当前行（列）。
+
+- `all`: 对应单元格维度 `{ city: 20, type: 100 }`
+- `current` 对应单元格 ID `{ 'root[&]杭州市': 20, 'root[&]类别': 100 }`
+
+```ts
+const s2Options = {
+  interaction: {
+    resize: {
+      // 行高调整时，影响全部行
+      rowResizeType: 'all',
+      // 列宽调整时，只影响当前列
+      colResizeType: 'current',
+    }
+  },
+};
+```
+
+<table style="width: 100%; outline: none; border-collapse: collapse;">
+  <colgroup>
+    <col width="40%"/>
+    <col width="60%" />
+  </colgroup>
+  <tbody>
+    <tr>
+      <td style="text-align: center;">
+        rowResizeType: 'all'
+      </td>
+      <td>
+        <img height="300" alt="default" style="max-height: unset;" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K9BHSYFdps4AAAAAAAAAAAAADmJ7AQ/original" />
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align: center;">
+        rowResizeType: 'current'
+      </td>
+      <td>
+        <img height="300" alt="colorful" style="max-height: unset;" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aXByQbhqG7AAAAAAAAAAAAAADmJ7AQ/original" />
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### 主题配置
+
+支持通过调整主题修改热区大小/颜色，参考线颜色/间隔等配置，具体请查看 [主题配置](/manual/basic/theme) 章节。
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*4fHCSaNfxvYAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="600" />
+
+```ts
+s2.setTheme({
+  resizeArea: {
+    // 热区大小
+    size: 2,
+    // 热区背景色
+    background: '#396',
+    // 热区背景色透明度
+    backgroundOpacity: 0,
+    // 拖拽参考线颜色
+    guideLineColor: '#396',
+    // 拖拽参考线禁用颜色
+    guideLineDisableColor: 'rgba(0,0,0,0.25)',
+    //  参考线间隔
+    guideLineDash: [1, 6]
+  },
+});
+```
diff --git a/s2-site/docs/manual/basic/analysis/pagination.zh.md b/s2-site/docs/manual/basic/analysis/pagination.zh.md
index ce3c076544..922f032f0f 100644
--- a/s2-site/docs/manual/basic/analysis/pagination.zh.md
+++ b/s2-site/docs/manual/basic/analysis/pagination.zh.md
@@ -17,8 +17,8 @@ S2 内置提供了分页能力。本质上是前端分页，点击下一页滚
 
 如果基于 `@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)
+* [React](https://github.com/antvis/S2/blob/next/packages/s2-react/src/components/pagination/index.tsx)
+* [Vue 3.0](https://github.com/antvis/S2/blob/next/packages/s2-vue/src/components/pagination/index.vue)
 
 如果基于 `@antv/s2-react` 或  `@antv/s2-vue` 开发，则只需配置分页相关配置项即可开箱即用。
 
diff --git a/s2-site/docs/manual/basic/i18n.en.md b/s2-site/docs/manual/basic/i18n.en.md
index 5728aedda6..d944d5df4d 100644
--- a/s2-site/docs/manual/basic/i18n.en.md
+++ b/s2-site/docs/manual/basic/i18n.en.md
@@ -3,7 +3,7 @@ title: Internationalization
 order: 8
 ---
 
-`S2` currently has built-`中/英`two sets of copywriting, the default is **Chinese** , [view all files](https://github.com/antvis/S2/tree/master/packages/s2-core/src/common/i18n)
+`S2` currently has built-`中/英`two sets of copywriting, the default is **Chinese** , [view all files](https://github.com/antvis/S2/tree/next/packages/s2-core/src/common/i18n)
 
 ## switch to english
 
diff --git a/s2-site/docs/manual/basic/i18n.zh.md b/s2-site/docs/manual/basic/i18n.zh.md
index f90c34cfaf..bc9273c56a 100644
--- a/s2-site/docs/manual/basic/i18n.zh.md
+++ b/s2-site/docs/manual/basic/i18n.zh.md
@@ -3,7 +3,7 @@ title: 国际化
 order: 8
 ---
 
-`S2` 目前内置 `中/英` 两套文案，默认**中文**, [查看全部文件](https://github.com/antvis/S2/tree/master/packages/s2-core/src/common/i18n)
+`S2` 目前内置 `中/英` 两套文案，默认**中文**, [查看全部文件](https://github.com/antvis/S2/tree/next/packages/s2-core/src/common/i18n)
 
 ## 切换为英文
 
diff --git a/s2-site/docs/manual/basic/theme.en.md b/s2-site/docs/manual/basic/theme.en.md
index eae168174a..125feb2b3d 100644
--- a/s2-site/docs/manual/basic/theme.en.md
+++ b/s2-site/docs/manual/basic/theme.en.md
@@ -149,7 +149,7 @@ Although the custom `schema` is flexible, it has a heavy mental burden and requi
 
 #### Optional swatch color
 
-You can refer to the [built-in swatches](https://github.com/antvis/S2/blob/master/packages/s2-core/src/theme/palette/colorful.ts) to personalize `basicColors` and `semanticColors` . The selected colors will be used to draw different parts of the table. For the relationship between colors, please refer to the [swatch comparison table below](#%E8%89%B2%E6%9D%BF%E5%AF%B9%E7%85%A7%E8%A1%A8) .
+You can refer to the [built-in swatches](https://github.com/antvis/S2/blob/next/packages/s2-core/src/theme/palette/colorful.ts) to personalize `basicColors` and `semanticColors` . The selected colors will be used to draw different parts of the table. For the relationship between colors, please refer to the [swatch comparison table below](#%E8%89%B2%E6%9D%BF%E5%AF%B9%E7%85%A7%E8%A1%A8) .
 
 In addition, in order to facilitate the deployment of exclusive color palettes, S2 officially provides a [self-service color palette tool](/examples/theme/custom/#custom-manual-palette) , which helps you quickly adjust color palettes, copy and paste them into projects for use with one click.
 
diff --git a/s2-site/docs/manual/basic/tooltip.en.md b/s2-site/docs/manual/basic/tooltip.en.md
index 337c2d4662..f5ea31fa16 100644
--- a/s2-site/docs/manual/basic/tooltip.en.md
+++ b/s2-site/docs/manual/basic/tooltip.en.md
@@ -17,8 +17,8 @@ Expose table information and some analysis functions through table interaction
 In `React` version and `Vue3` version, the content of `tooltip` is rendered by means of [custom Tooltip class](#custom-tooltip-class), including `sort drop-down menu`, `cell selection information summary`, `Column header hide button` etc.
 
 View `React`
-Version [specific implementation](https://github.com/antvis/S2/blob/master/packages/s2-react/src/components/tooltip/custom-tooltip.tsx)
-and the `Vue3` version [concrete implementation](https://github.com/antvis/S2/blob/master/packages/s2-vue/src/components/tooltip/custom-tooltip.ts)
+Version [specific implementation](https://github.com/antvis/S2/blob/next/packages/s2-react/src/components/tooltip/custom-tooltip.tsx)
+and the `Vue3` version [concrete implementation](https://github.com/antvis/S2/blob/next/packages/s2-vue/src/components/tooltip/custom-tooltip.ts)
 
 - If you need `tooltip`, you can directly use the out-of-the-box `@antv/s2-react` `@antv/s2-vue`, which saves you secondary packaging and is more convenient to use
 - If you don't want to depend on the framework, or want to use `tooltip` in `Vue`, `Angular` framework, please refer to [Custom Tooltip Class](#Custom-tooltip-class) chapter
@@ -390,7 +390,7 @@ Inherit `BaseTooltip` base class, you can rewrite `show (hide)`, `destroy (destr
 You can also override the `renderContent` method to render any component you encapsulate
 
 - [View BaseTooltip base class](/api/basic-class/base-tooltip)
-- [View React example](https://github.com/antvis/S2/blob/master/packages/s2-react/src/components/tooltip/custom-tooltip.tsx)
+- [View React example](https://github.com/antvis/S2/blob/next/packages/s2-react/src/components/tooltip/custom-tooltip.tsx)
 - [View Vue example](https://codesandbox.io/s/compassionate-booth-hpm3rf?file=/src/App.vue)
 
 ```ts
diff --git a/s2-site/docs/manual/contribution.en.md b/s2-site/docs/manual/contribution.en.md
index 38eb1ab619..13c5834a64 100644
--- a/s2-site/docs/manual/contribution.en.md
+++ b/s2-site/docs/manual/contribution.en.md
@@ -14,7 +14,7 @@ We welcome any form of contribution, whether it is a typo modification, or a fri
 
 ## branch management
 
-At present, we are developing based on the `master` branch. If there is any modification, please pull a branch based on the `master` , and then in the form of `PR` , we have integrated the DingTalk robot, which will review your PR for the first time and give feedback
+At present, we are developing based on the `next` branch. If there is any modification, please pull a branch based on the `next` , and then in the form of `PR` , we have integrated the DingTalk robot, which will review your PR for the first time and give feedback
 
 ## Submit Bug Feedback
 
diff --git a/s2-site/docs/manual/contribution.zh.md b/s2-site/docs/manual/contribution.zh.md
index 23fd62c16e..3f4cb66920 100644
--- a/s2-site/docs/manual/contribution.zh.md
+++ b/s2-site/docs/manual/contribution.zh.md
@@ -46,7 +46,7 @@ tag: Updated
 2. 安装依赖：`pnpm install` 或者 `pnpm bootstrap` 然后本地启动项目。
 3. 提交你的改动，commit 请遵守 [AngularJS Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.uyo6cb12dt6w).
 4. 如果你的改动是修复 bug, 还可以在提交信息后面加上 `close #issue 号`, 这样可以在 pr 合并后，可以自动关闭对应的 issue, 比如 `fix: render bug close #123`.
-5. 确保加上了对应的单元测试和文档 （如有必要）.
+5. 确保加上了对应的单元测试和文档 （如果有 `Snapshot` UI 快照 (.snap 文件）更新，可以运行 `pnpm core:test -- -u` 和 `pnpm react:test -- -u` 自动更新，并一起提交上来，请勿手动编辑）
 6. 所有 Lint 和 Test 检查通过后，并且 review 通过，我们会合并你的 pr.
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/ssOxFrycD/86339514-5f9a-4101-8690-e47c97cd8af5.png)
diff --git a/s2-site/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md
index ecd92aeec7..0162ea46cb 100644
--- a/s2-site/docs/manual/faq.zh.md
+++ b/s2-site/docs/manual/faq.zh.md
@@ -180,7 +180,7 @@ s2.showTooltip({
 <SheetComponent options={options} dataCfg={dataCfg}/>
 ```
 
-- `场景 1`: 当组件重新渲染，或者配置项更新后，组件会 [更新 S2 底表的配置](https://github.com/antvis/S2/blob/master/packages/s2-react/src/hooks/useSpreadSheet.ts#L111), 会触发 [隐藏 Tooltip 的逻辑](https://github.com/antvis/S2/blob/master/packages/s2-core/src/sheet-type/spread-sheet.ts#L381), 请检查并尽量避免你的`上层组件更新`, 或者`配置项的引用被改变` 所导致的 `SheetComponent` 无意义的重渲染。
+- `场景 1`: 当组件重新渲染，或者配置项更新后，组件会 [更新 S2 底表的配置](https://github.com/antvis/S2/blob/next/packages/s2-react/src/hooks/useSpreadSheet.ts#L111), 会触发 [隐藏 Tooltip 的逻辑](https://github.com/antvis/S2/blob/next/packages/s2-core/src/sheet-type/spread-sheet.ts#L381), 请检查并尽量避免你的`上层组件更新`, 或者`配置项的引用被改变` 所导致的 `SheetComponent` 无意义的重渲染。
 
 - `场景 2`: S2 默认点击非表格区域，会隐藏 tooltip, 还原交互状态，请确保你自己的业务逻辑有无相应的 `click` 事件，看是否有被冒泡影响，尝试阻止冒泡
 
diff --git a/s2-site/docs/manual/introduction.en.md b/s2-site/docs/manual/introduction.en.md
index 4b011fc4cc..2dec9199e3 100644
--- a/s2-site/docs/manual/introduction.en.md
+++ b/s2-site/docs/manual/introduction.en.md
@@ -5,7 +5,7 @@ redirect_from:
  - /en/docs/manual
 ---
 
-<div><p><a href="https://www.npmjs.com/package/@antv/s2" target="_blank"><img alt="Version" src="https://img.shields.io/npm/v/@antv/s2.svg"> </a><a href="https://www.npmjs.com/package/@antv/s2" target="_blank"><img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/beta.svg"> </a><a href="https://github.com/antvis/S2/actions/workflows/test.yml" target="_blank"><img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"> </a><a href="https://codecov.io/gh/antvis/S2" target="_blank"><img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="Coverage"> </a><a href="https://github.com/antvis/S2/releases" target="_blank"><img src="https://img.shields.io/github/release-date/antvis/S2" alt="release-date"></a></p></div>
+<div><p><a href="https://www.npmjs.com/package/@antv/s2" target="_blank"><img alt="Version" src="https://img.shields.io/npm/v/@antv/s2.svg"> </a><a href="https://www.npmjs.com/package/@antv/s2" target="_blank"><img alt="Version" src="https://img.shields.io/npm/v/@antv/s2/beta.svg"> </a><a href="https://github.com/antvis/S2/actions/workflows/test.yml" target="_blank"><img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"> </a><a href="https://codecov.io/gh/antvis/S2" target="_blank"><img src="https://codecov.io/gh/antvis/S2/branch/next/graph/badge.svg" alt="Coverage"> </a><a href="https://github.com/antvis/S2/releases" target="_blank"><img src="https://img.shields.io/github/release-date/antvis/S2" alt="release-date"></a></p></div>
 
 ## ❓ What is S2
 
diff --git a/s2-site/docs/manual/introduction.zh.md b/s2-site/docs/manual/introduction.zh.md
index f17beda276..7e7bf2a603 100644
--- a/s2-site/docs/manual/introduction.zh.md
+++ b/s2-site/docs/manual/introduction.zh.md
@@ -21,7 +21,7 @@ redirect_from:
     <img src="https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg" alt="ci test status"/>
   </a>
   <a href="https://codecov.io/gh/antvis/S2" target="_blank">
-    <img src="https://codecov.io/gh/antvis/S2/branch/master/graph/badge.svg" alt="test coverage"/>
+    <img src="https://codecov.io/gh/antvis/S2/branch/next/graph/badge.svg" alt="test coverage"/>
   </a>
   <a href="https://github.com/antvis/S2/releases" target="_blank">
     <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/>
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index fab9517a8b..8183431af2 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -6,7 +6,7 @@ tag: New
 
 本文档将帮助你从 S2 `1.x` 版本升级到 S2 `2.x` 版本。
 
-## 官网地址变化
+## 🏠 官网地址变化
 
 :::warning{title="注意"}
 原官网 <https://s2.antv.vision> 和 <https://antv-s2.gitee.io> 不再维护和使用，请使用最新的文档，确保您看到的不是过时的文档。
@@ -15,7 +15,7 @@ tag: New
 - 原 `v1` 官网迁移至 <https://s2-v1.antv.antgroup.com>.
 - 原 <https://s2.antv.antgroup.com> 将作为 `v2` 默认官网。
 
-## npm dist-tag 变化
+## 🏷️ npm dist-tag 变化
 
 > 什么是 [dist-tag](https://docs.npmjs.com/adding-dist-tags-to-packages/) ?
 
@@ -28,19 +28,33 @@ tag: New
 - `@antv/s2@next` 对应 `2.x` 版本
 - `@antv/s2@latest` 对应 `1.x` 版本
 
-**在 `@antv/s2@next` 版本稳定后，`latest` 将默认指向 `2.x` 版本。**
+**在 `@antv/s2@next` 版本稳定后，`next` 将默认指向 `2.x` 版本。**
 
 :::
 
-## v1 版本维护期
+## 🗓️ v1 版本维护期
 
 目前 `v1` 版本会继续维护，针对 `BUG` 发布 `Patch` 版本修复，但不再接收新的 `Feature Request` 和 `Pull Request`，截止日期为 `2024` 年年底。
 
-## 新增功能
+## 📦 安装
+
+```bash
+$ npm install @antv/s2@next @antv/s2-react@next @antv/s2-vue --save
+# pnpm add @antv/s2@next @antv/s2-react@next @antv/s2-vue
+# yarn add @antv/s2@next @antv/s2-react@next @antv/s2-vue
+```
+
+| Package  | Version | Size   | Download     |
+| - | - | - | - |
+| [@antv/s2](https://github.com/antvis/S2/tree/next/packages/s2-core) |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/next/packages/s2-react) | ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@next/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
+| [@antv/s2-vue](https://github.com/antvis/S2/tree/next/packages/s2-vue) | ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@next/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
+
+## ⭐ 新增功能
 
 官网目录标记为 <Badge type="success">New</Badge> 和 <Badge>Updated</Badge> 则表示新增功能，也可以查看官网语雀博客 [S2 2.0 表格看数新纪元](https://www.yuque.com/antv/blog/1122_7_s2)
 
-## 不兼容的变化
+## 📣 不兼容的变化
 
 ### 基础包 <Badge>@antv/s2</Badge>
 
@@ -383,7 +397,7 @@ const s2Options = {
 
 ### 单元格宽高拖拽逻辑变更
 
-1. 在 `1.x` 中，宽高调整对所有单元格生效，`2.x` 新增 `rowResizeType/colResizeType` 选择对当前还是所有单元格生效。
+1. 在 `1.x` 中，宽高调整对**所有单元格**生效，`2.x` 新增 `rowResizeType/colResizeType` 选择对当前还是所有单元格生效。
 
 ```diff
 const s2Options = {
@@ -398,7 +412,7 @@ const s2Options = {
 
 2. 默认调整只对当前单元格生效。
 
-具体请查看 [行列宽高调整](/manual/advanced/interaction/basic#%E8%A1%8C%E5%88%97%E5%AE%BD%E9%AB%98%E8%B0%83%E6%95%B4) 相关文档。
+具体请查看 [行列宽高调整](/manual/advanced/interaction/resize) 相关文档。
 
 ### Facet 变更
 
@@ -438,11 +452,7 @@ export interface LayoutResult {
 
 TODO:
 
-### 边框绘制逻辑变更
-
-TODO:
-
-### 组件层 `@antv/s2-react`
+### 组件层 <Badge>@antv/s2-react</Badge>
 
 #### 支持 React 18 和 Ant Design 5.0
 
@@ -509,14 +519,10 @@ const header = {
 
 具体请查看 [Tooltip](/manual/basic/tooltip) 相关文档。
 
-## API 调整
+## ✍️ API 调整
 
 具体请查看标记为 <Badge type="success">New</Badge> 和 <Badge>Updated</Badge> 的 [`API 文档`](/api)
 
-## 未来迭代计划
-
-TODO: 是否需要？
-
-## 遇到问题
+## 🙋 遇到问题
 
 更多新特性和改动请阅读文档，如果您在升级过程中遇到了问题，请到 [GitHub issues](https://github.com/antvis/S2/issues/2454) 或者 [GitHub Discussions](https://github.com/antvis/S2/discussions/1933) 进行反馈。我们会尽快响应和相应改进这篇文档。
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
index 9df749ebde..b50bcfe19e 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts
@@ -72,7 +72,7 @@ class CustomDataCell extends DataCell {
 
 /**
  * 自定义 ColCell, 通过复写基类方法, 给特定单元格设置文字大小, 颜色等...
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/col-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts
  * 明细表需要继承 TableColCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts
  */
 class CustomColCell extends ColCell {
@@ -114,7 +114,7 @@ class CustomColCell extends ColCell {
 
 /**
  * 自定义 CornerCell, 通过复写基类方法, 给特定单元格设置文字大小, 颜色等...
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/corner-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/corner-cell.ts
  */
 class CustomCornerCell extends CornerCell {
   getBackgroundColor() {
@@ -147,7 +147,7 @@ class CustomCornerCell extends CornerCell {
 
 /**
  * 自定义 RowCell, 通过复写基类方法, 给特定单元格设置文字大小, 颜色等...
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/row-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts
  */
 class CustomRowCell extends RowCell {
   getBackgroundColor() {
diff --git a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
index 5914297e9a..b7cc4d24c0 100644
--- a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
@@ -3,7 +3,7 @@ import { TableColCell, TableDataCell, TableSheet } from '@antv/s2';
 
 /**
  * 自定义 TableDataCell，通过复写基类方法, 给特定单元格设置背景色, 文字大小, 颜色等...
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-data-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts
  */
 class CustomDataCell extends TableDataCell {
   getBackgroundColor() {
@@ -70,7 +70,7 @@ class CustomDataCell extends TableDataCell {
 
 /**
  * 自定义 ColCell, 通过复写基类方法, 给特定单元格设置文字大小, 颜色等...
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-col-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts
  */
 class CustomColCell extends TableColCell {
   getTextStyle() {
@@ -126,7 +126,7 @@ fetch(
       width: 600,
       height: 480,
       seriesNumber: {
-        enable: true
+        enable: true,
       },
       colCell: (node, spreadsheet, headerConfig) => {
         return new CustomColCell(node, spreadsheet, headerConfig);
diff --git a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
index 81d7ef8c6d..5ba23e29d2 100644
--- a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
+++ b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
@@ -9,7 +9,7 @@ import {
 
 /**
  * 自定义 DataCell，使用 drawCustomContent 绘制简易的 mini 图
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
  */
 class CustomDataCell extends DataCell {
   // 当数值为对象时，完全接管绘制, 使用内置的 `drawCustomContent` 根据不同的数据结构 (见下方) 绘制不同的图形
diff --git a/s2-site/examples/custom/custom-cell/demo/totals-cell.ts b/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
index b3451d84be..5b6783530e 100644
--- a/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
@@ -8,7 +8,7 @@ import {
 
 /**
  * 继承 RowCell, 单独修改行小计/行总计的背景色和文字颜色 (继承 ColCell, 列小计/列总计 同理)
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/row-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts
  */
 class CustomTotalsRowCell extends RowCell {
   // 背景色
diff --git a/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts b/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts
index 3c1c8272fe..52a02aec44 100644
--- a/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts
+++ b/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts
@@ -67,7 +67,7 @@ class CustomDataSet extends CustomTreePivotDataSet {
 
 /**
  * 自定义 DataCell
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
  */
 class CustomDataCell extends DataCell {
   drawTextShape() {
diff --git a/s2-site/examples/interaction/advanced/demo/resize-active.ts b/s2-site/examples/interaction/advanced/demo/resize-active.ts
index 7e9010c326..d027f1a753 100644
--- a/s2-site/examples/interaction/advanced/demo/resize-active.ts
+++ b/s2-site/examples/interaction/advanced/demo/resize-active.ts
@@ -3,10 +3,10 @@ import insertCSS from 'insert-css';
 
 function createRadioGroup(s2: SpreadSheet) {
   [
-    ['rowCellVertical', '行头热区'],
-    ['cornerCellHorizontal', '角头热区'],
-    ['colCellHorizontal', '列头水平方向resize热区'],
-    ['colCellVertical', '列头垂直方向resize热区'],
+    ['rowCellVertical', '行头 resize 热区'],
+    ['cornerCellHorizontal', '角头 resize 热区'],
+    ['colCellHorizontal', '列头水平方向 resize 热区'],
+    ['colCellVertical', '列头垂直方向 resize 热区'],
   ].forEach(([value, text]) => {
     const radio = document.createElement('input');
 
@@ -64,6 +64,13 @@ fetch(
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
+    // 这里默认将热区显示, 仅供演示使用, 请勿无脑复制.
+    s2.setTheme({
+      resizeArea: {
+        backgroundOpacity: 1,
+      },
+    });
+
     await s2.render();
 
     createRadioGroup(s2);
diff --git a/s2-site/examples/interaction/basic/demo/resize.ts b/s2-site/examples/interaction/basic/demo/resize.ts
index 10db2736c6..b4f65b4a97 100644
--- a/s2-site/examples/interaction/basic/demo/resize.ts
+++ b/s2-site/examples/interaction/basic/demo/resize.ts
@@ -46,14 +46,6 @@ fetch(
         guideLineDisableColor: 'rgba(0,0,0,0.25)',
         //  参考线间隔
         guideLineDash: [3, 3],
-        // 交互状态
-        interactionState: {
-          // 热区 hover 时的背景色和透明度
-          hover: {
-            backgroundColor: '#326EF4',
-            backgroundOpacity: 1,
-          },
-        },
       },
     });
 

From 52339402ae4e904636e8eee25318193d589aec55 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 2 Feb 2024 15:03:29 +0800
Subject: [PATCH 55/64] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=AE=BD?=
 =?UTF-8?q?=E9=AB=98=E6=8B=96=E6=8B=BD=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__snapshots__/spread-sheet-spec.ts.snap   | 132 ++++++++++++++++++
 .../__snapshots__/theme-spec.ts.snap          |  12 --
 .../spreadsheet/spread-sheet-spec.ts          |  20 +++
 .../unit/sheet-type/pivot-sheet-spec.ts       |   9 +-
 .../utils/__snapshots__/merge-spec.ts.snap    |   6 +-
 .../s2-core/src/common/constant/options.ts    |  12 +-
 .../s2-core/src/common/constant/resize.ts     |   4 +-
 .../s2-core/src/common/interface/resize.ts    |   6 +
 .../s2-core/src/common/interface/store.ts     |   2 +-
 .../s2-core/src/common/interface/theme.ts     |   6 -
 .../src/interaction/row-column-resize.ts      |  10 +-
 .../s2-core/src/sheet-type/spread-sheet.ts    | 104 ++++++++++----
 packages/s2-core/src/theme/index.ts           |   2 -
 packages/s2-core/src/utils/hide-columns.ts    |   5 +-
 packages/s2-core/src/utils/merge.ts           |   7 +-
 .../utils/__snapshots__/options-spec.ts.snap  |   6 +-
 packages/s2-vue/src/hooks/useSheetUpdate.ts   |   3 +-
 .../docs/api/basic-class/base-data-set.en.md  |   2 +-
 .../docs/api/basic-class/base-data-set.zh.md  |   4 +-
 .../docs/api/basic-class/spreadsheet.en.md    |   4 +-
 .../docs/api/basic-class/spreadsheet.zh.md    |  14 +-
 s2-site/docs/api/general/S2Theme.zh.md        |   2 -
 s2-site/docs/common/interaction.zh.md         |   2 +
 .../manual/advanced/interaction/resize.zh.md  |  16 +++
 s2-site/docs/manual/migration-v2.zh.md        |  27 +++-
 .../examples/interaction/basic/demo/resize.ts |   4 +
 26 files changed, 339 insertions(+), 82 deletions(-)
 create mode 100644 packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap

diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap
new file mode 100644
index 0000000000..2a4a70c149
--- /dev/null
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap
@@ -0,0 +1,132 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpreadSheet Tests Sheet Config Change Tests should reset config 1`] = `
+Object {
+  "conditions": Object {},
+  "cornerExtraFieldText": "",
+  "cornerText": "",
+  "customSVGIcons": Array [],
+  "debug": false,
+  "device": "pc",
+  "frozen": Object {
+    "colCount": 0,
+    "rowCount": 0,
+    "rowHeader": true,
+    "trailingColCount": 0,
+    "trailingRowCount": 0,
+  },
+  "hd": true,
+  "headerActionIcons": Array [],
+  "height": 480,
+  "hierarchyType": "grid",
+  "interaction": Object {
+    "autoResetSheetStyle": true,
+    "brushSelection": Object {
+      "colCell": true,
+      "dataCell": true,
+      "rowCell": true,
+    },
+    "copy": Object {
+      "enable": true,
+      "withFormat": true,
+      "withHeader": false,
+    },
+    "eventListenerOptions": false,
+    "hiddenColumnFields": Array [],
+    "hoverFocus": Object {
+      "duration": 800,
+    },
+    "hoverHighlight": true,
+    "linkFields": Array [],
+    "multiSelection": true,
+    "overscrollBehavior": "auto",
+    "rangeSelection": true,
+    "resize": Object {
+      "colCellHorizontal": true,
+      "colCellVertical": true,
+      "colResizeType": "current",
+      "cornerCellHorizontal": true,
+      "minCellHeight": 40,
+      "minCellWidth": 40,
+      "rowCellVertical": true,
+      "rowResizeType": "current",
+    },
+    "scrollSpeedRatio": Object {
+      "horizontal": 1,
+      "vertical": 1,
+    },
+    "scrollbarPosition": "content",
+    "selectedCellHighlight": false,
+    "selectedCellsSpotlight": false,
+  },
+  "placeholder": "-",
+  "seriesNumber": Object {
+    "enable": false,
+  },
+  "showDefaultHeaderActionIcon": false,
+  "style": Object {
+    "colCell": Object {
+      "height": 30,
+      "heightByField": null,
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "widthByField": null,
+      "wordWrap": true,
+    },
+    "cornerCell": Object {
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "wordWrap": true,
+    },
+    "dataCell": Object {
+      "height": 30,
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "width": 96,
+      "wordWrap": true,
+    },
+    "layoutWidthType": "adaptive",
+    "rowCell": Object {
+      "heightByField": null,
+      "maxLines": 1,
+      "showTreeLeafNodeAlignDot": false,
+      "textOverflow": "ellipsis",
+      "widthByField": null,
+      "wordWrap": true,
+    },
+    "seriesNumberCell": Object {
+      "maxLines": 1,
+      "textOverflow": "ellipsis",
+      "wordWrap": true,
+    },
+  },
+  "tooltip": Object {
+    "autoAdjustBoundary": "body",
+    "enable": false,
+    "operation": Object {
+      "hiddenColumns": false,
+      "menu": Object {
+        "items": Array [],
+      },
+      "sort": false,
+    },
+  },
+  "totals": Object {},
+  "width": 600,
+}
+`;
+
+exports[`SpreadSheet Tests Sheet Config Change Tests should reset config 2`] = `
+Object {
+  "data": Array [],
+  "fields": Object {
+    "columns": Array [],
+    "rows": Array [],
+    "valueInCols": false,
+    "values": Array [],
+  },
+  "filterParams": Array [],
+  "meta": Array [],
+  "sortParams": Array [],
+}
+`;
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
index 31774e852c..01e1e4b6d0 100644
--- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
@@ -402,8 +402,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -932,8 +930,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -1462,8 +1458,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -1992,8 +1986,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -2522,8 +2514,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -3052,8 +3042,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
diff --git a/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts
index 7e3e978f6c..9e0925ee9f 100644
--- a/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts
@@ -545,6 +545,26 @@ describe('SpreadSheet Tests', () => {
       });
     });
 
+    test('should reset config', () => {
+      const s2 = new PivotSheet(container, mockDataConfig, s2Options);
+
+      s2.setOptions({
+        hierarchyType: 'tree',
+        tooltip: { enable: true },
+        frozen: { firstRow: true },
+      });
+
+      s2.setDataCfg({
+        fields: { rows: [], columns: [], values: [] },
+      });
+
+      s2.resetOptions();
+      s2.resetDataCfg();
+
+      expect(s2.options).toMatchSnapshot();
+      expect(s2.dataCfg).toMatchSnapshot();
+    });
+
     describe('Measure Text Tests', () => {
       const text = '测试';
       const font: TextTheme = {
diff --git a/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts b/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
index 4f7dcfdfee..be230d98a0 100644
--- a/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
+++ b/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
@@ -749,7 +749,7 @@ describe('PivotSheet Tests', () => {
 
   test('should rebuild hidden columns detail by status', async () => {
     // 重新更新, 但是没有隐藏列信息
-    await s2.render(false, { reBuildHiddenColumnsDetail: true });
+    await s2.render({ reloadData: false, reBuildHiddenColumnsDetail: true });
 
     expect(mockHideColumnsByThunkGroup).toHaveBeenCalledTimes(0);
 
@@ -758,12 +758,15 @@ describe('PivotSheet Tests', () => {
     ] as unknown as HiddenColumnsInfo[]);
 
     // 重新更新, 有隐藏列信息, 但是 reBuildHiddenColumnsDetail 为 false
-    await s2.render(false, { reBuildHiddenColumnsDetail: false });
+    await s2.render({
+      reloadData: false,
+      reBuildHiddenColumnsDetail: false,
+    });
 
     expect(mockHideColumnsByThunkGroup).toHaveBeenCalledTimes(0);
 
     // 重新更新, 有隐藏列信息, 且 reBuildHiddenColumnsDetail 为 true
-    await s2.render(false, { reBuildHiddenColumnsDetail: true });
+    await s2.render({ reloadData: false, reBuildHiddenColumnsDetail: true });
 
     expect(mockHideColumnsByThunkGroup).toHaveBeenCalledTimes(1);
   });
diff --git a/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
index 7dc5b6ad85..5185df1f1b 100644
--- a/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
+++ b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
@@ -22,9 +22,9 @@ Object {
   "interaction": Object {
     "autoResetSheetStyle": true,
     "brushSelection": Object {
-      "colCell": false,
+      "colCell": true,
       "dataCell": true,
-      "rowCell": false,
+      "rowCell": true,
     },
     "copy": Object {
       "enable": true,
@@ -46,6 +46,8 @@ Object {
       "colCellVertical": true,
       "colResizeType": "current",
       "cornerCellHorizontal": true,
+      "minCellHeight": 20,
+      "minCellWidth": 20,
       "rowCellVertical": true,
       "rowResizeType": "current",
     },
diff --git a/packages/s2-core/src/common/constant/options.ts b/packages/s2-core/src/common/constant/options.ts
index 5b186e191a..9cc6b96ffc 100644
--- a/packages/s2-core/src/common/constant/options.ts
+++ b/packages/s2-core/src/common/constant/options.ts
@@ -1,4 +1,8 @@
-import { ResizeType } from '../../common/constant/resize';
+import {
+  RESIZE_MIN_CELL_HEIGHT,
+  RESIZE_MIN_CELL_WIDTH,
+  ResizeType,
+} from '../../common/constant/resize';
 import {
   HOVER_FOCUS_DURATION,
   ScrollbarPositionType,
@@ -92,8 +96,8 @@ export const DEFAULT_OPTIONS: S2Options = {
     autoResetSheetStyle: true,
     brushSelection: {
       dataCell: true,
-      rowCell: false,
-      colCell: false,
+      rowCell: true,
+      colCell: true,
     },
     multiSelection: true,
     rangeSelection: true,
@@ -105,6 +109,8 @@ export const DEFAULT_OPTIONS: S2Options = {
       colCellVertical: true,
       rowResizeType: ResizeType.CURRENT,
       colResizeType: ResizeType.CURRENT,
+      minCellWidth: RESIZE_MIN_CELL_WIDTH,
+      minCellHeight: RESIZE_MIN_CELL_HEIGHT,
     },
     eventListenerOptions: false,
     selectedCellHighlight: false,
diff --git a/packages/s2-core/src/common/constant/resize.ts b/packages/s2-core/src/common/constant/resize.ts
index db0d17cd00..f0d1ee53d0 100644
--- a/packages/s2-core/src/common/constant/resize.ts
+++ b/packages/s2-core/src/common/constant/resize.ts
@@ -1,8 +1,10 @@
 export const RESIZE_START_GUIDE_LINE_ID = 'RESIZE_START_GUIDE_LINE';
 export const RESIZE_END_GUIDE_LINE_ID = 'RESIZE_END_GUIDE_LINE';
 export const RESIZE_MASK_ID = 'RESIZE_MASK';
+export const RESIZE_MIN_CELL_WIDTH = 20;
+export const RESIZE_MIN_CELL_HEIGHT = 20;
 
-// resize时鼠标移动方向类型
+// resize 时鼠标移动方向类型
 export enum ResizeDirectionType {
   /** 水平方向 resize */
   Horizontal = 'col',
diff --git a/packages/s2-core/src/common/interface/resize.ts b/packages/s2-core/src/common/interface/resize.ts
index edaf16f11c..ee50a6b14e 100644
--- a/packages/s2-core/src/common/interface/resize.ts
+++ b/packages/s2-core/src/common/interface/resize.ts
@@ -98,4 +98,10 @@ export interface ResizeInteractionOptions {
 
   /** 是否显示热区 */
   visible?: (cell: S2CellType) => boolean;
+
+  /** 单元格可拖拽最小宽度 */
+  minCellWidth?: number;
+
+  /** 单元格可拖拽最小高度 */
+  minCellHeight?: number;
 }
diff --git a/packages/s2-core/src/common/interface/store.ts b/packages/s2-core/src/common/interface/store.ts
index 5ee5bcdfef..8fe4c72c0e 100644
--- a/packages/s2-core/src/common/interface/store.ts
+++ b/packages/s2-core/src/common/interface/store.ts
@@ -79,7 +79,7 @@ export interface StoreKey {
   /**
    * 原始数据配置
    */
-  originalDataCfg: Partial<S2DataConfig>;
+  originalDataCfg: Partial<S2DataConfig> | undefined | null;
 
   /**
    * 可视区域包裹盒模型
diff --git a/packages/s2-core/src/common/interface/theme.ts b/packages/s2-core/src/common/interface/theme.ts
index f0d7d1da20..37e94b851f 100644
--- a/packages/s2-core/src/common/interface/theme.ts
+++ b/packages/s2-core/src/common/interface/theme.ts
@@ -201,12 +201,6 @@ export interface ResizeArea {
 
   /** 交互态 */
   interactionState?: InteractionState;
-
-  /** 单元格可拖拽最小宽度 */
-  minCellWidth?: number;
-
-  /** 单元格可拖拽最小高度 */
-  minCellHeight?: number;
 }
 
 export interface ScrollBarTheme {
diff --git a/packages/s2-core/src/interaction/row-column-resize.ts b/packages/s2-core/src/interaction/row-column-resize.ts
index f2145bbc64..e7a6d88333 100644
--- a/packages/s2-core/src/interaction/row-column-resize.ts
+++ b/packages/s2-core/src/interaction/row-column-resize.ts
@@ -20,6 +20,8 @@ import {
   RESIZE_MASK_ID,
   RESIZE_START_GUIDE_LINE_ID,
   S2Event,
+  RESIZE_MIN_CELL_WIDTH,
+  RESIZE_MIN_CELL_HEIGHT,
 } from '../common/constant';
 import type {
   ResizeDetail,
@@ -489,7 +491,9 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
       end: ResizeGuideLinePath;
     },
   ) {
-    const { minCellWidth } = this.getResizeAreaTheme();
+    const { minCellWidth = RESIZE_MIN_CELL_WIDTH } =
+      (this.spreadsheet.options.interaction
+        ?.resize as ResizeInteractionOptions) || {};
     let nextOffsetX = offsetX - this.resizeStartPosition.offsetX!;
 
     if (resizeInfo.width + nextOffsetX < minCellWidth) {
@@ -517,7 +521,9 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
       end: ResizeGuideLinePath;
     },
   ) {
-    const { minCellHeight } = this.getResizeAreaTheme();
+    const { minCellHeight = RESIZE_MIN_CELL_HEIGHT } =
+      (this.spreadsheet.options.interaction
+        ?.resize as ResizeInteractionOptions) || {};
     let nextOffsetY = offsetY - this.resizeStartPosition.offsetY!;
 
     if (resizeInfo.height + nextOffsetY < minCellHeight) {
diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
index fa77c6cf95..2561782baf 100644
--- a/packages/s2-core/src/sheet-type/spread-sheet.ts
+++ b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -270,6 +270,19 @@ export abstract class SpreadSheet extends EE {
     return this.options.tooltip?.render?.(this) || new BaseTooltip(this);
   }
 
+  /**
+   * 展示 Tooltip 提示
+   * @alias s2.tooltip.show()
+   * @example
+      s2.showTooltip({
+        position: {
+          x: event.clientX,
+          y: event.clientY,
+        },
+        content: '<div>xxx</div>',
+        options: {}
+      })
+   */
   public showTooltip<
     T = TooltipContentType,
     Menu = BaseTooltipOperatorMenuOptions,
@@ -355,16 +368,16 @@ export abstract class SpreadSheet extends EE {
   }
 
   /**
-   * Update data config and keep pre-sort operations
-   * Group sort params kept in {@see store} and
-   * Priority: group sort > advanced sort
-   * @param dataCfg
-   * @param reset 是否使用传入的 dataCfg 重置已保存的 dataCfg
-   *
-   * @example setDataCfg(dataCfg, true) 直接使用传入的 DataCfg，不再与上次数据进行合并
+   * 更新表格数据
+   * @param dataCfg 数据源配置
+   * @param reset 是否重置数据源配置, 直接使用传入的 dataCfg，不再与之前的配置进行合并
+   * @example s2.setDataCfg(dataCfg)
+   * @example s2.setDataCfg(dataCfg, true)
    */
   public setDataCfg<T extends boolean = false>(
-    dataCfg: T extends true ? S2DataConfig : Partial<S2DataConfig>,
+    dataCfg: T extends true
+      ? S2DataConfig | undefined | null
+      : Partial<S2DataConfig>,
     reset?: T,
   ) {
     this.store.set('originalDataCfg', dataCfg);
@@ -378,7 +391,17 @@ export abstract class SpreadSheet extends EE {
     clearValueRangeState(this);
   }
 
-  public setOptions(options: Partial<S2Options>, reset?: boolean) {
+  /**
+   * 更新表格配置
+   * @param options 配置
+   * @param reset 是否重置配置, 直接使用传入的 options，不再与之前的配置进行合并
+   * @example s2.setOptions(dataCfg)
+   * @example s2.setOptions(dataCfg, true)
+   */
+  public setOptions<T extends boolean = false>(
+    options: T extends true ? S2Options | undefined | null : Partial<S2Options>,
+    reset?: T,
+  ) {
     this.hideTooltip();
 
     if (reset) {
@@ -387,7 +410,7 @@ export abstract class SpreadSheet extends EE {
       this.options = customMerge(this.options, options);
     }
 
-    if (reset || options.tooltip?.render) {
+    if (reset || options?.tooltip?.render) {
       this.initTooltip();
     }
 
@@ -395,13 +418,29 @@ export abstract class SpreadSheet extends EE {
     this.registerIcons();
   }
 
+  /**
+   * 重置表格数据
+   * @example s2.resetDataCfg()
+   */
+  public resetDataCfg() {
+    this.setDataCfg(null, true);
+  }
+
+  /**
+   * 重置表格配置
+   * @example s2.resetOptions()
+   */
+  public resetOptions() {
+    this.setOptions(null, true);
+  }
+
   private resetHiddenColumnsDetailInfoIfNeeded() {
     if (!isEmpty(this.options.interaction?.hiddenColumnFields)) {
       this.store.set('hiddenColumnsDetail', []);
     }
   }
 
-  private async doRender(reloadData = true, options: S2RenderOptions = {}) {
+  private async doRender(options?: S2RenderOptions) {
     // 防止表格卸载后, 再次调用 render 函数的报错
     if (
       !this.getCanvasElement() ||
@@ -410,8 +449,11 @@ export abstract class SpreadSheet extends EE {
       return;
     }
 
-    const { reBuildDataSet = false, reBuildHiddenColumnsDetail = true } =
-      options;
+    const {
+      reloadData = true,
+      reBuildDataSet = false,
+      reBuildHiddenColumnsDetail = true,
+    } = options || {};
 
     this.emit(S2Event.LAYOUT_BEFORE_RENDER);
 
@@ -434,26 +476,38 @@ export abstract class SpreadSheet extends EE {
   }
 
   /**
-   * 同步渲染
-   * @deprecated 适配 g5.0 异步渲染过程中暂时保留
+   * 渲染表格
+   * @param reloadData
+   * @param options
+   * @example
+      s2.render(true)
+      s2.render(false)
+      s2.render({
+        reloadData: true;
+        reBuildDataSet: true;
+        reBuildHiddenColumnsDetail: true;
+      })
    */
-  // eslint-disable-next-line camelcase
-  public UNSAFE_render(reloadData?: boolean, options?: S2RenderOptions) {
-    this.doRender(reloadData, options);
-  }
-
-  public async render(
-    reloadData?: boolean,
-    options?: S2RenderOptions,
-  ): Promise<void> {
+  public async render(options?: S2RenderOptions | boolean): Promise<void> {
     if (this.destroyed) {
       return;
     }
 
+    const renderOptions: S2RenderOptions =
+      typeof options === 'boolean'
+        ? {
+            reloadData: options,
+          }
+        : options!;
+
     await this.container.ready;
-    await this.doRender(reloadData, options);
+    await this.doRender(renderOptions);
   }
 
+  /**
+   * 卸载表格
+   * @example s2.destroy()
+   */
   public destroy() {
     if (this.destroyed) {
       return;
diff --git a/packages/s2-core/src/theme/index.ts b/packages/s2-core/src/theme/index.ts
index fe2874c81b..3f8c1c279e 100644
--- a/packages/s2-core/src/theme/index.ts
+++ b/packages/s2-core/src/theme/index.ts
@@ -436,8 +436,6 @@ export const getTheme = (
       guideLineColor: basicColors[7],
       guideLineDisableColor: 'rgba(0,0,0,0.25)',
       guideLineDash: [3, 3],
-      minCellWidth: 42,
-      minCellHeight: 40,
 
       /* ---------- interaction state ----------- */
       interactionState: {
diff --git a/packages/s2-core/src/utils/hide-columns.ts b/packages/s2-core/src/utils/hide-columns.ts
index c0198f0298..7c9eb6c36e 100644
--- a/packages/s2-core/src/utils/hide-columns.ts
+++ b/packages/s2-core/src/utils/hide-columns.ts
@@ -129,7 +129,10 @@ export const hideColumns = async (
     });
     spreadsheet.interaction.reset();
     spreadsheet.store.set('hiddenColumnsDetail', hiddenColumnsDetail);
-    await spreadsheet.render(false, { reBuildHiddenColumnsDetail: false });
+    await spreadsheet.render({
+      reloadData: false,
+      reBuildHiddenColumnsDetail: false,
+    });
   };
 
   if (isEmpty(selectedColumnFields) && forceRender) {
diff --git a/packages/s2-core/src/utils/merge.ts b/packages/s2-core/src/utils/merge.ts
index 3bb4346e32..8fd2d5df09 100644
--- a/packages/s2-core/src/utils/merge.ts
+++ b/packages/s2-core/src/utils/merge.ts
@@ -42,7 +42,7 @@ const uniqueFields = (fields: Fields): Fields => {
 };
 
 export const getSafetyDataConfig = (
-  ...dataConfig: (Partial<S2DataConfig> | null)[]
+  ...dataConfig: (Partial<S2DataConfig> | null | undefined)[]
 ) => {
   const mergedDataCfg = customMerge<S2DataConfig>(
     DEFAULT_DATA_CONFIG,
@@ -65,5 +65,6 @@ export const getSafetyDataConfig = (
   return mergedDataCfg;
 };
 
-export const getSafetyOptions = (options: Partial<S2Options> | null) =>
-  customMerge<S2Options>(DEFAULT_OPTIONS, options);
+export const getSafetyOptions = (
+  options: Partial<S2Options> | null | undefined,
+) => customMerge<S2Options>(DEFAULT_OPTIONS, options);
diff --git a/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
index a0635acd4e..9b5cc9aefb 100644
--- a/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
+++ b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
@@ -22,9 +22,9 @@ Object {
   "interaction": Object {
     "autoResetSheetStyle": true,
     "brushSelection": Object {
-      "colCell": false,
+      "colCell": true,
       "dataCell": true,
-      "rowCell": false,
+      "rowCell": true,
     },
     "copy": Object {
       "enable": true,
@@ -46,6 +46,8 @@ Object {
       "colCellVertical": true,
       "colResizeType": "current",
       "cornerCellHorizontal": true,
+      "minCellHeight": 20,
+      "minCellWidth": 20,
       "rowCellVertical": true,
       "rowResizeType": "current",
     },
diff --git a/packages/s2-vue/src/hooks/useSheetUpdate.ts b/packages/s2-vue/src/hooks/useSheetUpdate.ts
index 34c12bcd17..4c7b76a2a5 100644
--- a/packages/s2-vue/src/hooks/useSheetUpdate.ts
+++ b/packages/s2-vue/src/hooks/useSheetUpdate.ts
@@ -68,7 +68,8 @@ export const useSheetUpdate = (
       return;
     }
 
-    s2Ref.value?.render(flag.reloadData, {
+    s2Ref.value?.render({
+      reloadData: flag.reloadData,
       reBuildDataSet: flag.rebuildDataset,
     });
     flag.rerender = false;
diff --git a/s2-site/docs/api/basic-class/base-data-set.en.md b/s2-site/docs/api/basic-class/base-data-set.en.md
index 5d4e39a8d9..988f5fc765 100644
--- a/s2-site/docs/api/basic-class/base-data-set.en.md
+++ b/s2-site/docs/api/basic-class/base-data-set.en.md
@@ -23,7 +23,7 @@ s2.dataSet.getFieldName('type')
 | getFieldName                              | get field name                                                 | `() => string`                                                                                                                                                                               |                                                                      |
 | getFieldFormatter                         | Get the field formatting function                              | `() => (v: string) => unknown`                                                                                                                                                               |                                                                      |
 | getFieldDescription                       | Get field description                                          | `() => string`                                                                                                                                                                               |                                                                      |
-| setDataCfg                                | Set data configuration                                         | `<T extends boolean = false>(dataCfg: T extends true ?` [`S2DataConfig`](/docs/api/general/S2DataConfig) `: Partial<`[`S2DataConfig`](/docs/api/general/S2DataConfig)`>, reset?: T) => void` | The `reset` parameter needs to be used in `@antv/s2-v1.34.0` version |
+| setDataCfg                                | Set data configuration                                         | `<T extends boolean = false>(dataCfg: T extends true ?` [`S2DataConfig`](/docs/api/general/S2DataConfig) `: Partial<`[`S2DataConfig`](/docs/api/general/S2DataConfig)`>, reset?: T) => void` | The `reset` parameter needs to be used in `@antv/s2^1.34.0` version |
 | getDisplayDataSet                         | Get the currently displayed dataset                            | () => [DataType\[\]](#datatype)                                                                                                                                                              |                                                                      |
 | getDimensionValues                        | get dimension value                                            | (filed: string, query?: [DataType](#datatype) ) => string\[]                                                                                                                                 |                                                                      |
 | getCellData                               | Get a single cell data                                         | (params: [CellDataParams](#celldataparams) ) => [DataType\[\]](#datatype)                                                                                                                    |                                                                      |
diff --git a/s2-site/docs/api/basic-class/base-data-set.zh.md b/s2-site/docs/api/basic-class/base-data-set.zh.md
index 73686a56f3..c55cd395b5 100644
--- a/s2-site/docs/api/basic-class/base-data-set.zh.md
+++ b/s2-site/docs/api/basic-class/base-data-set.zh.md
@@ -22,14 +22,14 @@ s2.dataSet.getFieldName('type')
 | getFieldName                           | 获取字段名                         | `() => string`                                                                                                                                                                               |                                             |
 | getFieldFormatter                      | 获取字段格式化函数                 | `() => (v: string) => unknown`                                                                                                                                                               |                                             |
 | getFieldDescription                    | 获取字段描述                       | `() => string`                                                                                                                                                                               |                                             |
-| setDataCfg                             | 设置数据配置                       | `<T extends boolean = false>(dataCfg: T extends true ?` [`S2DataConfig`](/docs/api/general/S2DataConfig) `: Partial<`[`S2DataConfig`](/docs/api/general/S2DataConfig)`>, reset?: T) => void` | `reset` 参数需在 `@antv/s2-v1.34.0`版本使用 |
+| setDataCfg                             | 设置数据配置                       | `<T extends boolean = false>(dataCfg: T extends true ?` [`S2DataConfig`](/docs/api/general/S2DataConfig) `: Partial<`[`S2DataConfig`](/docs/api/general/S2DataConfig)`>, reset?: T) => void` | `reset` 参数需在 `@antv/s2^1.34.0`版本使用 |
 | getDisplayDataSet                      | 获取当前显示的数据集               | () => [DataType[]](#datatype)                                                                                                                                                                |                                             |
 | getDimensionValues                     | 获取维值                           | (filed: string, query?: [DataType](#datatype) ) => string[]                                                                                                                                  |                                             |
 | getCellData                            | 获取单个的单元格数据               | (params: [CellDataParams](#celldataparams)) => [DataType[]](#datatype)                                                                                                                       |                                             |
 | getMultiData                           | 获取批量的单元格数据               | (query: [DataType](#datatype),params?: [MultiDataParams](#multidataparams)) => [DataType[]](#datatype)                                                                                       |                                             |
 | <strike>getMultiData<strike>  （已废弃） | 获取批量的单元格数据               | (query: [DataType](#datatype), isTotals?: boolean, isRow?: boolean, drillDownFields?: string[], includeTotalData:boolean) => [DataType[]](#datatype)                                         |                                             |
 | moreThanOneValue                       | 是否超过 1 个数值                  | () => [ViewMeta](#viewmeta)                                                                                                                                                                  |                                             |
-| isEmpty                                | 是否为空数据集                     | () => `boolean`                                                                                                                                                                              | `@antv/s2-v1.51.1`                          |
+| isEmpty                                | 是否为空数据集                     | () => `boolean`                                                                                                                                                                              | `@antv/s2^1.51.1`                          |
 
 ### DataType
 
diff --git a/s2-site/docs/api/basic-class/spreadsheet.en.md b/s2-site/docs/api/basic-class/spreadsheet.en.md
index 1f35246c1c..cfa5d5dc07 100644
--- a/s2-site/docs/api/basic-class/spreadsheet.en.md
+++ b/s2-site/docs/api/basic-class/spreadsheet.en.md
@@ -38,8 +38,8 @@ s2.isPivotMode()
 | hideTooltip                | hide tooltip                                                                                                                                                                                     | `() => void`                                                                                                                                                           |                                                                      |
 | destroyTooltip             | destroy tooltip                                                                                                                                                                                  | `() => void`                                                                                                                                                           |                                                                      |
 | registerIcons              | Register custom svg icons (according to `options.customSVGIcons` )                                                                                                                               | `() => void`                                                                                                                                                           |                                                                      |
-| setDataCfg                 | Update data configuration                                                                                                                                                                        | (dataCfg: [S2DataConfig](/docs/api/general/S2DataConfig) , reset?: boolean ) => void                                                                                   | The `reset` parameter needs to be used in `@antv/s2-v1.34.0` version |
-| setOptions                 | Update table configuration                                                                                                                                                                       | (options: [S2Options](/docs/api/general/S2Options) , reset?: boolean) => void                                                                                          | The `reset` parameter needs to be used in `@antv/s2-v1.34.0` version |
+| setDataCfg                 | Update data configuration                                                                                                                                                                        | (dataCfg: [S2DataConfig](/docs/api/general/S2DataConfig) , reset?: boolean ) => void                                                                                   | The `reset` parameter needs to be used in `@antv/s2^1.34.0` version |
+| setOptions                 | Update table configuration                                                                                                                                                                       | (options: [S2Options](/docs/api/general/S2Options) , reset?: boolean) => void                                                                                          | The `reset` parameter needs to be used in `@antv/s2^1.34.0` version |
 | render                     | Re-render the table, if `reloadData` = true, the data will be recalculated, `reBuildDataSet` = true, rebuild the data set, `reBuildHiddenColumnsDetail` = true rebuild hidden column information | `(reloadData?: boolean, { reBuildDataSet?: boolean; reBuildHiddenColumnsDetail?: boolean }) => Promise<void>`                                                                   |                                                                      |
 | destroy                    | destroy form                                                                                                                                                                                     | `() => void`                                                                                                                                                           |                                                                      |
 | setThemeCfg                | Update theme configuration (including theme schema, color palette, theme name)                                                                                                                   | (themeCfg: [ThemeCfg](/docs/api/general/S2Theme/#themecfg) ) => void                                                                                                   |                                                                      |
diff --git a/s2-site/docs/api/basic-class/spreadsheet.zh.md b/s2-site/docs/api/basic-class/spreadsheet.zh.md
index 1804458660..cb2c4d3030 100644
--- a/s2-site/docs/api/basic-class/spreadsheet.zh.md
+++ b/s2-site/docs/api/basic-class/spreadsheet.zh.md
@@ -34,14 +34,16 @@ s2.isPivotMode()
 | isTableMode | 是否是明细表                                                                                                                 | `() => boolean` |    |
 | isValueInCols | 是否是数值置于行头                                                                                                              | `() => boolean` |    |
 | clearDrillDownData | 清除下钻数据                                                                                                                 | `(rowNodeId?: string) => void` |    |
-| showTooltip | 显示 tooltip                                                                                                             | (showOptions: [TooltipShowOptions](/docs/api/common/custom-tooltip)) => void |    |
+| showTooltip | 显示 tooltip   （别名 `tooltip.show`)                                                                                                         | (showOptions: [TooltipShowOptions](/docs/api/common/custom-tooltip)) => void |    |
 | showTooltipWithInfo | 显示 tooltip, 并且展示一些默认信息    | (event: `CanvasEvent \| MouseEvent`, data: [TooltipData[]](/docs/api/common/custom-tooltip), options?: [TooltipOptions](/docs/api/common/custom-tooltip)) => void |
-| hideTooltip | 隐藏 tooltip                                                                                                             | `() => void` |    |
-| destroyTooltip | 销毁 tooltip                                                                                                             | `() => void` |    |
+| hideTooltip | 隐藏 tooltip （别名：`tooltip.hide`)                                                                                                           | `() => void` |    |
+| destroyTooltip | 销毁 tooltip     （别名 `tooltip.destroy`)                                                                                                      | `() => void` |    |
 | registerIcons | 注册 自定义 svg 图标 （根据 `options.customSVGIcons`)                                                                            | `() => void` |    |
-| setDataCfg | 更新数据配置                                                                                                                 | `<T extends boolean = false>(dataCfg: T extends true ?` [`S2DataConfig`](/docs/api/general/S2DataConfig) `: Partial<`[`S2DataConfig`](/docs/api/general/S2DataConfig)`>, reset?: T) => void` | `reset` 参数需在 `@antv/s2-v1.34.0`版本使用  |
-| setOptions | 更新表格配置                                                                                                                 | (options: [S2Options](/docs/api/general/S2Options), reset?: boolean) => void |  `reset` 参数需在 `@antv/s2-v1.34.0`版本使用 |
-| render | 重新渲染表格，如果 `reloadData` = true, 则会重新计算数据，`reBuildDataSet` = true, 重新构建数据集，`reBuildHiddenColumnsDetail` = true 重新构建隐藏列信息 | `(reloadData?: boolean, { reBuildDataSet?: boolean; reBuildHiddenColumnsDetail?: boolean }) => Promise<void>` |    |
+| setDataCfg | 更新表格数据                                                                                                                 | `<T extends boolean = false>(dataCfg: T extends true ?` [`S2DataConfig`](/docs/api/general/S2DataConfig) `: Partial<`[`S2DataConfig`](/docs/api/general/S2DataConfig)`>, reset?: T) => void` | `reset` 参数需在 `@antv/s2^1.34.0`版本使用  |
+| setOptions | 更新表格配置                                                                                                                 | (options: [S2Options](/docs/api/general/S2Options), reset?: boolean) => void |  `reset` 参数需在 `@antv/s2^1.34.0`版本使用  |
+| resetDataCfg | 重置表格数据                                                                                                                 | () => void | |
+| resetOptions | 重置表格配置                                                                                                                 | () => void |   |
+| render | 重新渲染表格，如果 `reloadData` = true, 则会重新计算数据，`reBuildDataSet` = true, 重新构建数据集，`reBuildHiddenColumnsDetail` = true 重新构建隐藏列信息 | `(reloadData?: boolean \| { reloadData?: boolean, reBuildDataSet?: boolean; reBuildHiddenColumnsDetail?: boolean }) => Promise<void>` |    |
 | destroy | 销毁表格                                                                                                                   | `() => void` |    |
 | setThemeCfg | 更新主题配置 （含主题 schema, 色板，主题名）                                                                                            | (themeCfg: [ThemeCfg](/docs/api/general/S2Theme/#themecfg)) => void |    |
 | setTheme | 更新主题 （只包含主题 scheme)                                                                                                    | (theme: [S2Theme](/docs/api/general/S2Theme/#s2theme)) => void |    |
diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md
index ecd1034591..5ac5e0be04 100644
--- a/s2-site/docs/api/general/S2Theme.zh.md
+++ b/s2-site/docs/api/general/S2Theme.zh.md
@@ -90,8 +90,6 @@ s2.setTheme({
 | guideLineColor    | 参考线颜色                                                                                                   | `string`                              | -        |      |
 | guideLineDash     | 热区参考线 [虚线模式](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash) | `number[]`                            | `[3, 3]` |      |
 | interactionState  | 热区交互态样式                                                                                               | [InteractionState](#interactionstate) | -        |      |
-| minCellWidth  | 单元格可拖拽最小宽度            | `number`| -        |      |
-| minCellHeight  | 单元格可拖拽最小高度        | `number` | -        |      |
 
 #### ScrollBarTheme
 
diff --git a/s2-site/docs/common/interaction.zh.md b/s2-site/docs/common/interaction.zh.md
index eb7f35008e..40ecf205ec 100644
--- a/s2-site/docs/common/interaction.zh.md
+++ b/s2-site/docs/common/interaction.zh.md
@@ -71,6 +71,8 @@ interface ScrollSpeedRatio {
 | rowResizeType        | 用于控制行高 resize 时是同时对所有 Cell 生效，还是只对当前行生效。默认对所有行生效 | `all`\| `current` | `all`  |       |
 | disable        | 用于控制行高 resize 是否生效。[查看示例](/examples/interaction/advanced/#resize-disable) | (resizeInfo: [S2CellType](/docs/api/components/sheet-component#resizeinfo)) => boolean |   |       |
 | visible        | 自定义当前单元格是否显示 resize 热区 | (cell: [S2CellType](/docs/api/basic-class/base-cell)) => boolean |   |       |
+| minCellWidth  | 单元格可拖拽最小宽度            | `number`|  20       |      |
+| minCellHeight  | 单元格可拖拽最小高度        | `number` | 20        |      |
 
 ### brushSelection
 
diff --git a/s2-site/docs/manual/advanced/interaction/resize.zh.md b/s2-site/docs/manual/advanced/interaction/resize.zh.md
index 612cb8d9bc..88d4640c51 100644
--- a/s2-site/docs/manual/advanced/interaction/resize.zh.md
+++ b/s2-site/docs/manual/advanced/interaction/resize.zh.md
@@ -174,6 +174,22 @@ const s2Options = {
   </tbody>
 </table>
 
+### 最小可拖拽宽高
+
+```ts
+const s2Options = {
+  interaction: {
+    resize: {
+      // 单元格可拖拽最小宽度
+      minCellWidth: 20,
+
+      // 单元格可拖拽最小高度
+      minCellHeight: 20
+    }
+  },
+};
+```
+
 ### 主题配置
 
 支持通过调整主题修改热区大小/颜色，参考线颜色/间隔等配置，具体请查看 [主题配置](/manual/basic/theme) 章节。
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index 8183431af2..ae8384f591 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -370,7 +370,7 @@ const s2Options = {
 }
 ```
 
-### 高清适配配置调整
+#### 高清适配配置调整
 
 ```diff
 const s2Options = {
@@ -379,7 +379,7 @@ const s2Options = {
 }
 ```
 
-### 序号配置变更
+#### 序号配置变更
 
 序号相关配置统一收拢在 `seriesNumber`
 
@@ -395,7 +395,7 @@ const s2Options = {
 }
 ```
 
-### 单元格宽高拖拽逻辑变更
+#### 单元格宽高拖拽逻辑变更
 
 1. 在 `1.x` 中，宽高调整对**所有单元格**生效，`2.x` 新增 `rowResizeType/colResizeType` 选择对当前还是所有单元格生效。
 
@@ -414,7 +414,7 @@ const s2Options = {
 
 具体请查看 [行列宽高调整](/manual/advanced/interaction/resize) 相关文档。
 
-### Facet 变更
+#### Facet 变更
 
 1. 静态属性 `layoutResult` 废弃，使用 `s2.facet.getLayoutResult()` 动态获取。
 
@@ -448,7 +448,24 @@ export interface LayoutResult {
 
 具体请查看 [获取单元格数据](/manual/advanced/get-cell-data) 相关文档。
 
-### 数据集处理逻辑变更
+#### 渲染参数变更
+
+render 函数的参数从 boolean 扩展为 `boolean | object`, 当为 `boolean` 时，等价与 `{ reloadData: boolean }`
+
+```diff
+- s2.render(true)
+- s2.render(false)
+- s2.render(false, { reBuildHiddenColumnsDetail: false })
+
++ s2.render({ reloadData: true }) // 等价于 s2.render(true)
++ s2.render({ reloadData: false }) // 等价于 s2.render(false)
++ s2.render({
++   reloadData: false,
++   reBuildHiddenColumnsDetail: false,
++ });
+```
+
+#### 数据集处理逻辑变更
 
 TODO:
 
diff --git a/s2-site/examples/interaction/basic/demo/resize.ts b/s2-site/examples/interaction/basic/demo/resize.ts
index b4f65b4a97..f3144044e9 100644
--- a/s2-site/examples/interaction/basic/demo/resize.ts
+++ b/s2-site/examples/interaction/basic/demo/resize.ts
@@ -24,6 +24,10 @@ fetch(
           rowResizeType: ResizeType.ALL,
           // 列宽调整时，只影响当前列
           colResizeType: ResizeType.CURRENT,
+          // 单元格可拖拽最小宽度
+          minCellWidth: 20,
+          // 单元格可拖拽最小高度
+          minCellHeight: 20,
         },
       },
     };

From 0ae96587e243702f7b223d4fe37bef8f55592cec Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 2 Feb 2024 15:56:11 +0800
Subject: [PATCH 56/64] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=E6=A0=B7=E5=BC=8F=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-react/src/hooks/useSpreadSheet.ts |   3 +-
 pnpm-lock.yaml                                | 113 ++++++++++--------
 s2-site/.dumi/global.less                     |   6 +-
 3 files changed, 71 insertions(+), 51 deletions(-)

diff --git a/packages/s2-react/src/hooks/useSpreadSheet.ts b/packages/s2-react/src/hooks/useSpreadSheet.ts
index 6c77d38c13..8c33428eda 100644
--- a/packages/s2-react/src/hooks/useSpreadSheet.ts
+++ b/packages/s2-react/src/hooks/useSpreadSheet.ts
@@ -144,7 +144,8 @@ export function useSpreadSheet(props: SheetComponentsProps) {
       reBuildDataSet,
     });
 
-    s2Ref.current?.render(renderOptions!.reloadData, {
+    s2Ref.current?.render({
+      reloadData: renderOptions!.reloadData,
       reBuildDataSet: renderOptions!.reBuildDataSet,
     });
   }, [dataCfg, options, themeCfg, onSheetUpdate]);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d61786e299..908e9b1b18 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -474,8 +474,8 @@ importers:
         specifier: next
         version: link:../packages/s2-react
       antd:
-        specifier: ^5.13.2
-        version: 5.13.2(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.13.3
+        version: 5.13.3(react-dom@18.2.0)(react@18.2.0)
       copy-to-clipboard:
         specifier: ^3.3.3
         version: 3.3.3
@@ -700,8 +700,8 @@ packages:
       stylis: 4.1.3
     dev: true
 
-  /@ant-design/cssinjs@1.18.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-514V9rjLaFYb3v4s55/8bg2E6fb81b99s3crDZf4nSwtiDLLXs8axnIph+q2TVkY2hbJPZOn/cVsVcnLkzFy7w==}
+  /@ant-design/cssinjs@1.18.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-IrUAOj5TYuMG556C9gdbFuOrigyhzhU5ZYpWb3gYTxAwymVqRbvLzFCZg6OsjLBR6GhzcxYF3AhxKmjB+rA2xA==}
     peerDependencies:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
@@ -3589,7 +3589,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.7
       '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
-      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/trigger': 1.18.3(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -3612,6 +3612,23 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  /@rc-component/trigger@1.18.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Ksr25pXreYe1gX6ayZ1jLrOrl9OAUHUqnuhEx6MeHnNa1zVM5Y2Aj3Q35UrER0ns8D2cJYtmJtVli+i+4eKrvA==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.5.1
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@remix-run/router@1.2.1:
     resolution: {integrity: sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==}
     engines: {node: '>=14'}
@@ -4659,8 +4676,8 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
-  /@types/hast@3.0.3:
-    resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==}
+  /@types/hast@3.0.4:
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
     dependencies:
       '@types/unist': 2.0.6
     dev: false
@@ -6464,21 +6481,21 @@ packages:
       - moment
     dev: true
 
-  /antd@5.13.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-P+N8gc0NOPy2WqJj/57Ey3dZUmb7nEUwAM+CIJaR5SOEjZnhEtMGRJSt+3lnhJ3MNRR39aR6NYkRVp2mYfphiA==}
+  /antd@5.13.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-phQJa4ezs6e2AnWRxbKVan9fvmURwntAfI+wDRRSP7spPY6t3afjvWfAcVp0Ekb1EPzvF/jUr64j3RMQQYWHVw==}
     peerDependencies:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
       '@ant-design/colors': 7.0.2
-      '@ant-design/cssinjs': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      '@ant-design/cssinjs': 1.18.4(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/react-slick': 1.0.2(react@18.2.0)
       '@ctrl/tinycolor': 3.6.1
       '@rc-component/color-picker': 1.5.1(react-dom@18.2.0)(react@18.2.0)
       '@rc-component/mutate-observer': 1.1.0(react-dom@18.2.0)(react@18.2.0)
       '@rc-component/tour': 1.12.3(react-dom@18.2.0)(react@18.2.0)
-      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/trigger': 1.18.3(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
       copy-to-clipboard: 3.3.3
       dayjs: 1.11.10
@@ -12143,7 +12160,7 @@ packages:
   /hast-util-from-parse5@8.0.1:
     resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
     dependencies:
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       '@types/unist': 3.0.2
       devlop: 1.1.0
       hastscript: 8.0.0
@@ -12190,7 +12207,7 @@ packages:
   /hast-util-parse-selector@4.0.0:
     resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
     dependencies:
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
     dev: false
 
   /hast-util-phrasing@2.0.2:
@@ -12238,7 +12255,7 @@ packages:
   /hast-util-raw@9.0.2:
     resolution: {integrity: sha512-PldBy71wO9Uq1kyaMch9AHIghtQvIwxBUkv823pKmkTM3oV1JxtsTNYdevMxvUHqcnOAuO65JKU2+0NOxc2ksA==}
     dependencies:
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       '@types/unist': 3.0.2
       '@ungap/structured-clone': 1.2.0
       hast-util-from-parse5: 8.0.1
@@ -12294,7 +12311,7 @@ packages:
     resolution: {integrity: sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==}
     dependencies:
       '@types/estree': 1.0.0
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       '@types/unist': 3.0.2
       comma-separated-tokens: 2.0.3
       devlop: 1.1.0
@@ -12345,7 +12362,7 @@ packages:
   /hast-util-to-parse5@8.0.0:
     resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
     dependencies:
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       comma-separated-tokens: 2.0.3
       devlop: 1.1.0
       property-information: 6.2.0
@@ -12375,7 +12392,7 @@ packages:
   /hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
     dependencies:
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
     dev: false
 
   /hast@1.0.0:
@@ -12395,7 +12412,7 @@ packages:
   /hastscript@8.0.0:
     resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
     dependencies:
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       comma-separated-tokens: 2.0.3
       hast-util-parse-selector: 4.0.0
       property-information: 6.2.0
@@ -15723,7 +15740,7 @@ packages:
       ccount: 2.0.1
       devlop: 1.1.0
       mdast-util-find-and-replace: 3.0.1
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
     dev: false
 
   /mdast-util-gfm-footnote@1.0.1:
@@ -15843,7 +15860,7 @@ packages:
     resolution: {integrity: sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==}
     dependencies:
       '@types/estree-jsx': 1.0.0
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       '@types/mdast': 4.0.3
       devlop: 1.1.0
       mdast-util-from-markdown: 2.0.0
@@ -15856,7 +15873,7 @@ packages:
     resolution: {integrity: sha512-XZuPPzQNBPAlaqsTTgRrcJnyFbSOBovSadFgbFu8SnuNgm+6Bdx1K+IWoitsmj6Lq6MNtI+ytOqwN70n//NaBA==}
     dependencies:
       '@types/estree-jsx': 1.0.0
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       '@types/mdast': 4.0.3
       '@types/unist': 3.0.2
       ccount: 2.0.1
@@ -15888,7 +15905,7 @@ packages:
     resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
     dependencies:
       '@types/estree-jsx': 1.0.0
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       '@types/mdast': 4.0.3
       devlop: 1.1.0
       mdast-util-from-markdown: 2.0.0
@@ -15903,8 +15920,8 @@ packages:
       '@types/mdast': 3.0.10
       unist-util-is: 5.1.1
 
-  /mdast-util-phrasing@4.0.0:
-    resolution: {integrity: sha512-xadSsJayQIucJ9n053dfQwVu1kuXg7jCTdYsMK8rqzKZh52nLfSH/k0sAxE0u+pj/zKZX+o5wB+ML5mRayOxFA==}
+  /mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
     dependencies:
       '@types/mdast': 4.0.3
       unist-util-is: 6.0.0
@@ -15926,7 +15943,7 @@ packages:
   /mdast-util-to-hast@13.1.0:
     resolution: {integrity: sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==}
     dependencies:
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       '@types/mdast': 4.0.3
       '@ungap/structured-clone': 1.2.0
       devlop: 1.1.0
@@ -15955,7 +15972,7 @@ packages:
       '@types/mdast': 4.0.3
       '@types/unist': 3.0.2
       longest-streak: 3.1.0
-      mdast-util-phrasing: 4.0.0
+      mdast-util-phrasing: 4.1.0
       mdast-util-to-string: 4.0.0
       micromark-util-decode-string: 2.0.0
       unist-util-visit: 5.0.0
@@ -16083,7 +16100,7 @@ packages:
       micromark-factory-space: 2.0.0
       micromark-factory-title: 2.0.0
       micromark-factory-whitespace: 2.0.0
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-chunked: 2.0.0
       micromark-util-classify-character: 2.0.0
       micromark-util-html-tag-name: 2.0.0
@@ -16125,7 +16142,7 @@ packages:
   /micromark-extension-gfm-autolink-literal@2.0.0:
     resolution: {integrity: sha512-rTHfnpt/Q7dEAK1Y5ii0W8bhfJlVJFnJMHIPisfPK3gpVNuOP0VnRl96+YJ3RYWV/P4gFeQoGKNlT3RhuvpqAg==}
     dependencies:
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-sanitize-uri: 2.0.0
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
@@ -16149,7 +16166,7 @@ packages:
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.0
       micromark-factory-space: 2.0.0
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-normalize-identifier: 2.0.0
       micromark-util-sanitize-uri: 2.0.0
       micromark-util-symbol: 2.0.0
@@ -16191,7 +16208,7 @@ packages:
     dependencies:
       devlop: 1.1.0
       micromark-factory-space: 2.0.0
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
     dev: false
@@ -16221,7 +16238,7 @@ packages:
     dependencies:
       devlop: 1.1.0
       micromark-factory-space: 2.0.0
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
     dev: false
@@ -16261,7 +16278,7 @@ packages:
   /micromark-factory-destination@2.0.0:
     resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==}
     dependencies:
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
     dev: false
@@ -16278,7 +16295,7 @@ packages:
     resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==}
     dependencies:
       devlop: 1.1.0
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
     dev: false
@@ -16292,7 +16309,7 @@ packages:
   /micromark-factory-space@2.0.0:
     resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==}
     dependencies:
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-types: 2.0.0
     dev: false
 
@@ -16309,7 +16326,7 @@ packages:
     resolution: {integrity: sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==}
     dependencies:
       micromark-factory-space: 2.0.0
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
     dev: false
@@ -16326,7 +16343,7 @@ packages:
     resolution: {integrity: sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==}
     dependencies:
       micromark-factory-space: 2.0.0
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
     dev: false
@@ -16337,8 +16354,8 @@ packages:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
 
-  /micromark-util-character@2.0.1:
-    resolution: {integrity: sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==}
+  /micromark-util-character@2.1.0:
+    resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==}
     dependencies:
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
@@ -16365,7 +16382,7 @@ packages:
   /micromark-util-classify-character@2.0.0:
     resolution: {integrity: sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==}
     dependencies:
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
     dev: false
@@ -16406,7 +16423,7 @@ packages:
     resolution: {integrity: sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==}
     dependencies:
       decode-named-character-reference: 1.0.2
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-decode-numeric-character-reference: 2.0.1
       micromark-util-symbol: 2.0.0
     dev: false
@@ -16457,7 +16474,7 @@ packages:
   /micromark-util-sanitize-uri@2.0.0:
     resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
     dependencies:
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-encode: 2.0.0
       micromark-util-symbol: 2.0.0
     dev: false
@@ -16525,7 +16542,7 @@ packages:
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.0
       micromark-factory-space: 2.0.0
-      micromark-util-character: 2.0.1
+      micromark-util-character: 2.1.0
       micromark-util-chunked: 2.0.0
       micromark-util-combine-extensions: 2.0.0
       micromark-util-decode-numeric-character-reference: 2.0.1
@@ -19676,7 +19693,7 @@ packages:
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': 7.23.7
-      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/trigger': 1.18.3(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
       rc-input: 1.4.3(react-dom@18.2.0)(react@18.2.0)
       rc-menu: 9.12.4(react-dom@18.2.0)(react@18.2.0)
@@ -20040,7 +20057,7 @@ packages:
       react-dom: '*'
     dependencies:
       '@babel/runtime': 7.23.7
-      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/trigger': 1.18.3(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-overflow: 1.3.2(react-dom@18.2.0)(react@18.2.0)
@@ -20311,7 +20328,7 @@ packages:
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': 7.23.7
-      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
+      '@rc-component/trigger': 1.18.3(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -20646,7 +20663,7 @@ packages:
       '@types/react': '>=18'
       react: '>=18'
     dependencies:
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       devlop: 1.1.0
       hast-util-to-jsx-runtime: 2.3.0
       html-url-attributes: 3.0.0
@@ -21148,7 +21165,7 @@ packages:
   /rehype-raw@7.0.0:
     resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
     dependencies:
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       hast-util-raw: 9.0.2
       vfile: 6.0.1
     dev: false
@@ -21266,7 +21283,7 @@ packages:
   /remark-rehype@11.1.0:
     resolution: {integrity: sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==}
     dependencies:
-      '@types/hast': 3.0.3
+      '@types/hast': 3.0.4
       '@types/mdast': 4.0.3
       mdast-util-to-hast: 13.1.0
       unified: 11.0.4
diff --git a/s2-site/.dumi/global.less b/s2-site/.dumi/global.less
index ed1928fd6e..4d084c3813 100644
--- a/s2-site/.dumi/global.less
+++ b/s2-site/.dumi/global.less
@@ -6,8 +6,10 @@
 //   border-bottom: none !important;
 // }
 
-ul {
-  margin-bottom: 16px !important;
+.ant-layout-content {
+  ul {
+    margin-bottom: 16px !important;
+  }
 }
 
 details {

From f40076ad417dbc1235a5c079e6a953117e8a77ee Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 2 Feb 2024 16:37:37 +0800
Subject: [PATCH 57/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E7=BB=84?=
 =?UTF-8?q?=E5=86=85=E6=8E=92=E5=BA=8F=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/api/basic-class/spreadsheet.zh.md    |  1 +
 s2-site/docs/manual/basic/sort/group.zh.md    | 40 +++++++++++++++----
 .../analysis/sort/demo/group-sort.tsx         | 10 +++--
 3 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/s2-site/docs/api/basic-class/spreadsheet.zh.md b/s2-site/docs/api/basic-class/spreadsheet.zh.md
index cb2c4d3030..5212e5984c 100644
--- a/s2-site/docs/api/basic-class/spreadsheet.zh.md
+++ b/s2-site/docs/api/basic-class/spreadsheet.zh.md
@@ -66,6 +66,7 @@ s2.isPivotMode()
 | measureText | 获取文本在画布中的测量信息  | (text: `string`, font: [TextTheme](/docs/api/general/S2Theme#texttheme)) => [TextMetrics](https://developer.mozilla.org/zh-CN/docs/Web/API/TextMetrics) \| `null` |    |
 | measureTextWidth | 获取文本在画布中的测量宽度   | (text: `string`, font: [TextTheme](/docs/api/general/S2Theme#texttheme)) => `number` \| `null` |    |
 | measureTextHeight |  获取文本在画布中的测量高度 | (text:`string`, font: [TextTheme](/docs/api/general/S2Theme#texttheme)) => `number` \| `null` |    |
+| groupSortByMethod | 组内排序（透视表有效）  | (sortMethod: `'asc' \| 'desc'`, meta: [Node](/docs/api/basic-class/node)) => void  |    |
 
 ### S2MountContainer
 
diff --git a/s2-site/docs/manual/basic/sort/group.zh.md b/s2-site/docs/manual/basic/sort/group.zh.md
index a7cba7c007..986486c154 100644
--- a/s2-site/docs/manual/basic/sort/group.zh.md
+++ b/s2-site/docs/manual/basic/sort/group.zh.md
@@ -6,22 +6,48 @@ tag: Updated
 
 ## 简介
 
-`@antv/s2-react` 提供了默认的组内排序功能，主要根据数值对 `行头/列头` 进行排序，[查看更多排序示例](https://s2.antv.antgroup.com/examples#category-sort)
-
 `组内排序` 代表只影响一个分组内部的排序，例如下图中 `笔-价格` 选择 `组内升序` 时，`省份` 的排序方式不会更改，只会更改每个 `省份` 内部 `城市` 的顺序。
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*SszqS7EGaXkAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
+:::warning{title="注意"}
+`行头/列头` 只存在单一状态，当前状态会覆盖前一状态，如上图所示，当对 `笔` 进行排序时，`纸张` 的排序状态消失，`行头 + 列头` 可同时存在自身状态。
+:::
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PuoGS7DQdV8AAAAAAAAAAAAADmJ7AQ/original" width="600" alt="group-sort" />
+
+## 使用 `@antv/s2`
+
+`@antv/s2` 提供组内排序的能力，可以自行实现 [Tooltip 排序菜单](/manual/basic/tooltip) 后，然后调用相关 [API](/api/basic-class/spreadsheet).
+
+```ts
+const meta = cell.getMeta()
+
+// 升序
+s2.groupSortByMethod('asc', meta)
 
-`行头/列头` 只存在单一状态，当前状态会覆盖前一状态，如上图所示，当对 `笔` 进行排序时，`纸张` 的排序状态消失，`行头+列头` 可同时存在自身状态。
+// 降序
+s2.groupSortByMethod('desc', meta)
+```
 
-## 使用
+## 使用 `@antv/s2-react`
 
-使用 `s2-react` 的组件 `SheetComponent` 默认在数值头显示 `icon` ，点击后选择，有 `升序、降序、不排序` 三种方式，可在 `options` 中配置显示，如下：
+`@antv/s2-react` 基于 `@antv/s2` 的 [基础排序能力](/manual/basic/sort/basic)，和 `antd` 提供了默认的组内排序功能，排序菜单通过 [Tooltip](/manual/basic/tooltip) 承载（开启 `tooltip` 即可），主要根据数值对 `行头/列头` 进行排序，[查看更多排序示例](/examples/analysis/sort/#group-sort)
+
+使用 `@antv/s2-react` 的组件 `SheetComponent` 默认在数值头显示 `icon` ，点击后选择，有 `升序、降序、不排序` 三种方式，可在 `options` 中配置显示，如下：
 
 ```ts
 const s2Options = {
   width: 600,
   height: 600,
-  showDefaultHeaderActionIcon: true, // 默认为打开，可设置为 false 关闭
+  // 打开操作 icon（默认开启）
+  showDefaultHeaderActionIcon: true,
+  // 展示 tooltip（默认开启）
+  tooltip: {
+    operation: {
+      // 开启组内排序 （默认开启）
+      sort: true,
+    },
+  },
 };
 ```
+
+<Playground path="analysis/sort/demo/group-sort.tsx" rid='group-sort' height="200"></playground>
diff --git a/s2-site/examples/analysis/sort/demo/group-sort.tsx b/s2-site/examples/analysis/sort/demo/group-sort.tsx
index 02e4917d6a..fdc9055252 100644
--- a/s2-site/examples/analysis/sort/demo/group-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/group-sort.tsx
@@ -4,9 +4,7 @@ import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
 
-fetch(
-  'https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json',
-)
+fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
   .then((res) => res.json())
   .then((data) => {
     const s2DataConfig: S2DataConfig = {
@@ -40,6 +38,12 @@ fetch(
       width: 600,
       height: 480,
       showDefaultHeaderActionIcon: true,
+      tooltip: {
+        operation: {
+          // 开启组内排序
+          sort: true,
+        },
+      },
     };
 
     reactDOMClient

From cd90df57497f20dca5b40f6402aab27dfd05a888 Mon Sep 17 00:00:00 2001
From: wjgogogo <906626481@qq.com>
Date: Fri, 2 Feb 2024 17:54:16 +0800
Subject: [PATCH 58/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=B5=81=E8=BF=81=E7=A7=BB=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/manual/basic/i18n.zh.md   |  2 +-
 s2-site/docs/manual/migration-v2.zh.md | 44 +++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/s2-site/docs/manual/basic/i18n.zh.md b/s2-site/docs/manual/basic/i18n.zh.md
index bc9273c56a..5a05e17b57 100644
--- a/s2-site/docs/manual/basic/i18n.zh.md
+++ b/s2-site/docs/manual/basic/i18n.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 国际化
-order: 8
+order: 10
 ---
 
 `S2` 目前内置 `中/英` 两套文案，默认**中文**, [查看全部文件](https://github.com/antvis/S2/tree/next/packages/s2-core/src/common/i18n)
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index ae8384f591..976c433bc8 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -467,7 +467,49 @@ render 函数的参数从 boolean 扩展为 `boolean | object`, 当为 `boolean`
 
 #### 数据集处理逻辑变更
 
-TODO:
+对于多个 `values` 的数据，S2 期望一个数据项中就包含所有的 `values` 信息。
+
+```js
+{
+ fields:{
+   rows: ["province", "city"],
+      columns": ["type", "subType"],
+       values": ["number1", "number2"],
+ }
+}
+
+```
+
+```diff
+- [
+-   {
+-     province: '辽宁省',
+-     city: '达州市',
+-     type: '桌子',
+-     subType: '家具',
+-     number1: 3482.28,
+-   },
+-   {
+-     province: '辽宁省',
+-     city: '达州市',
+-     type: '桌子',
+-     subType: '家具',
+-     number2: 34,
+-   },
+- ];
+
++ [
++   {
++     province: '辽宁省',
++     city: '达州市',
++     type: '桌子',
++     subType: '家具',
++     number1: 3482.28,
++     number2: 34,
++   },
++ ];
+
+```
 
 ### 组件层 <Badge>@antv/s2-react</Badge>
 

From c946ce5cd6a8613d452a0c523b42b25f9abe2400 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 2 Feb 2024 17:57:21 +0800
Subject: [PATCH 59/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=8F=91=E5=B8=83=E6=97=B6=E9=97=B4=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/manual/migration-v2.zh.md | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index ae8384f591..737069e7a1 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -21,27 +21,36 @@ tag: New
 
 :::warning{title="注意"}
 
-`S2 2.0` 版本目前处于**内测阶段**, 部分 API 可能会随时改动。
+`S2 2.0` 版本目前处于**内测阶段**, 部分 API 可能会根据合理性随时改动。
 
 `npm` 的 [`dist-tag`](https://docs.npmjs.com/cli/v10/commands/npm-dist-tag) 对应关系如下：
 
 - `@antv/s2@next` 对应 `2.x` 版本
 - `@antv/s2@latest` 对应 `1.x` 版本
 
-**在 `@antv/s2@next` 版本稳定后，`next` 将默认指向 `2.x` 版本。**
-
 :::
 
+## 📅 正式版本发布时间
+
+目前 `next` 会持续内测一段时间，https://s2.antv.antgroup.com 会作为相应的文档网站。
+
+在此期间，会持续根据用户的反馈进行 Bug fix 和代码调整，在 `@antv/s2@next` 版本稳定后，会发布正式版本，`latest` 将默认指向 `2.x` 版本，去除 `next` 标识。
+
 ## 🗓️ v1 版本维护期
 
-目前 `v1` 版本会继续维护，针对 `BUG` 发布 `Patch` 版本修复，但不再接收新的 `Feature Request` 和 `Pull Request`，截止日期为 `2024` 年年底。
+目前 `v1` 版本会继续维护，针对 `BUG` 发布 `Patch` 版本修复，但不再接收新的 `Feature Request` 和 `Feature Pull Request`，欢迎 `Bug Fix Pull Request`, 截止日期为 `2024` 年年底。
 
 ## 📦 安装
 
 ```bash
-$ npm install @antv/s2@next @antv/s2-react@next @antv/s2-vue --save
-# pnpm add @antv/s2@next @antv/s2-react@next @antv/s2-vue
-# yarn add @antv/s2@next @antv/s2-react@next @antv/s2-vue
+# 基础版本
+$ npm install @antv/s2@next --save
+
+# React 版本
+$ npm install @antv/s2-react@next antd @ant-design/icons --save
+
+# Vue3 版本
+$ npm install @antv/s2-vue@next ant-design-vue@3.x --save
 ```
 
 | Package  | Version | Size   | Download     |

From e4f2112129a1a5e7c36b99f5d271c601d5c70946 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Sun, 4 Feb 2024 18:06:56 +0800
Subject: [PATCH 60/64] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E8=BF=90=E8=A1=8C=E5=92=8C=E5=B1=95=E7=A4=BA=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E7=9A=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.en-US.md                               |   4 +-
 README.md                                     |   4 +-
 packages/s2-core/src/cell/corner-cell.ts      |   1 -
 .../s2-core/src/data-set/base-data-set.ts     |   3 +
 packages/s2-core/src/data-set/interface.ts    |  19 ++-
 .../s2-core/src/data-set/table-data-set.ts    |  11 +-
 .../src/interaction/base-interaction/hover.ts |  18 ++-
 .../playground/components/Plugins.tsx         |   1 +
 packages/s2-react/playground/config.tsx       |  63 ++++----
 packages/s2-react/src/components/index.ts     |   5 +
 s2-site/.dumi/global.less                     |   4 +
 .../docs/api/basic-class/base-data-set.zh.md  | 153 +++++++++++++++---
 s2-site/docs/api/general/S2Options.zh.md      |   2 +-
 s2-site/docs/api/general/S2Theme.zh.md        |   4 +-
 .../docs/common/custom/customTreeNode.zh.md   |   6 +
 s2-site/docs/common/env.en.md                 |   8 +-
 s2-site/docs/common/env.zh.md                 |   4 +-
 s2-site/docs/common/interaction.zh.md         |   4 +-
 s2-site/docs/manual/basic/tooltip.zh.md       |  26 +--
 s2-site/docs/manual/migration-v2.zh.md        |  95 ++++++++++-
 .../conditions/demo/distinguish-cell.ts       |   1 +
 .../conditions/demo/gradient-interval.ts      |   4 +-
 .../examples/analysis/sort/demo/advanced.tsx  |   9 +-
 .../analysis/sort/demo/group-sort.tsx         |   5 +
 .../analysis/totals/demo/calculate.ts         |  14 +-
 .../examples/analysis/totals/demo/custom.ts   |   4 +-
 .../totals/demo/dimension-group-col.ts        |  29 ++--
 .../totals/demo/dimension-group-row.ts        |  27 ++--
 .../analysis/totals/demo/multiple-values.ts   |   4 +-
 s2-site/examples/analysis/totals/demo/tree.ts |   2 +-
 s2-site/examples/basic/pivot/demo/tree.ts     |  10 +-
 s2-site/examples/basic/table/demo/table.ts    |   5 +
 s2-site/examples/case/art/demo/lost-text.tsx  |  55 +++----
 s2-site/examples/case/art/demo/mosaic.tsx     |  11 +-
 .../examples/case/kpi-strategy/demo/basic.tsx |  21 ++-
 .../case/kpi-strategy/demo/covid-trend.tsx    |  19 ++-
 .../case/proportion/demo/group-drill-down.tsx |   8 +-
 .../demo/single-population-proportion.tsx     |   4 +-
 .../custom/custom-cell/demo/meta.json         |   4 +-
 .../custom/custom-layout/demo/meta.json       |   2 +-
 .../custom/custom-plugins/demo/rough.ts       |   3 +
 .../advanced/demo/custom-tree-link-jump.ts    |  13 +-
 .../interaction/advanced/demo/merge-cell.ts   |   8 +-
 .../advanced/demo/pivot-hide-columns.ts       |  10 +-
 .../advanced/demo/table-hide-columns.ts       |   2 +
 .../custom/demo/row-col-hover-tooltip.ts      |  11 +-
 .../layout/custom/demo/hide-columns.ts        |   7 +
 .../examples/layout/custom/demo/hide-value.ts |   6 +-
 .../demo/custom-click-show-tooltip.tsx        |  52 +++---
 .../tooltip/demo/custom-content-react.tsx     |   6 +-
 .../tooltip/demo/custom-description.tsx       |   2 +-
 .../demo/custom-hover-show-tooltip.tsx        |  53 +++---
 .../tooltip/demo/custom-tooltip.tsx           |   2 +-
 .../react-component/tooltip/demo/meta.json    |   4 +-
 .../tooltip/demo/operation.tsx                |   2 +-
 s2-site/examples/theme/default/demo/dark.ts   |   4 +-
 s2-site/playground/config-panel/types.ts      |  12 +-
 57 files changed, 590 insertions(+), 280 deletions(-)

diff --git a/README.en-US.md b/README.en-US.md
index 3a93ec1ed3..8aea1aef71 100644
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -216,9 +216,9 @@ bootstrap()
 
 ### 🖥️ Browser Compatibility
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
 | --- |  --- | --- | --- |
-| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| Edge | last 2 versions | last 2 versions | last 2 versions |
 
 `@antv/s2-react` and `@antv/s2-vue` see [React JavaScript environment requirements](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite browser compatibility](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
 
diff --git a/README.md b/README.md
index 79641fd5a7..618677253c 100644
--- a/README.md
+++ b/README.md
@@ -212,9 +212,9 @@ bootstrap()
 
 ### 🖥️ 兼容环境
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
 | --- |  --- | --- | --- |
-| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| Edge | last 2 versions | last 2 versions | last 2 versions |
 
 `@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
 
diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts
index 2d484d095b..4a41ced6d3 100644
--- a/packages/s2-core/src/cell/corner-cell.ts
+++ b/packages/s2-core/src/cell/corner-cell.ts
@@ -114,7 +114,6 @@ export class CornerCell extends HeaderCell<CornerHeaderConfig> {
     }
 
     const resizeStyle = this.getResizeAreaStyle();
-
     const resizeArea = getOrCreateResizeAreaGroupById(
       this.spreadsheet,
       KEY_GROUP_CORNER_RESIZE_AREA,
diff --git a/packages/s2-core/src/data-set/base-data-set.ts b/packages/s2-core/src/data-set/base-data-set.ts
index 42292cbe0c..dd3f1666f5 100644
--- a/packages/s2-core/src/data-set/base-data-set.ts
+++ b/packages/s2-core/src/data-set/base-data-set.ts
@@ -82,6 +82,9 @@ export abstract class BaseDataSet {
     this.spreadsheet = spreadsheet;
   }
 
+  /**
+   * 获取字段
+   */
   private getField = (field: CustomHeaderField): string => {
     const realField = isString(field) ? field : field?.field;
 
diff --git a/packages/s2-core/src/data-set/interface.ts b/packages/s2-core/src/data-set/interface.ts
index af8de99a3f..02655d1db5 100644
--- a/packages/s2-core/src/data-set/interface.ts
+++ b/packages/s2-core/src/data-set/interface.ts
@@ -47,12 +47,18 @@ export type DataPathParams = {
 };
 
 export interface GetCellDataParams {
-  // search query
-  query?: Query;
+  /**
+   * 查询条件
+   */
+  query: Query;
+
+  /**
+   * 是否是汇总节点
+   */
   isTotals?: boolean;
 
   /**
-   * 行头节点, 用于下钻场景
+   * 行头节点，用于下钻场景
    */
   rowNode?: Node;
 
@@ -60,7 +66,10 @@ export interface GetCellDataParams {
    * 是否是行头
    */
   isRow?: boolean;
-  // use with isTotals
+
+  /**
+   * 汇总信息
+   */
   totalStatus?: TotalStatus;
 }
 
@@ -85,10 +94,12 @@ export interface GetCellMultiDataParams {
    * 查询条件
    */
   query?: Query;
+
   /**
    * 查询类型
    */
   queryType?: QueryDataType;
+
   /**
    * 下钻
    */
diff --git a/packages/s2-core/src/data-set/table-data-set.ts b/packages/s2-core/src/data-set/table-data-set.ts
index e8ddf7a6ba..790693914d 100644
--- a/packages/s2-core/src/data-set/table-data-set.ts
+++ b/packages/s2-core/src/data-set/table-data-set.ts
@@ -157,10 +157,9 @@ export class TableDataSet extends BaseDataSet {
     return [];
   }
 
-  public getCellData({ query = {} }: GetCellDataParams = {}):
-    | Data
-    | SimpleData
-    | undefined {
+  public getCellData(
+    { query = {} }: GetCellDataParams = {} as GetCellDataParams,
+  ): Data | SimpleData | undefined {
     if (this.displayData.length === 0 && query['rowIndex'] === 0) {
       return undefined;
     }
@@ -174,7 +173,9 @@ export class TableDataSet extends BaseDataSet {
     return rowData[query['field']] as SimpleData;
   }
 
-  public getCellMultiData({ query = {} }: GetCellMultiDataParams = {}): Data[] {
+  public getCellMultiData(
+    { query = {} }: GetCellMultiDataParams = {} as GetCellMultiDataParams,
+  ): Data[] {
     if (!query) {
       return this.displayData as Data[];
     }
diff --git a/packages/s2-core/src/interaction/base-interaction/hover.ts b/packages/s2-core/src/interaction/base-interaction/hover.ts
index 81f07fdf16..c600eb23e1 100644
--- a/packages/s2-core/src/interaction/base-interaction/hover.ts
+++ b/packages/s2-core/src/interaction/base-interaction/hover.ts
@@ -18,6 +18,7 @@ import {
 } from '../../utils/interaction/hover-event';
 import { getCellMeta } from '../../utils/interaction/select-event';
 import { BaseEvent, type BaseEventImplement } from '../base-event';
+import type { Node } from '../../facet/layout/node';
 
 /**
  * @description Hover event for data cells, row cells and col cells
@@ -30,7 +31,7 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
     this.bindColCellHover();
   }
 
-  public updateRowColCells(meta: ViewMeta) {
+  public updateRowColCells(meta: ViewMeta | Node) {
     const { rowId, colId } = meta;
     const { facet, interaction } = this.spreadsheet;
 
@@ -69,11 +70,12 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
    * @param event
    * @param meta
    */
-  private changeStateToHoverFocus(
-    cell: S2CellType,
-    event: CanvasEvent,
-    meta: ViewMeta,
-  ) {
+  private changeStateToHoverFocus(cell: S2CellType, event: CanvasEvent) {
+    if (!cell) {
+      return;
+    }
+
+    const meta = cell.getMeta();
     const { interaction } = this.spreadsheet;
     const { interaction: interactionOptions } = this.spreadsheet.options;
     const { hoverFocus } = interactionOptions!;
@@ -176,7 +178,7 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
   }
 
   private getCellData(
-    meta: ViewMeta = {} as ViewMeta,
+    meta: ViewMeta | Node = {} as ViewMeta,
     onlyShowCellText?: boolean,
   ): TooltipData[] {
     const {
@@ -236,7 +238,7 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
       }
 
       if (interactionOptions?.hoverFocus) {
-        this.changeStateToHoverFocus(cell, event, meta);
+        this.changeStateToHoverFocus(cell, event);
       }
     });
   }
diff --git a/packages/s2-react/playground/components/Plugins.tsx b/packages/s2-react/playground/components/Plugins.tsx
index 5e502a8d42..d0fc3259de 100644
--- a/packages/s2-react/playground/components/Plugins.tsx
+++ b/packages/s2-react/playground/components/Plugins.tsx
@@ -22,6 +22,7 @@ export const options: SheetComponentOptions = {
     },
   },
   transformCanvasConfig(renderer) {
+    // 需要注意的是一旦使用该插件，“脏矩形渲染”便无法使用，这意味着任何图形的任何样式属性改变，都会导致画布的全量重绘, 性能会严重下降。
     renderer.registerPlugin(new PluginRoughCanvasRenderer());
     renderer.registerPlugin(
       new PluginA11y({
diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx
index 0081510f1a..66048199d1 100644
--- a/packages/s2-react/playground/config.tsx
+++ b/packages/s2-react/playground/config.tsx
@@ -1,19 +1,16 @@
 /* eslint-disable no-console */
-import { GithubOutlined } from '@ant-design/icons';
 import {
-  CellType,
   ResizeType,
+  customMerge,
   type CustomHeaderField,
   type CustomTreeNode,
   type S2DataConfig,
   type S2TableSheetFrozenOptions,
-  customMerge,
   type ThemeCfg,
 } from '@antv/s2';
 import { getBaseSheetComponentOptions } from '@antv/s2-shared';
-import type { SliderSingleProps } from 'antd';
-import React from 'react';
 import { PivotSheetMultiLineTextDataCfg } from '@antv/s2/__tests__/data/data-multi-line-text';
+import type { SliderSingleProps } from 'antd';
 import {
   data,
   fields,
@@ -249,49 +246,61 @@ export const TableSheetFrozenOptions: S2TableSheetFrozenOptions = {
 };
 
 export const S2TooltipOptions: SheetComponentOptions['tooltip'] = {
-  enable: true,
   operation: {
-    hiddenColumns: true,
     menu: {
-      mode: 'horizontal',
+      // 支持透传 Ant Design <Menu/> 组件 API: https://ant-design.antgroup.com/components/menu-cn#api
+      // mode: 'vertical',
       onClick(info, cell) {
-        console.log('菜单点击: ', info, cell);
+        console.log('菜单项点击: ', info, cell);
       },
       items: [
         {
-          key: 'a-1',
-          label: '操作-1',
-          icon: 'Plus',
+          key: 'custom-a',
+          label: '操作1',
+          icon: 'Trend',
           onClick: (info, cell) => {
-            console.log('操作-1', info, cell);
+            console.log('操作1点击:', info, cell);
           },
           children: [
             {
-              key: 'a-1-1',
-              label: '操作-1-1',
-              icon: 'Minus',
-              visible: (cell) => cell.cellType === CellType.COL_CELL,
+              key: 'custom-a-a',
+              label: '操作 1-1',
+              icon: 'Trend',
               onClick: (info, cell) => {
-                console.log('操作-1-1', info, cell);
+                console.log('操作1-1点击:', info, cell);
               },
             },
           ],
         },
         {
-          key: 'a-2',
-          label: '操作-2',
-          icon: <GithubOutlined />,
+          key: 'custom-b',
+          label: '操作2',
+          icon: 'EyeOutlined',
           onClick: (info, cell) => {
-            console.log('操作-2', info, cell);
+            console.log('操作2点击:', info, cell);
           },
         },
         {
-          key: 'trend',
-          label: '趋势',
-          icon: 'Trend',
-          visible: (cell) => cell.cellType === CellType.DATA_CELL,
+          key: 'custom-c',
+          label: '操作3',
+          icon: 'EyeOutlined',
+          visible: false,
+          onClick: (info, cell) => {
+            console.log('操作3点击:', info, cell);
+          },
+        },
+        {
+          key: 'custom-c',
+          label: '操作4',
+          icon: 'EyeOutlined',
+          visible: (cell) => {
+            // 叶子节点才显示
+            const meta = cell.getMeta();
+
+            return meta.isLeaf;
+          },
           onClick: (info, cell) => {
-            console.log('趋势图 icon 点击: ', info, cell);
+            console.log('操作4点击:', info, cell);
           },
         },
       ],
diff --git a/packages/s2-react/src/components/index.ts b/packages/s2-react/src/components/index.ts
index 1e0fd2d612..fd1d9b7fac 100644
--- a/packages/s2-react/src/components/index.ts
+++ b/packages/s2-react/src/components/index.ts
@@ -1,7 +1,11 @@
 export { BaseSheet } from './sheets/base-sheet';
 export { TableSheet } from './sheets/table-sheet';
+export { EditableSheet } from './sheets/editable-sheet';
+export { EditCell } from './sheets/editable-sheet/custom-cell';
 export { GridAnalysisSheet } from './sheets/grid-analysis-sheet';
 export { StrategySheet } from './sheets/strategy-sheet';
+export { MobileSheet } from './sheets/mobile-sheet';
+export { ChartSheet } from './sheets/chart-sheet';
 export { StrategySheetDataSet } from './sheets/strategy-sheet/custom-data-set';
 export * from './sheets/strategy-sheet/custom-tooltip';
 export * from './sheets/strategy-sheet/custom-cell';
@@ -19,5 +23,6 @@ export { TooltipComponent } from './tooltip';
 export { CustomTooltip } from './tooltip/custom-tooltip';
 export type { TooltipRenderProps } from './tooltip/interface';
 export { Switcher, type SwitcherProps } from './switcher';
+
 export * from './sheets';
 export * from './sheets/interface';
diff --git a/s2-site/.dumi/global.less b/s2-site/.dumi/global.less
index 4d084c3813..77e36d7d21 100644
--- a/s2-site/.dumi/global.less
+++ b/s2-site/.dumi/global.less
@@ -6,6 +6,10 @@
 //   border-bottom: none !important;
 // }
 
+body {
+  overflow-x: hidden;
+}
+
 .ant-layout-content {
   ul {
     margin-bottom: 16px !important;
diff --git a/s2-site/docs/api/basic-class/base-data-set.zh.md b/s2-site/docs/api/basic-class/base-data-set.zh.md
index c55cd395b5..f4eccae074 100644
--- a/s2-site/docs/api/basic-class/base-data-set.zh.md
+++ b/s2-site/docs/api/basic-class/base-data-set.zh.md
@@ -1,6 +1,7 @@
 ---
 title: BaseDataSet
 order: 5
+tag: Updated
 ---
 
 功能描述：表格数据集。[详情](https://github.com/antvis/S2/blob/next/packages/s2-core/src/data-set/pivot-data-set.ts)
@@ -11,32 +12,110 @@ s2.dataSet.getFieldName('type')
 
 | 参数                                   | 说明                               | 类型                                                                                                                                                                                         | 版本                                        |
 | -------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
-| fields                                 | 字段信息                           | () => [Fields](/docs/api/general/S2DataConfig#fields)                                                                                                                                        |                                             |
-| meta                                   | 字段元信息，包含有字段名、格式化等 | () => [Meta[]](/docs/api/general/S2DataConfig#meta)                                                                                                                                          |                                             |
-| originData                             | 原始数据                           | () => [DataType[]](#datatype)                                                                                                                                                                |                                             |
-| totalData                              | 汇总数据                           | () => [DataType[]](#datatype)                                                                                                                                                                |                                             |
-| indexesData                            | 多维索引数据                       | () => [DataType[]](#datatype)                                                                                                                                                                |                                             |
-| sortParams                             | 排序配置                           | () => [SortParams](/docs/api/general/S2DataConfig#sortparams)                                                                                                                                |                                             |
-| spreadsheet                            | 表格实例                           | () => [SpreadSheet](/docs/api/basic-class/spreadsheet)                                                                                                                                       |                                             |
-| getFieldMeta                           | 获取字段元数据信息                 | (field: string, meta?: [Meta[]](/docs/api/general/S2DataConfig#meta)) => [Meta](/docs/api/general/S2DataConfig#meta)                                                                         |                                             |
-| getFieldName                           | 获取字段名                         | `() => string`                                                                                                                                                                               |                                             |
-| getFieldFormatter                      | 获取字段格式化函数                 | `() => (v: string) => unknown`                                                                                                                                                               |                                             |
-| getFieldDescription                    | 获取字段描述                       | `() => string`                                                                                                                                                                               |                                             |
+| fields                                 | 字段信息                           | [Fields](/docs/api/general/S2DataConfig#fields)                                                                                                                                        |                                             |
+| meta                                   | 字段元信息，包含有字段名、格式化等 | [Meta[]](/docs/api/general/S2DataConfig#meta)                                                                                                                                          |                                             |
+| originData                             | 原始数据                           | [RawData](#rawdata)[](#)                                                                                                                                                                |                                             |
+| indexesData                            | 多维索引数据                       | Record<string, [RawData](#rawdata)[][] \| [RawData](#rawdata)[]>                                                                                                                                                              |                                             |
+| sortParams                             | 排序配置                           | [SortParams](/docs/api/general/S2DataConfig#sortparams)                                                                                                                                |                                             |
+| filterParams                             | 筛选配置                           | [FilterParam](#filterparam)[]                                                                                                                                |                                             |
+| displayData                             | 展示数据                           | [RawData](#rawdata)[]                                                                                                                               |                                             |
+| spreadsheet                            | 表格实例                           | [SpreadSheet](/docs/api/basic-class/spreadsheet)                                                                                                                                       |                                             |
+| getField                           | 获取字段                 | (field: [CustomHeaderField](#customheaderfield)) => [Meta](/docs/api/general/S2DataConfig#meta)                                                                         |                                             |
+| getFieldMeta    | 获取字段元数据信息                 | (field: [CustomHeaderField](#customheaderfield), meta?: [Meta[]](/docs/api/general/S2DataConfig#meta)) => [Meta](/docs/api/general/S2DataConfig#meta)    |
+| getFieldName                           | 获取字段名                         | (field: [CustomHeaderField](#customheaderfield), defaultValue?: string) => `string`  |                                             |
+| getCustomRowFieldName                           | 获取自定义单元格字段名称                         | (cell: S2CellType<ViewMeta \| Node>) => `string`    |                                             |
+| getCustomFieldDescription                           | 获取自定义单元格字段描述                         | (cell: S2CellType<ViewMeta \| Node>) => `string`   |                                             |
+| getFieldFormatter                      | 获取字段格式化函数                 | (field: [CustomHeaderField](#customheaderfield)) => [Formatter](#formatter)                                                                                                                                                               |                                             |
+| getFieldDescription                    | 获取字段描述                       | (field: [CustomHeaderField](#customheaderfield)) => [Formatter](#formatter)                                                                                                                                                                               |                                             |
 | setDataCfg                             | 设置数据配置                       | `<T extends boolean = false>(dataCfg: T extends true ?` [`S2DataConfig`](/docs/api/general/S2DataConfig) `: Partial<`[`S2DataConfig`](/docs/api/general/S2DataConfig)`>, reset?: T) => void` | `reset` 参数需在 `@antv/s2^1.34.0`版本使用 |
 | getDisplayDataSet                      | 获取当前显示的数据集               | () => [DataType[]](#datatype)                                                                                                                                                                |                                             |
 | getDimensionValues                     | 获取维值                           | (filed: string, query?: [DataType](#datatype) ) => string[]                                                                                                                                  |                                             |
-| getCellData                            | 获取单个的单元格数据               | (params: [CellDataParams](#celldataparams)) => [DataType[]](#datatype)                                                                                                                       |                                             |
-| getMultiData                           | 获取批量的单元格数据               | (query: [DataType](#datatype),params?: [MultiDataParams](#multidataparams)) => [DataType[]](#datatype)                                                                                       |                                             |
-| <strike>getMultiData<strike>  （已废弃） | 获取批量的单元格数据               | (query: [DataType](#datatype), isTotals?: boolean, isRow?: boolean, drillDownFields?: string[], includeTotalData:boolean) => [DataType[]](#datatype)                                         |                                             |
+| getCellData                            | 获取单个的单元格数据               | (params: [GetCellDataParams](#getcelldataparams)) => [DataType[]](#datatype)                                                                                                                       |                                             |
+| getCellMultiData                           | 获取批量的单元格数据               | (params?: [GetCellMultiDataParams](#getcellmultidataparams)) => [DataType[]](#datatype)                                                                                       |                                             |
 | moreThanOneValue                       | 是否超过 1 个数值                  | () => [ViewMeta](#viewmeta)                                                                                                                                                                  |                                             |
 | isEmpty                                | 是否为空数据集                     | () => `boolean`                                                                                                                                                                              | `@antv/s2^1.51.1`                          |
 
+### SimpleData
+
+```ts
+type SimpleData = string | number | null;
+```
+
+### MultiData
+
+```ts
+interface MultiData<T = SimpleData[][]> {
+  values: T;
+  originalValues?: T;
+  label?: string;
+  [key: string]: unknown;
+}
+```
+
+### DataItem
+
+```ts
+
+type DataItem =
+  | SimpleData
+  | MultiData
+  | Record<string, unknown>
+  | undefined
+  | null;
+```
+
+### RawData
+
+```ts
+type RawData = Record<string, DataItem>;
+```
+
 ### DataType
 
 ```ts
 type DataType = Record<string, unknown>;
 ```
 
+### ExtraData
+
+```ts
+type ExtraData = {
+  [EXTRA_FIELD]: string;
+  [VALUE_FIELD]: string | DataItem;
+};
+```
+
+### Data
+
+```ts
+type Data = RawData & ExtraData;
+```
+
+### ViewMetaData
+
+```ts
+type ViewMetaData = Data | CellData;
+```
+
+### Formatter
+
+```ts
+ type Formatter = (
+  v: unknown,
+  data?: SimpleData | ViewMetaData | ViewMetaData[],
+  meta?: Node | ViewMeta,
+) => string;
+```
+
+### FormatResult
+
+```ts
+ interface FormatResult {
+  formattedValue: string;
+  value: DataItem;
+}
+```
+
 ### TotalSelection
 
 ```ts
@@ -55,6 +134,23 @@ type TotalSelectionsOfMultiData = {
 };
 ```
 
+### Query
+
+```ts
+type Query = Record<string, any>;
+```
+
+### TotalStatus
+
+```ts
+interface TotalStatus {
+  isRowTotal: boolean;
+  isRowSubTotal: boolean;
+  isColTotal: boolean;
+  isColSubTotal: boolean;
+}
+```
+
 ### GetCellDataParams
 
 ```ts
@@ -78,7 +174,13 @@ interface GetCellDataParams {
    * 是否是行头
    */
   isRow?: boolean;
+
+  /**
+   * 汇总信息
+   */
+  totalStatus?: TotalStatus;
 }
+
 ```
 
 ### GetCellMultiDataParams
@@ -88,22 +190,17 @@ interface GetCellMultiDataParams {
   /**
    * 查询条件
    */
-  query: Query;
+  query?: Query;
 
   /**
-   * 汇总
+   * 查询类型
    */
-  totals?: TotalSelectionsOfMultiData;
+  queryType?: QueryDataType;
 
   /**
    * 下钻
    */
   drillDownFields?: string[];
-
-  /**
-   * 获取数据的类型，默认获取所有的数据
-  */
-  queryType?: QueryDataType;
 }
 
 enum QueryDataType {
@@ -113,4 +210,14 @@ enum QueryDataType {
 
 ```
 
-`markdown:docs/common/custom/customTreeNode.zh.md`
+### FilterParam
+
+```ts
+interface FilterParam {
+  filterKey: string;
+  filteredValues?: unknown[];
+  customFilter?: (row: Query) => boolean;
+}
+```
+
+<embed src="@/docs/common/custom/customTreeNode.zh.md"></embed>
diff --git a/s2-site/docs/api/general/S2Options.zh.md b/s2-site/docs/api/general/S2Options.zh.md
index 1448ccf9cc..4e74f3aaec 100644
--- a/s2-site/docs/api/general/S2Options.zh.md
+++ b/s2-site/docs/api/general/S2Options.zh.md
@@ -33,7 +33,7 @@ const s2Options = {
 | style                       | [Style](#style)                                                                                                                                                                                                              |      |         | 单元格样式设置，比如布局类型，宽高，边距，是否隐藏数值列头等                                                                              |
 | hd                   | `boolean`                                                                                                                                                                                                                    |      | `true`  | 是否开启高清屏适配，解决多屏切换，高清视网膜屏字体渲染模糊的问题。[查看更多](/manual/advanced/hd-adapter)                                 |
 | mergedCellsInfo             | [MergedCellInfo](#mergedcellinfo)[][]                                                                                                                                                                                        |      |         | 合并单元格信息                                                                                                                            |
-| placeholder                 | `string \| (meta: Record<string, any>) => string`                                                                                                                                                                            |      |         | 自定义单元格占位符                                                                                                                        |
+| placeholder                 | `string \| (meta: Record<string, any>) => string`                                                                                                                                                                            |      |         | 自定义单元格空数据占位符                                                                                                                        |
 | cornerText                  | string                                                                                                                                                                                                                       |      |         | 自定义角头文本 （仅在树状模式有效）                                                                                                       |
 | cornerExtraFieldText        | string                                                                                                                                                                                                                       |      | `数值`  | 自定义角头虚拟数值字段文本（"数值挂行头"时有效）                                                                                          |
 | dataCell                    | [DataCellCallback](#datacellcallback)                                                                                                                                                                                        |      |         | 自定义单元格 cell                                                                                                                         |
diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md
index 5ac5e0be04..f7d7ac8cbd 100644
--- a/s2-site/docs/api/general/S2Theme.zh.md
+++ b/s2-site/docs/api/general/S2Theme.zh.md
@@ -131,9 +131,9 @@ s2.setTheme({
 | ------------ | ------------------------------------------------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------- | ---- |
 | textAlign    | 文本内容的对齐方式                                                             | `left \| center \| right` | -                                                                                                 |      |
 | textBaseline | 绘制文本时的基线                                                               | `top \| middle \| bottom` | -                                                                                                 |      |
-| fontFamily   | 字体                                                                           | `string`                      | `Roboto, PingFangSC,` <br> `BlinkMacSystemFont,` <br> `Microsoft YaHei,` <br> `Arial, sans-serif` |      |
+| fontFamily   | 字体，**如需每个字体宽度一样，请使用等宽字体**                                                                           | `string`                      | `Roboto, PingFangSC,` <br> `BlinkMacSystemFont,` <br> `Microsoft YaHei,` <br> `Arial, sans-serif` |      |
 | fontSize     | 字体大小                                                                       | `number`                      | -                                                                                                 |      |
-| fontWeight   | number <br> string: `normal` <br> `bold` <br> `bolder` <br> `lighter` 字体粗细 | `number` \| `string`          | 粗体文本：Mobile：`520` PC: `bold` <br> 普通文本：`normal`                                        |      |
+| fontWeight   | `number` <br/> `string` （可选项：`normal` <br> `bold` <br> `bolder` <br> `lighter`) | `number \| string`          | 粗体文本：Mobile：`520` PC: `bold` <br> 普通文本：`normal`                                        |      |
 | fontStyle   | 字体样式    | `normal \| italic \| oblique`        |  `normal` |
 | fontVariant | 字体变体  | `normal \| small-caps \| string`    |  `normal`  |
 | fill         | 字体颜色                                                                       | `string`                      | -                                                                                                 |      |
diff --git a/s2-site/docs/common/custom/customTreeNode.zh.md b/s2-site/docs/common/custom/customTreeNode.zh.md
index ed13e4bde6..b158924ad5 100644
--- a/s2-site/docs/common/custom/customTreeNode.zh.md
+++ b/s2-site/docs/common/custom/customTreeNode.zh.md
@@ -14,3 +14,9 @@ order: 8
 | collapsed | 节点是否收起（树状模式下，行头非叶子节点有效） | `boolean` |  `false`  |  |
 | description | 节点的额外描述信息，在对应行头的 tooltip 中展示 | `string` |    |  |
 | children | 子节点 | [CustomTreeNode[]](#customtreenode) |    |  |
+
+##### CustomHeaderField
+
+```ts
+type CustomHeaderField = CustomTreeNode | string;
+```
diff --git a/s2-site/docs/common/env.en.md b/s2-site/docs/common/env.en.md
index 91173e52f2..74f32add88 100644
--- a/s2-site/docs/common/env.en.md
+++ b/s2-site/docs/common/env.en.md
@@ -1,7 +1,5 @@
-默认支持**现代浏览器**, 如果出现兼容性问题请结合 `babel` 和 `@babel/polyfill` 使用
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
-| --- | --- | --- |
-| last 2 versions | last 2 versions | last 2 versions |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- |  --- | --- | --- |
+| Edge | last 2 versions | last 2 versions | last 2 versions |
 
 `@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
diff --git a/s2-site/docs/common/env.zh.md b/s2-site/docs/common/env.zh.md
index ecb0cddf16..74f32add88 100644
--- a/s2-site/docs/common/env.zh.md
+++ b/s2-site/docs/common/env.zh.md
@@ -1,5 +1,5 @@
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/next/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
 | --- |  --- | --- | --- |
-| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| Edge | last 2 versions | last 2 versions | last 2 versions |
 
 `@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
diff --git a/s2-site/docs/common/interaction.zh.md b/s2-site/docs/common/interaction.zh.md
index 40ecf205ec..6aeab44a6f 100644
--- a/s2-site/docs/common/interaction.zh.md
+++ b/s2-site/docs/common/interaction.zh.md
@@ -23,8 +23,8 @@ order: 5
 | 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                | 选中数值单元格后的行列高亮联动<br/>rowHeader：选中数值单元格后高亮对应行头 <br/> colHeader：选中数值单元格后高亮对应列头 <br/> currentRow：选中数值单元格后高亮整行 <br/> currentCol：选中数值单元格后高亮整列 <br/>true：同 { rowHeader: true, colHeader: true, currentRow: true, currentCol: true } | `boolean \| { rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean }`     |                                  | `false`                                               |                  |
+| eventListenerOptions                 | 事件监听函数 `addEventListener` 的 [可选项配置](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener), 可控制事件从冒泡阶段还是捕获阶段触发                              | `false`                                                                                                   |                                           |
+| selectedCellHighlight                | 选中数值单元格后的行列高亮联动<br/>rowHeader：选中数值单元格后高亮对应行头 <br/> colHeader：选中数值单元格后高亮对应列头 <br/> currentRow：选中数值单元格后高亮整行 <br/> currentCol：选中数值单元格后高亮整列 <br/>true：同 { rowHeader: true, colHeader: true, currentRow: true, currentCol: true } | `boolean \| { rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean }`     |  `false`   |                  |
 | overscrollBehavior                   | 控制滚动至边界的行为，可禁用浏览器的默认滚动行为。[详情](/docs/manual/advanced/interaction/basic/#修改滚动至边界行为)                                                                                   | `auto \| contain \| none \| null`                                                                         |  `auto` |
 
 ### Copy
diff --git a/s2-site/docs/manual/basic/tooltip.zh.md b/s2-site/docs/manual/basic/tooltip.zh.md
index c9e7f706a1..0d7c47c9d3 100644
--- a/s2-site/docs/manual/basic/tooltip.zh.md
+++ b/s2-site/docs/manual/basic/tooltip.zh.md
@@ -254,7 +254,7 @@ s2.showTooltip({
 
 `方法调用` > `单元格配置` > `基本配置`
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*EwvcRZjOslMAAAAAAAAAAAAAARQnAQ" width="600"  alt="row" />
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*EwvcRZjOslMAAAAAAAAAAAAAARQnAQ" width="600" alt="row" />
 
 #### 自定义 Tooltip 操作项
 
@@ -272,6 +272,8 @@ menu: {
 
 :::
 
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2R8ST6bBxAcAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="row" />
+
 ```ts
 const s2Options = {
   tooltip: {
@@ -350,16 +352,18 @@ const s2Options = {
 s2.showTooltip({
   options: {
     operator: {
-      menus: [
-        {
-          key: 'custom-a',
-          text: '操作 1',
-          icon: 'Trend',
-          onClick: (cell) => {
-            console.log('操作 1 点击', cell);
-          },
-        }
-      ],
+      menu: {
+        items: [
+          {
+            key: 'custom-a',
+            label: '操作 1',
+            icon: 'Trend',
+            onClick: (info, cell) => {
+              console.log('操作 1 点击：', info, cell);
+            },
+          }
+        ],
+      }
     },
   }
 })
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index 8aa69e2453..b760fd4c04 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -69,7 +69,7 @@ $ npm install @antv/s2-vue@next ant-design-vue@3.x --save
 
 #### 底层渲染引擎升级为 `AntV/G 5.0`
 
-表格绘制引擎升级到 [`G 5.0`](https://g.antv.antgroup.com/) 大版本，和 `AntV` [其他技术栈](https://antv.antgroup.com/) 保持同步，渲染方式升级为异步。
+表格绘制引擎升级到 [`G 5.0`](https://g.antv.antgroup.com/) 大版本，和 `AntV` [其他技术栈](https://antv.antgroup.com/) 保持同步，渲染方式升级为**异步**。
 
 ```diff
 - s2.render()
@@ -110,6 +110,29 @@ const s2Options = {
 }
 ```
 
+#### 数值指标节点 id 调整
+
+数值节点的 id 从 `field` 变更为 `格式化后的名称`.
+
+```ts
+const s2DataConfig = {
+  fields: {
+    values: ['number'],
+  },
+  meta: [
+    {
+      field: 'number',
+      name: '数量',
+    },
+  ],
+}
+```
+
+```diff
+- 'root[&] 家具 [&] 沙发 [&]number'
++ 'root[&] 家具 [&] 沙发 [&] 数量'
+```
+
 #### 自定义宽高配置调整
 
 1. `rowCfg/colCfg/cellCfg` 调整为 `rowCell/colCell/dataCell`
@@ -474,6 +497,41 @@ render 函数的参数从 boolean 扩展为 `boolean | object`, 当为 `boolean`
 + });
 ```
 
+#### 小计总计配置参数变更
+
+TODO: 还要改：
+
+总计配置统一增加 `grandTotals` 和 `subTotals` 前缀，避免歧义。
+
+```diff
+const s2Options = {
+  totals: {
+    row: {
+-     calcTotals: {}.
+-     reverseLayout: true,
+-     label: '总计'
+-     totalsGroupDimensions: [],
+-     reverseSubLayout: true,
+
++     calcGrandTotals: {}.
++     reverseGrandLayout: true,
++     grandLabel: '总计'
++     grandTotalsGroupDimensions: [],
++     reverseSubTotalsLayout: true
+    };
+  }
+}
+```
+
+#### 绘制自定义文本 API 变更
+
+绘制多列文本 `drawObjectText` 函数更名为 `drawCustomContent`
+
+```diff
+- import { drawObjectText } from '@antv/s2'
++ import { drawCustomContent } from '@antv/s2'
+```
+
 #### 数据集处理逻辑变更
 
 对于多个 `values` 的数据，S2 期望一个数据项中就包含所有的 `values` 信息。
@@ -481,9 +539,9 @@ render 函数的参数从 boolean 扩展为 `boolean | object`, 当为 `boolean`
 ```js
 {
  fields:{
-   rows: ["province", "city"],
-      columns": ["type", "subType"],
-       values": ["number1", "number2"],
+  rows: ["province", "city"],
+  columns: ["type", "subType"],
+  values: ["number1", "number2"],
  }
 }
 
@@ -520,6 +578,35 @@ render 函数的参数从 boolean 扩展为 `boolean | object`, 当为 `boolean`
 
 ```
 
+#### 数据集查询逻辑变更
+
+1. 查询字段从 `string` 变更为 `CustomTreeNode | string`
+
+```diff
+- s2.dataSet.getField(field: string)
+- s2.dataSet.getFieldMeta(field: string)
+- s2.dataSet.getFieldName(field: string)
+- s2.dataSet.getFieldFormatter(field: string)
+
++ s2.dataSet.getField(field: CustomTreeNode | string)
++ s2.dataSet.getFieldMeta(field: CustomTreeNode | string)
++ s2.dataSet.getFieldName(field: CustomTreeNode | string)
++ s2.dataSet.getFieldFormatter(field: CustomTreeNode | string)
+```
+
+2. 获取单元格数据 API 的参数统一
+
+```diff
+- s2.dataSet.getCellData(params: CellDataParams)
++ s2.dataSet.getCellData(params: GetCellDataParams)
+
+- s2.dataSet.getMultiData(query: DateType, params: MultiDataParams)
+- s2.dataSet.getMultiData(query: DataType, isTotals?: boolean, isRow?: boolean, drillDownFields?: string[], includeTotalData:boolean)
++ s2.dataSet.getCellMultiData(params: GetCellMultiDataParams)
+```
+
+具体请查看 [获取单元格数据](/manual/advanced/get-cell-data) 相关文档。
+
 ### 组件层 <Badge>@antv/s2-react</Badge>
 
 #### 支持 React 18 和 Ant Design 5.0
diff --git a/s2-site/examples/analysis/conditions/demo/distinguish-cell.ts b/s2-site/examples/analysis/conditions/demo/distinguish-cell.ts
index 256f034aa2..14b116a2a9 100644
--- a/s2-site/examples/analysis/conditions/demo/distinguish-cell.ts
+++ b/s2-site/examples/analysis/conditions/demo/distinguish-cell.ts
@@ -25,6 +25,7 @@ fetch(
                   fill: 'red',
                 };
               }
+
               return {
                 fill: '#DB6BCF',
               };
diff --git a/s2-site/examples/analysis/conditions/demo/gradient-interval.ts b/s2-site/examples/analysis/conditions/demo/gradient-interval.ts
index d56edf53fb..e90bba0d6b 100644
--- a/s2-site/examples/analysis/conditions/demo/gradient-interval.ts
+++ b/s2-site/examples/analysis/conditions/demo/gradient-interval.ts
@@ -1,4 +1,4 @@
-import { PivotSheet } from '@antv/s2';
+import { PivotSheet, S2Options } from '@antv/s2';
 
 // 可借助 tinygradient 完成功能更全面的颜色过渡
 function getGradient(rate: number, startColor: string, endColor: string) {
@@ -26,7 +26,7 @@ fetch(
   .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
diff --git a/s2-site/examples/analysis/sort/demo/advanced.tsx b/s2-site/examples/analysis/sort/demo/advanced.tsx
index c4ab97c4c1..a3588d7c4d 100644
--- a/s2-site/examples/analysis/sort/demo/advanced.tsx
+++ b/s2-site/examples/analysis/sort/demo/advanced.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import insertCSS from 'insert-css';
+import { S2DataConfig } from '@antv/s2';
 
 import '@antv/s2-react/dist/style.min.css';
 
 fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
   .then((res) => res.json())
   .then((data) => {
-    const defaultSortParams = [
+    const defaultSortParams: S2DataConfig['sortParams'] = [
       { sortFieldId: 'province', sortMethod: 'DESC' },
       { sortFieldId: 'type', sortBy: ['纸张', '笔'] },
       {
@@ -17,7 +18,7 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
       },
     ];
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -45,7 +46,7 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
       sortParams: defaultSortParams,
     };
 
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
diff --git a/s2-site/examples/analysis/sort/demo/group-sort.tsx b/s2-site/examples/analysis/sort/demo/group-sort.tsx
index fdc9055252..012995a75f 100644
--- a/s2-site/examples/analysis/sort/demo/group-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/group-sort.tsx
@@ -38,6 +38,11 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
       width: 600,
       height: 480,
       showDefaultHeaderActionIcon: true,
+
+      /**
+       * `@antv/s2` 提供组内排序的能力，如果不使用 `@antv/s2-react` 的话, 可以自行实现 Tooltip 排序菜单，然后调用相关 API.
+       * 详情请查看: https://s2.antv.antgroup.com/manual/basic/sort/group
+       */
       tooltip: {
         operation: {
           // 开启组内排序
diff --git a/s2-site/examples/analysis/totals/demo/calculate.ts b/s2-site/examples/analysis/totals/demo/calculate.ts
index 6773b9db76..f054c701de 100644
--- a/s2-site/examples/analysis/totals/demo/calculate.ts
+++ b/s2-site/examples/analysis/totals/demo/calculate.ts
@@ -1,6 +1,8 @@
-import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options, Aggregation } from '@antv/s2';
 
-fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json001215413-dev-S09001736318/s2/basic.json')
+fetch(
+  'https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json001215413-dev-S09001736318/s2/basic.json',
+)
   .then((res) => res.json())
   .then(async (data) => {
     const container = document.getElementById('container');
@@ -43,10 +45,10 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json0012154
           reverseSubTotalsLayout: true,
           subTotalsDimensions: ['province'],
           calcGrandTotals: {
-            aggregation: 'SUM',
+            aggregation: Aggregation.SUM,
           },
           calcSubTotals: {
-            aggregation: 'SUM',
+            aggregation: Aggregation.SUM,
           },
         },
         col: {
@@ -56,10 +58,10 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json0012154
           reverseSubTotalsLayout: true,
           subTotalsDimensions: ['type'],
           calcGrandTotals: {
-            aggregation: 'SUM',
+            aggregation: Aggregation.SUM,
           },
           calcSubTotals: {
-            aggregation: 'SUM',
+            aggregation: Aggregation.SUM,
           },
         },
       },
diff --git a/s2-site/examples/analysis/totals/demo/custom.ts b/s2-site/examples/analysis/totals/demo/custom.ts
index e0bf900cf4..d82bd85fa0 100644
--- a/s2-site/examples/analysis/totals/demo/custom.ts
+++ b/s2-site/examples/analysis/totals/demo/custom.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, EXTRA_FIELD, S2DataConfig, S2Options } from '@antv/s2';
+import { PivotSheet, VALUE_FIELD, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
   .then((res) => res.json())
@@ -33,7 +33,7 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
 
     const calcFunc = (query, data) => {
       const sum = data.reduce((pre, next) => {
-        return pre + next[next[EXTRA_FIELD]];
+        return pre + next[VALUE_FIELD];
       }, 0);
 
       return sum * 2;
diff --git a/s2-site/examples/analysis/totals/demo/dimension-group-col.ts b/s2-site/examples/analysis/totals/demo/dimension-group-col.ts
index d0b992238a..71afc58462 100644
--- a/s2-site/examples/analysis/totals/demo/dimension-group-col.ts
+++ b/s2-site/examples/analysis/totals/demo/dimension-group-col.ts
@@ -1,14 +1,16 @@
-import { PivotSheet } from '@antv/s2';
+import { Aggregation, PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
-fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json')
+fetch(
+  'https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json',
+)
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: [],
         columns: ['province', 'city', 'type'],
-        values: ['price' ,'cost'],
+        values: ['price', 'cost'],
         valueInCols: false,
       },
       meta: [
@@ -36,7 +38,7 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json'
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       // 配置行小计总计显示,且按维度分组（列小计总计同理）
@@ -44,25 +46,26 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json'
         col: {
           showGrandTotals: true,
           showSubTotals: true,
-          reverseLayout: true,
-          reverseSubLayout: true,
+          reverseGrandTotalsLayout: true,
+          reverseSubTotalsLayout: true,
           subTotalsDimensions: ['province'],
-          calcTotals: {
+          calcGrandTotals: {
             // 设置总计汇总计算方式为求和
-            aggregation: 'SUM',
+            aggregation: Aggregation.SUM,
           },
           calcSubTotals: {
             // 设置小计汇总计算方式为求和
-            aggregation: 'SUM',
+            aggregation: Aggregation.SUM,
           },
           // 总计分组下，city 城市维度会出现分组
-          totalsGroupDimensions: ['city'],
+          grandTotalsGroupDimensions: ['city'],
           // 小计维度下，type 类别维度下会出现分组
           subTotalsGroupDimensions: ['type'],
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/analysis/totals/demo/dimension-group-row.ts b/s2-site/examples/analysis/totals/demo/dimension-group-row.ts
index ec9aca8d99..c8967ff3f3 100644
--- a/s2-site/examples/analysis/totals/demo/dimension-group-row.ts
+++ b/s2-site/examples/analysis/totals/demo/dimension-group-row.ts
@@ -1,14 +1,16 @@
-import { PivotSheet } from '@antv/s2';
+import { Aggregation, PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
-fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json')
+fetch(
+  'https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json',
+)
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city', 'type'],
         columns: [],
-        values: ['price' ,'cost'],
+        values: ['price', 'cost'],
       },
       meta: [
         {
@@ -35,7 +37,7 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json'
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       // 配置行小计总计显示,且按维度分组（列小计总计同理）
@@ -43,24 +45,25 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json'
         row: {
           showGrandTotals: true,
           showSubTotals: true,
-          reverseLayout: true,
-          reverseSubLayout: true,
+          reverseGrandTotalsLayout: true,
+          reverseSubTotalsLayout: true,
           subTotalsDimensions: ['province'],
-          calcTotals: {
+          calcGrandTotals: {
             // 设置总计汇总计算方式为求和
-            aggregation: 'SUM',
+            aggregation: Aggregation.SUM,
           },
           calcSubTotals: {
             // 设置小计汇总计算方式为求和
-            aggregation: 'SUM',
+            aggregation: Aggregation.SUM,
           },
           // 总计分组下，city 城市维度会出现分组
-          totalsGroupDimensions: ['city'],
+          grandTotalsGroupDimensions: ['city'],
           // 小计维度下，type 类别维度下会出现分组
           subTotalsGroupDimensions: ['type'],
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
     s2.render();
diff --git a/s2-site/examples/analysis/totals/demo/multiple-values.ts b/s2-site/examples/analysis/totals/demo/multiple-values.ts
index ee5970a1d7..a73d73cf71 100644
--- a/s2-site/examples/analysis/totals/demo/multiple-values.ts
+++ b/s2-site/examples/analysis/totals/demo/multiple-values.ts
@@ -35,9 +35,9 @@ fetch(
         },
       ],
       // 从  @antv/s2 1.53.0-alpha 开始，如果是多度量的场景，我们期望同一个数据里就包含了多个 values 属性，即：
-      // [{province: "四川", city: "成都", type: "商品", price: 100, cost: 80}]
+      // [{ province: "四川", city: "成都", type: "商品", price: 100, cost: 80 }]
       // 而不是：
-      // [{province: "四川", city: "成都", type: "商品", price: 100}, {province: "四川", city: "成都", type: "商品", price: 100}]
+      // [{ province: "四川", city: "成都", type: "商品", price: 100}, {province: "四川", city: "成都", type: "商品", price: 100 }]
       data,
     };
 
diff --git a/s2-site/examples/analysis/totals/demo/tree.ts b/s2-site/examples/analysis/totals/demo/tree.ts
index eeaca53550..55b70dac82 100644
--- a/s2-site/examples/analysis/totals/demo/tree.ts
+++ b/s2-site/examples/analysis/totals/demo/tree.ts
@@ -1,4 +1,4 @@
-import { PivotSheet, S2DataConfig, S2Options, S2Options } from '@antv/s2';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/4347c2dd-6554-451b-9d44-15b04e5de657.json',
diff --git a/s2-site/examples/basic/pivot/demo/tree.ts b/s2-site/examples/basic/pivot/demo/tree.ts
index a737c53c4b..ddfec69803 100644
--- a/s2-site/examples/basic/pivot/demo/tree.ts
+++ b/s2-site/examples/basic/pivot/demo/tree.ts
@@ -11,12 +11,16 @@ fetch(
       width: 600,
       height: 480,
       hierarchyType: 'tree',
-     // 显示序号
+
+      // 自定义角头标题 默认 "维值1/维值2"
+      // cornerText: "指标",
+
+      // 显示序号
       // seriesNumber: {
       //   enable: true,
       //   自定义序号列文本, 默认 "序号"
-      //   text: '自定义序号标题', 
-      //},
+      //   text: '自定义序号标题',
+      // },
       style: {
         rowCell: {
           // 自定义树状模式下行头宽度
diff --git a/s2-site/examples/basic/table/demo/table.ts b/s2-site/examples/basic/table/demo/table.ts
index 799f85ab2b..8a96fb0835 100644
--- a/s2-site/examples/basic/table/demo/table.ts
+++ b/s2-site/examples/basic/table/demo/table.ts
@@ -40,6 +40,11 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
         enable: true,
         text: '序号',
       },
+      // 自定义空数据单元格占位符
+      // placeholder: '-',
+      placeholder(meta) {
+        return '-';
+      },
     };
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
diff --git a/s2-site/examples/case/art/demo/lost-text.tsx b/s2-site/examples/case/art/demo/lost-text.tsx
index df735452e6..2ff5ffd937 100644
--- a/s2-site/examples/case/art/demo/lost-text.tsx
+++ b/s2-site/examples/case/art/demo/lost-text.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable max-classes-per-file */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { Tag } from 'antd';
 import {
   BaseEvent,
@@ -10,11 +9,12 @@ import {
   InterceptType,
   S2Event,
   CornerCell,
+  S2Theme,
 } from '@antv/s2';
-
+import { Rect } from '@antv/g';
 import '@antv/s2-react/dist/style.min.css';
 
-const Theme = {
+const Theme: S2Theme = {
   rowCell: {
     text: {
       opacity: 0,
@@ -44,21 +44,6 @@ const Theme = {
   },
 };
 
-class CustomCornerCell extends CornerCell {
-  drawBackgroundShape() {
-    this.addShape('rect', {
-      attrs: {
-        ...this.getCellArea(),
-        fill: '#E0E9FD',
-      },
-    });
-  }
-
-  getCornerText() {
-    return '👍🏻';
-  }
-}
-
 class CustomInteraction extends BaseEvent {
   timer = null;
 
@@ -160,7 +145,7 @@ class CustomInteraction extends BaseEvent {
       const isLastCell = colIndex === 3 && rowIndex === 7;
 
       if (isLastCell) {
-        this.changeCell(CellTypes.DATA_CELL);
+        this.changeCell(CellType.DATA_CELL);
       }
     });
   }
@@ -170,16 +155,16 @@ class CustomInteraction extends BaseEvent {
       const rules = [6, 66, 666];
 
       if (rules.includes(info.resizedWidth)) {
-        this.changeCell(CellTypes.COL_CELL);
+        this.changeCell(CellType.COL_CELL);
       }
     });
 
     this.spreadsheet.on(S2Event.COL_CELL_BRUSH_SELECTION, (colCells) => {
       const isAllSelected =
-        colCells.length === this.spreadsheet.getColumnNodes().length;
+        colCells.length === this.spreadsheet.facet.getColNodes().length;
 
       if (isAllSelected) {
-        this.changeCell(CellTypes.COL_CELL);
+        this.changeCell(CellType.COL_CELL);
       }
     });
   }
@@ -189,20 +174,19 @@ class CustomInteraction extends BaseEvent {
       const selectedOddRowCells = cells.filter((cell) => {
         const meta = cell.getMeta();
 
-        return cell.cellType === CellTypes.ROW_CELL && meta.rowIndex % 2 !== 0;
+        return cell.cellType === CellType.ROW_CELL && meta.rowIndex % 2 !== 0;
       });
 
       const isAllOddRowCellsSelected = selectedOddRowCells.length === 4;
 
       if (isAllOddRowCellsSelected) {
-        this.changeCell(CellTypes.ROW_CELL);
+        this.changeCell(CellType.ROW_CELL);
       }
     });
   }
 }
 
-export const s2Options = {
-  debug: true,
+const s2Options: SheetComponentOptions = {
   width: 600,
   height: 400,
   seriesNumber: {
@@ -211,12 +195,11 @@ export const s2Options = {
   showDefaultHeaderActionIcon: false,
   interaction: {
     copy: { enable: true },
-    // 防止 mac 触控板横向滚动触发浏览器返回, 和移动端下拉刷新
     overscrollBehavior: 'none',
     brushSelection: {
-      data: true,
-      col: true,
-      row: true,
+      dataCell: true,
+      colCell: true,
+      rowCell: true,
     },
     hoverFocus: false,
     hoverHighlight: false,
@@ -228,19 +211,18 @@ export const s2Options = {
     ],
   },
   tooltip: {
-    showTooltip: false,
+    enable: false,
   },
   hierarchyType: 'grid',
   style: {
-    rowCfg: {
+    rowCell: {
       width: 100,
     },
-    cellCfg: {
+    dataCell: {
       width: 50,
       height: 30,
     },
   },
-  cornerCell: (...args) => new CustomCornerCell(...args),
 };
 
 fetch(
@@ -248,7 +230,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
@@ -295,6 +277,5 @@ fetch(
           ),
         }}
       />,
-      document.getElementById('container'),
     );
   });
diff --git a/s2-site/examples/case/art/demo/mosaic.tsx b/s2-site/examples/case/art/demo/mosaic.tsx
index f67ca70178..6cdc362947 100644
--- a/s2-site/examples/case/art/demo/mosaic.tsx
+++ b/s2-site/examples/case/art/demo/mosaic.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
-
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
 import { ThemeCfg } from '@antv/s2';
+import '@antv/s2-react/dist/style.min.css';
 
-// more Info https://observablehq.com/@pearmini/mosaic-antv-s2
-
+// 了解更多: https://observablehq.com/@pearmini/mosaic-antv-s2
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/7f6ebbb4-ffeb-4f6c-a763-6faa8c0ccf7a.json',
 )
@@ -32,10 +30,9 @@ fetch(
       style: {
         layoutWidthType: 'compact',
         colCell: {
+          // 隐藏列头
           height: 0,
-          widthByField: {
-            color: 23,
-          },
+          width: 23,
         },
         dataCell: {
           height: 23,
diff --git a/s2-site/examples/case/kpi-strategy/demo/basic.tsx b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
index 5e2e27c4c9..8614a15e16 100644
--- a/s2-site/examples/case/kpi-strategy/demo/basic.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
@@ -1,7 +1,6 @@
 import { DataCell, S2DataConfig, S2Theme } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import React from 'react';
-
 import { Line, Rect } from '@antv/g';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -61,7 +60,7 @@ class KpiStrategyDataCell extends DataCell {
 
   // 如果是进度, 格式化为百分比 (只做 demo 示例, 请根据实际情况使用)
   getFormattedFieldValue() {
-    const data = this.meta.data?.getOrigin();
+    const data = this.meta.data?.raw;
 
     if (!data || !data.isProgress) {
       return super.getFormattedFieldValue();
@@ -76,7 +75,7 @@ class KpiStrategyDataCell extends DataCell {
   renderDeriveValue() {
     // 通过 this.meta 拿到当前单元格的有效信息
     const { x, width } = this.meta;
-    const data = this.meta.data?.getOrigin();
+    const data = this.meta.data?.raw;
 
     if (!data || data.isExtra) {
       return;
@@ -115,7 +114,7 @@ class KpiStrategyDataCell extends DataCell {
 
   renderProgressBar() {
     const { x, y, width, height, data } = this.meta;
-    const originData = data?.getOrigin();
+    const originData = this.meta.data?.raw;
 
     if (!data || !originData || !originData.isProgress) {
       return;
@@ -218,6 +217,18 @@ fetch('https://assets.antv.antgroup.com/s2/kpi-strategy.json')
       tooltip: {
         operation: {
           hiddenColumns: true,
+          menu: {
+            items: [
+              {
+                icon: 'Trend',
+                key: 'trend',
+                label: '趋势',
+                onClick: (info, cell) => {
+                  console.log('trend icon clicked:', info, cell);
+                },
+              },
+            ],
+          },
         },
       },
       totals: {
@@ -226,7 +237,7 @@ fetch('https://assets.antv.antgroup.com/s2/kpi-strategy.json')
         },
       },
       interaction: {
-        selectedCellsSpotlight: true,
+        selectedCellsSpotlight: false,
         hoverHighlight: true,
       },
       // 默认数值挂列头, 会同时显示列头和数值, 隐藏数值列, 使其列头只展示日期, 更美观
diff --git a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
index 60948cf68a..fff30530f9 100644
--- a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx
@@ -1,10 +1,20 @@
 import React from 'react';
-
 import { isNil } from 'lodash';
 import { isUpDataValue } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
+// 临时处理老数据格式
+function process(children) {
+  return children.map((item) => {
+    return {
+      ...item,
+      field: item.key,
+      children: process(item.children),
+    };
+  });
+}
+
 // 数据来源：https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1&city=%E5%9B%9B%E5%B7%9D-%E5%9B%9B%E5%B7%9D
 fetch(
   'https://gw.alipayobjects.com/os/antfincdn/AaxWQTWBO/sichuan-covid-trend.json',
@@ -16,6 +26,7 @@ fetch(
       height: 600,
       placeholder: '',
       hierarchyType: 'tree',
+      cornerText: '指标',
       style: {
         rowCell: {
           height: 60,
@@ -30,7 +41,7 @@ fetch(
         text: [
           {
             mapping: (value, cellInfo) => {
-              const { colIndex } = cellInfo;
+              const { colIndex } = cellInfo || {};
               const isNilValue = isNil(value) || value === '';
 
               if (colIndex === 0 || isNilValue) {
@@ -49,7 +60,7 @@ fetch(
           {
             position: 'right',
             mapping(value, cellInfo) {
-              const { colIndex } = cellInfo;
+              const { colIndex } = cellInfo || {};
               const isNilValue = isNil(value) || value === '';
 
               if (colIndex === 0 || isNilValue) {
@@ -78,7 +89,7 @@ fetch(
           ...s2DataCfg,
           fields: {
             ...s2DataCfg.fields,
-            rows: s2DataCfg.fields.customTreeItems,
+            rows: process(s2DataCfg.fields.customTreeItems),
           },
         }}
         options={s2Options}
diff --git a/s2-site/examples/case/proportion/demo/group-drill-down.tsx b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
index 360f311466..8037564127 100644
--- a/s2-site/examples/case/proportion/demo/group-drill-down.tsx
+++ b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
@@ -1,8 +1,8 @@
 import { isUpDataValue } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
-import React, { useState } from 'react';
+import React from 'react';
+import '@antv/s2-react/dist/style.min.css';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/ff31b171-17a7-4d29-b20a-0b90a810d2de.json',
@@ -10,8 +10,8 @@ fetch(
   .then((res) => res.json())
   .then((data) => {
     const GridSheet = () => {
-      const [s2DataConfig, setS2DataConfig] = useState(data.dataCfg);
-      const [drillDownField, setDrillDownField] = useState('');
+      const [s2DataConfig, setS2DataConfig] = React.useState(data.dataCfg);
+      const [drillDownField, setDrillDownField] = React.useState('');
       const s2Options: SheetComponentOptions = {
         width: 800,
         height: 600,
diff --git a/s2-site/examples/case/proportion/demo/single-population-proportion.tsx b/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
index 268fe3af13..fc68742a14 100644
--- a/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
+++ b/s2-site/examples/case/proportion/demo/single-population-proportion.tsx
@@ -1,8 +1,8 @@
 import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
 import React from 'react';
+import '@antv/s2-react/dist/style.min.css';
 
 const PALETTE_COLORS = [
   {
@@ -116,7 +116,7 @@ fetch('https://assets.antv.antgroup.com/s2/single-population-proportion.json')
         },
       },
       interaction: {
-        selectedCellsSpotlight: true,
+        selectedCellsSpotlight: false,
         hoverHighlight: false,
       },
       style: {
diff --git a/s2-site/examples/custom/custom-cell/demo/meta.json b/s2-site/examples/custom/custom-cell/demo/meta.json
index b6ed60c044..4f5ce24aa2 100644
--- a/s2-site/examples/custom/custom-cell/demo/meta.json
+++ b/s2-site/examples/custom/custom-cell/demo/meta.json
@@ -97,8 +97,8 @@
     {
       "filename": "data-cell-placeholder.ts",
       "title": {
-        "zh": "自定义单元格占位符",
-        "en": "custom cell placeholder"
+        "zh": "自定义单元格空数据占位符",
+        "en": "custom cell empty placeholder"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B-VMT7kCWL0AAAAAAAAAAAAADmJ7AQ/original",
       "new": true
diff --git a/s2-site/examples/custom/custom-layout/demo/meta.json b/s2-site/examples/custom/custom-layout/demo/meta.json
index 10232becca..ec03c670c8 100644
--- a/s2-site/examples/custom/custom-layout/demo/meta.json
+++ b/s2-site/examples/custom/custom-layout/demo/meta.json
@@ -51,7 +51,7 @@
         "zh": "自定义分面",
         "en": "Custom Facet"
       },
-      "screenshot": "",
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Nz1qTYoOA-kAAAAAAAAAAAAADmJ7AQ/original",
       "new": true
     }
   ]
diff --git a/s2-site/examples/custom/custom-plugins/demo/rough.ts b/s2-site/examples/custom/custom-plugins/demo/rough.ts
index 5d4cb09089..8b06b883cd 100644
--- a/s2-site/examples/custom/custom-plugins/demo/rough.ts
+++ b/s2-site/examples/custom/custom-plugins/demo/rough.ts
@@ -1,6 +1,9 @@
 import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';
 
+/**
+ * 需要注意的是一旦使用该插件，“脏矩形渲染”便无法使用，这意味着任何图形的任何样式属性改变，都会导致画布的全量重绘, 性能会严重下降。
+ */
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
diff --git a/s2-site/examples/interaction/advanced/demo/custom-tree-link-jump.ts b/s2-site/examples/interaction/advanced/demo/custom-tree-link-jump.ts
index 6363f4dd4e..5b7da2294f 100644
--- a/s2-site/examples/interaction/advanced/demo/custom-tree-link-jump.ts
+++ b/s2-site/examples/interaction/advanced/demo/custom-tree-link-jump.ts
@@ -1,5 +1,16 @@
 import { S2Event, PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 
+// 临时处理老数据格式
+function process(children) {
+  return children?.map((item) => {
+    return {
+      ...item,
+      field: item.key,
+      children: process(item.children),
+    };
+  });
+}
+
 fetch(
   'https://render.alipay.com/p/yuyan/180020010001215413/s2/custom-tree.json',
 )
@@ -8,7 +19,7 @@ fetch(
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
       fields: {
-        rows: res.customTreeItem,
+        rows: process(res.customTreeItem),
         columns: ['type', 'sub_type'],
         values: [
           'measure-a',
diff --git a/s2-site/examples/interaction/advanced/demo/merge-cell.ts b/s2-site/examples/interaction/advanced/demo/merge-cell.ts
index 7eb2856714..ee8c4e873e 100644
--- a/s2-site/examples/interaction/advanced/demo/merge-cell.ts
+++ b/s2-site/examples/interaction/advanced/demo/merge-cell.ts
@@ -42,7 +42,9 @@ fetch(
     const dataCellTooltip = () => {
       button.innerText = '点击合并单元格';
       button.className = 'merge-cells-button';
-      button.onclick = () => s2.interaction.mergeCells();
+      button.onclick = () => {
+        s2.interaction.mergeCells();
+      };
 
       return button;
     };
@@ -50,7 +52,9 @@ fetch(
     const mergedCellsTooltip = (mergedCell) => {
       button.innerText = '取消合并单元格';
       button.className = 'merge-cells-button';
-      button.onclick = () => s2.interaction.unmergeCell(mergedCell);
+      button.onclick = () => {
+        s2.interaction.unmergeCell(mergedCell);
+      };
 
       return button;
     };
diff --git a/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts b/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts
index 315689229e..5674b76d78 100644
--- a/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts
+++ b/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts
@@ -1,4 +1,5 @@
 import { PivotSheet, S2Event, S2Options } from '@antv/s2';
+import '@antv/s2/dist/style.min.css';
 
 function hideSelectedColumns(s2) {
   // 兼容多选
@@ -7,9 +8,11 @@ function hideSelectedColumns(s2) {
     .map((cell) => cell.getMeta());
 
   const selectedColumnFields = selectedColumnNodes.map((node) => node.id);
+
   s2.interaction.hideColumns(selectedColumnFields, true);
 }
 
+// 使用 `@antv/s2` tooltip 的 ui 需要自己封装, `@antv/s2-react` 已经内置.
 function getTooltipContent(cell, options) {
   const { spreadsheet, isLeaf } = cell.getMeta();
 
@@ -18,6 +21,7 @@ function getTooltipContent(cell, options) {
   }
 
   const button = document.createElement('button');
+
   button.type = 'button';
   button.innerHTML = '隐藏';
   button.className = 'ant-btn';
@@ -39,9 +43,9 @@ fetch(
       width: 600,
       height: 480,
       interaction: {
-        // 透视表默认隐藏需要指定唯一列头id
-        // 可通过 `s2.facet.getColCellNodes()` 获取列头节点查看id
-        hiddenColumnFields: ['root[&]家具[&]沙发[&]number'],
+        // 透视表默认隐藏需要指定唯一列头 id
+        // 可通过 `s2.facet.getColNodes()` 获取列头节点查看i d
+        hiddenColumnFields: ['root[&]家具[&]沙发[&]数量'],
       },
       tooltip: {
         enable: true,
diff --git a/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts b/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts
index b84f7ec330..ff868e8b35 100644
--- a/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts
+++ b/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts
@@ -8,6 +8,7 @@ import {
   S2CellType,
   TooltipShowOptions,
 } from '@antv/s2';
+import '@antv/s2/dist/style.min.css';
 
 function hideSelectedColumns(s2: SpreadSheet) {
   // 兼容多选
@@ -20,6 +21,7 @@ function hideSelectedColumns(s2: SpreadSheet) {
   s2.interaction.hideColumns(selectedColumnFields, true);
 }
 
+// 使用 `@antv/s2` tooltip 的 ui 需要自己封装, `@antv/s2-react` 已经内置.
 function getTooltipContent(cell: S2CellType, options: TooltipShowOptions) {
   const { spreadsheet, isLeaf } = cell.getMeta();
 
diff --git a/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts b/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts
index 451dfdb11a..1d89560494 100644
--- a/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts
+++ b/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts
@@ -1,12 +1,13 @@
 import { PivotSheet, BaseEvent, S2Event, S2Options } from '@antv/s2';
+import '@antv/s2/dist/style.min.css';
 
 class RowColumnHoverTooltipInteraction extends BaseEvent {
   bindEvents() {
-    // 行头hover
+    // 行头 hover
     this.spreadsheet.on(S2Event.ROW_CELL_HOVER, (event) => {
       this.showTooltip(event);
     });
-    // 列头hover
+    // 列头 hover
     this.spreadsheet.on(S2Event.COL_CELL_HOVER, (event) => {
       this.showTooltip(event);
     });
@@ -14,10 +15,10 @@ class RowColumnHoverTooltipInteraction extends BaseEvent {
 
   showTooltip(event) {
     const cell = this.spreadsheet.getCell(event.target);
-    const meta = cell.getMeta();
-    const content = meta.value;
+    const meta = cell?.getMeta();
+    const content = meta?.value || 'custom';
 
-    this.spreadsheet.tooltip.show({
+    this.spreadsheet.showTooltip({
       position: {
         x: event.clientX,
         y: event.clientY,
diff --git a/s2-site/examples/layout/custom/demo/hide-columns.ts b/s2-site/examples/layout/custom/demo/hide-columns.ts
index 74b80664df..8602b699e7 100644
--- a/s2-site/examples/layout/custom/demo/hide-columns.ts
+++ b/s2-site/examples/layout/custom/demo/hide-columns.ts
@@ -45,5 +45,12 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
+    // 默认列头有一条分割线, 如果不需要的话将分割线的透明度设置为 0
+    s2.setTheme({
+      splitLine: {
+        horizontalBorderColorOpacity: 0,
+      },
+    });
+
     await s2.render();
   });
diff --git a/s2-site/examples/layout/custom/demo/hide-value.ts b/s2-site/examples/layout/custom/demo/hide-value.ts
index 3d1281f191..5d0224a36e 100644
--- a/s2-site/examples/layout/custom/demo/hide-value.ts
+++ b/s2-site/examples/layout/custom/demo/hide-value.ts
@@ -9,7 +9,7 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
-        values: ['price', 'cost'],
+        values: ['price'],
       },
       meta: [
         {
@@ -28,10 +28,6 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
           field: 'price',
           name: '价格',
         },
-        {
-          field: 'cost',
-          name: '成本',
-        },
       ],
       data,
     };
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
index 832c9ceaae..b9ad8c90eb 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
-import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  SheetComponentsProps,
+} from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import { TargetCellInfo } from '@antv/s2';
 
 const CustomColCellTooltip = () => <div>col cell</div>;
 
@@ -21,7 +24,10 @@ fetch(
       },
     };
 
-    const onColCellClick = ({ viewMeta, event }) => {
+    const onColCellClick: SheetComponentsProps['onColCellClick'] = ({
+      viewMeta,
+      event,
+    }) => {
       if (!viewMeta) {
         return;
       }
@@ -41,26 +47,28 @@ fetch(
           content: <CustomColCellTooltip />,
           options: {
             operator: {
-              menus: [
-                {
-                  key: 'custom-a',
-                  text: '操作1',
-                  icon: 'Trend',
-                  onClick: (cell) => {
-                    console.log('操作1点击', cell);
-                  },
-                  children: [
-                    {
-                      key: 'custom-a-a',
-                      text: '操作 1-1',
-                      icon: 'Trend',
-                      onClick: (cell) => {
-                        console.log('操作 1-1 点击', cell);
-                      },
+              menu: {
+                items: [
+                  {
+                    key: 'custom-a',
+                    label: '操作1',
+                    icon: 'Trend',
+                    onClick: (info, cell) => {
+                      console.log('操作1点击', info, cell);
                     },
-                  ],
-                },
-              ],
+                    children: [
+                      {
+                        key: 'custom-a-a',
+                        label: '操作 1-1',
+                        icon: 'Trend',
+                        onClick: (info, cell) => {
+                          console.log('操作 1-1 点击', info, cell);
+                        },
+                      },
+                    ],
+                  },
+                ],
+              },
             },
           },
         });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx b/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
index 7589148c7a..b3598c3100 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
@@ -1,10 +1,12 @@
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
 import { Button } from 'antd';
 import insertCSS from 'insert-css';
 import React from 'react';
+import '@antv/s2-react/dist/style.min.css';
 
-const CustomTooltip = <div className="tooltip-custom-component">content</div>;
+const CustomTooltip = () => (
+  <div className="tooltip-custom-component">content</div>
+);
 
 const RowCellTooltip = ({ title }) => (
   <div className="tooltip-custom-component">{title}</div>
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-description.tsx b/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
index fb1744d60a..b88f2032bc 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-description.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
 import { S2DataConfig } from '@antv/s2';
+import '@antv/s2-react/dist/style.min.css';
 
 fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
   .then((res) => res.json())
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
index aef7701437..2e711c172b 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  SheetComponentsProps,
+} from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -23,9 +27,12 @@ fetch(
     const CustomRowCellTooltip = () => <div>row cell tooltip</div>;
     const CustomDataCellTooltip = () => <div>data cell tooltip</div>;
 
-    const onColCellHover = ({ event, viewMeta }) => {
+    const onColCellHover: SheetComponentsProps['onColCellHover'] = ({
+      event,
+      viewMeta,
+    }) => {
       // 查看更多配置项: https://s2.antv.antgroup.com/api/basic-class/base-tooltip#tooltipshowoptions
-      viewMeta.spreadsheet.tooltip.show({
+      viewMeta.spreadsheet.showTooltip({
         position: {
           x: event.clientX,
           y: event.clientY,
@@ -34,26 +41,28 @@ fetch(
         // 自定义操作项
         options: {
           operator: {
-            menus: [
-              {
-                key: 'custom-a',
-                text: '操作1',
-                icon: 'Trend',
-                onClick: (cell) => {
-                  console.log('操作1点击', cell);
-                },
-                children: [
-                  {
-                    key: 'custom-a-a',
-                    text: '操作 1-1',
-                    icon: 'Trend',
-                    onClick: (cell) => {
-                      console.log('操作 1-1 点击', cell);
-                    },
+            menu: {
+              items: [
+                {
+                  key: 'custom-a',
+                  label: '操作1',
+                  icon: 'Trend',
+                  onClick: (info, cell) => {
+                    console.log('操作1点击', info, cell);
                   },
-                ],
-              },
-            ],
+                  children: [
+                    {
+                      key: 'custom-a-a',
+                      label: '操作 1-1',
+                      icon: 'Trend',
+                      onClick: (info, cell) => {
+                        console.log('操作 1-1 点击', info, cell);
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
           },
         },
       });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
index e57fcf2929..6a9ff1c62a 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx
@@ -4,9 +4,9 @@ import {
   SheetComponentOptions,
   TooltipOperatorMenuOptions,
 } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
 import React from 'react';
+import '@antv/s2-react/dist/style.min.css';
 
 const MyCustomTooltipContent = () => (
   <div className="tooltip-custom-component">我是自定义 tooltip 内容</div>
diff --git a/s2-site/examples/react-component/tooltip/demo/meta.json b/s2-site/examples/react-component/tooltip/demo/meta.json
index e6f440d246..2104dda64a 100644
--- a/s2-site/examples/react-component/tooltip/demo/meta.json
+++ b/s2-site/examples/react-component/tooltip/demo/meta.json
@@ -26,12 +26,12 @@
         "zh": "自定义操作项",
         "en": "Custom Operation"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/le1o4zCn9/d5fd21d4-95bb-448e-9c10-92a1dd4495ae.png"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*G5YlTpZBfBkAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
       "filename": "custom-content-base.ts",
       "title": {
-        "zh": "自定义 Tooltip 内容 (@antv/s2)",
+        "zh": "自定义 Tooltip 内容 (在 @antv/s2 中使用)",
         "en": "Custom Tooltip Content (@antv/s2)"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/j1fkyyIDdh/939fb3ed-b1c7-48a4-a329-bd1d64ddcb9c.png",
diff --git a/s2-site/examples/react-component/tooltip/demo/operation.tsx b/s2-site/examples/react-component/tooltip/demo/operation.tsx
index 1a1e762557..51788e9cb5 100644
--- a/s2-site/examples/react-component/tooltip/demo/operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/operation.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
 import { CellType } from '@antv/s2';
+import '@antv/s2-react/dist/style.min.css';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
diff --git a/s2-site/examples/theme/default/demo/dark.ts b/s2-site/examples/theme/default/demo/dark.ts
index 55f9d3ad65..6c3f3d81da 100644
--- a/s2-site/examples/theme/default/demo/dark.ts
+++ b/s2-site/examples/theme/default/demo/dark.ts
@@ -44,7 +44,9 @@ fetch(
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.setThemeCfg({ name: 'dark' });
+    s2.setThemeCfg({
+      name: 'dark',
+    });
 
     await s2.render();
   });
diff --git a/s2-site/playground/config-panel/types.ts b/s2-site/playground/config-panel/types.ts
index fe5e7f6b52..20aaee52ec 100644
--- a/s2-site/playground/config-panel/types.ts
+++ b/s2-site/playground/config-panel/types.ts
@@ -1,14 +1,14 @@
 export type AttributeTreeProps<
-  C extends Partial<AttributeComponentProps> = AttributeComponentProps
+  C extends Partial<AttributeComponentProps> = AttributeComponentProps,
 > = {
   // 配置端当前配置的所有属性
   attributes: any;
   relations: {
-    fromAttributeId: string,
-    toAttributeId: string,
-    action: string,
-    value: string | Array<any> | boolean,
-    operator: string
+    fromAttributeId: string;
+    toAttributeId: string;
+    action: string;
+    value: string | Array<any> | boolean;
+    operator: string;
   }[];
   config: AttributeComponentProps & C;
   disable?: boolean;

From 97d742c43d53ed4566c38a357c6afbd68ad8d422 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Mon, 5 Feb 2024 10:34:15 +0800
Subject: [PATCH 61/64] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E7=A4=BA=E4=BE=8B=E9=94=99=E8=AF=AF=E5=92=8C=E5=8D=95?=
 =?UTF-8?q?=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                              | 3 ++-
 .../spreadsheet/__snapshots__/spread-sheet-spec.ts.snap   | 4 ++--
 .../__snapshots__/row-column-resize-spec.ts.snap          | 4 ++--
 .../__tests__/unit/interaction/row-column-resize-spec.ts  | 4 ++--
 packages/s2-core/package.json                             | 2 +-
 packages/s2-vue/package.json                              | 2 +-
 s2-site/docs/manual/getting-started.zh.md                 | 6 +++---
 s2-site/docs/manual/introduction.zh.md                    | 4 ++--
 s2-site/examples/case/comparison/demo/time-spend.tsx      | 7 ++++++-
 scripts/add-version.js                                    | 8 ++++----
 10 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 0b20ab3a44..7fa9a90856 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,8 @@
     "site:start": "pnpm --filter @antv/s2-site start",
     "site:build": "NODE_OPTIONS='--max-old-space-size=4096' pnpm --filter @antv/s2-site build",
     "site:preview": "pnpm --filter @antv/s2-site preview",
-    "site:deploy": "pnpm --filter @antv/s2-site deploy"
+    "site:deploy": "pnpm --filter @antv/s2-site deploy",
+    "share:test": "pnpm --filter @antv/s2-shared test"
   },
   "commitlint": {
     "extends": [
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap
index 2a4a70c149..919cc5169c 100644
--- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap
@@ -46,8 +46,8 @@ Object {
       "colCellVertical": true,
       "colResizeType": "current",
       "cornerCellHorizontal": true,
-      "minCellHeight": 40,
-      "minCellWidth": 40,
+      "minCellHeight": 20,
+      "minCellWidth": 20,
       "rowCellVertical": true,
       "rowResizeType": "current",
     },
diff --git a/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap b/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap
index 38bc0fd437..c731ef6981 100644
--- a/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap
+++ b/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap
@@ -111,9 +111,9 @@ Object {
   "heightByField": null,
   "maxLines": 1,
   "textOverflow": "ellipsis",
-  "width": 42,
+  "width": 40,
   "widthByField": Object {
-    "testField": 42,
+    "testField": 40,
   },
   "wordWrap": true,
 }
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 cbd8277cd4..e976c35f4c 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
@@ -263,7 +263,7 @@ describe('Interaction Row Column Resize Tests', () => {
       height: 0,
       isResizeArea: true,
       effect: ResizeAreaEffect.Cell,
-      resizedWidth: 42,
+      resizedWidth: 40,
       resizedHeight: 0,
       size: 3,
       meta: {
@@ -724,7 +724,7 @@ describe('Interaction Row Column Resize Tests', () => {
     expect(disable).toHaveBeenCalledWith({
       ...resizeInfo,
       resizedWidth: 0,
-      resizedHeight: 40,
+      resizedHeight: 20,
     });
 
     emitResizeEvent(
diff --git a/packages/s2-core/package.json b/packages/s2-core/package.json
index 2c47ca6b39..2256667180 100644
--- a/packages/s2-core/package.json
+++ b/packages/s2-core/package.json
@@ -47,7 +47,7 @@
     "build:analysis": "cross-env FORMAT=esm ANALYSIS=true rollup -c rollup.config.mjs",
     "build:dts": "run-s dts:*",
     "build:size-limit": "size-limit",
-    "build:size-limit-json": "yarn build:size-limit --json",
+    "build:size-limit-json": "pnpm build:size-limit --json",
     "dts:build": "tsc -p tsconfig.declaration.json",
     "dts:extract": "cross-env LIB=s2-core node ../../scripts/dts.js",
     "watch": "rimraf esm && pnpm build:esm -w",
diff --git a/packages/s2-vue/package.json b/packages/s2-vue/package.json
index d5254c15e7..67776c6ae3 100644
--- a/packages/s2-vue/package.json
+++ b/packages/s2-vue/package.json
@@ -46,7 +46,7 @@
     "build:analysis": "cross-env FORMAT=es ANALYSIS=true vite build",
     "build:dts": "run-s dts:*",
     "build:size-limit": "size-limit",
-    "build:size-limit-json": "yarn build:size-limit --json",
+    "build:size-limit-json": "pnpm build:size-limit --json",
     "dts:build": "vue-tsc -p tsconfig.declaration.json",
     "dts:extract": "cross-env LIB=s2-vue node ../../scripts/dts.js",
     "test": "jest --passWithNoTests",
diff --git a/s2-site/docs/manual/getting-started.zh.md b/s2-site/docs/manual/getting-started.zh.md
index e443734992..c1a0cb6ca7 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -9,14 +9,14 @@ tag: Updated
 ### 使用 npm 或 yarn 或 pnpm 安装
 
 ```bash
-# pnpm
-$ pnpm add @antv/s2@next
-
 # npm
 $ npm install @antv/s2@next --save
 
 # yarn
 $ yarn add @antv/s2@next
+
+# pnpm
+$ pnpm add @antv/s2@next
 ```
 
 ### 使用 React 或 Vue3 版本
diff --git a/s2-site/docs/manual/introduction.zh.md b/s2-site/docs/manual/introduction.zh.md
index 7e7bf2a603..82a95edcf8 100644
--- a/s2-site/docs/manual/introduction.zh.md
+++ b/s2-site/docs/manual/introduction.zh.md
@@ -71,9 +71,9 @@ redirect_from:
 ## 📦 安装
 
 ```bash
-pnpm add @antv/s2@next
-# npm install @antv/s2@next --save
+$ npm install @antv/s2@next --save
 # yarn add @antv/s2@next
+# pnpm add @antv/s2@next
 ```
 
 ## 🔨 使用
diff --git a/s2-site/examples/case/comparison/demo/time-spend.tsx b/s2-site/examples/case/comparison/demo/time-spend.tsx
index bed64f77f4..3d814109cb 100644
--- a/s2-site/examples/case/comparison/demo/time-spend.tsx
+++ b/s2-site/examples/case/comparison/demo/time-spend.tsx
@@ -64,7 +64,7 @@ class CustomDataCell extends DataCell {
     let fill;
     let opacity = 1;
 
-    if (!Number.isNaN(fieldValue)) {
+    if (!isNaN(fieldValue)) {
       fill =
         paletteLegendMap.find((v) => v.text === colQuery?.['时刻'])?.color ??
         '#FAD5BB';
@@ -275,6 +275,11 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
         colCell: {
           hideValue: true,
         },
+        rowCell: {
+          widthByField: {
+            成员: 42,
+          },
+        },
         dataCell: {
           width: 40,
           height: 40,
diff --git a/scripts/add-version.js b/scripts/add-version.js
index 33958b907b..339522ff7f 100644
--- a/scripts/add-version.js
+++ b/scripts/add-version.js
@@ -15,16 +15,16 @@ function generateNextVersion() {
 }
 
 function build() {
-  // 直接运行 yarn build 要报错，用一下蠢办法
-  execSync(`yarn clean`, {
+  // 直接运行 pnpm build 要报错，用一下蠢办法
+  execSync(`pnpm clean`, {
     stdio: 'inherit',
   });
 
-  execSync(`yarn build:umd & yarn build:cjs & yarn build:esm`, {
+  execSync(`pnpm build:umd & pnpm build:cjs & pnpm build:esm`, {
     stdio: 'inherit',
   });
 
-  execSync(`yarn dts:build && yarn dts:extract`, {
+  execSync(`pnpm dts:build && pnpm dts:extract`, {
     stdio: 'inherit',
   });
 }

From 4f0edac8c48cd1e96273caec3600900be87c91fd Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Mon, 5 Feb 2024 10:59:47 +0800
Subject: [PATCH 62/64] =?UTF-8?q?build:=20=E4=BF=AE=E5=A4=8D=E6=89=93?=
 =?UTF-8?q?=E5=8C=85=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-core/rollup.config.mjs                     | 8 ++++----
 packages/s2-core/src/common/interface/basic.ts         | 7 +++++--
 packages/s2-core/src/common/interface/s2Options.ts     | 2 ++
 packages/s2-core/src/utils/theme.ts                    | 3 ++-
 s2-site/docs/manual/advanced/analysis/pagination.zh.md | 2 +-
 s2-site/docs/manual/migration-v2.zh.md                 | 6 ++----
 6 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/s2-core/rollup.config.mjs b/packages/s2-core/rollup.config.mjs
index 21433d1dff..88eb0afb3c 100644
--- a/packages/s2-core/rollup.config.mjs
+++ b/packages/s2-core/rollup.config.mjs
@@ -34,10 +34,10 @@ const plugins = [
   alias({
     entries: [
       { find: 'lodash', replacement: 'lodash-es' },
-      {
-        find: /^(?<name>.*).less\?inline$/,
-        replacement: '$1.less',
-      },
+      // {
+      //   find: /^(?<name>.*).less\?inline$/,
+      //   replacement: '$1.less',
+      // },
     ],
   }),
   replace({
diff --git a/packages/s2-core/src/common/interface/basic.ts b/packages/s2-core/src/common/interface/basic.ts
index 4e306dec79..949fdfed92 100644
--- a/packages/s2-core/src/common/interface/basic.ts
+++ b/packages/s2-core/src/common/interface/basic.ts
@@ -147,7 +147,7 @@ export interface Total {
   showGrandTotals?: boolean;
 
   /**
-   *是否显示小计
+   * 是否显示小计
    */
   showSubTotals?:
     | boolean
@@ -174,10 +174,13 @@ export interface Total {
 
   /**
    * 总计分组
+   * @example grandTotalsGroupDimensions: ['city']
    */
   grandTotalsGroupDimensions?: string[];
+
   /**
    * 小计分组
+   * @example subTotalsGroupDimensions: ['city']
    */
   subTotalsGroupDimensions?: string[];
 
@@ -210,7 +213,7 @@ export interface Totals {
 }
 
 export interface Sort {
-  /** 字段id */
+  /** 字段 id */
   sortFieldId: string;
 
   /** 排序方式 */
diff --git a/packages/s2-core/src/common/interface/s2Options.ts b/packages/s2-core/src/common/interface/s2Options.ts
index 495f3994c1..8d8a603bc0 100644
--- a/packages/s2-core/src/common/interface/s2Options.ts
+++ b/packages/s2-core/src/common/interface/s2Options.ts
@@ -76,6 +76,7 @@ export interface S2BasicOptions<
 
   /**
    * 分页配置
+   * @see https://s2.antv.antgroup.com/manual/advanced/analysis/pagination
    */
   pagination?: P;
 
@@ -88,6 +89,7 @@ export interface S2BasicOptions<
      * 是否显示序号
      */
     enable?: boolean;
+
     /**
      * 自定义序号列文本, 默认为 "序号"
      */
diff --git a/packages/s2-core/src/utils/theme.ts b/packages/s2-core/src/utils/theme.ts
index 106c48c5e6..f8dc7d93c1 100644
--- a/packages/s2-core/src/utils/theme.ts
+++ b/packages/s2-core/src/utils/theme.ts
@@ -1,6 +1,7 @@
 import { PALETTE_MAP, STYLE_ELEMENT_ID } from '../common/constant';
 import type { Palette, ThemeName } from '../common/interface/theme';
-import DarkVars from '../styles/theme/dark.less?inline';
+// import DarkVars from '../styles/theme/dark.less?inline';
+import DarkVars from '../styles/theme/dark.less';
 import { injectCssText } from './inject-css-text';
 
 /**
diff --git a/s2-site/docs/manual/advanced/analysis/pagination.zh.md b/s2-site/docs/manual/advanced/analysis/pagination.zh.md
index 8fb53a6ca3..c6d8a9a6e2 100644
--- a/s2-site/docs/manual/advanced/analysis/pagination.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/pagination.zh.md
@@ -90,4 +90,4 @@ const s2Options = {
 
 | 参数 | 说明 | 类型 | 默认值 | 必选 |
 |-----|-----|-----|-----|-----|
-|  showPagination   |   是否显示默认分页<br>（只有在 `options` 配置过 `pagination` 属性才会生效）   |  `boolean`   |   `{ <br>onShowSizeChange?: (pageSize: number) => void,<br>onChange?: (current: number) => void <br>}` | `false`  |
+|  showPagination   |   是否显示默认分页<br>（只有在 `options` 配置过 `pagination` 属性才会生效）   |  `boolean`   |   `{  onShowSizeChange?: (pageSize: number) => void, onChange?: (current: number) => void }` | `false`  |
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index b760fd4c04..139fc21a2d 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -499,8 +499,6 @@ render 函数的参数从 boolean 扩展为 `boolean | object`, 当为 `boolean`
 
 #### 小计总计配置参数变更
 
-TODO: 还要改：
-
 总计配置统一增加 `grandTotals` 和 `subTotals` 前缀，避免歧义。
 
 ```diff
@@ -514,8 +512,8 @@ const s2Options = {
 -     reverseSubLayout: true,
 
 +     calcGrandTotals: {}.
-+     reverseGrandLayout: true,
-+     grandLabel: '总计'
++     reverseGrandTotalsLayout: true,
++     grandTotalsLabel: '总计'
 +     grandTotalsGroupDimensions: [],
 +     reverseSubTotalsLayout: true
     };

From bacebc3c240f9f9be22b3d6c58abc3f4c7a74a7b Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Mon, 5 Feb 2024 11:36:29 +0800
Subject: [PATCH 63/64] =?UTF-8?q?build:=20=E4=BF=AE=E5=A4=8D=20size-limit?=
 =?UTF-8?q?=20=E6=89=BE=E4=B8=8D=E5=88=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                   |  12 +-
 packages/s2-core/package.json  |   2 +-
 packages/s2-react/package.json |   2 +-
 packages/s2-vue/package.json   |   2 +-
 pnpm-lock.yaml                 | 346 ++++++++++++++++++++++++++++++++-
 5 files changed, 349 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 7fa9a90856..044adcadf4 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,8 @@
     "build": "pnpm -r --filter './packages/*' --stream build",
     "build:esm": "pnpm -r --filter './packages/*' --stream build:esm",
     "build:umd": "pnpm -r --filter './packages/*' --stream build:umd",
-    "bundle:size": "pnpm -r --filter './packages/*' --stream bundle:size",
+    "build:size-limit": "pnpm -r --filter './packages/*' --stream build:size-limit",
+    "build:size-limit-json": "pnpm -r --filter './packages/*' --stream build:size-limit-json",
     "release": "pnpm -r --filter !@antv/s2-shared --filter !@antv/s2-site --workspace-concurrency=1 exec npx --no-install semantic-release",
     "release:preview": "pnpm release --dry-run --no-ci",
     "release:bump-version": "node ./scripts/bump-version.js",
@@ -159,6 +160,7 @@
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "^7.0.5",
     "semver": "^7.5.4",
+    "size-limit": "^11.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^34.0.0",
@@ -166,8 +168,7 @@
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
     "vite-plugin-imp": "^2.4.0",
-    "vue-jest": "^5.0.0-alpha.10",
-    "size-limit": "^11.0.0"
+    "vue-jest": "^5.0.0-alpha.10"
   },
   "license": "MIT",
   "repository": {
@@ -176,5 +177,10 @@
   },
   "tnpm": {
     "mode": "pnpm"
+  },
+  "dependencies": {
+    "@size-limit/esbuild": "^11.0.2",
+    "@size-limit/esbuild-why": "^11.0.2",
+    "@size-limit/file": "^11.0.2"
   }
 }
diff --git a/packages/s2-core/package.json b/packages/s2-core/package.json
index 2256667180..ef04c6d931 100644
--- a/packages/s2-core/package.json
+++ b/packages/s2-core/package.json
@@ -47,7 +47,7 @@
     "build:analysis": "cross-env FORMAT=esm ANALYSIS=true rollup -c rollup.config.mjs",
     "build:dts": "run-s dts:*",
     "build:size-limit": "size-limit",
-    "build:size-limit-json": "pnpm build:size-limit --json",
+    "build:size-limit-json": "pnpm build:size-limit -- --json",
     "dts:build": "tsc -p tsconfig.declaration.json",
     "dts:extract": "cross-env LIB=s2-core node ../../scripts/dts.js",
     "watch": "rimraf esm && pnpm build:esm -w",
diff --git a/packages/s2-react/package.json b/packages/s2-react/package.json
index c14e701d09..9cad8c556b 100644
--- a/packages/s2-react/package.json
+++ b/packages/s2-react/package.json
@@ -45,7 +45,7 @@
     "build:analysis": "cross-env FORMAT=es ANALYSIS=true vite build",
     "build:dts": "run-s dts:*",
     "build:size-limit": "size-limit",
-    "build:size-limit-json": "pnpm build:size-limit --json",
+    "build:size-limit-json": "pnpm build:size-limit -- --json",
     "watch": "rimraf esm && pnpm build:esm -w",
     "dts:build": "tsc -p tsconfig.declaration.json",
     "dts:extract": "cross-env LIB=s2-react node ../../scripts/dts.js",
diff --git a/packages/s2-vue/package.json b/packages/s2-vue/package.json
index 67776c6ae3..54699e9303 100644
--- a/packages/s2-vue/package.json
+++ b/packages/s2-vue/package.json
@@ -46,7 +46,7 @@
     "build:analysis": "cross-env FORMAT=es ANALYSIS=true vite build",
     "build:dts": "run-s dts:*",
     "build:size-limit": "size-limit",
-    "build:size-limit-json": "pnpm build:size-limit --json",
+    "build:size-limit-json": "pnpm build:size-limit -- --json",
     "dts:build": "vue-tsc -p tsconfig.declaration.json",
     "dts:extract": "cross-env LIB=s2-vue node ../../scripts/dts.js",
     "test": "jest --passWithNoTests",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 908e9b1b18..2b3e638cc6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,16 @@ settings:
 importers:
 
   .:
+    dependencies:
+      '@size-limit/esbuild':
+        specifier: ^11.0.2
+        version: 11.0.2(size-limit@11.0.2)
+      '@size-limit/esbuild-why':
+        specifier: ^11.0.2
+        version: 11.0.2(size-limit@11.0.2)
+      '@size-limit/file':
+        specifier: ^11.0.2
+        version: 11.0.2(size-limit@11.0.2)
     devDependencies:
       '@babel/core':
         specifier: ^7.23.2
@@ -2134,6 +2144,15 @@ packages:
   /@emotion/unitless@0.7.5:
     resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
 
+  /@esbuild/aix-ppc64@0.19.12:
+    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/android-arm64@0.17.19:
     resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
     engines: {node: '>=12'}
@@ -2151,6 +2170,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/android-arm64@0.19.12:
+    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/android-arm@0.17.19:
     resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
     engines: {node: '>=12'}
@@ -2168,6 +2196,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/android-arm@0.19.12:
+    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/android-x64@0.17.19:
     resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
     engines: {node: '>=12'}
@@ -2185,6 +2222,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/android-x64@0.19.12:
+    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/darwin-arm64@0.17.19:
     resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
     engines: {node: '>=12'}
@@ -2202,6 +2248,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/darwin-arm64@0.19.12:
+    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/darwin-x64@0.17.19:
     resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
     engines: {node: '>=12'}
@@ -2219,6 +2274,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/darwin-x64@0.19.12:
+    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/freebsd-arm64@0.17.19:
     resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
     engines: {node: '>=12'}
@@ -2236,6 +2300,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/freebsd-arm64@0.19.12:
+    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/freebsd-x64@0.17.19:
     resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
     engines: {node: '>=12'}
@@ -2253,6 +2326,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/freebsd-x64@0.19.12:
+    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-arm64@0.17.19:
     resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
     engines: {node: '>=12'}
@@ -2270,6 +2352,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-arm64@0.19.12:
+    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-arm@0.17.19:
     resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
     engines: {node: '>=12'}
@@ -2287,6 +2378,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-arm@0.19.12:
+    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-ia32@0.17.19:
     resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
     engines: {node: '>=12'}
@@ -2304,6 +2404,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-ia32@0.19.12:
+    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-loong64@0.14.54:
     resolution: {integrity: sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==}
     engines: {node: '>=12'}
@@ -2330,6 +2439,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-loong64@0.19.12:
+    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-mips64el@0.17.19:
     resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
     engines: {node: '>=12'}
@@ -2347,6 +2465,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-mips64el@0.19.12:
+    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-ppc64@0.17.19:
     resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
     engines: {node: '>=12'}
@@ -2364,6 +2491,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-ppc64@0.19.12:
+    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-riscv64@0.17.19:
     resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
     engines: {node: '>=12'}
@@ -2381,6 +2517,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-riscv64@0.19.12:
+    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-s390x@0.17.19:
     resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
     engines: {node: '>=12'}
@@ -2398,6 +2543,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-s390x@0.19.12:
+    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-x64@0.17.19:
     resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
     engines: {node: '>=12'}
@@ -2415,6 +2569,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-x64@0.19.12:
+    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/netbsd-x64@0.17.19:
     resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
     engines: {node: '>=12'}
@@ -2432,6 +2595,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/netbsd-x64@0.19.12:
+    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/openbsd-x64@0.17.19:
     resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
     engines: {node: '>=12'}
@@ -2449,6 +2621,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/openbsd-x64@0.19.12:
+    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/sunos-x64@0.17.19:
     resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
     engines: {node: '>=12'}
@@ -2466,6 +2647,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/sunos-x64@0.19.12:
+    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/win32-arm64@0.17.19:
     resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
     engines: {node: '>=12'}
@@ -2483,6 +2673,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/win32-arm64@0.19.12:
+    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/win32-ia32@0.17.19:
     resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
     engines: {node: '>=12'}
@@ -2500,6 +2699,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/win32-ia32@0.19.12:
+    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/win32-x64@0.17.19:
     resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
     engines: {node: '>=12'}
@@ -2517,6 +2725,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/win32-x64@0.19.12:
+    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@eslint-community/eslint-utils@4.4.0(eslint@8.52.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4051,7 +4268,6 @@ packages:
   /@sindresorhus/merge-streams@1.0.0:
     resolution: {integrity: sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw==}
     engines: {node: '>=18'}
-    dev: true
 
   /@sinonjs/commons@1.8.6:
     resolution: {integrity: sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==}
@@ -4063,6 +4279,37 @@ packages:
     dependencies:
       '@sinonjs/commons': 1.8.6
 
+  /@size-limit/esbuild-why@11.0.2(size-limit@11.0.2):
+    resolution: {integrity: sha512-pYm1z5F4XXhg609qnh/VWe52o0T5Z3YjIQlZ9lgxchTYXUskVnRUDqRLKXC3NHuEqHdMtg13Du3rpaGvXMTyuw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      size-limit: 11.0.2
+    dependencies:
+      esbuild-visualizer: 0.6.0
+      open: 10.0.3
+      size-limit: 11.0.2
+    dev: false
+
+  /@size-limit/esbuild@11.0.2(size-limit@11.0.2):
+    resolution: {integrity: sha512-67p+y+wkMBJJegLZUp1X3v1YEvgGSbbAukFbHtxJ1c/DTj/ApiHvtgMzvA5ij+A5UOay+jSU4bXetpNJlUK3Ow==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      size-limit: 11.0.2
+    dependencies:
+      esbuild: 0.19.12
+      nanoid: 5.0.5
+      size-limit: 11.0.2
+    dev: false
+
+  /@size-limit/file@11.0.2(size-limit@11.0.2):
+    resolution: {integrity: sha512-874lrMtWYRL+xb/6xzejjwD+krfHTOo+2uFGpZfJScvuNv91Ni2O7k0o09zC70VzCYBGkXquV92ln/H+/ognGg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      size-limit: 11.0.2
+    dependencies:
+      size-limit: 11.0.2
+    dev: false
+
   /@sketch-hq/sketch-file-format-ts@6.5.0:
     resolution: {integrity: sha512-shaGl4ttFDpHjYBoMaZpciOtsi/lKvJ3VfcBYk6+PjjbFs6H5GxPAyhbiSqy3Vmx30aos284pd88QzD3rE6iag==}
     dev: false
@@ -7434,6 +7681,13 @@ packages:
     dependencies:
       run-applescript: 5.0.0
 
+  /bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+    dependencies:
+      run-applescript: 7.0.0
+    dev: false
+
   /bundlesize@0.18.1:
     resolution: {integrity: sha512-NAsKBH6BeVmDopoa4tod0m5/koM7iLY3saKyGn7wyAravBYmKNUpDJba4zyVhwRm5Dw9WXv8FIO0N//tCkx68Q==}
     hasBin: true
@@ -7455,7 +7709,6 @@ packages:
   /bytes-iec@3.1.1:
     resolution: {integrity: sha512-fey6+4jDK7TFtFg/klGSvNKJctyU7n2aQdnM+CO0ruLPbqqMOM8Tio0Pc+deqUeVKX1tL5DQep1zQ7+37aTAsA==}
     engines: {node: '>= 0.8'}
-    dev: true
 
   /bytes@3.1.2:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
@@ -9034,6 +9287,11 @@ packages:
       bplist-parser: 0.2.0
       untildify: 4.0.0
 
+  /default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
+    dev: false
+
   /default-browser@4.0.0:
     resolution: {integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==}
     engines: {node: '>=14.16'}
@@ -9043,6 +9301,14 @@ packages:
       execa: 7.2.0
       titleize: 3.0.0
 
+  /default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
+    engines: {node: '>=18'}
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.0
+    dev: false
+
   /defaults@1.0.4:
     resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
     dependencies:
@@ -10028,6 +10294,16 @@ packages:
     dev: true
     optional: true
 
+  /esbuild-visualizer@0.6.0:
+    resolution: {integrity: sha512-oNK3JAhC7+re93VTtUdWJKTDVnA2qXPAjCAoaw9OxEFUXztszw3kcaK46u1U790T8FdUBAWv6F9Xt59P8nJCVA==}
+    engines: {node: '>=18'}
+    hasBin: true
+    dependencies:
+      open: 8.4.0
+      picomatch: 2.3.1
+      yargs: 17.7.2
+    dev: false
+
   /esbuild-windows-32@0.14.54:
     resolution: {integrity: sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==}
     engines: {node: '>=12'}
@@ -10143,6 +10419,37 @@ packages:
       '@esbuild/win32-ia32': 0.18.20
       '@esbuild/win32-x64': 0.18.20
 
+  /esbuild@0.19.12:
+    resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.19.12
+      '@esbuild/android-arm': 0.19.12
+      '@esbuild/android-arm64': 0.19.12
+      '@esbuild/android-x64': 0.19.12
+      '@esbuild/darwin-arm64': 0.19.12
+      '@esbuild/darwin-x64': 0.19.12
+      '@esbuild/freebsd-arm64': 0.19.12
+      '@esbuild/freebsd-x64': 0.19.12
+      '@esbuild/linux-arm': 0.19.12
+      '@esbuild/linux-arm64': 0.19.12
+      '@esbuild/linux-ia32': 0.19.12
+      '@esbuild/linux-loong64': 0.19.12
+      '@esbuild/linux-mips64el': 0.19.12
+      '@esbuild/linux-ppc64': 0.19.12
+      '@esbuild/linux-riscv64': 0.19.12
+      '@esbuild/linux-s390x': 0.19.12
+      '@esbuild/linux-x64': 0.19.12
+      '@esbuild/netbsd-x64': 0.19.12
+      '@esbuild/openbsd-x64': 0.19.12
+      '@esbuild/sunos-x64': 0.19.12
+      '@esbuild/win32-arm64': 0.19.12
+      '@esbuild/win32-ia32': 0.19.12
+      '@esbuild/win32-x64': 0.19.12
+    dev: false
+
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
@@ -11849,7 +12156,6 @@ packages:
       path-type: 5.0.0
       slash: 5.1.0
       unicorn-magic: 0.1.0
-    dev: true
 
   /globby@6.1.0:
     resolution: {integrity: sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==}
@@ -13606,6 +13912,13 @@ packages:
     dependencies:
       is-docker: 2.2.1
 
+  /is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+    dependencies:
+      is-inside-container: 1.0.0
+    dev: false
+
   /isarray@0.0.1:
     resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
     dev: false
@@ -15157,7 +15470,6 @@ packages:
   /lilconfig@3.0.0:
     resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
     engines: {node: '>=14'}
-    dev: true
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
@@ -16882,6 +17194,12 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /nanoid@5.0.5:
+    resolution: {integrity: sha512-/Veqm+QKsyMY3kqi4faWplnY1u+VuKO3dD2binyPIybP31DRO29bPF+1mszgLnrR2KqSLceFLBNw0zmvDzN1QQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    dev: false
+
   /nanomatch@1.2.13:
     resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
     engines: {node: '>=0.10.0'}
@@ -16908,7 +17226,6 @@ packages:
     resolution: {integrity: sha512-yFvNYMig4AthKYfHFl1sLj7B2nkHL4lzdig4osvl9/LdGbXwrdFRoqBS98gsEsOakr0yH+r5NZ/1Y9gdVB8trA==}
     dependencies:
       picocolors: 1.0.0
-    dev: true
 
   /napi-build-utils@1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
@@ -17469,6 +17786,16 @@ packages:
     dependencies:
       mimic-fn: 4.0.0
 
+  /open@10.0.3:
+    resolution: {integrity: sha512-dtbI5oW7987hwC9qjJTyABldTaa19SuyJse1QboWv3b0qCcrrLNVDqBx1XgELAjh9QTVQaP/C5b1nhQebd1H2A==}
+    engines: {node: '>=18'}
+    dependencies:
+      default-browser: 5.2.1
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      is-wsl: 3.1.0
+    dev: false
+
   /open@6.4.0:
     resolution: {integrity: sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==}
     engines: {node: '>=8'}
@@ -17926,7 +18253,6 @@ packages:
   /path-type@5.0.0:
     resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==}
     engines: {node: '>=12'}
-    dev: true
 
   /pbkdf2@3.1.2:
     resolution: {integrity: sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==}
@@ -21753,6 +22079,11 @@ packages:
     dependencies:
       execa: 5.1.1
 
+  /run-applescript@7.0.0:
+    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
+    engines: {node: '>=18'}
+    dev: false
+
   /run-async@2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
     engines: {node: '>=0.12.0'}
@@ -22200,7 +22531,6 @@ packages:
       lilconfig: 3.0.0
       nanospinner: 1.1.0
       picocolors: 1.0.0
-    dev: true
 
   /size-sensor@1.0.1:
     resolution: {integrity: sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA==}
@@ -22222,7 +22552,6 @@ packages:
   /slash@5.1.0:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
-    dev: true
 
   /slice-ansi@4.0.0:
     resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
@@ -23809,7 +24138,6 @@ packages:
   /unicorn-magic@0.1.0:
     resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
     engines: {node: '>=18'}
-    dev: true
 
   /unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}

From aebb8230faa34b0d6213159a7ff21b6cedb0d212 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Mon, 5 Feb 2024 11:45:39 +0800
Subject: [PATCH 64/64] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E5=86=BB?=
 =?UTF-8?q?=E7=BB=93=E8=A1=8C=E5=A4=B4=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s2-site/docs/manual/migration-v2.zh.md | 28 +++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index 139fc21a2d..53d7968468 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -384,12 +384,12 @@ const s2DataConfig = {
 
 ```diff
 const s2Options = {
--   frozenRowHeader: true,
--   frozenFirstRow: true,
--   frozenRowCount: true;
--   frozenColCount: true;
--   frozenTrailingRowCount: true;
--   frozenTrailingColCount: true;
+-  frozenRowHeader: true,
+-  frozenFirstRow: true,
+-  frozenRowCount: true;
+-  frozenColCount: true;
+-  frozenTrailingRowCount: true;
+-  frozenTrailingColCount: true;
 
 +  frozen: {
 +    rowHeader: true,
@@ -402,6 +402,20 @@ const s2Options = {
 }
 ```
 
+#### 透视表冻结行头配置变更
+
+`rowHeader` 现在支持传递 `number` , 如果为数值则表示开启冻结行头，并自定义行头最大冻结宽度 (0 - 1)。
+
+```diff
+const s2Options = {
+  frozen: {
+-   rowHeader: true,
++   rowHeader: true,
++   rowHeader: 0.5,
+  }
+}
+```
+
 #### 高清适配配置调整
 
 ```diff
@@ -482,7 +496,7 @@ export interface LayoutResult {
 
 #### 渲染参数变更
 
-render 函数的参数从 boolean 扩展为 `boolean | object`, 当为 `boolean` 时，等价与 `{ reloadData: boolean }`
+render 函数的参数从 `boolean` 扩展为 `boolean | object`, 当为 `boolean` 时，等价与 `{ reloadData: boolean }`
 
 ```diff
 - s2.render(true)