docs: 修复升级 G 6.0 引起的文档错误 (#2725)

antvis · May 14, 2024 · 185b59c · 185b59c
1 parent 24591fb
commit 185b59c
Show file tree

Hide file tree

Showing 22 changed files with 143 additions and 126 deletions.
diff --git a/packages/s2-react/CHANGELOG.md b/packages/s2-react/CHANGELOG.md
@@ -1,19 +1,16 @@
 # [@antv/s2-react-v2.0.0-next.19](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.18...@antv/s2-react-v2.0.0-next.19) (2024-05-11)
 
-
 ### Bug Fixes
 
 * 修复 React 18 环境下 Tooltip 卸载后无法再次渲染 & 排序菜单选中效果丢失的问题 ([#2698](https://github.com/antvis/S2/issues/2698)) ([0af329d](https://github.com/antvis/S2/commit/0af329da596733eee8013a7a1f04676a720767d3))
 * 修复导出 CSV 时分隔符错误导致的展示格式错误 close [#2701](https://github.com/antvis/S2/issues/2701) ([#2703](https://github.com/antvis/S2/issues/2703)) ([98c051a](https://github.com/antvis/S2/commit/98c051a58c1d8b7c7831343ba909238e514615ae))
-* 修复配置了多行文本但实际渲染的文本未换行时, 单元格高度也会自适应调整的问题 ([#2705](https://github.com/antvis/S2/issues/2705)) ([5d19e62](https://github.com/antvis/S2/commit/5d19e623c8f726d4f417ea2cb55cc489ef09f1b2))
-
+* 修复配置了多行文本但实际渲染的文本未换行时，单元格高度也会自适应调整的问题 ([#2705](https://github.com/antvis/S2/issues/2705)) ([5d19e62](https://github.com/antvis/S2/commit/5d19e623c8f726d4f417ea2cb55cc489ef09f1b2))
 
 ### Features
 
 * **options:** customSVGIcons API 变更 ([#2700](https://github.com/antvis/S2/issues/2700)) ([fde8e8f](https://github.com/antvis/S2/commit/fde8e8f57d176057d052cbf0dd401211e2839a0e))
 * 更新 g 到最新版 ([#2631](https://github.com/antvis/S2/issues/2631)) ([7647605](https://github.com/antvis/S2/commit/7647605dcd60e1e34f2014aafb180ac931bf0725)), closes [#2629](https://github.com/antvis/S2/issues/2629)
 
-
 ### BREAKING CHANGES
 
 * Export 组件 和 asyncGetAllPlainData, copyToClipboard
@@ -34,62 +31,53 @@
 
 # [@antv/s2-react-v2.0.0-next.18](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.17...@antv/s2-react-v2.0.0-next.18) (2024-04-30)
 
-
 ### Bug Fixes
 
 * 修复表格右键事件无法触发 close [#2687](https://github.com/antvis/S2/issues/2687) ([#2690](https://github.com/antvis/S2/issues/2690)) ([8b4f3e3](https://github.com/antvis/S2/commit/8b4f3e3dab83e6ae38b1d3362049af8352a7a4a9))
 
-
 ### Features
 
 * canvas 支持挂载 s2 实例 ([#2645](https://github.com/antvis/S2/issues/2645)) ([ed21dcb](https://github.com/antvis/S2/commit/ed21dcb82ea4cb434587a4ffa4819f2a619ca1aa))
 
-
 ### Performance Improvements
 
 * 优化 getDimensionValues 在大量 flatten 情况下的性能 ([#2640](https://github.com/antvis/S2/issues/2640)) ([41980c5](https://github.com/antvis/S2/commit/41980c5a092e24214d21f41cfa288d5350f99c16))
 
 # [@antv/s2-react-v2.0.0-next.17](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.16...@antv/s2-react-v2.0.0-next.17) (2024-04-26)
 
-
 ### Bug Fixes
 
 * 修复明细表自定义多级列头导出格式错误 close [#2664](https://github.com/antvis/S2/issues/2664) ([#2674](https://github.com/antvis/S2/issues/2674)) ([ae9add9](https://github.com/antvis/S2/commit/ae9add9c722877aced481340f798408a09ad98fb))
 
 # [@antv/s2-react-v2.0.0-next.16](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.15...@antv/s2-react-v2.0.0-next.16) (2024-03-29)
 
-
 ### Bug Fixes
 
 * 修复紧凑模式下数值单元格错误的展示了省略号 ([#2632](https://github.com/antvis/S2/issues/2632)) ([2822471](https://github.com/antvis/S2/commit/2822471e9f73ba7b19292dc88a93b96d38afa471))
 * 调整 peerDependencies 命中规则 ([#2633](https://github.com/antvis/S2/issues/2633)) ([73378c7](https://github.com/antvis/S2/commit/73378c70339c1d5536be33cdf3cece5404d1f5c9))
 
 # [@antv/s2-react-v2.0.0-next.15](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.14...@antv/s2-react-v2.0.0-next.15) (2024-03-22)
 
-
 ### Bug Fixes
 
 * **g:** 修复表格初次渲染时部分 icon 不展示 close [#2014](https://github.com/antvis/S2/issues/2014) ([#2606](https://github.com/antvis/S2/issues/2606)) ([3f9a176](https://github.com/antvis/S2/commit/3f9a176f75c46fa58e50d0fd70a652242f7b6df3))
 * 修复角头和行头折叠展开 icon 的状态未同步以及展开异常的问题 close [#2607](https://github.com/antvis/S2/issues/2607) ([#2620](https://github.com/antvis/S2/issues/2620)) ([99829a6](https://github.com/antvis/S2/commit/99829a667c69394c0554ece841d6f6eb5c3f9b9e))
 
 # [@antv/s2-react-v2.0.0-next.14](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.13...@antv/s2-react-v2.0.0-next.14) (2024-03-15)
 
-
 ### Bug Fixes
 
 * 修复文本行数不一致时自动换行高度自适应失效 close [#2594](https://github.com/antvis/S2/issues/2594) ([#2598](https://github.com/antvis/S2/issues/2598)) ([fae5496](https://github.com/antvis/S2/commit/fae5496e503205f319e7bdc79240d31dacd4e850))
 
 # [@antv/s2-react-v2.0.0-next.13](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.12...@antv/s2-react-v2.0.0-next.13) (2024-03-11)
 
-
 ### Features
 
 * **interaction:** 支持批量调整行高列宽 close [#2574](https://github.com/antvis/S2/issues/2574) ([#2580](https://github.com/antvis/S2/issues/2580)) ([7d1be20](https://github.com/antvis/S2/commit/7d1be206442396371ab08a8224b2685aea2c025d))
 * 增加角头和序号列的交互能力 ([#2571](https://github.com/antvis/S2/issues/2571)) ([fcb77cc](https://github.com/antvis/S2/commit/fcb77cce65ee56aeec189cf46d4226ef6a62a671))
 
 # [@antv/s2-react-v2.0.0-next.12](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.11...@antv/s2-react-v2.0.0-next.12) (2024-03-04)
 
-
 ### Bug Fixes
 
 * 修复树状模式选中非叶子节点时不展示汇总信息的问题 ([48b7073](https://github.com/antvis/S2/commit/48b70737f32d58d75c356a4d37afeb74a917cf23))
@@ -98,29 +86,25 @@
 * 修复编辑表的输入框未回填格式化后的数据 close [#2528](https://github.com/antvis/S2/issues/2528) ([#2549](https://github.com/antvis/S2/issues/2549)) ([95d67ca](https://github.com/antvis/S2/commit/95d67ca02b774aed426a179a16aa27f0c172356e))
 * 修复自定义目录树同名节点展示异常 & 导出缺失角头 close [#2455](https://github.com/antvis/S2/issues/2455) ([#2551](https://github.com/antvis/S2/issues/2551)) ([6d315bf](https://github.com/antvis/S2/commit/6d315bff20e74f0ce5f1d286105eeba749ebabaf))
 * 修复行列头数值复制时未使用格式化的值 & 优化单测 ([989366f](https://github.com/antvis/S2/commit/989366fc740b7c1367c4cf246a6e3eb80e4f3338))
-* 修复表格排序后, 编辑单元格后数据更新错误 close [#2573](https://github.com/antvis/S2/issues/2573) ([#2544](https://github.com/antvis/S2/issues/2544)) ([c4ff49a](https://github.com/antvis/S2/commit/c4ff49a47c5ef6155a623edaf72e65ab3dccbc68))
+* 修复表格排序后，编辑单元格后数据更新错误 close [#2573](https://github.com/antvis/S2/issues/2573) ([#2544](https://github.com/antvis/S2/issues/2544)) ([c4ff49a](https://github.com/antvis/S2/commit/c4ff49a47c5ef6155a623edaf72e65ab3dccbc68))
 * 修复趋势分析表复制错误 ([2e24418](https://github.com/antvis/S2/commit/2e24418cabebdbe1cd306cdf931c0c8fa7bae050))
 
-
 ### Features
 
 * 移除已废弃的方法和逻辑 & 优化文档 ([#2566](https://github.com/antvis/S2/issues/2566)) ([de7c97b](https://github.com/antvis/S2/commit/de7c97b862e5b467fd335dd65f9dac5a95e4b621))
 
 # [@antv/s2-react-v2.0.0-next.11](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.10...@antv/s2-react-v2.0.0-next.11) (2024-02-07)
 
-
 ### Bug Fixes
 
-* 修复表格排序后, 编辑单元格后数据更新错误 ([e841d3d](https://github.com/antvis/S2/commit/e841d3db020afb418f0b2f9223271c329390b192))
+* 修复表格排序后，编辑单元格后数据更新错误 ([e841d3d](https://github.com/antvis/S2/commit/e841d3db020afb418f0b2f9223271c329390b192))
 
 # [@antv/s2-react-v2.0.0-next.10](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.9...@antv/s2-react-v2.0.0-next.10) (2024-02-05)
 
-
 ### Features
 
 * 合并 master 到 next ([#2493](https://github.com/antvis/S2/issues/2493)) ([6da530d](https://github.com/antvis/S2/commit/6da530d0c5f53d283ddfaa4b3e510ca11c9bf83e)), closes [#2186](https://github.com/antvis/S2/issues/2186) [#2204](https://github.com/antvis/S2/issues/2204) [#2191](https://github.com/antvis/S2/issues/2191)
 
-
 ### Performance Improvements
 
 * 优化多行文本渲染性能 ([#2478](https://github.com/antvis/S2/issues/2478)) ([adc5ef3](https://github.com/antvis/S2/commit/adc5ef32056ca0427942f5a118af938124821bcc))

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -1643,7 +1643,7 @@ function MainLayout() {
               },
               {
                 key: 'plugins',
-                label: 'G 5.0 插件系统',
+                label: 'AntV/G 插件系统',
                 children: <PluginsSheet />,
               },
               {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/s2-site/docs/common/packages.zh.md b/s2-site/docs/common/packages.zh.md
@@ -7,7 +7,7 @@ order: 5
 
 创建 `S2` 表格有三种方式，基础类版本 `@antv/s2` 和 基于 `@antv/s2` 封装的 `React` 和 `Vue3` 版本：
 
-- `@antv/s2`: 基于 `Canvas` 和 [AntV/G 5.0](https://g.antv.antgroup.com) 开发，提供基本的表格展示/交互等能力。
+- `@antv/s2`: 基于 `Canvas` 和 [AntV/G 6.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` 封装，提供配套的分析组件。
 

diff --git a/s2-site/docs/manual/advanced/chart-in-cell.zh.md b/s2-site/docs/manual/advanced/chart-in-cell.zh.md
@@ -444,7 +444,7 @@ class CustomCornerCell extends CornerCell {
         new GImage({
           style: {
             ...this.getBBoxByType(),
-            img,
+            src: img,
           },
         }),
       );

diff --git a/s2-site/docs/manual/advanced/custom/custom-order.zh.md b/s2-site/docs/manual/advanced/custom/custom-order.zh.md
@@ -3,34 +3,35 @@ title: 自定义排序操作
 order: 6
 ---
 
-虽然，`S2` 表格有默认的 [排序操作](/examples/analysis/sort#group-sort) 和 `React Header`
-组件中的 [高级排序排序](/examples/analysis/sort#advanced) 功能。
+:::warning{title="注意"}
+阅读本章前，请确保已经阅读过 [基础排序](/manual/basic/sort/basic)，[组内排序](/manual/basic/sort/group)，[Tooltip 注意事项](/manual/basic/tooltip#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9) 等章节。
+:::
 
-但在某些业务场景下，我们仍需要自定义排序，我们将它分为**自定义排序 `icon`**，**自定义排序 `tooltip`**，**自定义排序操作**三个部分。接下来，我将带大家实现如👇 动图中的自定义排序功能。
+`S2` 提供默认的基础 [排序操作](/examples/analysis/sort#group-sort) 和 React 版本的 [高级排序](/examples/analysis/sort#advanced) 组件。
 
-![自定义排序](https://gw.alipayobjects.com/zos/antfincdn/oOiZ02mZJ/zidingyipaixu.gif)
+但在某些业务场景下，我们仍需要自定义排序，我们将它分为**自定义排序 `icon`**，**自定义排序 `tooltip`**，**自定义排序操作**三个部分。
+
+<img alt="preview" height="600" src="https://gw.alipayobjects.com/zos/antfincdn/oOiZ02mZJ/zidingyipaixu.gif" />
 
 ## 自定义排序 icon
 
 相关章节：[自定义 icon](/examples/custom/custom-icon#custom-header-action-icon)
 
 ### 配置
 
-- 关闭默认 icon
+- 关闭表头默认 [排序操作 icon](/manual/basic/sort/group).
 
 ```jsx
 const s2Options = {
-  // 关闭默认 icon
   showDefaultHeaderActionIcon: false,
   ...
 }
 ```
 
-- 配置自定义 icon
+- 配置 [自定义 icon](/manual/advanced/custom/custom-icon)
 
 ```jsx
 const s2Options = {
-  // 自定义 icon
   customSVGIcons: [
     {
       name: 'customKingIcon',
@@ -41,18 +42,18 @@ const s2Options = {
 }
 ```
 
-- 配置 icon 展示位置
+- 配置 icon [展示位置](/manual/advanced/custom/custom-icon#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A1%8C%E5%88%97%E5%A4%B4-icon)
 
 ```jsx
 const s2Options = {
-  // 配置 icon 展示位置
   headerActionIcons: [
     {
       // 选择 icon, 可以是 S2 自带的，也可以是自定义的 icon
-      icons: [ 'customKingIcon' ],
+      icons: ['customKingIcon'],
       // 通过 belongsCell + displayCondition 设置 icon 的展示位置
       belongsCell: 'colCell',
       displayCondition: (meta) => meta.level === 2,
+      defaultHide: false,
       ...
     }],
   ...
@@ -61,13 +62,11 @@ const s2Options = {
 
 ### 效果展示
 
-| before                                                                                                                                                         | after                                                                                                                                                 |
-|----------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
-| <image alt="before" src="https://gw.alipayobjects.com/zos/antfincdn/HsPpQdx%241/0d4a4371-191c-432e-8887-6392e38eb4ff.png" style="width: 500; height: auto"  /> | <image alt="after" src="https://gw.alipayobjects.com/zos/antfincdn/s%26vVrM8Ap/14a3a4fa-6d07-4fb8-8201-012672bd0feb.png"  width="400" height="300" /> |
+<img alt="preview" src="https://gw.alipayobjects.com/zos/antfincdn/s%26vVrM8Ap/14a3a4fa-6d07-4fb8-8201-012672bd0feb.png" height="600" />
 
 ## 自定义 tooltip
 
-相关章节：[headerActionIcons 配置说明](/docs/api/general/S2Options#headeractionicon)
+相关章节：[headerActionIcons 配置说明](/api/general/S2Options#headeractionicon)
 
 ### 配置
 
@@ -86,10 +85,10 @@ const s2Options = {
 
 ```jsx
 const items = [
-  { key: SortMethodType.none, label: '不排序' },
-  { key: SortMethodType.asc, label: '升序', icon: 'GroupAsc' },
-  { key: SortMethodType.desc, label: '降序', icon: 'GroupDesc' },
-  { key: SortMethodType.custom, label: '自定义排序', icon: 'Trend' },
+  { key: 'NONE', label: '不排序' },
+  { key: 'ASC', label: '升序', icon: 'GroupAsc' },
+  { key: 'DESC', label: '降序', icon: 'GroupDesc' },
+  { key: 'CUSTOM', label: '自定义排序', icon: 'Trend' },
 ];
 
 const s2Options = {
@@ -100,9 +99,12 @@ const s2Options = {
       icons: ['customKingIcon'],
       // 通过 belongsCell + displayCondition 设置 icon 的展示位置
       belongsCell: 'colCell',
+      // 展示条件
       displayCondition: (meta) => meta.level === 2,
+      // 默认是否隐藏，hover 后再展示
+      defaultHide: false,
       // icon 点击之后的执行函数
-      onClick: (props) => {
+      onClick: (options) => {
         const { meta, event } = props;
         // https://s2.antv.antgroup.com/manual/basic/tooltip
         const operator = {
@@ -118,57 +120,54 @@ const s2Options = {
           onlyShowOperator: true,
         });
       },
+      onHover: (options) => {}
     },
   ],
   ...
 }
 ```
 
-### 展示效果
+### 预览
 
-| before                                                                                                   | after                                                                                                   |
-|----------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| ![before](https://gw.alipayobjects.com/zos/antfincdn/ho4NpbgQC/926fb382-d71e-429e-8a22-290c16ffb6c0.png) | ![after](https://gw.alipayobjects.com/zos/antfincdn/jTQbHqPuB/4917862a-e60c-4889-824f-f4d11f192f86.png) |
+<img alt="preview" src="https://gw.alipayobjects.com/zos/antfincdn/jTQbHqPuB/4917862a-e60c-4889-824f-f4d11f192f86.png" height="600" />
 
 ## 自定义排序操作
 
-相关章节：[自定义排序](/docs/manual/basic/sort/custom#2-%E7%BB%B4%E5%BA%A6%E5%80%BC%E5%88%97%E8%A1%A8sortby)
+相关章节：[自定义排序](/manual/basic/sort/basic)
 
 ### 配置
 
 ```jsx
 // 执行自定义排序回调
 const handleSortCallback = (meta, key) => {
-  if (key === SortMethodType.custom) {
+  if (key === 'CUSTOM') {
     const sortParams = [
       { sortFieldId: 'type', sortBy: [ '办公用品', '家具' ] },
       { sortFieldId: 'city', sortMethod: 'ASC' },
     ];
-    setSortParams(sortParams)
     console.log('可以在这里实现你手动排序的交互和逻辑哟', sortParams)
   } else {
     // 使用 S2 提供的组内排序方式
     meta.spreadsheet.groupSortByMethod(key, meta)
-    ;
   }
 }
 
 const s2Options = {
-  // 设置自定义 `icon` 的展示条件
   headerActionIcons: [
     {
       onClick: (props) => {
-        const { meta, event } = props;
+        const { meta, event } = props
         const operator = {
-          onClick: ({ key }) => {
-            // 执行自定义排序回调
-            handleSortCallback(meta, key);
-            meta.spreadsheet.hideTooltip();
-          },
           menu: {
+            onClick: ({ key }) => {
+              // 执行自定义排序回调
+              handleSortCallback(meta, key)
+              meta.spreadsheet.hideTooltip()
+            },
             items
           },
-        };
+        }
+
         meta.spreadsheet.showTooltipWithInfo(event, [], {
           operator,
           onlyShowCellText: true,
@@ -182,10 +181,6 @@ const s2Options = {
 }
 ```
 
-### 展示效果
-
-点击自定义排序，表格就会按照我们设置的排序进行展示。
-
-类别按手动排序：[办公用品，家具], 城市 🏙 按首字母升序组内排列。
+### 预览
 
-![after](https://gw.alipayobjects.com/zos/antfincdn/g8H01taL6/zidingyipaixucaozuo.gif)
+<Playground path='custom/custom-order/demo/custom-order.tsx' rid='container' height='400'></Playground>
diff --git a/s2-site/docs/manual/basic/multi-line-text.zh.md b/s2-site/docs/manual/basic/multi-line-text.zh.md
@@ -16,7 +16,7 @@ tag: New
 
 ## 使用
 
-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), 可以根据文本高度自适应单元格高度，并支持如下配置：
+S2 内部适配了 `AntV/G 6.0` 的 [多行布局能力](https://g.antv.antgroup.com/api/basic/text#%E5%A4%9A%E8%A1%8C%E5%B8%83%E5%B1%80), 可以根据文本高度自适应单元格高度，并支持如下配置：
 
 :::info{title="提示"}