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/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 e2902b21bc..8aea1aef71 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/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"/>
+    <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@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="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"/>
+  <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" 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" >
+    <img src="https://img.shields.io/github/issues-closed/antvis/S2" alt="issues closed"/>
+  <a/>
+  <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>
 
 </div>
@@ -68,9 +77,9 @@ demo components and expansion capabilities, it allows developers to use it quick
 ## 📦 Installation
 
 ```bash
-$ npm install @antv/s2 --save
-# yarn add @antv/s2 --save
-# pnpm install @antv/s2 --save
+$ npm install @antv/s2@next --save
+# yarn add @antv/s2@next
+# pnpm add @antv/s2@next
 ```
 
 ## 🔨 Getting Started
@@ -137,6 +146,28 @@ const s2DataConfig = {
       price: '1',
     },
   ],
+  meta: [
+    {
+      field: 'price',
+      name: '价格',
+    },
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+  ],
 };
 ```
 
@@ -154,30 +185,42 @@ 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
 
 | 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
+
+| [<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` 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
 
diff --git a/README.md b/README.md
index 1210bbc8bf..618677253c 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/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"/>
+    <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@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="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"/>
+  <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" 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" >
+    <img src="https://img.shields.io/github/issues-closed/antvis/S2" alt="issues closed"/>
+  <a/>
+  <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>
 
 </div>
@@ -64,9 +73,9 @@ S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数
 ## 📦 安装
 
 ```bash
-$ npm install @antv/s2 --save
-# yarn add @antv/s2 --save
-# pnpm install @antv/s2 --save
+$ npm install @antv/s2@next --save
+# yarn add @antv/s2@next
+# pnpm add @antv/s2@next
 ```
 
 ## 🔨 使用
@@ -133,6 +142,28 @@ const s2DataConfig = {
       price: '1',
     },
   ],
+  meta: [
+    {
+      field: 'price',
+      name: '价格',
+    },
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+  ]
 };
 ```
 
@@ -150,38 +181,48 @@ 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);
 
-s2.render();
+  await s2.render();
+}
+
+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)
 
 ### 📦 版本
 
 | 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)   |
 
-## 👤 作者
+### 🖥️ 兼容环境
 
-[**@AntV**](https://github.com/orgs/antvis/people)
+| [<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)
+
+## 🙋‍♂️ 问题反馈
 
-> S2 使用 pnpm 作为包管理器
+有任何问题请严格按照模版 [提交 Issue](https://github.com/antvis/S2/issues/new/choose), 在这之前强烈建议阅读 [《⚠️ 提 Issue 前必读》](https://github.com/antvis/S2/issues/1904)
+
+## ⌨️ 本地开发
 
 ```bash
 git clone git@github.com:antvis/S2.git
@@ -213,22 +254,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>
 </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/package.json b/package.json
index 0b20ab3a44..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",
@@ -60,7 +61,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": [
@@ -158,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",
@@ -165,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": {
@@ -175,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/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/README.en-US.md b/packages/s2-core/README.en-US.md
index 599cf62fb4..b1a3490577 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/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"/>
+    <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"/>
+  <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">
+    <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>
@@ -68,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
@@ -137,6 +146,28 @@ const s2DataConfig = {
       price: '1',
     },
   ],
+  meta: [
+    {
+      field: 'price',
+      name: '价格',
+    },
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+  ]
 };
 ```
 
@@ -154,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, s2DataCfg, s2Options)
+  const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-s2.render()
+  await s2.render();
+}
+
+bootstrap()
 ```
 
 ### 4. Preview
@@ -175,9 +210,9 @@ s2.render()
 
 | 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
 
@@ -225,9 +260,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 c04f9fec8c..6dabd81804 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/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"/>
+    <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@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="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"/>
+  <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">
+    <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,15 +67,15 @@ S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数
 1. 多维交叉分析： 告别单一分析维度，全面拥抱任意维度的自由组合分析。
 2. 高性能：能支持全量百万数据下 `<8s` 渲染，也能通过局部下钻来实现秒级渲染。
 3. 高扩展性：支持任意的自定义扩展（包括但不局限于布局，样式，交互，数据 hook 流等）。
-4. 开箱即用：提供不同分析场景下开箱即用的 `React` `Vue3` 版本表组件及配套分析组件，只需要简单的配置即可轻松实现复杂场景的表渲染。
+4. 开箱即用：提供不同分析场景下开箱即用的 `React`, `Vue3` 版本表组件及配套分析组件，只需要简单的配置即可轻松实现复杂场景的表渲染。
 5. 可交互：支持丰富的交互形式（单选、圈选、行选、列选、冻结行头、宽高拖拽，自定义交互等）
 
 ## 📦 安装
 
 ```bash
-$ npm install @antv/s2
+$ pnpm add @antv/s2
 # yarn add @antv/s2
-# pnpm add @antv/s2
+# npm install @antv/s2 --save
 ```
 
 ## 🔨 使用
@@ -133,6 +142,28 @@ const s2DataConfig = {
       price: '1',
     },
   ],
+  meta: [
+    {
+      field: 'price',
+      name: '价格',
+    },
+    {
+      field: 'province',
+      name: '省份',
+    },
+    {
+      field: 'city',
+      name: '城市',
+    },
+    {
+      field: 'type',
+      name: '类别',
+    },
+    {
+      field: 'sub_type',
+      name: '子类别',
+    },
+  ]
 };
 ```
 
@@ -150,38 +181,40 @@ 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. 结果
 
 ![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/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
+## 问题反馈
 
-[**@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,18 +246,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>
 </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/__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-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-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__/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 2d4ad61d5e..ec0d777158 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']],
     });
   }
@@ -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),
 };
 
@@ -47,6 +49,7 @@ describe('Table Sheet Custom Multiple Values Tests', () => {
         },
       },
     });
+
     await s2.render();
 
     const mapTheme = (cell: S2CellType) => {
@@ -56,11 +59,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__/bugs/issue-446-spec.ts b/packages/s2-core/__tests__/bugs/issue-446-spec.ts
index 5d8f283250..a3c838222b 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';
@@ -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__/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..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,
@@ -194,14 +206,18 @@ Array [
     "seriesNumberWidth": 0,
     "spreadsheet": Anything,
     "value": "province/city/数值",
-    "width": 145.36,
+    "width": 146.36,
     "x": 0,
     "y": 0,
   },
 ]
 `;
 
-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,
@@ -261,14 +277,18 @@ Array [
     "seriesNumberWidth": 80,
     "spreadsheet": Anything,
     "value": "province/city/数值",
-    "width": 145.36,
+    "width": 146.36,
     "x": 80,
     "y": 0,
   },
 ]
 `;
 
-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/__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/__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__/spread-sheet-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap
new file mode 100644
index 0000000000..919cc5169c
--- /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": 20,
+      "minCellWidth": 20,
+      "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 81c158e752..01e1e4b6d0 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 {
@@ -429,8 +402,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -440,12 +411,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 +474,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 +485,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 +495,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#2C60D4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
@@ -581,12 +540,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 +604,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 +624,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 +658,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 +670,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 +782,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -856,12 +794,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 +906,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -998,8 +930,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -1009,12 +939,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 +1002,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 +1013,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 +1023,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#4b91ff",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
@@ -1150,12 +1068,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 +1132,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 +1152,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 +1186,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 +1198,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 +1310,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -1425,12 +1322,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 +1434,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -1567,8 +1458,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -1578,12 +1467,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 +1530,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 +1541,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 +1551,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
@@ -1719,12 +1596,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 +1660,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 +1680,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 +1714,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 +1726,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 +1838,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -1994,12 +1850,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 +1962,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -2136,8 +1986,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -2147,12 +1995,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 +2058,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 +2069,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 +2079,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#565C64",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
@@ -2288,12 +2124,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 +2188,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 +2208,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 +2242,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 +2254,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 +2366,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -2563,12 +2378,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 +2490,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -2705,8 +2514,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -2716,12 +2523,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 +2586,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 +2597,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 +2607,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "scrollBar": Object {
@@ -2857,12 +2652,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 +2716,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 +2736,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 +2770,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 +2782,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 +2894,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "mergedCell": Object {
@@ -3132,12 +2906,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 +3018,9 @@ Object {
       "fontSize": 12,
       "fontWeight": "normal",
       "linkTextFill": "#326EF4",
-      "maxLines": 1,
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
-      "textOverflow": "ellipsis",
-      "wordWrap": true,
     },
   },
   "prepareSelectMask": Object {
@@ -3274,8 +3042,6 @@ Object {
         "backgroundOpacity": 1,
       },
     },
-    "minCellHeight": 40,
-    "minCellWidth": 42,
     "size": 3,
   },
   "rowCell": Object {
@@ -3285,12 +3051,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 +3114,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 +3125,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 +3135,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/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-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
new file mode 100644
index 0000000000..9b0775bc2b
--- /dev/null
+++ b/packages/s2-core/__tests__/spreadsheet/custom-facet-spec.ts
@@ -0,0 +1,75 @@
+/* eslint-disable max-classes-per-file */
+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 s2 = createPivotSheet({
+      layoutCellMeta() {
+        getCellMeta();
+
+        return {} as ViewMeta;
+      },
+    });
+
+    await s2.render();
+
+    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 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,
+    ]);
+  });
+
+  test('should render custom table facet', async () => {
+    // @ts-ignore
+    class CustomTableFacet extends TableFacet {
+      calculateColLeafNodesWidth() {
+        return 200;
+      }
+    }
+
+    const s2 = createTableSheet({
+      facet: (spreadsheet) => new CustomTableFacet(spreadsheet),
+    });
+
+    await s2.render();
+
+    expect(s2.facet.getColLeafNodes().map((node) => node.width)).toEqual([200]);
+  });
+});
diff --git a/packages/s2-core/__tests__/spreadsheet/custom-facet.ts b/packages/s2-core/__tests__/spreadsheet/custom-facet.ts
deleted file mode 100644
index 312daad105..0000000000
--- a/packages/s2-core/__tests__/spreadsheet/custom-facet.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/* eslint-disable max-classes-per-file */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { createPivotSheet, createTableSheet } from 'tests/util/helpers';
-
-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,
-    });
-
-    await s2.render();
-
-    expect(s2.facet.getCellMeta(0, 0)).toBeNull();
-    expect(getCellMeta).toHaveBeenCalledTimes(1);
-  });
-
-  test('should render custom table facet for custom cell meta', async () => {
-    const getCellMeta = jest.fn();
-
-    const layoutCellMeta = () => {
-      getCellMeta();
-
-      return null;
-    };
-
-    const s2 = createTableSheet({
-      layoutCellMeta,
-    });
-
-    await s2.render();
-
-    expect(s2.facet.getCellMeta(0, 0)).toBeNull();
-    expect(getCellMeta).toHaveBeenCalledTimes(1);
-  });
-});
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 a579f830b5..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,8 +52,10 @@ const dataCfg: S2DataConfig = {
 const options: S2Options = {
   width: 800,
   height: 600,
-  hdAdapter: false,
-  showSeriesNumber: true,
+  hd: false,
+  seriesNumber: {
+    enable: true,
+  },
   placeholder: '',
   style: {
     layoutWidthType: LayoutWidthType.Compact,
@@ -66,7 +68,9 @@ const options: S2Options = {
     pageSize: 100,
   },
   interaction: {
-    enableCopy: true,
+    copy: {
+      enable: true,
+    },
     hoverHighlight: false,
     resize: true,
   },
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..27b41720bc 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,
+      },
     });
   };
 
@@ -102,7 +100,9 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     const s2Options: S2Options = {
       width: 300,
       height: 400,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     };
 
     beforeEach(async () => {
@@ -115,7 +115,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     });
 
     afterEach(() => {
-      // s2.destroy();
+      s2.destroy();
     });
 
     test('should default render one line text', () => {
@@ -126,7 +126,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 +136,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 +147,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 +170,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 +214,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
         },
       });
 
-      updateTheme(2);
+      updateStyle(2);
       await s2.render(false);
 
       getCells().forEach((cells) => {
@@ -254,7 +240,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
         },
       });
 
-      updateTheme(2);
+      updateStyle(2);
       await s2.render(false);
 
       [
@@ -282,7 +268,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 +297,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
         },
       });
 
-      updateTheme(1);
+      updateStyle(1);
       await s2.render(false);
 
       getCells().forEach((cells) => {
@@ -325,7 +311,9 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     const s2Options: S2Options = {
       width: 600,
       height: 400,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+      },
     };
 
     beforeEach(async () => {
@@ -349,7 +337,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 +347,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 +369,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
         },
       });
 
-      updateTheme(2);
+      updateStyle(2);
       await s2.render(false);
 
       getCells().forEach((cells) => {
@@ -401,7 +389,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
         },
       });
 
-      updateTheme(2);
+      updateStyle(2);
       await s2.render(false);
 
       [s2.facet.getColLeafCells()].forEach((cells) => {
@@ -418,7 +406,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__/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-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/spread-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts
index 955b611046..9e0925ee9f 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,8 +541,28 @@ describe('SpreadSheet Tests', () => {
         height: s2Options.height,
         hierarchyType: s2Options.hierarchyType,
         width: 300,
-        hdAdapter: false,
+        hd: false,
+      });
+    });
+
+    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', () => {
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 19c04800dc..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,
@@ -80,7 +82,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__/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 6ce23c12d3..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,9 +599,11 @@ describe('Data Cell Tests', () => {
   describe('Data Cell Interaction', () => {
     beforeEach(async () => {
       s2 = createPivotSheet({
-        showSeriesNumber: true,
+        seriesNumber: {
+          enable: true,
+        },
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
         },
       });
       await s2.render();
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/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..c731ef6981
--- /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": 40,
+  "widthByField": Object {
+    "testField": 40,
+  },
+  "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/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/interaction/row-column-resize-spec.ts b/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts
index 8953d35524..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: {
@@ -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', () => {
@@ -778,7 +724,7 @@ describe('Interaction Row Column Resize Tests', () => {
     expect(disable).toHaveBeenCalledWith({
       ...resizeInfo,
       resizedWidth: 0,
-      resizedHeight: 40,
+      resizedHeight: 20,
     });
 
     emitResizeEvent(
@@ -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/sheet-type/pivot-sheet-spec.ts b/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
index 1a62ea9e86..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
@@ -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 },
     );
@@ -745,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);
 
@@ -754,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/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
new file mode 100644
index 0000000000..5185df1f1b
--- /dev/null
+++ b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
@@ -0,0 +1,117 @@
+// 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,
+  },
+  "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": 20,
+      "minCellWidth": 20,
+      "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,
+}
+`;
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/__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..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,
@@ -128,9 +130,13 @@ 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,
+        },
+      },
+      seriesNumber: {
+        enable: false,
       },
-      showSeriesNumber: false,
     });
     await s2.render();
 
@@ -157,10 +163,11 @@ describe('List Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
+        },
+        seriesNumber: {
+          enable: true,
         },
-        showSeriesNumber: true,
       }),
     );
 
@@ -188,10 +195,11 @@ describe('List Table Core Data Process', () => {
 
     s2.setOptions({
       interaction: {
-        enableCopy: true,
-        copyWithFormat: true,
+        copy: { enable: true, withFormat: true },
+      },
+      seriesNumber: {
+        enable: false,
       },
-      showSeriesNumber: false,
     });
 
     await s2.render();
@@ -221,8 +229,7 @@ describe('List Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
         },
       }),
     );
@@ -259,7 +266,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,9 +346,11 @@ describe('List Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
+        },
+        seriesNumber: {
+          enable: true,
         },
-        showSeriesNumber: true,
       }),
     );
 
@@ -374,9 +385,11 @@ describe('List Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
+        },
+        seriesNumber: {
+          enable: true,
         },
-        showSeriesNumber: true,
       }),
     );
 
@@ -395,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,
@@ -418,14 +433,18 @@ describe('List Table Core Data Process', () => {
 
   it('should support custom copy matrix transformer', async () => {
     s2.setOptions({
-      showSeriesNumber: false,
+      seriesNumber: {
+        enable: 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 +487,7 @@ describe('Pivot Table Core Data Process', () => {
     return assembleOptions({
       hierarchyType: 'grid',
       interaction: {
-        enableCopy: true,
+        copy: { enable: true },
       },
       totals: TOTALS_OPTIONS,
     });
@@ -520,8 +539,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 +581,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 +663,7 @@ describe('Pivot Table Core Data Process', () => {
       assembleOptions({
         hierarchyType: 'grid',
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
         },
       }),
     );
@@ -685,10 +701,11 @@ describe('Pivot Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
+        },
+        seriesNumber: {
+          enable: false,
         },
-        showSeriesNumber: false,
       }),
     );
 
@@ -705,7 +722,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 +757,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 +810,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 +838,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 +876,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 +929,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 +951,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,10 +990,11 @@ describe('Pivot Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
+        },
+        seriesNumber: {
+          enable: false,
         },
-        showSeriesNumber: false,
       }),
     );
 
@@ -1001,10 +1030,11 @@ describe('Pivot Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
+        },
+        seriesNumber: {
+          enable: false,
         },
-        showSeriesNumber: false,
       }),
     );
 
@@ -1034,10 +1064,11 @@ describe('Pivot Table Core Data Process', () => {
       }),
       assembleOptions({
         interaction: {
-          enableCopy: true,
-          copyWithFormat: true,
+          copy: { enable: true, withFormat: true },
+        },
+        seriesNumber: {
+          enable: false,
         },
-        showSeriesNumber: false,
       }),
     );
 
@@ -1088,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 copyWithHeader 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({
@@ -1098,10 +1129,11 @@ describe('Pivot Table Core Data Process', () => {
         },
       },
       interaction: {
-        enableCopy: true,
-        copyWithHeader: true,
+        copy: { enable: true, withHeader: true },
+      },
+      seriesNumber: {
+        enable: true,
       },
-      showSeriesNumber: true,
     });
     await sheet.render();
     const cells = sheet.facet.getDataCells();
@@ -1132,12 +1164,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 +1214,7 @@ describe('Tree Table Core Data Process', () => {
       assembleOptions({
         hierarchyType: 'tree',
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
         },
         totals: TOTALS_OPTIONS,
       }),
@@ -1283,7 +1317,10 @@ describe('Tree Table Core Data Process', () => {
     } as S2DataConfig);
     s2.setOptions({
       interaction: {
-        copyWithFormat: true,
+        copy: {
+          enable: true,
+          withFormat: true,
+        },
       },
     });
     await s2.render();
@@ -1308,8 +1345,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 +1373,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 +1394,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 +1436,7 @@ describe('Pivot Table getBrushHeaderCopyable', () => {
   const options = assembleOptions({
     hierarchyType: 'grid',
     interaction: {
-      enableCopy: true,
+      copy: { enable: true },
       brushSelection: true,
     },
   });
@@ -1671,7 +1713,7 @@ describe('Pivot Table getBrushHeaderCopyable', () => {
       assembleOptions({
         hierarchyType: 'grid',
         interaction: {
-          enableCopy: true,
+          copy: { enable: true },
           brushSelection: true,
         },
         totals: TOTALS_OPTIONS,
@@ -1712,7 +1754,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..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
@@ -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(`
@@ -443,8 +440,15 @@ describe('PivotSheet Export Test', () => {
       }),
       assembleOptions({
         hierarchyType: 'grid',
-        showSeriesNumber: true,
-        interaction: { enableCopy: true, copyWithHeader: true },
+        seriesNumber: {
+          enable: true,
+        },
+        interaction: {
+          copy: {
+            enable: true,
+            withHeader: true,
+          },
+        },
       }),
     );
 
@@ -484,7 +488,7 @@ describe('PivotSheet Export Test', () => {
       }),
       assembleOptions({
         hierarchyType: 'grid',
-        interaction: { enableCopy: true, copyWithHeader: true },
+        interaction: { copy: { enable: true, withHeader: true } },
       }),
     );
 
@@ -542,7 +546,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..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,
+        },
       }),
     );
 
@@ -29,7 +31,7 @@ describe('TableSheet Export Test', () => {
       sheetInstance: s2,
       split: '\t',
       formatOptions: {
-        isFormatHeader: true,
+        formatHeader: true,
       },
     });
 
@@ -57,7 +59,9 @@ describe('TableSheet Export Test', () => {
         },
       }),
       assembleOptions({
-        showSeriesNumber: false,
+        seriesNumber: {
+          enable: false,
+        },
       }),
     );
 
@@ -394,7 +398,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 +431,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..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,
+        },
       }),
     );
 
@@ -65,7 +67,7 @@ describe('TableSheet Export Test', () => {
       sheetInstance: s2,
       split: NewTab,
       formatOptions: {
-        isFormatHeader: true,
+        formatHeader: true,
       },
     });
 
@@ -75,7 +77,7 @@ describe('TableSheet Export Test', () => {
       sheetInstance: s2,
       split: NewTab,
       formatOptions: {
-        isFormatHeader: true,
+        formatHeader: true,
       },
       isAsyncExport: 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/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/__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/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/__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/__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/package.json b/packages/s2-core/package.json
index 2c47ca6b39..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": "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-core/rollup.config.mjs b/packages/s2-core/rollup.config.mjs
index 1534a61c85..88eb0afb3c 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/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
index 435531a4cc..0d8b2696c2 100644
--- a/packages/s2-core/src/cell/base-cell.ts
+++ b/packages/s2-core/src/cell/base-cell.ts
@@ -1,5 +1,6 @@
 import type {
   DisplayObject,
+  Image,
   Line,
   PointLike,
   Polygon,
@@ -32,6 +33,7 @@ import type { GuiIcon } from '../common/icons/gui-icon';
 import {
   CellBorderPosition,
   CellClipBox,
+  type CellTextWordWrapStyle,
   type Condition,
   type ConditionMappingResult,
   type Conditions,
@@ -90,7 +92,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;
@@ -148,13 +150,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;
@@ -206,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,
+    };
+  }
+
   /**
    * 获取实际渲染的文本 (含省略号)
    */
@@ -221,7 +234,7 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
   }
 
   /**
-   * 实际渲染的文本宽度, 如果是多行文本, 取每一行文本高度的总和)
+   * 实际渲染的文本宽度, 如果是多行文本, 取每一行文本高度的总和
    * @alias getMultiLineActualTextHeight
    */
   public getActualTextHeight(): number {
@@ -271,6 +284,9 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     return this.getTextLineBoundingRects().length > 1;
   }
 
+  /**
+   * 获取单元格空值占位符
+   */
   public getEmptyPlaceholder() {
     const {
       options: { placeholder },
@@ -286,6 +302,9 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     return this.textShape?.getLineBoundingRects() || [];
   }
 
+  /**
+   * 获取单元格展示的数值
+   */
   public getFieldValue() {
     return this.getFormattedFieldValue().formattedValue;
   }
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/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts
index a81850c762..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() {
@@ -472,7 +476,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 +490,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 +501,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..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() {
@@ -474,13 +478,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/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/cell/series-number-cell.ts b/packages/s2-core/src/cell/series-number-cell.ts
index 1235470b25..79b20b51a8 100644
--- a/packages/s2-core/src/cell/series-number-cell.ts
+++ b/packages/s2-core/src/cell/series-number-cell.ts
@@ -1,15 +1,9 @@
 import type { PointLike } from '@antv/g';
-import type {
-  TextTheme,
-  FormatResult,
-  Condition,
-  ConditionMappingResult,
-  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';
@@ -55,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 {
@@ -114,11 +116,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/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/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/constant/options.ts b/packages/s2-core/src/common/constant/options.ts
index 2dc5fa57b3..9cc6b96ffc 100644
--- a/packages/s2-core/src/common/constant/options.ts
+++ b/packages/s2-core/src/common/constant/options.ts
@@ -1,9 +1,13 @@
-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,
 } 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 +18,7 @@ export const MIN_DEVICE_PIXEL_RATIO = 1;
  * 布局类型：
  * adaptive: 行列等宽，均分整个 canvas 画布宽度
  * colAdaptive：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度
- * compact：行列紧凑布局，指标维度少的时候无法布满整个画布
+ * compact：行列紧凑布局，指标维度少的时候无法布满整个画布，列头宽度为实际内容宽度（取当前列最大值，采样每一列前 50 条数据
  */
 export enum LayoutWidthType {
   Adaptive = 'adaptive',
@@ -26,19 +30,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,
   },
@@ -64,6 +79,11 @@ export const DEFAULT_OPTIONS: S2Options = {
     },
   },
   interaction: {
+    copy: {
+      enable: true,
+      withFormat: true,
+      withHeader: false,
+    },
     linkFields: [],
     hiddenColumnFields: [],
     selectedCellsSpotlight: false,
@@ -76,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,
@@ -89,12 +109,16 @@ 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,
     overscrollBehavior: 'auto',
   },
-  showSeriesNumber: false,
+  seriesNumber: {
+    enable: false,
+  },
   customSVGIcons: [],
   showDefaultHeaderActionIcon: false,
   headerActionIcons: [],
@@ -106,7 +130,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/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/basic.ts b/packages/s2-core/src/common/interface/basic.ts
index 5480d9511b..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;
 
   /** 排序方式 */
@@ -337,7 +340,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/packages/s2-core/src/common/interface/condition.ts b/packages/s2-core/src/common/interface/condition.ts
index a93aea754b..4b665f336e 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 | string;
+} & 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/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/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/interaction.ts b/packages/s2-core/src/common/interface/interaction.ts
index c2024be3d6..256ca688e5 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;
 
@@ -171,26 +176,34 @@ export interface InteractionOptions {
   hoverFocus?: HoverFocusOptions | boolean;
 
   /**
-   * 开启复制 Command/Ctrl + C
-   */
-  enableCopy?: boolean;
-
-  /**
-   * 复制带格式的数据
-   */
-  copyWithFormat?: boolean;
-
-  /**
-   * 复制包含其对应行列头的数据
+   * 单元格文本复制
+   * @see https://s2.antv.antgroup.com/examples/interaction/basic/#copy-export
    */
-  copyWithHeader?: boolean;
+  copy?: {
+    /**
+     * 开启复制 Command/Ctrl + C (默认开启)
+     */
+    enable?: boolean;
+
+    /**
+     * 复制带格式的数据 (默认开启)
+     */
+    withFormat?: boolean;
+
+    /**
+     * 复制包含其对应行列头的数据
+     */
+    withHeader?: boolean;
+
+    /**
+     * 复制时支持自定义 (transformer) 数据导出格式化方法
+     */
+    customTransformer?: (transformer: Transformer) => Partial<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 +211,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 https://s2.antv.antgroup.com/examples/interaction/advanced/#scroll-speed-ratio
    */
   scrollSpeedRatio?: ScrollSpeedRatio;
 
   /**
    * 宽高调整
+   * @see https://s2.antv.antgroup.com/manual/advanced/interaction/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/common/interface/resize.ts b/packages/s2-core/src/common/interface/resize.ts
index f51ff2fe03..ee50a6b14e 100644
--- a/packages/s2-core/src/common/interface/resize.ts
+++ b/packages/s2-core/src/common/interface/resize.ts
@@ -92,8 +92,16 @@ export interface ResizeInteractionOptions {
 
   /** 列高调整时，影响当前列还是全部列 */
   colResizeType?: ResizeType;
+
   /** 是否允许调整, 返回 false 时拖拽的宽高无效 */
   disable?: (resizeInfo: ResizeInfo) => boolean;
+
   /** 是否显示热区 */
   visible?: (cell: S2CellType) => boolean;
+
+  /** 单元格可拖拽最小宽度 */
+  minCellWidth?: number;
+
+  /** 单元格可拖拽最小高度 */
+  minCellHeight?: number;
 }
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 53c2e92a72..8d8a603bc0 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;
 
@@ -76,18 +76,25 @@ export interface S2BasicOptions<
 
   /**
    * 分页配置
+   * @see https://s2.antv.antgroup.com/manual/advanced/analysis/pagination
    */
   pagination?: P;
 
   /**
-   * 自定义序号列文本, 默认为 "序号"
+   * 序号列配置
+   * @see https://s2.antv.antgroup.com/manual/basic/sheet-type/pivot-mode#%E5%BA%8F%E5%8F%B7
    */
-  seriesNumberText?: string;
+  seriesNumber?: {
+    /**
+     * 是否显示序号
+     */
+    enable?: boolean;
 
-  /**
-   * 是否显示序号
-   */
-  showSeriesNumber?: boolean;
+    /**
+     * 自定义序号列文本, 默认为 "序号"
+     */
+    text?: string;
+  };
 
   /**
    * 是否显示表头默认操作图标
@@ -116,12 +123,17 @@ export interface S2BasicOptions<
    * 是否开启高清适配
    * @see https://s2.antv.antgroup.com/manual/advanced/hd-adapter
    */
-  hdAdapter?: boolean;
+  hd?: boolean;
 
   /**
    * 空值单元格占位符
+   * @see https://s2.antv.antgroup.com/zh/examples/custom/custom-cell/#data-cell-placeholder
    */
-  placeholder?: ((meta: Record<string, any>) => string) | string;
+  placeholder?:
+    | ((meta: Record<string, any>) => string | undefined | null)
+    | string
+    | undefined
+    | null;
 
   /**
    * 设备类型: pc / mobile
@@ -132,6 +144,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';
 
@@ -182,6 +195,7 @@ export interface S2BasicOptions<
 
   /**
    * 自定义合并单元格
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-cell/#custom-merged-cell
    */
   mergedCell?: MergedCellCallback;
 
@@ -206,35 +220,38 @@ 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/zh/examples/custom/custom-layout/#custom-data-position
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-layout/#custom-layout-cell-meta
    */
   layoutCellMeta?: LayoutCellMeta;
 
   /**
    * 自定义序号节点
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-cell/#series-number-cell
    */
   layoutSeriesNumberNodes?: LayoutSeriesNumberNodes;
 
   /** *********** 数据集 **************** */
   /**
    * 自定义数据集
+   * @see https://s2.antv.antgroup.com/examples/custom/custom-dataset/#custom-strategy-sheet-dataset
    */
   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/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/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..37e94b851f 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';
@@ -117,10 +117,7 @@ export interface TextTheme
       | 'fontWeight'
       | 'fill'
       | 'opacity'
-      | 'wordWrap'
-      | 'maxLines'
       | 'lineHeight'
-      | 'textOverflow'
       | 'fontStyle'
       | 'fontVariant'
     > {
@@ -204,12 +201,6 @@ export interface ResizeArea {
 
   /** 交互态 */
   interactionState?: InteractionState;
-
-  /** 单元格可拖拽最小宽度 */
-  minCellWidth?: number;
-
-  /** 单元格可拖拽最小高度 */
-  minCellHeight?: number;
 }
 
 export interface ScrollBarTheme {
diff --git a/packages/s2-core/src/common/interface/tooltip.ts b/packages/s2-core/src/common/interface/tooltip.ts
index 5d3ef1c20e..a13d672ab8 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/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/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/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/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 72e7d233e4..790693914d 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,10 +157,9 @@ export class TableDataSet extends BaseDataSet {
     return [];
   }
 
-  public getCellData({ query = {} }: GetCellMultiDataParams = {}):
-    | 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/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
index 82cf8be8b9..d2c29478b8 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,
@@ -485,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;
   }
@@ -1730,7 +1728,7 @@ export abstract class BaseFacet {
   }
 
   /**
-   * 获取表头节点 (角头,序号, 行头,列头) (含可视区域)
+   * 获取表头节点 (角头,序号,行头,列头) (含可视区域)
    * @example 获取全部: facet.getHeaderNodes()
    * @example 获取一组 facet.getHeaderNodes(['root[&]浙江省[&]宁波市', 'root[&]浙江省[&]杭州市'])
    */
@@ -1899,6 +1897,7 @@ export abstract class BaseFacet {
 
   /**
    * 获取行头叶子节点节点 (含非可视区域)
+   * @example 获取全部: facet.getRowLeafNodes()
    */
   public getRowLeafNodes(): Node[] {
     return this.layoutResult.rowLeafNodes || [];
@@ -2009,7 +2008,7 @@ export abstract class BaseFacet {
   }
 
   /**
-   * 获取角头单元格
+   * 获取角头单元格 (不含可视区域)
    */
   public getCornerCells(): CornerCell[] {
     return filter(
@@ -2019,14 +2018,14 @@ export abstract class BaseFacet {
   }
 
   /**
-   * 获取序号单元格
+   * 获取序号单元格 (不含可视区域)
    */
   public abstract getSeriesNumberCells():
     | SeriesNumberCell[]
     | TableSeriesNumberCell[];
 
   /**
-   * 获取表头单元格 (角头,行头,列头) (不含可视区域)
+   * 获取表头单元格 (序号,角头,行头,列头) (不含可视区域)
    * @example 获取全部: facet.getHeaderCells()
    * @example 获取一组 facet.getHeaderCells(['root[&]浙江省[&]宁波市', 'root[&]浙江省[&]杭州市'])
    */
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/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/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/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/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/packages/s2-core/src/facet/table-facet.ts b/packages/s2-core/src/facet/table-facet.ts
index 9393666d63..bd004f0132 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.seriesNumber?.enable && 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,31 +244,33 @@ 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[]) {
     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 -
         Frame.getVerticalBorderWidth(this.spreadsheet);
 
-      // TODO: 向下取整, 导致单元格未撑满 canvas, 在冻结情况下会有问题, 待冻结重构后解决
       return Math.max(
         dataCell?.width!,
         floor(canvasW / Math.max(1, colHeaderColSize)),
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/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/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-core/src/interaction/event-controller.ts b/packages/s2-core/src/interaction/event-controller.ts
index 83c6c34029..56e753b24f 100644
--- a/packages/s2-core/src/interaction/event-controller.ts
+++ b/packages/s2-core/src/interaction/event-controller.ts
@@ -114,15 +114,17 @@ 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
+    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/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-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 1d3929e21d..2561782baf 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();
     }
@@ -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/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/theme/index.ts b/packages/s2-core/src/theme/index.ts
index 84ce9d1088..3f8c1c279e 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,8 +336,6 @@ export const getTheme = (
         // 默认列头的数值字段和 dataCell 数值对齐
         textAlign: 'right',
         textBaseline: 'middle',
-        ...getHeaderCellTextOverflow(),
-        // maxLines: 1,
       },
       bolderText: {
         fontFamily: FONT_FAMILY,
@@ -386,7 +345,6 @@ export const getTheme = (
         opacity: 1,
         textAlign: 'center',
         textBaseline: 'middle',
-        ...getHeaderCellTextOverflow(),
       },
       text: {
         fontFamily: FONT_FAMILY,
@@ -396,7 +354,6 @@ export const getTheme = (
         opacity: 1,
         textAlign: 'center',
         textBaseline: 'middle',
-        ...getHeaderCellTextOverflow(),
       },
       cell: {
         // ----------- background color -----------
@@ -479,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/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/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,
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..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,19 +58,19 @@ 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();
         }
 
         const formatter = getFormatter(
           field,
-          this.config.isFormatData,
+          this.config.formatData,
           this.spreadsheet.dataSet,
         );
         const value = row[field];
@@ -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;
@@ -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,18 +141,18 @@ class TableDataCellCopy extends BaseDataCellCopy {
   }
 
   private getColMatrix(): string[] {
-    const { isFormatHeader } = this.config;
-    const { showSeriesNumber } = this.spreadsheet.options;
+    const { formatHeader } = this.config;
+    const { seriesNumber } = this.spreadsheet.options;
 
     // 明细表的表头，没有格式化
     return this.columnNodes.map((node) => {
       const field: string = node.field;
 
-      if (!isFormatHeader) {
+      if (!formatHeader) {
         return field;
       }
 
-      return SERIES_NUMBER_FIELD === field && showSeriesNumber
+      return SERIES_NUMBER_FIELD === field && seriesNumber?.enable
         ? getDefaultSeriesNumberText()
         : this.spreadsheet.dataSet.getFieldName(field);
     }) as string[];
@@ -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/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/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/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-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-core/src/utils/text.ts b/packages/s2-core/src/utils/text.ts
index bb0756e413..224c6682d7 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 填充, 实际渲染时统一转成 "-"
@@ -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,
@@ -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 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-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"]
diff --git a/packages/s2-react/README.md b/packages/s2-react/README.md
index 8881ab1bc7..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,23 +137,24 @@ const s2Options = {
 ### 3. 渲染
 
 ```html
-<div id="container"></div>
+<div id="container" />
 ```
 
 ```tsx
-import ReactDOM from 'react-dom'
+import React from 'React'
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container')
-);
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 ### 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-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/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 d92a210ab7..f85fd43578 100644
--- a/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx
@@ -59,10 +59,12 @@ function MainLayout() {
   const options: SheetComponentOptions = {
     width: 800,
     height: 600,
-    showSeriesNumber: true,
+    seriesNumber: {
+      enable: true,
+    },
     device: DeviceType.PC,
     interaction: {
-      enableCopy: true,
+      copy: { enable: true },
       linkFields: ['order_id', 'customer_name'],
     },
     style: {
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 ff719c9a78..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: {
@@ -139,7 +141,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__/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/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/__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/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-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/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/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/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-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 38bf9ddfb7..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,
@@ -192,7 +189,6 @@ export const s2ConditionsOptions: SheetComponentOptions['conditions'] = {
         return {
           icon: 'CellUp',
           fill: '#054',
-          size: 26,
         };
       },
     },
@@ -204,7 +200,6 @@ export const s2ConditionsOptions: SheetComponentOptions['conditions'] = {
           return {
             icon: 'CellUp',
             fill: '#FF4D4F',
-            size: 16,
           };
         }
       },
@@ -216,7 +211,6 @@ export const s2ConditionsOptions: SheetComponentOptions['conditions'] = {
         return {
           icon: 'CellUp',
           fill: '#FF4D4F',
-          size: 16,
         };
       },
     },
@@ -226,7 +220,6 @@ export const s2ConditionsOptions: SheetComponentOptions['conditions'] = {
         return {
           icon: 'CellUp',
           fill: '#FF4D4F',
-          size: 16,
         };
       },
     },
@@ -253,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('趋势图 icon 点击: ', 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('操作4点击:', info, cell);
           },
         },
       ],
@@ -315,7 +320,6 @@ export const s2Options: SheetComponentOptions = {
       // cursor: 'crosshair',
     };
   },
-  // showSeriesNumber: false,
   frozen: {
     rowHeader: true,
     // rowCount: 1,
@@ -325,11 +329,15 @@ export const s2Options: SheetComponentOptions = {
   },
   cornerText: '测试测试测试测试测试测试测试测试测试测试',
   interaction: {
-    enableCopy: true,
-    copyWithFormat: true,
-    copyWithHeader: true,
+    copy: {
+      enable: true,
+      withFormat: true,
+      withHeader: true,
+    },
     hoverAfterScroll: true,
-    // 防止 mac 触摸板横向滚动触发浏览器返回, 和移动端下拉刷新
+    selectedCellMove: true,
+    rangeSelection: true,
+    // 防止 mac 触控板横向滚动触发浏览器返回, 和移动端下拉刷新
     overscrollBehavior: 'none',
     brushSelection: {
       dataCell: true,
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
index 722ce26b66..41445b7cef 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);
@@ -640,10 +645,12 @@ function MainLayout() {
                                 <Switch
                                   checkedChildren="显示序号"
                                   unCheckedChildren="不显示序号"
-                                  checked={mergedOptions.showSeriesNumber}
+                                  checked={mergedOptions.seriesNumber?.enable}
                                   onChange={(checked) => {
                                     updateOptions({
-                                      showSeriesNumber: checked,
+                                      seriesNumber: {
+                                        enable: checked,
+                                      },
                                     });
                                   }}
                                 />
@@ -651,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="分页"
@@ -862,6 +871,7 @@ function MainLayout() {
                                     onChange={onAutoAdjustBoundaryChange}
                                     style={{ width: 230 }}
                                     size="small"
+                                    allowClear
                                   >
                                     <Select.Option value="container">
                                       container (表格区域)
@@ -957,6 +967,7 @@ function MainLayout() {
                                     onChange={onOverscrollBehaviorChange}
                                     style={{ width: 150 }}
                                     size="small"
+                                    allowClear
                                   >
                                     <Select.Option value="auto">
                                       auto
@@ -1125,6 +1136,7 @@ function MainLayout() {
                                     }
                                     placeholder="默认行头展开层级"
                                     size="small"
+                                    allowClear
                                     onChange={(level) => {
                                       updateOptions({
                                         style: {
@@ -1157,12 +1169,14 @@ function MainLayout() {
                                     checkedChildren="允许复制"
                                     unCheckedChildren="禁用复制"
                                     checked={
-                                      mergedOptions.interaction?.enableCopy
+                                      mergedOptions.interaction?.copy?.enable
                                     }
                                     onChange={(checked) => {
                                       updateOptions({
                                         interaction: {
-                                          enableCopy: checked,
+                                          copy: {
+                                            enable: checked,
+                                          },
                                         },
                                       });
                                     }}
@@ -1173,12 +1187,15 @@ function MainLayout() {
                                     checkedChildren="复制包含其对应行列头的数据"
                                     unCheckedChildren="复制不包含其对应行列头的数据"
                                     checked={
-                                      mergedOptions.interaction?.copyWithHeader
+                                      mergedOptions.interaction?.copy
+                                        ?.withHeader
                                     }
                                     onChange={(checked) => {
                                       updateOptions({
                                         interaction: {
-                                          copyWithHeader: checked,
+                                          copy: {
+                                            withHeader: checked,
+                                          },
                                         },
                                       });
                                     }}
@@ -1189,12 +1206,15 @@ function MainLayout() {
                                     checkedChildren="复制带格式后的数据"
                                     unCheckedChildren="复制未格式化的数据"
                                     checked={
-                                      mergedOptions.interaction?.copyWithFormat
+                                      mergedOptions.interaction?.copy
+                                        ?.withFormat
                                     }
                                     onChange={(checked) => {
                                       updateOptions({
                                         interaction: {
-                                          copyWithFormat: checked,
+                                          copy: {
+                                            withFormat: checked,
+                                          },
                                         },
                                       });
                                     }}
@@ -1209,24 +1229,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 +1239,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 +1272,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 +1305,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 +1322,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="自动重置交互样式开"
@@ -1427,16 +1518,19 @@ function MainLayout() {
                                 </span>
                               </Space>
                             ),
-                            switcherCfg: { open: true },
-                            exportCfg: { open: true },
-                            advancedSortCfg: {
+                            switcher: { open: true },
+                            export: { open: true },
+                            advancedSort: {
                               open: true,
                             },
                           }}
                           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/packages/s2-react/src/components/advanced-sort/index.tsx b/packages/s2-react/src/components/advanced-sort/index.tsx
index a0e63ceafb..6d931c17c0 100644
--- a/packages/s2-react/src/components/advanced-sort/index.tsx
+++ b/packages/s2-react/src/components/advanced-sort/index.tsx
@@ -52,12 +52,12 @@ export interface RuleValue {
   sortByMeasure?: string;
 }
 
-export interface AdvancedSortCfgProps {
+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[];
@@ -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..fd1d9b7fac 100644
--- a/packages/s2-react/src/components/index.ts
+++ b/packages/s2-react/src/components/index.ts
@@ -1,14 +1,18 @@
 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';
 export {
   AdvancedSort,
   type AdvancedSortProps,
-  type AdvancedSortCfgProps,
+  type AdvancedSortBaseProps as AdvancedSortCfgProps,
 } from './advanced-sort';
 export {
   DrillDown,
@@ -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/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/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/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/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-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/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..9b5cc9aefb
--- /dev/null
+++ b/packages/s2-shared/__tests__/utils/__snapshots__/options-spec.ts.snap
@@ -0,0 +1,117 @@
+// 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,
+  },
+  "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": 20,
+      "minCellWidth": 20,
+      "rowCellVertical": true,
+      "rowResizeType": "current",
+    },
+    "scrollSpeedRatio": Object {
+      "horizontal": 1,
+      "vertical": 1,
+    },
+    "scrollbarPosition": "content",
+    "selectedCellHighlight": false,
+    "selectedCellsSpotlight": false,
+  },
+  "placeholder": "-",
+  "seriesNumber": Object {
+    "enable": false,
+  },
+  "showDefaultHeaderActionIcon": true,
+  "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/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/packages/s2-vue/package.json b/packages/s2-vue/package.json
index d5254c15e7..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": "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/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/pnpm-lock.yaml b/pnpm-lock.yaml
index bc757a06f3..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
@@ -232,7 +242,7 @@ importers:
         version: 7.5.4
       size-limit:
         specifier: ^11.0.0
-        version: 11.0.1
+        version: 11.0.2
       stylelint:
         specifier: ^15.11.0
         version: 15.11.0(typescript@5.2.2)
@@ -396,7 +406,7 @@ importers:
         version: 18.2.0(react@18.2.0)
       vite-plugin-svgr:
         specifier: ^2.2.2
-        version: 2.4.0
+        version: 2.4.0(rollup@4.1.5)(vite@4.5.0)
 
   packages/s2-shared:
     devDependencies:
@@ -442,28 +452,31 @@ importers:
         version: 3.3.4
       vue-tsc:
         specifier: ^1.8.19
-        version: 1.8.19
+        version: 1.8.19(typescript@5.2.2)
 
   s2-site:
     dependencies:
       '@ant-design/icons':
         specifier: ^5.2.6
-        version: 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(dumi@2.2.15)
+        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.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.11
-        version: 5.1.11
+        specifier: ^5.1.15
+        version: 5.1.15
       '@antv/s2':
         specifier: next
         version: link:../packages/s2-core
@@ -471,23 +484,29 @@ importers:
         specifier: next
         version: link:../packages/s2-react
       antd:
-        specifier: ^5.12.2
-        version: 5.12.2
+        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
       dumi:
-        specifier: ^2.2.15
-        version: 2.2.15
+        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.0
-        version: 6.1.0
+        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
+        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
@@ -540,7 +559,6 @@ packages:
   /@aashutoshrathi/word-wrap@1.2.6:
     resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /@algolia/autocomplete-core@1.7.2:
     resolution: {integrity: sha512-eclwUDC6qfApNnEfu1uWcL/rudQsn59tjEoUYZYE2JSXZrHLRjBUGMxiCoknobU2Pva8ejb0eRxpIYDtVVqdsw==}
@@ -669,7 +687,13 @@ packages:
     dependencies:
       '@ctrl/tinycolor': 3.6.1
 
-  /@ant-design/cssinjs@1.18.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:
       react: '>=16.0.0'
@@ -680,26 +704,28 @@ packages:
       '@emotion/unitless': 0.7.5
       classnames: 2.3.2
       csstype: 3.1.2
-      rc-util: 5.38.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)
       stylis: 4.1.3
-    dev: false
+    dev: true
 
-  /@ant-design/cssinjs@1.18.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-1JURAPrsjK1GwpqByTq3bJ7nF7lbMKDZpehqeR2n8/IR5O58/W1U4VcOeaw5ZyTHri3tEMcom7dyP2tvxpW54g==}
+  /@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'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       '@emotion/hash': 0.8.0
       '@emotion/unitless': 0.7.5
-      classnames: 2.3.2
-      csstype: 3.1.2
+      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: true
+    dev: false
 
   /@ant-design/icons-svg@4.3.1:
     resolution: {integrity: sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g==}
@@ -723,28 +749,14 @@ 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
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@ant-design/icons@5.2.6:
-    resolution: {integrity: sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==}
-    engines: {node: '>=8'}
-    peerDependencies:
-      react: '>=16.0.0'
-      react-dom: '>=16.0.0'
-    dependencies:
-      '@ant-design/colors': 7.0.0
-      '@ant-design/icons-svg': 4.3.1
-      '@babel/runtime': 7.23.2
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /@ant-design/icons@5.2.6(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==}
     engines: {node: '>=8'}
@@ -759,19 +771,6 @@ 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
-
-  /@ant-design/react-slick@1.0.2:
-    resolution: {integrity: sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==}
-    peerDependencies:
-      react: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      json2mq: 0.2.0
-      resize-observer-polyfill: 1.5.1
-      throttle-debounce: 5.0.0
-    dev: false
 
   /@ant-design/react-slick@1.0.2(react@18.2.0):
     resolution: {integrity: sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==}
@@ -799,10 +798,20 @@ 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
+    dev: true
+
+  /@antv/component@1.0.1-beta.0:
+    resolution: {integrity: sha512-syonGLy7bcpe+4qqKjtwBZMUUfZU8TKJRQAeYOB4pEiz2kr1Ky/qZLteT12QDQRugeMz9KnrUXMF+nAvUErKww==}
+    dependencies:
+      '@antv/g': 5.18.24
       '@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==}
@@ -811,24 +820,26 @@ packages:
       '@antv/util': 2.0.17
       gl-matrix: 3.4.3
 
-  /@antv/dumi-theme-antv@0.4.4(dumi@2.2.15):
-    resolution: {integrity: sha512-/5eB2bn9pZZmORcYFmQQ8xjgD22/W879E3XfHKvgYDNkYlxNUMmOknxiNbV5Pdf0s8oUgLEerKnSWqdkQc6Tvg==}
+  /@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'
+      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/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.23.2)
       '@babel/standalone': 7.20.12
       '@docsearch/css': 3.3.1
       '@docsearch/react': 3.3.1(react-dom@18.2.0)(react@18.2.0)
       '@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
-      dumi: 2.2.15
+      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
@@ -846,17 +857,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'
@@ -877,6 +892,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:
@@ -890,11 +913,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:
@@ -917,6 +959,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:
@@ -929,6 +982,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==}
@@ -938,6 +999,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:
@@ -949,6 +1019,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:
@@ -960,12 +1042,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:
@@ -981,6 +1082,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:
@@ -989,6 +1099,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:
@@ -997,6 +1116,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==}
@@ -1005,6 +1135,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:
@@ -1030,6 +1167,34 @@ packages:
       flru: 1.0.2
       fmin: 0.0.2
       pdfast: 0.2.0
+    dev: true
+
+  /@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.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
+      '@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==}
@@ -1039,6 +1204,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:
@@ -1100,7 +1273,7 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/eslint-parser@7.22.15(@babel/core@7.23.2):
+  /@babel/eslint-parser@7.22.15(@babel/core@7.23.2)(eslint@8.52.0):
     resolution: {integrity: sha512-yc8OOBIQk1EcRrpizuARSQS0TWAcOMpEJ1aafhNznaeYkeL+OhqnDObGFylB8ka8VFF/sZc+S4RzHyO+3LjQxg==}
     engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0}
     peerDependencies:
@@ -1109,6 +1282,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.2
       '@nicolo-ribaudo/eslint-scope-5-internals': 5.1.1-v1
+      eslint: 8.52.0
       eslint-visitor-keys: 2.1.0
       semver: 6.3.1
     dev: false
@@ -1165,12 +1339,13 @@ packages:
       semver: 6.3.1
     dev: true
 
-  /@babel/helper-create-regexp-features-plugin@7.22.15:
+  /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.23.2):
     resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
+      '@babel/core': 7.23.2
       '@babel/helper-annotate-as-pure': 7.22.5
       regexpu-core: 5.3.2
       semver: 6.3.1
@@ -1206,19 +1381,6 @@ packages:
     dependencies:
       '@babel/types': 7.23.0
 
-  /@babel/helper-module-transforms@7.23.0:
-    resolution: {integrity: sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
-    dev: false
-
   /@babel/helper-module-transforms@7.23.0(@babel/core@7.23.2):
     resolution: {integrity: sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==}
     engines: {node: '>=6.9.0'}
@@ -1324,14 +1486,6 @@ packages:
     dependencies:
       '@babel/types': 7.23.0
 
-  /@babel/plugin-syntax-async-generators@7.8.4:
-    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
-
   /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.2):
     resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
     peerDependencies:
@@ -1339,15 +1493,6 @@ packages:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-bigint@7.8.3:
-    resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
 
   /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.23.2):
     resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
@@ -1356,15 +1501,6 @@ packages:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-class-properties@7.12.13:
-    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
 
   /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.2):
     resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
@@ -1373,15 +1509,6 @@ packages:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-import-meta@7.10.4:
-    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
 
   /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.2):
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
@@ -1390,15 +1517,6 @@ packages:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-json-strings@7.8.3:
-    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
 
   /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.2):
     resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
@@ -1407,7 +1525,6 @@ packages:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: true
 
   /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.23.2):
     resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==}
@@ -1419,14 +1536,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-logical-assignment-operators@7.10.4:
-    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
-
   /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.2):
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
@@ -1434,83 +1543,38 @@ packages:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: true
 
-  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3:
+  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.2):
     resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
+      '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: false
 
-  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.2):
-    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
+  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.2):
+    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: true
 
-  /@babel/plugin-syntax-numeric-separator@7.10.4:
-    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
+  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.2):
+    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
+      '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: false
 
-  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.2):
-    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
+  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.2):
+    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-object-rest-spread@7.8.3:
-    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
-
-  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.2):
-    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.2
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-optional-catch-binding@7.8.3:
-    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
-
-  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.2):
-    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.2
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-optional-chaining@7.8.3:
-    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
 
   /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.2):
     resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
@@ -1519,16 +1583,6 @@ packages:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-top-level-await@7.14.5:
-    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
 
   /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.2):
     resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
@@ -1538,7 +1592,6 @@ packages:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-    dev: true
 
   /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.23.2):
     resolution: {integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==}
@@ -1550,13 +1603,14 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-unicode-sets-regex@7.18.6:
+  /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.23.2):
     resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/helper-create-regexp-features-plugin': 7.22.15
+      '@babel/core': 7.23.2
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.2)
       '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
@@ -1572,17 +1626,6 @@ packages:
       '@babel/helper-simple-access': 7.22.5
     dev: true
 
-  /@babel/plugin-transform-modules-commonjs@7.23.0:
-    resolution: {integrity: sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-module-transforms': 7.23.0
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-simple-access': 7.22.5
-    dev: false
-
   /@babel/plugin-transform-modules-commonjs@7.23.0(@babel/core@7.23.2):
     resolution: {integrity: sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ==}
     engines: {node: '>=6.9.0'}
@@ -1593,7 +1636,6 @@ packages:
       '@babel/helper-module-transforms': 7.23.0(@babel/core@7.23.2)
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-simple-access': 7.22.5
-    dev: true
 
   /@babel/plugin-transform-react-jsx-self@7.22.5(@babel/core@7.23.2):
     resolution: {integrity: sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g==}
@@ -1649,6 +1691,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'}
@@ -1707,7 +1756,6 @@ packages:
 
   /@bcoe/v8-coverage@0.2.3:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
-    dev: true
 
   /@bloomberg/record-tuple-polyfill@0.0.4:
     resolution: {integrity: sha512-h0OYmPR3A5Dfbetra/GzxBAzQk8sH7LhRkRUTdagX6nrtlUgJGYCTv4bBK33jsTQw9HDd8PE2x1Ma+iRKEDUsw==}
@@ -1720,7 +1768,6 @@ packages:
     dependencies:
       exec-sh: 0.3.6
       minimist: 1.2.8
-    dev: true
 
   /@colors/colors@1.5.0:
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
@@ -1900,12 +1947,10 @@ packages:
       '@csstools/css-tokenizer': ^2.2.1
     dependencies:
       '@csstools/css-tokenizer': 2.2.1
-    dev: true
 
   /@csstools/css-tokenizer@2.2.1:
     resolution: {integrity: sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==}
     engines: {node: ^14 || ^16 || >=18}
-    dev: true
 
   /@csstools/media-query-list-parser@2.1.5(@csstools/css-parser-algorithms@2.3.2)(@csstools/css-tokenizer@2.2.1):
     resolution: {integrity: sha512-IxVBdYzR8pYe89JiyXQuYk4aVVoCPhMJkz6ElRwlVysjwURTsTk/bmY/z4FfeRE+CRBMlykPwXEVUg8lThv7AQ==}
@@ -1916,7 +1961,6 @@ packages:
     dependencies:
       '@csstools/css-parser-algorithms': 2.3.2(@csstools/css-tokenizer@2.2.1)
       '@csstools/css-tokenizer': 2.2.1
-    dev: true
 
   /@csstools/postcss-color-function@1.1.1(postcss@8.4.31):
     resolution: {integrity: sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==}
@@ -2039,7 +2083,6 @@ packages:
       postcss-selector-parser: ^6.0.13
     dependencies:
       postcss-selector-parser: 6.0.13
-    dev: true
 
   /@ctrl/tinycolor@3.5.0:
     resolution: {integrity: sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg==}
@@ -2101,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'}
@@ -2118,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'}
@@ -2135,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'}
@@ -2152,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'}
@@ -2169,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'}
@@ -2186,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'}
@@ -2203,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'}
@@ -2220,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'}
@@ -2237,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'}
@@ -2254,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'}
@@ -2271,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'}
@@ -2297,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'}
@@ -2314,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'}
@@ -2331,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'}
@@ -2348,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'}
@@ -2365,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'}
@@ -2382,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'}
@@ -2399,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'}
@@ -2416,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'}
@@ -2433,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'}
@@ -2450,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'}
@@ -2467,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'}
@@ -2484,14 +2725,14 @@ packages:
     requiresBuild: true
     optional: true
 
-  /@eslint-community/eslint-utils@4.4.0:
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint-visitor-keys: 3.4.3
+  /@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==}
@@ -2501,7 +2742,6 @@ packages:
     dependencies:
       eslint: 8.52.0
       eslint-visitor-keys: 3.4.3
-    dev: true
 
   /@eslint-community/regexpp@4.9.1:
     resolution: {integrity: sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==}
@@ -2522,12 +2762,10 @@ packages:
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@eslint/js@8.52.0:
     resolution: {integrity: sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
 
   /@floating-ui/core@0.6.2:
     resolution: {integrity: sha512-jktYRmZwmau63adUG3GKOAVCofBXkk55S/zQ94XOorAHhwqFIOFAy1rSp2N0Wp6/tGbe9V3u/ExlGZypyY17rg==}
@@ -2617,7 +2855,7 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@formatjs/intl@2.9.9:
+  /@formatjs/intl@2.9.9(typescript@5.2.2):
     resolution: {integrity: sha512-JI3CNgL2Zdg5lv9ncT2sYKqbAj2RGrCbdzaCckIxMPxn4QuHuOVvYUGmBAXVusBmfG/0sxLmMrnwnBioz+QKdA==}
     peerDependencies:
       typescript: '5'
@@ -2632,6 +2870,7 @@ packages:
       '@formatjs/intl-listformat': 7.5.3
       intl-messageformat: 10.5.8
       tslib: 2.6.2
+      typescript: 5.2.2
     dev: false
 
   /@google-cloud/common@4.0.3:
@@ -2706,16 +2945,13 @@ packages:
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@humanwhocodes/module-importer@1.0.1:
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
-    dev: true
 
   /@humanwhocodes/object-schema@2.0.1:
     resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
-    dev: true
 
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -2734,19 +2970,12 @@ packages:
       - supports-color
     dev: false
 
-  /@icons/material@0.2.4:
-    resolution: {integrity: sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==}
-    peerDependencies:
-      react: '*'
-    dev: false
-
   /@icons/material@0.2.4(react@18.2.0):
     resolution: {integrity: sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==}
     peerDependencies:
       react: '*'
     dependencies:
       react: 18.2.0
-    dev: true
 
   /@isaacs/cliui@8.0.2:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
@@ -2793,7 +3022,6 @@ packages:
       jest-message-util: 26.6.2
       jest-util: 26.6.2
       slash: 3.0.0
-    dev: true
 
   /@jest/core@26.6.3:
     resolution: {integrity: sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==}
@@ -2833,7 +3061,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /@jest/create-cache-key-function@27.5.1:
     resolution: {integrity: sha512-dmH1yW+makpTSURTy8VzdUwFnfQh1G8R+DxO2Ho2FFmBbKFEVm+3jWdvFhE2VqB/LATCTokkP0dotjyQyw5/AQ==}
@@ -2862,7 +3089,6 @@ packages:
       '@jest/types': 26.6.2
       '@types/node': 20.8.9
       jest-mock: 26.6.2
-    dev: true
 
   /@jest/fake-timers@24.9.0:
     resolution: {integrity: sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==}
@@ -2885,7 +3111,6 @@ packages:
       jest-message-util: 26.6.2
       jest-mock: 26.6.2
       jest-util: 26.6.2
-    dev: true
 
   /@jest/globals@26.6.2:
     resolution: {integrity: sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==}
@@ -2894,7 +3119,6 @@ packages:
       '@jest/environment': 26.6.2
       '@jest/types': 26.6.2
       expect: 26.6.2
-    dev: true
 
   /@jest/reporters@26.6.2:
     resolution: {integrity: sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==}
@@ -2928,7 +3152,6 @@ packages:
       node-notifier: 8.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@jest/schemas@29.6.3:
     resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
@@ -2953,7 +3176,6 @@ packages:
       callsites: 3.1.0
       graceful-fs: 4.2.10
       source-map: 0.6.1
-    dev: true
 
   /@jest/test-result@24.9.0:
     resolution: {integrity: sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==}
@@ -2972,7 +3194,6 @@ packages:
       '@jest/types': 26.6.2
       '@types/istanbul-lib-coverage': 2.0.4
       collect-v8-coverage: 1.0.1
-    dev: true
 
   /@jest/test-sequencer@24.9.0:
     resolution: {integrity: sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==}
@@ -3003,7 +3224,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /@jest/transform@24.9.0:
     resolution: {integrity: sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==}
@@ -3050,7 +3270,6 @@ packages:
       write-file-atomic: 3.0.3
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@jest/transform@29.7.0:
     resolution: {integrity: sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==}
@@ -3093,7 +3312,6 @@ packages:
       '@types/node': 20.8.9
       '@types/yargs': 15.0.15
       chalk: 4.1.2
-    dev: true
 
   /@jest/types@27.5.1:
     resolution: {integrity: sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==}
@@ -3167,34 +3385,37 @@ packages:
     dependencies:
       call-bind: 1.0.2
 
-  /@loadable/component@5.15.2:
+  /@loadable/component@5.15.2(react@18.1.0):
     resolution: {integrity: sha512-ryFAZOX5P2vFkUdzaAtTG88IGnr9qxSdvLRvJySXcUA4B4xVWurUNADu3AnKPksxOZajljqTrDEDcYjeL4lvLw==}
     engines: {node: '>=8'}
     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
     dev: false
 
-  /@loadable/component@5.15.2(react@18.1.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
+      '@babel/runtime': 7.23.7
       hoist-non-react-statics: 3.3.2
-      react: 18.1.0
+      react: 18.2.0
       react-is: 16.13.1
     dev: false
 
-  /@makotot/ghostui@2.0.0:
+  /@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):
@@ -3489,18 +3710,6 @@ packages:
     resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
     dev: true
 
-  /@rc-component/color-picker@1.4.1:
-    resolution: {integrity: sha512-vh5EWqnsayZa/JwUznqDaPJz39jznx/YDbyBuVJntv735tKXKwEUZZb2jYEldOg+NKWZwtALjGMrNeGBmqFoEw==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      '@ctrl/tinycolor': 3.6.1
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /@rc-component/color-picker@1.4.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-vh5EWqnsayZa/JwUznqDaPJz39jznx/YDbyBuVJntv735tKXKwEUZZb2jYEldOg+NKWZwtALjGMrNeGBmqFoEw==}
     peerDependencies:
@@ -3515,14 +3724,18 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@rc-component/context@1.4.0:
-    resolution: {integrity: sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==}
+  /@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.5
-      rc-util: 5.38.1
+      '@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):
@@ -3535,7 +3748,6 @@ 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/mini-decimal@1.1.0:
     resolution: {integrity: sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==}
@@ -3543,18 +3755,6 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.5
 
-  /@rc-component/mutate-observer@1.1.0:
-    resolution: {integrity: sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==}
-    engines: {node: '>=8.x'}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /@rc-component/mutate-observer@1.1.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==}
     engines: {node: '>=8.x'}
@@ -3567,19 +3767,6 @@ 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/portal@1.1.2:
-    resolution: {integrity: sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==}
-    engines: {node: '>=8.x'}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
 
   /@rc-component/portal@1.1.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==}
@@ -3594,7 +3781,7 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  /@rc-component/tour@1.11.1:
+  /@rc-component/tour@1.11.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-c9Lw3/oVinj5D64Rsp8aDLOXcgdViE+hq7bj0Qoo8fTuQEh9sSpUw5OZcum943JkjeIE4hLcc5FD4a5ANtMJ4w==}
     engines: {node: '>=8.x'}
     peerDependencies:
@@ -3602,29 +3789,31 @@ packages:
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': 7.23.5
-      '@rc-component/portal': 1.1.2
-      '@rc-component/trigger': 1.18.2
+      '@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.3.2
-      rc-util: 5.38.1
-    dev: false
+      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.11.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-c9Lw3/oVinj5D64Rsp8aDLOXcgdViE+hq7bj0Qoo8fTuQEh9sSpUw5OZcum943JkjeIE4hLcc5FD4a5ANtMJ4w==}
+  /@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.5
+      '@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.3.2
+      '@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
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
+    dev: false
 
-  /@rc-component/trigger@1.18.2:
+  /@rc-component/trigger@1.18.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-jRLYgFgjLEPq3MvS87fIhcfuywFSRDaDrYw1FLku7Cm4esszvzTbA0JBsyacAyLrK9rF3TiHFcvoEDMzoD3CTA==}
     engines: {node: '>=8.x'}
     peerDependencies:
@@ -3632,29 +3821,30 @@ packages:
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': 7.23.5
-      '@rc-component/portal': 1.1.2
+      '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
-      rc-motion: 2.9.0
-      rc-resize-observer: 1.4.0
-      rc-util: 5.38.1
-    dev: false
+      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)
 
-  /@rc-component/trigger@1.18.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-jRLYgFgjLEPq3MvS87fIhcfuywFSRDaDrYw1FLku7Cm4esszvzTbA0JBsyacAyLrK9rF3TiHFcvoEDMzoD3CTA==}
+  /@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.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-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: true
+    dev: false
 
   /@remix-run/router@1.2.1:
     resolution: {integrity: sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==}
@@ -3767,20 +3957,6 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/pluginutils@5.0.5:
-    resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@types/estree': 1.0.0
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-    dev: true
-
   /@rollup/pluginutils@5.0.5(rollup@4.1.5):
     resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==}
     engines: {node: '>=14.0.0'}
@@ -3801,7 +3977,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-android-arm64@4.1.5:
@@ -3809,7 +3984,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-arm64@4.1.5:
@@ -3817,7 +3991,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-x64@4.1.5:
@@ -3825,7 +3998,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm-gnueabihf@4.1.5:
@@ -3833,7 +4005,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-gnu@4.1.5:
@@ -3842,7 +4013,6 @@ packages:
     os: [linux]
     libc: [glibc]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-musl@4.1.5:
@@ -3851,7 +4021,6 @@ packages:
     os: [linux]
     libc: [musl]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-gnu@4.1.5:
@@ -3860,7 +4029,6 @@ packages:
     os: [linux]
     libc: [glibc]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-musl@4.1.5:
@@ -3869,7 +4037,6 @@ packages:
     os: [linux]
     libc: [musl]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-arm64-msvc@4.1.5:
@@ -3877,7 +4044,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-ia32-msvc@4.1.5:
@@ -3885,7 +4051,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-x64-msvc@4.1.5:
@@ -3893,7 +4058,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rushstack/eslint-patch@1.5.1:
@@ -4104,19 +4268,47 @@ 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==}
     dependencies:
       type-detect: 4.0.8
-    dev: true
 
   /@sinonjs/fake-timers@6.0.1:
     resolution: {integrity: sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==}
     dependencies:
       '@sinonjs/commons': 1.8.6
-    dev: true
+
+  /@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==}
@@ -4157,7 +4349,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.2
       postcss: 8.4.31
-      postcss-syntax: 0.36.2(postcss@8.4.31)
+      postcss-syntax: 0.36.2(postcss-less@6.0.0)(postcss@8.4.31)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -4617,7 +4809,6 @@ packages:
   /@tootallnate/once@1.1.2:
     resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /@tootallnate/once@2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
@@ -4732,6 +4923,12 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
+  /@types/hast@3.0.4:
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: false
+
   /@types/hoist-non-react-statics@3.3.1:
     resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
     dependencies:
@@ -4822,13 +5019,18 @@ 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
 
   /@types/minimist@1.2.2:
     resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
-    dev: true
 
   /@types/ms@0.7.31:
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
@@ -4854,7 +5056,6 @@ packages:
 
   /@types/normalize-package-data@2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
-    dev: true
 
   /@types/parse-json@4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
@@ -4864,7 +5065,6 @@ packages:
 
   /@types/prettier@2.7.2:
     resolution: {integrity: sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==}
-    dev: true
 
   /@types/prop-types@15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
@@ -4954,7 +5154,6 @@ packages:
 
   /@types/stack-utils@2.0.1:
     resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
-    dev: true
 
   /@types/strip-bom@3.0.0:
     resolution: {integrity: sha512-xevGOReSYGM7g/kUBZzPqCrR/KYAo+F0yiPc85WFTJa0MSLtyFTVTU6cJu/aV4mid7IffDIWqo69THF2o4JiEQ==}
@@ -4971,6 +5170,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
@@ -4988,7 +5191,6 @@ packages:
     resolution: {integrity: sha512-IziEYMU9XoVj8hWg7k+UJrXALkGFjWJhn5QFEv9q4p+v40oZhSuC135M38st8XPjICL7Ey4TV64ferBGUoJhBg==}
     dependencies:
       '@types/yargs-parser': 21.0.0
-    dev: true
 
   /@types/yargs@16.0.5:
     resolution: {integrity: sha512-AxO/ADJOBFJScHbWhq2xAhlWP24rY4aCEG/NFaMvbT3X2MgRsLjhjQwsn0Zi5zn0LG9jUhCCZMeX9Dkuw6k+vQ==}
@@ -5001,7 +5203,7 @@ packages:
       '@types/yargs-parser': 21.0.0
     dev: false
 
-  /@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0):
+  /@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.52.0)(typescript@5.2.2):
     resolution: {integrity: sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5013,16 +5215,18 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.9.1
-      '@typescript-eslint/parser': 5.62.0
+      '@typescript-eslint/parser': 5.62.0(eslint@8.52.0)(typescript@5.2.2)
       '@typescript-eslint/scope-manager': 5.62.0
-      '@typescript-eslint/type-utils': 5.62.0
-      '@typescript-eslint/utils': 5.62.0
+      '@typescript-eslint/type-utils': 5.62.0(eslint@8.52.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.52.0)(typescript@5.2.2)
       debug: 4.3.4
+      eslint: 8.52.0
       graphemer: 1.4.0
       ignore: 5.2.4
       natural-compare-lite: 1.4.0
       semver: 7.5.4
-      tsutils: 3.21.0
+      tsutils: 3.21.0(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -5056,7 +5260,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@5.62.0:
+  /@typescript-eslint/parser@5.62.0(eslint@8.52.0)(typescript@5.2.2):
     resolution: {integrity: sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5068,8 +5272,10 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
       debug: 4.3.4
+      eslint: 8.52.0
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -5119,7 +5325,7 @@ packages:
       '@typescript-eslint/visitor-keys': 6.9.1
     dev: true
 
-  /@typescript-eslint/type-utils@5.62.0:
+  /@typescript-eslint/type-utils@5.62.0(eslint@8.52.0)(typescript@5.2.2):
     resolution: {integrity: sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5129,10 +5335,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.62.0
-      '@typescript-eslint/utils': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.52.0)(typescript@5.2.2)
       debug: 4.3.4
-      tsutils: 3.21.0
+      eslint: 8.52.0
+      tsutils: 3.21.0(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -5193,7 +5401,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@5.62.0:
+  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.2.2):
     resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5208,7 +5416,8 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
-      tsutils: 3.21.0
+      tsutils: 3.21.0(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -5254,18 +5463,19 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@5.62.0:
+  /@typescript-eslint/utils@5.62.0(eslint@8.52.0)(typescript@5.2.2):
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.52.0)
       '@types/json-schema': 7.0.13
       '@types/semver': 7.5.3
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
+      eslint: 8.52.0
       eslint-scope: 5.1.1
       semver: 7.5.4
     transitivePeerDependencies:
@@ -5362,7 +5572,7 @@ packages:
       - supports-color
     dev: false
 
-  /@umijs/bundler-vite@4.0.88(postcss@8.4.31)(sass@1.69.5):
+  /@umijs/bundler-vite@4.0.88(@types/node@20.8.9)(postcss@8.4.31)(rollup@4.1.5)(sass@1.69.5):
     resolution: {integrity: sha512-qiToAgLwmPWz1t8l82qEPyFXlZvnRKWJW0WG6vuxQNikDMKCWhk18gZaWwMNhqQvAx/oZ37vFCmR8CDoNOMI/A==}
     hasBin: true
     dependencies:
@@ -5373,9 +5583,9 @@ packages:
       core-js: 3.28.0
       less: 4.1.3
       postcss-preset-env: 7.5.0(postcss@8.4.31)
-      rollup-plugin-visualizer: 5.9.0
+      rollup-plugin-visualizer: 5.9.0(rollup@4.1.5)
       systemjs: 6.14.2
-      vite: 4.3.1(less@4.1.3)(sass@1.69.5)
+      vite: 4.3.1(@types/node@20.8.9)(less@4.1.3)(sass@1.69.5)
     transitivePeerDependencies:
       - '@types/node'
       - postcss
@@ -5387,7 +5597,7 @@ packages:
       - terser
     dev: false
 
-  /@umijs/bundler-webpack@4.0.88:
+  /@umijs/bundler-webpack@4.0.88(typescript@5.2.2):
     resolution: {integrity: sha512-9ivKa6pREdgLhni9Zl+HhdqehizLOw+U8Md31l8pcQFq8KHrmlYj0X4iGNMaT7OVWJtZznY0wH4lfLNKSd+RXA==}
     hasBin: true
     dependencies:
@@ -5404,7 +5614,7 @@ packages:
       cors: 2.8.5
       css-loader: 6.7.1
       es5-imcompatible-versions: 0.1.88
-      fork-ts-checker-webpack-plugin: 8.0.0
+      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.2.2)
       jest-worker: 29.4.3
       lightningcss: 1.19.0
       node-libs-browser: 2.2.1
@@ -5544,25 +5754,25 @@ 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
 
-  /@umijs/lint@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):
     resolution: {integrity: sha512-vDLhfsA0zrAR2NFr/hna75kr1uTYSG032eCg89yBvC7fDn0jxIcXQXEHriZCsgge1puWw0bscnAWR8fx9rdmfA==}
     dependencies:
       '@babel/core': 7.23.2
-      '@babel/eslint-parser': 7.22.15(@babel/core@7.23.2)
+      '@babel/eslint-parser': 7.22.15(@babel/core@7.23.2)(eslint@8.52.0)
       '@stylelint/postcss-css-in-js': 0.38.0(postcss-syntax@0.36.2)(postcss@8.4.31)
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)
-      '@typescript-eslint/parser': 5.62.0
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.52.0)(typescript@5.2.2)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.52.0)(typescript@5.2.2)
       '@umijs/babel-preset-umi': 4.0.88
-      eslint-plugin-jest: 27.2.3(@typescript-eslint/eslint-plugin@5.62.0)
-      eslint-plugin-react: 7.33.2
-      eslint-plugin-react-hooks: 4.6.0
+      eslint-plugin-jest: 27.2.3(@typescript-eslint/eslint-plugin@5.62.0)(eslint@8.52.0)(jest@26.6.3)(typescript@5.2.2)
+      eslint-plugin-react: 7.33.2(eslint@8.52.0)
+      eslint-plugin-react-hooks: 4.6.0(eslint@8.52.0)
       postcss: 8.4.31
-      postcss-syntax: 0.36.2(postcss@8.4.31)
-      stylelint-config-standard: 25.0.0
+      postcss-syntax: 0.36.2(postcss-less@6.0.0)(postcss@8.4.31)
+      stylelint-config-standard: 25.0.0(stylelint@15.11.0)
     transitivePeerDependencies:
       - eslint
       - jest
@@ -5594,7 +5804,7 @@ packages:
       tsx: 3.14.0
     dev: false
 
-  /@umijs/preset-umi@4.0.88(sass@1.69.5):
+  /@umijs/preset-umi@4.0.88(@types/node@20.8.9)(rollup@4.1.5)(sass@1.69.5)(typescript@5.2.2):
     resolution: {integrity: sha512-q5emmxWjOrA8ZNTNaNcUEU/FxM/DDnpjGK8aYIce/ih/suzo+K2csWDAkQCBYgNPg4Ro1Juv2oUgyOt3TVcUXA==}
     dependencies:
       '@iconify/utils': 2.1.1
@@ -5603,8 +5813,8 @@ packages:
       '@umijs/babel-preset-umi': 4.0.88
       '@umijs/bundler-esbuild': 4.0.88
       '@umijs/bundler-utils': 4.0.88
-      '@umijs/bundler-vite': 4.0.88(postcss@8.4.31)(sass@1.69.5)
-      '@umijs/bundler-webpack': 4.0.88
+      '@umijs/bundler-vite': 4.0.88(@types/node@20.8.9)(postcss@8.4.31)(rollup@4.1.5)(sass@1.69.5)
+      '@umijs/bundler-webpack': 4.0.88(typescript@5.2.2)
       '@umijs/core': 4.0.88
       '@umijs/did-you-know': 1.0.3
       '@umijs/es-module-parser': 0.0.7
@@ -5689,32 +5899,34 @@ packages:
       source-map: 0.7.4
     dev: false
 
-  /@umijs/renderer-react@4.0.88:
+  /@umijs/renderer-react@4.0.88(react-dom@18.1.0)(react@18.1.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
+      '@loadable/component': 5.15.2(react@18.1.0)
       history: 5.3.0
-      react-helmet-async: 1.3.0
-      react-router-dom: 6.3.0
+      react: 18.1.0
+      react-dom: 18.1.0(react@18.1.0)
+      react-helmet-async: 1.3.0(react-dom@18.1.0)(react@18.1.0)
+      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.1.0)(react@18.1.0):
+  /@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.1.0)
+      '@loadable/component': 5.15.2(react@18.2.0)
       history: 5.3.0
-      react: 18.1.0
-      react-dom: 18.1.0(react@18.1.0)
-      react-helmet-async: 1.3.0(react-dom@18.1.0)(react@18.1.0)
-      react-router-dom: 6.3.0(react-dom@18.1.0)(react@18.1.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:
@@ -5729,14 +5941,14 @@ packages:
       - supports-color
     dev: false
 
-  /@umijs/test@4.0.88:
+  /@umijs/test@4.0.88(@babel/core@7.23.2):
     resolution: {integrity: sha512-3v021VhU/aQc3Jk421z3ys1Q5S/JJlIzhJYYds+O1gb3esgeaGIS6OyDA1xmCaqVGgJeYOq408AN43/hCR9rtw==}
     dependencies:
-      '@babel/plugin-transform-modules-commonjs': 7.23.0
+      '@babel/plugin-transform-modules-commonjs': 7.23.0(@babel/core@7.23.2)
       '@jest/types': 27.5.1
       '@umijs/bundler-utils': 4.0.88
       '@umijs/utils': 4.0.88
-      babel-jest: 29.7.0
+      babel-jest: 29.7.0(@babel/core@7.23.2)
       esbuild: 0.17.19
       identity-obj-proxy: 3.0.0
       isomorphic-unfetch: 4.0.2
@@ -5762,7 +5974,6 @@ packages:
 
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
-    dev: true
 
   /@vitejs/plugin-react@4.0.0(vite@4.3.1):
     resolution: {integrity: sha512-HX0XzMjL3hhOYm+0s95pb0Z7F8O81G7joUHgfDd/9J/ZZf5k4xX6QAMFkKsHFxaHlf6X7GD7+XuaZ66ULiJuhQ==}
@@ -5774,7 +5985,7 @@ packages:
       '@babel/plugin-transform-react-jsx-self': 7.22.5(@babel/core@7.23.2)
       '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.2)
       react-refresh: 0.14.0
-      vite: 4.3.1(less@4.1.3)(sass@1.69.5)
+      vite: 4.3.1(@types/node@20.8.9)(less@4.1.3)(sass@1.69.5)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -5930,7 +6141,7 @@ packages:
       - supports-color
     dev: true
 
-  /@vue/language-core@1.8.19:
+  /@vue/language-core@1.8.19(typescript@5.2.2):
     resolution: {integrity: sha512-nt3dodGs97UM6fnxeQBazO50yYCKBK53waFWB3qMbLmR6eL3aUryZgQtZoBe1pye17Wl8fs9HysV3si6xMgndQ==}
     peerDependencies:
       typescript: '*'
@@ -5945,6 +6156,7 @@ packages:
       '@vue/shared': 3.3.4
       minimatch: 9.0.3
       muggle-string: 0.3.1
+      typescript: 5.2.2
       vue-template-compiler: 2.7.14
     dev: true
 
@@ -6005,11 +6217,11 @@ packages:
     resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
     dev: true
 
-  /@vue/typescript@1.8.19:
+  /@vue/typescript@1.8.19(typescript@5.2.2):
     resolution: {integrity: sha512-k/SHeeQROUgqsxyHQ8Cs3Zz5TnX57p7BcBDVYR2E0c61QL2DJ2G8CsaBremmNGuGE6o1R5D50IHIxFmroMz8iw==}
     dependencies:
       '@volar/typescript': 1.10.4
-      '@vue/language-core': 1.8.19
+      '@vue/language-core': 1.8.19(typescript@5.2.2)
     transitivePeerDependencies:
       - typescript
     dev: true
@@ -6077,7 +6289,6 @@ packages:
 
   /abab@2.0.6:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
-    dev: true
 
   /abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
@@ -6101,7 +6312,6 @@ packages:
     dependencies:
       acorn: 7.4.1
       acorn-walk: 7.2.0
-    dev: true
 
   /acorn-jsx@5.3.2(acorn@8.10.0):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -6109,7 +6319,6 @@ packages:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       acorn: 8.10.0
-    dev: true
 
   /acorn-walk@6.2.0:
     resolution: {integrity: sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==}
@@ -6119,7 +6328,6 @@ packages:
   /acorn-walk@7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn@5.7.4:
     resolution: {integrity: sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==}
@@ -6137,7 +6345,6 @@ packages:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn@8.10.0:
     resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
@@ -6158,7 +6365,6 @@ packages:
       debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /agent-base@7.1.0:
     resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
@@ -6234,7 +6440,6 @@ packages:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
       uri-js: 4.4.1
-    dev: true
 
   /algoliasearch@3.35.1:
     resolution: {integrity: sha512-K4yKVhaHkXfJ/xcUnil04xiSrB8B8yHZoFEhWNpXg23eiCnqvTZw1tn/SqvdsANlYHLJlKl0qi3I/Q2Sqo7LwQ==}
@@ -6310,7 +6515,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       type-fest: 0.21.3
-    dev: true
 
   /ansi-escapes@5.0.0:
     resolution: {integrity: sha512-5GFMVX8HqE/TB+FuBJGuO5XG0WrsA6ptUqoODaT/n9mmUaZFkqnBueB4leqGBCmrUHnCnC4PCZTCd0E7QQ83bA==}
@@ -6418,9 +6622,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
@@ -6462,66 +6666,6 @@ packages:
       scroll-into-view-if-needed: 2.2.31
     dev: false
 
-  /antd@5.12.2:
-    resolution: {integrity: sha512-lJ4pdBRboN2Tl5hXTqgxUjGIercB2YIK7Z8fVDushgrJ55RhywJjvcQVnBmuxcSPuWEF2Yu8SNBVAnaV4EqzWA==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@ant-design/colors': 7.0.0
-      '@ant-design/cssinjs': 1.18.1
-      '@ant-design/icons': 5.2.6
-      '@ant-design/react-slick': 1.0.2
-      '@babel/runtime': 7.23.5
-      '@ctrl/tinycolor': 3.6.1
-      '@rc-component/color-picker': 1.4.1
-      '@rc-component/mutate-observer': 1.1.0
-      '@rc-component/tour': 1.11.1
-      '@rc-component/trigger': 1.18.2
-      classnames: 2.3.2
-      copy-to-clipboard: 3.3.3
-      dayjs: 1.11.7
-      qrcode.react: 3.1.0
-      rc-cascader: 3.20.0
-      rc-checkbox: 3.1.0
-      rc-collapse: 3.7.2
-      rc-dialog: 9.3.4
-      rc-drawer: 6.5.2
-      rc-dropdown: 4.1.0
-      rc-field-form: 1.41.0
-      rc-image: 7.5.1
-      rc-input: 1.3.6
-      rc-input-number: 8.4.0
-      rc-mentions: 2.9.1
-      rc-menu: 9.12.4
-      rc-motion: 2.9.0
-      rc-notification: 5.3.0
-      rc-pagination: 4.0.3
-      rc-picker: 3.14.6(dayjs@1.11.7)
-      rc-progress: 3.5.1
-      rc-rate: 2.12.0
-      rc-resize-observer: 1.4.0
-      rc-segmented: 2.2.2
-      rc-select: 14.10.0
-      rc-slider: 10.5.0
-      rc-steps: 6.0.1
-      rc-switch: 4.1.0
-      rc-table: 7.36.0
-      rc-tabs: 12.14.1
-      rc-textarea: 1.5.3
-      rc-tooltip: 6.1.2
-      rc-tree: 5.8.2
-      rc-tree-select: 5.15.0
-      rc-upload: 4.3.5
-      rc-util: 5.38.1
-      scroll-into-view-if-needed: 3.1.0
-      throttle-debounce: 5.0.0
-    transitivePeerDependencies:
-      - date-fns
-      - luxon
-      - moment
-    dev: false
-
   /antd@5.12.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-lJ4pdBRboN2Tl5hXTqgxUjGIercB2YIK7Z8fVDushgrJ55RhywJjvcQVnBmuxcSPuWEF2Yu8SNBVAnaV4EqzWA==}
     peerDependencies:
@@ -6584,6 +6728,67 @@ packages:
       - moment
     dev: true
 
+  /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.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.3(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.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: 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.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)
+      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)
+      rc-segmented: 2.2.2(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.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.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
+      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==}
     dependencies:
@@ -6598,7 +6803,6 @@ packages:
       normalize-path: 2.1.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -6663,17 +6867,14 @@ packages:
   /arr-diff@4.0.0:
     resolution: {integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /arr-flatten@1.1.0:
     resolution: {integrity: sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /arr-union@3.1.0:
     resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /array-buffer-byte-length@1.0.0:
     resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
@@ -6735,7 +6936,6 @@ packages:
   /array-unique@0.3.2:
     resolution: {integrity: sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /array.prototype.findlastindex@1.2.3:
     resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
@@ -6811,7 +7011,6 @@ packages:
   /arrify@1.0.1:
     resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /arrify@2.0.1:
     resolution: {integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==}
@@ -6846,7 +7045,6 @@ packages:
   /assign-symbols@1.0.0:
     resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /ast-types-flow@0.0.7:
     resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
@@ -6855,7 +7053,6 @@ packages:
   /astral-regex@2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /astring@1.8.4:
     resolution: {integrity: sha512-97a+l2LBU3Op3bBQEff79i/E4jMD2ZLFD8rHx9B6mXyB2uQwhJQYfiDqUwtfjF4QA1F2qs//N6Cw8LetMbQjcw==}
@@ -7013,18 +7210,18 @@ packages:
       slash: 3.0.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /babel-jest@29.7.0:
+  /babel-jest@29.7.0(@babel/core@7.23.2):
     resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@babel/core': ^7.8.0
     dependencies:
+      '@babel/core': 7.23.2
       '@jest/transform': 29.7.0
       '@types/babel__core': 7.20.2
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 29.6.3
+      babel-preset-jest: 29.6.3(@babel/core@7.23.2)
       chalk: 4.1.2
       graceful-fs: 4.2.10
       slash: 3.0.0
@@ -7077,7 +7274,6 @@ packages:
       '@babel/types': 7.23.0
       '@types/babel__core': 7.20.2
       '@types/babel__traverse': 7.18.3
-    dev: true
 
   /babel-plugin-jest-hoist@29.6.3:
     resolution: {integrity: sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==}
@@ -7089,25 +7285,6 @@ packages:
       '@types/babel__traverse': 7.18.3
     dev: false
 
-  /babel-preset-current-node-syntax@1.0.1:
-    resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/plugin-syntax-async-generators': 7.8.4
-      '@babel/plugin-syntax-bigint': 7.8.3
-      '@babel/plugin-syntax-class-properties': 7.12.13
-      '@babel/plugin-syntax-import-meta': 7.10.4
-      '@babel/plugin-syntax-json-strings': 7.8.3
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3
-      '@babel/plugin-syntax-numeric-separator': 7.10.4
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3
-      '@babel/plugin-syntax-optional-chaining': 7.8.3
-      '@babel/plugin-syntax-top-level-await': 7.14.5
-    dev: false
-
   /babel-preset-current-node-syntax@1.0.1(@babel/core@7.23.2):
     resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
     peerDependencies:
@@ -7126,7 +7303,6 @@ packages:
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.2)
       '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.2)
       '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.2)
-    dev: true
 
   /babel-preset-jest@24.9.0(@babel/core@7.23.2):
     resolution: {integrity: sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==}
@@ -7148,16 +7324,16 @@ packages:
       '@babel/core': 7.23.2
       babel-plugin-jest-hoist: 26.6.2
       babel-preset-current-node-syntax: 1.0.1(@babel/core@7.23.2)
-    dev: true
 
-  /babel-preset-jest@29.6.3:
+  /babel-preset-jest@29.6.3(@babel/core@7.23.2):
     resolution: {integrity: sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
+      '@babel/core': 7.23.2
       babel-plugin-jest-hoist: 29.6.3
-      babel-preset-current-node-syntax: 1.0.1
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.23.2)
     dev: false
 
   /babel-runtime@6.26.0:
@@ -7175,7 +7351,6 @@ packages:
 
   /balanced-match@2.0.0:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
-    dev: true
 
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
@@ -7191,7 +7366,6 @@ packages:
       isobject: 3.0.1
       mixin-deep: 1.3.2
       pascalcase: 0.1.1
-    dev: true
 
   /bcrypt-pbkdf@1.0.2:
     resolution: {integrity: sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==}
@@ -7338,7 +7512,6 @@ packages:
       to-regex: 3.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@@ -7360,7 +7533,6 @@ packages:
 
   /browser-process-hrtime@1.0.0:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
-    dev: true
 
   /browser-resolve@1.11.3:
     resolution: {integrity: sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==}
@@ -7509,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
@@ -7530,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==}
@@ -7586,7 +7764,6 @@ packages:
       to-object-path: 0.3.0
       union-value: 1.0.1
       unset-value: 1.0.0
-    dev: true
 
   /cacheable-request@6.1.0:
     resolution: {integrity: sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==}
@@ -7654,7 +7831,6 @@ packages:
       map-obj: 4.3.0
       quick-lru: 5.1.1
       type-fest: 1.4.0
-    dev: true
 
   /camelcase@1.2.1:
     resolution: {integrity: sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==}
@@ -7690,7 +7866,6 @@ packages:
     engines: {node: 6.* || 8.* || >= 10.*}
     dependencies:
       rsvp: 4.8.5
-    dev: true
 
   /capture-stack-trace@1.0.2:
     resolution: {integrity: sha512-X/WM2UQs6VMHUtjUDnZTRI+i1crWteJySFzr9UpGoQa4WQffXVTTXuekjl7TjZRlcF2XfjgITT0HxZ9RnxeT0w==}
@@ -7772,7 +7947,6 @@ packages:
   /char-regex@1.0.2:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
     engines: {node: '>=10'}
-    dev: true
 
   /character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
@@ -7834,7 +8008,6 @@ packages:
 
   /ci-info@2.0.0:
     resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
-    dev: true
 
   /ci-info@3.7.1:
     resolution: {integrity: sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w==}
@@ -7850,7 +8023,6 @@ packages:
 
   /cjs-module-lexer@0.6.0:
     resolution: {integrity: sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==}
-    dev: true
 
   /class-utils@0.3.6:
     resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==}
@@ -7860,11 +8032,14 @@ packages:
       define-property: 0.2.5
       isobject: 3.0.1
       static-extend: 0.1.2
-    dev: true
 
   /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'}
@@ -7979,7 +8154,6 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wrap-ansi: 6.2.0
-    dev: true
 
   /cliui@7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
@@ -8011,7 +8185,6 @@ packages:
   /co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
-    dev: true
 
   /coa@2.0.2:
     resolution: {integrity: sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==}
@@ -8070,7 +8243,6 @@ packages:
 
   /collect-v8-coverage@1.0.1:
     resolution: {integrity: sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==}
-    dev: true
 
   /collection-visit@1.0.0:
     resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
@@ -8078,7 +8250,6 @@ packages:
     dependencies:
       map-visit: 1.0.0
       object-visit: 1.0.1
-    dev: true
 
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
@@ -8112,7 +8283,6 @@ packages:
 
   /colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
-    dev: true
 
   /colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
@@ -8181,7 +8351,6 @@ packages:
 
   /component-emitter@1.3.0:
     resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
-    dev: true
 
   /compute-scroll-into-view@1.0.20:
     resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
@@ -8333,7 +8502,6 @@ packages:
 
   /convert-source-map@1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-    dev: true
 
   /convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
@@ -8357,7 +8525,6 @@ packages:
   /copy-descriptor@0.1.1:
     resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /copy-to-clipboard@3.3.3:
     resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
@@ -8447,7 +8614,6 @@ packages:
       parse-json: 5.2.0
       path-type: 4.0.0
       typescript: 5.2.2
-    dev: true
 
   /cpx@1.5.0:
     resolution: {integrity: sha512-jHTjZhsbg9xWgsP2vuNW2jnnzBX+p4T+vNI9Lbjzs1n4KhOfa22bQppiFYLsWQKd8TzmL5aSP/Me3yfsCwXbDA==}
@@ -8527,7 +8693,6 @@ packages:
       semver: 5.7.1
       shebang-command: 1.2.0
       which: 1.3.1
-    dev: true
 
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -8592,7 +8757,6 @@ packages:
   /css-functions-list@3.2.1:
     resolution: {integrity: sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==}
     engines: {node: '>=12 || >=16'}
-    dev: true
 
   /css-has-pseudo@3.0.4(postcss@8.4.31):
     resolution: {integrity: sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==}
@@ -8680,7 +8844,6 @@ packages:
     dependencies:
       mdn-data: 2.0.30
       source-map-js: 1.0.2
-    dev: true
 
   /css-what@3.4.2:
     resolution: {integrity: sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==}
@@ -8784,11 +8947,9 @@ packages:
 
   /cssom@0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
-    dev: true
 
   /cssom@0.4.4:
     resolution: {integrity: sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==}
-    dev: true
 
   /cssstyle@1.4.0:
     resolution: {integrity: sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==}
@@ -8801,10 +8962,10 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       cssom: 0.3.8
-    dev: true
 
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: true
 
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
@@ -8949,7 +9110,6 @@ packages:
       abab: 2.0.6
       whatwg-mimetype: 2.3.0
       whatwg-url: 8.7.0
-    dev: true
 
   /datauri@3.0.0:
     resolution: {integrity: sha512-NeDFuUPV1YCpCn8MUIcDk1QnuyenUHs7f4Q5P0n9FFA0neKFrfEH9esR+YMW95BplbYfdmjbs0Pl/ZGAaM2QHQ==}
@@ -8969,6 +9129,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==}
 
@@ -9024,7 +9188,6 @@ packages:
     dependencies:
       decamelize: 1.2.0
       map-obj: 1.0.1
-    dev: true
 
   /decamelize@1.2.0:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
@@ -9033,7 +9196,6 @@ packages:
   /decamelize@5.0.1:
     resolution: {integrity: sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==}
     engines: {node: '>=10'}
-    dev: true
 
   /decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
@@ -9100,7 +9262,6 @@ packages:
 
   /deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-    dev: true
 
   /deep-rename-keys@0.2.1:
     resolution: {integrity: sha512-RHd9ABw4Fvk+gYDWqwOftG849x0bYOySl/RgX0tLI9i27ZIeSO91mLZJEp7oPHOMFqHvpgu21YptmDt0FYD/0A==}
@@ -9113,7 +9274,6 @@ packages:
   /deepmerge@4.2.2:
     resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
@@ -9127,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'}
@@ -9136,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:
@@ -9182,14 +9355,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-descriptor: 0.1.6
-    dev: true
 
   /define-property@1.0.0:
     resolution: {integrity: sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==}
     engines: {node: '>=0.10.0'}
     dependencies:
       is-descriptor: 1.0.2
-    dev: true
 
   /define-property@2.0.2:
     resolution: {integrity: sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==}
@@ -9197,7 +9368,6 @@ packages:
     dependencies:
       is-descriptor: 1.0.2
       isobject: 3.0.1
-    dev: true
 
   /defined@1.0.1:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
@@ -9232,6 +9402,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:
@@ -9257,7 +9435,6 @@ packages:
   /detect-newline@3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
-    dev: true
 
   /detect-newline@4.0.1:
     resolution: {integrity: sha512-qE3Veg1YXzGHQhlA6jzebZN2qVf6NX+A7m7qlhCGG30dJixrAQhYOsJjsnBjJkCSmuOPpCk30145fr8FV0bzog==}
@@ -9268,6 +9445,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'}
@@ -9276,7 +9459,6 @@ packages:
   /diff-sequences@26.6.2:
     resolution: {integrity: sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==}
     engines: {node: '>= 10.14.2'}
-    dev: true
 
   /diff-sequences@27.5.1:
     resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
@@ -9327,7 +9509,6 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       esutils: 2.0.3
-    dev: true
 
   /dom-accessibility-api@0.5.15:
     resolution: {integrity: sha512-8o+oVqLQZoruQPYy3uAAQtc6YbtSiRq5aPJBhJ82YTJRHvI6ofhYAkC81WmjFTnfUbqg6T3aCglIpU9p/5e7Cw==}
@@ -9395,7 +9576,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       webidl-conversions: 5.0.0
-    dev: true
 
   /domhandler@4.3.1:
     resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
@@ -9471,15 +9651,15 @@ packages:
     resolution: {integrity: sha512-a/Y5lf0G6gwsEQ9hop/n03CcjmHsGBk384Cz/AEX6mRYrfSpUx/lQvP9HLoXkCzScl9PL1sSmLPnMkgaXDCZLA==}
     dev: false
 
-  /dumi@2.2.15:
-    resolution: {integrity: sha512-O6bUZvqYictU1p5kuwD26Vrn4g5HuMaw41GBhjEEG0rjAveNvnQdgJBJS6YarNCTTLJ9fUZ4t86aBt31MUCTHw==}
+  /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'
       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
@@ -9513,16 +9693,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
-      rc-tabs: 12.14.1
-      rc-tree: 5.8.2
-      react-copy-to-clipboard: 5.1.0
-      react-error-boundary: 4.0.11
-      react-intl: 6.5.5
+      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: 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
@@ -9533,7 +9715,7 @@ packages:
       remark-rehype: 10.1.0
       sass: 1.69.5
       sitemap: 7.1.1
-      umi: 4.0.88(sass@1.69.5)
+      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
@@ -9675,7 +9857,6 @@ packages:
   /emittery@0.7.2:
     resolution: {integrity: sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==}
     engines: {node: '>=10'}
-    dev: true
 
   /emoji-regex@10.2.1:
     resolution: {integrity: sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==}
@@ -10113,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'}
@@ -10228,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'}
@@ -10243,7 +10465,6 @@ packages:
   /escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
-    dev: true
 
   /escape-string-regexp@5.0.0:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
@@ -10273,7 +10494,6 @@ packages:
       optionator: 0.8.3
     optionalDependencies:
       source-map: 0.6.1
-    dev: true
 
   /eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.29.0)(eslint@8.52.0):
     resolution: {integrity: sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==}
@@ -10382,7 +10602,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-jest@27.2.3(@typescript-eslint/eslint-plugin@5.62.0):
+  /eslint-plugin-jest@27.2.3(@typescript-eslint/eslint-plugin@5.62.0)(eslint@8.52.0)(jest@26.6.3)(typescript@5.2.2):
     resolution: {integrity: sha512-sRLlSCpICzWuje66Gl9zvdF6mwD5X86I4u55hJyFBsxYOsBCmT5+kSUjf+fkFWVMMgpzNEupjW8WzUqi83hJAQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -10395,8 +10615,10 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)
-      '@typescript-eslint/utils': 5.62.0
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.52.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.52.0)(typescript@5.2.2)
+      eslint: 8.52.0
+      jest: 26.6.3
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -10491,13 +10713,6 @@ packages:
       synckit: 0.8.5
     dev: true
 
-  /eslint-plugin-react-hooks@4.6.0:
-    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-    dev: false
-
   /eslint-plugin-react-hooks@4.6.0(eslint@8.52.0):
     resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
     engines: {node: '>=10'}
@@ -10505,31 +10720,6 @@ packages:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
     dependencies:
       eslint: 8.52.0
-    dev: true
-
-  /eslint-plugin-react@7.33.2:
-    resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      array-includes: 3.1.6
-      array.prototype.flatmap: 1.3.1
-      array.prototype.tosorted: 1.1.1
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.0.15
-      estraverse: 5.3.0
-      jsx-ast-utils: 3.3.3
-      minimatch: 3.1.2
-      object.entries: 1.1.6
-      object.fromentries: 2.0.6
-      object.hasown: 1.1.2
-      object.values: 1.1.6
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.4
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.8
-    dev: false
 
   /eslint-plugin-react@7.33.2(eslint@8.52.0):
     resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
@@ -10554,7 +10744,6 @@ packages:
       resolve: 2.0.0-next.4
       semver: 6.3.1
       string.prototype.matchall: 4.0.8
-    dev: true
 
   /eslint-plugin-vue@9.17.0(eslint@8.52.0):
     resolution: {integrity: sha512-r7Bp79pxQk9I5XDP0k2dpUC7Ots3OSWgvGZNu3BxmKK6Zg7NgVtcOB6OCna5Kb9oQwJPl5hq183WD0SY5tZtIQ==}
@@ -10587,7 +10776,6 @@ packages:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
-    dev: true
 
   /eslint-utils@3.0.0(eslint@8.52.0):
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
@@ -10652,7 +10840,6 @@ packages:
       text-table: 0.2.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
@@ -10661,7 +10848,6 @@ packages:
       acorn: 8.10.0
       acorn-jsx: 5.3.2(acorn@8.10.0)
       eslint-visitor-keys: 3.4.3
-    dev: true
 
   /esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
@@ -10673,7 +10859,6 @@ packages:
     engines: {node: '>=0.10'}
     dependencies:
       estraverse: 5.3.0
-    dev: true
 
   /esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -10699,6 +10884,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:
@@ -10760,7 +10949,6 @@ packages:
 
   /exec-sh@0.3.6:
     resolution: {integrity: sha512-nQn+hI3yp+oD0huYhKwvYI32+JFeq+XkNcD1GAo3Y/MjxsfVGmrrzrnzjWiNY6f+pUCP440fThsFh5gZrRAU/w==}
-    dev: true
 
   /execa@0.7.0:
     resolution: {integrity: sha512-RztN09XglpYI7aBBrJCPW95jEH7YF1UEPOoX9yDhUTPdp7mK+CQvnLTuD10BNXZ3byLTu2uehZ8EcKT/4CGiFw==}
@@ -10799,7 +10987,6 @@ packages:
       p-finally: 1.0.0
       signal-exit: 3.0.7
       strip-eof: 1.0.0
-    dev: true
 
   /execa@4.1.0:
     resolution: {integrity: sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==}
@@ -10814,7 +11001,6 @@ packages:
       onetime: 5.1.2
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
-    dev: true
 
   /execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
@@ -10862,7 +11048,6 @@ packages:
   /exit@0.1.2:
     resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==}
     engines: {node: '>= 0.8.0'}
-    dev: true
 
   /expand-brackets@0.1.5:
     resolution: {integrity: sha512-hxx03P2dJxss6ceIeri9cmYOT4SRs3Zk3afZwWpOsRqLqprhTR8u++SlC+sFGsQr7WGFPdMF7Gjc1njDLDK6UA==}
@@ -10884,7 +11069,6 @@ packages:
       to-regex: 3.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /expand-range@1.8.2:
     resolution: {integrity: sha512-AFASGfIlnIbkKPQwX1yHaDjFvh/1gyKJODme52V6IORh69uEYgZp0o9C+qsIGNVEiuuhQU0CSSl++Rlegg1qvA==}
@@ -10929,7 +11113,6 @@ packages:
       jest-matcher-utils: 26.6.2
       jest-message-util: 26.6.2
       jest-regex-util: 26.0.0
-    dev: true
 
   /extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
@@ -10943,7 +11126,6 @@ packages:
     dependencies:
       assign-symbols: 1.0.0
       is-extendable: 1.0.1
-    dev: true
 
   /extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
@@ -10977,7 +11159,6 @@ packages:
       to-regex: 3.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /extract-from-css@0.4.4:
     resolution: {integrity: sha512-41qWGBdtKp9U7sgBxAQ7vonYqSXzgW/SiAYzq4tdWSVhAShvpVCH1nyvPQgjse6EdgbW7Y7ERdT3674/lKr65A==}
@@ -11039,14 +11220,12 @@ 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==}
 
   /fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-    dev: true
 
   /fast-loops@1.1.3:
     resolution: {integrity: sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==}
@@ -11068,7 +11247,6 @@ packages:
   /fastest-levenshtein@1.0.16:
     resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
     engines: {node: '>= 4.9.1'}
-    dev: true
 
   /fastest-stable-stringify@2.0.2:
     resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==}
@@ -11133,14 +11311,12 @@ packages:
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
       flat-cache: 3.0.4
-    dev: true
 
   /file-entry-cache@7.0.1:
     resolution: {integrity: sha512-uLfFktPmRetVCbHe5UPuekWrQ6hENufnA46qEGbfACkK5drjTTdQYUragRgMjHldcbYG+nslUerqMPjbBSHXjQ==}
     engines: {node: '>=12.0.0'}
     dependencies:
       flat-cache: 3.1.1
-    dev: true
 
   /file-name@0.1.0:
     resolution: {integrity: sha512-Q8SskhjF4eUk/xoQkmubwLkoHwOTv6Jj/WGtOVLKkZ0vvM+LipkSXugkn1F/+mjWXU32AXLZB3qaz0arUzgtRw==}
@@ -11203,7 +11379,6 @@ packages:
       is-number: 3.0.0
       repeat-string: 1.6.1
       to-regex-range: 2.1.1
-    dev: true
 
   /fill-range@7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
@@ -11284,7 +11459,6 @@ packages:
     dependencies:
       flatted: 3.2.7
       rimraf: 3.0.2
-    dev: true
 
   /flat-cache@3.1.1:
     resolution: {integrity: sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==}
@@ -11293,15 +11467,12 @@ packages:
       flatted: 3.2.9
       keyv: 4.5.4
       rimraf: 3.0.2
-    dev: true
 
   /flatted@3.2.7:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
-    dev: true
 
   /flatted@3.2.9:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
-    dev: true
 
   /flru@1.0.2:
     resolution: {integrity: sha512-kWyh8ADvHBFz6ua5xYOPnUroZTT/bwWfrCeL0Wj1dzG4/YOmOcfJ99W8dOVyyynJN35rZ9aCOtHChqQovV7yog==}
@@ -11350,7 +11521,6 @@ packages:
   /for-in@1.0.2:
     resolution: {integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /for-own@0.1.5:
     resolution: {integrity: sha512-SKmowqGTJoPzLO1T0BBJpkfp3EMacCMOuH40hOUbrbzElVktk4DioXVM99QkLCyKoiuOmyjgcWMpVz2xjE7LZw==}
@@ -11374,7 +11544,7 @@ packages:
   /forever-agent@0.6.1:
     resolution: {integrity: sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==}
 
-  /fork-ts-checker-webpack-plugin@8.0.0:
+  /fork-ts-checker-webpack-plugin@8.0.0(typescript@5.2.2):
     resolution: {integrity: sha512-mX3qW3idpueT2klaQXBzrIM/pHw+T0B/V9KHEvNrqijTq9NFnMZU6oreVxDYcf33P8a5cW+67PjodNHthGnNVg==}
     engines: {node: '>=12.13.0', yarn: '>=1.0.0'}
     peerDependencies:
@@ -11393,6 +11563,7 @@ packages:
       schema-utils: 3.1.1
       semver: 7.5.4
       tapable: 2.2.1
+      typescript: 5.2.2
     dev: false
 
   /form-data@2.3.3:
@@ -11410,7 +11581,6 @@ packages:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       mime-types: 2.1.35
-    dev: true
 
   /format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
@@ -11433,7 +11603,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       map-cache: 0.2.2
-    dev: true
 
   /from2@2.3.0:
     resolution: {integrity: sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==}
@@ -11660,14 +11829,12 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       pump: 3.0.0
-    dev: true
 
   /get-stream@5.2.0:
     resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
     engines: {node: '>=8'}
     dependencies:
       pump: 3.0.0
-    dev: true
 
   /get-stream@6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
@@ -11714,8 +11881,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:
@@ -11830,7 +11997,6 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob2base@0.0.12:
     resolution: {integrity: sha512-ZyqlgowMbfj2NPjxaZZ/EtsXlOch28FRXgMd64vqZWk1bT9+wvSRLYD1om9M7QfQru51zJPAT17qXm4/zd+9QA==}
@@ -11904,7 +12070,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       global-prefix: 3.0.0
-    dev: true
 
   /global-prefix@0.1.5:
     resolution: {integrity: sha512-gOPiyxcD9dJGCEArAhF4Hd0BAqvAe/JzERP7tYumE4yIkmIedPUVXcJFWbV3/p/ovIIvKjkrTk+f1UVkq7vvbw==}
@@ -11923,7 +12088,6 @@ packages:
       ini: 1.3.8
       kind-of: 6.0.3
       which: 1.3.1
-    dev: true
 
   /global-tunnel-ng@2.7.1:
     resolution: {integrity: sha512-4s+DyciWBV0eK148wqXxcmVAbFVPqtc3sEtUE/GTQfuU80rySLcMhUmHKSHI7/LDj8q0gDYI1lIhRRB7ieRAqg==}
@@ -11953,7 +12117,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       type-fest: 0.20.2
-    dev: true
 
   /globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
@@ -11977,7 +12140,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
@@ -11993,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==}
@@ -12007,7 +12169,6 @@ packages:
 
   /globjoin@0.1.4:
     resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
-    dev: true
 
   /google-auth-library@8.7.0:
     resolution: {integrity: sha512-1M0NG5VDIvJZEnstHbRdckLZESoJwguinwN8Dhae0j2ZKIQFIV63zxm6Fo6nM4xkgqUr2bbMtV5Dgo+Hy6oo0Q==}
@@ -12111,7 +12272,6 @@ packages:
   /growly@1.3.0:
     resolution: {integrity: sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==}
     requiresBuild: true
-    dev: true
     optional: true
 
   /gtoken@6.1.2:
@@ -12169,7 +12329,6 @@ packages:
   /hard-rejection@2.1.0:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
     engines: {node: '>=6'}
-    dev: true
 
   /harmony-reflect@1.6.2:
     resolution: {integrity: sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==}
@@ -12235,7 +12394,6 @@ packages:
       get-value: 2.0.6
       has-values: 1.0.0
       isobject: 3.0.1
-    dev: true
 
   /has-values@0.1.4:
     resolution: {integrity: sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==}
@@ -12247,7 +12405,6 @@ packages:
     dependencies:
       is-number: 3.0.0
       kind-of: 4.0.0
-    dev: true
 
   /has@1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
@@ -12306,6 +12463,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.4
+      '@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==}
 
@@ -12340,6 +12510,12 @@ packages:
     dependencies:
       '@types/hast': 2.3.4
 
+  /hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+    dependencies:
+      '@types/hast': 3.0.4
+    dev: false
+
   /hast-util-phrasing@2.0.2:
     resolution: {integrity: sha512-yGkCfPkkfCyiLfK6KEl/orMDr/zgCnq/NaO9HfULx6/Zga5fso5eqQA5Ov/JZVqACygvw9shRYWgXNcG2ilo7w==}
     dependencies:
@@ -12382,6 +12558,24 @@ packages:
       zwitch: 2.0.4
     dev: false
 
+  /hast-util-raw@9.0.2:
+    resolution: {integrity: sha512-PldBy71wO9Uq1kyaMch9AHIghtQvIwxBUkv823pKmkTM3oV1JxtsTNYdevMxvUHqcnOAuO65JKU2+0NOxc2ksA==}
+    dependencies:
+      '@types/hast': 3.0.4
+      '@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:
@@ -12419,6 +12613,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.4
+      '@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:
@@ -12449,6 +12665,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.4
+      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:
@@ -12467,6 +12695,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.4
+    dev: false
+
   /hast@1.0.0:
     resolution: {integrity: sha512-vFUqlRV5C+xqP76Wwq2SrM0kipnmpxJm7OfvVXpB35Fp+Fn4MV+ozr+JZr5qFvyR1q/U+Foim2x+3P+x9S1PLA==}
     deprecated: Renamed to rehype
@@ -12481,6 +12715,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.4
+      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
@@ -12498,7 +12742,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:
@@ -12543,7 +12787,6 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       lru-cache: 6.0.0
-    dev: true
 
   /hosted-git-info@6.1.1:
     resolution: {integrity: sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==}
@@ -12576,7 +12819,6 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       whatwg-encoding: 1.0.5
-    dev: true
 
   /html-entities@2.3.3:
     resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
@@ -12584,7 +12826,6 @@ packages:
 
   /html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
-    dev: true
 
   /html-minifier-terser@6.1.0:
     resolution: {integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==}
@@ -12608,7 +12849,6 @@ packages:
   /html-tags@3.3.1:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /html-to-text@9.0.5:
     resolution: {integrity: sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==}
@@ -12621,9 +12861,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'}
@@ -12704,7 +12952,6 @@ packages:
       debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /http-proxy-agent@5.0.0:
     resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
@@ -12757,7 +13004,6 @@ packages:
       debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /https-proxy-agent@7.0.2:
     resolution: {integrity: sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==}
@@ -12772,7 +13018,6 @@ packages:
   /human-signals@1.1.1:
     resolution: {integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==}
     engines: {node: '>=8.12.0'}
-    dev: true
 
   /human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
@@ -12927,7 +13172,6 @@ packages:
   /import-lazy@4.0.0:
     resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
     engines: {node: '>=8'}
-    dev: true
 
   /import-local@3.1.0:
     resolution: {integrity: sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==}
@@ -12936,7 +13180,6 @@ packages:
     dependencies:
       pkg-dir: 4.2.0
       resolve-cwd: 3.0.0
-    dev: true
 
   /imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -12979,6 +13222,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:
@@ -13099,14 +13346,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       kind-of: 3.2.2
-    dev: true
 
   /is-accessor-descriptor@1.0.0:
     resolution: {integrity: sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==}
     engines: {node: '>=0.10.0'}
     dependencies:
       kind-of: 6.0.3
-    dev: true
 
   /is-alphabetical@2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
@@ -13212,7 +13457,6 @@ packages:
     hasBin: true
     dependencies:
       ci-info: 2.0.0
-    dev: true
 
   /is-core-module@2.11.0:
     resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
@@ -13235,14 +13479,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       kind-of: 3.2.2
-    dev: true
 
   /is-data-descriptor@1.0.0:
     resolution: {integrity: sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==}
     engines: {node: '>=0.10.0'}
     dependencies:
       kind-of: 6.0.3
-    dev: true
 
   /is-date-object@1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -13260,7 +13502,6 @@ packages:
       is-accessor-descriptor: 0.1.6
       is-data-descriptor: 0.1.4
       kind-of: 5.1.0
-    dev: true
 
   /is-descriptor@1.0.2:
     resolution: {integrity: sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==}
@@ -13269,7 +13510,6 @@ packages:
       is-accessor-descriptor: 1.0.0
       is-data-descriptor: 1.0.0
       kind-of: 6.0.3
-    dev: true
 
   /is-directory@0.3.1:
     resolution: {integrity: sha512-yVChGzahRFvbkscn2MlwGismPO12i9+znNruC5gVEntG3qu0xQMzsGg/JFbrsqDOHtHFPci+V5aP5T9I+yeKqw==}
@@ -13334,7 +13574,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-plain-object: 2.0.4
-    dev: true
 
   /is-extglob@1.0.0:
     resolution: {integrity: sha512-7Q+VbVafe6x2T+Tu6NcOf6sRklazEPmBoB3IWk3WdGZM2iGUwU/Oe3Wtq5lSEkDTTlpp8yx+5t4pzO/i9Ty1ww==}
@@ -13373,7 +13612,6 @@ packages:
   /is-generator-fn@2.1.0:
     resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
     engines: {node: '>=6'}
-    dev: true
 
   /is-generator-function@1.0.10:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
@@ -13463,7 +13701,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       kind-of: 3.2.2
-    dev: true
 
   /is-number@4.0.0:
     resolution: {integrity: sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==}
@@ -13499,12 +13736,10 @@ packages:
   /is-path-inside@3.0.3:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /is-plain-obj@1.1.0:
     resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
@@ -13524,7 +13759,6 @@ packages:
   /is-plain-object@5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-posix-bracket@0.1.1:
     resolution: {integrity: sha512-Yu68oeXJ7LeWNmZ3Zov/xg/oDBnBK2RNxwYY1ilNJX+tKKZqgPK+qOn/Gs9jEu66KDY9Netf5XLKNGzas/vPfQ==}
@@ -13533,7 +13767,6 @@ packages:
 
   /is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
-    dev: true
 
   /is-primitive@2.0.0:
     resolution: {integrity: sha512-N3w1tFaRfk3UrPfqeRyD+GYDASU3W5VinKhlORy8EWVf/sIdDL9GAcew85XmktCfH+ngG7SRXEVDoO18WMdB/Q==}
@@ -13667,7 +13900,6 @@ packages:
   /is-windows@1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-wsl@1.1.0:
     resolution: {integrity: sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==}
@@ -13680,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
@@ -13758,7 +13997,6 @@ packages:
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /istanbul-lib-instrument@5.2.1:
     resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==}
@@ -13779,7 +14017,6 @@ packages:
       istanbul-lib-coverage: 3.2.0
       make-dir: 3.1.0
       supports-color: 7.2.0
-    dev: true
 
   /istanbul-lib-source-maps@4.0.1:
     resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
@@ -13790,7 +14027,6 @@ packages:
       source-map: 0.6.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /istanbul-reports@3.1.5:
     resolution: {integrity: sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==}
@@ -13798,7 +14034,6 @@ packages:
     dependencies:
       html-escaper: 2.0.2
       istanbul-lib-report: 3.0.0
-    dev: true
 
   /istextorbinary@2.6.0:
     resolution: {integrity: sha512-+XRlFseT8B3L9KyjxxLjfXSLMuErKDsd8DBNrsaxoViABMEZlOSCstwmw0qpoFX3+U6yWU1yhLudAe6/lETGGA==}
@@ -13839,7 +14074,6 @@ packages:
       '@jest/types': 26.6.2
       execa: 4.1.0
       throat: 5.0.0
-    dev: true
 
   /jest-cli@26.6.3:
     resolution: {integrity: sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==}
@@ -13865,7 +14099,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /jest-config@24.9.0:
     resolution: {integrity: sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==}
@@ -13926,7 +14159,6 @@ packages:
       - canvas
       - supports-color
       - utf-8-validate
-    dev: true
 
   /jest-diff@24.9.0:
     resolution: {integrity: sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==}
@@ -13946,7 +14178,6 @@ packages:
       diff-sequences: 26.6.2
       jest-get-type: 26.3.0
       pretty-format: 26.6.2
-    dev: true
 
   /jest-diff@27.5.1:
     resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==}
@@ -13970,7 +14201,6 @@ packages:
     engines: {node: '>= 10.14.2'}
     dependencies:
       detect-newline: 3.1.0
-    dev: true
 
   /jest-each@24.9.0:
     resolution: {integrity: sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==}
@@ -13994,7 +14224,6 @@ packages:
       jest-get-type: 26.3.0
       jest-util: 26.6.2
       pretty-format: 26.6.2
-    dev: true
 
   /jest-electron@0.1.12(jest@26.6.3):
     resolution: {integrity: sha512-10Hjr1kpyWz5cj9Xs/Xfb8yvF1LZPVmyEMHu/A/VhgvIV5yiP9uD8FHNc4HAfEnZHM+wvpR5YfveBTUAiNfwnA==}
@@ -14050,7 +14279,6 @@ packages:
       - canvas
       - supports-color
       - utf-8-validate
-    dev: true
 
   /jest-environment-node@24.9.0:
     resolution: {integrity: sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==}
@@ -14075,7 +14303,6 @@ packages:
       '@types/node': 20.8.9
       jest-mock: 26.6.2
       jest-util: 26.6.2
-    dev: true
 
   /jest-extended@0.11.5:
     resolution: {integrity: sha512-3RsdFpLWKScpsLD6hJuyr/tV5iFOrw7v6YjA3tPdda9sJwoHwcMROws5gwiIZfcwhHlJRwFJB2OUvGmF3evV/Q==}
@@ -14099,7 +14326,6 @@ packages:
   /jest-get-type@26.3.0:
     resolution: {integrity: sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==}
     engines: {node: '>= 10.14.2'}
-    dev: true
 
   /jest-get-type@27.5.1:
     resolution: {integrity: sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==}
@@ -14148,7 +14374,6 @@ packages:
       fsevents: 2.3.3
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /jest-haste-map@29.7.0:
     resolution: {integrity: sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==}
@@ -14223,7 +14448,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /jest-leak-detector@24.9.0:
     resolution: {integrity: sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==}
@@ -14239,7 +14463,6 @@ packages:
     dependencies:
       jest-get-type: 26.3.0
       pretty-format: 26.6.2
-    dev: true
 
   /jest-less-loader@0.2.0(less@4.2.0):
     resolution: {integrity: sha512-1UVS+j6O42jzhQG6baGNZZUMWtMNk+ZDQ3FYmk7xThfwcbvWbfOqFJ/n3e9gJI4A8yJTUz+5oEgPQkKNae4yCA==}
@@ -14275,7 +14498,6 @@ packages:
       jest-diff: 26.6.2
       jest-get-type: 26.3.0
       pretty-format: 26.6.2
-    dev: true
 
   /jest-matcher-utils@27.5.1:
     resolution: {integrity: sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==}
@@ -14316,7 +14538,6 @@ packages:
       pretty-format: 26.6.2
       slash: 3.0.0
       stack-utils: 2.0.6
-    dev: true
 
   /jest-mock@24.9.0:
     resolution: {integrity: sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==}
@@ -14331,7 +14552,6 @@ packages:
     dependencies:
       '@jest/types': 26.6.2
       '@types/node': 20.8.9
-    dev: true
 
   /jest-pnp-resolver@1.2.3(jest-resolve@24.9.0):
     resolution: {integrity: sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==}
@@ -14355,7 +14575,6 @@ packages:
         optional: true
     dependencies:
       jest-resolve: 26.6.2
-    dev: true
 
   /jest-raw-loader@1.0.1:
     resolution: {integrity: sha512-g9oaAjeC4/rIJk1Wd3RxVbOfMizowM7LSjEJqa4R9qDX0OjQNABXOhH+GaznUp+DjTGVPi2vPPbQXyX87DOnYg==}
@@ -14369,7 +14588,6 @@ packages:
   /jest-regex-util@26.0.0:
     resolution: {integrity: sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==}
     engines: {node: '>= 10.14.2'}
-    dev: true
 
   /jest-regex-util@29.6.3:
     resolution: {integrity: sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==}
@@ -14385,7 +14603,6 @@ packages:
       jest-snapshot: 26.6.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /jest-resolve@24.9.0:
     resolution: {integrity: sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==}
@@ -14410,7 +14627,6 @@ packages:
       read-pkg-up: 7.0.1
       resolve: 1.22.8
       slash: 3.0.0
-    dev: true
 
   /jest-runner@24.9.0:
     resolution: {integrity: sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==}
@@ -14471,7 +14687,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /jest-runtime@24.9.0:
     resolution: {integrity: sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==}
@@ -14545,7 +14760,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /jest-serializer@24.9.0:
     resolution: {integrity: sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==}
@@ -14558,7 +14772,6 @@ packages:
     dependencies:
       '@types/node': 20.8.9
       graceful-fs: 4.2.10
-    dev: true
 
   /jest-snapshot@24.9.0:
     resolution: {integrity: sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==}
@@ -14603,7 +14816,6 @@ packages:
       semver: 7.5.4
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /jest-url-loader@0.1.0:
     resolution: {integrity: sha512-XbYYGUuejpKe7bnAwIcNqy3lBFn2Ml7dtBCnZk0qOgAOBgsU4/M0hcq5mgW+l9gRjT6QAH/2eCtRN135Y6pcKw==}
@@ -14641,7 +14853,6 @@ packages:
       graceful-fs: 4.2.10
       is-ci: 2.0.0
       micromatch: 4.0.5
-    dev: true
 
   /jest-util@29.7.0:
     resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
@@ -14677,7 +14888,6 @@ packages:
       jest-get-type: 26.3.0
       leven: 3.1.0
       pretty-format: 26.6.2
-    dev: true
 
   /jest-watcher@26.6.2:
     resolution: {integrity: sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==}
@@ -14690,7 +14900,6 @@ packages:
       chalk: 4.1.2
       jest-util: 26.6.2
       string-length: 4.0.2
-    dev: true
 
   /jest-worker@24.9.0:
     resolution: {integrity: sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==}
@@ -14707,7 +14916,6 @@ packages:
       '@types/node': 20.8.9
       merge-stream: 2.0.0
       supports-color: 7.2.0
-    dev: true
 
   /jest-worker@29.4.3:
     resolution: {integrity: sha512-GLHN/GTAAMEy5BFdvpUfzr9Dr80zQqBrh0fz1mtRMe05hqP45+HfQltu7oTBfduD0UeZs09d+maFtFYAXFWvAA==}
@@ -14743,7 +14951,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /jiti@1.21.0:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
@@ -14890,7 +15097,6 @@ packages:
       - bufferutil
       - supports-color
       - utf-8-validate
-    dev: true
 
   /jsesc@0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
@@ -14914,7 +15120,6 @@ packages:
 
   /json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-    dev: true
 
   /json-parse-better-errors@1.0.2:
     resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
@@ -14927,14 +15132,12 @@ packages:
 
   /json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
-    dev: true
 
   /json-schema@0.4.0:
     resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
 
   /json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-    dev: true
 
   /json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
@@ -15031,7 +15234,6 @@ packages:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
       json-buffer: 3.0.1
-    dev: true
 
   /kind-of@3.2.2:
     resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==}
@@ -15044,17 +15246,14 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-buffer: 1.1.6
-    dev: true
 
   /kind-of@5.1.0:
     resolution: {integrity: sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /klaw@3.0.0:
     resolution: {integrity: sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==}
@@ -15065,7 +15264,6 @@ packages:
   /kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
-    dev: true
 
   /kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
@@ -15073,7 +15271,6 @@ packages:
 
   /known-css-properties@0.29.0:
     resolution: {integrity: sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==}
-    dev: true
 
   /kolorist@1.6.0:
     resolution: {integrity: sha512-dLkz37Ab97HWMx9KTes3Tbi3D1ln9fCAy2zr2YVExJasDRPGRaKcoE4fycWNtnCAJfjFqe0cnY+f8KT2JePEXQ==}
@@ -15158,7 +15355,6 @@ packages:
   /leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
-    dev: true
 
   /levn@0.3.0:
     resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
@@ -15166,7 +15362,6 @@ packages:
     dependencies:
       prelude-ls: 1.1.2
       type-check: 0.3.2
-    dev: true
 
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
@@ -15174,7 +15369,6 @@ packages:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
-    dev: true
 
   /lightningcss-darwin-arm64@1.19.0:
     resolution: {integrity: sha512-wIJmFtYX0rXHsXHSr4+sC5clwblEMji7HHQ4Ub1/CznVRxtCFha6JIt5JZaNf8vQrfdZnBxLLC6R8pC818jXqg==}
@@ -15276,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==}
@@ -15438,7 +15631,6 @@ packages:
 
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: true
 
   /lodash.mergewith@4.6.2:
     resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
@@ -15462,7 +15654,6 @@ packages:
 
   /lodash.truncate@4.4.2:
     resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
-    dev: true
 
   /lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
@@ -15633,24 +15824,20 @@ packages:
   /map-cache@0.2.2:
     resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /map-obj@1.0.1:
     resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /map-obj@4.3.0:
     resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /map-visit@1.0.0:
     resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==}
     engines: {node: '>=0.10.0'}
     dependencies:
       object-visit: 1.0.1
-    dev: true
 
   /markdown-it-anchor@8.6.6(@types/markdown-it@12.2.3)(markdown-it@12.3.2):
     resolution: {integrity: sha512-jRW30YGywD2ESXDc+l17AiritL0uVaSnWsb26f+68qaW9zgbIIr1f4v2Nsvc0+s0Z2N3uX6t/yAw7BwCQ1wMsA==}
@@ -15755,7 +15942,6 @@ packages:
 
   /mathml-tag-names@2.1.3:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
-    dev: true
 
   /md5.js@1.3.5:
     resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==}
@@ -15770,7 +15956,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==}
@@ -15799,6 +15985,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:
@@ -15817,6 +16012,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:
@@ -15831,6 +16045,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.1.0
+    dev: false
+
   /mdast-util-gfm-footnote@1.0.1:
     resolution: {integrity: sha512-p+PrYlkw9DeCRkTVw1duWqPRHX6Ywh2BNKJQcZbCwAuP/59B0Lk9kakuAd7KbQprVO4GzdW8eS5++A9PUSqIyw==}
     dependencies:
@@ -15838,12 +16062,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:
@@ -15854,12 +16100,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:
@@ -15873,6 +16142,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:
@@ -15885,6 +16168,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.4
+      '@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.4
+      '@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:
@@ -15897,12 +16213,32 @@ 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.4
+      '@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-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+    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:
@@ -15916,6 +16252,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.4
+      '@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:
@@ -15928,6 +16278,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.1.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==}
 
@@ -15937,12 +16300,17 @@ 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==}
 
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-    dev: true
 
   /mdn-data@2.0.4:
     resolution: {integrity: sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==}
@@ -15984,7 +16352,6 @@ packages:
       trim-newlines: 4.1.1
       type-fest: 1.4.0
       yargs-parser: 20.2.9
-    dev: true
 
   /meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
@@ -16035,6 +16402,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.1.0
+      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:
@@ -16063,6 +16451,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.1.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-footnote@1.0.4:
     resolution: {integrity: sha512-E/fmPmDqLiMUP8mLJ8NbJWJ4bTw6tS+FEQS8CcuDtZpILuOb2kjLqPEeAePF1djXROHXChM/wPJw0iS4kHCcIg==}
     dependencies:
@@ -16075,6 +16472,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.1.0
+      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:
@@ -16085,6 +16495,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:
@@ -16094,11 +16515,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.1.0
+      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:
@@ -16108,6 +16545,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.1.0
+      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:
@@ -16120,6 +16567,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:
@@ -16127,6 +16587,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.1.0
+      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:
@@ -16135,12 +16603,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.1.0
+      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.1.0
+      micromark-util-types: 2.0.0
+    dev: false
+
   /micromark-factory-title@1.0.2:
     resolution: {integrity: sha512-zily+Nr4yFqgMGRKLpTVsNl5L4PMu485fGFDOQJQBl2NFpjGte1e86zC0da93wf97jrc4+2G2GQudFMHn3IX+A==}
     dependencies:
@@ -16150,6 +16634,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.1.0
+      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:
@@ -16158,17 +16651,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.1.0
+      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.1.0:
+    resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==}
+    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:
@@ -16176,17 +16691,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.1.0
+      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:
@@ -16195,22 +16731,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.1.0
+      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:
@@ -16218,6 +16783,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.1.0
+      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:
@@ -16226,12 +16799,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:
@@ -16255,6 +16845,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.1.0
+      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'}
@@ -16293,7 +16907,6 @@ packages:
       to-regex: 3.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /micromatch@4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
@@ -16377,7 +16990,6 @@ packages:
   /min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
-    dev: true
 
   /minimalistic-assert@1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
@@ -16419,7 +17031,6 @@ packages:
       arrify: 1.0.1
       is-plain-obj: 1.1.0
       kind-of: 6.0.3
-    dev: true
 
   /minimist@1.2.7:
     resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
@@ -16469,7 +17080,6 @@ packages:
     dependencies:
       for-in: 1.0.2
       is-extendable: 1.0.1
-    dev: true
 
   /mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
@@ -16584,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'}
@@ -16601,7 +17217,6 @@ packages:
       to-regex: 3.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /nanopop@2.2.0:
     resolution: {integrity: sha512-E9JaHcxh3ere8/BEZHAcnuD10RluTSPyTToBvoFWS9/7DcCx6gyKjbn7M7Bx7E1veCxCuY1iO6h4+gdAf1j73Q==}
@@ -16611,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==}
@@ -16623,7 +17237,6 @@ packages:
 
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-    dev: true
 
   /needle@3.2.0:
     resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
@@ -16648,7 +17261,6 @@ packages:
 
   /nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
-    dev: true
 
   /no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
@@ -16754,7 +17366,6 @@ packages:
       shellwords: 0.1.1
       uuid: 8.3.2
       which: 2.0.2
-    dev: true
     optional: true
 
   /node-releases@2.0.13:
@@ -16795,14 +17406,12 @@ packages:
       is-core-module: 2.13.0
       semver: 7.5.4
       validate-npm-package-license: 3.0.4
-    dev: true
 
   /normalize-path@2.1.1:
     resolution: {integrity: sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==}
     engines: {node: '>=0.10.0'}
     dependencies:
       remove-trailing-separator: 1.1.0
-    dev: true
 
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
@@ -16994,7 +17603,6 @@ packages:
 
   /nwsapi@2.2.2:
     resolution: {integrity: sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==}
-    dev: true
 
   /oauth-sign@0.9.0:
     resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==}
@@ -17010,7 +17618,6 @@ packages:
       copy-descriptor: 0.1.1
       define-property: 0.2.5
       kind-of: 3.2.2
-    dev: true
 
   /object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
@@ -17039,7 +17646,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       isobject: 3.0.1
-    dev: true
 
   /object.assign@4.1.4:
     resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
@@ -17122,7 +17728,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       isobject: 3.0.1
-    dev: true
 
   /object.values@1.1.6:
     resolution: {integrity: sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==}
@@ -17181,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'}
@@ -17215,7 +17830,6 @@ packages:
       prelude-ls: 1.1.2
       type-check: 0.3.2
       word-wrap: 1.2.3
-    dev: true
 
   /optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
@@ -17227,7 +17841,6 @@ packages:
       levn: 0.4.1
       prelude-ls: 1.2.1
       type-check: 0.4.0
-    dev: true
 
   /ora@1.4.0:
     resolution: {integrity: sha512-iMK1DOQxzzh2MBlVsU42G80mnrvUhqsMh74phHtDlrcTZPK0pH6o7l7DRshK+0YsxDyEuaOkziVdvM3T0QTzpw==}
@@ -17297,7 +17910,6 @@ packages:
   /p-each-series@2.2.0:
     resolution: {integrity: sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==}
     engines: {node: '>=8'}
-    dev: true
 
   /p-filter@2.1.0:
     resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
@@ -17573,7 +18185,6 @@ packages:
   /pascalcase@0.1.1:
     resolution: {integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /path-browserify@0.0.1:
     resolution: {integrity: sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==}
@@ -17642,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==}
@@ -17795,7 +18405,6 @@ packages:
   /posix-character-classes@0.1.1:
     resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /postcss-attribute-case-insensitive@5.0.2(postcss@8.4.31):
     resolution: {integrity: sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==}
@@ -18059,7 +18668,6 @@ packages:
       postcss: ^8.3.5
     dependencies:
       postcss: 8.4.31
-    dev: true
 
   /postcss-load-config@3.1.4(postcss@8.4.31):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -18470,7 +19078,6 @@ packages:
 
   /postcss-resolve-nested-selector@0.1.1:
     resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==}
-    dev: true
 
   /postcss-safe-parser@6.0.0(postcss@8.4.31):
     resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
@@ -18479,7 +19086,6 @@ packages:
       postcss: ^8.3.3
     dependencies:
       postcss: 8.4.31
-    dev: true
 
   /postcss-selector-not@5.0.0(postcss@8.4.31):
     resolution: {integrity: sha512-/2K3A4TCP9orP4TNS7u3tGdRFVKqz/E6pX3aGnriPG0jU78of8wsUcqE4QAhWEU0d+WnMSF93Ah3F//vUtK+iQ==}
@@ -18515,7 +19121,7 @@ packages:
       svgo: 2.8.0
     dev: true
 
-  /postcss-syntax@0.36.2(postcss@8.4.31):
+  /postcss-syntax@0.36.2(postcss-less@6.0.0)(postcss@8.4.31):
     resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
     peerDependencies:
       postcss: '>=5.0.0'
@@ -18537,6 +19143,7 @@ packages:
         optional: true
     dependencies:
       postcss: 8.4.31
+      postcss-less: 6.0.0(postcss@8.4.31)
     dev: false
 
   /postcss-unique-selectors@5.1.1(postcss@8.4.31):
@@ -18585,12 +19192,10 @@ packages:
   /prelude-ls@1.1.2:
     resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
     engines: {node: '>= 0.8.0'}
-    dev: true
 
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
-    dev: true
 
   /prepend-http@1.0.4:
     resolution: {integrity: sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==}
@@ -18614,7 +19219,7 @@ packages:
       fast-diff: 1.2.0
     dev: true
 
-  /prettier-plugin-organize-imports@3.2.4:
+  /prettier-plugin-organize-imports@3.2.4(prettier@3.0.3)(typescript@5.2.2):
     resolution: {integrity: sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==}
     peerDependencies:
       '@volar/vue-language-plugin-pug': ^1.0.4
@@ -18626,9 +19231,12 @@ packages:
         optional: true
       '@volar/vue-typescript':
         optional: true
+    dependencies:
+      prettier: 3.0.3
+      typescript: 5.2.2
     dev: false
 
-  /prettier-plugin-packagejson@2.4.3:
+  /prettier-plugin-packagejson@2.4.3(prettier@3.0.3):
     resolution: {integrity: sha512-kPeeviJiwy0BgOSk7No8NmzzXfW4R9FYWni6ziA5zc1kGVVrKnBzMZdu2TUhI+I7h8/5Htt3vARYOk7KKJTTNQ==}
     peerDependencies:
       prettier: '>= 1.16.0'
@@ -18636,6 +19244,7 @@ packages:
       prettier:
         optional: true
     dependencies:
+      prettier: 3.0.3
       sort-package-json: 2.4.1
       synckit: 0.8.5
     dev: false
@@ -18650,7 +19259,6 @@ packages:
     resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==}
     engines: {node: '>=14'}
     hasBin: true
-    dev: true
 
   /pretty-error@4.0.0:
     resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==}
@@ -18684,7 +19292,6 @@ packages:
       ansi-regex: 5.0.1
       ansi-styles: 4.3.0
       react-is: 17.0.2
-    dev: true
 
   /pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
@@ -18701,10 +19308,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:
@@ -18763,7 +19372,6 @@ packages:
     dependencies:
       kleur: 3.0.3
       sisteransi: 1.0.5
-    dev: true
 
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
@@ -18831,6 +19439,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
@@ -18872,7 +19484,6 @@ packages:
     dependencies:
       end-of-stream: 1.4.4
       once: 1.4.0
-    dev: true
 
   /pumpify@1.5.1:
     resolution: {integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==}
@@ -18894,19 +19505,12 @@ packages:
     resolution: {integrity: sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==}
     engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
 
-  /qrcode.react@3.1.0:
-    resolution: {integrity: sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dev: false
-
   /qrcode.react@3.1.0(react@18.2.0):
     resolution: {integrity: sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
       react: 18.2.0
-    dev: true
 
   /qs@6.11.2:
     resolution: {integrity: sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==}
@@ -18936,7 +19540,6 @@ packages:
 
   /querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
-    dev: true
 
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@@ -18959,7 +19562,6 @@ packages:
   /quick-lru@5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
-    dev: true
 
   /quickselect@2.0.0:
     resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
@@ -19018,8 +19620,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
@@ -19027,7 +19629,7 @@ packages:
       resize-observer-polyfill: 1.5.1
     dev: false
 
-  /rc-cascader@3.20.0:
+  /rc-cascader@3.20.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-lkT9EEwOcYdjZ/jvhLoXGzprK1sijT3/Tp4BLxQQcHDZkkOzzwYQC9HgmKoJz0K7CukMfgvO9KqHeBdgE+pELw==}
     peerDependencies:
       react: '>=16.9.0'
@@ -19036,26 +19638,28 @@ packages:
       '@babel/runtime': 7.23.5
       array-tree-filter: 2.1.0
       classnames: 2.3.2
-      rc-select: 14.10.0
-      rc-tree: 5.8.2
-      rc-util: 5.38.1
-    dev: false
+      rc-select: 14.10.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: true
 
-  /rc-cascader@3.20.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-lkT9EEwOcYdjZ/jvhLoXGzprK1sijT3/Tp4BLxQQcHDZkkOzzwYQC9HgmKoJz0K7CukMfgvO9KqHeBdgE+pELw==}
+  /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.5
+      '@babel/runtime': 7.23.7
       array-tree-filter: 2.1.0
-      classnames: 2.3.2
-      rc-select: 14.10.0(react-dom@18.2.0)(react@18.2.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: true
+    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==}
@@ -19063,9 +19667,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)
@@ -19079,24 +19683,13 @@ 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)
     dev: false
 
-  /rc-checkbox@3.1.0:
-    resolution: {integrity: sha512-PAwpJFnBa3Ei+5pyqMMXdcKYKNBMS+TvSDiLdDnARnMJHC8ESxwPfm4Ao1gJiKtWLdmGfigascnCpwrHFgoOBQ==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /rc-checkbox@3.1.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-PAwpJFnBa3Ei+5pyqMMXdcKYKNBMS+TvSDiLdDnARnMJHC8ESxwPfm4Ao1gJiKtWLdmGfigascnCpwrHFgoOBQ==}
     peerDependencies:
@@ -19108,7 +19701,6 @@ 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-collapse@3.4.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-jpTwLgJzkhAgp2Wpi3xmbTbbYExg6fkptL67Uu5LCRVEj6wqmy0DHTjjeynsjOLsppHGHu41t1ELntZ0lEvS/Q==}
@@ -19116,8 +19708,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
@@ -19125,18 +19717,6 @@ packages:
       shallowequal: 1.1.0
     dev: false
 
-  /rc-collapse@3.7.2:
-    resolution: {integrity: sha512-ZRw6ipDyOnfLFySxAiCMdbHtb5ePAsB9mT17PA6y1mRD/W6KHRaZeb5qK/X9xDV1CqgyxMpzw0VdS74PCcUk4A==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-motion: 2.9.0
-      rc-util: 5.38.1
-    dev: false
-
   /rc-collapse@3.7.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-ZRw6ipDyOnfLFySxAiCMdbHtb5ePAsB9mT17PA6y1mRD/W6KHRaZeb5qK/X9xDV1CqgyxMpzw0VdS74PCcUk4A==}
     peerDependencies:
@@ -19149,7 +19729,6 @@ 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-dialog@9.0.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-s3U+24xWUuB6Bn2Lk/Qt6rufy+uT+QvWkiFhNBcO9APLxcFFczWamaq7x9h8SCuhfc1nHcW4y8NbMsnAjNnWyg==}
@@ -19157,28 +19736,15 @@ 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
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-dialog@9.3.4:
-    resolution: {integrity: sha512-975X3018GhR+EjZFbxA2Z57SX5rnu0G0/OxFgMMvZK4/hQWEm3MHaNvP4wXpxYDoJsp+xUvVW+GB9CMMCm81jA==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      '@rc-component/portal': 1.1.2
-      classnames: 2.3.2
-      rc-motion: 2.9.0
-      rc-util: 5.38.1
-    dev: false
-
   /rc-dialog@9.3.4(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-975X3018GhR+EjZFbxA2Z57SX5rnu0G0/OxFgMMvZK4/hQWEm3MHaNvP4wXpxYDoJsp+xUvVW+GB9CMMCm81jA==}
     peerDependencies:
@@ -19192,7 +19758,6 @@ 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@4.4.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-FYztwRs3uXnFOIf1hLvFxIQP9MiZJA+0w+Os8dfDh/90X7z/HqP/Yg+noLCIeHEbKln1Tqelv8ymCAN24zPcfQ==}
@@ -19200,8 +19765,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)
@@ -19213,42 +19778,44 @@ 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
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-drawer@6.5.2:
+  /rc-drawer@6.5.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-QckxAnQNdhh4vtmKN0ZwDf3iakO83W9eZcSKWYYTDv4qcD2fHhRAZJJ/OE6v2ZlQ2kSqCJX5gYssF4HJFvsEPQ==}
     peerDependencies:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': 7.23.5
-      '@rc-component/portal': 1.1.2
+      '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
-      rc-motion: 2.9.0
-      rc-util: 5.38.1
-    dev: false
+      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: true
 
-  /rc-drawer@6.5.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-QckxAnQNdhh4vtmKN0ZwDf3iakO83W9eZcSKWYYTDv4qcD2fHhRAZJJ/OE6v2ZlQ2kSqCJX5gYssF4HJFvsEPQ==}
+  /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.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
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
+    dev: false
 
   /rc-dropdown@4.0.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-OdpXuOcme1rm45cR0Jzgfl1otzmU4vuBVb+etXM8vcaULGokAKVpKlw8p6xzspG7jGd/XxShvq+N3VNEfk/l5g==}
@@ -19256,26 +19823,14 @@ 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
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-dropdown@4.1.0:
-    resolution: {integrity: sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==}
-    peerDependencies:
-      react: '>=16.11.0'
-      react-dom: '>=16.11.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      '@rc-component/trigger': 1.18.2
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /rc-dropdown@4.1.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==}
     peerDependencies:
@@ -19288,7 +19843,6 @@ 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-field-form@1.34.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-BdciU5C7dBO51/9ZKcMvK2f8zaaO12Lt1eBhlAo8nNv+6htlNcgY9DAkUlZ7gfyWjnCc1Oo4hHIXau1m6tLw1A==}
@@ -19297,25 +19851,13 @@ 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
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-field-form@1.41.0:
-    resolution: {integrity: sha512-k9AS0wmxfJfusWDP/YXWTpteDNaQ4isJx9UKxx4/e8Dub4spFeZ54/EuN2sYrMRID/+hUznPgVZeg+Gf7XSYCw==}
-    engines: {node: '>=8.x'}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      async-validator: 4.2.5
-      rc-util: 5.38.1
-    dev: false
-
   /rc-field-form@1.41.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-k9AS0wmxfJfusWDP/YXWTpteDNaQ4isJx9UKxx4/e8Dub4spFeZ54/EuN2sYrMRID/+hUznPgVZeg+Gf7XSYCw==}
     engines: {node: '>=8.x'}
@@ -19328,7 +19870,6 @@ 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-footer@0.6.8(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-JBZ+xcb6kkex8XnBd4VHw1ZxjV6kmcwUumSHaIFdka2qzMCo7Klcy4sI6G0XtUpG/vtpislQCc+S9Bc+NLHYMg==}
@@ -19336,8 +19877,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
@@ -19348,9 +19889,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)
@@ -19358,20 +19899,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-image@7.5.1:
-    resolution: {integrity: sha512-Z9loECh92SQp0nSipc0MBuf5+yVC05H/pzC+Nf8xw1BKDFUJzUeehYBjaWlxly8VGBZJcTHYri61Fz9ng1G3Ag==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      '@rc-component/portal': 1.1.2
-      classnames: 2.3.2
-      rc-dialog: 9.3.4
-      rc-motion: 2.9.0
-      rc-util: 5.38.1
-    dev: false
-
   /rc-image@7.5.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Z9loECh92SQp0nSipc0MBuf5+yVC05H/pzC+Nf8xw1BKDFUJzUeehYBjaWlxly8VGBZJcTHYri61Fz9ng1G3Ag==}
     peerDependencies:
@@ -19386,7 +19913,6 @@ 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-number@7.3.11(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-aMWPEjFeles6PQnMqP5eWpxzsvHm9rh1jQOWXExUEIxhX62Fyl/ptifLHOn17+waDG1T/YUb6flfJbvwRhHrbA==}
@@ -19394,14 +19920,14 @@ 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)
     dev: false
 
-  /rc-input-number@8.4.0:
+  /rc-input-number@8.4.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-B6rziPOLRmeP7kcS5qbdC5hXvvDHYKV4vUxmahevYx2E6crS2bRi0xLDjhJ0E1HtOWo8rTmaE2EBJAkTCZOLdA==}
     peerDependencies:
       react: '>=16.9.0'
@@ -19410,24 +19936,26 @@ packages:
       '@babel/runtime': 7.23.5
       '@rc-component/mini-decimal': 1.1.0
       classnames: 2.3.2
-      rc-input: 1.3.6
-      rc-util: 5.38.1
-    dev: false
+      rc-input: 1.3.6(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: true
 
-  /rc-input-number@8.4.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-B6rziPOLRmeP7kcS5qbdC5hXvvDHYKV4vUxmahevYx2E6crS2bRi0xLDjhJ0E1HtOWo8rTmaE2EBJAkTCZOLdA==}
+  /rc-input-number@8.6.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-gaAMUKtUKLktJ3Yx93tjgYY1M0HunnoqzPEqkb9//Ydup4DcG0TFL9yHBA3pgVdNIt5f0UWyHCgFBj//JxeD6A==}
     peerDependencies:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.23.7
       '@rc-component/mini-decimal': 1.1.0
-      classnames: 2.3.2
-      rc-input: 1.3.6(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-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
+    dev: false
 
   /rc-input@0.1.4(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-FqDdNz+fV2dKNgfXzcSLKvC+jEs1709t7nD+WdfjrdSaOcefpgc7BUJYadc3usaING+b7ediMTfKxuJBsEFbXA==}
@@ -19435,14 +19963,14 @@ 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)
     dev: false
 
-  /rc-input@1.3.6:
+  /rc-input@1.3.6(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-/HjTaKi8/Ts4zNbYaB5oWCquxFyFQO4Co1MnMgoCeGJlpe7k8Eir2HN0a0F9IHDmmo+GYiGgPpz7w/d/krzsJA==}
     peerDependencies:
       react: '>=16.0.0'
@@ -19450,21 +19978,23 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.5
       classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
+      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.3.6(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-/HjTaKi8/Ts4zNbYaB5oWCquxFyFQO4Co1MnMgoCeGJlpe7k8Eir2HN0a0F9IHDmmo+GYiGgPpz7w/d/krzsJA==}
+  /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.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)
-    dev: true
+    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==}
@@ -19472,8 +20002,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)
@@ -19482,19 +20012,21 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-mentions@2.9.1:
-    resolution: {integrity: sha512-cZuElWr/5Ws0PXx1uxobxfYh4mqUw2FitfabR62YnWgm+WAfDyXZXqZg5DxXW+M1cgVvntrQgDDd9LrihrXzew==}
+  /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.5
-      '@rc-component/trigger': 1.18.2
-      classnames: 2.3.2
-      rc-input: 1.3.6
-      rc-menu: 9.12.4
-      rc-textarea: 1.5.3
-      rc-util: 5.38.1
+      '@babel/runtime': 7.23.7
+      '@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)
+      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):
@@ -19514,20 +20046,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /rc-menu@9.12.4:
-    resolution: {integrity: sha512-t2NcvPLV1mFJzw4F21ojOoRVofK2rWhpKPx69q2raUsiHPDP6DDevsBILEYdsIegqBeSXoWs2bf6CueBKg3BFg==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      '@rc-component/trigger': 1.18.2
-      classnames: 2.3.2
-      rc-motion: 2.9.0
-      rc-overflow: 1.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /rc-menu@9.12.4(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-t2NcvPLV1mFJzw4F21ojOoRVofK2rWhpKPx69q2raUsiHPDP6DDevsBILEYdsIegqBeSXoWs2bf6CueBKg3BFg==}
     peerDependencies:
@@ -19542,7 +20060,6 @@ 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.8.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-179weouypfjWJSRvvoo/vPy+StojsMzK2XC5jRNhL1ryt/N/8wAFESte8K6jZJkNp9DHDLFTe+dCGmikKpiFuA==}
@@ -19550,8 +20067,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)
@@ -19561,17 +20078,6 @@ packages:
       shallowequal: 1.1.0
     dev: false
 
-  /rc-motion@2.9.0:
-    resolution: {integrity: sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /rc-motion@2.9.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==}
     peerDependencies:
@@ -19591,27 +20097,14 @@ 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
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-notification@5.3.0:
-    resolution: {integrity: sha512-WCf0uCOkZ3HGfF0p1H4Sgt7aWfipxORWTPp7o6prA3vxwtWhtug3GfpYls1pnBp4WA+j8vGIi5c2/hQRpGzPcQ==}
-    engines: {node: '>=8.x'}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-motion: 2.9.0
-      rc-util: 5.38.1
-    dev: false
-
   /rc-notification@5.3.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-WCf0uCOkZ3HGfF0p1H4Sgt7aWfipxORWTPp7o6prA3vxwtWhtug3GfpYls1pnBp4WA+j8vGIi5c2/hQRpGzPcQ==}
     engines: {node: '>=8.x'}
@@ -19625,19 +20118,6 @@ 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-overflow@1.3.2:
-    resolution: {integrity: sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-resize-observer: 1.4.0
-      rc-util: 5.38.1
-    dev: false
 
   /rc-overflow@1.3.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==}
@@ -19658,13 +20138,13 @@ 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
 
-  /rc-pagination@4.0.3:
+  /rc-pagination@4.0.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-s1MNwyU83AgycikYckRdpmkN+4ZZuul0E0YdDp7dMgcjg/d2fak767ZIbLP4Q5YPPla7NDorfVFTvGQAPj6jXA==}
     peerDependencies:
       react: '>=16.9.0'
@@ -19672,21 +20152,23 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.5
       classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
+      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.3(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-s1MNwyU83AgycikYckRdpmkN+4ZZuul0E0YdDp7dMgcjg/d2fak767ZIbLP4Q5YPPla7NDorfVFTvGQAPj6jXA==}
+  /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.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)
-    dev: true
+    dev: false
 
   /rc-picker@2.7.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-oZH6FZ3j4iuBxHB4NvQ6ABRsS2If/Kpty1YFFsji7/aej6ruGmfM7WnJWQ88AoPfpJ++ya5z+nVEA8yCRYGKyw==}
@@ -19695,10 +20177,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)
@@ -19707,7 +20189,7 @@ packages:
       shallowequal: 1.1.0
     dev: false
 
-  /rc-picker@3.14.6(dayjs@1.11.7):
+  /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:
@@ -19728,10 +20210,12 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.23.5
-      '@rc-component/trigger': 1.18.2
+      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
-      dayjs: 1.11.7
-      rc-util: 5.38.1
+      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):
@@ -19769,24 +20253,13 @@ 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)
     dev: false
 
-  /rc-progress@3.5.1:
-    resolution: {integrity: sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /rc-progress@3.5.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==}
     peerDependencies:
@@ -19798,19 +20271,6 @@ 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-rate@2.12.0:
-    resolution: {integrity: sha512-g092v5iZCdVzbjdn28FzvWebK2IutoVoiTeqoLTj9WM7SjA/gOJIw5/JFZMRyJYYVe1jLAU2UhAfstIpCNRozg==}
-    engines: {node: '>=8.x'}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
 
   /rc-rate@2.12.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-g092v5iZCdVzbjdn28FzvWebK2IutoVoiTeqoLTj9WM7SjA/gOJIw5/JFZMRyJYYVe1jLAU2UhAfstIpCNRozg==}
@@ -19824,7 +20284,6 @@ 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-rate@2.9.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-SaiZFyN8pe0Fgphv8t3+kidlej+cq/EALkAJAc3A0w0XcPaH2L1aggM8bhe1u6GAGuQNAoFvTLjw4qLPGRKV5g==}
@@ -19833,25 +20292,13 @@ 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)
     dev: false
 
-  /rc-resize-observer@1.4.0:
-    resolution: {integrity: sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-      resize-observer-polyfill: 1.5.1
-    dev: false
-
   /rc-resize-observer@1.4.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==}
     peerDependencies:
@@ -19871,26 +20318,14 @@ 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
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-segmented@2.2.2:
-    resolution: {integrity: sha512-Mq52M96QdHMsNdE/042ibT5vkcGcD5jxKp7HgPC2SRofpia99P5fkfHy1pEaajLMF/kj0+2Lkq1UZRvqzo9mSA==}
-    peerDependencies:
-      react: '>=16.0.0'
-      react-dom: '>=16.0.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-motion: 2.9.0
-      rc-util: 5.38.1
-    dev: false
-
   /rc-segmented@2.2.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Mq52M96QdHMsNdE/042ibT5vkcGcD5jxKp7HgPC2SRofpia99P5fkfHy1pEaajLMF/kj0+2Lkq1UZRvqzo9mSA==}
     peerDependencies:
@@ -19903,7 +20338,6 @@ 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-select@14.1.18(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-4JgY3oG2Yz68ECMUSCON7mtxuJvCSj+LJpHEg/AONaaVBxIIrmI/ZTuMJkyojall/X50YdBe5oMKqHHPNiPzEg==}
@@ -19912,8 +20346,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)
@@ -19923,7 +20357,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-select@14.10.0:
+  /rc-select@14.10.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-TsIJTYafTTapCA32LLNpx/AD6ntepR1TG8jEVx35NiAAWCPymhUfuca8kRcUNd3WIGVMDcMKn9kkphoxEz+6Ag==}
     engines: {node: '>=8.x'}
     peerDependencies:
@@ -19931,31 +20365,33 @@ packages:
       react-dom: '*'
     dependencies:
       '@babel/runtime': 7.23.5
-      '@rc-component/trigger': 1.18.2
+      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
-      rc-motion: 2.9.0
-      rc-overflow: 1.3.2
-      rc-util: 5.38.1
-      rc-virtual-list: 3.11.3
-    dev: false
+      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: true
 
-  /rc-select@14.10.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-TsIJTYafTTapCA32LLNpx/AD6ntepR1TG8jEVx35NiAAWCPymhUfuca8kRcUNd3WIGVMDcMKn9kkphoxEz+6Ag==}
+  /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.5
-      '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
-      classnames: 2.3.2
+      '@babel/runtime': 7.23.7
+      '@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)
       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: true
+    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==}
@@ -19964,26 +20400,14 @@ 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)
       shallowequal: 1.1.0
     dev: false
 
-  /rc-slider@10.5.0:
-    resolution: {integrity: sha512-xiYght50cvoODZYI43v3Ylsqiw14+D7ELsgzR40boDZaya1HFa1Etnv9MDkQE8X/UrXAffwv2AcNAhslgYuDTw==}
-    engines: {node: '>=8.x'}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /rc-slider@10.5.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-xiYght50cvoODZYI43v3Ylsqiw14+D7ELsgzR40boDZaya1HFa1Etnv9MDkQE8X/UrXAffwv2AcNAhslgYuDTw==}
     engines: {node: '>=8.x'}
@@ -19996,7 +20420,6 @@ 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-steps@5.0.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-9TgRvnVYirdhbV0C3syJFj9EhCRqoJAsxt4i1rED5o8/ZcSv5TLIYyo4H8MCjLPvbe2R+oBAm/IYBEtC+OS1Rw==}
@@ -20005,25 +20428,13 @@ 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)
     dev: false
 
-  /rc-steps@6.0.1:
-    resolution: {integrity: sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==}
-    engines: {node: '>=8.x'}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /rc-steps@6.0.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==}
     engines: {node: '>=8.x'}
@@ -20036,7 +20447,6 @@ 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-switch@3.2.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-+gUJClsZZzvAHGy1vZfnwySxj+MjLlGRyXKXScrtCTcmiYNPzxDFOxdQ/3pK1Kt/0POvwJ/6ALOR8gwdXGhs+A==}
@@ -20044,24 +20454,13 @@ 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)
     dev: false
 
-  /rc-switch@4.1.0:
-    resolution: {integrity: sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /rc-switch@4.1.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==}
     peerDependencies:
@@ -20073,7 +20472,6 @@ 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-table@7.26.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-0cD8e6S+DTGAt5nBZQIPFYEaIukn17sfa5uFL98faHlH/whZzD8ii3dbFL4wmUDEL4BLybhYop+QUfZJ4CPvNQ==}
@@ -20082,8 +20480,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
@@ -20091,21 +20489,6 @@ packages:
       shallowequal: 1.1.0
     dev: false
 
-  /rc-table@7.36.0:
-    resolution: {integrity: sha512-3xVcdCC5OLeOOhaCg+5Lps2oPreM/GWXmUXWTSX4p6vF7F76ABM4dfPpMJ9Dnf5yGRyh+8pe7FRyhRVnWw2H/w==}
-    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
-      classnames: 2.3.2
-      rc-resize-observer: 1.4.0
-      rc-util: 5.38.1
-      rc-virtual-list: 3.11.3
-    dev: false
-
   /rc-table@7.36.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3xVcdCC5OLeOOhaCg+5Lps2oPreM/GWXmUXWTSX4p6vF7F76ABM4dfPpMJ9Dnf5yGRyh+8pe7FRyhRVnWw2H/w==}
     engines: {node: '>=8.x'}
@@ -20123,20 +20506,21 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /rc-tabs@12.14.1:
-    resolution: {integrity: sha512-1xlE7JQNYxD5RwBsM7jf2xSdUrkmTSDFLFEm2gqAgnsRlOGydEzXXNAVTOT6QcgM1G/gCm+AgG+FYPUGb4Hs4g==}
+  /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
-      classnames: 2.3.2
-      rc-dropdown: 4.1.0
-      rc-menu: 9.12.4
-      rc-motion: 2.9.0
-      rc-resize-observer: 1.4.0
-      rc-util: 5.38.1
+      '@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)
+      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):
@@ -20155,7 +20539,6 @@ 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-tabs@12.5.6(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-aArXHzxK7YICxe+622CZ8FlO5coMi8P7E6tXpseCPKm1gdTjUt0LrQK1/AxcrRXZXG3K4QqhlKmET0+cX5DQaQ==}
@@ -20164,8 +20547,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)
@@ -20175,32 +20558,37 @@ packages:
       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==}
+  /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.5
-      classnames: 2.3.2
+      '@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)
-      shallowequal: 1.1.0
     dev: false
 
-  /rc-textarea@1.5.3:
-    resolution: {integrity: sha512-oH682ghHx++stFNYrosPRBfwsypywrTXpaD0/5Z8MPkUOnyOQUaY9ueL9tMu6BP1LfsuYQ1VLpg5OtshViLNgA==}
+  /rc-textarea@0.4.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-IQPd1CDI3mnMlkFyzt2O4gQ2lxUsnBAeJEoZGJnkkXgORNqyM9qovdrCj9NzcRfpHgLdzaEbU3AmobNFGUznwQ==}
     peerDependencies:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-input: 1.3.6
-      rc-resize-observer: 1.4.0
-      rc-util: 5.38.1
+      '@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
+      react-dom: 18.2.0(react@18.2.0)
+      shallowequal: 1.1.0
     dev: false
 
   /rc-textarea@1.5.3(react-dom@18.2.0)(react@18.2.0):
@@ -20218,28 +20606,32 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /rc-tooltip@5.2.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-jtQzU/18S6EI3lhSGoDYhPqNpWajMtS5VV/ld1LwyfrDByQpYmw/LW6U7oFXXLukjfDHQ7Ju705A82PRNFWYhg==}
+  /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.5
-      classnames: 2.3.2
-      rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
+      '@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@6.1.2:
-    resolution: {integrity: sha512-89zwvybvCxGJu3+gGF8w5AXd4HHk6hIN7K0vZbkzjilVaEAIWPqc1fcyeUeP71n3VCcw7pTL9LyFupFbrx8gHw==}
+  /rc-tooltip@5.2.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-jtQzU/18S6EI3lhSGoDYhPqNpWajMtS5VV/ld1LwyfrDByQpYmw/LW6U7oFXXLukjfDHQ7Ju705A82PRNFWYhg==}
     peerDependencies:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      '@rc-component/trigger': 1.18.2
-      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)
     dev: false
 
   /rc-tooltip@6.1.2(react-dom@18.2.0)(react@18.2.0):
@@ -20255,17 +20647,17 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /rc-tree-select@5.15.0:
-    resolution: {integrity: sha512-YJHfdO6azFnR0/JuNBZLDptGE4/RGfVeHAafUIYcm2T3RBkL1O8aVqiHvwIyLzdK59ry0NLrByd+3TkfpRM+9Q==}
+  /rc-tooltip@6.1.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-HMSbSs5oieZ7XddtINUddBLSVgsnlaSb3bZrzzGWjXa7/B7nNedmsuz72s7EWFEro9mNa7RyF3gOXKYqvJiTcQ==}
     peerDependencies:
-      react: '*'
-      react-dom: '*'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-select: 14.10.0
-      rc-tree: 5.8.2
-      rc-util: 5.38.1
+      '@babel/runtime': 7.23.7
+      '@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)
     dev: false
 
   /rc-tree-select@5.15.0(react-dom@18.2.0)(react@18.2.0):
@@ -20283,14 +20675,29 @@ packages:
       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==}
     peerDependencies:
       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)
@@ -20305,8 +20712,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)
@@ -20314,20 +20721,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-tree@5.8.2:
-    resolution: {integrity: sha512-xH/fcgLHWTLmrSuNphU8XAqV7CdaOQgm4KywlLGNoTMhDAcNR3GVNP6cZzb0GrKmIZ9yae+QLot/cAgUdPRMzg==}
-    engines: {node: '>=10.x'}
-    peerDependencies:
-      react: '*'
-      react-dom: '*'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-motion: 2.9.0
-      rc-util: 5.38.1
-      rc-virtual-list: 3.11.3
-    dev: false
-
   /rc-tree@5.8.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-xH/fcgLHWTLmrSuNphU8XAqV7CdaOQgm4KywlLGNoTMhDAcNR3GVNP6cZzb0GrKmIZ9yae+QLot/cAgUdPRMzg==}
     engines: {node: '>=10.x'}
@@ -20342,7 +20735,6 @@ 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-trigger@5.3.4(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-mQv+vas0TwKcjAO2izNPkqR4j86OemLRmvL2nOzdP9OWNWA1ivoTt5hzFqYNW9zACwmTezRiN8bttrC7cZzYSw==}
@@ -20351,8 +20743,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)
@@ -20360,17 +20752,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /rc-upload@4.3.5:
-    resolution: {integrity: sha512-EHlKJbhkgFSQHliTj9v/2K5aEuFwfUQgZARzD7AmAPOneZEPiCNF3n6PEWIuqz9h7oq6FuXgdR67sC5BWFxJbA==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-util: 5.38.1
-    dev: false
-
   /rc-upload@4.3.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-EHlKJbhkgFSQHliTj9v/2K5aEuFwfUQgZARzD7AmAPOneZEPiCNF3n6PEWIuqz9h7oq6FuXgdR67sC5BWFxJbA==}
     peerDependencies:
@@ -20383,14 +20764,17 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  /rc-util@5.38.1:
-    resolution: {integrity: sha512-e4ZMs7q9XqwTuhIK7zBIVFltUtMSjphuPPQXHoHlzRzNdOwUxDejo0Zls5HYaJfRKNURcsS/ceKVULlhjBrxng==}
+  /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
-      react-is: 18.2.0
+      '@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-util@5.38.1(react-dom@18.2.0)(react@18.2.0):
@@ -20404,19 +20788,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
       react-is: 18.2.0
 
-  /rc-virtual-list@3.11.3:
-    resolution: {integrity: sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==}
-    engines: {node: '>=8.x'}
-    peerDependencies:
-      react: '*'
-      react-dom: '*'
-    dependencies:
-      '@babel/runtime': 7.23.5
-      classnames: 2.3.2
-      rc-resize-observer: 1.4.0
-      rc-util: 5.38.1
-    dev: false
-
   /rc-virtual-list@3.11.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==}
     engines: {node: '>=8.x'}
@@ -20459,20 +20830,6 @@ packages:
       - react-native
     dev: false
 
-  /react-color@2.19.3:
-    resolution: {integrity: sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==}
-    peerDependencies:
-      react: '*'
-    dependencies:
-      '@icons/material': 0.2.4
-      lodash: 4.17.21
-      lodash-es: 4.17.21
-      material-colors: 1.2.6
-      prop-types: 15.8.1
-      reactcss: 1.2.3
-      tinycolor2: 1.6.0
-    dev: false
-
   /react-color@2.19.3(react@18.2.0):
     resolution: {integrity: sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==}
     peerDependencies:
@@ -20486,15 +20843,15 @@ packages:
       react: 18.2.0
       reactcss: 1.2.3(react@18.2.0)
       tinycolor2: 1.6.0
-    dev: true
 
-  /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):
@@ -20525,12 +20882,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
+      '@babel/runtime': 7.23.7
+      react: 18.2.0
     dev: false
 
   /react-error-overlay@6.0.9:
@@ -20547,30 +20905,32 @@ packages:
       prop-types: 15.8.1
     dev: false
 
-  /react-helmet-async@1.3.0:
+  /react-helmet-async@1.3.0(react-dom@18.1.0)(react@18.1.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
+      '@babel/runtime': 7.23.7
       invariant: 2.2.4
       prop-types: 15.8.1
+      react: 18.1.0
+      react-dom: 18.1.0(react@18.1.0)
       react-fast-compare: 3.2.0
       shallowequal: 1.1.0
     dev: false
 
-  /react-helmet-async@1.3.0(react-dom@18.1.0)(react@18.1.0):
+  /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
+      '@babel/runtime': 7.23.7
       invariant: 2.2.4
       prop-types: 15.8.1
-      react: 18.1.0
-      react-dom: 18.1.0(react@18.1.0)
+      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
@@ -20587,7 +20947,7 @@ packages:
       react-side-effect: 2.1.2(react@18.2.0)
     dev: false
 
-  /react-intl@6.5.5:
+  /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
@@ -20598,14 +20958,16 @@ packages:
     dependencies:
       '@formatjs/ecma402-abstract': 1.18.0
       '@formatjs/icu-messageformat-parser': 2.7.3
-      '@formatjs/intl': 2.9.9
+      '@formatjs/intl': 2.9.9(typescript@5.2.2)
       '@formatjs/intl-displaynames': 6.6.4
       '@formatjs/intl-listformat': 7.5.3
       '@types/hoist-non-react-statics': 3.3.1
       '@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
 
   /react-is@16.13.1:
@@ -20621,6 +20983,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.4
+      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
@@ -20651,26 +21034,28 @@ packages:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
 
-  /react-router-dom@6.3.0:
+  /react-router-dom@6.3.0(react-dom@18.1.0)(react@18.1.0):
     resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
     dependencies:
       history: 5.3.0
-      react-router: 6.3.0
+      react: 18.1.0
+      react-dom: 18.1.0(react@18.1.0)
+      react-router: 6.3.0(react@18.1.0)
     dev: false
 
-  /react-router-dom@6.3.0(react-dom@18.1.0)(react@18.1.0):
+  /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.1.0
-      react-dom: 18.1.0(react@18.1.0)
-      react-router: 6.3.0(react@18.1.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):
@@ -20686,21 +21071,22 @@ packages:
       react-router: 6.6.1(react@18.2.0)
     dev: false
 
-  /react-router@6.3.0:
+  /react-router@6.3.0(react@18.1.0):
     resolution: {integrity: sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==}
     peerDependencies:
       react: '>=16.8'
     dependencies:
       history: 5.3.0
+      react: 18.1.0
     dev: false
 
-  /react-router@6.3.0(react@18.1.0):
+  /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.1.0
+      react: 18.2.0
     dev: false
 
   /react-router@6.6.1(react@18.2.0):
@@ -20727,7 +21113,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
@@ -20802,14 +21188,6 @@ packages:
     dependencies:
       loose-envify: 1.4.0
 
-  /reactcss@1.2.3:
-    resolution: {integrity: sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==}
-    peerDependencies:
-      react: '*'
-    dependencies:
-      lodash: 4.17.21
-    dev: false
-
   /reactcss@1.2.3(react@18.2.0):
     resolution: {integrity: sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==}
     peerDependencies:
@@ -20817,7 +21195,6 @@ packages:
     dependencies:
       lodash: 4.17.21
       react: 18.2.0
-    dev: true
 
   /read-pkg-up@4.0.0:
     resolution: {integrity: sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==}
@@ -20834,7 +21211,6 @@ packages:
       find-up: 4.1.0
       read-pkg: 5.2.0
       type-fest: 0.8.1
-    dev: true
 
   /read-pkg-up@8.0.0:
     resolution: {integrity: sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==}
@@ -20843,7 +21219,6 @@ packages:
       find-up: 5.0.0
       read-pkg: 6.0.0
       type-fest: 1.4.0
-    dev: true
 
   /read-pkg@3.0.0:
     resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
@@ -20862,7 +21237,6 @@ packages:
       normalize-package-data: 2.5.0
       parse-json: 5.2.0
       type-fest: 0.6.0
-    dev: true
 
   /read-pkg@6.0.0:
     resolution: {integrity: sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==}
@@ -20872,7 +21246,6 @@ packages:
       normalize-package-data: 3.0.3
       parse-json: 5.2.0
       type-fest: 1.4.0
-    dev: true
 
   /readable-stream@2.3.7:
     resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==}
@@ -20940,7 +21313,6 @@ packages:
     dependencies:
       indent-string: 5.0.0
       strip-indent: 4.0.0
-    dev: true
 
   /redeyed@2.1.1:
     resolution: {integrity: sha512-FNpGGo1DycYAdnrKFxCMmKYgo/mILAqtRYbkdQD8Ep/Hk2PQ5+aEAEx+IU713RTDmuBaH0c8P5ZozurNu5ObRQ==}
@@ -21005,7 +21377,6 @@ packages:
     dependencies:
       extend-shallow: 3.0.2
       safe-regex: 1.1.0
-    dev: true
 
   /regexp.prototype.flags@1.4.3:
     resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
@@ -21117,6 +21488,14 @@ packages:
       unified: 10.1.2
     dev: true
 
+  /rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+    dependencies:
+      '@types/hast': 3.0.4
+      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:
@@ -21175,6 +21554,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:
@@ -21195,6 +21587,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:
@@ -21203,6 +21606,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.4
+      '@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:
@@ -21211,6 +21624,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'}
@@ -21227,7 +21648,6 @@ packages:
 
   /remove-trailing-separator@1.1.0:
     resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==}
-    dev: true
 
   /rename-keys@1.2.0:
     resolution: {integrity: sha512-U7XpAktpbSgHTRSNRrjKSrjYkZKuhUukfoBlXWXUExCAqhzh1TU3BDRAfJmarcl5voKS+pbKU9MvyLWKZ4UEEg==}
@@ -21247,7 +21667,6 @@ packages:
   /repeat-element@1.1.4:
     resolution: {integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /repeat-string@1.6.1:
     resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
@@ -21309,15 +21728,12 @@ packages:
   /require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /require-main-filename@2.0.0:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-    dev: true
 
   /requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
-    dev: true
 
   /requizzle@0.2.4:
     resolution: {integrity: sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==}
@@ -21333,7 +21749,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       resolve-from: 5.0.0
-    dev: true
 
   /resolve-dir@0.1.1:
     resolution: {integrity: sha512-QxMPqI6le2u0dCLyiGzgy92kjkkL6zO0XyvHzjdTNH3zM6e5Hz3BwG6+aEyNgiQ5Xz6PwTwgQEj3U50dByPKIA==}
@@ -21370,7 +21785,6 @@ packages:
   /resolve-url@0.2.1:
     resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==}
     deprecated: https://github.com/lydell/resolve-url#deprecated
-    dev: true
 
   /resolve@1.1.7:
     resolution: {integrity: sha512-9znBF0vBcaSN3W2j7wKvdERPwqTxSpCq+if5C0WoTCyV9n24rua28jeuQ2pL/HOf+yUe/Mef+H/5p60K0Id3bg==}
@@ -21441,7 +21855,6 @@ packages:
   /ret@0.1.15:
     resolution: {integrity: sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==}
     engines: {node: '>=0.12'}
-    dev: true
 
   /retry-request@5.0.2:
     resolution: {integrity: sha512-wfI3pk7EE80lCIXprqh7ym48IHYdwmAAzESdbU8Q9l7pnRCk9LEhpbOTNKjz6FARLm/Bl5m+4F0ABxOkYUujSQ==}
@@ -21483,7 +21896,6 @@ packages:
     hasBin: true
     dependencies:
       glob: 7.2.3
-    dev: true
 
   /rimraf@5.0.5:
     resolution: {integrity: sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==}
@@ -21561,7 +21973,7 @@ packages:
       typescript: 5.2.2
     dev: true
 
-  /rollup-plugin-visualizer@5.9.0:
+  /rollup-plugin-visualizer@5.9.0(rollup@4.1.5):
     resolution: {integrity: sha512-bbDOv47+Bw4C/cgs0czZqfm8L82xOZssk4ayZjG40y9zbXclNk7YikrZTDao6p7+HDiGxrN0b65SgZiVm9k1Cg==}
     engines: {node: '>=14'}
     hasBin: true
@@ -21573,6 +21985,7 @@ packages:
     dependencies:
       open: 8.4.0
       picomatch: 2.3.1
+      rollup: 4.1.5
       source-map: 0.7.4
       yargs: 17.7.2
     dev: false
@@ -21641,7 +22054,6 @@ packages:
       '@rollup/rollup-win32-ia32-msvc': 4.1.5
       '@rollup/rollup-win32-x64-msvc': 4.1.5
       fsevents: 2.3.3
-    dev: true
 
   /roughjs@4.6.6:
     resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
@@ -21654,12 +22066,11 @@ packages:
   /rsvp@4.8.5:
     resolution: {integrity: sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==}
     engines: {node: 6.* || >= 7.*}
-    dev: true
 
   /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:
@@ -21668,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'}
@@ -21756,7 +22172,6 @@ packages:
     resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==}
     dependencies:
       ret: 0.1.15
-    dev: true
 
   /safe-stable-stringify@2.4.2:
     resolution: {integrity: sha512-gMxvPJYhP0O9n2pvcfYfIuYgbledAOJFcqRThtPRmjscaipiwcwPPKLytpVzMkG2HAN87Qmo2d4PtGiri1dSLA==}
@@ -21783,7 +22198,6 @@ packages:
       walker: 1.0.8
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /sass@1.69.5:
     resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==}
@@ -21803,7 +22217,6 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       xmlchars: 2.2.0
-    dev: true
 
   /scheduler@0.22.0:
     resolution: {integrity: sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==}
@@ -21970,7 +22383,6 @@ packages:
 
   /set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
-    dev: true
 
   /set-function-name@2.0.1:
     resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
@@ -21993,7 +22405,6 @@ packages:
       is-extendable: 0.1.1
       is-plain-object: 2.0.4
       split-string: 3.1.0
-    dev: true
 
   /setimmediate@1.0.5:
     resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
@@ -22046,7 +22457,6 @@ packages:
   /shellwords@0.1.1:
     resolution: {integrity: sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==}
     requiresBuild: true
-    dev: true
     optional: true
 
   /shortid@2.2.16:
@@ -22069,7 +22479,6 @@ packages:
   /signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
-    dev: true
 
   /signale@1.4.0:
     resolution: {integrity: sha512-iuh+gPf28RkltuJC7W5MRi6XAjTDCAPC/prJUpQoG4vIP3MJZ+GTydVnodXA7pwvTKb2cA0m9OFZW/cdWy/I/w==}
@@ -22099,7 +22508,6 @@ packages:
 
   /sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
-    dev: true
 
   /sitemap@7.1.1:
     resolution: {integrity: sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==}
@@ -22112,8 +22520,8 @@ packages:
       sax: 1.2.4
     dev: false
 
-  /size-limit@11.0.1:
-    resolution: {integrity: sha512-6L80ocVspWPrhIRg8kPl41VypqTGH8/lu9e6TJiSJpkNLtOR2h/EEqdAO/wNJOv/sUVtjX+lVEWrzBpItGP+gQ==}
+  /size-limit@11.0.2:
+    resolution: {integrity: sha512-iFZ8iTR/3zPqxSwEIdGnTVYVU0F2nhodLQG/G6zpi/NxECYAK9ntq2lNr+prXH7h3gyBjx2Umt2D/oS2Qzz+eg==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     dependencies:
@@ -22123,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==}
@@ -22145,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==}
@@ -22154,7 +22560,6 @@ packages:
       ansi-styles: 4.3.0
       astral-regex: 2.0.0
       is-fullwidth-code-point: 3.0.0
-    dev: true
 
   /slice-ansi@5.0.0:
     resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
@@ -22186,14 +22591,12 @@ packages:
       define-property: 1.0.0
       isobject: 3.0.1
       snapdragon-util: 3.0.1
-    dev: true
 
   /snapdragon-util@3.0.1:
     resolution: {integrity: sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==}
     engines: {node: '>=0.10.0'}
     dependencies:
       kind-of: 3.2.2
-    dev: true
 
   /snapdragon@0.8.2:
     resolution: {integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==}
@@ -22209,7 +22612,6 @@ packages:
       use: 3.1.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /socks-proxy-agent@3.0.1:
     resolution: {integrity: sha512-ZwEDymm204mTzvdqyUqOdovVr2YRd2NYskrYrF2LXyZ9qDiMAoFESGK8CRphiO7rtbo2Y757k2Nia3x2hGtalA==}
@@ -22262,7 +22664,6 @@ packages:
       resolve-url: 0.2.1
       source-map-url: 0.4.1
       urix: 0.1.0
-    dev: true
 
   /source-map-resolve@0.6.0:
     resolution: {integrity: sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==}
@@ -22286,7 +22687,6 @@ packages:
   /source-map-url@0.4.1:
     resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==}
     deprecated: See https://github.com/lydell/source-map-url#deprecated
-    dev: true
 
   /source-map@0.1.32:
     resolution: {integrity: sha512-htQyLrrRLkQ87Zfrir4/yN+vAUd6DNjVayEjTSHXu29AYQJw57I4/xEL/M6p6E/woPNJwvZt6rVlzc7gFEJccQ==}
@@ -22380,7 +22780,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       extend-shallow: 3.0.2
-    dev: true
 
   /split2@1.0.0:
     resolution: {integrity: sha512-NKywug4u4pX/AZBB1FCPzZ6/7O+Xhz1qMVbzTvvKvikjO99oPN87SkK08mEY9P63/5lWjK+wgOOgApnTg5r6qg==}
@@ -22461,7 +22860,6 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       escape-string-regexp: 2.0.0
-    dev: true
 
   /stackframe@1.3.4:
     resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
@@ -22492,7 +22890,6 @@ packages:
     dependencies:
       define-property: 0.2.5
       object-copy: 0.1.0
-    dev: true
 
   /stdin-discarder@0.1.0:
     resolution: {integrity: sha512-xhV7w8S+bUwlPTb4bAOUQhv8/cSS5offJuX8GQGq32ONF0ZtDWKfkdomM3HMRA+LhX6um/FZ0COqlwsjD53LeQ==}
@@ -22569,7 +22966,6 @@ packages:
     dependencies:
       char-regex: 1.0.2
       strip-ansi: 6.0.1
-    dev: true
 
   /string-width@1.0.2:
     resolution: {integrity: sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==}
@@ -22736,7 +23132,6 @@ packages:
   /strip-bom@4.0.0:
     resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
     engines: {node: '>=8'}
-    dev: true
 
   /strip-eof@1.0.0:
     resolution: {integrity: sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==}
@@ -22762,7 +23157,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       min-indent: 1.0.1
-    dev: true
 
   /strip-json-comments@2.0.1:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
@@ -22771,7 +23165,6 @@ packages:
   /strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
-    dev: true
 
   /strip-outer@1.0.1:
     resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==}
@@ -22789,7 +23182,6 @@ packages:
 
   /style-search@0.1.0:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
-    dev: true
 
   /style-to-object@0.3.0:
     resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==}
@@ -22802,6 +23194,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}
@@ -22832,18 +23230,21 @@ packages:
       stylelint: 15.11.0(typescript@5.2.2)
     dev: true
 
-  /stylelint-config-recommended@7.0.0:
+  /stylelint-config-recommended@7.0.0(stylelint@15.11.0):
     resolution: {integrity: sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==}
     peerDependencies:
       stylelint: ^14.4.0
+    dependencies:
+      stylelint: 15.11.0(typescript@5.2.2)
     dev: false
 
-  /stylelint-config-standard@25.0.0:
+  /stylelint-config-standard@25.0.0(stylelint@15.11.0):
     resolution: {integrity: sha512-21HnP3VSpaT1wFjFvv9VjvOGDtAviv47uTp3uFmzcN+3Lt+RYRv6oAplLaV51Kf792JSxJ6svCJh/G18E9VnCA==}
     peerDependencies:
       stylelint: ^14.4.0
     dependencies:
-      stylelint-config-recommended: 7.0.0
+      stylelint: 15.11.0(typescript@5.2.2)
+      stylelint-config-recommended: 7.0.0(stylelint@15.11.0)
     dev: false
 
   /stylelint-config-standard@34.0.0(stylelint@15.11.0):
@@ -22904,7 +23305,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
       - typescript
-    dev: true
 
   /stylis@4.1.3:
     resolution: {integrity: sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==}
@@ -22966,7 +23366,6 @@ packages:
     dependencies:
       has-flag: 4.0.0
       supports-color: 7.2.0
-    dev: true
 
   /supports-hyperlinks@3.0.0:
     resolution: {integrity: sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==}
@@ -22974,7 +23373,6 @@ packages:
     dependencies:
       has-flag: 4.0.0
       supports-color: 7.2.0
-    dev: true
 
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
@@ -22993,7 +23391,6 @@ packages:
 
   /svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
-    dev: true
 
   /svgo-browser@1.3.8:
     resolution: {integrity: sha512-yOgDNIcewFZN3+jXdWeh/rQzbWJjCq1dTHphLz2r4T4AfTm+nqCxZ5B89v9bjQbFKA/s/k7TUc7J90+pP2HTyw==}
@@ -23037,7 +23434,6 @@ packages:
 
   /symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
-    dev: true
 
   /synckit@0.8.5:
     resolution: {integrity: sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==}
@@ -23059,7 +23455,6 @@ packages:
       slice-ansi: 4.0.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
   /taffydb@2.6.2:
     resolution: {integrity: sha512-y3JaeRSplks6NYQuCOj3ZFMO3j60rTwbuKCvZxsAraGYH2epusatvZ0baZYA01WsGqJBq/Dl6vOrMUJqyMj8kA==}
@@ -23176,7 +23571,6 @@ packages:
     dependencies:
       ansi-escapes: 4.3.2
       supports-hyperlinks: 2.3.0
-    dev: true
 
   /terser@5.21.0:
     resolution: {integrity: sha512-WtnFKrxu9kaoXuiZFSGrcAvvBqAdmKx0SFNmVNYdJamMu9yyN3I/QF0FbH4QcqJQ+y1CJnzxGIKH0cSj+FGYRw==}
@@ -23218,7 +23612,6 @@ packages:
 
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-    dev: true
 
   /textextensions@2.6.0:
     resolution: {integrity: sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==}
@@ -23237,7 +23630,6 @@ packages:
 
   /throat@5.0.0:
     resolution: {integrity: sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==}
-    dev: true
 
   /throttle-debounce@3.0.1:
     resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
@@ -23323,7 +23715,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       kind-of: 3.2.2
-    dev: true
 
   /to-readable-stream@1.0.0:
     resolution: {integrity: sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==}
@@ -23336,7 +23727,6 @@ packages:
     dependencies:
       is-number: 3.0.0
       repeat-string: 1.6.1
-    dev: true
 
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -23352,7 +23742,6 @@ packages:
       extend-shallow: 3.0.2
       regex-not: 1.0.2
       safe-regex: 1.1.0
-    dev: true
 
   /toggle-selection@1.0.6:
     resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
@@ -23372,7 +23761,6 @@ packages:
       punycode: 2.1.1
       universalify: 0.2.0
       url-parse: 1.5.10
-    dev: true
 
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
@@ -23389,7 +23777,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       punycode: 2.1.1
-    dev: true
 
   /transformation-matrix@2.15.0:
     resolution: {integrity: sha512-HN3kCvvH4ug3Xm/ycOfCFQOOktg5htxlC4Ih1Z7Wb6BMtQho+q+irOdGo10ARRKpqkRBXgBzQFw/AVmR0oIf0g==}
@@ -23415,7 +23802,6 @@ packages:
   /trim-newlines@4.1.1:
     resolution: {integrity: sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==}
     engines: {node: '>=12'}
-    dev: true
 
   /trim-repeated@1.0.0:
     resolution: {integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==}
@@ -23475,15 +23861,6 @@ packages:
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
-  /tsutils@3.21.0:
-    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
-    engines: {node: '>= 6'}
-    peerDependencies:
-      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
-    dependencies:
-      tslib: 1.14.1
-    dev: false
-
   /tsutils@3.21.0(typescript@5.2.2):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -23492,7 +23869,6 @@ packages:
     dependencies:
       tslib: 1.14.1
       typescript: 5.2.2
-    dev: true
 
   /tsx@3.14.0:
     resolution: {integrity: sha512-xHtFaKtHxM9LOklMmJdI3BEnQq/D5F73Of2E1GDrITi9sgoVkvIsrQUTY1G8FlmGtA+awCI4EBlTRRYxkL2sRg==}
@@ -23529,19 +23905,16 @@ packages:
     engines: {node: '>= 0.8.0'}
     dependencies:
       prelude-ls: 1.1.2
-    dev: true
 
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
     dependencies:
       prelude-ls: 1.2.1
-    dev: true
 
   /type-detect@4.0.8:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
     engines: {node: '>=4'}
-    dev: true
 
   /type-fest@0.13.1:
     resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
@@ -23563,27 +23936,22 @@ packages:
   /type-fest@0.20.2:
     resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
     engines: {node: '>=10'}
-    dev: true
 
   /type-fest@0.21.3:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
-    dev: true
 
   /type-fest@0.6.0:
     resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
     engines: {node: '>=8'}
-    dev: true
 
   /type-fest@0.8.1:
     resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
     engines: {node: '>=8'}
-    dev: true
 
   /type-fest@1.4.0:
     resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
     engines: {node: '>=10'}
-    dev: true
 
   /type-fest@3.13.1:
     resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
@@ -23628,7 +23996,6 @@ packages:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
     dependencies:
       is-typedarray: 1.0.0
-    dev: true
 
   /typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
@@ -23649,7 +24016,6 @@ packages:
     resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
     engines: {node: '>=14.17'}
     hasBin: true
-    dev: true
 
   /uc.micro@1.0.6:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
@@ -23677,23 +24043,23 @@ packages:
     requiresBuild: true
     optional: true
 
-  /umi@4.0.88(sass@1.69.5):
+  /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
     dependencies:
       '@babel/runtime': 7.23.2
       '@umijs/bundler-utils': 4.0.88
-      '@umijs/bundler-webpack': 4.0.88
+      '@umijs/bundler-webpack': 4.0.88(typescript@5.2.2)
       '@umijs/core': 4.0.88
-      '@umijs/lint': 4.0.88
-      '@umijs/preset-umi': 4.0.88(sass@1.69.5)
-      '@umijs/renderer-react': 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.2.0)(react@18.2.0)
       '@umijs/server': 4.0.88
-      '@umijs/test': 4.0.88
+      '@umijs/test': 4.0.88(@babel/core@7.23.2)
       '@umijs/utils': 4.0.88
-      prettier-plugin-organize-imports: 3.2.4
-      prettier-plugin-packagejson: 2.4.3
+      prettier-plugin-organize-imports: 3.2.4(prettier@3.0.3)(typescript@5.2.2)
+      prettier-plugin-packagejson: 2.4.3(prettier@3.0.3)
     transitivePeerDependencies:
       - '@babel/core'
       - '@types/node'
@@ -23772,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==}
@@ -23785,6 +24150,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'}
@@ -23793,7 +24170,6 @@ packages:
       get-value: 2.0.6
       is-extendable: 0.1.1
       set-value: 2.0.1
-    dev: true
 
   /unique-filename@1.1.1:
     resolution: {integrity: sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==}
@@ -23847,16 +24223,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:
@@ -23868,6 +24269,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:
@@ -23883,6 +24290,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:
@@ -23896,7 +24310,6 @@ packages:
   /universalify@0.2.0:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
     engines: {node: '>= 4.0.0'}
-    dev: true
 
   /universalify@2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
@@ -23920,7 +24333,6 @@ packages:
     dependencies:
       has-value: 0.3.1
       isobject: 3.0.1
-    dev: true
 
   /untildify@4.0.0:
     resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
@@ -23969,7 +24381,6 @@ packages:
   /urix@0.1.0:
     resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==}
     deprecated: Please see https://github.com/lydell/urix#deprecated
-    dev: true
 
   /url-join@4.0.1:
     resolution: {integrity: sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==}
@@ -23994,7 +24405,6 @@ packages:
     dependencies:
       querystringify: 2.2.0
       requires-port: 1.0.0
-    dev: true
 
   /url@0.11.3:
     resolution: {integrity: sha512-6hxOLGfZASQK/cijlZnZJTq8OXAkt/3YGfQX45vvMYXpZoo8NdWZcY73K108Jf759lS1Bv/8wXnHDTSz17dSRw==}
@@ -24023,10 +24433,17 @@ 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'}
-    dev: true
 
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@@ -24102,7 +24519,6 @@ packages:
       '@types/istanbul-lib-coverage': 2.0.4
       convert-source-map: 1.9.0
       source-map: 0.7.4
-    dev: true
 
   /validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
@@ -24121,6 +24537,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'}
@@ -24140,12 +24574,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:
@@ -24163,14 +24611,22 @@ 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:
       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
@@ -24195,13 +24651,14 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-svgr@2.4.0:
+  /vite-plugin-svgr@2.4.0(rollup@4.1.5)(vite@4.5.0):
     resolution: {integrity: sha512-q+mJJol6ThvqkkJvvVFEndI4EaKIjSI0I3jNFgSoC9fXAz1M7kYTVUin8fhUsFojFDKZ9VHKtX6NXNaOLpbsHA==}
     peerDependencies:
       vite: ^2.6.0 || 3 || 4
     dependencies:
-      '@rollup/pluginutils': 5.0.5
+      '@rollup/pluginutils': 5.0.5(rollup@4.1.5)
       '@svgr/core': 6.5.1
+      vite: 4.5.0(@types/node@20.8.9)(less@4.2.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -24214,7 +24671,7 @@ packages:
       svgo: 2.8.0
     dev: true
 
-  /vite@4.3.1(less@4.1.3)(sass@1.69.5):
+  /vite@4.3.1(@types/node@20.8.9)(less@4.1.3)(sass@1.69.5):
     resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -24239,6 +24696,7 @@ packages:
       terser:
         optional: true
     dependencies:
+      '@types/node': 20.8.9
       esbuild: 0.17.19
       less: 4.1.3
       postcss: 8.4.31
@@ -24359,15 +24817,16 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc@1.8.19:
+  /vue-tsc@1.8.19(typescript@5.2.2):
     resolution: {integrity: sha512-tacMQLQ0CXAfbhRycCL5sWIy1qujXaIEtP1hIQpzHWOUuICbtTj9gJyFf91PvzG5KCNIkA5Eg7k2Fmgt28l5DQ==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@vue/language-core': 1.8.19
-      '@vue/typescript': 1.8.19
+      '@vue/language-core': 1.8.19(typescript@5.2.2)
+      '@vue/typescript': 1.8.19(typescript@5.2.2)
       semver: 7.5.4
+      typescript: 5.2.2
     dev: true
 
   /vue-types@3.0.2(vue@3.3.4):
@@ -24394,14 +24853,12 @@ packages:
     deprecated: Use your platform's native performance.now() and performance.timeOrigin.
     dependencies:
       browser-process-hrtime: 1.0.0
-    dev: true
 
   /w3c-xmlserializer@2.0.0:
     resolution: {integrity: sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==}
     engines: {node: '>=10'}
     dependencies:
       xml-name-validator: 3.0.0
-    dev: true
 
   /walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
@@ -24445,22 +24902,18 @@ packages:
   /webidl-conversions@5.0.0:
     resolution: {integrity: sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==}
     engines: {node: '>=8'}
-    dev: true
 
   /webidl-conversions@6.1.0:
     resolution: {integrity: sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==}
     engines: {node: '>=10.4'}
-    dev: true
 
   /whatwg-encoding@1.0.5:
     resolution: {integrity: sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==}
     dependencies:
       iconv-lite: 0.4.24
-    dev: true
 
   /whatwg-mimetype@2.3.0:
     resolution: {integrity: sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==}
-    dev: true
 
   /whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
@@ -24492,7 +24945,6 @@ packages:
       lodash: 4.17.21
       tr46: 2.1.0
       webidl-conversions: 6.1.0
-    dev: true
 
   /which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
@@ -24530,7 +24982,6 @@ packages:
 
   /which-module@2.0.0:
     resolution: {integrity: sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==}
-    dev: true
 
   /which-pm-runs@1.1.0:
     resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
@@ -24591,7 +25042,6 @@ packages:
   /word-wrap@1.2.3:
     resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /wordwrap@0.0.2:
     resolution: {integrity: sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q==}
@@ -24617,7 +25067,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
   /wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
@@ -24662,7 +25111,6 @@ packages:
       is-typedarray: 1.0.0
       signal-exit: 3.0.7
       typedarray-to-buffer: 3.1.5
-    dev: true
 
   /write-file-atomic@4.0.2:
     resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==}
@@ -24678,7 +25126,6 @@ packages:
     dependencies:
       imurmurhash: 0.1.4
       signal-exit: 4.1.0
-    dev: true
 
   /ws@5.2.3:
     resolution: {integrity: sha512-jZArVERrMsKUatIdnLzqvcfydI85dvd/Fp1u/VOpfdDWQ4c9qWXe+VIeAbQ5FrDwciAkr+lzofXLz3Kuf26AOA==}
@@ -24705,7 +25152,6 @@ packages:
         optional: true
       utf-8-validate:
         optional: true
-    dev: true
 
   /xdg-basedir@3.0.0:
     resolution: {integrity: sha512-1Dly4xqlulvPD3fZUQJLY+FUIeqN3N2MM3uqe4rCJftAvOjFa3jFGfctOgluGx4ahPbUCsZkmJILiP0Vi4T6lQ==}
@@ -24720,7 +25166,6 @@ packages:
 
   /xml-name-validator@3.0.0:
     resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==}
-    dev: true
 
   /xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
@@ -24736,7 +25181,6 @@ packages:
 
   /xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
-    dev: true
 
   /xmlcreate@2.0.4:
     resolution: {integrity: sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==}
@@ -24788,12 +25232,10 @@ packages:
     dependencies:
       camelcase: 5.3.1
       decamelize: 1.2.0
-    dev: true
 
   /yargs-parser@20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
-    dev: true
 
   /yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
@@ -24829,7 +25271,6 @@ packages:
       which-module: 2.0.0
       y18n: 4.0.3
       yargs-parser: 18.1.3
-    dev: true
 
   /yargs@16.2.0:
     resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
diff --git a/s2-site/.dumi/global.less b/s2-site/.dumi/global.less
new file mode 100644
index 0000000000..77e36d7d21
--- /dev/null
+++ b/s2-site/.dumi/global.less
@@ -0,0 +1,33 @@
+.dumi-default-table {
+  margin: 0 !important;
+}
+
+// h3 {
+//   border-bottom: none !important;
+// }
+
+body {
+  overflow-x: hidden;
+}
+
+.ant-layout-content {
+  ul {
+    margin-bottom: 16px !important;
+  }
+}
+
+details {
+  cursor: pointer;
+}
+
+.dumi-default-source-code {
+  margin: 24px 0;
+
+  .prism-code {
+    background-color: #f6f8fa !important;
+  }
+}
+
+.demo-card-screenshot {
+  width: 100% !important;
+}
diff --git a/s2-site/.dumi/global.ts b/s2-site/.dumi/global.ts
new file mode 100644
index 0000000000..0eda387e03
--- /dev/null
+++ b/s2-site/.dumi/global.ts
@@ -0,0 +1,65 @@
+if (window) {
+  (window as any).react = require('react');
+  // 如果写成 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');
+  (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).g = require('@antv/g');
+  (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');
+
+  // 本地通过 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');
+  }
+
+  // 码云和老网站统一跳转 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/.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/.dumi/theme/plugin.ts b/s2-site/.dumi/theme/plugin.ts
index e8f11e05bb..b6e75b8613 100644
--- a/s2-site/.dumi/theme/plugin.ts
+++ b/s2-site/.dumi/theme/plugin.ts
@@ -6,7 +6,7 @@ export default (api: IApi) => {
   api.modifyConfig((memo) => {
     return {
       ...memo,
-      alias: omit(memo.alias,['antd']),
+      alias: omit(memo.alias, ['antd', 'react', 'react-dom']),
     };
-  })
+  });
 };
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
index 077f3b9416..0071a375b5 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({
@@ -12,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 的大官网
     footerTheme: 'light', // 白色 底部主题
@@ -30,8 +31,14 @@ export default defineConfig({
     showLanguageSwitcher: true, // 是否显示官网语言切换
     showWxQrcode: true, // 是否显示头部菜单的微信公众号
     showChartResize: true, // 是否在 demo 页展示图表视图切换
-    showAPIDoc: true, // 是否在 demo 页展示API文档
-    themeSwitcher: 'g2',
+    showAPIDoc: true, // 是否在 demo 页展示 API 文档
+    es5: false,
+    versions: {
+      // 历史版本以及切换下拉菜单
+      // [version || '2.x']: 'https://s2.antv.antgroup.com',
+      '2.x': 'https://s2.antv.antgroup.com',
+      '1.x': 'https://s2-v1.antv.antgroup.com',
+    },
     docsearchOptions: {
       // 头部搜索框配置
       versionV3: true,
@@ -39,13 +46,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',
@@ -75,13 +82,27 @@ export default defineConfig({
           en: 'Playground',
         },
       },
+      {
+        slug: 'manual/faq',
+        title: {
+          zh: '常见问题',
+          en: 'FAQ',
+        },
+      },
+      {
+        slug: 'https://github.com/antvis/S2/releases',
+        title: {
+          zh: '更新日志',
+          en: 'ChangeLog',
+        },
+      },
     ],
     docs: [
       {
         slug: 'api/general',
         title: {
           zh: '基础配置项',
-          en: 'Common configuration',
+          en: 'Common Configuration',
         },
         order: 0,
       },
@@ -89,14 +110,14 @@ export default defineConfig({
         slug: 'api/basic-class',
         title: {
           zh: '基础类',
-          en: 'Basic class',
+          en: 'Basic Class',
         },
         order: 1,
       },
       {
         slug: 'api/components',
         title: {
-          zh: '组件',
+          zh: '分析组件',
           en: 'Components',
         },
         order: 2,
@@ -105,7 +126,7 @@ export default defineConfig({
         slug: 'manual/basic',
         title: {
           zh: '基础教程',
-          en: 'Basic tutorial',
+          en: 'Basic Tutorial',
         },
         order: 3,
       },
@@ -113,7 +134,7 @@ export default defineConfig({
         slug: 'manual/basic/sheet-type',
         title: {
           zh: '表形态',
-          en: 'Sheet type',
+          en: 'Sheet Type',
         },
         order: 1,
       },
@@ -121,26 +142,10 @@ export default defineConfig({
         slug: 'manual/advanced',
         title: {
           zh: '进阶教程',
-          en: 'Advanced tutorial',
+          en: 'Advanced Tutorial',
         },
         order: 4,
       },
-      {
-        slug: 'manual/advanced/data-process',
-        title: {
-          zh: '数据流处理',
-          en: 'Data Process',
-        },
-        order: 2,
-      },
-      {
-        slug: 'manual/advanced/layout',
-        title: {
-          zh: '布局',
-          en: 'Layout',
-        },
-        order: 3,
-      },
       {
         slug: 'manual/advanced/custom',
         title: {
@@ -153,10 +158,18 @@ export default defineConfig({
         slug: 'manual/advanced/interaction',
         title: {
           zh: '交互',
-          en: 'interaction',
+          en: 'Interaction',
         },
         order: 5,
       },
+      {
+        slug: 'manual/advanced/analysis',
+        title: {
+          zh: '分析组件',
+          en: 'Analyze Component',
+        },
+        order: 6,
+      },
       {
         slug: 'manual/basic/sort',
         title: {
@@ -166,12 +179,28 @@ export default defineConfig({
         order: 6,
       },
       {
-        slug: 'manual/basic/analysis',
+        slug: 'manual/extended-reading',
         title: {
-          zh: '分析组件',
-          en: 'Analyze component',
+          zh: '扩展阅读',
+          en: 'Extended Reading',
         },
-        order: 7,
+        order: 6,
+      },
+      {
+        slug: 'manual/extended-reading/data-process',
+        title: {
+          zh: '数据流处理',
+          en: 'Data Process',
+        },
+        order: 1,
+      },
+      {
+        slug: 'manual/extended-reading/layout',
+        title: {
+          zh: '布局流程',
+          en: 'Layout',
+        },
+        order: 2,
       },
     ],
     tutorials: [
@@ -251,8 +280,7 @@ export default defineConfig({
       },
     ],
     playground: {
-      playgroundDidMount: 'console.log("playgroundDidMount");',
-      playgroundWillUnmount: 'console.log("playgroundWillUnmount");',
+      extraLib: '',
       devDependencies: {
         typescript: 'latest',
       },
@@ -266,14 +294,24 @@ 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: {
-      zh: '',
-      en: '',
+      // 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',
+        en: '🎉 S2 Next version 2.0 is in beta! see 1.x docs: https://s2-v1.antv.antgroup.com',
+      },
+      link: {
+        text: {
+          zh: '查看升级指南',
+          en: 'Upgrade Guide',
+        },
+        url: '/manual/migration-v2',
+      },
     },
     /** 首页技术栈介绍 */
     detail: {
@@ -282,8 +320,8 @@ export default defineConfig({
         en: 'S2',
       },
       title: {
-        zh: 'S2·多维交叉分析表格',
-        en: 'S2·Multi Cross Analysis Table',
+        zh: 'S2 多维交叉分析表格 2.0',
+        en: 'S2 Multi Cross Analysis Table 2.0',
       },
       description: {
         zh: 'S2 是多维交叉分析领域的表格解决方案，数据驱动视图，提供底层核心库、基础组件库、业务场景库，具备自由扩展的能力，让开发者既能开箱即用，也能基于自身场景自由发挥。',
@@ -298,48 +336,76 @@ export default defineConfig({
       buttons: [
         {
           text: {
-            zh: '开始使用',
-            en: 'Getting Started',
+            zh: '2.0 升级指南',
+            en: 'Migration v2',
           },
-          link: `/manual/getting-started`,
+          link: `/manual/migration-v2`,
         },
         {
           text: {
-            zh: '图表示例',
-            en: 'Examples',
+            zh: '查看 1.x 官网',
+            en: 'View 1.x Website',
           },
-          link: `/examples`,
+          link: `https://s2-v1.antv.antgroup.com`,
+          type: 'primary',
+        },
+        // 右上角有图表示例的入口, 2.0 过渡期间透出 [升级指南]
+        // {
+        //   text: {
+        //     zh: '图表示例',
+        //     en: 'Examples',
+        //   },
+        //   link: `/examples`,
+        // },
+        {
+          text: {
+            zh: '开始使用',
+            en: 'Getting Started',
+          },
+          link: `/manual/getting-started`,
           type: 'primary',
         },
       ],
     },
     /** 新闻公告，优先选择配置的，如果没有配置则使用远程的！ */
-    // news: [
-    //   {
-    //     type: {
-    //       zh: '论坛',
-    //       en: 'Forum',
-    //     },
-    //     title: {
-    //       zh: 'AntV 芒种日 图新物：GraphInsight 发布',
-    //       en: 'AntV New Product Launch: GraphInsight',
-    //     },
-    //     date: '2022.06.06',
-    //     link: 'https://github.com/antvis/GraphInsight',
-    //   },
-    //   {
-    //     type: {
-    //       zh: '论坛',
-    //       en: 'Forum',
-    //     },
-    //     title: {
-    //       zh: 'SEE Conf 2022 支付宝体验科技大会',
-    //       en: 'Alipay Experience Technology Conference',
-    //     },
-    //     date: '2022.01.08',
-    //     link: 'https://seeconf.antfin.com/',
-    //   },
-    // ],
+    news: [
+      {
+        type: {
+          zh: '初心 · 出新 AntV 2023 年度发布',
+          en: 'AntV 2023',
+        },
+        title: {
+          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',
+        },
+        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: 'S2 1.x',
+          en: 'S2 1.x',
+        },
+        title: {
+          zh: '原 v1 文档已迁移至 https://s2-v1.antv.antgroup.com',
+          en: 'S2 2.0 is in beta! Welcome to use.',
+        },
+        date: '2024.1.31',
+        link: 'https://s2-v1.antv.antgroup.com',
+      },
+    ],
     /** 首页特性介绍 */
     features: [
       {
@@ -435,14 +501,16 @@ export default defineConfig({
       },
     ],
   },
+  mfsu: false,
   alias: {
     '@': __dirname,
   },
   styles: ['/site.css'],
   links: [],
   scripts: [],
-  monorepoRedirect: {
-    peerDeps: true,
-    srcDir: ['src', 'esm', 'lib'],
-  },
+  // TODO: S2用的 antd@5.x @antv/dumi-theme-antv 是 4.x, 导致本地跑不起来
+  // monorepoRedirect: {
+  //   peerDeps: true,
+  //   srcDir: ['src', 'esm', 'lib'],
+  // },
 });
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/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-bbox.en.md b/s2-site/docs/api/basic-class/base-bbox.en.md
new file mode 100644
index 0000000000..2da9c889a6
--- /dev/null
+++ b/s2-site/docs/api/basic-class/base-bbox.en.md
@@ -0,0 +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
new file mode 100644
index 0000000000..b5c2636a54
--- /dev/null
+++ b/s2-site/docs/api/basic-class/base-bbox.zh.md
@@ -0,0 +1,30 @@
+---
+title: BaseBBox
+order: 9
+tag: New
+---
+
+功能描述：盒模型。[详情](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.en.md b/s2-site/docs/api/basic-class/base-cell.en.md
index 7abbe7afe7..574118d16b 100644
--- a/s2-site/docs/api/basic-class/base-cell.en.md
+++ b/s2-site/docs/api/basic-class/base-cell.en.md
@@ -1,9 +1,10 @@
 ---
 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)
+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-cell.zh.md b/s2-site/docs/api/basic-class/base-cell.zh.md
index 7352caa88e..20ca60b7a1 100644
--- a/s2-site/docs/api/basic-class/base-cell.zh.md
+++ b/s2-site/docs/api/basic-class/base-cell.zh.md
@@ -1,9 +1,10 @@
 ---
 title: BaseCell
 order: 4
+tag: Updated
 ---
 
-功能描述：单元格基类。[详情](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()
@@ -16,12 +17,11 @@ 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) |
+| 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) |
@@ -35,6 +35,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>
 
@@ -65,6 +78,7 @@ export enum CellType {
   COL_CELL = 'colCell',
   CORNER_CELL = 'cornerCell',
   MERGED_CELL = 'mergedCell',
+  SERIES_NUMBER_CELL = 'seriesNumberCell',
 }
 ```
 
@@ -80,5 +94,6 @@ export type S2CellType<T extends SimpleBBox = ViewMeta> =
   | CornerCell
   | RowCell
   | MergedCell
+  | SeriesNumberCell
   | BaseCell<T>;
 ```
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..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
@@ -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')
@@ -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 3135f7493d..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,9 +1,10 @@
 ---
 title: BaseDataSet
 order: 5
+tag: Updated
 ---
 
-功能描述：表格数据集。[详情](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')
@@ -11,25 +12,63 @@ 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`                                                                                                                                                                               |                                             |
-| 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`版本使用 |
+| 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-v1.51.1`                          |
+| 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
 
@@ -37,6 +76,46 @@ s2.dataSet.getFieldName('type')
 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/basic-class/base-facet.en.md b/s2-site/docs/api/basic-class/base-facet.en.md
index 20e710b777..3dc3293738 100644
--- a/s2-site/docs/api/basic-class/base-facet.en.md
+++ b/s2-site/docs/api/basic-class/base-facet.en.md
@@ -1,9 +1,10 @@
 ---
 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)
+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-facet.zh.md b/s2-site/docs/api/basic-class/base-facet.zh.md
index 2e615f46b7..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,9 +1,10 @@
 ---
 title: BaseFacet
 order: 7
+tag: Updated
 ---
 
-功能描述：当前可视渲染区域。[详情](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()
@@ -12,21 +13,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 +70,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 +139,6 @@ export interface LayoutResult {
   rowsHierarchy: Hierarchy;
   rowLeafNodes: Node[];
   colLeafNodes: Node[];
-  getCellMeta: GetCellMeta;
-  spreadsheet: SpreadSheet;
 }
 ```
 
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/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/hierarchy.en.md b/s2-site/docs/api/basic-class/hierarchy.en.md
new file mode 100644
index 0000000000..485be649c2
--- /dev/null
+++ b/s2-site/docs/api/basic-class/hierarchy.en.md
@@ -0,0 +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
new file mode 100644
index 0000000000..0a1f336670
--- /dev/null
+++ b/s2-site/docs/api/basic-class/hierarchy.zh.md
@@ -0,0 +1,28 @@
+---
+title: Hierarchy
+order: 8
+tag: New
+---
+
+功能描述：节点层级结构。[详情](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.en.md b/s2-site/docs/api/basic-class/interaction.en.md
index 090f6b7713..e26f869d57 100644
--- a/s2-site/docs/api/basic-class/interaction.en.md
+++ b/s2-site/docs/api/basic-class/interaction.en.md
@@ -1,9 +1,10 @@
 ---
 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)
+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/interaction.zh.md b/s2-site/docs/api/basic-class/interaction.zh.md
index 3baa321bff..c0d674ee39 100644
--- a/s2-site/docs/api/basic-class/interaction.zh.md
+++ b/s2-site/docs/api/basic-class/interaction.zh.md
@@ -1,9 +1,10 @@
 ---
 title: Interaction
 order: 2
+tag: Updated
 ---
 
-功能描述：交互类相关属性和方法。[详情](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()
@@ -30,18 +31,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 +98,7 @@ type S2CellType<T extends SimpleBBox = ViewMeta> =
   | CornerCell
   | RowCell
   | MergedCell
+  | SeriesNumberCell
   | BaseCell<T>;
 ```
 
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/node.zh.md b/s2-site/docs/api/basic-class/node.zh.md
index c3fe56df81..ee32ab85c5 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
@@ -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.en.md b/s2-site/docs/api/basic-class/spreadsheet.en.md
index c5a1b7d25b..cfa5d5dc07 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)                                                                                                                    |                                                                      |
-| 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/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)                                                             |                                                                      |
@@ -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 d9f00dd965..5212e5984c 100644
--- a/s2-site/docs/api/basic-class/spreadsheet.zh.md
+++ b/s2-site/docs/api/basic-class/spreadsheet.zh.md
@@ -1,9 +1,10 @@
 ---
 title: SpreadSheet
 order: 1
+tag: Updated
 ---
 
-功能描述：表格实例相关属性和方法。[详情](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()
@@ -20,10 +21,10 @@ 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) |    |
-| container | g-canvas 实例                                                                                                            | [Canvas](https://g.antv.vision/zh/docs/api/canvas) |    |
+| 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/master/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) |    |
@@ -33,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 |    |
@@ -50,10 +53,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) |    |
@@ -67,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
 
@@ -111,7 +111,7 @@ export enum CellType {
 
 ### BBox
 
-功能描述：盒模型
+功能描述：盒模型。[详情](/docs/api/basic-class/base-bbox)
 
 ```ts
 type BBox = {
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/basic-class/store.zh.md b/s2-site/docs/api/basic-class/store.zh.md
index fe5ccf2c0b..0ffb4be6db 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') // 获取
@@ -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/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 0499188cf5..c419b0a8c6 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
 
@@ -25,7 +25,7 @@ order: 4
 
 ### AdvancedSortCfgProps
 
-在 `header` 中配置 `advancedSortCfg` 的 `props`
+在 `header` 中配置 `advancedSort` 的 `props`
 
 | 参数 | 说明 | 类型 | 必选 | 默认值 |
 | -- | -- | -- | -- | -- |
@@ -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 d703bf7604..c2b157967e 100644
--- a/s2-site/docs/api/components/drill-down.zh.md
+++ b/s2-site/docs/api/components/drill-down.zh.md
@@ -3,37 +3,45 @@ 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-down#for-pivot)
-
-## Vue 下钻组件
+## Vue 下钻组件 <Badge type="success">@antv/s2-vue</Badge>
 
-下钻组件只有在表格，透视模式才能使用。
+[查看示例](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 +50,6 @@ const s2Options = {
 </template>
 ```
 
-​📊 查看 [Vue 版下钻 demo](https://codesandbox.io/s/vue-drilldown-demo-8p1lmv?file=/src/App.vue:6385-6396)
-
 ## 公共 API
 
 <description>功能描述：配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻</description>
@@ -72,8 +78,6 @@ const s2Options = {
 
 ##### PartDrillDownInfo
 
-类型：`object`，**必选**，默认值：`{}`
-
 <description>功能描述：下钻数据请求参数配置</description>
 
 | 参数 | 说明 | 类型 | 必选 | 默认值 |
@@ -83,8 +87,6 @@ const s2Options = {
 
 #### DrillDownProps
 
-类型：`object`，**必选**，默认值：`{}`
-
 <description>功能描述：下钻菜单组件配置项</description>
 
 | 参数 | 说明                                    | 类型 | 默认值 | 必选 | 备注 |
@@ -102,8 +104,6 @@ const s2Options = {
 
 ##### DataSet
 
-类型：`object`，**必选**，默认值：`{}`
-
 <description>功能描述：下钻数据源配置</description>
 
 | 参数 | 说明 | 类型 | 默认值 | 必选 |
diff --git a/s2-site/docs/api/components/export.en.md b/s2-site/docs/api/components/export.en.md
index 41fba9fd31..197b477ee6 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
@@ -9,7 +10,7 @@ order: 5
 <SheetComponent
   dataCfg={dataCfg}
   options={options}
-  header={{ exportCfg: { open: true } }}
+  header={{ export: { open: true } }}
 />
 ```
 
@@ -30,7 +31,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..ff6022ffee 100644
--- a/s2-site/docs/api/components/export.zh.md
+++ b/s2-site/docs/api/components/export.zh.md
@@ -1,15 +1,16 @@
 ---
 title: 导出
 order: 5
+tag: Updated
 ---
 
-## React 导出组件
+## React 导出组件 <Badge>@antv/s2-react</Badge>
 
 ```tsx
 <SheetComponent
   dataCfg={dataCfg}
   options={options}
-  header={{ exportCfg: { open: true } }}
+  header={{ export: { open: true } }}
 />
 ```
 
@@ -30,8 +31,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/api/components/header.en.md b/s2-site/docs/api/components/header.en.md
index d774772782..8cc9b31831 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
@@ -16,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 0210078015..762432c67e 100644
--- a/s2-site/docs/api/components/header.zh.md
+++ b/s2-site/docs/api/components/header.zh.md
@@ -1,25 +1,28 @@
 ---
 title: 表头
 order: 4
+tag: Updated
 ---
 
-## 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
+    // 开启导出功能
+    export: { open: true },
+    // 开启高级排序功能
+    advancedSort: { open: true },
+    // 开启维度切换功能
+    switcher: { open: true },
+    // 自定义 ReactNode
+    extra: <button> 插入内容 </button>,
   } }
 />
 ```
@@ -31,7 +34,3 @@ order: 4
 ### API
 
 <embed src="@/docs/common/header.zh.md"></embed>
-
-## Vue 表头组件
-
-开发中，敬请期待
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/components/sheet-component.zh.md b/s2-site/docs/api/components/sheet-component.zh.md
index 4bf596bf52..bc53d783c4 100644
--- a/s2-site/docs/api/components/sheet-component.zh.md
+++ b/s2-site/docs/api/components/sheet-component.zh.md
@@ -1,13 +1,14 @@
 ---
 title: 表组件
 order: 0
+tag: Updated
 ---
 
-# React 表组件
+## React 表组件 <Badge>@antv/s2-react</Badge>
 
 基于 `@antv/s2` 封装的 `React` 版开箱即用的组件 `<SheetComponent />`
 
-## SpreadsheetProps
+### SpreadsheetProps
 
 功能描述： React SheetComponent 组件的 props 参数
 
@@ -100,12 +101,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';
@@ -119,11 +124,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" />`
 
@@ -137,7 +142,7 @@ type SheetComponentOptions = S2Options<
 | themeCfg | 自定义表格主题样式 | [ThemeCfg](/docs/api/general/S2Theme) |  |  |
 | loading | 控制表格的加载状态 | `boolean` |  |  |
 
-## events
+### events
 
 功能描述： Vue SheetComponent 组件的 events，`<SheetComponent @rowCellClick="handleRowCellClick" />`
 
@@ -220,11 +225,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';
@@ -236,9 +245,9 @@ type SheetComponentOptions = S2Options<
 >;
 ```
 
-# 公共对象
+## 公共对象
 
-## TargetCellInfo
+### TargetCellInfo
 
 功能描述：交互回调函数的返回信息。
 
@@ -250,7 +259,7 @@ type SheetComponentOptions = S2Options<
 
 <embed src="@/docs/common/sort-param.zh.md"></embed>
 
-## CellScrollPosition
+### CellScrollPosition
 
 功能描述：单元格滚动的位置信息。
 
@@ -259,16 +268,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（单元格行高列宽拖动变化）和单元格样式信息
 
@@ -277,7 +286,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 维度切换组件
-
-开发中，敬请期待
diff --git a/s2-site/docs/api/general/S2DataConfig.zh.md b/s2-site/docs/api/general/S2DataConfig.zh.md
index d4c62940cf..c6bcdf65b6 100644
--- a/s2-site/docs/api/general/S2DataConfig.zh.md
+++ b/s2-site/docs/api/general/S2DataConfig.zh.md
@@ -20,17 +20,17 @@ 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
 
-[SimpleData](#simpledata) | [MiniChartData](#minichartdata) | [MultiData](#multidata) **required**, _default：null_
+[SimpleData](#simpledata) | [MiniChartData](#minichartdata) | [MultiData](#multidata)
 
 功能描述：表格数据源
 
@@ -68,9 +68,13 @@ const data = [
 ];
 ```
 
+#### MiniChartData
+
+<embed src="@/docs/common/mini-chart.zh.md"></embed>
+
 #### MultiData
 
-功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：[趋势分析表](/zh/examples/react-component/sheet#strategy)
+功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：[趋势分析表](/examples/react-component/sheet#strategy)
 
 | 配置项名称       | 说明                                       | 类型                          | 默认值 | 必选 |
 | :--------------- | :----------------------------------------- | :---------------------------- | :----- | :--- |
@@ -92,61 +96,37 @@ const data = [
 
 ### Fields
 
-object **必选**,_default：null_
-
-功能描述： 配置表格的维度域，即对应行列维度
+功能描述： 配置表格的维度域，即对应行列维度。
 
-| 配置项名称 | 说明     | 类型   | 默认值 | 必选 |
-| ------------- | ----------------- | --------- | ----- | --- |
-| rows             | 行维度 （可自定义行头，[查看例子](#TODO)) | `string[]` \| [CustomTreeNode[]](#customtreenode) | `[]`   |      |
-| columns          | 列维度 （可自定义列头，[查看例子](#TODO)) | `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
 
-功能描述：字段元数据，可配置字段别名和数值格式化。
-
-功能描述： 字段元数据，可配置字段别名和数值格式化。
-
-| 参数 | 说明 | 类型 | 默认值 | 必选  |
-| --| --------| --- | ----- | --- |
-| 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>
-
-### MultiData
-
-object **必选**,_default：null_
-
-功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：[趋势分析表](/zh/examples/react-component/sheet#strategy)
+功能描述：字段元数据，可配置字段别名和数值格式化。[查看示例](/examples/basic/pivot/#grid)
 
-| 配置项名称 | 说明     | 类型   | 默认值 | 必选 |
-| ------------- | ----------------- | --------- | ----- | --- |
-| values           | 格式化后的数据，直接展示在 dataCfg 中 | `(string \| number)[][]`   |  ✓   |
-| originalValues | 原始数据，用于原始数据导出 | `(string \| number)[][]`  |  |      |
-| label        | 用作单元格小标题，单独占一行展示    | `string` |    |      |
-| [key: string]       | 其他透传字段，用于自定义单元格的定制化展示       | `unknown` | ``   |      |
-
-<embed src="@/docs/common/sort-param.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` |        |      |
 
 <embed src="@/docs/common/custom/customTreeNode.zh.md"></embed>
 
-### Columns
-
-`Array<ColumnNode | string>`
+<embed src="@/docs/common/sort-param.zh.md"></embed>
 
-列配置数组，在明细表模式下支持使用 [ColumnNode](#columnnode) 结构来描述列分组关系
+### FilterParam
 
-### ColumnNode
+功能描述：用于**明细表**做数据筛选。
 
-| 属性名称 | 说明     | 类型   | 默认值 | 必选 |
-| ------- | ---------| -------| ------|------|
-| key | 列字段 id 或分组 id   | string |       | ✓ |
-| children | 分组下面的子级  | `Array<ColumnNode \| string>` |       |  |
+| 配置项名称       | 说明                                                                           | 类型                      | 默认值 | 必选 |
+| :--------------- | :----------------------------------------------------------------------------- | :------------------------ | :----- | :--- |
+| `filterKey`      | 需要筛选的字段 id                                                              | `string`                  |        | ✓    |
+| `filteredValues` | 不包含的维度值                                                                 | `unknown[]`               |        |      |
+| `customFilter`   | 自定义筛选函数，最终筛选的结果是同时满足 customFilter 且不在 filteredValues 中 | `(raw: Record<string, string>) => boolean` |        |      |
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/S2Event.zh.md b/s2-site/docs/api/general/S2Event.zh.md
index b4aa8577b7..5fe4d0ed5d 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/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), [文档](/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'
 
@@ -80,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/S2Options.en.md b/s2-site/docs/api/general/S2Options.en.md
index 643fc01ef1..32583322e5 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
@@ -25,12 +26,12 @@ 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                                                                                                                                                                                                      |
 | 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` )                                                                                                                                       |
@@ -47,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>
@@ -110,7 +113,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 d1aa655143..4e74f3aaec 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
 ---
 
 表格参数配置
@@ -13,49 +14,50 @@ const s2Options = {
 }
 ```
 
-| 参数 | 类型 | 必选  | 默认值 | 功能描述 | 版本 |
-| -- | --- | --  | -- | --- | --- |
-| width | `number` |    | 600  | 表格宽度 |
-| height | `number` |    | 480  | 表格高度 |
-| debug | `boolean` |   |`false` | 是否开启调试模式 |
-| hierarchyType | `grid` \| `tree` \| `customTree` |    | `grid` | 行头的展示方式，grid：平铺网格结构， tree： 树状结构。 customTree: 自定义树状结构 |
-| conditions | [Conditions](#conditions) |  |    | 条件模式配置 |
-| totals | [Totals](#totals) |  |    | 小计总计配置 |
-| tooltip | [Tooltip](#tooltip) |    |  |  tooltip 配置 |
-| interaction | [Interaction](#interaction) |    |  |  表格交互配置 |
-| pagination | [Pagination](#pagination) |  |    | 分页配置 |
-| frozen | [Frozen](#frozen) |  |    | 行列头冻结配置 |
-| showSeriesNumber | `boolean` |  |  `false` | 是否显示行序号 |
-| 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) |  |  |   自定义合并单元格 |
-| cornerHeader | [CornerHeaderCallback](#cornerheadercallback) |    |  | 自定义角头 |
-| layoutHierarchy | [LayoutHierarchy](#layouthierarchy) |  |    | 自定义层级结构 |
-| layoutArrange | [LayoutArrange](#layoutarrange) |  |  |   自定义排列顺序 |
-| layoutCoordinate | [layoutCoordinate](#layoutcoordinate) |    |  | 自定义坐标 |
-| layoutDataPosition | [layoutDataPosition](#layoutdataposition)   |  |  | 自定义数据 |
-| filterDisplayDataItem | [FilterDataItemCallback](#filterdataitemcallback) |  |    | 过滤数据 |
-| mappingDisplayDataItem | [MappingDataItemCallback](#mappingdataitemcallback) |  |    | 转换数据，用于 tooltip 显示 |
-| dataSet | [DataSet](#dataset) |  |  |   自定义数据集 |
-| 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)                                                                                                                                                                                                              |      |         | 单元格样式设置，比如布局类型，宽高，边距，是否隐藏数值列头等                                                                              |
+| hd                   | `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>
@@ -72,7 +74,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>
 
@@ -82,13 +84,13 @@ 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) | -      | ✓    |
-| restOptions | 不定参数，传递额外的信息         | `unknown[]`                                      | -      |      |
+| 参数        | 说明                     | 类型                                             | 默认值 | 必选 |
+| ----------- | ------------------------ | ------------------------------------------------ | ------ | ---- |
+| node        | 当前渲染的 node 节点     | [Node](/docs/api/basic-class/node)               | -      | ✓    |
+| spreadsheet | 表格实例                 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | -      | ✓    |
+| restOptions | 不定参数，传递额外的信息 | `unknown[]`                                      | -      |      |
 
 ## MergedCellCallback
 
@@ -96,7 +98,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>
 
@@ -106,13 +108,13 @@ 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) | -      | ✓    |
-| restOptions | 不定参数，传递额外的信息         | `unknown[]`                                      | -      |      |
+| 参数        | 说明                     | 类型                                             | 默认值 | 必选 |
+| ----------- | ------------------------ | ------------------------------------------------ | ------ | ---- |
+| parent      | 父级单元格               | [S2CellType](#s2celltype)                        | -      | ✓    |
+| spreadsheet | 表格实例                 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | -      | ✓    |
+| restOptions | 不定参数，传递额外的信息 | `unknown[]`                                      | -      |      |
 
 <embed src="@/docs/common/custom/layoutHierarchy.zh.md"></embed>
 
@@ -120,7 +122,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>
 
@@ -141,6 +145,12 @@ CornerHeaderCallback = (parent: S2CellType, spreadsheet: SpreadSheet, ...restOpt
 功能描述：基本数据格式
 
 ```ts
+export enum MiniChartType {
+  Line = 'line',
+  Bar = 'bar',
+  Bullet = 'bullet',
+}
+
 export interface MultiData {
   label?: string;
   values: SimpleData[][];
@@ -149,24 +159,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
 
-| 参数          | 说明                             | 类型                                               | 默认值 | 必选 |
-| ------------- | -------------------------------- | -------------------------------------------------- | ------ | ---- |
-| 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)   |        |      |
+功能描述：基本数据格式。[查看文档](/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) |        |      |
 
 ## DataSet
 
+功能描述：自定义数据集。[查看示例](#TODO)
+
 ```js
 DataSet = (spreadsheet: SpreadSheet) => BaseDataSet;
 ```
diff --git a/s2-site/docs/api/general/S2Theme.en.md b/s2-site/docs/api/general/S2Theme.en.md
index d1cc837840..c2df0e9c80 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 8617aa683c..f7d7ac8cbd 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
 ---
 
 主题配置
@@ -25,9 +26,7 @@ s2.setTheme({
 
 ## ThemeCfg
 
-<description> **optional** _object_ </description>
-
-功能描述： 表主题配置项
+功能描述：表格主题配置项。查看 [文档](/manual/basic/theme) 和 [示例](/examples/theme/default/#colorful)
 
 | 参数    | 参数        | 类型                              | 默认值    | 必选 |
 | ------- | ----------- | --------------------------------- | --------- | ---- |
@@ -37,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)
 
 | 参数              | 参数                                   | 类型                                            | 默认值 | 必选 |
 | ----------------- | -------------------------------------- | ----------------------------------------------- | ------ | ---- |
@@ -70,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)
 
 | 参数              | 说明           | 类型                              | 默认值 | 必选 |
 | ----------------- | -------------- | --------------------------------- | ------ | ---- |
@@ -87,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)
 
 | 参数              | 说明                                                                                                         | 类型                                  | 默认值   | 必选 |
 | ----------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------- | -------- | ---- |
@@ -99,14 +90,10 @@ 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
 
-<description> **optional** _object_ </description>
-
-功能描述： 滚动条样式
+功能描述：滚动条样式。查看 [文档](/manual/basic/theme#%E8%87%AA%E5%AE%9A%E4%B9%89-schema) 和 [示例](/examples/theme/custom#custom-scrollbar)
 
 | 参数            | 说明                       | 类型                          | 默认值               | 必选 |
 | --------------- | -------------------------- | ----------------------------- | -------------------- | ---- |
@@ -121,9 +108,7 @@ s2.setTheme({
 
 #### SplitLine
 
-<description> **optional** _object_ </description>
-
-功能描述： 分割线样式
+功能描述：分割线样式
 
 | 参数                         | 说明                                                      | 类型                                   | 默认值                                                   | 必选 |
 | ---------------------------- | --------------------------------------------------------- | -------------------------------------- | -------------------------------------------------------- | ---- |
@@ -140,31 +125,24 @@ s2.setTheme({
 
 #### TextTheme
 
-<description> **optional** _object_ </description>
-
-功能描述： 文本主题
+功能描述：文本主题
 
 | 参数         | 说明                                                                           | 类型                          | 默认值                                                                                            | 必选 |
 | ------------ | ------------------------------------------------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------- | ---- |
 | 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`                      | -                                                                                                 |      |
 | 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
 
-<description> **optional** _object_ </description>
-
-功能描述： 单元格通用主题
+功能描述：单元格通用主题
 
 | 参数                         | 说明                                    | 类型                                            | 默认值 | 必选 |
 | ---------------------------- | --------------------------------------- | ----------------------------------------------- | ------ | ---- |
@@ -179,13 +157,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/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
 
-<description> **optional** _object_ </description>
-
 功能描述：icon 通用主题
 
 | 参数          | 说明             | 类型                       | 默认值    | 必选 |
@@ -196,7 +172,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({
@@ -222,33 +198,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 外边距，单元格内边距。
 
 | 参数   | 说明 | 类型     | 默认值 | 必选 |
 | ------ | ---- | -------- | ------ | ---- |
@@ -259,9 +211,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)
 
 | 参数    | 说明   | 类型     | 默认值 | 必选 |
 | ------- | ------ | -------- | ------ | ---- |
@@ -270,7 +220,7 @@ type InteractionState = {
 
 #### MiniChartTheme
 
-功能描述：迷你图配置
+功能描述：迷你图配置。查看 [文档](/manual/advanced/chart-in-cell) 和 [示例](examples/custom/custom-cell/#mini-chart)
 
 | 参数     | 说明           | 类型                            | 默认值 | 必选 |
 | -------- | -------------- | ------------------------------- | ------ | ---- |
@@ -279,7 +229,7 @@ type InteractionState = {
 | bullet   | 颜色           | [BulletTheme](#bullettheme)     |        |      |
 | interval | 透明度         | [IntervalTheme](#intervaltheme) |        |      |
 
-#### LineTheme
+##### LineTheme
 
 功能描述：mini 折线图样式配置
 
@@ -288,7 +238,7 @@ type InteractionState = {
 | point    | 折线图的点配置 | `{size: number; fill?: number; opacity?: number}` |        |      |
 | linkLine | 折线图的线配置 | `{size: number; fill: number; opacity: number}`   |        |      |
 
-#### BarTheme
+##### BarTheme
 
 功能描述：mini 柱状图样式配置
 
@@ -298,7 +248,7 @@ type InteractionState = {
 | fill            | 颜色填充             | `string` |        |      |
 | opacity         | 透明度               | `number` |        |      |
 
-#### BulletTheme
+##### BulletTheme
 
 功能描述：mini 子弹图样式配置
 
@@ -307,9 +257,9 @@ type InteractionState = {
 | progressBar        | 进度条样式     | [ProgressBar](#progressbar)               |        |      |
 | comparativeMeasure | 测量标记线     | [ComparativeMeasure](#comparativemeasure) |        |      |
 | rangeColors        | 子弹图状态颜色 | [RangeColors](#rangecolors)               |        |      |
-| backgroundColor    | 子弹图背景颜色 | string                                    |        |      |
+| backgroundColor    | 子弹图背景颜色 | `string`                                    |        |      |
 
-#### ProgressBar
+##### ProgressBar
 
 功能描述：mini 子弹图进度条样式配置
 
@@ -319,7 +269,7 @@ type InteractionState = {
 | height | 高度     | `number`|        |      |
 | innerHeight        | 内高度 | `number`  |        |      |
 
-#### ComparativeMeasure
+##### ComparativeMeasure
 
 功能描述：mini 子弹图测量标记线样式配置
 
@@ -330,7 +280,7 @@ type InteractionState = {
 | fill            | 颜色填充             | `string` |        |      |
 | opacity         | 透明度               | `number` |        |      |
 
-#### RangeColors
+##### RangeColors
 
 功能描述：mini 子弹图状态颜色样式配置
 
@@ -340,7 +290,7 @@ type InteractionState = {
 | satisfactory | 良好     | `string`|        |      |
 | bad            | 不符合预期             | `string` |        |      |
 
-#### IntervalTheme
+##### IntervalTheme
 
 功能描述：mini 条形图样式（条件格式）
 
diff --git a/s2-site/docs/api/graphic.zh.md b/s2-site/docs/api/graphic.zh.md
index 8fb20a7e90..bc06e23680 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.vision/zh/docs/guide/introduce) 作为绘图引擎。一些图形的样式配置，如单元格的 `fill` 属性，`stroke` 属性，以及绘制字体的 `fontFamily` 和 `fontSize` 等，都是直接透传 [AntV/G 的绘图属性](https://g.antv.vision/zh/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.vision/zh/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.vision/zh/docs/guide/introduce) 作为绘图
 
 | 属性名        | 类型              | 功能描述                                                                                                   |
 | ------------- | ----------------- | ------------------------------------------------------------------------------------------------------ |
-| stroke        | `string`          | 线段颜色，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                |
+| stroke        | `string`          | 线段颜色，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理)                                                |
 | lineWidth     | `number`          | 线段宽度                                                                                                   |
 | lineDash      | `[number,number]` | 线段虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离|
 | opacity       | `number`          | 线段透明度                                                                                                 |
@@ -52,9 +57,9 @@ S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图
 | lineHeight    | `number`          | 文字的行高                                                                                                   |
 | textAlign     | `center` \| `left` \| `right` \| `start` \| `end`          | 设置文本内容的对齐方式 |
 | textBaseline  | `top` \| `middle` \| `bottom` \| `alphabetic` \| `hanging`          | 设置在绘制文本时使用的当前文本基线|
-| fill          | `string`          | 文字填充颜色，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                                             |
+| fill          | `string`          | 文字填充颜色，支持 [渐变色配置](#配置渐变色)，[纹理配置](#配置纹理)                                                                             |
 | fillOpacity   | `number`          | 文字填充透明度                                                                                             |
-| stroke        | `string`          | 文字描边，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理)                                                                            |
+| stroke        | `string`          | 文字描边，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理)                                                                            |
 | lineWidth     | `number`          | 文字描边宽度                                                                                               |
 | lineDash      | `[number,number]` | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离 |
 | lineOpacity   | `number`          | 描边透明度                                                                                                   |
diff --git a/s2-site/docs/common/browser.zh.md b/s2-site/docs/common/browser.zh.md
index 5a77535180..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)
 
@@ -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>
 ```
 
@@ -35,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/conditions.zh.md b/s2-site/docs/common/conditions.zh.md
index b707100c20..bc177f9aa1 100644
--- a/s2-site/docs/common/conditions.zh.md
+++ b/s2-site/docs/common/conditions.zh.md
@@ -5,50 +5,35 @@ order: 2
 
 ## Conditions
 
-类型：`object`，**必选**，默认值：`{}`
+功能描述： 配置字段标记。分为文本 (text)，背景 (background)，柱状图 (interval)，图标 (icon)。
 
-<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`，**必选**
+功能描述： 配置条件格式。TextCondition，BackgroundCondition，IntervalCondition，IconCondition 具继承于 Condition。
 
-<description>功能描述： 配置条件格式。包括文本 (text)，背景 (background)，柱状图 (interval)。</description>
+| 参数    | 说明                                           | 类型                                  | 默认值 | 必选 |
+| ------- | ---------------------------------------------- | ------------------------------------- | ------ | ---- |
+| field   | 1. 字段 ID <br /> 2. 使用正则表达式匹配字段 ID | `string \| RegExp`                    |        | ✓    |
+| mapping | 作用映射函数​                                  | [ConditionMapping](#conditionmapping) |        | ✓    |
 
-| 参数      | 说明                                | 类型         | 默认值      | 必选  |
-|---------|-----------------------------------|------------|----------|-----|
-| field   | 1. 字段 ID <br /> 2. 使用正则表达式匹配字段 ID | `string \| RegExp` |     | ✓          |
-| mapping | 作用映射函数​                           | `function` |          | ✓   |
+#### ConditionMapping
 
-#### MappingFunction
+功能描述：字段标记处理函数。查看 [文档](/manual/basic/conditions) 和 [示例](/examples/analysis/conditions/#interval)
 
 ```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 +75,11 @@ const options = {
 
 ### IconCondition
 
-类型：`object`，**必选**，默认值：`null`
-
-<description>功能描述： 配置图标 (icon) 条件格式。</description>
+功能描述： 配置图标 (icon) 条件格式，和其他 Condition 的唯一区别在于多了 position 参数用于自定义 icon 相对于文本的位置。查看 [文档](/manual/basic/conditions) 和 [示例](/examples/analysis/conditions/#icon)
 
-| 参数     | 说明 | 类型     | 默认值  | 必选    |
-| -------- | ------------ | -------- | ------- | ----  |
-| field    | 字段 ID       | `string`   |                | ✓    |
-| position | icon 相较于文字的位置 | `left \| right`   | `right` |         |
-| mapping  | 映射函数 | [MappingFunction](#mappingfunction) |                 | ✓    |
+| 参数     | 说明                  | 类型            | 默认值  | 必选 |
+| -------- | --------------------- | --------------- | ------- | ---- |
+| position | icon 相较于文字的位置 | `left` \| `right` | `right` |      |
 
 **icon condition 用法示例：**
 
@@ -121,3 +102,5 @@ const options = {
 };
 
 ```
+
+<embed src="@/docs/common/icon.zh.md"></embed>​
diff --git a/s2-site/docs/common/contact-us.zh.md b/s2-site/docs/common/contact-us.zh.md
index 6281d0dc71..04d008f5e6 100644
--- a/s2-site/docs/common/contact-us.zh.md
+++ b/s2-site/docs/common/contact-us.zh.md
@@ -3,6 +3,12 @@ title: 联系我们
 order: 5
 ---
 
+:::warning{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">
diff --git a/s2-site/docs/common/export.en.md b/s2-site/docs/common/copy-export.en.md
similarity index 96%
rename from s2-site/docs/common/export.en.md
rename to s2-site/docs/common/copy-export.en.md
index 5eb7586d5e..e6843fafc9 100644
--- a/s2-site/docs/common/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'
 
 // 拿到复制数据
@@ -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
new file mode 100644
index 0000000000..44303e3a14
--- /dev/null
+++ b/s2-site/docs/common/copy-export.zh.md
@@ -0,0 +1,267 @@
+---
+title: 复制与导出
+order: 8
+---
+
+<Playground path="interaction/basic/demo/copy-export.ts" height="500" rid='copy-export'></playground>
+
+## 复制
+
+### 1. 全量复制
+
+```ts | pure
+import { asyncGetAllPlainData, copyToClipboard } from '@antv/s2'
+
+// 拿到复制数据
+const data = await asyncGetAllPlainData({
+  sheetInstance: s2,
+  split: '\t',
+  formatOptions: false,
+  // formatOptions: {
+  //   formatHeader: false,
+  //   formatData: true
+  // },
+});
+
+// 同步复制：copyToClipboard(data, false)
+copyToClipboard(data)
+  .then(() => {
+    console.log('复制成功')
+  })
+  .catch(() => {
+    console.log('复制失败')
+  })
+```
+
+[查看示例](/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`](/api/general/s2-data-config#meta) 对数据有 [格式化处理](/manual/basic/formatter), 那么可以开启 `withFormat`, 这样复制时会拿到格式化之后的数据。
+
+```ts
+const s2Options = {
+  interaction: {
+    copy: {
+      // 开启复制
+      enable: true,
+      // 复制时携带表头
+      withHeader: true,
+      // 复制格式化后的数据
+      withFormat: 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: {
+    copy: {
+      // 是否开启复制
+      enable: true,
+      // 复制时携带表头
+      withHeader: true,
+      // 复制格式化后的数据
+      withFormat: 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 带表头复制
+
+开启 `withHeader` 后，复制时会携带当前选中数据对应的行列头单元格数据。
+
+```ts
+const s2Options = {
+  interaction: {
+    copy: {
+      enable: true,
+      withHeader: true,
+    },
+  }
+};
+```
+
+<img alt="withHeader" 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 { asyncGetAllPlainData, download } from '@antv/s2'
+
+// 拿到复制数据
+const data = await asyncGetAllPlainData({
+  sheetInstance: s2,
+  split: '\t',
+  formatOptions: false,
+  // formatOptions: {
+  //   formatHeader: false,
+  //   formatData: true
+  // },
+});
+
+// 导出数据 (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 { asyncGetAllPlainData, CopyMIMEType } from '@antv/s2'
+
+// 复制到 word、语雀等场景会成为一个空表格
+const data = await asyncGetAllPlainData({
+  sheetInstance: s2,
+  split: '\t',
+  formatOptions: false,
+  // 自定义导出类型
+  customTransformer: () => {
+    return {
+      [CopyMIMEType.HTML]: () => {
+        return {
+          type: CopyMIMEType.HTML,
+          content: `<td></td>`
+        };
+      },
+    };
+  },
+});
+```
+
+#### API
+
+##### asyncGetAllPlainData
+
+| 参数          | 说明      | 类型              | 默认值           | 必选 |
+| ------------|-----------------|---------------|---------------| --- |
+| sheetInstance | s2 实例    | [SpreadSheet](/docs/api/basic-class/spreadsheet)     |      | ✓    |
+| split       | 分隔符           | `string`       |     | ✓    |
+| formatOptions  | 是否格式化，可以分别对数据单元格和行列头进行格式化，传 `boolean` 会同时对单元格和行列头生效。 | `boolean \|  { formatHeader?: boolean, formatData?: boolean }`| `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
+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;
+}
+```
+
+| 参数 | 说明     | 类型                       | 默认值 | 必选 |
+| --- | --- |--------------------------|-----| --- |
+| type | 复制内容的 MIMEType | [CopyMIMEType](#copymimetype)           |     | ✓    |
+| transformer | 处理函数 | `MatrixHTMLTransformer \| MatrixPlainTransformer`   |      |   ✓   |
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 ad3f699af4..b158924ad5 100644
--- a/s2-site/docs/common/custom/customTreeNode.zh.md
+++ b/s2-site/docs/common/custom/customTreeNode.zh.md
@@ -3,14 +3,20 @@ title: 自定义树状结构
 order: 8
 ---
 
-### CustomTreeNode
+#### 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)
 
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --- | --- | --- | --- | :-:  |
-| key | 当前节点唯一标识 | `string` |    | ✓ |
+| field | 当前节点唯一标识 | `string` |    | ✓ |
 | title | 当前节点展示名 | `string` |    | ✓ |
 | collapsed | 节点是否收起（树状模式下，行头非叶子节点有效） | `boolean` |  `false`  |  |
 | description | 节点的额外描述信息，在对应行头的 tooltip 中展示 | `string` |    |  |
 | children | 子节点 | [CustomTreeNode[]](#customtreenode) |    |  |
+
+##### CustomHeaderField
+
+```ts
+type CustomHeaderField = CustomTreeNode | string;
+```
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..2cb56341f7 100644
--- a/s2-site/docs/common/custom/headerActionIcons.zh.md
+++ b/s2-site/docs/common/custom/headerActionIcons.zh.md
@@ -5,13 +5,13 @@ 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` |
-| 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/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/development.zh.md b/s2-site/docs/common/development.zh.md
index 68e7f8d96c..65eb9092fa 100644
--- a/s2-site/docs/common/development.zh.md
+++ b/s2-site/docs/common/development.zh.md
@@ -1,12 +1,6 @@
-跃跃欲试想贡献？[查看贡献指南](https://s2.antv.antgroup.com/manual/contribution) , 欢迎 [Pull Request](https://github.com/antvis/S2/pulls)，或给我们 [报告 Bug](https://github.com/antvis/S2/issues/new?assignees=&labels=&projects=&template=bug-report.md&title=%F0%9F%90%9B).
-
-> 强烈建议花一点你的宝贵时间阅读：
-
-- [《提 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)
+:::info{title="跃跃欲试想贡献？"}
+[查看贡献指南](/manual/contribution)
+:::
 
 > S2 使用 pnpm 作为包管理器
 
@@ -24,14 +18,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/env.en.md b/s2-site/docs/common/env.en.md
new file mode 100644
index 0000000000..74f32add88
--- /dev/null
+++ b/s2-site/docs/common/env.en.md
@@ -0,0 +1,5 @@
+| [<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
new file mode 100644
index 0000000000..74f32add88
--- /dev/null
+++ b/s2-site/docs/common/env.zh.md
@@ -0,0 +1,5 @@
+| [<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/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 f2e7a2d7a5..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/> （透视表有效） |
+| 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-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/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 3395d24d97..d051fd80b6 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`      | -      |      |
@@ -12,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 8f47a35f1b..6aeab44a6f 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                           |    |    |
@@ -12,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) 数据格式化方法                                                                                                                                      | <code> (transformer: [Transformer](/docs/api/components/export#transformer)) => Partial<Transformer> </code> | `transformer` |      |
+| copy                   | 单元格复制配置  | [Copy](#copy)         |         |                  |
 | customInteractions                   | 自定义交互 [详情](/docs/manual/advanced/interaction/custom)                                                                                                                | [CustomInteraction[]](#custominteraction)                                                                 |                                                       |                  |
 | scrollSpeedRatio                     | 用于控制滚动速率，分水平和垂直两个方向，默认为 1                                                                                                                                           | [ScrollSpeedRatio](#scrollspeedratio)                                                                     |                                                       |                  |
 | autoResetSheetStyle                  | 用于控制点击表格外区域和按下 esc 键时是否重置交互状态                                                                                                                                       | `boolean`                                                                                                 | `true`                                                |                  |
@@ -24,21 +23,34 @@ 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} | `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
+
+功能描述：单元格复制。查看 [文档](/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)
+功能描述：自定义交互，继承 BaseEvent:  [查看示例](/docs/manual/advanced/interaction/custom)
 
 | 参数        | 说明           | 类型                                              | 默认值 | 必选  |
 | ----------- | -------------- | ------------------------------------------------- | ------ | --- |
 | key         | 交互的唯一标识 | `string`                                          |        |   ✓   |
-| interaction |                | [InteractionConstructor](/docs/api/basic-class/interaction#interactionconstructor) |        |   ✓   |
+| interaction |  交互实例             | [InteractionConstructor](/docs/api/basic-class/interaction#interactionconstructor) |        |   ✓   |
 
 ### ScrollSpeedRatio
 
+功能描述：滚动速率配置。[查看示例](/examples/interaction/advanced/#scroll-speed-ratio)
+
 ```js
 interface ScrollSpeedRatio {
   horizontal?: number; // 水平滚动速率，默认为 1
@@ -48,6 +60,8 @@ interface ScrollSpeedRatio {
 
 ### ResizeInteractionOptions
 
+功能描述：宽高调整配置。[查看示例](/examples/interaction/advanced/#resize-active)
+
 | 参数                 | 说明     | 类型    | 默认值 | 必选  |
 | -------------------- | ------- | ----------------- | ------ | --- |
 | rowCellVertical      | 是否开启行头垂直方向 resize 热区                                                   | `boolean`         | true   |       |
@@ -55,13 +69,17 @@ 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 |   |       |
+| minCellWidth  | 单元格可拖拽最小宽度            | `number`|  20       |      |
+| minCellHeight  | 单元格可拖拽最小高度        | `number` | 20        |      |
 
 ### 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 c0cbed655b..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 图（支持 折线图、子弹图、柱状图）. [查看示例](/examples/react-component/sheet/#strategy-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`
+功能描述：内置折线图、柱状图数据配置项，数据格式参考 [`G2`](https://g2.antv.antgroup.com/manual/core/api)
 
 | 参数 | 说明 | 类型 | 必选  | 默认值 |
 | --- | ---- | --- | ---- | ------ |
@@ -24,7 +18,7 @@ order: 6
 
 #### BulletValue
 
-子弹图数据配置项
+功能描述：内置子弹图数据配置项
 
 | 参数 | 说明 | 类型 | 必选  | 默认值 |
 | --- | ---- | --- | ---- | ------ |
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 01f71f584a..9e798b12e9 100644
--- a/s2-site/docs/common/packages.zh.md
+++ b/s2-site/docs/common/packages.zh.md
@@ -3,17 +3,22 @@ title: Packages
 order: 5
 ---
 
-- `@antv/s2`: 基于 `Canvas` 和 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 开发，提供基本的表格展示/交互等能力。
-- `@antv/s2-react`: 基于 `React` 和 `@antv/s2` 封装，提供配套的分析组件，配置项和 `@antv/s2` 通用。
-- `@antv/s2-vue`: 基于 `Vue3` 和 `@antv/s2` 封装，配置项和 `@antv/s2` 通用，如果你想在 `Vue2` 中使用，请使用 `@antv/s2`。
+:::info{title="提示"}
 
-也就是说 `@antv/s2` 和**框架无关**，你也可以在 `Vue`, `Angular` 等框架中直接使用。
+创建 `S2` 表格有三种方式，基础类版本 `@antv/s2` 和 基于 `@antv/s2` 封装的 `React` 和 `Vue3` 版本：
+
+- `@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` 等任意框架中使用。
+:::
 
 | 版本号  | 稳定版    | 测试版   | 预览版  | 先行版 | 包大小  | 下载量    |
 | -------- | ------ | --------- | ---------- | ----------  | ----------  | ------ |
-| [@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?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='如何获取新版本发布通知？'}
 
@@ -22,4 +27,3 @@ order: 5
 - `Watch` [S2 代码仓库](https://github.com/antvis/S2), 选择 `Custom - Releases` 来获取消息推送。
 
 ![preview](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NKYFSKFV_scAAAAAAAAAAAAADmJ7AQ/original)
-:::
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/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/common/sort-param.zh.md b/s2-site/docs/common/sort-param.zh.md
index 0acd59d8bc..f588ceb87f 100644
--- a/s2-site/docs/common/sort-param.zh.md
+++ b/s2-site/docs/common/sort-param.zh.md
@@ -1,11 +1,11 @@
 ---
-title: SortParam
+title: SortParams
 order: 7
 ---
 
-### SortParam
+### 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..b0a95f5dc7 100644
--- a/s2-site/docs/common/style.zh.md
+++ b/s2-site/docs/common/style.zh.md
@@ -5,18 +5,21 @@ 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`：行列紧凑布局，指标维度少的时候无法布满整个画布 |
-| 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
 
-object **必选**,_default：null_ 功能描述：数值单元格配置
+功能描述：数值单元格配置
 
 | 参数    | 说明 | 类型   | 默认值 | 必选  |
 | ------- | ------------ | ------ | ------ | ---- |
@@ -24,9 +27,11 @@ object **必选**,_default：null_ 功能描述：数值单元格配置
 | height  | 单元格高度   | `number` |    30 | - |
 | valuesCfg  | 单元格配置   | `{ originalValueField?: string, widthPercent?: number[], showOriginalValue?: boolean }` |   | - |
 
+其他公用配置见 [CellTextWordWrapStyle](#celltextwordwrapstyle)
+
 ### ColCell
 
-object **必选**,_default：null_ 功能描述： 列头单元格配置
+功能描述：列头单元格配置
 
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --- | --- | --- | --- | ---  |
@@ -38,7 +43,7 @@ object **必选**,_default：null_ 功能描述： 列头单元格配置
 
 ### RowCell
 
-object **必选**,_default：null_ 功能描述： 行头单元格配置
+功能描述：行头单元格配置
 
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --- | --- | --- | --- | ---  |
@@ -50,3 +55,25 @@ object **必选**,_default：null_ 功能描述： 行头单元格配置
 | 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/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/adaptive.zh.md b/s2-site/docs/manual/advanced/adaptive.zh.md
index c5c9083f53..79c640906b 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</Badge> <Badge>@antv/s2-react</Badge> <Badge type="success">@antv/s2-vue</Badge>
+
+S2 默认根据配置的 `width` 和 `height` 进行渲染：
 
 ```ts
 const s2Options = {
@@ -12,7 +14,8 @@ const s2Options = {
 }
 ```
 
-需要注意的是，表格基于 `Canvas` 渲染，配置的宽高其实就是设置 `canvas` 的 `width` 和 `height`, 也就是意味着 `100%`, `80vw` 之类的配置是不生效的：
+:::warning{title="注意"}
+表格基于 `Canvas` 渲染，配置的宽高其实就是设置 `<canvas/>` 的 `width` 和 `height`, 也就是意味着 `100%`, `80vw` 之类的配置是**不生效的**：
 
 ```ts
 const s2Options = {
@@ -21,11 +24,15 @@ 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) 监听容器大小变化，然后更新表格宽高
+
+<Playground path="layout/adaptive/demo/window-adaptation.ts" rid='window-adaptation' height='300'></playground>
 
 ```ts
 import { PivotSheet } from '@antv/s2'
@@ -33,15 +40,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)
@@ -50,7 +61,9 @@ new ResizeObserver(([entry] = []) => {
 
 ### 容器自适应
 
-如果是容器本身大小发生改变，而不是窗口，那么可以使用 [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'
@@ -60,9 +73,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] = []) => {
@@ -84,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/basic/sort/advanced.en.md b/s2-site/docs/manual/advanced/analysis/advanced.en.md
similarity index 94%
rename from s2-site/docs/manual/basic/sort/advanced.en.md
rename to s2-site/docs/manual/advanced/analysis/advanced.en.md
index 91e390554b..611730e285 100644
--- a/s2-site/docs/manual/basic/sort/advanced.en.md
+++ b/s2-site/docs/manual/advanced/analysis/advanced.en.md
@@ -1,6 +1,7 @@
 ---
 title: Advanced Sort
-order: 1
+order: 2
+tag: Updated
 ---
 
 The `React` version provides an advanced sorting component, optionally available. [view example](/examples/analysis/sort#advanced)
@@ -9,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';
@@ -28,7 +29,7 @@ const AdvancedSortDemo = () => {
       dataCfg={dataCfg}
       options={s2Options}
       header={{
-        advancedSortCfg: {
+        advancedSort: {
           open: true,
           sortParams: [{ sortFieldId: 'province', sortMethod: 'DESC' }],
           onSortConfirm: (ruleValues, sortParams: SortParams) => {
@@ -48,7 +49,7 @@ ReactDOM.render(<AdvancedSortDemo />, document.getElementById('container'));
 ### show
 
 ```ts
-advancedSortCfg: {
+advancedSort: {
   open: true,
 }
 ```
@@ -60,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/advanced/analysis/advanced.zh.md
similarity index 64%
rename from s2-site/docs/manual/basic/sort/advanced.zh.md
rename to s2-site/docs/manual/advanced/analysis/advanced.zh.md
index 69e9130be0..54d272d8cd 100644
--- a/s2-site/docs/manual/basic/sort/advanced.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/advanced.zh.md
@@ -1,19 +1,23 @@
 ---
 title: 高级排序
-order: 1
+order: 2
+tag: Updated
 ---
 
-`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="注意"}
+组件内部不维护状态，可自行实现成受控模式。
+:::
 
 ## 快速上手
 
-使用 `@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';
-import { SortParams } from '@antv/s2';
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -27,10 +31,10 @@ export const AdvancedSortDemo = () => {
       dataCfg={dataCfg}
       options={s2Options}
       header={{
-        advancedSortCfg: {
+        advancedSort: {
           open: true,
           sortParams: [{ sortFieldId: 'province', sortMethod: 'DESC' }],
-          onSortConfirm: (ruleValues, sortParams: SortParams) => {
+          onSortConfirm: (ruleValues, sortParams) => {
             setDataCfg({ ...dataCfg, sortParams });
           },
         },
@@ -38,6 +42,7 @@ export const AdvancedSortDemo = () => {
     />
   );
 };
+
 ```
 
 ## 配置
@@ -47,7 +52,7 @@ export const AdvancedSortDemo = () => {
 ```tsx
 <SheetComponent
   header={{
-    advancedSortCfg: {
+    advancedSort: {
       open: true,
     },
   }}
@@ -60,12 +65,12 @@ export const AdvancedSortDemo = () => {
 
 通过 `onSortConfirm` 函数透出所选规则数据 `ruleValues` 和处理成表可直接用的数据 `sortParams`
 
-```ts
+```tsx
 <SheetComponent
   header={{
-    advancedSortCfg: {
+    advancedSort: {
       open: true,
-      onSortConfirm: (ruleValues: RuleValue[], sortParams: SortParams) => {
+      onSortConfirm: (ruleValues, sortParams) => {
         console.log(ruleValues, sortParams)
       }
     },
@@ -74,7 +79,7 @@ export const AdvancedSortDemo = () => {
 
 ```
 
-### 定制化
+### 自定义
 
 #### 文案显示
 
@@ -85,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" />
 
 #### 维度列表
 
@@ -101,26 +106,32 @@ export const AdvancedSortDemo = () => {
 | name  | 维度名称 | `string`   | -      | ✓   |
 | list  | 维度列表 | `string[]` | -      | ✓   |
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*6g9aTKIOlRcAAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*6g9aTKIOlRcAAAAAAAAAAAAAARQnAQ" width="600" alt="row" />
 
 `list` 用于手动排序
 
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*rPkKQJo8ln4AAAAAAAAAAAAAARQnAQ" width = "600"  alt="row" />
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*rPkKQJo8ln4AAAAAAAAAAAAAARQnAQ" width= "600" alt="row" />
 
 #### 规则列表
 
-支持自定义规则配置列表，不配置默认为：`首字母、手动排序、其他字段`
+支持自定义规则配置列表，默认规则为：`首字母、手动排序、其他字段`
 
-> 注意：如果这里自定义，则需在 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" />
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*V2PWTItVICQAAAAAAAAAAAAAARQnAQ" width="600" alt="row" />
 
 #### 打开排序弹窗
 
-可通过 `onSortOpen: () => void` 回调来支持自定义打开排序弹窗，一般用于提前获取弹框数据
+可通过 `onSortOpen: () => void` 回调来支持自定义打开排序弹窗，一般用于提前获取弹框数据。
+
+## 示例
+
+<Playground path='/analysis/sort/demo/advanced.tsx' rid='advanced-sort'></playground>
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 72%
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 e135baed43..83e820a82a 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` 封装了 `维度下钻` 的组件，可以为你挖掘不同维度下更详细的数据，让你的数据洞察变得更清晰, 也可以通过下钻的方式实现数据按需渲染。
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/J7bnG8lcf/xiazuan.gif" height="400" alt="preview" />
 
@@ -11,29 +13,30 @@ S2 提供的「维度下钻」的能力，可以为你挖掘不同维度下更
 
 ### 基本概念
 
-- 主要适用于存在分层关系的数据源， 对于某一个数据信息，向下钻取不同层级的数据表现。🌰 列如：查看不同区域的销售数据，您查看华中区销售额时，可以下钻查看湖北省的销售额。
+- 主要适用于存在分层关系的数据源，对于某一个数据信息，向下钻取不同层级的数据表现。🌰 例如：查看不同区域的销售数据，您查看华中区销售额时，可以下钻查看湖北省的销售额。
 - 下钻是由汇总数据深入到细节，层层深入以便更详细的查看数据的方式，让数据更加清晰明了，帮助充分挖掘数据背后的价值。
 
 ### 功能描述
 
-配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻
+配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻。
 
 ### 拓展
 
 向上钻取： 存在向上钻取，查看不同区域的销售数据，您查看浙江省销售额时，可以上钻查看华东区的销售额。
 
-## 快速上手
+## 示例
 
 <details>
 <summary>点击查看 PartDrillDown 维度下钻配置</summary>
 
 ```js
 
-const sex = [ '男', '女' ];
+const sex = ['男', '女'\];
 
 const PartDrillDown = {
   drillConfig: {
-    dataSet: [ // 下钻数据源配置
+    // 下钻数据源配置
+    dataSet: [
       {
         name: '客户性别',
         value: 'sex',
@@ -41,7 +44,6 @@ const PartDrillDown = {
       },
     ],
   },
-
   // 点击下钻后的回调
   fetchData: (meta, drillFields) =>
     new Promise((resolve) => {
@@ -86,7 +88,7 @@ const PartDrillDown = {
 
 </details>
 
-```jsx
+```tsx
 import React from 'react';
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
@@ -106,13 +108,30 @@ const App = () => {
 }
 ```
 
-<Playground path='react-component/drill-down/demo/for-pivot.tsx' rid='container'></playground>
+<Playground path='react-component/drill-down/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-down/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..5bc335ff4a
--- /dev/null
+++ b/s2-site/docs/manual/advanced/analysis/editable-mode.zh.md
@@ -0,0 +1,181 @@
+---
+title: 编辑表
+order: 3
+---
+
+<Badge>@antv/s2-react</Badge>
+
+编辑表是明细表的衍生形态之一。在提供完整的明细表的分析功能之外，还支持对数据的修改操作，双击数值单元格后，会添加一个带有 `<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" />
+
+## 快速上手
+
+<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>
+
+```tsx
+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 = () => {
+  // 编辑完成
+  const onDataCellEditEnd = (meta) => {
+    console.log('onDataCellEditEnd', meta);
+  };
+
+  return (
+    <SheetComponent
+      sheetType="editable"
+      dataCfg={s2DataCfg}
+      options={s2Options}
+      onDataCellEditEnd={onDataCellEditEnd}
+    />
+  )
+}
+```
+
+## 示例
+
+<Playground path='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 53%
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..fe0d331544 100644
--- a/s2-site/docs/manual/basic/analysis/copy-export.en.md
+++ b/s2-site/docs/manual/advanced/analysis/export.en.md
@@ -1,6 +1,7 @@
 ---
-title: Copy And Export
-order: 11
+title: Export
+order: 3
+tag: Updated
 ---
 
 ## Introduction
@@ -31,12 +32,16 @@ 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)
+    withFormat: false,
+    // 复制数值时是否携带所对应的行列头维值
+    withHeader: true,
     // 圈选复制前，需要开启圈选功能
     brushSelection: {
-      dataCell: true, // 默认开启
-      rowCell: true,
-      colCell: true,
+      dataCell: true, // 圈选数值单元格 （默认开启）
+      rowCell: true,  // 圈选行头单元格
+      colCell: true,  // 圈选列头单元格
     }
   }
 };
@@ -44,45 +49,75 @@ const s2Options = {
 
 * copy to excel
 
-<img alt="excelCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*LzTYTpFosccAAAAAAAAAAAAAARQnAQ" width="600">
+<img alt="excelCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*LzTYTpFosccAAAAAAAAAAAAAARQnAQ" width="600"/>
 
 * Copy with HTML format
 
-<img alt="HTMLCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DuHCSbpv_XkAAAAAAAAAAAAAARQnAQ" width="600">
+##### 复制粘贴到富文本编辑器中 （带 `HTML` 格式）
 
 * Copy header content
 
-<img alt="CopyCol" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*_NukQpysLC8AAAAAAAAAAAAAARQnAQ" width="600">
+<br/>
 
 * Copy column header content
 
-<img alt="CopyRow" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ncuAQaL4AvAAAAAAAAAAAAAAARQnAQ" width="600">
+<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/>
+
+##### 复制格式化后的数据
+
+**withFormat**: 当 `S2DataConfig` 的 `meta` 中配置了 [自定义格式函数时](/api/general/s2-data-config#meta), 是否按照 `formatter` 复制数据
+
+```ts
+const s2DataConfig = {
+  fields: { ... }
+  meta: [
+    {
+      field: 'city',
+      name: '城市',
+      formatter: (value) => `${value}-xx`
+    }
+  ]
+}
+
+const s2Options = {
+  interaction: {
+    copy: { enable: true },
+    withFormat: true,
+  }
+};
+```
 
 ### export
 
 `@antv/s2-react` component layer provides export function
 
-```ts
+:::info{title='使用 `@antv/s2` 如何导出？'}
+`@antv/s2` 内置了一系列工具函数，[见下方文档](#原始导出方法)
+:::
+
+```tsx
 import { SheetComponent } from '@antv/s2-react'
 
 <SheetComponent
   dataCfg={dataCfg}
   options={options}
   header={{
-    exportCfg: {
+    export: {
       open: true
     }
   }}
@@ -93,4 +128,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..017fde04aa
--- /dev/null
+++ b/s2-site/docs/manual/advanced/analysis/export.zh.md
@@ -0,0 +1,61 @@
+---
+title: 导出
+order: 3
+tag: Updated
+---
+
+<Badge>@antv/s2</Badge> <Badge>@antv/s2-react</Badge>
+
+`@antv/s2` 提供了 [复制导出的基础能力](/manual/advanced/interaction/copy), `@antv/s2-react` 组件层基于 `@antv/s2` 和 `antd` 封装了开箱即用的导出功能。
+
+## 使用
+
+```tsx | {17-21}
+import { SheetComponent } from '@antv/s2-react'
+
+const S2Options = {
+  interaction: {
+    // 开启复制
+    copy: {
+      enable: true
+    }
+  }
+}
+
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={dataCfg}
+      options={S2Options}
+      header={{
+        export: {
+          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>
+
+[查看示例](/examples/react-component/export/#export)
+
+## 在非 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/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..b3612f87de
--- /dev/null
+++ b/s2-site/docs/manual/advanced/analysis/header.zh.md
@@ -0,0 +1,80 @@
+---
+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}
+    />
+  );
+};
+
+```
+
+## 示例
+
+<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/basic/analysis/mobile-component.en.md b/s2-site/docs/manual/advanced/analysis/mobile-component.en.md
similarity index 99%
rename from s2-site/docs/manual/basic/analysis/mobile-component.en.md
rename to s2-site/docs/manual/advanced/analysis/mobile-component.en.md
index 16b1865caa..bf815975ab 100644
--- a/s2-site/docs/manual/basic/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/basic/analysis/mobile-component.zh.md b/s2-site/docs/manual/advanced/analysis/mobile-component.zh.md
similarity index 57%
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 7d48213eca..c52a60add0 100644
--- a/s2-site/docs/manual/basic/analysis/mobile-component.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/mobile-component.zh.md
@@ -1,50 +1,49 @@
 ---
-title: 移动端组件
+title: 移动端表格组件
 order: 10
+tag: New
 ---
 
-为了满足移动端的使用场景，`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)
 
-## 移动端表格
+:::
 
-```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                                                       |
-|-------------------------------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------------ |
+| 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: LayoutWidthType.ColAdaptive,
+    layoutWidthType: 'colAdaptive',
   },
   interaction: {
     hoverHighlight: false,
@@ -57,21 +56,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 92%
rename from s2-site/docs/manual/basic/analysis/pagination.en.md
rename to s2-site/docs/manual/advanced/analysis/pagination.en.md
index 586a20553c..5127e587fc 100644
--- a/s2-site/docs/manual/basic/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/analysis/pagination.zh.md b/s2-site/docs/manual/advanced/analysis/pagination.zh.md
new file mode 100644
index 0000000000..c6d8a9a6e2
--- /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`   |   `{  onShowSizeChange?: (pageSize: number) => void, onChange?: (current: number) => void }` | `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 96%
rename from s2-site/docs/manual/basic/analysis/strategy.en.md
rename to s2-site/docs/manual/advanced/analysis/strategy.en.md
index e15062b2fb..9c64817e80 100644
--- a/s2-site/docs/manual/basic/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/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 0373d33f85..887fc35ff6 100644
--- a/s2-site/docs/manual/basic/analysis/strategy.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/strategy.zh.md
@@ -1,21 +1,26 @@
 ---
-title: 趋势分析表组件
+title: 趋势分析表
 order: 9
+tag: Updated
 ---
 
+<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)
+:::
 
 ## 快速上手
 
@@ -79,21 +84,21 @@ import '@antv/s2-react/dist/style.min.css';
 const App = () => {
   return (
     <SheetComponent
-      dataCfg={s2DataCfg}
-      options={s2Options}
       sheetType="strategy"
+      dataCfg={s2DataConfig}
+      options={s2Options}
     />
   )
 }
 ```
 
-<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 +109,7 @@ const data = {
 }
 ```
 
-- 行头层级结构：[自定义层级结构](/zh/docs/manual/advanced/custom/custom-tree)
+#### 2. 行头层级结构：[自定义层级结构](/zh/docs/manual/advanced/custom/custom-tree)
 
 ```ts
 const fields = {
@@ -118,7 +123,7 @@ const fields = {
 }
 ```
 
-- 虚拟列：趋势分析表存在同环比指标时，会通过虚拟列来显示对应的同环比指标名称，此时，表格会显示两级列头
+#### 3. 虚拟列：趋势分析表存在同环比指标时，会通过虚拟列来显示对应的同环比指标名称，此时，表格会显示两级列头
 
 ```ts
 import { EXTRA_COLUMN_FIELD } from '@antv/s2'
@@ -130,7 +135,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 +160,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 +223,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 +233,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,18 +252,18 @@ 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='strategy-mini-chart'></playground>
 
-<Playground path='react-component/sheet/demo/strategy-mini-chart.tsx' rid='container2'></playground>
+如果想要更换 mini 图样式配置，可以参考 [主题配置]('/api/general/s2theme#minicharttheme')
 
 ### 在普通透视表中使用
 
 如果不依赖 `React`, 想在 `@antv/s2` 普通的透视表中使用 mini 图，可以参考这个 [示例](/zh/examples/custom/custom-cell/#mini-chart)
 
-<Playground path='custom/custom-cell/demo/mini-chart.ts' rid='container3'></playground>
+<Playground path='custom/custom-cell/demo/mini-chart.ts' rid='mini-chart'></playground>
 
 ### API
 
 <embed src="@/docs/common/mini-chart.zh.md"></embed>
-
-如果想要更换 Mini 图样式配置，可以参考 [主题配置]('/zh/api/general/s2theme#minicharttheme')
diff --git a/s2-site/docs/manual/basic/analysis/switcher.en.md b/s2-site/docs/manual/advanced/analysis/switcher.en.md
similarity index 99%
rename from s2-site/docs/manual/basic/analysis/switcher.en.md
rename to s2-site/docs/manual/advanced/analysis/switcher.en.md
index 9b650e6845..ef12323d9e 100644
--- a/s2-site/docs/manual/basic/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/basic/analysis/switcher.zh.md b/s2-site/docs/manual/advanced/analysis/switcher.zh.md
similarity index 67%
rename from s2-site/docs/manual/basic/analysis/switcher.zh.md
rename to s2-site/docs/manual/advanced/analysis/switcher.zh.md
index 9a4e505757..d4d0303e75 100644
--- a/s2-site/docs/manual/basic/analysis/switcher.zh.md
+++ b/s2-site/docs/manual/advanced/analysis/switcher.zh.md
@@ -1,9 +1,11 @@
 ---
-title: 维度切换组件
-order: 10
+title: 维度切换
+order: 2
 ---
 
-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" />
 
@@ -30,9 +32,10 @@ const switcherFields = {
 
 </details>
 
-```js
+```tsx
 import React from "react";
 import { Switcher } from "@antv/s2-react";
+import '@antv/s2-react/dist/style.min.css';
 
 const onSubmit = (result) => {
   console.log("result:", result);
@@ -40,22 +43,25 @@ const onSubmit = (result) => {
 
 const App = () => {
   return (
-    <Switcher {...switcherFields} onSubmit={onSubmit} />
+    <Switcher {...switcherFields} onSubmit={onSubmit} />,
   )
 }
 ```
 
-<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>
@@ -65,7 +71,7 @@ Switcher 可接收三种类型的维度配置，分别是 `rows`，`columns` 和
   <tbody>
     <tr>
       <td style="text-align: center;">
-      一种维度（主要用于明细表）
+        一种维度（主要用于明细表）
       </td>
       <td style="text-align: center;">
         三种维度（主要用于透视表）
@@ -73,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
@@ -93,6 +101,8 @@ const field = {
 };
 ```
 
+#### 展开子项
+
 * 如果维度中的每一个字段项还存在关联子项，可以设置 `expandable:true`, 该属性用于控制子项是否被展开，也可以进一步设置 `expandText` 定制展开 `checkbox` 的提示文字：
 
 ```js
@@ -105,6 +115,8 @@ const field = {
 };
 ```
 
+#### 允许为空
+
 * 如果当前维度在移动交互中需要至少保留一个子项不能被拖拽出去，可以设置 `allowEmpty:false`, 该属性用于控制维度是否可以将全部子项拖出到其他维度：
 
 ```js
@@ -120,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>
 
-你可以通过以下示例查看详细的结果数据类型：
+:::warning{title="注意"}
 
-<Playground path='analysis/switcher/demo/pivot.tsx' rid='result'></playground>
+出于减少内部状态过时的考虑，`Switcher` 组件内部**并不会持久化操作后状态**。也就是说在每次弹窗关闭后，`Switcher` 内部状态会清空，再次打开时还是以组件 `props` 中的各个维度配置为准。
 
-❗️注意：出于减少内部状态过时的考虑，`Switcher` 组件内部并**不会持久化操作后状态**。也就是说在每次弹窗关闭后，Switcher 内部状态会清空，再次打开时任然以 `Props` 中的各个维度配置为准。
+:::
 
 ### 定制化
 
@@ -149,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/custom-g2-chart.en.md b/s2-site/docs/manual/advanced/chart-in-cell.en.md
similarity index 62%
rename from s2-site/docs/manual/advanced/custom/custom-g2-chart.en.md
rename to s2-site/docs/manual/advanced/chart-in-cell.en.md
index 3e68e49e0a..1c63ada296 100644
--- a/s2-site/docs/manual/advanced/custom/custom-g2-chart.en.md
+++ b/s2-site/docs/manual/advanced/chart-in-cell.en.md
@@ -1,4 +1,5 @@
 ---
 title: Render G2 Charts
-order: 8
+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
new file mode 100644
index 0000000000..99c8968db9
--- /dev/null
+++ b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
@@ -0,0 +1,417 @@
+---
+title: 单元格内绘制图表
+order: 11
+tag: New
+---
+
+如果纯文本的表格不够直观，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 图表
+
+S2 内置了几种简单的 `mini` 图形的绘制，无需依赖 `G2` 等专业图表库，适用于简单的展示场景。
+
+<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`, 然后使用 `drawCustomContent` 接管绘制逻辑
+
+```ts
+import { DataCell, drawCustomContent } from '@antv/s2';
+
+class CustomDataCell extends DataCell {
+  drawTextShape() {
+    // 当数值为对象时，完全接管绘制，使用内置的 `drawCustomContent` 根据不同的数据结构 （见下方） 绘制不同的图形
+    if (this.isMultiData()) {
+      drawCustomContent(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`: 子弹图
+
+```json
+{
+  number: {
+    values: {
+      measure: 0.3,
+      target: 0.76,
+    }
+  }
+}
+```
+
+- `多列文本`
+
+```json
+{
+  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
+pnpm add @antv/g2
+```
+
+使用 `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*A9oWSbAfHu4AAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="800"/>
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>
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 3ac215edad..0f63af745e 100644
--- a/s2-site/docs/manual/advanced/custom/cell-size.zh.md
+++ b/s2-site/docs/manual/advanced/custom/cell-size.zh.md
@@ -1,9 +1,10 @@
 ---
 title: 自定义单元格宽高
 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) 配置来实现
 
@@ -30,7 +31,11 @@ const s2Options = {
 
 ## 调整数值单元格宽高
 
-> 优先级小于 `rowCell.height` 和 `colCell.width`
+:::warning{title="注意"}
+
+优先级小于 `rowCell.height` 和 `colCell.width`
+
+:::
 
 ```ts
 const s2Options = {
@@ -39,7 +44,7 @@ const s2Options = {
       width: 100,
       height: 90
     },
-  },
+  }
 }
 ```
 
@@ -49,7 +54,9 @@ const s2Options = {
 
 ## 调整行头单元格宽高
 
+:::warning{title="注意"}
 行头单元格高度调整**作用于叶子节点** （非叶子节点的高度是所有子节点高度度总和）, 且高度始终和 **数值单元格** 高度一致。
+:::
 
 ```ts
 const s2Options = {
@@ -81,17 +88,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)
+- **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
@@ -102,21 +109,21 @@ const s2Options = {
         city: 100
       },
       heightByField: {
-        'root[&] 浙江省 [&] 杭州市': 60,
-        'root[&] 浙江省 [&] 宁波市': 100,
+        'root[&]浙江省[&]杭州市': 60,
+        'root[&]浙江省[&]宁波市': 100,
       },
     },
   },
 }
 ```
 
-<br/>
-
 <img src="https://gw.alipayobjects.com/zos/antfincdn/oaGLPvya5/bf8b9dfe-1873-4567-9c4b-400632cebbe3.png" alt="preview" width="600"/>
 
-<br/>
+:::info{title="提示"}
 
-明细表有一点特殊，由于只有列头，如果想给特定行设置不同的高度，则可以根据行序号调整
+明细表有一点特殊，由于只有列头，如果想给**特定行**设置不同的高度，则可以根据行序号调整 (从 `0` 开始)
+
+:::
 
 ```ts
 const s2Options = {
@@ -124,8 +131,8 @@ const s2Options = {
     rowCell: {
       // 给第一行和第三行设置不同的高度
       heightByField: {
-        '1': 130,
-        '3': 60,
+        '0': 130,
+        '2': 60,
       },
     },
   },
@@ -153,7 +160,9 @@ const s2Options = {
 
 ## 调整列头单元格宽高
 
+:::warning{title="注意"}
 列头单元格宽度调整**作用于叶子节点** （非叶子节点的宽度是所有子节点宽度总和）, 且**宽度**始终和 **数值单元格** 宽度一致
+:::
 
 ```ts
 const s2Options = {
@@ -191,10 +200,14 @@ 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`, 适用于精确到某一类维值的单元格
+- **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'
@@ -205,7 +218,7 @@ const s2Options = {
        widthByField: {
         // 默认 [数值挂列头], EXTRA_FIELD 为内部虚拟数值列
         [EXTRA_FIELD]: 60,
-        'root[&] 家具 [&] 沙发 [&]number': 120,
+        'root[&]家具[&]沙发[&]number': 120,
       },
       heightByField: {
         [EXTRA_FIELD]: 80,
@@ -215,15 +228,11 @@ 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)
+还可以将高度设置为 `0`, 从而实现**隐藏列头**的效果，[查看示例](/examples/layout/custom#hide-columns)
 
 ```ts
 const s2Options = {
@@ -235,8 +244,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-collapse-nodes.zh.md b/s2-site/docs/manual/advanced/custom/custom-collapse-nodes.zh.md
index e663b3e7da..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 支持在树状结构下，配置折叠/展开的节点，默认**展开所有节点**.
@@ -22,7 +23,7 @@ const s2Options = {
       expandDepth: 0,
       // 折叠所有
       collapseAll: true
-    },
+    }
   },
 }
 ```
@@ -51,7 +52,9 @@ const s2Options = {
 const s2Options = {
   style: {
     rowCell: {
-      collapseFields: { 'root[&] 浙江省': true },
+      collapseFields: {
+        'root[& 浙江省': true
+      },
     },
   },
 }
@@ -73,10 +76,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/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/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 52cdfef07b..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,36 +1,37 @@
 ---
-title: 自定义行列头
+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) 两种**行头**单元格布局方式
+`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 +39,7 @@ const customTree: CustomTreeNode[] = [
         ],
       },
       {
-        key: 'a-1-2',
+        field: 'a-1-2',
         title: '自定义节点 a-1-2',
         description: 'a-1-2 描述',
         children: [],
@@ -46,7 +47,7 @@ const customTree: CustomTreeNode[] = [
     ],
   },
   {
-    key: 'a-2',
+    field: 'a-2',
     title: '自定义节点 a-2',
     description: 'a-2 描述',
     children: [],
@@ -69,109 +70,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='layout/custom-header-group/demo/custom-pivot-row-header.ts' rid='custom-pivot-row-header' 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/>
+<img src="https://gw.alipayobjects.com/zos/antfincdn/78uZ2l%24JQ/01a484d7-0edd-4ba0-882f-eed59fc209f1.png" width="1000" alt="preview" />
 
 #### 树状模式
 
 ```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" />
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/iJft9ExZs/da1f768c-7689-44df-be54-708442a74d76.png" width="1000" alt="preview"/>
+### 1.2 自定义列头
 
-<br/>
-
-### 自定义列头
-
-<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='layout/custom-header-group/demo/custom-pivot-col-header.ts' rid='custom-pivot-col-header' 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 +181,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 +200,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. 明细表
 
-### 自定义列头
+### 2.1 自定义列头
 
-<Playground path='custom/custom-tree/demo/custom-table-col-header.ts' rid='container-3' height='400'></playground>
-
-<br/>
+:::info{title="提示"}
 
 `columns` 配置为自定义 `tree` 结构
 
 ```ts
 const s2DataConfig = {
   fields: {
-    columns: customTree,
+    columns: customTree
   },
   data,
 };
 ```
 
-<br/>
+:::
+
+<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 = {
-  ...
   meta: [
     {
       field: 'a-1',
@@ -274,6 +250,6 @@ const s2DataConfig: S2DataConfig = {
 };
 ```
 
-## 更多应用
+## 4. 更多应用
 
-基于自定义行列头，我们可以衍生出更多的使用场景，比如基于 `自定义行头` + `树状模式`, 我们可以自定义出一个 [趋势分析表分析组件](zh/docs/manual/basic/analysis/strategy/).
+基于自定义行列头，我们可以衍生出更多的使用场景，比如基于 `自定义行头` + `树状模式`, 我们可以自定义出一个 [趋势分析表分析组件](/docs/manual/basic/analysis/strategy/).
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/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..de870d4d73 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!
@@ -13,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
 
@@ -31,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/custom/hook.zh.md b/s2-site/docs/manual/advanced/custom/hook.zh.md
index b527c4ce92..f98db28798 100644
--- a/s2-site/docs/manual/advanced/custom/hook.zh.md
+++ b/s2-site/docs/manual/advanced/custom/hook.zh.md
@@ -1,54 +1,87 @@
 ---
 title: 自定义 Hook
 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/master/packages/s2-core/src/cell/data-cell.ts) （明细表对应 [TableDataCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-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/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)（明细表对应 [TableColCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-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
 
-修改角头单元格的默认实现，需要继承自 [TableCornerCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/corner-cell.ts)（明细表对应 [TableCornerCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-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)，`明细表` 需要继承自 [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.vision/zh/docs/api/group)，复写某些方法，比如渲染内容更换等。[例子](/examples/custom/custom-cell#corner-header)
+改变角头的默认实现，需要继承自 [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
+
+自定义数据集，比如数据的展示方式，取数逻辑等。[查看示例](/examples/custom/custom-dataset/#custom-strategy-sheet-dataset)
+
+## 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
deleted file mode 100644
index febb01385a..0000000000
--- a/s2-site/docs/manual/advanced/data-process/pivot.zh.md
+++ /dev/null
@@ -1,202 +0,0 @@
----
-title: 透视表
-order: 1
----
-
-本文会介绍透视表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。
-
-数据处理流程是：`原始数据 -> 生成 indexesData 多维数据 -> 生成层级结构 -> 获取数据` ，接下来我们会逐一讲解，目标是实现下图透视表：
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*J2fuRIJnQdgAAAAAAAAAAAAAARQnAQ" alt="s2-data-process-demo" width="600" />
-
-## 原始数据
-
-初始配置和数据如下：
-
-```tsx
-const dataCfg = {
-    fields: {
-        rows: ['province', 'city'],
-        columns: ['type', 'sub_type'],
-        values: ['price']
-    },
-    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": "沙发"
-    }]
-};
-const options = {
-    width: 600,
-    height: 600
-};
-
-<SheetComponent
-  dataCfg={dataCfg}
-  options={options}
-  sheetType="pivot"
-/>
-```
-
-## 生成 indexesData 多维数据
-
-首先，处理数据，提取当前明细数据在初始配置条件下的行、列维度结果。
-
-```ts
-// 以第四条数据为例
-// { "price": 4,"province": "浙江省","city": "绍兴市","type": "家具","sub_type": "沙发" }
-const rowDimensionValues = transformDimensionsValues(currentData, ['province', 'city']); // 结果是 ['浙江省', '绍兴市']
-const colDimensionValues = transformDimensionsValues(currentData, ['type', 'sub_type']); // 结果是 ['家具', '沙发']
-```
-
-然后，根据数据的行列维度结果和初始配置条件，我们可以获取到当前明细数据的路径（即在行树结构和列树结构的坐标索引）
-
-```ts
-// 以第四条数据为例
-const prefix = 'province[&]city[&]type[&]sub_type';
-// 第 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，结果是：
-
-```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": "沙发"
-      }
-     ]
-    ]
-   ]
-  ]
- ]
-}
-```
-
-## 生成层级结构
-
-接下来是按照数据结构，分别生成行列的树状结构。我们知道，存储明细数据的 Meta 结构一般有三种：扁平数组、图、树，对于表场景查询频率非常高，透视表本身的展现形式也表达了一种树形结构，因此我们选择了构建树形结构来实现 Meta。
-
-下面，我们以行树结构为例，生成的 Map 结构是：<br/>![rowPivotMeta](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BScNTbO2TrIAAAAAAAAAAAAADmJ7AQ/original)
-
-## 获取数据
-
-### 获取单个数据
-
-当渲染透视表数据单元格时，需要获取对应的展示内容（数据）。举个例子，需要右下角单元格数据时，代码如下：
-
-```ts
-const data = getCellData({
-    query: { province: '浙江省', city: '绍兴市', type: '家具', sub_type: '沙发', $$extra$$: 'price' }
-});
-```
-
-实现过程是，先拿到行、列维度枚举值：
-
-```ts
-const rowDimensionValues = transformDimensionsValues(query, ['province', 'city']); // ['浙江省', '绍兴市']
-const colDimensionValues = transformDimensionsValues(query, ['type', 'sub_type', '$$extra$$']); // ['家具', '沙发', 'price']
-```
-
-然后通过枚举值获取数据查询路径，并从前面生成的多维数组中拿到具体数据。
-
-```ts
-const path = getDataPath({ rowDimensionValues, colDimensionValues });
-const rowData = lodash.get(indexesData, path);
-```
-
-在拿到数据后，我们需要为原始数据增加 `$$extra$$` 等信息，用于标识所选择的具体是哪个维度，因此，内部使用了 Proxy 对 rowData 进行包裹，对其行为进行增强。
-
-```ts
-const data=new Proxy(rowData,handler);
-
-console.log({...data}); //{ "price": 4,"province": "浙江省","city": "绍兴市","type": "家具","sub_type": "沙发", "$$extra$$": "price", "$$value$$": 4 }
-```
-
-### 获取多个数据
-
-如果想获取多个单元格数据，其大致流程和获取单个数据一致；获取多个单元格数据允许有维度缺失，会返回多个符合 query 的数据。
-
-比如获取*浙江省*下的所有信息示例代码如下：
-
-```ts
-const dataList = getMultiData({
-    query: { province: '浙江省', $$extra$$: 'price' }
-});
-```
-
-总结下，获取数据是通过查询条件，构造当前查询条件对应的数据路径，然后从多维数组中直接拿取。
diff --git a/s2-site/docs/manual/advanced/data-process/table.zh.md b/s2-site/docs/manual/advanced/data-process/table.zh.md
deleted file mode 100644
index 6989bb451a..0000000000
--- a/s2-site/docs/manual/advanced/data-process/table.zh.md
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: 明细表
-order: 2
----
-
-本文会介绍明细表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。明细表的数据处理流程相对透视表更简单，主要是针对筛选和排序，对数据做了预处理。
-
-## 原始数据
-
-初始配置和数据如下：
-
-```tsx
-const dataCfg = {
-    fields: {
-        columns: ['city', 'type', 'sub_type', 'price'],
-    },
-    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": "沙发"
-    }]
-};
-const options = {
-    width: 800,
-    height: 600
-};
-
-<SheetComponent
-  dataCfg={dataCfg}
-  options={options}
-  sheetType="table"
-/>
-```
-
-## 排序、筛选并生成展示数据
-
-如果用户配置了筛选和排序，S2 会对原始数据进行处理，从而生成经过筛选、排序后的展示数据。
-
-比如用户配置了筛选：
-
-```tsx
-// dataCfg
-{
-    filterParams: [
-        {
-            filterKey: 'city',
-            filteredValues: ['杭州市'],
-            customFilter: (row) => row['city'] === '杭州市' || row['city'] === '宁波市',
-        }
-    ]
-}
-```
-
-这次 S2 会对 `city` 字段做筛选，只保留值为杭州市的记录：
-
-```tsx
-[
-    {
-        "price": 1,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "桌子"
-    }, 
-    {
-        "price": 3,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "沙发"
-    },
-]
-```
-
-如果用户配置了排序：
-
-```tsx
-// dataCfg
-{
-    sortParams: [
-        {
-            sortFieldId: 'price', 
-            sortMethod: 'DESC' 
-        }
-    ]
-}
-```
-
-S2 会对 `price` 字段做降序排序，数据最终变成了这样：
-
-```tsx
-[
-    {
-        "price": 3,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "沙发"
-    },
-    {
-        "price": 1,
-        "province": "浙江省",
-        "city": "杭州市",
-        "type": "家具",
-        "sub_type": "桌子"
-    }, 
-]
-```
-
-## 获取数据
-
-上述的数据，会被保存到 `TableDataSet` 中名为 `displayData` 的字段中。用户原来传入的原始数据并不会被修改。
-
-我们可以通过 `s2Instance.dataSet.displayData` 获取。
-
-同时可以可以通过 `s2Instance.dataSet.getCellData({ rowIndex: number; col: number; })` API 来获取某个行列格子的数据。同样的，这里获取的是经过筛选和排序之后的展示数据。
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..f9e2c82c4e
--- /dev/null
+++ b/s2-site/docs/manual/advanced/g-plugins.en.md
@@ -0,0 +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
new file mode 100644
index 0000000000..fa2fd285b4
--- /dev/null
+++ b/s2-site/docs/manual/advanced/g-plugins.zh.md
@@ -0,0 +1,55 @@
+---
+title: 注册 AntV/G 插件
+order: 10
+tag: New
+---
+
+:::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/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 f77a923696..232ae6c1d7 100644
--- a/s2-site/docs/manual/advanced/get-cell-data.zh.md
+++ b/s2-site/docs/manual/advanced/get-cell-data.zh.md
@@ -1,26 +1,31 @@
 ---
 title: 获取单元格数据
 order: 9
+tag: Updated
 ---
 
 :::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), 下面介绍一些常用的场景：
 
-### 获取指定区域单元格
+<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)。[查看更多](/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 +34,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.facet.cornerHeader.getNodes()
+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
+cell.getMeta()
 ```
 
 ### 监听点击事件获取对应单元格
@@ -92,10 +178,72 @@ 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-single-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-cell-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,
+});
 ```
 
 ### 获取行/列数据
@@ -192,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: {
@@ -207,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/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.en.md b/s2-site/docs/manual/advanced/hd-adapter.en.md
index 4b0019164e..063072e89d 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(
@@ -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/hd-adapter.zh.md b/s2-site/docs/manual/advanced/hd-adapter.zh.md
index b511244c69..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(
@@ -96,11 +99,11 @@ 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)
 
 ## 自定义设备像素比
 
-表格默认使用设备当前像素比渲染，也就是 `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 b23f25b4f8..196e5bf551 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
 ---
 
 ## 交互种类
@@ -164,6 +165,8 @@ const s2Options = {
 };
 ```
 
+[查看示例](/examples/interaction/basic/#data-cell-click-selection)
+
 ### 行列联动高亮
 
 在鼠标悬停时，高亮当前单元格和对应的行列头单元格，形成一个"十字高亮"的效果，更直观的查看数据，默认开启，可配置 `hoverHighlight` 关闭：
@@ -185,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 }
@@ -206,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;
@@ -251,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" />
@@ -265,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" />
@@ -279,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>
+### 角头选中
 
 单击行头所对应的角头，可以快捷选中当前列
 
@@ -314,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 = {
@@ -328,11 +343,13 @@ 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" />
 
-同时支持透视表，和明细表，点击叶子节点的列头后，显示隐藏列头按钮，点击隐藏后，会在紧邻的兄弟单元格显示一个展示按钮，和一个隐藏提示线，鼠标单击即可展开，可配置 `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 = {
@@ -355,80 +372,33 @@ const s2Options = {
 };
 ```
 
-### 行列宽高调整
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/F6l3SoxBCx/resize.gif" alt="preview" width="600" />
-
-S2 默认提供 `列等宽布局` `行列等宽布局`和 `紧凑布局` 三种布局方式 ([预览](/examples/layout/basic#compact)), 也可以拖拽行/列头进行动态调整
+[查看示例](/examples/interaction/advanced/#pivot-hide-columns)
 
-可配置 `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 热区
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WdvmQ5pd4BwAAAAAAAAAAAAADmJ7AQ/original" alt="preview" width="600" />
 
-```ts
-const s2Options = {
-  interaction: {
-    resize: {
-      enable: (cell) => {
-        const meta = cell.getMeta();
-        return meta.colIndex < 3
-      }
-    }
-  },
-};
-```
+查看 [文档](/docs/manual/advanced/interaction/resize) 和 [示例](/examples/interaction/advanced#merge-cell)
 
 ### 合并单元格
 
 <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)
 
 ### 重置交互
 
@@ -448,7 +418,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 = {
@@ -458,19 +428,43 @@ 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 事件等。
+
+```ts
+import { InterceptType } from '@antv/s2'
+
+// 添加拦截
+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)
+`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()
 ```
 
+[查看示例](/examples/interaction/basic/#event)
+
+## 扩展阅读
+
 对背后的交互实现原理感兴趣？欢迎阅读文章 [《你不知道的 Canvas 表格交互》](https://www.yuque.com/antv/vo4vyz/bvzbaz)
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..45dcb24675
--- /dev/null
+++ b/s2-site/docs/manual/advanced/interaction/copy.en.md
@@ -0,0 +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
new file mode 100644
index 0000000000..08240fc3c4
--- /dev/null
+++ b/s2-site/docs/manual/advanced/interaction/copy.zh.md
@@ -0,0 +1,7 @@
+---
+title: 复制与导出
+order: 7
+tag: New
+---
+
+<embed src="@/docs/common/copy-export.zh.md"></embed>
diff --git a/s2-site/docs/manual/advanced/interaction/custom.en.md b/s2-site/docs/manual/advanced/interaction/custom.en.md
index c4ffd34072..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
 
@@ -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 6e6bfed0f2..2d9a7339a8 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. 自定义交互类
 
@@ -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>
+<Playground path="interaction/custom/demo/double-click-hide-columns.ts" rid="container"></playground>
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/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.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 6085f010c8..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,
   },
@@ -335,7 +337,7 @@ s2.on(S2Event.MERGED_CELLS_CLICK, (event) => {
   });
 });
 
-s2.render();
+await s2.render();
 ```
 
 ## demo 演示
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..88d4640c51
--- /dev/null
+++ b/s2-site/docs/manual/advanced/interaction/resize.zh.md
@@ -0,0 +1,216 @@
+---
+title: 行列宽高调整
+order: 3
+tag: Updated
+---
+
+<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` 来便捷的控制区域热区控制。
+
+<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 = {
+  interaction: {
+    resize: {
+      visible: (cell) => {
+        const meta = cell.getMeta();
+        return meta.isLeaf
+      }
+    }
+  },
+};
+```
+
+2. 例：只有某一个单元格显示 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;
+    }
+  },
+};
+```
+
+### 拖拽影响范围
+
+默认宽高调整只作用于当前单元格，可以通过 `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>
+
+### 最小可拖拽宽高
+
+```ts
+const s2Options = {
+  interaction: {
+    resize: {
+      // 单元格可拖拽最小宽度
+      minCellWidth: 20,
+
+      // 单元格可拖拽最小高度
+      minCellHeight: 20
+    }
+  },
+};
+```
+
+### 主题配置
+
+支持通过调整主题修改热区大小/颜色，参考线颜色/间隔等配置，具体请查看 [主题配置](/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/advanced/interaction/scroll.zh.md b/s2-site/docs/manual/advanced/interaction/scroll.zh.md
index 7719544a92..898797830a 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,9 +11,9 @@ 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)
+可配置 `scrollSpeedRatio` 控制滚动速率，分为 `水平` 和 `垂直` 两个方向，范围为 `0-1`, 默认为 `1`。 [查看示例](/examples/interaction/advanced#scroll-speed-ratio)
 
 ```ts
 const s2Options = {
@@ -26,21 +26,21 @@ const s2Options = {
 };
 ```
 
-#### 鼠标滚轮水平滚动
+## 鼠标滚轮水平滚动
 
 滑动滚轮垂直滚动，如果同时按住 `Shift` 即可水平滚动
 
-#### 修改滚动至边界行为
+## 修改滚动至边界行为
 
 对于自身和父容器都存在滚动条时，浏览器默认的滚动行为是：非边界不触发父容器滚动，到达边界后，触发父容器滚动，同时还可以配置 [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 = {
   interaction: {
     overscrollBehavior: 'auto' // 'auto' | 'none' | 'contain';
-    overscrollBehavior: null  // 设为 null 则不做任何处理
+    // overscrollBehavior: null  // 设为 null 则不做任何处理
   },
 };
 ```
@@ -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" />
 
@@ -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/advanced/layout/pivot.zh.md b/s2-site/docs/manual/advanced/layout/pivot.zh.md
deleted file mode 100644
index ae68aa1d34..0000000000
--- a/s2-site/docs/manual/advanced/layout/pivot.zh.md
+++ /dev/null
@@ -1,206 +0,0 @@
----
-title: 透视表
-order: 1
----
-
-本文会介绍透视表的布局过程，让读者更直接了解 `S2` 内部布局逻辑。
-
-在解析布局过程中，以下图透视表为例：
-
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*J2fuRIJnQdgAAAAAAAAAAAAAARQnAQ" alt="s2-data-process-demo" width="600" />
-
-## 基础概念
-
-### Node
-
-透视表节点类，用于行头、列头、角头单元格渲染。
-
-```ts
-class Node {
-    x, y, width, height, label, level, ...
-}
-```
-
-### Hierarchy
-
-透视表层级结构，管理行头、列头的所有节点。
-
-```ts
-class Hierarchy {
-    width, height, sampleNodesForAllLevels, allNodesWithoutRoot, indexNode,
-    getLeaves: () => {},
-    getNodes: () => {},
-    getIndexNodes: () => {},
-    pushNode: () => {}
-}
-```
-
-## 层级结构
-
-生成行列层级结构的过程，也是遍历行列配置的过程，下面以行头层级结构为例。
-
-```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,
-            });
-        }
-    }
-}
-```
-
-当第一层结构执行完后， `rowHierarchy` 的结构如下：
-
-```ts
-rowHierarchy: {
-    height: 0,
-    width: 0,
-    maxLevel: 1,
-    allNodesWithoutRoot: [(Node){ label: '浙江省', key: 'province', ...}],
-    sampleNodesForAllLevels: [(Node){ label: '浙江省', key: 'province', ...}],
-}
-```
-
-然后递归调用浙江省的子层级，`rowHierarchy` 的结构如下：
-
-```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', ...}]
-}
-```
-
-同理，列头也是类似的过程，生成 `colsHierarchy`。
-
-## 层级坐标
-
-上面确定了行、列的层级结构，但是注意 `rowHierarchy` 的 `width` 和 `height` 都是 0。接下来我们会确定层级中各个节点的坐标值，也就是确定他们在画布中的位置。
-
-为了简化坐标计算过程，我们不考虑树形、用户拖拽宽度，考虑最简单的场景。
-
-首先，计算单元格的宽度：
-
-```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); // 用户配置的宽度和计算宽度取最大值
-}
-```
-
-然后，计算 `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; // 当前节点的宽度
-}
-
-```
-
-同理，我们也可以计算出 `colsHierarchy` 的尺寸和各个子节点的尺寸和坐标。
-
-## 按需渲染
-
-上面，我们已经生成层级结构和各个子节点的坐标。接下来，我们开始渲染节点。
-
-首先渲染行头、列头、角头：
-
-```ts
-this.rowHeader = new RowHeader({
-    width,
-    height,
-    data: rowNodes // rowNodes 中的节点有坐标和尺寸信息，调用 g2 的 <Group>RowHeader.add(<Group>RowCell)
-});
-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]);
-```
-
-其次渲染单元格：
-
-```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; // 更新本次坐标集合为上次渲染的集合
-}
-
-```
-
-最后渲染滚动条、背景等，不做过多解释。
-
-以上就是 `S2` 的布局过程，包含了层级结构 `rowsHierarchy` 和 `colsHierarchy` 的生成过程，各个节点坐标计算过程，以及按需渲染过程。
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 68b53b19a3..0000000000
--- a/s2-site/docs/manual/basic/analysis/copy-export.zh.md
+++ /dev/null
@@ -1,144 +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">
-
-#### 局部复制
-
-通过 [内置交互](/manual/advanced/interaction/basic) （单选/多选/圈选）, 使用快捷键 `Command/Ctrl + C` 即可复制选中区域（局部复制）
-
-```ts
-const s2Options = {
-  interaction: {
-    // 是否开启复制
-    enableCopy: true,
-    // 复制格式化后的数据 (s2DataConfig.meta 中配置的 formatter)
-    copyWithFormat: false,
-    // 复制数值时是否携带所对应的行列头维值
-    copyWithHeader: 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"/>
-
-<br/>
-
-##### 复制粘贴到富文本编辑器中 （带 `HTML` 格式）
-
-<img alt="HTMLCopy" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*DuHCSbpv_XkAAAAAAAAAAAAAARQnAQ" width="600"/>
-
-<br/>
-
-##### 复制行头单元格
-
-<img alt="CopyCol" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*_NukQpysLC8AAAAAAAAAAAAAARQnAQ" width="600"/>
-
-<br/>
-
-##### 复制列头单元格
-
-<img alt="CopyRow" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ncuAQaL4AvAAAAAAAAAAAAAAARQnAQ" width="600"/>
-
-<br/>
-
-##### 带表头复制
-
-**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" />
-
-<br/>
-
-##### 复制格式化后的数据
-
-**copyWithFormat**: 当 `S2DataConfig` 的 `meta` 中配置了 [自定义格式函数时](/api/general/s2-data-config#meta), 是否按照 `formatter` 复制数据
-
-```ts
-const s2DataConfig = {
-  fields: { ... }
-  meta: [
-    {
-      field: 'city',
-      name: '城市',
-      formatter: (value) => `${value}-xx`
-    }
-  ]
-}
-
-const s2Options = {
-  interaction: {
-    enableCopy: true,
-    copyWithFormat: true,
-  }
-};
-```
-
-### 导出
-
-`@antv/s2-react` 组件层提供了开箱即用的导出功能
-
-:::info{title='使用 `@antv/s2` 如何导出？'}
-`@antv/s2` 内置了一系列工具函数，[见下方文档](#原始导出方法)
-:::
-
-```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/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/base-concept.zh.md b/s2-site/docs/manual/basic/base-concept.zh.md
index 4f245f4594..e7e0d95f4f 100644
--- a/s2-site/docs/manual/basic/base-concept.zh.md
+++ b/s2-site/docs/manual/basic/base-concept.zh.md
@@ -1,7 +1,9 @@
 ---
 title: 基本概念
 order: 0
+tag: Updated
 ---
+
 本文介绍透视表的基本概念。
 
 ## 简介
@@ -10,18 +12,23 @@ order: 0
 
 ### 基本概念
 
-- 度量（指标）：数值本身，比如价格、数量等。
-- 维度：可以理解为分析数据的角度，比如省份、类型等。
+- **度量（指标**）：数值本身，比如 `价格`、`数量` 等。
+- **维度**：可以理解为分析数据的角度，比如 `省份`、`类型` 等。
+- **维值**：维度所对应具体的值，比如 `成都`、`杭州` 等。
 
 ### 构成
 
-透视表由五部分组成，分别是行头、列头、角头、数据单元格、框架 如下图所示：
+透视表由五部分组成，分别是 `行头`、`列头`、`角头`、`数据`、`框架`。
+
+如下图所示：
 
 <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` 两个字段
 
@@ -33,7 +40,7 @@ const s2DataConfig = {
 }
 ```
 
-在平铺模式下展示为：
+### 平铺模式
 
 ```ts
 const s2Options = {
@@ -41,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 = {
@@ -52,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` 两个字段，展示为：
 
@@ -71,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)
 
 数据单元格是表格行列维度值交叉后产生的数据区域，通常情况下应该是度量值，是表数据分析最核心的数据呈现区域。
 
@@ -92,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/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 9a7c82e97b..ddac813721 100644
--- a/s2-site/docs/manual/basic/conditions.zh.md
+++ b/s2-site/docs/manual/basic/conditions.zh.md
@@ -1,19 +1,22 @@
 ---
 title: 字段标记
 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) 属性。
@@ -44,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
@@ -84,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) 文档。
 
@@ -116,11 +119,22 @@ 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>
+
+> 自定义 Icon 详情，可查看 [自定义 Icon](/docs/manual/advanced/custom/custom-icon) 章节
+
 ### 自定义柱状图范围
 
 通过显示指定 `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>
@@ -135,7 +149,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>
@@ -150,4 +164,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/docs/manual/basic/formatter.en.md b/s2-site/docs/manual/basic/formatter.en.md
new file mode 100644
index 0000000000..abe9d9d96a
--- /dev/null
+++ b/s2-site/docs/manual/basic/formatter.en.md
@@ -0,0 +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
new file mode 100644
index 0000000000..5be94a73e9
--- /dev/null
+++ b/s2-site/docs/manual/basic/formatter.zh.md
@@ -0,0 +1,98 @@
+---
+title: 数据格式化
+order: 9
+tag: New
+---
+
+`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} %`
+      },
+    },
+  ]
+};
+```
+
+## 复制导出时保留格式化信息
+
+复制导出默认使用原数据进行处理，开启 `withFormat` 后，则以 `meta` 中的 `name` 和 `formatter` 进行复制导出。
+
+```ts
+const s2Options = {
+  interaction: {
+    withFormat: true
+  }
+}
+```
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 23ead6051b..5a05e17b57 100644
--- a/s2-site/docs/manual/basic/i18n.zh.md
+++ b/s2-site/docs/manual/basic/i18n.zh.md
@@ -1,9 +1,9 @@
 ---
 title: 国际化
-order: 8
+order: 10
 ---
 
-`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)
 
 ## 切换为英文
 
@@ -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/multi-line-text.en.md b/s2-site/docs/manual/basic/multi-line-text.en.md
new file mode 100644
index 0000000000..d51987f0f9
--- /dev/null
+++ b/s2-site/docs/manual/basic/multi-line-text.en.md
@@ -0,0 +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
new file mode 100644
index 0000000000..a89461dde0
--- /dev/null
+++ b/s2-site/docs/manual/basic/multi-line-text.zh.md
@@ -0,0 +1,74 @@
+---
+title: 多行文本
+order: 10
+tag: New
+---
+
+:::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` 现在只需要简单的配置即可支持多行文本的渲染，支持自动换行。
+
+<Playground path="layout/custom/demo/multi-line-text.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="提示"}
+
+具体参数请跳转 `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.
+- `textOverflow`:
+  - 'clip' 直接截断文本
+  - 'ellipsis' 使用 ... 表示被截断的文本
+  - 自定义字符串，使用它表示被截断的文本
+:::
+
+在 S2 中，通过 [Style](/api/general/s2-options#style) 即可实现渲染多行文本，当文本自动换行后，如果小于单元格高度，则会自动调整。
+
+:::warning{title="注意"}
+数值单元格 (dataCell) 不建议换行，容易产生歧义。
+:::
+
+```ts
+const cellTextWordWrapStyle = {
+  // 最大行数，文本超出后将被截断
+  maxLines: 2,
+  // 文本是否换行
+  wordWrap: true,
+  // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
+  textOverflow: 'ellipsis',
+};
+
+const s2Options = {
+  style: {
+    seriesNumberCell: cellTextWordWrapStyle,
+    colCell: cellTextWordWrapStyle,
+    cornerCell: cellTextWordWrapStyle,
+    rowCell: cellTextWordWrapStyle,
+    // 数值不建议换行，容易产生歧义
+    // dataCell: cellTheme,
+  },
+};
+
+```
+
+## 效果
+
+<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/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 581bb302c6..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
@@ -1,12 +1,14 @@
 ---
 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" />
 
 ## 使用
 
@@ -14,15 +16,10 @@ order: 1
 <div id="container" />
 ```
 
-### React 组件方式
-
-```typescript
-import React from "react";
-import ReactDOM from "react-dom";
-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,41 +61,110 @@ const s2DataConfig = {
   data,
 };
 
-// 3. 添加配置
+// 添加配置
 const s2Options = {
   width: 600,
   height: 600,
 };
 
-// 4. 渲染
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container')
-);
+// 渲染
+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`
+
+```tsx
+import React from "react";
+import { PivotSheet } 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 PivotSheet(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,
+};
 
-const container = document.getElementById('container');
-const s2 = new PivotSheet(container, dataCfg, options);
-s2.render();
+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)。
 
 ## 特性
 
+### 序号
+
+在 `s2Options` 中传入 `seriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看示例](/examples/basic/pivot#grid)
+
+```ts
+const s2Options = {
+  seriesNumber: {
+    enable: true,
+    text: '自定义序号标题' // 默认 "序号"
+  }
+}
+```
+
 ### 展示形态
 
 默认支持 [平铺模式](/zh/examples/basic/pivot/#grid) 和 [树状模式](/zh/examples/basic/pivot/#tree) 两种展示形态。
@@ -111,19 +177,31 @@ s2.render();
 
 当行头固定时，行头会有一个独立的可滚动区域，如果关闭冻结行头，则滚动区域为整个表格。
 
-<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`, 支持自定义：
 
-### 冻结首行 <Badge type="success">@antv/s2@^1.53.0 新增</Badge>
+```ts
+const s2Options = {
+  frozen: {
+    rowHeader: 0.2, // 默认 0.5 （可选范围 0 - 1)
+  }
+}
+```
+
+### 冻结首行
 
 :::info{title="注意"}
 
@@ -132,7 +210,7 @@ const s2Options = {
 - 首行不存在子节点（适用于总计置于顶部，只有单个维值，树状模式等场景）。
 - 分页场景暂不支持。
 
-`s2Options` 中配置 `frozenFirstRow` 开启首行冻结能力
+`s2Options` 中配置 `frozen.firstRow` 开启首行冻结能力
 
 :::
 
@@ -140,8 +218,10 @@ const s2Options = {
 
 ```ts
 const s2Options = {
-  frozenFirstRow: true,
   hierarchyType: 'grid',
+  frozen: {
+    firstRow: true,
+  },
   // 需要开启行总计 & 总计行置于顶部
   totals: {
     row: {
@@ -152,7 +232,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/>
 
@@ -160,11 +240,17 @@ 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/>
+
+### 行列头自定义分组
+
+行列头结构默认根据传入的维值进行分组，同时支持自定义分组。[了解更多](/manual/advanced/custom/custom-header)
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 edc1f015fb..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
@@ -1,31 +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 组件方式
-
-```typescript
-import React from "react";
-import ReactDOM from "react-dom";
-import { SheetComponent } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
+```ts
+import { TableSheet } from "@antv/s2";
 
-// 1. 准备数据
+// 准备数据
 const data = [
   {
     province: "浙江",
@@ -41,7 +37,7 @@ const data = [
   },
 ];
 
-// 2. 配置数据
+// 配置数据
 const s2DataConfig = {
   fields: {
     columns: ["province", "city", "type", "price"], // 要展示的列头字段 id 列表
@@ -68,52 +64,108 @@ 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,
 };
 
-// 4, 渲染
-ReactDOM.render(
-  <SheetComponent
-    sheetType="table"
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container')
-);
+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} />
+}
 ```
 
-### TableSheet 类方式
+### 使用 `@antv/s2-react` <Badge type="success">推荐</Badge>
 
-如果不打算依赖 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";
+const s2Options = {
+  width: 400,
+  height: 200,
+};
 
-const container = document.getElementById('container');
-const s2 = new TableSheet(container, dataCfg, options);
-s2.render();
+const App = () => {
+  return (
+    <SheetComponent
+      sheetType="table"
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
+[查看示例](/examples/react-component/sheet/#table) 和 [API 文档](/api/components/sheet-component)
+
 ## 特性
 
 ### 序号
 
-在 `s2Options` 中传入 `showSeriesNumber` 即可展示内置的序号。[查看 demo](/examples/basic/table#table)
+在 `s2Options` 中传入 `seriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看示例](/examples/basic/table#table)
 
 ```ts
 const s2Options = {
-  showSeriesNumber: true
+  seriesNumber: {
+    enable: true,
+    text: '序号'
+  }
 }
 ```
 
 ### 行列冻结
 
-行列冻结让特定行列在滚动时保持固定，从而一直保持在视口范围内，提供信息的对照和参考。[查看 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/>
 
@@ -130,6 +182,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/sort/basic.en.md b/s2-site/docs/manual/basic/sort/basic.en.md
index f1b0d21604..30eae284a0 100644
--- a/s2-site/docs/manual/basic/sort/basic.en.md
+++ b/s2-site/docs/manual/basic/sort/basic.en.md
@@ -1,26 +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 ed0ca2de39..d05dad82af 100644
--- a/s2-site/docs/manual/basic/sort/basic.zh.md
+++ b/s2-site/docs/manual/basic/sort/basic.zh.md
@@ -1,26 +1,242 @@
 ---
-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' },
+    },
+  ],
+  ...
+}
+```
+
+## 方式
+
+### 1. 升/降序方法（sortMethod）
+
+支持对 `行头/列头` 进行排序，类型包括数字、类数字、普通字符串，非数字兜底使用 **localeCompare** 进行比较，举例如下：
+
+```ts
+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" />
+
+### 2. 维度值列表（sortBy）
+
+支持对 `行头/列头` 按照指定的维值列表排序，如果行列有多级，则各子级内部进行组内排序（如下 `city` ），举例如下：
+
+```ts
+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" />
+
+### 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" />
 
-使用 `s2-react` 的组件 `SheetComponent` 默认在数值头显示 `icon` ，点击后选择，有 `升序、降序、不排序` 三种方式，可在 `options` 中配置显示，如下：
+### 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 s2Options = {
-  width: 600,
-  height: 600,
-  showDefaultHeaderActionIcon: true, // 默认为打开，可设置为 false 关闭
+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 3b5156ce3e..0000000000
--- a/s2-site/docs/manual/basic/sort/custom.en.md
+++ /dev/null
@@ -1,311 +0,0 @@
----
-title: Custom Sort
-order: 2
----
-
-## 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 2744340eb7..0000000000
--- a/s2-site/docs/manual/basic/sort/custom.zh.md
+++ /dev/null
@@ -1,313 +0,0 @@
----
-title: 自定义排序
-order: 2
----
-
-## 简介
-
-对表格数据行进行自定义排序，支持行头/列头排序、单行/列排序、自定义列表、函数等功能。[查看示例](/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..8b4bbf95ce
--- /dev/null
+++ b/s2-site/docs/manual/basic/sort/group.en.md
@@ -0,0 +1,27 @@
+---
+title: Group Sort
+order: 1
+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..986486c154
--- /dev/null
+++ b/s2-site/docs/manual/basic/sort/group.zh.md
@@ -0,0 +1,53 @@
+---
+title: 组内排序
+order: 1
+tag: Updated
+---
+
+## 简介
+
+`组内排序` 代表只影响一个分组内部的排序，例如下图中 `笔-价格` 选择 `组内升序` 时，`省份` 的排序方式不会更改，只会更改每个 `省份` 内部 `城市` 的顺序。
+
+:::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`
+
+`@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,
+  // 打开操作 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/docs/manual/basic/theme.en.md b/s2-site/docs/manual/basic/theme.en.md
index d2846ec938..125feb2b3d 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
@@ -148,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/theme.zh.md b/s2-site/docs/manual/basic/theme.zh.md
index 16788f5ef6..c5c690f300 100644
--- a/s2-site/docs/manual/basic/theme.zh.md
+++ b/s2-site/docs/manual/basic/theme.zh.md
@@ -1,21 +1,27 @@
 ---
 title: 主题配置
 order: 6
+tag: Updated
 ---
 
 ## 简介
 
-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** 不同主题色，生成标准色板的例子：
+以下是使用 **#0A78F4**、**#FF5500** 不同主题色，生成标准色板的示例：
 
 <image alt="#0A78F4 standard palette" src="https://gw.alipayobjects.com/zos/antfincdn/8BOmvrgF6/65409159-09d0-4780-a431-3bb3e61cf429.png" width="600" />
 
@@ -25,8 +31,8 @@ S2 中内置了 **3** 套开箱即用的主题配置，也提供了强大的主
 
 色板的定义为 [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 保证了，所有绘制时使用的颜色均来自于主题色或主题色的派生颜色。这样使表格界面颜色统一，也便于用户根据自己需要的主题色，生成个性化主题。
 
@@ -34,28 +40,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',
   },
 });
-s2.render(false);
+
+await s2.render(false);
 ```
 
 ## 自定义主题
 
-s2 实例上的 `setThemeCfg` 方法是一切主题配置的入口，该方法接收一个类型为 [ThemeCfg](/docs/api/general/S2Theme#themecfg) 的参数，你可以：
+s2 实例上的 `setThemeCfg` 方法是一切主题配置的入口，该方法接收一个类型为 [ThemeCfg](/api/general/S2Theme) 的参数，你可以：
 
-- 通过 ThemeCfg.name 使用预置主题
-- 通过 ThemeCfg.palette 自定义色板生成主题
-- 通过 ThemeCfg.theme 自定义 schema 生成主题（可与上两个属性同时使用，即覆盖由它们生成的主题）
+- 通过 [ThemeCfg.name](/api/general/s2-theme) 使用预置主题
+- 通过 [ThemeCfg.palette](/api/general/s2-theme#palette) 自定义色板生成主题
+- 通过 [ThemeCfg.theme](/api/general/s2-theme#s2theme) 自定义 schema 生成主题（可与上两个属性同时使用，即覆盖由它们生成的主题）
 
 ### 选择预置主题
 
@@ -64,12 +80,12 @@ s2 实例上的 `setThemeCfg` 方法是一切主题配置的入口，该方法
 ```js
 const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-// name 可为 default, colorful, gray
+// name 可为 default, colorful, gray, dark
 s2.setThemeCfg({ name: 'colorful' });
-s2.render(false);
+await s2.render(false);
 ```
 
-S2 内置 3 套主题效果：
+S2 内置 `4` 套主题效果：
 
 <table style="width: 100%; outline: none; border-collapse: collapse;">
   <colgroup>
@@ -79,26 +95,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 +134,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);
@@ -121,9 +145,8 @@ const customTheme = {
   },
 };
 
-// s2.setThemeCfg({ theme: customTheme })
-s2.setTheme(customTheme)
-s2.render(false);
+s2.setTheme(customTheme) // 等价与：s2.setThemeCfg({ theme: customTheme })
+await s2.render(false);
 ```
 
 <Playground path="theme/custom/demo/custom-schema.ts" rid='custom-schema'></playground>
@@ -132,7 +155,7 @@ s2.render(false);
 
 #### 自定义单元格对齐方式
 
-[查看详情](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({
@@ -189,7 +212,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)，所见即所得帮助你快速调配色板，一键复制粘贴进项目使用。
 
@@ -219,12 +242,15 @@ 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>
 
+<br/>
+
 #### 按主题色自动生成
 
 [自选色板颜色](#自选色板颜色) 的调配自由度大，但每个颜色都需要单独确定，整体过程较为复杂。为满足用户的一般主题诉求，S2 还提供了根据主题色生成色板的功能。
@@ -246,7 +272,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/basic/tooltip.en.md b/s2-site/docs/manual/basic/tooltip.en.md
index 53ab3942c4..f5ea31fa16 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
@@ -16,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
@@ -389,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/basic/tooltip.zh.md b/s2-site/docs/manual/basic/tooltip.zh.md
index 5c0e751db7..0d7c47c9d3 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
 ---
 
 ## 简介
@@ -11,17 +12,19 @@ order: 7
 
 ## 注意事项
 
-`@antv/s2` 中只保留了 `tooltip` 的核心显隐逻辑，提供相应数据，**不渲染内容**
+:::warning
+`@antv/s2` 中只保留了 `tooltip` 的核心显隐逻辑，提供相应数据，**不渲染内容**.
 
 `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)
+:::
 
-- 如果您有 `tooltip` 的需求，您可以直接使用开箱即用的 `@antv/s2-react` `@antv/s2-vue`, 免去你二次封装，使用更加方便
-- 如果您不希望依赖框架，或者希望在 `Vue`, `Angular` 框架中使用 `tooltip`, 请参考 [自定义 Tooltip 类](#自定义-tooltip-类) 章节
-- 别忘了引入样式
+查看 `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-类) 章节。
+- 别忘了引入样式。
 
 ```ts
 import "@antv/s2/dist/style.min.css";
@@ -29,7 +32,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 +40,7 @@ const s2Options = {
 };
 ```
 
-还可以对不同类型的单元格单独配置：
+**还可以对不同类型的单元格单独配置**：
 
 - `cornerCell`: 角头单元格
 - `rowCell`: 行头单元格
@@ -57,7 +60,7 @@ const s2Options = {
 
 ### 显示配置项
 
-通过配置 `showTooltip` 字段控制 `Tooltip` 的显示，默认为 `false`
+通过配置 `showTooltip` 字段控制 `Tooltip` 的显示，默认为 `false`.
 
 ```ts
 const s2Options = {
@@ -111,7 +114,15 @@ const s2Options = {
 
 #### 自定义 Tooltip 内容
 
-对于 `@antv/s2` 类的使用方式：tooltip 内容 可以是任意 `dom` 节点或者 `字符串`
+##### 在基础类中使用 <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` 节点或者 `字符串 (innerHTML)`.
+
+:::warning
+请注意 XSS 过滤！
+:::
 
 ```ts
 const content = document.createElement('div')
@@ -120,18 +131,35 @@ content.innerHTML = '我是自定义内容'
 const s2Options = {
   tooltip: {
     content,
-    // content: '我是字符串'
+    // content: '<div>我是字符串</div>'
+  },
+};
+```
+
+```ts
+const s2Options = {
+  tooltip: {
+    content: `
+      <div>
+        <div>我是自定义内容</div>
+        <p>我也是是自定义内容</p>
+      </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 +169,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,30 +239,41 @@ 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. 内容显示优先级
 
 `方法调用` > `单元格配置` > `基本配置`
 
-<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 操作项
 
 除了默认提供的操作项，还可以配置 `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'
+}
+```
+
+:::
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2R8ST6bBxAcAAAAAAAAAAAAADmJ7AQ/original" width="600" alt="row" />
+
 ```ts
 const s2Options = {
   tooltip: {
@@ -256,14 +291,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',
@@ -317,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);
+            },
+          }
+        ],
+      }
     },
   }
 })
@@ -413,7 +450,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
@@ -466,7 +503,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';
@@ -499,7 +536,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>;
@@ -531,16 +568,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"
@@ -578,7 +608,7 @@ class CustomTooltip extends BaseTooltip {
 }
 ```
 
-##### `defineCustomElement` 自定义内容的方式 （不推荐）
+##### `defineCustomElement` 自定义内容的方式 <Badge type="error">不推荐</Badge>
 
 > 注意，customElements 不能重复注册，否则浏览器会报错
 
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/contribution.en.md b/s2-site/docs/manual/contribution.en.md
index 443c9953d1..13c5834a64 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
@@ -13,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 c965b1b160..3f4cb66920 100644
--- a/s2-site/docs/manual/contribution.zh.md
+++ b/s2-site/docs/manual/contribution.zh.md
@@ -1,22 +1,27 @@
 ---
 title: 贡献指南
 order: 7
+tag: Updated
 ---
 
-如果你恰好看到了这篇文章，你一定是希望对这个项目贡献自己的一份力量
+如果你恰好看到了这篇文章，你一定是希望对这个项目贡献自己的一份力量。
 
-## 欢迎任何形式的贡献
+## 🫡 欢迎任何形式的贡献
 
 "我代码水平不行", "会不会受到鄙视？", "会不会不太好？", 放心，不存在的！
 
-我们欢迎任何形式的贡献，不管是一个错别字的修改，还是一次友好的建议，不管是通过 提交 [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, 但求友好的提交一个有意义的 bug 反馈，谁也不希望反馈的 bug 是这样：
 
@@ -24,41 +29,43 @@ 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)
 
-按照 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)
 
-## Pull Request
+## 🙋‍♂️ Pull Request
 
 > 示例 [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. 确保加上了对应的单元测试和文档 （如果有 `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)
 
-## 开发流程
+## ⌨️ 本地开发
+
+:::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#L4-L100"></embed>
+
+## 📦 版本
+
+<embed src="@/docs/common/packages.zh.md"></embed>
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/extended-reading/data-process/pivot.zh.md b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
new file mode 100644
index 0000000000..8f98f507a6
--- /dev/null
+++ b/s2-site/docs/manual/extended-reading/data-process/pivot.zh.md
@@ -0,0 +1,180 @@
+---
+title: 透视表
+order: 1
+---
+
+本文会介绍透视表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。
+
+数据处理流程是：
+
+![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) 文件夹中。
+
+## 原始数据
+
+初始配置和数据如下：
+
+```tsx
+const dataCfg = {
+  fields: {
+    rows: ['province', 'city'],
+    columns: ['type', 'sub_type'],
+    values: ['price'],
+  },
+  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: '沙发',
+    },
+  ]
+};
+
+const options = {
+    width: 600,
+    height: 600
+};
+
+<SheetComponent
+  dataCfg={dataCfg}
+  options={options}
+  sheetType="pivot"
+/>
+```
+
+## 数据处理
+
+### processDataCfg
+
+这一步主要是对用户传入的配置根据当前的表格类型进行配置转换，主要是处理 `fields` 的信息，增加 `meta` 配置，并根据 `valueInCols` 配置，在`rows`或者`columns`中增加 `$$extra$$` 指标字段。
+
+### transformIndexesData
+
+在这一步，S2 会将用户传入的 data 信息做映射转换，从一维数组转换为多维数组 `indexesData`，并在转换过程中生成行列头的维度信息 `rowPivotMeta`，`colPivotMeta`。索引建立后，后续获取数据就能通过映射快速查询，增加查询效率。
+
+以下面的数据为例：
+
+```js
+{
+  price: 4,
+  province: '浙江省',
+  city: '绍兴市',
+  type: '家具',
+  sub_type: '沙发',
+};
+```
+
+首先，处理数据，提取当前明细数据在初始配置条件下的行、列维度结果。
+
+```ts
+
+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);
+```
+
+对于表场景查询频率非常高，透视表本身的展现形式也表达了一种树形结构，因此我们选择了构建树形 Map 结构来实现 `rowPivotMeta` 和 `colPivotMeta`。
+
+最后，按照上述流程，遍历所有数据，就能得到最终的  `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">
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lFmhQ7wd3TwAAAAAAAAAAAAADmJ7AQ/original" style="border-radius: 5px; display:block;" width="500" alt="rowPivotMeta">
+
+### handleSort
+
+`rowPivotMeta` 和 `colPivotMeta` 都是 Map 结构，当 Map 结构获取 `keys` 或者 `values` 时，是结果按照插入顺序排序的。当存在 `sortParams` 时，我们希望获取的结果顺序就是排序后的顺序，所以在这一步，会根据排序配置，重新生成 Map 结构，使之满足排序后的结果。在后续布局时，就无需在重新排序，可以加速布局效率。
+
+## 数据获取
+
+### 获取单个数据
+
+当渲染透视表数据单元格时，需要获取对应的展示内容（数据）。举个示例，需要右下角单元格数据时，代码如下：
+
+```ts
+const data = getCellData({
+    query: { province: '浙江省', city: '绍兴市', type: '家具', sub_type: '沙发', $$extra$$: 'price' }
+});
+```
+
+实现过程是，先拿到行、列维度枚举值：
+
+```ts
+const rowDimensionValues = transformDimensionsValues(query, ['province', 'city']); // ['浙江省', '绍兴市']
+const colDimensionValues = transformDimensionsValues(query, ['type', 'sub_type', '$$extra$$']); // ['家具', '沙发', 'price']
+```
+
+然后通过枚举值获取数据查询路径，并从前面生成的多维数组中拿到具体数据。
+
+```ts
+const path = getDataPath({ rowDimensionValues, colDimensionValues });
+const rawData = lodash.get(indexesData, path);
+```
+
+在拿到数据后，我们需要为原始数据增加 `$$extra$$` 等信息，用于标识所选择的具体是哪个维度，因此，内部使用了 [CellData](https://github.com/antvis/S2/blob/next/packages/s2-core/src/data-set/cell-data.ts) 类对 rawData 进行包裹，对其行为进行增强。
+
+```ts
+const data = CellData.getCellData(rawData, query[EXTRA_FIELD]);
+
+console.log(data); //{ raw: rawData, extraField: "xxx" }
+```
+
+### 获取多个数据
+
+如果想获取多个单元格数据，其大致流程和获取单个数据一致；获取多个单元格数据允许有维度缺失，会返回多个符合 query 的数据。
+
+比如获取*浙江省*下的所有信息示例代码如下：
+
+```ts
+const dataList = getMultiData({
+    query: { province: '浙江省', $$extra$$: 'price' }
+});
+```
+
+总结下，获取数据是通过查询条件，构造当前查询条件对应的数据路径，然后从多维数组中直接拿取。
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/extended-reading/data-process/table.zh.md b/s2-site/docs/manual/extended-reading/data-process/table.zh.md
new file mode 100644
index 0000000000..d5ba2e9ae5
--- /dev/null
+++ b/s2-site/docs/manual/extended-reading/data-process/table.zh.md
@@ -0,0 +1,147 @@
+---
+title: 明细表
+order: 2
+---
+
+本文会介绍明细表的数据流处理过程，让读者更直观的了解 `S2` 内部数据逻辑。明细表的数据处理流程相对透视表更简单，无需数据转化和映射流程，主要是针对筛选和排序，对数据做了预处理。
+
+![明细表](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gkCGSrcKrZYAAAAAAAAAAAAADmJ7AQ/original)
+
+## 原始数据
+
+初始配置和数据如下：
+
+```tsx
+const dataCfg = {
+  fields: {
+    columns: ['city', 'type', 'sub_type', 'price'],
+  },
+  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: '沙发',
+    },
+  ],
+};
+
+const options = {
+    width: 800,
+    height: 600
+};
+
+<SheetComponent
+  dataCfg={dataCfg}
+  options={options}
+  sheetType="table"
+/>
+```
+
+## 排序、筛选并生成展示数据
+
+如果用户配置了筛选和排序，S2 会对原始数据进行处理，从而生成经过筛选、排序后的展示数据。
+
+比如用户配置了筛选：
+
+```tsx
+// dataCfg
+{
+    filterParams: [
+        {
+            filterKey: 'city',
+            customFilter: (row) => row['city'] === '杭州市',
+        }
+    ]
+}
+```
+
+这次 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: '沙发',
+  },
+]
+```
+
+如果用户配置了排序：
+
+```tsx
+// dataCfg
+{
+    sortParams: [
+        {
+            sortFieldId: 'price', 
+            sortMethod: 'DESC' 
+        }
+    ]
+}
+```
+
+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: '桌子',
+  },
+]
+```
+
+## 获取数据
+
+上述的数据，会被保存到 `TableDataSet` 中名为 `displayData` 的字段中。用户原来传入的原始数据并不会被修改。
+
+我们可以通过 `s2Instance.dataSet.displayData` 获取。
+
+同时可以可以通过 `s2Instance.dataSet.getCellData({ rowIndex: number; field: string; })` API 来获取某个行列格子的数据。同样的，这里获取的是经过筛选和排序之后的展示数据。
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/extended-reading/layout/pivot.zh.md b/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
new file mode 100644
index 0000000000..559f898a8a
--- /dev/null
+++ b/s2-site/docs/manual/extended-reading/layout/pivot.zh.md
@@ -0,0 +1,104 @@
+---
+title: 透视表
+order: 1
+---
+
+本文会介绍透视表的布局过程，让读者更直接了解 `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) 文件夹中。
+
+## 布局生成
+
+### initLayers
+
+生成各种各样的 layerGroup 信息，包括 `backgroundGroup`，`foregroundGroup`， `panelGroup`，`panelScrollGroup` 和各类冻结 `frozenGroup` 等等。
+
+### buildHierarchy & layoutCoordinates
+
+生成行头，列头层级节点信息，并且计算好每个单元格的尺寸信息。可以通过 S2 实例中 `facet.getLayoutResult()` 获取各种节点信息：
+
+![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)
+
+### bindEvents
+
+绑定鼠标滚轮事件，分页事件等。
+
+## 实时渲染
+
+### adjustScrollOffset
+
+将表格的滚动数据调整到合理的范围了，比如表格宽度突然发生变小，原本的滚动条已经滚动到100%的状态的前提下，需要根据当前的宽度重新调整，否则会出现偏移过多，出现空白的情况。
+
+### renderHeaders & renderScrollBars & renderBackground
+
+渲染行头、列头、角头，滚动条，背景色等等。
+
+### dynamicRenderDataCell
+
+对于表格的单元格，在大量数据的情况下，全量单元格会非常多，所以 `S2` 的策略是渲染可视区域内的单元格（按需渲染），滚动后动态新增和删除单元格，达到性能最佳。
+
+通过 `scrollX` 和 `scrollY`，计算当前可视视窗中的单元格的节点索引。
+
+```ts
+const indexes = this.calculateXYIndexes(scrollX, scrollY); // indexes 结果是当前可视视窗节点的坐标索引集合。
+```
+
+对比当前可视视窗节点索引集合和上次索引集合的差值。
+
+```ts
+const { add, remove } = diffPanelIndexes(this.preCellIndexes, indexes); // add 和 remove 也是节点坐标索引集合
+```
+
+针对新增和删除的节点分别进行渲染和删除。
+
+```ts
+each(add, (x, y) => renderCell(x, y));
+each(remove, (x, y) => getCell(x, y).remove());
+```
+
+通过按需渲染，极大的提高了 `S2` 的渲染效率，这也是为什么我们支持百万级别数据渲染的原因。
+
+### 缓存设计
+
+对于数据的频繁读取，我们也做了性能提升，比如缓存数据读取结果、缓存字体宽度计算等。
+
+```ts
+/**
+ * 查找字段信息
+ */
+public getFieldMeta = memoize((field: string, meta?: Meta[]): Meta => {
+  return find(this.meta || meta, (m: Meta) => m.field === field);
+});
+```
+
+另外，`S2` 还做了其他的一些优化来提升渲染效率，比如滚动合帧（解决滚动白屏问题）、懒渲染（解决多次重复渲染问题）。
+
+### 行列冻结
+
+行列冻结相关的处理都被抽象到 `FrozenFacet` 中处理，会重新基础的实时渲染链路，增加对各类冻结 `frozenGroup` 的绘制步骤。
+
+被冻结的行列，在布局上会有特殊处理。简单的说，冻结行列格子的定位是固定的。其中：
+
+<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/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 65%
rename from s2-site/docs/manual/advanced/layout/table.zh.md
rename to s2-site/docs/manual/extended-reading/layout/table.zh.md
index 37dda55d99..8735797c2a 100644
--- a/s2-site/docs/manual/advanced/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/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 900fc0fa7d..652ca4d7d1 100644
--- a/s2-site/docs/manual/advanced/performance.en.md
+++ b/s2-site/docs/manual/extended-reading/performance.en.md
@@ -1,6 +1,7 @@
 ---
 title: Performance
-order: 6
+order: 3
+tag: Updated
 ---
 
 ## introduce
diff --git a/s2-site/docs/manual/advanced/performance.zh.md b/s2-site/docs/manual/extended-reading/performance.zh.md
similarity index 78%
rename from s2-site/docs/manual/advanced/performance.zh.md
rename to s2-site/docs/manual/extended-reading/performance.zh.md
index bed279101c..8af090db0a 100644
--- a/s2-site/docs/manual/advanced/performance.zh.md
+++ b/s2-site/docs/manual/extended-reading/performance.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 性能介绍
-order: 6
+order: 3
+tag: Updated
 ---
 
 ## 介绍
@@ -15,16 +16,23 @@ order: 6
 
 在研究 `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 如何性能优化。
 
 ## 性能优化
 
 以如下透视表为例：
-![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={
@@ -56,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
@@ -98,9 +106,9 @@ 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)
+<image alt="path" height="400" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*GyJCTq-gw-sAAAAAAAAAAAAAARQnAQ">
 
 上图中，紫色单元格对应的坐标为：
 
@@ -151,6 +159,9 @@ const rowsMeta: PivotMeta = {
 
 因此在 `S2` 中查询数据不是循环遍历底层数据，基于层级结构和查询数组路径获取数据。在第一次遍历原始数据，生成必要的 `Meta` 和多维数组信息后，查询数据时间复杂度是 **O(n)**。此方案的优点是性能优异。
 
+> 实际上 `indexesData` 还包含了单元格行列信息的前缀用于区分普通数据和下钻数据，所以其真正结构是：
+> `Record<string, RawData[][]>`，其中 `RawData[][]` 对应上面的多维数组。
+
 ### 按需渲染
 
 对于表格的单元格，`S2` 的策略是渲染可视区域内的单元格（按需渲染），滚动后动态新增和删除单元格，达到性能最佳。
@@ -205,7 +216,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/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md
index 0b82587814..0162ea46cb 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` 后，图表鼠标坐标响应不正确
 
@@ -51,7 +50,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 +65,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 +123,7 @@ const pivotSheet = new PivotSheet('#container > div[title="xx"]', dataCfg, optio
 
 ```ts
 s2.changeSheetSize(200, 200)
-s2.render(false)
+await s2.render(false)
 ```
 
 ### 表格可以根据外部容器的宽高自动撑满吗？
@@ -133,12 +132,16 @@ 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` 中可以正常显示？
 
 请查看 [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)
+
 ### 如何在点击或悬停单元格的时候自定义 Tooltip?
 
 请查看相关文档和示例
@@ -158,12 +161,10 @@ s2.render(false)
 
 ```ts
 s2.showTooltip({
-  ...,
   content: <YourComponent props={"A"}/>
 })
 
 s2.showTooltip({
-  ...,
   content: <YourComponent props={"B"} />
   options: {
     forceRender: true
@@ -179,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` 事件，看是否有被冒泡影响，尝试阻止冒泡
 
@@ -213,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` 键的同时滚动鼠标
@@ -297,7 +306,7 @@ const s2Options = {
 
 - 你**实际**安装的版本号：
 
-> 避免 `latest` 或者 `*` 这种没有实际意义的版本号，提供你实际使用的版本可以帮助我们更快的定位问题，有可能你使用的功能在新版本中才支持，或者 bug 在新版本中已经被修复了
+> 避免 `latest`, `next` 或者 `*` 这种没有实际意义的版本号，提供你实际使用的版本可以帮助我们更快的定位问题，有可能你使用的功能在新版本中才支持，或者 bug 在新版本中已经被修复了
 
 - **详细的** bug 描述
 
@@ -326,9 +335,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/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 baee9bc136..c1a0cb6ca7 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -1,6 +1,7 @@
 ---
 title: 快速上手
 order: 1
+tag: Updated
 ---
 
 ## 📦 安装
@@ -9,35 +10,32 @@ order: 1
 
 ```bash
 # npm
-$ npm install @antv/s2 --save
+$ npm install @antv/s2@next --save
 
 # yarn
-$ yarn add @antv/s2 --save
+$ yarn add @antv/s2@next
 
 # pnpm
-$ pnpm install @antv/s2 --save
+$ pnpm add @antv/s2@next
 ```
 
 ### 使用 React 或 Vue3 版本
 
 ```bash
 # React
-$ yarn add @antv/s2 @antv/s2-react --save
+$ pnpm add @antv/s2@next @antv/s2-react@next antd @ant-design/icons
 
 # Vue3
-$ yarn add @antv/s2 @antv/s2-vue --save
+$ 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>
 
-如需兼容 `IE`，需要自行引入 `polyfill` 兼容。
-
 ## 🔨 使用
 
-创建 `S2` 表格有三种方式，基础类版本 `(s2-core)` 和 基于 `core` 层 封装的 `React` 和 `Vue3` 版本
-
 ### 版本
 
 <embed src="@/docs/common/packages.zh.md"></embed>
@@ -171,13 +169,13 @@ const s2Options = {
 #### 3. 渲染
 
 ```html
-<div id="container"></div>
+<div id="container" />
 ```
 
 ```ts
 import { PivotSheet } from '@antv/s2';
 
-async function run() {
+async function bootstrap() {
   const container = document.getElementById('container');
 
   const s2 = new PivotSheet(container, s2DataConfig, s2Options);
@@ -185,7 +183,7 @@ async function run() {
   await s2.render(); // 返回 Promise
 }
 
-run();
+bootstrap();
 ```
 
 #### 4. 结果
@@ -201,44 +199,44 @@ run();
 
 ```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
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container'),
-);
-
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 :::warning{title='注意事项'}
 `React` 版本的 `分析组件` 如：`高级排序`, `导出`, `下钻`, `Tooltip` 等组件基于 `antd` 组件库开发，如需使用，需要额外安装，并引入对应样式。
 
 ```bash
-yarn add antd @ant-design/icons --save
+pnpm add antd @ant-design/icons
 ```
 
+:::
+
 ​📊 查看 [React 版本透视表 demo](/examples/react-component/sheet#pivot)。
 
 #### 表格移动端组件使用
 
 ```ts
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { MobileSheet } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-ReactDOM.render(
-  <MobileSheet
-    dataCfg={s2DataConfig}
-  />,
-  document.getElementById('container'),
-);
-
+const App = () => {
+  return (
+    <MobileSheet
+      dataCfg={s2DataConfig}
+    />
+  )
+}
 ```
 
 #### 注意事项
@@ -296,10 +294,10 @@ createApp(App).mount('#app');
 
 :::warning{title='注意事项'}
 
-`Vue3` 版本的 `分析组件` 如：`高级排序`, `导出`, `下钻`, `Tooltip` 等组件基于 `ant-design-vue` 组件库开发，如需使用，需要额外安装，并引入对应样式。
+`Vue3` 版本的 `分析组件` 如：`高级排序`, `导出`, `下钻`, `Tooltip` 等组件基于 `ant-design-vue@3.x` 组件库开发，如需使用，需要额外安装，并引入对应样式。
 
 ```bash
-yarn add ant-design-vue --save
+pnpm add ant-design-vue@3.x
 ```
 
 :::
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 2fd3af8cc9..82a95edcf8 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/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"/>
+    <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@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"/>
   </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/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">
+    <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,18 +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 --save
-# yarn add @antv/s2 --save
-# pnpm install @antv/s2 --save
+$ npm install @antv/s2@next --save
+# yarn add @antv/s2@next
+# pnpm add @antv/s2@next
 ```
 
 ## 🔨 使用
@@ -158,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: '子类别',
+    },
   ]
 };
 ```
@@ -182,41 +233,57 @@ 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://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aTPcT4aKOq4AAAAAAAAAAAAADmJ7AQ/original" width="600" alt="preview" />
 
 ## 📦 版本
 
 <embed src="@/docs/common/packages.zh.md"></embed>
 
-## 👤 作者
+### 🖥️ 浏览器兼容性
 
-[**@AntV**](https://github.com/orgs/antvis/people)
+<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)
+
+## ⌨️ 本地开发
 
 <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/docs/manual/migration-v2.en.md b/s2-site/docs/manual/migration-v2.en.md
new file mode 100644
index 0000000000..7f091e9975
--- /dev/null
+++ b/s2-site/docs/manual/migration-v2.en.md
@@ -0,0 +1,5 @@
+---
+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
new file mode 100644
index 0000000000..53d7968468
--- /dev/null
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -0,0 +1,695 @@
+---
+title: S2 2.0 升级指南
+order: 9
+tag: New
+---
+
+本文档将帮助你从 S2 `1.x` 版本升级到 S2 `2.x` 版本。
+
+## 🏠 官网地址变化
+
+:::warning{title="注意"}
+原官网 <https://s2.antv.vision> 和 <https://antv-s2.gitee.io> 不再维护和使用，请使用最新的文档，确保您看到的不是过时的文档。
+:::
+
+- 原 `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` 版本
+
+:::
+
+## 📅 正式版本发布时间
+
+目前 `next` 会持续内测一段时间，https://s2.antv.antgroup.com 会作为相应的文档网站。
+
+在此期间，会持续根据用户的反馈进行 Bug fix 和代码调整，在 `@antv/s2@next` 版本稳定后，会发布正式版本，`latest` 将默认指向 `2.x` 版本，去除 `next` 标识。
+
+## 🗓️ v1 版本维护期
+
+目前 `v1` 版本会继续维护，针对 `BUG` 发布 `Patch` 版本修复，但不再接收新的 `Feature Request` 和 `Feature Pull Request`，欢迎 `Bug Fix Pull Request`, 截止日期为 `2024` 年年底。
+
+## 📦 安装
+
+```bash
+# 基础版本
+$ 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     |
+| - | - | - | - |
+| [@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>
+
+#### 底层渲染引擎升级为 `AntV/G 5.0`
+
+表格绘制引擎升级到 [`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
+    };
+  },
+}
+```
+
+#### 数值指标节点 id 调整
+
+数值节点的 id 从 `field` 变更为 `格式化后的名称`.
+
+```ts
+const s2DataConfig = {
+  fields: {
+    values: ['number'],
+  },
+  meta: [
+    {
+      field: 'number',
+      name: '数量',
+    },
+  ],
+}
+```
+
+```diff
+- 'root[&] 家具 [&] 沙发 [&]number'
++ 'root[&] 家具 [&] 沙发 [&] 数量'
+```
+
+#### 自定义宽高配置调整
+
+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,
+});
+```
+
+3. 复制默认开启。
+
+具体请查看 [复制与导出](/manual/advanced/interaction/copy) 相关文档。
+
+#### 刷选配置调整
+
+1. `row/col/data` 调整为 `rowCell/colCell/dataCell`。
+
+```diff
+const s2Options = {
+  interaction: {
+-   brushSelection: {
+-     row: false,
+-     col: false,
+-     data: true,
+-   },
+
++   brushSelection: {
++     rowCell: true,
++     colCell: true,
++     dataCell: true,
++   }
+  }
+}
+```
+
+2. 所有单元格默认开启刷选。
+
+具体请查看 [基础交互](/manual/advanced/interaction/basic) 相关文档。
+
+#### 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;
++  }
+}
+```
+
+#### 透视表冻结行头配置变更
+
+`rowHeader` 现在支持传递 `number` , 如果为数值则表示开启冻结行头，并自定义行头最大冻结宽度 (0 - 1)。
+
+```diff
+const s2Options = {
+  frozen: {
+-   rowHeader: true,
++   rowHeader: true,
++   rowHeader: 0.5,
+  }
+}
+```
+
+#### 高清适配配置调整
+
+```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/resize) 相关文档。
+
+#### 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) 相关文档。
+
+#### 渲染参数变更
+
+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,
++ });
+```
+
+#### 小计总计配置参数变更
+
+总计配置统一增加 `grandTotals` 和 `subTotals` 前缀，避免歧义。
+
+```diff
+const s2Options = {
+  totals: {
+    row: {
+-     calcTotals: {}.
+-     reverseLayout: true,
+-     label: '总计'
+-     totalsGroupDimensions: [],
+-     reverseSubLayout: true,
+
++     calcGrandTotals: {}.
++     reverseGrandTotalsLayout: true,
++     grandTotalsLabel: '总计'
++     grandTotalsGroupDimensions: [],
++     reverseSubTotalsLayout: true
+    };
+  }
+}
+```
+
+#### 绘制自定义文本 API 变更
+
+绘制多列文本 `drawObjectText` 函数更名为 `drawCustomContent`
+
+```diff
+- import { drawObjectText } from '@antv/s2'
++ import { drawCustomContent } from '@antv/s2'
+```
+
+#### 数据集处理逻辑变更
+
+对于多个 `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,
++   },
++ ];
+
+```
+
+#### 数据集查询逻辑变更
+
+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
+
+`@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 调整
+
+具体请查看标记为 <Badge type="success">New</Badge> 和 <Badge>Updated</Badge> 的 [`API 文档`](/api)
+
+## 🙋 遇到问题
+
+更多新特性和改动请阅读文档，如果您在升级过程中遇到了问题，请到 [GitHub issues](https://github.com/antvis/S2/issues/2454) 或者 [GitHub Discussions](https://github.com/antvis/S2/discussions/1933) 进行反馈。我们会尽快响应和相应改进这篇文档。
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/distinguish-cell.ts b/s2-site/examples/analysis/conditions/demo/distinguish-cell.ts
new file mode 100644
index 0000000000..14b116a2a9
--- /dev/null
+++ b/s2-site/examples/analysis/conditions/demo/distinguish-cell.ts
@@ -0,0 +1,72 @@
+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/gradient-interval.ts b/s2-site/examples/analysis/conditions/demo/gradient-interval.ts
index 2a2394fcba..e90bba0d6b 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';
+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,10 +23,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: {
@@ -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-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/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..9816b7861e 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 } 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: {
@@ -28,7 +28,8 @@ 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..9b68adf2b8 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 } 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: {
@@ -24,14 +24,15 @@ fetch(
                 isCompare: true,
                 maxValue: 8000,
                 minValue: 300,
-                fieldValue: value > 7900 ? 10 : value,
+                fieldValue: Number(value) > 7900 ? 10 : value,
               };
             },
           },
         ],
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    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..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,6 +60,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/y1IafbmC7W/c79f8906-ca2e-4bbd-b384-e663bde759e4.png"
     },
+    {
+      "filename": "bidirectional-interval.ts",
+      "title": {
+        "zh": "双向柱状图",
+        "en": "Bidirectional interval"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oUICMHjOA/7fd723cb-fc2a-45a5-a0ab-a2840127a48a.png"
+    },
     {
       "filename": "multi-conditions.ts",
       "title": {
@@ -68,21 +76,31 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/6FFtlY%240T/792a0865-b01d-4674-a3ef-98da6c5be285.png"
     },
+
     {
-      "filename": "bidirectional-interval.ts",
+      "filename": "intelligent-background.ts",
       "title": {
-        "zh": "双向柱状图",
-        "en": "Bidirectional interval"
+        "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
     },
     {
-      "filename": "intelligent-background.ts",
+      "filename": "distinguish-cell.ts",
       "title": {
-        "zh": "开启文字智能反色",
-        "en": "Intelligent background"
+        "zh": "区分行列角头和数据单元格",
+        "en": "Distinguish different cell"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oUICMHjOA/7fd723cb-fc2a-45a5-a0ab-a2840127a48a.png"
+      "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/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..11e1bb55e2 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, 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/get-data/demo/get-cell-data.ts b/s2-site/examples/analysis/get-data/demo/get-cell-data.ts
index a052fad192..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
@@ -1,12 +1,202 @@
-import { PivotSheet, EXTRA_FIELD } 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',
 )
   .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,59 +223,69 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
-      selectedCellsSpotlight: true,
-      hoverHighlight: true,
-      tooltip: {
-        showTooltip: true,
+      seriesNumber: {
+        enable: true
       },
       interaction: {
-        enableCopy: true,
+        selectedCellsSpotlight: true,
+        hoverHighlight: true,
+        copy: { enable: true },
       },
       // 配置小计总计显示
       totals: {
         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();
-
-    // 获取明细单元格
-    const cellData = s2.dataSet.getCellData({
-      query: {
-        province: '浙江',
-        city: '杭州',
-        type: '笔',
-        [EXTRA_FIELD]: 'price',
-      },
+
+    await s2.render();
+
+    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 62%
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
index 59c9eeb8ee..4b2a4263ca 100644
--- 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
@@ -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,61 +39,56 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
-      selectedCellsSpotlight: true,
-      hoverHighlight: true,
-      tooltip: {
-        showTooltip: true,
-      },
       interaction: {
-        enableCopy: true,
+        selectedCellsSpotlight: true,
+        hoverHighlight: true,
+        copy: { enable: true },
       },
       // 配置小计总计显示
       totals: {
         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/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..723cbecce3
--- /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,
+        copy: { enable: 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/analysis/sort/demo/advanced.tsx b/s2-site/examples/analysis/sort/demo/advanced.tsx
index f5d4c0d878..a3588d7c4d 100644
--- a/s2-site/examples/analysis/sort/demo/advanced.tsx
+++ b/s2-site/examples/analysis/sort/demo/advanced.tsx
@@ -1,16 +1,14 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
-import insertCss from 'insert-css';
-import 'antd/es/cascader/style/index.css';
+import React from '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',
-)
+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: ['纸张', '笔'] },
       {
@@ -20,7 +18,7 @@ fetch(
       },
     ];
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -48,13 +46,13 @@ fetch(
       sortParams: defaultSortParams,
     };
 
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
 
     const AdvancedSortDemo = () => {
-      const [dataCfg, setDataCfg] = useState(s2DataConfig);
+      const [dataCfg, setDataCfg] = React.useState(s2DataConfig);
       const [sortParams, setSortParams] = React.useState(defaultSortParams);
 
       return (
@@ -65,7 +63,7 @@ fetch(
             dataCfg={dataCfg}
             options={s2Options}
             header={{
-              advancedSortCfg: {
+              advancedSort: {
                 open: true,
                 sortParams,
                 onSortConfirm: (ruleValues, sortParams) => {
@@ -79,10 +77,12 @@ fetch(
       );
     };
 
-    ReactDOM.render(<AdvancedSortDemo />, document.getElementById('container'));
+    reactDOMClient
+      .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/custom-list.ts b/s2-site/examples/analysis/sort/demo/custom-list.ts
index d20e26d016..f4d5877800 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://render.alipay.com/p/yuyan/180020010001215413/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://render.alipay.com/p/yuyan/180020010001215413/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 5627965ae1..518365775e 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://render.alipay.com/p/yuyan/180020010001215413/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://render.alipay.com/p/yuyan/180020010001215413/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 93444f0aec..840cd6f79c 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://render.alipay.com/p/yuyan/180020010001215413/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'],
@@ -34,17 +34,21 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/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' },
       ],
     };
 
-    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 2f14efb975..c612829071 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://render.alipay.com/p/yuyan/180020010001215413/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'],
@@ -35,11 +35,10 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/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));
           },
         },
         {
@@ -47,23 +46,26 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
           sortFieldId: 'city',
           sortByMeasure: 'price',
           // 当使用 sortByMeasure 时，可以传入 query 定位数值列表
-          // 如下方限定 params.data 为 type=纸张, 数值=price 的数据
-          sortFunc: function (params) {
-            const { data, sortByMeasure, sortFieldId } = params || {};
+          // 如此 params.data 被限定为了 type=纸张, 数值=price 的数据
+          query: { type: '纸张', [EXTRA_FIELD]: 'price' },
+          sortFunc(params) {
+            const { data, sortByMeasure, sortFieldId } = params;
+
             return data
-              ?.sort((a, b) => b[sortByMeasure] - a[sortByMeasure])
-              ?.map((item) => item[sortFieldId]);
+              .map((item) => item.raw) // 此时 data 为 CellData 对象，需要取出原始数据对象
+              .sort((a, b) => b[sortByMeasure] - a[sortByMeasure]) // price 倒序
+              .map((item) => item[sortFieldId]);
           },
-          query: { type: '纸张', [EXTRA_FIELD]: 'price' },
         },
       ],
     };
 
-    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..dc4c86acab 100644
--- a/s2-site/examples/analysis/sort/demo/custom-totals.ts
+++ b/s2-site/examples/analysis/sort/demo/custom-totals.ts
@@ -1,16 +1,22 @@
-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',
+  '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'],
         columns: ['type'],
-        values: ['price'],
+        values: ['price', 'cost'],
       },
       meta: [
         {
@@ -29,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,
@@ -42,7 +52,7 @@ fetch(
           },
         },
         {
-          // type 依据 （ type - 小计 ）&（ price ）& 降序 排序
+          // type 依据行（`浙江-小计`）与列（`type-小计`）交叉的数据倒序排序
           sortFieldId: 'type',
           sortMethod: 'DESC',
           sortByMeasure: TOTAL_VALUE,
@@ -54,7 +64,7 @@ fetch(
       ],
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       totals: {
@@ -74,7 +84,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 2c10da871b..012995a75f 100644
--- a/s2-site/examples/analysis/sort/demo/group-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/group-sort.tsx
@@ -1,14 +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://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 = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -35,19 +34,31 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
-      showDefaultHeaderActionIcon: true, // 默认打开
+      showDefaultHeaderActionIcon: true,
+
+      /**
+       * `@antv/s2` 提供组内排序的能力，如果不使用 `@antv/s2-react` 的话, 可以自行实现 Tooltip 排序菜单，然后调用相关 API.
+       * 详情请查看: https://s2.antv.antgroup.com/manual/basic/sort/group
+       */
+      tooltip: {
+        operation: {
+          // 开启组内排序
+          sort: true,
+        },
+      },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={s2DataConfig}
-        options={s2Options}
-      />,
-      document.getElementById('container'),
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={s2DataConfig}
+          options={s2Options}
+        />,
+      );
   });
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"
     }
   ]
 }
diff --git a/s2-site/examples/analysis/sort/demo/table-sort.tsx b/s2-site/examples/analysis/sort/demo/table-sort.tsx
index 44404870ca..71069e9d0f 100644
--- a/s2-site/examples/analysis/sort/demo/table-sort.tsx
+++ b/s2-site/examples/analysis/sort/demo/table-sort.tsx
@@ -1,20 +1,20 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { orderBy } from 'lodash';
-import { Button } from 'antd';
-import { SheetComponent } from '@antv/s2-react';
-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 { Button } from 'antd';
+import insertCSS from 'insert-css';
+import { orderBy } from 'lodash';
+import React from 'react';
 
 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'],
       },
@@ -50,7 +50,8 @@ 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 (
         <>
           <Button
@@ -129,15 +130,17 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       );
     };
 
-    ReactDOM.render(<App />, document.getElementById('container'));
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<App />);
   });
 
 // 我们用 insert-css 演示引入自定义样式
 // 推荐将样式添加到自己的样式文件中
 // 若拷贝官方代码，别忘了 npm install insert-css
-insertCss(`
-.ant-btn {
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
+insertCSS(`
+  .ant-btn {
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
 `);
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/analysis/totals/demo/basic.ts b/s2-site/examples/analysis/totals/demo/basic.ts
index a95a2e33f2..9f4b88ee49 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,16 +33,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,
+        copy: { enable: true },
       },
       // 配置小计总计显示
       totals: {
@@ -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 c1570a2038..f054c701de 100644
--- a/s2-site/examples/analysis/totals/demo/calculate.ts
+++ b/s2-site/examples/analysis/totals/demo/calculate.ts
@@ -1,10 +1,12 @@
-import { PivotSheet } 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((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -31,7 +33,7 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json0012154
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       // 配置小计总计显示
@@ -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,15 +58,16 @@ 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,
           },
         },
       },
     };
+
     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 2c96eadffe..d82bd85fa0 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, VALUE_FIELD, S2DataConfig, S2Options } from '@antv/s2';
 
 fetch('https://render.alipay.com/p/yuyan/180020010001215413/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'],
@@ -33,13 +33,13 @@ 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;
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       // 配置小计总计显示
@@ -72,7 +72,8 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
         },
       },
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
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 e11b87e378..a73d73cf71 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, S2Options } from '@antv/s2';
 
 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'],
         columns: ['type'],
@@ -35,24 +35,22 @@ 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,
     };
 
-    
-
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
-      selectedCellsSpotlight: true,
-      hoverHighlight: true,
       tooltip: {
         enable: true,
       },
       interaction: {
-        enableCopy: true,
+        copy: { enable: true },
+        selectedCellsSpotlight: true,
+        hoverHighlight: true,
       },
       // 配置小计总计显示
       totals: {
@@ -72,7 +70,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..55b70dac82 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 } 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',
@@ -41,7 +41,7 @@ fetch(
         enable: true,
       },
       interaction: {
-        enableCopy: true,
+        copy: { enable: true },
         selectedCellsSpotlight: true,
         hoverHighlight: true,
       },
@@ -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 0dfa6ca497..b3b75e858f 100644
--- a/s2-site/examples/basic/pivot/demo/grid.ts
+++ b/s2-site/examples/basic/pivot/demo/grid.ts
@@ -1,20 +1,65 @@
-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,
-      // 冻结行头
-      // frozenRowHeader: true
+      hierarchyType: 'grid',
+      interaction: {
+        copy: { enable: true },
+        withFormat: true,
+        withHeader: true,
+      },
+      // 显示序号
+      // seriesNumber: {
+      //   enable: true,
+      //   自定义序号列文本, 默认 "序号"
+      //   text: '自定义序号标题', 
+      //},
+      frozen: {
+        // 默认冻结行头, 行头和数值区域都会展示滚动条
+        // rowHeader: false,
+        // 冻结行头时, 行头宽度占表格的 1/2, 支持动态调整 (0 - 1)
+        // rowHeader: 0.2,
+      },
     };
 
-    const s2 = new PivotSheet(container, dataCfg, s2Options);
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/basic/pivot/demo/tree.ts b/s2-site/examples/basic/pivot/demo/tree.ts
index 361567ca9d..ddfec69803 100644
--- a/s2-site/examples/basic/pivot/demo/tree.ts
+++ b/s2-site/examples/basic/pivot/demo/tree.ts
@@ -4,28 +4,46 @@ 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',
+
+      // 自定义角头标题 默认 "维值1/维值2"
+      // cornerText: "指标",
+
+      // 显示序号
+      // seriesNumber: {
+      //   enable: true,
+      //   自定义序号列文本, 默认 "序号"
+      //   text: '自定义序号标题',
+      // },
       style: {
-        // 折叠全部
-        // hierarchyCollapse: true,
+        rowCell: {
+          // 自定义树状模式下行头宽度
+          // width: 80,
+
+          // 折叠全部
+          // collapseAll: true,
 
-        // 折叠浙江省下面所有的城市
-        collapsedRows: {
-          'root[&]浙江省': true,
+          // 折叠浙江省下面所有的城市
+          collapseFields: {
+            'root[&]浙江省': true,
+          },
         },
       },
-
-      // 冻结行头
-      // frozenRowHeader: true
+      frozen: {
+        // 默认冻结行头, 行头和数值区域都会展示滚动条
+        // rowHeader: false,
+        // 冻结行头时, 行头宽度占表格的 1/2, 支持动态调整 (0 - 1)
+        // rowHeader: 0.2,
+      },
     };
 
     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..8a96fb0835 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: {
@@ -36,10 +36,18 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      showSeriesNumber: true,
+      seriesNumber: {
+        enable: true,
+        text: '序号',
+      },
+      // 自定义空数据单元格占位符
+      // placeholder: '-',
+      placeholder(meta) {
+        return '-';
+      },
     };
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
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/art/demo/lost-text.tsx b/s2-site/examples/case/art/demo/lost-text.tsx
index 5f23880720..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,32 +174,32 @@ 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,
-  showSeriesNumber: false,
+  seriesNumber: {
+    enable: false,
+  },
   showDefaultHeaderActionIcon: false,
   interaction: {
-    enableCopy: true,
-    // 防止 mac 触摸板横向滚动触发浏览器返回, 和移动端下拉刷新
+    copy: { enable: true },
     overscrollBehavior: 'none',
     brushSelection: {
-      data: true,
-      col: true,
-      row: true,
+      dataCell: true,
+      colCell: true,
+      rowCell: true,
     },
     hoverFocus: false,
     hoverHighlight: false,
@@ -226,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(
@@ -246,7 +230,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
@@ -293,6 +277,5 @@ fetch(
           ),
         }}
       />,
-      document.getElementById('container'),
     );
   });
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/case/art/demo/mosaic.tsx b/s2-site/examples/case/art/demo/mosaic.tsx
index 9ab898b317..6cdc362947 100644
--- a/s2-site/examples/case/art/demo/mosaic.tsx
+++ b/s2-site/examples/case/art/demo/mosaic.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+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',
 )
@@ -31,10 +30,9 @@ fetch(
       style: {
         layoutWidthType: 'compact',
         colCell: {
+          // 隐藏列头
           height: 0,
-          widthByField: {
-            color: 23,
-          },
+          width: 23,
         },
         dataCell: {
           height: 23,
@@ -42,7 +40,7 @@ fetch(
       },
     };
 
-    const customTheme = {
+    const customTheme: ThemeCfg['theme'] = {
       rowCell: {
         cell: {
           backgroundColor: dataCfg.data[0].color,
@@ -71,12 +69,13 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        dataCfg={dataCfg}
-        options={s2Options}
-        themeCfg={{ theme: customTheme }}
-      />,
-      document.getElementById('container'),
-    );
+    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 04c76d2696..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,8 +1,9 @@
 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 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';
 
 const paletteLegendMap = [
@@ -40,7 +41,11 @@ const paletteLegendMap = [
     img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ',
   },
 ];
-// 自定义单元格
+
+/**
+ * 自定义 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;
@@ -48,18 +53,22 @@ 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: {
-          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,
+          },
+        }),
+      );
     };
   }
 }
@@ -67,7 +76,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 +153,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       },
     };
 
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 1150,
       height: 720,
       showDefaultHeaderActionIcon: false,
@@ -165,6 +174,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
         },
       },
     };
+
     const PaletteLegend = () => (
       <div className="palette">
         {paletteLegendMap.map((value, key) => (
@@ -175,7 +185,8 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
         ))}
       </div>
     );
-    ReactDOM.render(
+
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <div className="sheet-wrapper">
         <PaletteLegend />
         <SheetComponent
@@ -185,11 +196,10 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
           themeCfg={{ theme: s2Theme }}
         />
       </div>,
-      document.getElementById('container'),
     );
   });
 
-insertCss(`
+insertCSS(`
   .sheet-wrapper {
     background: #010138;
     padding: 16px;
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/comparison/demo/measure-comparison.tsx b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
index a4e86ae871..104b5e4cb7 100644
--- a/s2-site/examples/case/comparison/demo/measure-comparison.tsx
+++ b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
@@ -1,21 +1,28 @@
 /* eslint-disable max-classes-per-file */
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { Line, Rect } from '@antv/g';
 import {
   ColCell,
-  DataCell,
   CornerCell,
+  DataCell,
   Frame,
-  ID_SEPARATOR,
-  measureTextWidth,
+  NODE_ID_SEPARATOR,
+  ROOT_NODE_ID,
+  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';
+import React from 'react';
 
+// 上涨颜色
 const UP_COLOR = '#F46649';
+// 下降颜色
 const DOWN_COLOR = '#2AA491';
-const TAG_HEIGHT = 20; // 指标高度
-const TAG_WIDTH = 80; // 指标宽度
+// 指标宽度
+const TAG_WIDTH = 100;
+// 指标高度
+const TAG_HEIGHT = 20;
+
+const isRoot = (id) => id === ROOT_NODE_ID;
 
 class CustomColCell extends ColCell {
   lineConfig = {};
@@ -33,7 +40,7 @@ class CustomColCell extends ColCell {
     this.lineConfigStyle = lineConfigStyle || {};
   }
 
-  getCellArea() {
+  getBBoxByType() {
     const { x, y, height, width, parent } = this.meta;
 
     if (parent?.id === 'root') {
@@ -52,13 +59,15 @@ class CustomColCell extends ColCell {
   drawBackgroundShape() {
     const { parent } = this.meta;
 
-    if (parent?.id === 'root' && this.lineConfigStyle.stroke) {
-      this.backgroundShape = this.addShape('rect', {
-        attrs: {
-          ...this.getCellArea(),
-          fill: this.lineConfigStyle.stroke,
-        },
-      });
+    if (isRoot(parent?.id) && this.lineConfigStyle.stroke) {
+      this.backgroundShape = this.appendChild(
+        new Rect({
+          style: {
+            ...this.getBBoxByType(),
+            fill: this.lineConfigStyle.stroke,
+          },
+        }),
+      );
     } else {
       super.drawBackgroundShape();
     }
@@ -68,7 +77,7 @@ class CustomColCell extends ColCell {
   drawInteractiveBgShape() {
     const { parent } = this.meta;
 
-    if (parent?.id === 'root') {
+    if (isRoot(parent?.id)) {
       return;
     }
 
@@ -79,19 +88,18 @@ 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();
 
-      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();
@@ -108,50 +116,58 @@ class CustomColCell extends ColCell {
       verticalBorderColorOpacity,
     } = this.getStyle().cell;
 
-    if (parent?.id === 'root') {
-      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,
-        },
-      });
+    if (isRoot(parent?.id)) {
+      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 (parent?.parent?.id === 'root') {
+    if (isRoot(parent?.parent?.id)) {
       if (this.lineConfig[value]) {
         indexCache[colIndex + 1] = 1;
         this.spreadsheet?.store?.set('indexCache', indexCache);
       }
 
       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,
+            },
+          }),
+        );
       }
     }
   }
@@ -183,8 +199,11 @@ 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${NODE_ID_SEPARATOR}${item}${NODE_ID_SEPARATOR}`,
+        ),
     );
 
     if (tagName) {
@@ -199,8 +218,11 @@ 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${NODE_ID_SEPARATOR}${item}${NODE_ID_SEPARATOR}`,
+        ),
     );
 
     if (!tagName) {
@@ -238,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) {
@@ -282,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;
@@ -301,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,
+          },
+        }),
+      );
     }
   }
 }
@@ -324,8 +354,8 @@ class CustomFrame extends Frame {
 
   addCornerRightBorder() {
     const {
-      width,
-      height,
+      cornerWidth,
+      cornerHeight,
       viewportHeight,
       position,
       spreadsheet,
@@ -336,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;
     }
 
@@ -394,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}`,
+          },
+        }),
+      );
     }
   }
 }
@@ -421,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(
@@ -440,7 +476,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((data) => {
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['type'],
         columns: ['tag'],
@@ -470,6 +506,7 @@ fetch(
       ],
       data,
     };
+
     const getIcon = (fieldValue) => {
       return parseFloat(fieldValue) > 0
         ? 'CellUp'
@@ -477,6 +514,7 @@ fetch(
         ? 'CellDown'
         : '';
     };
+
     const conditionsIcon = [
       {
         field: 'price',
@@ -514,24 +552,30 @@ fetch(
             : 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,
       tooltip: {
         enable: false,
       },
+      frozen: {
+        rowHeader: false,
+      },
       colCell: (node, spreadsheet, ...restOptions) => {
         return new CustomColCell(
           node,
@@ -577,12 +621,13 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        dataCfg={s2DataConfig}
-        options={s2Options}
-        sheetType="pivot"
-      />,
-      document.getElementById('container'),
-    );
+    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 18f8eb74cc..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,6 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import insertCss from 'insert-css';
+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';
 import '@antv/s2-react/dist/style.min.css';
@@ -75,6 +76,7 @@ const getFormatter =
   (value) => {
     const prefix = enablePrefix && value > 0 ? '+' : '';
     const suffix = value !== 0 ? '%' : '';
+
     return `${prefix}${value}${suffix}`;
   };
 
@@ -89,23 +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,
+        },
+      }),
+    );
   }
 }
 
@@ -195,6 +201,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 +213,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,
               };
@@ -231,7 +239,7 @@ fetch('https://assets.antv.antgroup.com/s2/multiple-people-comparison.json')
       },
     };
 
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
@@ -242,12 +250,10 @@ fetch('https://assets.antv.antgroup.com/s2/multiple-people-comparison.json')
           extra: <PaletteLegend />,
         }}
       />,
-      document.getElementById('container'),
     );
   });
 
-insertCss(`
-
+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 47952a4339..7cf48af1e9 100644
--- a/s2-site/examples/case/comparison/demo/philosophers.tsx
+++ b/s2-site/examples/case/comparison/demo/philosophers.tsx
@@ -1,10 +1,10 @@
 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 { max, min, replace } from 'lodash';
+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';
 
 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,29 +188,28 @@ fetch(
         x: value.event.clientX,
         y: value.event.clientY,
       };
+
       viewMeta.spreadsheet.tooltip.show({
         position,
         content: TooltipContent(viewMeta),
       });
     };
 
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
         adaptive={true}
         header={{
           title: '哲学家的观点',
-          extra: [<PaletteLegend />],
+          extra: <PaletteLegend />,
         }}
         onDataCellMouseUp={onDataCellMouseUp}
       />,
-
-      document.getElementById('container'),
     );
   });
 
-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 620b5f5c43..3d814109cb 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 { Circle, Line } from '@antv/g';
+import { DataCell, Frame, ResizeType, ThemeCfg } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import { DataCell, Frame, S2Theme } from '@antv/s2';
 import '@antv/s2-react/dist/style.min.css';
+import insertCSS from 'insert-css';
+import React from 'react';
 
 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 (!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);
       }
     });
   }
@@ -171,7 +179,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 +203,8 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
         green: '#29A294',
       },
     };
-    const s2Theme: S2Theme = {
+
+    const s2Theme: ThemeCfg['theme'] = {
       colCell: {
         bolderText: {
           fontSize: 12,
@@ -238,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)',
@@ -256,17 +264,29 @@ 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: {
           hideValue: true,
         },
+        rowCell: {
+          widthByField: {
+            成员: 42,
+          },
+        },
         dataCell: {
           width: 40,
           height: 40,
         },
       },
     };
+
     const PaletteLegend = () => (
       <div className="palette">
         {paletteLegendMap.map((value, key) => (
@@ -281,7 +301,7 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
       </div>
     );
 
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <div className="sheet-wrapper">
         <PaletteLegend />
         <SheetComponent
@@ -291,11 +311,10 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json')
           themeCfg={{ theme: s2Theme, palette: s2Palette }}
         />
       </div>,
-      document.getElementById('container'),
     );
   });
 
-insertCss(`
+insertCSS(`
   .sheet-wrapper {
     background: #010138;
     padding: 16px;
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/data-preview/demo/excel.tsx b/s2-site/examples/case/data-preview/demo/excel.tsx
index 1a15f5f29e..69c69ab86b 100644
--- a/s2-site/examples/case/data-preview/demo/excel.tsx
+++ b/s2-site/examples/case/data-preview/demo/excel.tsx
@@ -1,29 +1,36 @@
-import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { S2DataConfig } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import React, { useRef, useState } from 'react';
 import '@antv/s2-react/dist/style.min.css';
-import 'antd/es/checkbox/style/index.css';
 
 // 初始化配置
-const s2Options = {
+const s2Options: SheetComponentOptions = {
   width: 600,
   height: 400,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: true
+  },
   tooltip: { enable: false },
-  interaction: { enableCopy: true, hoverHighlight: false },
+  interaction: {
+    copy: {
+      enable: true,
+    },
+    hoverHighlight: false,
+  },
   showDefaultHeaderActionIcon: false,
 };
 
 // 初始化数据
-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' }}>
@@ -40,5 +47,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'));
+    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 351225cb19..49c591097f 100644
--- a/s2-site/examples/case/data-preview/demo/house.tsx
+++ b/s2-site/examples/case/data-preview/demo/house.tsx
@@ -1,17 +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 { every, filter, isNil, last, map, omit } from 'lodash';
 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 insertCss from 'insert-css';
 
-const ID_SEPARATOR = '[&]';
 const defaultHouseInfo = {
   name: ['15#', '16#', '21#', '22#'],
   unit: ['1单元', '2单元'],
@@ -25,7 +18,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 +38,7 @@ const s2Options = {
               fill: '#b8e1ff',
             };
           }
+
           return {
             fill: '#fff',
           };
@@ -52,7 +47,8 @@ const s2Options = {
     ],
   },
 };
-const defaultSortParams = [
+
+const defaultSortParams: S2DataConfig['sortParams'] = [
   {
     sortFieldId: 'name',
     sortMethod: 'ASC',
@@ -64,16 +60,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));
+        const aNum = last(a.split(NODE_ID_SEPARATOR));
+        const bNum = last(b.split(NODE_ID_SEPARATOR));
+
         return aNum - bNum;
       });
     },
   },
 ];
-const dataConfig = {
+const dataConfig: S2DataConfig = {
   data: [],
   describe: '如何使用 S2 买房',
   fields: {
@@ -146,7 +144,7 @@ const SelectItem = (props) => {
       onChange={(value) => {
         onChange({
           key: dataName,
-          value: value,
+          value,
         });
       }}
     >
@@ -166,6 +164,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 +200,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 +238,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);
   };
 
@@ -268,16 +273,15 @@ fetch(
 )
   .then((res) => res.json())
   .then((data) => {
-    ReactDOM.render(
-      <Sheet data={data} />,
-      document.getElementById('container'),
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<Sheet data={data} />);
   });
 
 // 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 0498e2c3e7..72fbc7eb68 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 ReactDOM from 'react-dom';
-import insertCss from 'insert-css';
+
+import insertCSS from 'insert-css';
+import { Polygon } from '@antv/g';
 import {
   TableColCell,
   GuiIcon,
@@ -9,8 +10,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,10 +27,26 @@ 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;
 
+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,22 +241,29 @@ 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 [options, setOptions] = useState({
+  const onIconClick = ({ meta }) => {
+    setInteractedCol(meta.value);
+    setColModalVisible(!colModalVisible);
+  };
+
+  const options: SheetComponentOptions = {
     width: 600,
     height: 400,
-    showSeriesNumber: true,
+    seriesNumber: {
+      enable: true
+    },
     interaction: {
-      enableCopy: true,
+      copy: { enable: true },
       autoResetSheetStyle: false,
       hoverFocus: false,
     },
@@ -286,8 +299,9 @@ const App = ({ data }) => {
       },
     },
     showDefaultHeaderActionIcon: false,
-  });
-  const [dataCfg, setDataCfg] = useState({
+  };
+
+  const [dataCfg, setDataCfg] = useState<S2DataConfig>({
     fields: {
       columns,
     },
@@ -301,14 +315,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;
 
@@ -323,6 +332,10 @@ const App = ({ data }) => {
     setSearchResultActiveIndex(nextIndex);
     const current = results[nextIndex];
 
+    if (!current) {
+      return;
+    }
+
     scrollToCell(
       current.row,
       current.col,
@@ -343,6 +356,10 @@ const App = ({ data }) => {
     setSearchResultActiveIndex(nextIndex);
     const current = results[nextIndex];
 
+    if (!current) {
+      return;
+    }
+
     scrollToCell(
       current.row,
       current.col,
@@ -399,7 +416,7 @@ const App = ({ data }) => {
               icon={<antdIcons.ArrowLeftOutlined />}
               onClick={() => {
                 if (searchResult.length > 0) {
-                  focusPrev(searchResult, searchResultActiveIndex);
+                  focusPrev(searchResult);
                 }
               }}
             />
@@ -422,9 +439,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();
           }
         }}
@@ -436,6 +453,8 @@ const App = ({ data }) => {
         title="列设置"
         open={colModalVisible}
         className="antv-s2-data-preview-demo-modal"
+        okText="确定"
+        cancelText="取消"
         onCancel={() => {
           setColModalVisible(false);
           form.resetFields();
@@ -455,7 +474,7 @@ const App = ({ data }) => {
   );
 };
 
-const convertToObject = (values) => {
+function convertToObject(values) {
   const initData = {};
 
   values.forEach((val) => {
@@ -463,16 +482,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),
@@ -480,15 +492,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',
@@ -496,9 +502,9 @@ export const getCurrentFilterParams = (fieldName, filterParams) => {
   );
 
   return filtered;
-};
+}
 
-const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
+function SortPopover({ fieldName, spreadsheet, modalCallbackRef }) {
   const fieldData = React.useMemo(
     () =>
       uniq(
@@ -509,17 +515,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(
     () =>
@@ -539,8 +545,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
@@ -563,7 +569,7 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
       .forEach((data) => {
         newFilter[data] = true;
       });
-    setfiltered(newFilter);
+    setFiltered(newFilter);
   };
 
   modalCallbackRef.current = () => {
@@ -590,7 +596,7 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
       });
     }
 
-    setchanged({ filter: false, sort: false });
+    setChanged({ filter: false, sort: false });
   };
 
   return (
@@ -602,8 +608,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}
         >
@@ -611,7 +617,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>
@@ -636,10 +641,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) => {
@@ -650,7 +655,7 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
                   });
                 } else {
                   // 将全部过滤
-                  setfiltered((old) => {
+                  setFiltered((old) => {
                     const newValue = {};
 
                     searchedFieldData.forEach((fieldValue) => {
@@ -662,7 +667,7 @@ const SortPopover = ({ fieldName, spreadsheet, modalCallbackRef }) => {
                 }
               }}
             >
-              {'全选'}
+              全选
             </Checkbox>
 
             {searchedFieldData.map((item, i) => {
@@ -672,8 +677,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,
                     }));
@@ -688,26 +693,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) => {
-    ReactDOM.render(<App data={res} />, document.getElementById('container'));
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<App data={res} />);
   });
 
-insertCss(`
-  .antv-s2-data-preview-demo-modal .filter-item{
+insertCSS(`
+  .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/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/kpi-strategy/demo/basic.tsx b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
index 1d1340fb07..8614a15e16 100644
--- a/s2-site/examples/case/kpi-strategy/demo/basic.tsx
+++ b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { merge } from 'lodash';
-import { DataCell, measureTextWidth, S2DataConfig, S2Theme } from '@antv/s2';
+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';
 
 // 进度条
@@ -36,12 +35,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;
 }
 
@@ -58,21 +60,27 @@ class KpiStrategyDataCell extends DataCell {
 
   // 如果是进度, 格式化为百分比 (只做 demo 示例, 请根据实际情况使用)
   getFormattedFieldValue() {
-    const { data } = this.meta;
+    const data = this.meta.data?.raw;
+
     if (!data || !data.isProgress) {
       return super.getFormattedFieldValue();
     }
+
     const formattedValue = `${data.value * 100} %`;
+
     return { formattedValue, value: data.value };
   }
 
   // 绘制衍生指标
   renderDeriveValue() {
     // 通过 this.meta 拿到当前单元格的有效信息
-    const { x, width, data } = this.meta;
+    const { x, width } = this.meta;
+    const data = this.meta.data?.raw;
+
     if (!data || data.isExtra) {
       return;
     }
+
     const value = data?.compare ?? '';
     const isDown = value.startsWith('-');
     const color = isDown ? DERIVE_COLOR.down : DERIVE_COLOR.up;
@@ -83,33 +91,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;
-    if (!data || !data.isProgress) {
+    const originData = this.meta.data?.raw;
+
+    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,
@@ -117,45 +129,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,
+        },
+      }),
+    );
   }
 }
 
@@ -197,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: {
@@ -205,7 +237,7 @@ fetch('https://assets.antv.antgroup.com/s2/kpi-strategy.json')
         },
       },
       interaction: {
-        selectedCellsSpotlight: true,
+        selectedCellsSpotlight: false,
         hoverHighlight: true,
       },
       // 默认数值挂列头, 会同时显示列头和数值, 隐藏数值列, 使其列头只展示日期, 更美观
@@ -238,15 +270,14 @@ fetch('https://assets.antv.antgroup.com/s2/kpi-strategy.json')
       },
     };
 
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         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..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 ReactDOM from 'react-dom';
 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',
@@ -15,19 +25,23 @@ fetch(
       width: 1200,
       height: 600,
       placeholder: '',
+      hierarchyType: 'tree',
+      cornerText: '指标',
       style: {
-        dataCell: {
+        rowCell: {
           height: 60,
         },
         colCell: {
-          widthByFieldValue: { 近14日趋势图: 300 },
+          width: (node) => {
+            return node?.value === '近14日趋势图' ? 300 : null;
+          },
         },
       },
       conditions: {
         text: [
           {
             mapping: (value, cellInfo) => {
-              const { colIndex } = cellInfo;
+              const { colIndex } = cellInfo || {};
               const isNilValue = isNil(value) || value === '';
 
               if (colIndex === 0 || isNilValue) {
@@ -35,6 +49,7 @@ fetch(
                   fill: '#000',
                 };
               }
+
               return {
                 fill: isUpDataValue(value) ? '#FF4D4F' : '#29A294',
               };
@@ -45,12 +60,13 @@ fetch(
           {
             position: 'right',
             mapping(value, cellInfo) {
-              const { colIndex } = cellInfo;
+              const { colIndex } = cellInfo || {};
               const isNilValue = isNil(value) || value === '';
 
               if (colIndex === 0 || isNilValue) {
                 return null;
               }
+
               return isUpDataValue(value)
                 ? {
                     // icon 用于指定图标条件格式所使用的 icon 类型
@@ -67,12 +83,17 @@ fetch(
       },
     };
 
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
-        dataCfg={s2DataCfg}
+        dataCfg={{
+          ...s2DataCfg,
+          fields: {
+            ...s2DataCfg.fields,
+            rows: process(s2DataCfg.fields.customTreeItems),
+          },
+        }}
         options={s2Options}
         sheetType="strategy"
       />,
-      document.getElementById('container'),
     );
   });
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/performance-compare/demo/basic.tsx b/s2-site/examples/case/performance-compare/demo/basic.tsx
index 250f590324..ea1d75afaf 100644
--- a/s2-site/examples/case/performance-compare/demo/basic.tsx
+++ b/s2-site/examples/case/performance-compare/demo/basic.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { compact } from 'lodash';
-import { SheetComponent } from '@antv/s2-react';
+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';
 
 const disableColor = '#d3d7d4';
 const colors = [
@@ -19,19 +19,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,9 +62,9 @@ function getDataConfig(rawData) {
   };
 }
 
-function getOptions(rawData) {
+function getOptions(rawData: S2DataConfig['data']): SheetComponentOptions {
   return {
-    width: 600,
+    width: 800, 
     height: 200,
     interaction: {
       selectedCellsSpotlight: false,
@@ -74,6 +76,7 @@ function getOptions(rawData) {
           field: 'value',
           mapping(fieldValue) {
             const index = getIndex(fieldValue, rawData);
+
             return {
               fill: fieldValue ? colors[index] : disableColor,
             };
@@ -84,10 +87,10 @@ function getOptions(rawData) {
   };
 }
 
-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) => {
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <div>
         <h3>1000 数据规模表格渲染时间对比</h3>
         <SheetComponent
@@ -108,6 +111,5 @@ fetch('https://assets.antv.antgroup.com/s2/compare.json')
           sheetType="pivot"
         />
       </div>,
-      document.getElementById('container'),
     );
   });
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..c34f16f141 100644
--- a/s2-site/examples/case/performance-compare/demo/table.tsx
+++ b/s2-site/examples/case/performance-compare/demo/table.tsx
@@ -1,13 +1,18 @@
-import { TableSheet } from '@antv/s2';
+import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
 
-const s2Options = {
+const s2Options: S2Options = {
   width: 600,
   height: 480,
-  showSeriesNumber: true,
+  seriesNumber: {
+    enable: 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 +36,7 @@ export function generateRawData(row, col) {
   return res;
 }
 
-const s2DataConfig = {
+const s2DataConfig: S2DataConfig = {
   fields: {
     columns: ['province', 'city', 'type', 'subType', 'number'],
   },
@@ -41,8 +46,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/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/case/proportion/demo/group-drill-down.tsx b/s2-site/examples/case/proportion/demo/group-drill-down.tsx
index 501d769dbd..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,7 +1,7 @@
-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 insertCSS from 'insert-css';
+import React from 'react';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -10,9 +10,9 @@ fetch(
   .then((res) => res.json())
   .then((data) => {
     const GridSheet = () => {
-      const [s2DataConfig, setS2DataConfig] = useState(data.dataCfg);
-      const [drillDownField, setDrillDownField] = useState('');
-      const s2Options = {
+      const [s2DataConfig, setS2DataConfig] = React.useState(data.dataCfg);
+      const [drillDownField, setDrillDownField] = React.useState('');
+      const s2Options: SheetComponentOptions = {
         width: 800,
         height: 600,
         tooltip: {
@@ -42,8 +42,9 @@ fetch(
                   };
                 }
 
+                // 同环比红张绿跌
                 return {
-                  fill: isUpDataValue(value) ? '#FF4D4F' : '#29A294', // 同环比红张绿跌
+                  fill: isUpDataValue(value) ? '#FF4D4F' : '#29A294',
                 };
               },
             },
@@ -144,18 +145,20 @@ fetch(
           sheetType="gridAnalysis"
           header={{
             title: '人群网络分析',
-            advancedSortCfg: { open: true },
-            extra: [<Breadcrumb />],
+            advancedSort: { open: true },
+            extra: <Breadcrumb />,
           }}
           onDataCellMouseUp={onDataCellMouseUp}
         />
       );
     };
 
-    ReactDOM.render(<GridSheet />, document.getElementById('container'));
+    reactDOMClient
+      .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 12e19c0fd2..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,9 +1,8 @@
-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 insertCSS from 'insert-css';
+import React from 'react';
 import '@antv/s2-react/dist/style.min.css';
-import { S2DataConfig, S2Options } from '@antv/s2';
 
 const PALETTE_COLORS = [
   {
@@ -117,7 +116,7 @@ fetch('https://assets.antv.antgroup.com/s2/single-population-proportion.json')
         },
       },
       interaction: {
-        selectedCellsSpotlight: true,
+        selectedCellsSpotlight: false,
         hoverHighlight: false,
       },
       style: {
@@ -155,7 +154,7 @@ fetch('https://assets.antv.antgroup.com/s2/single-population-proportion.json')
       },
     };
 
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <div className="root">
         <SheetComponent
           dataCfg={s2DataConfig}
@@ -168,11 +167,10 @@ fetch('https://assets.antv.antgroup.com/s2/single-population-proportion.json')
           }}
         />
       </div>,
-      document.getElementById('container'),
     );
   });
 
-insertCss(`
+insertCSS(`
   .root{
     display: inline-block;
   }
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..c322cb6289 100644
--- a/s2-site/examples/custom/custom-cell/demo/col-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/col-cell.ts
@@ -1,18 +1,31 @@
-import { PivotSheet, ColCell } from '@antv/s2';
+import { PivotSheet, ColCell, S2Options, S2DataConfig } from '@antv/s2';
+import { Image as GImage } from '@antv/g';
 
 /**
  * 自定义 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 {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
   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,
+          },
+        }),
+      );
+
+      this.drawTextShape();
+    };
   }
 }
 
@@ -20,9 +33,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 +44,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -41,8 +55,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..f316ddd8a5 100644
--- a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts
@@ -1,17 +1,30 @@
-import { PivotSheet, CornerCell } from '@antv/s2';
+import { PivotSheet, CornerCell, S2Options, S2DataConfig } from '@antv/s2';
+import { Image as GImage } from '@antv/g';
 
 /**
  * 自定义 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
+ * 明细表需要继承 TableCornerCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-corner-cell.ts
  */
 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,
+          },
+        }),
+      );
+
+      this.drawTextShape();
+    };
   }
 }
 
@@ -19,9 +32,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 +43,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -40,8 +54,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 4d65f8ea4f..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,10 +1,10 @@
-import { PivotSheet } from '@antv/s2';
-import { Group } from '@antv/g-canvas';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 import { get } from 'lodash';
+import { Image as GImage, Group, Text } from '@antv/g';
 
 /**
  * 自定义整个角头, 添加文字和背景色
- * 查看更多方法 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;
@@ -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',
+        },
+      }),
+    );
   }
 }
 
@@ -58,9 +68,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'],
@@ -69,7 +79,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       interaction: {
@@ -79,7 +90,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..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
@@ -1,14 +1,14 @@
-import { PivotSheet, MergedCell } from '@antv/s2';
+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 {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
   drawBackgroundShape() {
     super.drawBackgroundShape();
-    this.backgroundShape.attr('fill', 'red');
+    this.backgroundShape.style.fill = 'red';
   }
 }
 
@@ -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 ee24a885be..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
@@ -1,9 +1,18 @@
 /* eslint-disable max-classes-per-file */
-import { PivotSheet, DataCell, ColCell, CornerCell, RowCell } from '@antv/s2';
+import {
+  PivotSheet,
+  DataCell,
+  ColCell,
+  S2Options,
+  S2DataConfig,
+  CornerCell,
+  RowCell,
+} 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
+ * 明细表需要继承 TableDataCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts
  */
 class CustomDataCell extends DataCell {
   getBackgroundColor() {
@@ -63,7 +72,8 @@ 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 {
   getTextStyle() {
@@ -104,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() {
@@ -137,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() {
@@ -181,9 +191,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'],
@@ -192,7 +202,8 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       cornerCell: (node, spreadsheet, headerConfig) => {
@@ -208,7 +219,8 @@ fetch(
         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/custom-table-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts
index 7a3e822182..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
@@ -2,8 +2,8 @@
 import { TableColCell, TableDataCell, TableSheet } from '@antv/s2';
 
 /**
- * 自定义 DataCell，通过复写基类方法, 给特定单元格设置背景色, 文字大小, 颜色等...
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-data-cell.ts
+ * 自定义 TableDataCell，通过复写基类方法, 给特定单元格设置背景色, 文字大小, 颜色等...
+ * 查看更多方法 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() {
@@ -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);
       },
@@ -133,6 +135,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 41a6eaa656..0b4e022098 100644
--- a/s2-site/examples/custom/custom-cell/demo/data-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/data-cell.ts
@@ -1,18 +1,31 @@
-import { DataCell, PivotSheet } from '@antv/s2';
+import { PivotSheet, DataCell, S2DataConfig, S2Options } from '@antv/s2';
+import { Image as GImage } from '@antv/g';
 
 /**
  * 自定义 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
+ * 明细表需要继承 TableDataCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts
  */
 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,
+          },
+        }),
+      );
+
+      this.drawTextShape();
+    };
   }
 }
 
@@ -20,9 +33,9 @@ fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
 )
   .then((res) => res.json())
-  .then((res) => {
-    const container = document.getElementById('container')!;
-    const s2DataConfig = {
+  .then(async (res) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -32,17 +45,19 @@ fetch(
       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/meta.json b/s2-site/examples/custom/custom-cell/demo/meta.json
index 42b1f3d65f..4f5ce24aa2 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,15 +91,17 @@
         "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",
       "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"
+      "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..5ba23e29d2 100644
--- a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
+++ b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts
@@ -1,18 +1,21 @@
-import { PivotSheet, DataCell, drawObjectText } from '@antv/s2';
-import { isArray, isObject } from 'lodash';
+/* eslint-disable max-lines-per-function */
+import {
+  PivotSheet,
+  DataCell,
+  drawCustomContent,
+  S2DataConfig,
+  S2Options,
+} from '@antv/s2';
 
 /**
- * 自定义 DataCell，使用 drawObjectText 绘制简易的 mini 图
- * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts
+ * 自定义 DataCell，使用 drawCustomContent 绘制简易的 mini 图
+ * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
  */
 class CustomDataCell extends DataCell {
-  // 当数值为对象时，完全接管绘制, 使用内置的 `drawObjectText` 根据不同的数据结构 (见下方) 绘制不同的图形
+  // 当数值为对象时，完全接管绘制, 使用内置的 `drawCustomContent` 根据不同的数据结构 (见下方) 绘制不同的图形
   drawTextShape() {
-    const { fieldValue } = this.getMeta();
-
-    if (isObject(fieldValue) || isArray(fieldValue)) {
-      drawObjectText(this);
-      return;
+    if (this.isMultiData()) {
+      return drawCustomContent(this);
     }
 
     super.drawTextShape();
@@ -25,7 +28,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 +145,11 @@ fetch(
       ],
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 1000,
       height: 680,
       style: {
-        cellCfg: {
+        dataCell: {
           height: 40,
         },
       },
@@ -156,11 +159,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 +177,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 7cb553f2b5..151c241b6a 100644
--- a/s2-site/examples/custom/custom-cell/demo/row-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/row-cell.ts
@@ -1,18 +1,30 @@
-import { PivotSheet, RowCell } from '@antv/s2';
+import { PivotSheet, RowCell, S2DataConfig, S2Options } from '@antv/s2';
+import { Image as GImage } from '@antv/g';
 
 /**
  * 自定义 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 {
   // 覆盖背景绘制，可覆盖或者增加绘制方法
   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,
+          },
+        }),
+      );
+
+      this.drawTextShape();
+    };
   }
 }
 
@@ -20,9 +32,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 +43,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..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
@@ -8,16 +8,21 @@ 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
+ * 明细表需要继承 TableSeriesNumberCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-series-number-cell.ts
  */
 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 +37,8 @@ const layoutSeriesNumberNodes = (
       id: '',
       field: '',
       rowIndex: idx,
-      value: `${String.fromCharCode(97 + idx)}`, // 序号从 a 开始递增，在大量数据下，需要更完善的处理
+      // 序号从 a 开始递增，在大量数据下，需要更完善的处理
+      value: `${String.fromCharCode(97 + idx)}`,
     });
 
     sNode.x = 0;
@@ -48,7 +54,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 +65,22 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
+
     const s2Options: S2Options = {
       width: 600,
       height: 480,
-      hierarchyType: 'tree', // 切换到 grid 模式试试看
-      showSeriesNumber: true,
+      // 切换到 grid 模式试试看
+      hierarchyType: 'tree',
+      seriesNumber: {
+        enable: 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 99cced08ea..5b6783530e 100644
--- a/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
+++ b/s2-site/examples/custom/custom-cell/demo/totals-cell.ts
@@ -1,8 +1,14 @@
-import { PivotSheet, RowCell, renderRect } from '@antv/s2';
+import {
+  PivotSheet,
+  RowCell,
+  S2DataConfig,
+  S2Options,
+  renderRect,
+} from '@antv/s2';
 
 /**
  * 继承 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 {
   // 背景色
@@ -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-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..52a02aec44
--- /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,
+  drawCustomContent,
+  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/next/packages/s2-core/src/cell/data-cell.ts
+ */
+class CustomDataCell extends DataCell {
+  drawTextShape() {
+    if (this.isMultiData()) {
+      return drawCustomContent(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-g2-chart/demo/custom-g2-chart.ts b/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts
index 7a8b264344..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: '纸张',
     },
     {
@@ -120,24 +213,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-g2-chart/demo/meta.json b/s2-site/examples/custom/custom-g2-chart/demo/meta.json
index 405e95210b..cb47a4c03a 100644
--- a/s2-site/examples/custom/custom-g2-chart/demo/meta.json
+++ b/s2-site/examples/custom/custom-g2-chart/demo/meta.json
@@ -1,16 +1,17 @@
 {
   "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*y9mfQqk9XwYAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A9oWSbAfHu4AAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
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
 ---
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 89%
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
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.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: {
@@ -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-header-action-icon.tsx b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
index 2027dd65b8..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 ReactDOM from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -103,8 +102,7 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent dataCfg={dataCfg} options={s2Options} />,
-      document.getElementById('container'),
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<SheetComponent dataCfg={dataCfg} options={s2Options} />);
   });
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..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
@@ -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,14 +15,21 @@ fetch(
       meta: res.meta,
       data: res.data,
     };
-    const s2Options = {
+
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       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',
         },
       ],
@@ -34,8 +41,8 @@ fetch(
         },
       ],
     };
+
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
-    s2.render();
+    await s2.render();
   });
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/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..9860947209
--- /dev/null
+++ b/s2-site/examples/custom/custom-layout/demo/custom-facet.ts
@@ -0,0 +1,113 @@
+import {
+  Hierarchy,
+  LayoutResult,
+  Node,
+  PivotSheet,
+  S2DataConfig,
+  S2Options,
+  PivotFacet,
+} from '@antv/s2';
+
+// TODO: 目前没有导出 PivotFacet
+/**
+ * 自定义 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.getColNodeHeight(colNode, colsHierarchy);
+
+    return 100;
+  }
+
+  // 自定义行头节点坐标
+  calculateRowNodesCoordinate(layoutResult: LayoutResult) {
+    super.calculateRowNodesCoordinate(layoutResult);
+    // 你的自定义逻辑...
+  }
+
+  // 自定义列头节点坐标
+  calculateColNodesCoordinate(layoutResult: LayoutResult) {
+    super.calculateColNodesCoordinate(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',
+)
+  .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-layout-arrange.ts b/s2-site/examples/custom/custom-layout/demo/custom-layout-arrange.ts
index 28959d0dc0..5d728e30ed 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'],
@@ -37,7 +37,7 @@ fetch(
       ],
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       layoutArrange: (s2, parent, field, fieldValues) => {
@@ -46,13 +46,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-data-position.ts b/s2-site/examples/custom/custom-layout/demo/custom-layout-cell-meta.ts
similarity index 97%
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
index 9be34b1bb0..66df70b31d 100644
--- 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
@@ -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: {
@@ -70,7 +70,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-coordinate.ts b/s2-site/examples/custom/custom-layout/demo/custom-layout-coordinate.ts
similarity index 70%
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 dd646652bc..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
@@ -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'],
@@ -41,16 +41,18 @@ 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;
+          rowNode.x += 10;
         }
       },
     };
+
     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 e9a5c8ab19..cd0bf80b7e 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'],
@@ -69,13 +75,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';
@@ -87,14 +94,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 {
@@ -103,10 +110,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 1bd014dc1c..2df4a2f390 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'],
@@ -40,12 +40,12 @@ fetch(
       ],
     };
 
-    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-layout/demo/meta.json b/s2-site/examples/custom/custom-layout/demo/meta.json
index d8c0202cab..ec03c670c8 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": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Nz1qTYoOA-kAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
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..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,6 +1,6 @@
 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 +10,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 +71,7 @@ const App = () => {
   const [sortParams, setSortParams] = useState([]);
 
   // 设置自定义 `icon` 的展示条件
-  const headerActionIcons = [
+  const headerActionIcons: SheetComponentOptions['headerActionIcons'] = [
     {
       // 选择icon,可以是 S2 自带的，也可以是自定义的 icon
       icons: ['customKingIcon'],
@@ -80,7 +81,7 @@ const App = () => {
       // icon 点击之后的执行函数
       onClick: (props) => {
         const { meta, event } = props;
-        const operator = {
+        const operator: TooltipOptions['operator'] = {
           menu: {
             onClick: ({ key }) => {
               handleSortCallback(meta, key);
@@ -101,7 +102,7 @@ const App = () => {
   ];
 
   // 执行自定义排序回调
-  const handleSortCallback = (meta, key) => {
+  const handleSortCallback = (meta: Node, key: string) => {
     if (key === SortMethodType.custom) {
       const sortParams = [
         { sortFieldId: 'type', sortBy: ['办公用品', '家具'] },
@@ -124,5 +125,4 @@ const App = () => {
   );
 };
 
-// 使用
-ReactDOM.render(<App />, document.getElementById('container'));
+reactDOMClient.createRoot(document.getElementById('container')).render(<App />);
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
 ---
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 84%
rename from s2-site/examples/custom/custom-plugins/demo/custom-plugins.ts
rename to s2-site/examples/custom/custom-plugins/demo/a11y.ts
index fb7f25bee5..797af5ded9 100644
--- a/s2-site/examples/custom/custom-plugins/demo/custom-plugins.ts
+++ b/s2-site/examples/custom/custom-plugins/demo/a11y.ts
@@ -1,14 +1,13 @@
-import { PivotSheet, S2Options } from '@antv/s2';
-import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';
+import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 import { Plugin as PluginA11y } from '@antv/g-plugin-a11y';
 
 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'],
@@ -50,7 +49,7 @@ fetch(
         },
       },
       transformCanvasConfig(renderer) {
-        renderer.registerPlugin(new PluginRoughCanvasRenderer());
+        // 试试使用浏览器的搜索
         renderer.registerPlugin(
           new PluginA11y({
             enableExtractingText: true,
@@ -73,5 +72,5 @@ fetch(
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/custom/custom-plugins/demo/meta.json b/s2-site/examples/custom/custom-plugins/demo/meta.json
index eaa3596197..4a52116366 100644
--- a/s2-site/examples/custom/custom-plugins/demo/meta.json
+++ b/s2-site/examples/custom/custom-plugins/demo/meta.json
@@ -5,12 +5,22 @@
   },
   "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*Ag6SSYgDpeYAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HIhnRq9EqIwAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
+    },
+    {
+      "filename": "rough.ts",
+      "title": {
+        "zh": "手绘风格",
+        "en": "rough"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ag6SSYgDpeYAAAAAAAAAAAAADmJ7AQ/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
new file mode 100644
index 0000000000..8b06b883cd
--- /dev/null
+++ b/s2-site/examples/custom/custom-plugins/demo/rough.ts
@@ -0,0 +1,74 @@
+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();
+  });
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/custom-tree-link-jump.ts b/s2-site/examples/interaction/advanced/demo/custom-tree-link-jump.ts
index d869262b5d..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,14 +1,25 @@
-import { S2Event, PivotSheet } from '@antv/s2';
+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',
 )
   .then((res) => res.json())
-  .then((res) => {
+  .then(async (res) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
-        rows: [],
+        rows: process(res.customTreeItem),
         columns: ['type', 'sub_type'],
         values: [
           'measure-a',
@@ -18,15 +29,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 +54,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/intercepts.ts b/s2-site/examples/interaction/advanced/demo/intercepts.ts
new file mode 100644
index 0000000000..4763420c79
--- /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/merge-cell.ts b/s2-site/examples/interaction/advanced/demo/merge-cell.ts
index 3920c71ab9..ee8c4e873e 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 insertCss from 'insert-css';
+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,29 @@ 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,16 +68,17 @@ 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(`
+insertCSS(`
   .merge-cells-button {
     border: 1px solid transparent;
     box-shadow: 0 2px #00000004;
diff --git a/s2-site/examples/interaction/advanced/demo/meta.json b/s2-site/examples/interaction/advanced/demo/meta.json
index bdc80aaa85..19351fd460 100644
--- a/s2-site/examples/interaction/advanced/demo/meta.json
+++ b/s2-site/examples/interaction/advanced/demo/meta.json
@@ -109,20 +109,13 @@
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/JRAt1kb93/Kapture%2525202022-06-06%252520at%25252011.28.43.gif"
     },
     {
-      "filename": "frozen-pivot-grid.ts",
+      "filename": "intercepts.ts",
       "title": {
-        "zh": "透视表 - 平铺模式冻结首行",
-        "en": "pivot mode freezes head rows"
+        "zh": "屏蔽交互事件",
+        "en": "Interaction Intercepts"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ge0_S5iMB-wAAAAAAAAAAAAADmJ7AQ/original"
-    },
-    {
-      "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"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*XpoiQbJ0kugAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }
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 91ca338ad8..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 } from '@antv/s2';
+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';
@@ -32,16 +36,16 @@ 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: {
-        // 透视表默认隐藏需要指定唯一列头id
-        // 可通过 `s2.facet.getColCellNodes()` 获取列头节点查看id
-        hiddenColumnFields: ['root[&]家具[&]沙发[&]number'],
+        // 透视表默认隐藏需要指定唯一列头 id
+        // 可通过 `s2.facet.getColNodes()` 获取列头节点查看i d
+        hiddenColumnFields: ['root[&]家具[&]沙发[&]数量'],
       },
       tooltip: {
         enable: true,
@@ -52,6 +56,7 @@ fetch(
         content: getTooltipContent,
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
     s2.on(S2Event.COL_CELL_EXPANDED, (cell) => {
@@ -64,5 +69,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..d027f1a753 100644
--- a/s2-site/examples/interaction/advanced/demo/resize-active.ts
+++ b/s2-site/examples/interaction/advanced/demo/resize-active.ts
@@ -1,12 +1,12 @@
-import { PivotSheet } from '@antv/s2';
-import insertCss from 'insert-css';
+import { PivotSheet, S2Options, SpreadSheet } from '@antv/s2';
+import insertCSS from 'insert-css';
 
-function createRadioGroup(s2) {
+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');
 
@@ -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];
+      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,12 +64,19 @@ fetch(
 
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render().then(() => {
-      createRadioGroup(s2);
+    // 这里默认将热区显示, 仅供演示使用, 请勿无脑复制.
+    s2.setTheme({
+      resizeArea: {
+        backgroundOpacity: 1,
+      },
     });
+
+    await s2.render();
+
+    createRadioGroup(s2);
   });
 
-insertCss(`
+insertCSS(`
   input[type='radio'] {
     margin-bottom: 20px;
     margin-right: 4px;
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..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 } from '@antv/s2';
-import insertCss from 'insert-css';
+import { PivotSheet, S2Event, S2Options } from '@antv/s2';
+import insertCSS from 'insert-css';
 
 // 每次滚动的距离
 const STEP = 50;
@@ -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,12 +90,12 @@ fetch(
       clearInterval(timer);
     });
 
-    s2.render().then(() => {
-      addScrollButton(s2);
-    });
+    await s2.render();
+
+    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 f0e1fa9679..2c9b6c0642 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';
+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://render.alipay.com/p/yuyan/180020010001215413/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://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 300,
       interaction: {
@@ -77,12 +79,12 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render().then(() => {
-      createSlider(s2);
-    });
+    await s2.render();
+
+    createSlider(s2);
   });
 
-insertCss(`
+insertCSS(`
   input[type='range'] {
     display: block;
     width: 300px;
@@ -118,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/advanced/demo/scroll-to-cell.ts b/s2-site/examples/interaction/advanced/demo/scroll-to-cell.ts
index ee938ed1bc..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,8 +1,9 @@
 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');
+
   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,16 +81,17 @@ 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(`
+insertCSS(`
   #container > canvas {
     margin-top: 10px;
   }
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 332911c0fe..ff868e8b35 100644
--- a/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts
+++ b/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts
@@ -1,7 +1,16 @@
 /* eslint-disable no-console */
-import { TableSheet, S2Event, S2Options, S2DataConfig } from '@antv/s2';
+import {
+  TableSheet,
+  S2Event,
+  S2Options,
+  S2DataConfig,
+  SpreadSheet,
+  S2CellType,
+  TooltipShowOptions,
+} from '@antv/s2';
+import '@antv/s2/dist/style.min.css';
 
-function hideSelectedColumns(s2) {
+function hideSelectedColumns(s2: SpreadSheet) {
   // 兼容多选
   const selectedColumnNodes = s2.interaction
     .getActiveCells()
@@ -12,10 +21,11 @@ function hideSelectedColumns(s2) {
   s2.interaction.hideColumns(selectedColumnFields, true);
 }
 
-function getTooltipContent(cell, options) {
+// 使用 `@antv/s2` tooltip 的 ui 需要自己封装, `@antv/s2-react` 已经内置.
+function getTooltipContent(cell: S2CellType, options: TooltipShowOptions) {
   const { spreadsheet, isLeaf } = cell.getMeta();
 
-  if (!isLeaf || !spreadsheet.options.tooltip.operation.hiddenColumns) {
+  if (!isLeaf || !spreadsheet.options.tooltip?.operation?.hiddenColumns) {
     return null;
   }
 
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..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,10 +1,10 @@
-import { 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())
-  .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..473bfa8948 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 = {
@@ -19,17 +19,15 @@ fetch(
           colCell: true,
         },
         // 圈选功能 + 复制功能开启后，可以通过使用快捷键 `command/ctrl + c` 即可复制选中区域（局部复制）
-        enableCopy: true,
+        copy: { enable: true },
       },
       style: {
-        cellCfg: {
+        dataCell: {
           height: 100,
         },
       },
-      tooltip: {
-        enable: true,
-      },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
     // 可以监听各自单元格区域的刷选事件
@@ -48,5 +46,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..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');
 
     // 支持滚动圈选, 试试圈选时鼠标向下
@@ -19,19 +19,17 @@ fetch(
         // brushSelection: false,
       },
       style: {
-        cellCfg: {
+        dataCell: {
           height: 100,
         },
       },
-      tooltip: {
-        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/copy-export.ts b/s2-site/examples/interaction/basic/demo/copy-export.ts
new file mode 100644
index 0000000000..2d44506a51
--- /dev/null
+++ b/s2-site/examples/interaction/basic/demo/copy-export.ts
@@ -0,0 +1,135 @@
+/* eslint-disable no-console */
+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 addButtons(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: {
+        copy: {
+          // 允许复制
+          enable: true,
+          // 是否携带行列头数据
+          withHeader: true,
+          // 是否使用格式化数据
+          withFormat: true,
+        },
+        // 刷选
+        brushSelection: {
+          rowCell: true,
+          colCell: true,
+          dataCell: true,
+        },
+        // 多选
+        multiSelection: true,
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    s2.on(S2Event.GLOBAL_COPIED, (data) => {
+      console.log('局部复制数据', data);
+    });
+
+    await s2.render();
+
+    addButtons(s2);
+  });
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..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
@@ -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 = {
@@ -17,15 +17,13 @@ fetch(
         // 多选 (按住 Ctrl/Command), 默认开启
         multiSelection: true,
       },
-      tooltip: {
-        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..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
@@ -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 选中另一个单元格
@@ -17,10 +17,8 @@ fetch(
         // 区间多选 (按住 Shift), 默认开启
         rangeSelection: true,
       },
-      tooltip: {
-        enable: true,
-      },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
     // 也可以监听全局的选中事件
@@ -28,5 +26,5 @@ fetch(
       console.log('selected', cells);
     });
 
-    s2.render();
+    await s2.render();
   });
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..a3e82408c3
--- /dev/null
+++ b/s2-site/examples/interaction/basic/demo/event.ts
@@ -0,0 +1,164 @@
+/* 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',
+)
+  .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: {
+        copy: { enable: true },
+        hoverHighlight: true,
+        brushSelection: true,
+        multiSelection: true,
+        selectedCellHighlight: true,
+        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
+        // }
+      },
+    };
+
+    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();
+
+    addButtons(s2);
+  });
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..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
@@ -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) 对行列头进行多选
@@ -18,9 +18,6 @@ fetch(
         // 多选 (按住 Ctrl/Command), 默认开启
         multiSelection: true,
       },
-      tooltip: {
-        enable: true,
-      },
     };
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
@@ -29,5 +26,5 @@ fetch(
       console.log('selected', cells);
     });
 
-    s2.render();
+    await s2.render();
   });
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 761c274f9b..7a3f6931a1 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 = {
@@ -21,11 +21,9 @@ fetch(
         //   currentCol = true, // 高亮悬停格子所在列
         // },
       },
-      tooltip: {
-        enable: true,
-      },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    await s2.render();
   });
diff --git a/s2-site/examples/interaction/basic/demo/meta.json b/s2-site/examples/interaction/basic/demo/meta.json
index 3be5a6e3d1..42631712bb 100644
--- a/s2-site/examples/interaction/basic/demo/meta.json
+++ b/s2-site/examples/interaction/basic/demo/meta.json
@@ -55,26 +55,10 @@
     {
       "filename": "resize.ts",
       "title": {
-        "zh": "行高列宽调整",
+        "zh": "行列宽高调整",
         "en": "Resize Height And Width"
       },
-      "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"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WdvmQ5pd4BwAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
       "filename": "auto-reset-sheet-style.ts",
@@ -92,13 +76,50 @@
       },
       "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": {
+        "zh": "复制与导出",
+        "en": "Copy and export"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*LzTYTpFosccAAAAAAAAAAAAAARQnAQ",
+      "new": true
+    },
     {
       "filename": "state-theme.ts",
       "title": {
         "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
+    },
+    {
+      "filename": "event.ts",
+      "title": {
+        "zh": "交互事件监听和 API",
+        "en": "Interaction Event Listener"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/a6zSe1gvvy/f97ed6ec-0a5d-49b7-8492-754611d0aea6.png",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/examples/interaction/basic/demo/resize.ts b/s2-site/examples/interaction/basic/demo/resize.ts
index 9d0dfe0d8d..f3144044e9 100644
--- a/s2-site/examples/interaction/basic/demo/resize.ts
+++ b/s2-site/examples/interaction/basic/demo/resize.ts
@@ -1,10 +1,10 @@
-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',
 )
   .then((res) => res.json())
-  .then((dataCfg) => {
+  .then(async (dataCfg) => {
     const container = document.getElementById('container');
 
     const s2Options: S2Options = {
@@ -12,13 +12,46 @@ fetch(
       height: 480,
       interaction: {
         hoverHighlight: true,
-        selectedCellsSpotlight: true, // highlight selection
-      },
-      tooltip: {
-        enable: true,
+        // resize: true,
+        resize: {
+          // 热区是否展示
+          visible: (cell) => true,
+          // 是否禁用拖拽
+          disable: (resizeInfo) => {
+            return resizeInfo.meta.id === 'root[&]家具[&]桌子[&]数量';
+          },
+          // 行高调整时，影响全部行
+          rowResizeType: ResizeType.ALL,
+          // 列宽调整时，只影响当前列
+          colResizeType: ResizeType.CURRENT,
+          // 单元格可拖拽最小宽度
+          minCellWidth: 20,
+          // 单元格可拖拽最小高度
+          minCellHeight: 20,
+        },
       },
     };
+
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
-    s2.render();
+    // 支持通过调整主题修改热区大小/颜色
+    s2.setTheme({
+      resizeArea: {
+        // 这里默认将热区显示, 仅供演示使用, 请勿无脑复制.
+        backgroundOpacity: 1,
+
+        // 热区大小
+        size: 3,
+        // 热区背景色
+        background: '#326EF4',
+        // 拖拽参考线颜色
+        guideLineColor: '#326EF4',
+        // 拖拽参考线禁用颜色
+        guideLineDisableColor: 'rgba(0,0,0,0.25)',
+        //  参考线间隔
+        guideLineDash: [3, 3],
+      },
+    });
+
+    await s2.render();
   });
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();
+  });
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/interaction/custom/demo/double-click-hide-columns.ts b/s2-site/examples/interaction/custom/demo/double-click-hide-columns.ts
index dbcc4ea574..58909ff01b 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://render.alipay.com/p/yuyan/180020010001215413/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'],
       },
@@ -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..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 } from '@antv/s2';
+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,
@@ -31,10 +32,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 +53,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 8133f86da9..1b94c92550 100644
--- a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
+++ b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx
@@ -1,18 +1,17 @@
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
 
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={dataCfg}
         options={s2Options}
@@ -22,6 +21,5 @@ fetch(
           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/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/layout/basic/demo/colAdaptive.ts b/s2-site/examples/layout/basic/demo/colAdaptive.ts
index 6c37ca45da..68b103254b 100644
--- a/s2-site/examples/layout/basic/demo/colAdaptive.ts
+++ b/s2-site/examples/layout/basic/demo/colAdaptive.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: {
@@ -15,7 +15,8 @@ fetch(
         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 408058793c..ff25dbb293 100644
--- a/s2-site/examples/layout/basic/demo/compact.ts
+++ b/s2-site/examples/layout/basic/demo/compact.ts
@@ -1,10 +1,10 @@
-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) => {
     // 增加几条长度不一致的 mock 数据
     dataCfg.data.at(0).number = 11111111;
     dataCfg.data.at(6).number = 7777;
@@ -12,7 +12,7 @@ fetch(
 
     const container = document.getElementById('container');
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       style: {
@@ -32,5 +32,5 @@ fetch(
       },
     });
 
-    s2.render();
+    await s2.render();
   });
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 94%
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
index c8b1c76e9f..d74952d7be 100644
--- 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
@@ -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/layout/custom-header-group/demo/custom-pivot-row-header.ts
similarity index 95%
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
index a04033c25f..5d8e310dcb 100644
--- 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
@@ -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/layout/custom-header-group/demo/custom-table-col-header.ts
similarity index 92%
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
index fc227343ec..312f71a21b 100644
--- 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
@@ -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: {
@@ -48,10 +48,12 @@ 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);
 
-    s2.render();
+    await s2.render();
   });
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 94%
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
index 5086bfe421..61a96b3396 100644
--- a/s2-site/examples/custom/custom-tree/demo/custom-tree.ts
+++ b/s2-site/examples/layout/custom-header-group/demo/custom-tree.ts
@@ -4,7 +4,7 @@ fetch(
   'https://render.alipay.com/p/yuyan/180020010001215413/s2/custom-tree.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/custom/custom-tree/demo/meta.json b/s2-site/examples/layout/custom-header-group/demo/meta.json
similarity index 77%
rename from s2-site/examples/custom/custom-tree/demo/meta.json
rename to s2-site/examples/layout/custom-header-group/demo/meta.json
index d42b8d48b1..50245620b7 100644
--- a/s2-site/examples/custom/custom-tree/demo/meta.json
+++ b/s2-site/examples/layout/custom-header-group/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/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-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..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
@@ -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
@@ -17,18 +17,20 @@ fetch(
           // 固定配置: 行头单元格 100px
           // width: 100,
           // 动态配置: 叶子节点 300px, 非叶子节点 200px
-          width: (row) => {
-            console.log('row: ', row);
-            return row.isLeaf ? 300 : 200;
+          width: (node) => {
+            console.log('rowNode: ', node);
+
+            return node?.isLeaf ? 300 : 200;
           },
         },
         colCell: {
           // 固定配置: 每列 100px
           // width: 100,
           // 动态配置: 偶数列 100px, 奇数列 200px
-          width: (col) => {
-            console.log('col: ', col);
-            return col.colIndex % 2 === 0 ? 100 : 200;
+          width: (node) => {
+            console.log('colNode: ', node);
+
+            return node?.colIndex % 2 === 0 ? 100 : 200;
           },
         },
         dataCell: {
@@ -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 e633941010..4414267c0e 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://render.alipay.com/p/yuyan/180020010001215413/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 = {
@@ -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,
@@ -57,7 +58,8 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/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..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
@@ -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 = {
@@ -13,21 +13,22 @@ 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,
         },
       },
     };
 
     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..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
@@ -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
@@ -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,
@@ -20,5 +26,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 813dff20f9..8602b699e7 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://render.alipay.com/p/yuyan/180020010001215413/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://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
       style: {
@@ -42,7 +42,15 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
         },
       },
     };
+
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.render();
+    // 默认列头有一条分割线, 如果不需要的话将分割线的透明度设置为 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 0439fb10bf..5d0224a36e 100644
--- a/s2-site/examples/layout/custom/demo/hide-value.ts
+++ b/s2-site/examples/layout/custom/demo/hide-value.ts
@@ -3,13 +3,13 @@ import { PivotSheet } from '@antv/s2';
 
 fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
   .then((res) => res.json())
-  .then((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
     const s2DataConfig: S2DataConfig = {
       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,
     };
@@ -40,13 +36,14 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/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/meta.json b/s2-site/examples/layout/custom/demo/meta.json
index 6859d445e3..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",
@@ -67,6 +69,15 @@
         "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",
+      "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
new file mode 100644
index 0000000000..ea91c58921
--- /dev/null
+++ b/s2-site/examples/layout/custom/demo/multi-line-text.ts
@@ -0,0 +1,109 @@
+import {
+  CellTextWordWrapStyle,
+  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 cellTextWordWrapStyle: CellTextWordWrapStyle = {
+      // 最大行数，文本超出后将被截断
+      maxLines: 2,
+      // 文本是否换行
+      wordWrap: true,
+      // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
+      textOverflow: 'ellipsis',
+    };
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      seriesNumber: {
+        enable: true,
+        text: '序号序号序号序号序号序号',
+      },
+      tooltip: {
+        enable: true,
+        content: (cell) => {
+          const text = cell.getOriginalText();
+          const span = document.createElement('span');
+
+          span.innerHTML = text;
+
+          return span;
+        },
+      },
+      // 如果有省略号, 复制到的是完整文本
+      interaction: {
+        copy: {
+          enable: true,
+          withFormat: true,
+          withHeader: true,
+        },
+        brushSelection: {
+          dataCell: true,
+          rowCell: true,
+          colCell: true,
+        },
+      },
+      style: {
+        seriesNumberCell: cellTextWordWrapStyle,
+        colCell: cellTextWordWrapStyle,
+        cornerCell: cellTextWordWrapStyle,
+        rowCell: {
+          ...cellTextWordWrapStyle,
+          height: 50,
+        },
+        // 数值不建议换行, 容易产生歧义
+        // dataCell: cellTheme,
+      },
+    };
+
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    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 f7736f8f8b..b8c1107006 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://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json001215413-dev-S09001736318/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://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json0012154
       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/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 73%
rename from s2-site/examples/interaction/basic/demo/frozen.ts
rename to s2-site/examples/layout/frozen/demo/table-frozen.ts
index a3579c7b0c..36daa3c266 100644
--- a/s2-site/examples/interaction/basic/demo/frozen.ts
+++ b/s2-site/examples/layout/frozen/demo/table-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 = {
@@ -33,16 +33,22 @@ 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, // 行头冻结数量
-        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/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
+---
diff --git a/s2-site/examples/react-component/drill-down/demo/basic-panel.tsx b/s2-site/examples/react-component/drill-down/demo/basic-panel.tsx
index a73c458ba4..231e981aea 100644
--- a/s2-site/examples/react-component/drill-down/demo/basic-panel.tsx
+++ b/s2-site/examples/react-component/drill-down/demo/basic-panel.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { DrillDown } from '@antv/s2-react';
 
 const disabledFields = ['name'];
@@ -28,11 +27,12 @@ const dataSet = [
   },
 ];
 
-ReactDOM.render(
-  <DrillDown
-    disabledFields={disabledFields}
-    clearButtonText={clearButtonText}
-    dataSet={dataSet}
-  />,
-  document.getElementById('container'),
-);
+reactDOMClient
+  .createRoot(document.getElementById('container'))
+  .render(
+    <DrillDown
+      disabledFields={disabledFields}
+      clearButtonText={clearButtonText}
+      dataSet={dataSet}
+    />,
+  );
diff --git a/s2-site/examples/react-component/drill-down/demo/for-pivot.tsx b/s2-site/examples/react-component/drill-down/demo/for-pivot.tsx
index 51151fe1d8..bf581d7b6c 100644
--- a/s2-site/examples/react-component/drill-down/demo/for-pivot.tsx
+++ b/s2-site/examples/react-component/drill-down/demo/for-pivot.tsx
@@ -1,20 +1,24 @@
 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 +30,7 @@ fetch(
 
     const sex = ['男', '女'];
 
-    const PartDrillDown = {
+    const PartDrillDown: SheetComponentsProps['partDrillDown'] = {
       drillConfig: {
         dataSet: [
           {
@@ -36,7 +40,6 @@ fetch(
           },
         ],
       },
-
       fetchData: (meta, drillFields) =>
         new Promise((resolve) => {
           const dataSet = meta.spreadsheet.dataSet;
@@ -77,13 +80,14 @@ fetch(
         }),
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        dataCfg={s2DataConfig}
-        options={s2Options}
-        partDrillDown={PartDrillDown}
-        adaptive={false}
-      />,
-      document.getElementById('container'),
-    );
+    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 10968b7cb7..00dd4b79f4 100644
--- a/s2-site/examples/react-component/export/demo/export.tsx
+++ b/s2-site/examples/react-component/export/demo/export.tsx
@@ -1,22 +1,22 @@
 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: {
-        enableCopy: true,
+        copy: { enable: true },
       },
     };
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type', 'sub_type'],
@@ -26,17 +26,16 @@ fetch(
       data: res.data,
     };
 
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
         header={{
-          exportCfg: {
+          export: {
             open: true,
           },
         }}
         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..865fe32328 100644
--- a/s2-site/examples/react-component/header/demo/default.tsx
+++ b/s2-site/examples/react-component/header/demo/default.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import insertCss from 'insert-css';
+import insertCSS from 'insert-css';
 import { Button } from 'antd';
 import {
   SheetComponent,
@@ -19,7 +18,7 @@ fetch(
       width: 600,
       height: 480,
       interaction: {
-        enableCopy: true,
+        copy: { enable: true },
       },
     };
 
@@ -39,8 +38,8 @@ fetch(
       const header: SheetComponentsProps['header'] = {
         title: '表头标题',
         description: '表头描述',
-        exportCfg: { open: true },
-        advancedSortCfg: {
+        export: { open: true },
+        advancedSort: {
           open: true,
           sortParams,
           onSortConfirm: (ruleValues, sortParams) => {
@@ -48,7 +47,7 @@ fetch(
             setSortParams(sortParams);
           },
         },
-        switcherCfg: { open: true },
+        switcher: { open: true },
         extra: (
           <Button size={'small'} style={{ verticalAlign: 'top' }}>
             自定义按钮
@@ -66,10 +65,12 @@ fetch(
       );
     };
 
-    ReactDOM.render(<SheetHeader />, document.getElementById('container'));
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(<SheetHeader />);
   });
 
-insertCss(`
+insertCSS(`
   .antv-s2-header {
     margin:0px !important;
   }
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/pagination/demo/pivot.tsx b/s2-site/examples/react-component/pagination/demo/pivot.tsx
index 55b7ed706b..786a1540be 100644
--- a/s2-site/examples/react-component/pagination/demo/pivot.tsx
+++ b/s2-site/examples/react-component/pagination/demo/pivot.tsx
@@ -1,6 +1,5 @@
 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 +7,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
       pagination: {
@@ -18,8 +17,9 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent dataCfg={dataCfg} options={s2Options} showPagination />,
-      document.getElementById('container'),
-    );
+    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 35d0c51028..8d4d9f1441 100644
--- a/s2-site/examples/react-component/pagination/demo/table.tsx
+++ b/s2-site/examples/react-component/pagination/demo/table.tsx
@@ -1,12 +1,12 @@
 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 +15,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       },
     };
 
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: ['province', 'city', 'type', 'price', 'cost'],
       },
@@ -44,7 +44,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       data: res,
     };
 
-    ReactDOM.render(
+    reactDOMClient.createRoot(document.getElementById('container')).render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
@@ -58,6 +58,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 c47d623562..ce76fd1100 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 ReactDOM from 'react-dom';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())
@@ -38,12 +37,18 @@ 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, // 行头冻结数量
-        colCount: 1, // 列头冻结数量
-        trailingRowCount: 1, // 行尾冻结数量
-        trailingColCount: 1, // 列尾冻结数量
+        // 行头冻结数量
+        rowCount: 1,
+        // 列头冻结数量
+        colCount: 1,
+        // 行尾冻结数量
+        trailingRowCount: 1,
+        // 列尾冻结数量
+        trailingColCount: 1,
       },
     };
 
@@ -51,13 +56,14 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       console.log('onDataCellEditEnd', meta);
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        dataCfg={s2DataConfig}
-        options={s2Options}
-        sheetType="editable"
-        onDataCellEditEnd={onDataCellEditEnd}
-      />,
-      document.getElementById('container'),
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          dataCfg={s2DataConfig}
+          options={s2Options}
+          sheetType="editable"
+          onDataCellEditEnd={onDataCellEditEnd}
+        />,
+      );
   });
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/mobile-pivot.tsx b/s2-site/examples/react-component/sheet/demo/mobile-pivot.tsx
index 6d9295d48d..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 ReactDOM from 'react-dom';
+
 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(
-      <MobileSheet dataCfg={dataCfg} />,
-      document.getElementById('container'),
-    );
+    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 d29caddd33..a295bb7751 100644
--- a/s2-site/examples/react-component/sheet/demo/pivot.tsx
+++ b/s2-site/examples/react-component/sheet/demo/pivot.tsx
@@ -1,6 +1,5 @@
 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,13 +7,12 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
 
-    ReactDOM.render(
-      <SheetComponent dataCfg={dataCfg} options={s2Options} />,
-      document.getElementById('container'),
-    );
+    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 6036db5ba3..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,18 @@
-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 React from 'react';
+
+// 临时处理老数据格式
+function process(children) {
+  return children.map((item) => {
+    return {
+      ...item,
+      field: item.key,
+      children: process(item.children),
+    };
+  });
+}
 
 /**
  * 该示例为 React 版本的趋势分析表
@@ -13,22 +24,32 @@ 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,
       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',
               };
@@ -45,12 +66,13 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        dataCfg={dataCfg}
-        options={s2Options}
-        sheetType="strategy"
-      />,
-      document.getElementById('container'),
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          dataCfg={s2DataConfig}
+          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 6032ba1813..fa24439b5a 100644
--- a/s2-site/examples/react-component/sheet/demo/strategy.tsx
+++ b/s2-site/examples/react-component/sheet/demo/strategy.tsx
@@ -1,8 +1,7 @@
-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';
 
 // 临时处理老数据格式
 function process(children) {
@@ -80,12 +79,13 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        sheetType="strategy"
-        dataCfg={s2DataConfig}
-        options={s2Options}
-      />,
-      document.getElementById('container'),
-    );
+    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 faa145c0fd..c84ba0d313 100644
--- a/s2-site/examples/react-component/sheet/demo/table.tsx
+++ b/s2-site/examples/react-component/sheet/demo/table.tsx
@@ -1,19 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
+import { S2DataConfig } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import React from 'react';
 
-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'],
       },
@@ -42,12 +40,13 @@ fetch(
       data: res,
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        dataCfg={s2DataConfig}
-        options={s2Options}
-        sheetType="table"
-      />,
-      document.getElementById('container'),
-    );
+    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 5a7143b7b2..1418455b4e 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx
@@ -1,15 +1,14 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
-import insertCss from 'insert-css';
+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',
 )
   .then((res) => res.json())
   .then((data) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
@@ -28,16 +27,18 @@ fetch(
             adaptive={false}
             dataCfg={{ data, fields }}
             options={s2Options}
-            header={{ switcherCfg: { open: true } }}
+            header={{ switcher: { open: true } }}
           />
         </div>
       );
     };
 
-    ReactDOM.render(<SwitcherDemo />, document.getElementById('container'));
+    reactDOMClient
+      .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 7aa330585f..3c43395561 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,15 +1,17 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent, Switcher } from '@antv/s2-react';
-import insertCss from 'insert-css';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  Switcher,
+} from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-
+import insertCSS from 'insert-css';
+import React, { useState } from 'react';
 fetch(
   'https://render.alipay.com/p/yuyan/180020010001215413/s2/pivot-switcher-with-chidlren.json',
 )
   .then((res) => res.json())
   .then((data) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
@@ -44,9 +46,11 @@ fetch(
           result.push(item);
         } else {
           const parent = result[result.length - 1];
+
           parent.children = parent.children ? parent.children : [];
           parent.children.push(item);
         }
+
         return result;
       }, []);
 
@@ -104,10 +108,12 @@ fetch(
       );
     };
 
-    ReactDOM.render(<SwitcherDemo />, document.getElementById('container'));
+    reactDOMClient
+      .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 9c8a675b09..dae750c3b7 100644
--- a/s2-site/examples/react-component/switcher/demo/pivot.tsx
+++ b/s2-site/examples/react-component/switcher/demo/pivot.tsx
@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent, Switcher } from '@antv/s2-react';
-import insertCss from 'insert-css';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  Switcher,
+} from '@antv/s2-react';
+import insertCSS from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -9,7 +12,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((data) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
@@ -84,10 +87,12 @@ fetch(
       );
     };
 
-    ReactDOM.render(<SwitcherDemo />, document.getElementById('container'));
+    reactDOMClient
+      .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 5f339685b6..1a8b0e2355 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 ReactDOM from 'react-dom';
 import { Switcher } from '@antv/s2-react';
 
 const switcherFields = {
@@ -23,7 +22,6 @@ const onSubmit = (result) => {
   console.log('result:', result);
 };
 
-ReactDOM.render(
-  <Switcher {...switcherFields} onSubmit={onSubmit} />,
-  document.getElementById('container'),
-);
+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 d9c0bc74f0..58b0246d31 100644
--- a/s2-site/examples/react-component/switcher/demo/table.tsx
+++ b/s2-site/examples/react-component/switcher/demo/table.tsx
@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent, Switcher } from '@antv/s2-react';
-import insertCss from 'insert-css';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  Switcher,
+} from '@antv/s2-react';
+import insertCSS from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -9,7 +12,7 @@ fetch(
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const s2Options = {
+    const s2Options: SheetComponentOptions = {
       width: 600,
       height: 480,
     };
@@ -75,10 +78,12 @@ fetch(
       );
     };
 
-    ReactDOM.render(<SwitcherDemo />, document.getElementById('container'));
+    reactDOMClient
+      .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/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/basic.tsx b/s2-site/examples/react-component/tooltip/demo/basic.tsx
index 2c875f02eb..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 ReactDOM from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -19,13 +18,14 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-      document.getElementById('container'),
-    );
+    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 a3c3d49041..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,8 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-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>;
 
@@ -22,7 +24,10 @@ fetch(
       },
     };
 
-    const onColCellClick = ({ viewMeta, event }) => {
+    const onColCellClick: SheetComponentsProps['onColCellClick'] = ({
+      viewMeta,
+      event,
+    }) => {
       if (!viewMeta) {
         return;
       }
@@ -42,40 +47,43 @@ 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);
+                        },
+                      },
+                    ],
+                  },
+                ],
+              },
             },
           },
         });
       }
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-        onColCellClick={onColCellClick}
-      />,
-      document.getElementById('container'),
-    );
+    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-base.ts b/s2-site/examples/react-component/tooltip/demo/custom-content-base.ts
new file mode 100644
index 0000000000..c85de8199c
--- /dev/null
+++ b/s2-site/examples/react-component/tooltip/demo/custom-content-base.ts
@@ -0,0 +1,59 @@
+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,
+        // 1. 支持字符串
+        content: '我是自定义内容',
+        // 2. 支持回调的方式
+        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>
+            `;
+          },
+        },
+        // 3. 支持 innerHTML 的方式, 请注意 XSS !
+        colCell: {
+          content: `
+            <div>
+              <p>我是自定义内容1</p>
+              <p>我是自定义内容2</p>
+            </div>
+          `,
+        },
+        // 4. 支持 DOM 的方式
+        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 76%
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
index 69637b494e..b3598c3100 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-content.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx
@@ -1,11 +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 insertCSS from 'insert-css';
 import React from 'react';
-import ReactDOM from 'react-dom';
+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>
@@ -39,7 +40,7 @@ fetch(
       width: 600,
       height: 480,
       tooltip: {
-        content: CustomTooltip,
+        content: <CustomTooltip />,
         rowCell: {
           content: (cell, defaultTooltipShowOptions) => {
             console.log('当前单元格：', cell);
@@ -56,18 +57,19 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-      document.getElementById('container'),
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={dataCfg}
+          options={s2Options}
+        />,
+      );
   });
 
-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 e2ff699ce3..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,8 +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 { 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())
@@ -47,12 +46,13 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        sheetType="pivot"
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-      document.getElementById('container'),
-    );
+    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 69de5ed312..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,6 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import {
+  SheetComponent,
+  SheetComponentOptions,
+  SheetComponentsProps,
+} from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -24,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,
@@ -35,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);
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
           },
         },
       });
@@ -80,16 +88,17 @@ fetch(
       });
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-        onColCellHover={onColCellHover}
-        onRowCellHover={onRowCellHover}
-        onDataCellHover={onDataCellHover}
-      />,
-      document.getElementById('container'),
-    );
+    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 0f4c6dfbc9..a8a62d8d93 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 ReactDOM from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -14,13 +13,15 @@ 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);
             },
             items: [
               {
                 key: 'custom-a',
-                text: '操作1',
+                label: '操作1',
                 icon: 'Trend',
                 onClick: (info, cell) => {
                   console.log('操作1点击:', info, cell);
@@ -28,7 +29,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 +39,7 @@ fetch(
               },
               {
                 key: 'custom-b',
-                text: '操作2',
+                label: '操作2',
                 icon: 'EyeOutlined',
                 onClick: (info, cell) => {
                   console.log('操作2点击:', info, cell);
@@ -46,7 +47,7 @@ fetch(
               },
               {
                 key: 'custom-c',
-                text: '操作3',
+                label: '操作3',
                 icon: 'EyeOutlined',
                 visible: false,
                 onClick: (info, cell) => {
@@ -55,7 +56,7 @@ fetch(
               },
               {
                 key: 'custom-c',
-                text: '操作4',
+                label: '操作4',
                 icon: 'EyeOutlined',
                 visible: (cell) => {
                   // 叶子节点才显示
@@ -73,13 +74,14 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-      document.getElementById('container'),
-    );
+    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 1c2b7eee84..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
@@ -1,7 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { SheetComponent } from '@antv/s2-react';
-import insertCss from 'insert-css';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import insertCSS from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch(
@@ -9,19 +8,19 @@ 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}
         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) => {
@@ -54,6 +53,7 @@ fetch(
                 ],
               },
             };
+
             const customOptions = {
               ...tooltipOptions,
               position: { x: position.x + 1, y: position.y + 1 },
@@ -75,12 +75,15 @@ fetch(
             instance.tooltip.show(customOptions);
           };
         }}
-      />,
-      document.getElementById('container'),
+      />
     );
+
+    reactDOMClient
+      .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 c3fc4462c7..6a9ff1c62a 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,30 @@
-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 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>
 );
 
-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 ??= reactDOMClient.createRoot(this.container!);
+    this.root.render(<MyCustomTooltipContent />);
   }
 
   show(options) {
@@ -26,10 +35,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,18 +61,19 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-      document.getElementById('container'),
-    );
+    reactDOMClient
+      .createRoot(document.getElementById('container'))
+      .render(
+        <SheetComponent
+          sheetType="pivot"
+          adaptive={false}
+          dataCfg={dataCfg}
+          options={s2Options}
+        />,
+      );
   });
 
-insertCss(`
+insertCSS(`
   .tooltip-custom-component {
     padding: 12px;
     height: 50px;
diff --git a/s2-site/examples/react-component/tooltip/demo/meta.json b/s2-site/examples/react-component/tooltip/demo/meta.json
index 55f77c3e8b..2104dda64a 100644
--- a/s2-site/examples/react-component/tooltip/demo/meta.json
+++ b/s2-site/examples/react-component/tooltip/demo/meta.json
@@ -26,10 +26,19 @@
         "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.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",
+      "new": true
+    },
+    {
+      "filename": "custom-content-react.tsx",
       "title": {
         "zh": "自定义 Tooltip 内容",
         "en": "Custom Tooltip Content"
diff --git a/s2-site/examples/react-component/tooltip/demo/operation.tsx b/s2-site/examples/react-component/tooltip/demo/operation.tsx
index a001777402..51788e9cb5 100644
--- a/s2-site/examples/react-component/tooltip/demo/operation.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/operation.tsx
@@ -1,8 +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 { 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',
@@ -14,16 +13,18 @@ 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);
             },
             items: [
               {
                 key: 'trend',
-                text: '趋势',
+                label: '趋势',
                 icon: 'Trend',
                 // 数值单元格展示
                 visible: (cell) => cell.cellType === CellType.DATA_CELL,
@@ -37,13 +38,14 @@ fetch(
       },
     };
 
-    ReactDOM.render(
-      <SheetComponent
-        sheetType="pivot"
-        adaptive={false}
-        dataCfg={dataCfg}
-        options={s2Options}
-      />,
-      document.getElementById('container'),
-    );
+    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 bec133d06d..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,7 +1,6 @@
 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 +11,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',
       });
 
@@ -74,5 +73,7 @@ fetch(
       );
     }
 
-    ReactDOM.render(<App />, document.getElementById('container'));
+    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 aabb0aed9f..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,17 +1,14 @@
 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';
 
-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 +59,7 @@ const savePalette = debounce((palette) => {
 }, 1000);
 
 function useDataCfg() {
-  const [dataCfg, setDataCfg] = useState(null);
+  const [dataCfg, setDataCfg] = useState<S2DataConfig>(null);
 
   useEffect(() => {
     fetch(
@@ -229,4 +226,4 @@ function App() {
   );
 }
 
-ReactDOM.render(<App />, document.getElementById('container'));
+reactDOMClient.createRoot(document.getElementById('container')).render(<App />);
diff --git a/s2-site/examples/theme/custom/demo/custom-palette.ts b/s2-site/examples/theme/custom/demo/custom-palette.ts
index 671451ec7b..76d12c289e 100644
--- a/s2-site/examples/theme/custom/demo/custom-palette.ts
+++ b/s2-site/examples/theme/custom/demo/custom-palette.ts
@@ -1,12 +1,10 @@
-import { PivotSheet } 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((data) => {
+  .then(async (data) => {
     const container = document.getElementById('container');
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: ['province', 'city'],
         columns: ['type'],
@@ -37,12 +35,12 @@ fetch(
       data,
     };
 
-    const s2Options = {
+    const s2Options: S2Options = {
       width: 600,
       height: 480,
     };
 
-    const s2Palette = {
+    const s2Palette: ThemeCfg['palette'] = {
       basicColors: [
         '#FFFFFF',
         '#F8F5FE',
@@ -70,6 +68,9 @@ fetch(
 
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    s2.setThemeCfg({ palette: s2Palette });
-    s2.render();
+    s2.setThemeCfg({
+      palette: s2Palette,
+    });
+
+    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 63cdc94c27..26e6539173 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://render.alipay.com/p/yuyan/180020010001215413/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'],
       },
@@ -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-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/custom-transparent-background.ts b/s2-site/examples/theme/custom/demo/custom-transparent-background.ts
index 1e7ad85005..46f2d69b5b 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://render.alipay.com/p/yuyan/180020010001215413/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'],
@@ -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/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/examples/theme/default/demo/colorful.ts b/s2-site/examples/theme/default/demo/colorful.ts
index 616dd23cec..a8b3c714b0 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://render.alipay.com/p/yuyan/180020010001215413/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'],
@@ -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/dark.ts b/s2-site/examples/theme/default/demo/dark.ts
new file mode 100644
index 0000000000..6c3f3d81da
--- /dev/null
+++ b/s2-site/examples/theme/default/demo/dark.ts
@@ -0,0 +1,52 @@
+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/default.ts b/s2-site/examples/theme/default/demo/default.ts
index 45b4e137c3..29f0cbe5a0 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://render.alipay.com/p/yuyan/180020010001215413/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'],
@@ -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 9b4f697f0b..e2b26b2a81 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://render.alipay.com/p/yuyan/180020010001215413/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'],
@@ -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/examples/theme/default/demo/meta.json b/s2-site/examples/theme/default/demo/meta.json
index fa9cb6135b..d7bcbb6ad6 100644
--- a/s2-site/examples/theme/default/demo/meta.json
+++ b/s2-site/examples/theme/default/demo/meta.json
@@ -27,6 +27,15 @@
         "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",
+      "new": true
     }
   ]
 }
diff --git a/s2-site/package.json b/s2-site/package.json
index e9503c28c4..6008cbfc7a 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",
@@ -28,19 +28,22 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@antv/dumi-theme-antv": "^0.4.4",
-    "@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/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.2",
+    "antd": "^5.13.3",
     "copy-to-clipboard": "^3.3.3",
-    "dumi": "^2.2.15",
-    "gh-pages": "^6.1.0",
+    "dumi": "^2.2.17",
+    "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": {
     "@google-cloud/translate": "^7.0.3",
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;
diff --git a/s2-site/playground/sheet-component/index.tsx b/s2-site/playground/sheet-component/index.tsx
index 7b7c6a00df..2d3b559b52 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,13 +199,17 @@ export const CustomSheet: React.FC<Props> = (props) => {
 
   useEffect(() => {
     const { showPagination } = sheetConfig;
+
     setShowPagination(showPagination);
   }, [sheetConfig?.showPagination]);
 
   useEffect(() => {
     const { showSeriesNumber, showPagination } = sheetConfig;
+
     setOptions({
-      showSeriesNumber,
+      seriesNumber: {
+        enable: showSeriesNumber,
+      },
       pagination: showPagination && {
         pageSize: 10,
         current: 1,
diff --git a/s2-site/s2.drawio b/s2-site/s2.drawio
new file mode 100644
index 0000000000..a428b44ba6
--- /dev/null
+++ b/s2-site/s2.drawio
@@ -0,0 +1 @@
+<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
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',
   });
 }