diff --git a/.github/workflows/contributor-help.yml b/.github/workflows/contributor-help.yml deleted file mode 100644 index a5d7f119..00000000 --- a/.github/workflows/contributor-help.yml +++ /dev/null @@ -1,28 +0,0 @@ -name: Contributor Helper - -on: - schedule: - - cron: '0 0 * * *' - -jobs: - contributor: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@master - - - uses: actions-cool/contributor-helper@v1 - with: - token: ${{ secrets.GITHUB_TOKEN }} - style: 'simple' - update-files: 'README.md' - update-places: '/' - - - name: Commit and push if changed - run: |- - git diff - git config --global user.email "actions@github.com" - git config --global user.name "github-actions" - git pull - git add -A - git commit -m "🤖 docs: Auto update contributors" || exit 0 - git push diff --git a/CHANGELOG.md b/CHANGELOG.md index a6533830..d2430bd1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -## [Version 0.36.0](https://github.com/ant-design/pro-editor/compare/v0.35.1...v0.36.0) +## [Version 0.36.0](https://github.com/ant-design/pro-editor/compare/v0.35.1...v0.36.0) Released on **2023-12-26** @@ -33,7 +33,7 @@ -### [Version 0.35.1](https://github.com/ant-design/pro-editor/compare/v0.35.0...v0.35.1) +### [Version 0.35.1](https://github.com/ant-design/pro-editor/compare/v0.35.0...v0.35.1) Released on **2023-12-26** @@ -58,7 +58,7 @@ -## [Version 0.35.0](https://github.com/ant-design/pro-editor/compare/v0.34.2...v0.35.0) +## [Version 0.35.0](https://github.com/ant-design/pro-editor/compare/v0.34.2...v0.35.0) Released on **2023-12-25** @@ -83,7 +83,7 @@ -### [Version 0.34.2](https://github.com/ant-design/pro-editor/compare/v0.34.1...v0.34.2) +### [Version 0.34.2](https://github.com/ant-design/pro-editor/compare/v0.34.1...v0.34.2) Released on **2023-12-25** @@ -108,7 +108,7 @@ -### [Version 0.34.1](https://github.com/ant-design/pro-editor/compare/v0.34.0...v0.34.1) +### [Version 0.34.1](https://github.com/ant-design/pro-editor/compare/v0.34.0...v0.34.1) Released on **2023-12-22** @@ -133,7 +133,7 @@ -## [Version 0.34.0](https://github.com/ant-design/pro-editor/compare/v0.33.1...v0.34.0) +## [Version 0.34.0](https://github.com/ant-design/pro-editor/compare/v0.33.1...v0.34.0) Released on **2023-12-22** @@ -166,7 +166,7 @@ -### [Version 0.33.1](https://github.com/ant-design/pro-editor/compare/v0.33.0...v0.33.1) +### [Version 0.33.1](https://github.com/ant-design/pro-editor/compare/v0.33.0...v0.33.1) Released on **2023-12-20** @@ -191,7 +191,7 @@ -## [Version 0.33.0](https://github.com/ant-design/pro-editor/compare/v0.32.0...v0.33.0) +## [Version 0.33.0](https://github.com/ant-design/pro-editor/compare/v0.32.0...v0.33.0) Released on **2023-12-20** @@ -246,7 +246,7 @@ -## [Version 0.33.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.32.0...v0.33.0-rc.1) +## [Version 0.33.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.32.0...v0.33.0-rc.1) Released on **2023-12-20** @@ -301,7 +301,7 @@ -## [Version 0.32.0](https://github.com/ant-design/pro-editor/compare/v0.31.1...v0.32.0) +## [Version 0.32.0](https://github.com/ant-design/pro-editor/compare/v0.31.1...v0.32.0) Released on **2023-12-20** @@ -334,7 +334,7 @@ -### [Version 0.31.1](https://github.com/ant-design/pro-editor/compare/v0.31.0...v0.31.1) +### [Version 0.31.1](https://github.com/ant-design/pro-editor/compare/v0.31.0...v0.31.1) Released on **2023-12-18** @@ -360,7 +360,7 @@ -## [Version 0.31.0](https://github.com/ant-design/pro-editor/compare/v0.30.0...v0.31.0) +## [Version 0.31.0](https://github.com/ant-design/pro-editor/compare/v0.30.0...v0.31.0) Released on **2023-12-12** @@ -385,7 +385,7 @@ -## [Version 0.30.0](https://github.com/ant-design/pro-editor/compare/v0.29.2...v0.30.0) +## [Version 0.30.0](https://github.com/ant-design/pro-editor/compare/v0.29.2...v0.30.0) Released on **2023-12-06** @@ -428,7 +428,7 @@ -## [Version 0.30.0-rc.2](https://github.com/ant-design/pro-editor/compare/v0.30.0-rc.1...v0.30.0-rc.2) +## [Version 0.30.0-rc.2](https://github.com/ant-design/pro-editor/compare/v0.30.0-rc.1...v0.30.0-rc.2) Released on **2023-12-05** @@ -454,7 +454,7 @@ -## [Version 0.30.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.29.2...v0.30.0-rc.1) +## [Version 0.30.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.29.2...v0.30.0-rc.1) Released on **2023-12-04** @@ -492,7 +492,7 @@ -## [Version 0.29.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.28.0...v0.29.0-rc.1) +## [Version 0.29.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.28.0...v0.29.0-rc.1) Released on **2023-12-04** @@ -529,7 +529,7 @@ -## [Version 0.28.0](https://github.com/ant-design/pro-editor/compare/v0.27.0...v0.28.0) +## [Version 0.28.0](https://github.com/ant-design/pro-editor/compare/v0.27.0...v0.28.0) Released on **2023-11-24** @@ -562,7 +562,7 @@ -## [Version 0.28.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.27.0...v0.28.0-alpha.1) +## [Version 0.28.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.27.0...v0.28.0-alpha.1) Released on **2023-11-24** @@ -595,7 +595,7 @@ -## [Version 0.27.0](https://github.com/ant-design/pro-editor/compare/v0.26.0...v0.27.0) +## [Version 0.27.0](https://github.com/ant-design/pro-editor/compare/v0.26.0...v0.27.0) Released on **2023-11-24** @@ -621,7 +621,7 @@ -## [Version 0.26.0](https://github.com/ant-design/pro-editor/compare/v0.25.0...v0.26.0) +## [Version 0.26.0](https://github.com/ant-design/pro-editor/compare/v0.25.0...v0.26.0) Released on **2023-11-22** @@ -657,7 +657,7 @@ -## [Version 0.25.0](https://github.com/ant-design/pro-editor/compare/v0.24.0...v0.25.0) +## [Version 0.25.0](https://github.com/ant-design/pro-editor/compare/v0.24.0...v0.25.0) Released on **2023-11-09** @@ -691,7 +691,7 @@ -## [Version 0.24.0](https://github.com/ant-design/pro-editor/compare/v0.23.0...v0.24.0) +## [Version 0.24.0](https://github.com/ant-design/pro-editor/compare/v0.23.0...v0.24.0) Released on **2023-11-06** @@ -719,7 +719,7 @@ -## [Version 0.23.0](https://github.com/ant-design/pro-editor/compare/v0.22.0...v0.23.0) +## [Version 0.23.0](https://github.com/ant-design/pro-editor/compare/v0.22.0...v0.23.0) Released on **2023-10-31** @@ -756,7 +756,7 @@ -## [Version 0.22.0](https://github.com/ant-design/pro-editor/compare/v0.21.0...v0.22.0) +## [Version 0.22.0](https://github.com/ant-design/pro-editor/compare/v0.21.0...v0.22.0) Released on **2023-10-31** @@ -793,7 +793,7 @@ -## [Version 0.21.0](https://github.com/ant-design/pro-editor/compare/v0.20.5...v0.21.0) +## [Version 0.21.0](https://github.com/ant-design/pro-editor/compare/v0.20.5...v0.21.0) Released on **2023-10-13** @@ -830,7 +830,7 @@ -### [Version 0.20.5](https://github.com/ant-design/pro-editor/compare/v0.20.4...v0.20.5) +### [Version 0.20.5](https://github.com/ant-design/pro-editor/compare/v0.20.4...v0.20.5) Released on **2023-09-18** @@ -845,7 +845,7 @@ #### What's fixed -- 修复 FieldTitle 样式错误, closes [#92](https://github.com/ant-design/pro-editor/issues/92) ([789172e](https://github.com/ant-design/pro-editor/commit/789172e)) +- 修复 FieldTitle 样式错误，closes [#92](https://github.com/ant-design/pro-editor/issues/92) ([789172e](https://github.com/ant-design/pro-editor/commit/789172e)) @@ -855,7 +855,7 @@ -### [Version 0.20.4](https://github.com/ant-design/pro-editor/compare/v0.20.3...v0.20.4) +### [Version 0.20.4](https://github.com/ant-design/pro-editor/compare/v0.20.3...v0.20.4) Released on **2023-09-15** @@ -880,7 +880,7 @@ -### [Version 0.20.3](https://github.com/ant-design/pro-editor/compare/v0.20.2...v0.20.3) +### [Version 0.20.3](https://github.com/ant-design/pro-editor/compare/v0.20.2...v0.20.3) Released on **2023-09-15** @@ -906,7 +906,7 @@ -### [Version 0.20.2](https://github.com/ant-design/pro-editor/compare/v0.20.1...v0.20.2) +### [Version 0.20.2](https://github.com/ant-design/pro-editor/compare/v0.20.1...v0.20.2) Released on **2023-09-13** @@ -931,7 +931,7 @@ -### [Version 0.20.1](https://github.com/ant-design/pro-editor/compare/v0.20.0...v0.20.1) +### [Version 0.20.1](https://github.com/ant-design/pro-editor/compare/v0.20.0...v0.20.1) Released on **2023-09-12** @@ -956,7 +956,7 @@ -## [Version 0.20.0](https://github.com/ant-design/pro-editor/compare/v0.19.1...v0.20.0) +## [Version 0.20.0](https://github.com/ant-design/pro-editor/compare/v0.19.1...v0.20.0) Released on **2023-09-08** @@ -990,7 +990,7 @@ -### [Version 0.19.1](https://github.com/ant-design/pro-editor/compare/v0.19.0...v0.19.1) +### [Version 0.19.1](https://github.com/ant-design/pro-editor/compare/v0.19.0...v0.19.1) Released on **2023-09-07** @@ -1016,7 +1016,7 @@ -## [Version 0.19.0](https://github.com/ant-design/pro-editor/compare/v0.18.1...v0.19.0) +## [Version 0.19.0](https://github.com/ant-design/pro-editor/compare/v0.18.1...v0.19.0) Released on **2023-09-06** @@ -1049,7 +1049,7 @@ -### [Version 0.18.1](https://github.com/ant-design/pro-editor/compare/v0.18.0...v0.18.1) +### [Version 0.18.1](https://github.com/ant-design/pro-editor/compare/v0.18.0...v0.18.1) Released on **2023-09-04** @@ -1074,7 +1074,7 @@ -## [Version 0.18.0](https://github.com/ant-design/pro-editor/compare/v0.17.0...v0.18.0) +## [Version 0.18.0](https://github.com/ant-design/pro-editor/compare/v0.17.0...v0.18.0) Released on **2023-09-01** @@ -1108,7 +1108,7 @@ -## [Version 0.17.0](https://github.com/ant-design/pro-editor/compare/v0.16.0...v0.17.0) +## [Version 0.17.0](https://github.com/ant-design/pro-editor/compare/v0.16.0...v0.17.0) Released on **2023-08-31** @@ -1143,7 +1143,7 @@ -## [Version 0.16.0](https://github.com/ant-design/pro-editor/compare/v0.15.0...v0.16.0) +## [Version 0.16.0](https://github.com/ant-design/pro-editor/compare/v0.15.0...v0.16.0) Released on **2023-08-31** @@ -1153,7 +1153,7 @@ #### 🐛 修复 -- DispatchListData error, 修复控制台报错, 去除自动生成 ID 的逻辑,改为由用户自行传递 ID. +- DispatchListData error, 修复控制台报错，去除自动生成 ID 的逻辑，改为由用户自行传递 ID.
@@ -1178,7 +1178,7 @@ -## [Version 0.15.0](https://github.com/ant-design/pro-editor/compare/v0.14.1...v0.15.0) +## [Version 0.15.0](https://github.com/ant-design/pro-editor/compare/v0.14.1...v0.15.0) Released on **2023-08-30** @@ -1203,13 +1203,13 @@ -### [Version 0.14.1](https://github.com/ant-design/pro-editor/compare/v0.14.0...v0.14.1) +### [Version 0.14.1](https://github.com/ant-design/pro-editor/compare/v0.14.0...v0.14.1) Released on **2023-08-29** #### 🐛 修复 -- Drag over index lost, 修复 sortableList item 样式问题 && 更新文档, 多实例时的定位错误问题. +- Drag over index lost, 修复 sortableList item 样式问题 && 更新文档，多实例时的定位错误问题.
@@ -1230,13 +1230,13 @@ -## [Version 0.14.0](https://github.com/ant-design/pro-editor/compare/v0.13.1...v0.14.0) +## [Version 0.14.0](https://github.com/ant-design/pro-editor/compare/v0.13.1...v0.14.0) Released on **2023-08-29** #### ✨ 新特性 -- Auto generate id, support getItemStyles, 将创建按钮迁移到 columnList, 自定义创建按钮, 迁移 creatorButtonProps 属性到 columnList. +- Auto generate id, support getItemStyles, 将创建按钮迁移到 columnList, 自定义创建按钮，迁移 creatorButtonProps 属性到 columnList. #### 🐛 修复 @@ -1269,28 +1269,28 @@ -## [Version 0.2.0](https://github.com/ant-design/pro-editor/compare/v0.1.1...v0.2.0) +## [Version 0.2.0](https://github.com/ant-design/pro-editor/compare/v0.1.1...v0.2.0) Released on **2023-08-28** #### ✨ 新特性 -- **component-asset**: CreateUseAssetStore 方法支持导出 AssetProvider, 优化 createTestAssetStore ，便于下游测试, 添加 createTestAssetStore 方法，便于下游测试. -- **pro-editor**: 增加 updateCanvasInteraction 方法, 支持 getCanvasInteraction，并调整 store set、get 命名风格, 支持撤销重做, 支持配置 ProEditorStore 在 devtools 中的名称. +- **component-asset**: CreateUseAssetStore 方法支持导出 AssetProvider, 优化 createTestAssetStore ，便于下游测试，添加 createTestAssetStore 方法，便于下游测试. +- **pro-editor**: 增加 updateCanvasInteraction 方法，支持 getCanvasInteraction，并调整 store set、get 命名风格，支持撤销重做，支持配置 ProEditorStore 在 devtools 中的名称. - **sortable-list**: 导出 SortableListDispatchPayload 类型定义. -- **sortable-tree**: 支持禁用拖拽功能, 新增 sortableRule 函数规则，控制拖动排序. -- Add ActinGroup Components, add c2d2c getDiffPropsWithSchema and getSymbolMasterNameFromProps func, add field component, add more ActionGroup api support & style update, add more antd temple components, SortableList support onChange event, support undo/redo for ProEditor, update Action Css Transition, update snapshot, 完善 AssetStore 数据链路, 实现 AssetStore 与 EditorStore 的状态自动同步, 新增 ContextMenu 组件, 新增 LevaPanel 属性面板, 重构优化 ComponentAsset store 实现，收敛 AssetStore 的定义方式. +- **sortable-tree**: 支持禁用拖拽功能，新增 sortableRule 函数规则，控制拖动排序. +- Add ActinGroup Components, add c2d2c getDiffPropsWithSchema and getSymbolMasterNameFromProps func, add field component, add more ActionGroup api support & style update, add more antd temple components, SortableList support onChange event, support undo/redo for ProEditor, update Action Css Transition, update snapshot, 完善 AssetStore 数据链路，实现 AssetStore 与 EditorStore 的状态自动同步，新增 ContextMenu 组件，新增 LevaPanel 属性面板，重构优化 ComponentAsset store 实现，收敛 AssetStore 的定义方式. #### 🐛 修复 -- **awareness**: 修正类型导出问题, 兼容服务端渲染. -- **component-asset**: 修正 AssetSchema 类型, 修正 CreateAssetStore 的类型，对齐到 ProEditorInstance, 修正类型. -- **excel-table**: 修正 Hansontable 在 server 端的兼容性问题, 修正 Hansontable 在 server 端的兼容性问题. -- **pro-editor**: 修正与 assetStore 的数据同步问题, 调整 devtools api 名称. +- **awareness**: 修正类型导出问题，兼容服务端渲染. +- **component-asset**: 修正 AssetSchema 类型，修正 CreateAssetStore 的类型，对齐到 ProEditorInstance, 修正类型. +- **excel-table**: 修正 Hansontable 在 server 端的兼容性问题，修正 Hansontable 在 server 端的兼容性问题. +- **pro-editor**: 修正与 assetStore 的数据同步问题，调整 devtools api 名称. - **sortable-list**: 兼容默认数据展示. -- **sortable-tree**: 修正 ReactNodeProps 方法类型定义, 修正 SortableTree 在 server 端的兼容性问题, 修正 SortableTree 在 server 端的兼容性问题. +- **sortable-tree**: 修正 ReactNodeProps 方法类型定义，修正 SortableTree 在 server 端的兼容性问题，修正 SortableTree 在 server 端的兼容性问题. - **use-proeditor**: 修正 togglePanelExpand 方法缺失的 bug. -- Fix avatar key, fix config update, fix Input ref props, fix miss deps, github pages css style lost, highlight scroll error, refactor with zustand v4.4 equalFn, remove lucide icon, SortableList 默认空数据处理, test case error, test snapshot udpate, update snapshot, update snapshot, update snapshot, upgrade zustand version, 优化 Input 和 InputNumber 组件的受控变更逻辑, 修正潜藏的 undo/redo bug，并补充单测, 将 antd-style 设为 peer，修正 ThemeProvider 多实例问题, 将 handsontable 模块异步导入，解决 SSR 下无法使用的问题. +- Fix avatar key, fix config update, fix Input ref props, fix miss deps, github pages css style lost, highlight scroll error, refactor with zustand v4.4 equalFn, remove lucide icon, SortableList 默认空数据处理，test case error, test snapshot udpate, update snapshot, update snapshot, update snapshot, upgrade zustand version, 优化 Input 和 InputNumber 组件的受控变更逻辑，修正潜藏的 undo/redo bug，并补充单测，将 antd-style 设为 peer，修正 ThemeProvider 多实例问题，将 handsontable 模块异步导入，解决 SSR 下无法使用的问题. #### 💄 样式 @@ -1313,7 +1313,7 @@ - **pro-editor**: 支持配置 ProEditorStore 在 devtools 中的名称 ([2cedbb3](https://github.com/ant-design/pro-editor/commit/2cedbb3)) - **sortable-list**: 导出 SortableListDispatchPayload 类型定义 ([f47782b](https://github.com/ant-design/pro-editor/commit/f47782b)) - **sortable-tree**: 支持禁用拖拽功能 ([9a00235](https://github.com/ant-design/pro-editor/commit/9a00235)) -- **sortable-tree**: 新增 sortableRule 函数规则，控制拖动排序, closes [#46](https://github.com/ant-design/pro-editor/issues/46) ([e941865](https://github.com/ant-design/pro-editor/commit/e941865)) +- **sortable-tree**: 新增 sortableRule 函数规则，控制拖动排序，closes [#46](https://github.com/ant-design/pro-editor/issues/46) ([e941865](https://github.com/ant-design/pro-editor/commit/e941865)) - Add ActinGroup Components ([231d713](https://github.com/ant-design/pro-editor/commit/231d713)) - Add c2d2c getDiffPropsWithSchema and getSymbolMasterNameFromProps func, closes [#52](https://github.com/ant-design/pro-editor/issues/52) ([aa62185](https://github.com/ant-design/pro-editor/commit/aa62185)) - Add field component, closes [#49](https://github.com/ant-design/pro-editor/issues/49) ([dfdfd16](https://github.com/ant-design/pro-editor/commit/dfdfd16)) @@ -1360,7 +1360,7 @@ - Update snapshot ([511defb](https://github.com/ant-design/pro-editor/commit/511defb)) - Update snapshot ([53e7dfb](https://github.com/ant-design/pro-editor/commit/53e7dfb)) - Upgrade zustand version ([1fc2daa](https://github.com/ant-design/pro-editor/commit/1fc2daa)) -- 优化 Input 和 InputNumber 组件的受控变更逻辑, closes [#45](https://github.com/ant-design/pro-editor/issues/45) ([e1c7d4f](https://github.com/ant-design/pro-editor/commit/e1c7d4f)) +- 优化 Input 和 InputNumber 组件的受控变更逻辑，closes [#45](https://github.com/ant-design/pro-editor/issues/45) ([e1c7d4f](https://github.com/ant-design/pro-editor/commit/e1c7d4f)) - 修正潜藏的 undo/redo bug，并补充单测 ([d1e3cc1](https://github.com/ant-design/pro-editor/commit/d1e3cc1)) - 将 antd-style 设为 peer，修正 ThemeProvider 多实例问题 ([4ab40d7](https://github.com/ant-design/pro-editor/commit/4ab40d7)) - 将 handsontable 模块异步导入，解决 SSR 下无法使用的问题 ([ab69afd](https://github.com/ant-design/pro-editor/commit/ab69afd)) @@ -1378,7 +1378,7 @@ -## [Version 0.13.0](https://github.com/ant-design/pro-editor/compare/v0.12.1...v0.13.0) +## [Version 0.13.0](https://github.com/ant-design/pro-editor/compare/v0.12.1...v0.13.0) Released on **2023-08-23** @@ -1405,7 +1405,7 @@ -### [Version 0.12.1](https://github.com/ant-design/pro-editor/compare/v0.12.0...v0.12.1) +### [Version 0.12.1](https://github.com/ant-design/pro-editor/compare/v0.12.0...v0.12.1) Released on **2023-08-22** @@ -1431,7 +1431,7 @@ -## [Version 0.12.0](https://github.com/ant-design/pro-editor/compare/v0.11.0...v0.12.0) +## [Version 0.12.0](https://github.com/ant-design/pro-editor/compare/v0.11.0...v0.12.0) Released on **2023-08-15** @@ -1464,7 +1464,7 @@ -## [Version 0.11.0](https://github.com/ant-design/pro-editor/compare/v0.10.0...v0.11.0) +## [Version 0.11.0](https://github.com/ant-design/pro-editor/compare/v0.10.0...v0.11.0) Released on **2023-08-14** @@ -1498,7 +1498,7 @@ -## [Version 0.10.0](https://github.com/ant-design/pro-editor/compare/v0.9.0...v0.10.0) +## [Version 0.10.0](https://github.com/ant-design/pro-editor/compare/v0.9.0...v0.10.0) Released on **2023-08-01** @@ -1531,7 +1531,7 @@ -## [Version 0.9.0](https://github.com/ant-design/pro-editor/compare/v0.8.0...v0.9.0) +## [Version 0.9.0](https://github.com/ant-design/pro-editor/compare/v0.8.0...v0.9.0) Released on **2023-07-24** @@ -1556,7 +1556,7 @@ -## [Version 0.8.0](https://github.com/ant-design/pro-editor/compare/v0.7.2...v0.8.0) +## [Version 0.8.0](https://github.com/ant-design/pro-editor/compare/v0.7.2...v0.8.0) Released on **2023-07-03** @@ -1571,7 +1571,7 @@ #### What's improved -- **sortable-tree**: 新增 sortableRule 函数规则，控制拖动排序, closes [#46](https://github.com/ant-design/pro-editor/issues/46) ([9b8d127](https://github.com/ant-design/pro-editor/commit/9b8d127)) +- **sortable-tree**: 新增 sortableRule 函数规则，控制拖动排序，closes [#46](https://github.com/ant-design/pro-editor/issues/46) ([9b8d127](https://github.com/ant-design/pro-editor/commit/9b8d127)) @@ -1581,7 +1581,7 @@ -### [Version 0.7.2](https://github.com/ant-design/pro-editor/compare/v0.7.1...v0.7.2) +### [Version 0.7.2](https://github.com/ant-design/pro-editor/compare/v0.7.1...v0.7.2) Released on **2023-07-03** @@ -1606,7 +1606,7 @@ -### [Version 0.7.1](https://github.com/ant-design/pro-editor/compare/v0.7.0...v0.7.1) +### [Version 0.7.1](https://github.com/ant-design/pro-editor/compare/v0.7.0...v0.7.1) Released on **2023-07-03** @@ -1621,7 +1621,7 @@ #### What's fixed -- 优化 Input 和 InputNumber 组件的受控变更逻辑, closes [#45](https://github.com/ant-design/pro-editor/issues/45) ([e903a6b](https://github.com/ant-design/pro-editor/commit/e903a6b)) +- 优化 Input 和 InputNumber 组件的受控变更逻辑，closes [#45](https://github.com/ant-design/pro-editor/issues/45) ([e903a6b](https://github.com/ant-design/pro-editor/commit/e903a6b)) @@ -1631,7 +1631,7 @@ -## [Version 0.7.0](https://github.com/ant-design/pro-editor/compare/v0.6.0...v0.7.0) +## [Version 0.7.0](https://github.com/ant-design/pro-editor/compare/v0.6.0...v0.7.0) Released on **2023-06-25** @@ -1656,7 +1656,7 @@ -## [Version 0.6.0](https://github.com/ant-design/pro-editor/compare/v0.5.0...v0.6.0) +## [Version 0.6.0](https://github.com/ant-design/pro-editor/compare/v0.5.0...v0.6.0) Released on **2023-06-20** @@ -1681,7 +1681,7 @@ -## [Version 0.5.0](https://github.com/ant-design/pro-editor/compare/v0.4.2...v0.5.0) +## [Version 0.5.0](https://github.com/ant-design/pro-editor/compare/v0.4.2...v0.5.0) Released on **2023-06-19** @@ -1691,10 +1691,10 @@ #### 🐛 修复 -- **awareness**: 修正类型导出问题, 兼容服务端渲染. +- **awareness**: 修正类型导出问题，兼容服务端渲染. - **component-asset**: 修正 AssetSchema 类型. -- **excel-table**: 修正 Hansontable 在 server 端的兼容性问题, 修正 Hansontable 在 server 端的兼容性问题. -- **sortable-tree**: 修正 SortableTree 在 server 端的兼容性问题, 修正 SortableTree 在 server 端的兼容性问题. +- **excel-table**: 修正 Hansontable 在 server 端的兼容性问题，修正 Hansontable 在 server 端的兼容性问题. +- **sortable-tree**: 修正 SortableTree 在 server 端的兼容性问题，修正 SortableTree 在 server 端的兼容性问题. - Fix Input ref props, 将 antd-style 设为 peer，修正 ThemeProvider 多实例问题.
@@ -1726,7 +1726,7 @@ -## [Version 0.5.0-alpha.8](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.7...v0.5.0-alpha.8) +## [Version 0.5.0-alpha.8](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.7...v0.5.0-alpha.8) Released on **2023-06-18** @@ -1751,7 +1751,7 @@ -## [Version 0.5.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.6...v0.5.0-alpha.7) +## [Version 0.5.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.6...v0.5.0-alpha.7) Released on **2023-06-18** @@ -1776,7 +1776,7 @@ -## [Version 0.5.0-alpha.6](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.5...v0.5.0-alpha.6) +## [Version 0.5.0-alpha.6](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.5...v0.5.0-alpha.6) Released on **2023-06-18** @@ -1801,7 +1801,7 @@ -## [Version 0.5.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.4...v0.5.0-alpha.5) +## [Version 0.5.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.4...v0.5.0-alpha.5) Released on **2023-06-18** @@ -1826,7 +1826,7 @@ -## [Version 0.5.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.3...v0.5.0-alpha.4) +## [Version 0.5.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.3...v0.5.0-alpha.4) Released on **2023-06-18** @@ -1853,7 +1853,7 @@ -## [Version 0.5.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.2...v0.5.0-alpha.3) +## [Version 0.5.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.2...v0.5.0-alpha.3) Released on **2023-06-18** @@ -1878,7 +1878,7 @@ -## [Version 0.5.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.1...v0.5.0-alpha.2) +## [Version 0.5.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.1...v0.5.0-alpha.2) Released on **2023-06-17** @@ -1903,7 +1903,7 @@ -## [Version 0.5.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.4.2-alpha.2...v0.5.0-alpha.1) +## [Version 0.5.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.4.2-alpha.2...v0.5.0-alpha.1) Released on **2023-06-16** @@ -1928,7 +1928,7 @@ -### [Version 0.4.2](https://github.com/ant-design/pro-editor/compare/v0.4.1...v0.4.2) +### [Version 0.4.2](https://github.com/ant-design/pro-editor/compare/v0.4.1...v0.4.2) Released on **2023-06-18** @@ -1953,7 +1953,7 @@ -### [Version 0.4.2-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.4.2-alpha.1...v0.4.2-alpha.2) +### [Version 0.4.2-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.4.2-alpha.1...v0.4.2-alpha.2) Released on **2023-06-16** @@ -1978,7 +1978,7 @@ -### [Version 0.4.2-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.4.1...v0.4.2-alpha.1) +### [Version 0.4.2-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.4.1...v0.4.2-alpha.1) Released on **2023-06-16** @@ -2003,7 +2003,7 @@ -### [Version 0.4.1](https://github.com/ant-design/pro-editor/compare/v0.4.0...v0.4.1) +### [Version 0.4.1](https://github.com/ant-design/pro-editor/compare/v0.4.0...v0.4.1) Released on **2023-06-15** @@ -2028,19 +2028,19 @@ -## [Version 0.4.0](https://github.com/ant-design/pro-editor/compare/v0.3.0...v0.4.0) +## [Version 0.4.0](https://github.com/ant-design/pro-editor/compare/v0.3.0...v0.4.0) Released on **2023-06-15** #### ✨ 新特性 -- **component-asset**: CreateUseAssetStore 方法支持导出 AssetProvider, 优化 createTestAssetStore ，便于下游测试, 添加 createTestAssetStore 方法，便于下游测试. -- **pro-editor**: 增加 updateCanvasInteraction 方法, 支持 getCanvasInteraction，并调整 store set、get 命名风格, 支持配置 ProEditorStore 在 devtools 中的名称. +- **component-asset**: CreateUseAssetStore 方法支持导出 AssetProvider, 优化 createTestAssetStore ，便于下游测试，添加 createTestAssetStore 方法，便于下游测试. +- **pro-editor**: 增加 updateCanvasInteraction 方法，支持 getCanvasInteraction，并调整 store set、get 命名风格，支持配置 ProEditorStore 在 devtools 中的名称. #### 🐛 修复 - **component-asset**: 修正 CreateAssetStore 的类型，对齐到 ProEditorInstance, 修正类型. -- **pro-editor**: 修正与 assetStore 的数据同步问题, 调整 devtools api 名称. +- **pro-editor**: 修正与 assetStore 的数据同步问题，调整 devtools api 名称. - **sortable-tree**: 修正 ReactNodeProps 方法类型定义.
@@ -2073,7 +2073,7 @@ -## [Version 0.4.0-alpha.8](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.7...v0.4.0-alpha.8) +## [Version 0.4.0-alpha.8](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.7...v0.4.0-alpha.8) Released on **2023-06-15** @@ -2098,7 +2098,7 @@ -## [Version 0.4.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.6...v0.4.0-alpha.7) +## [Version 0.4.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.6...v0.4.0-alpha.7) Released on **2023-06-15** @@ -2125,7 +2125,7 @@ -## [Version 0.4.0-alpha.6](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.5...v0.4.0-alpha.6) +## [Version 0.4.0-alpha.6](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.5...v0.4.0-alpha.6) Released on **2023-06-15** @@ -2150,7 +2150,7 @@ -## [Version 0.4.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.4...v0.4.0-alpha.5) +## [Version 0.4.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.4...v0.4.0-alpha.5) Released on **2023-06-15** @@ -2183,7 +2183,7 @@ -## [Version 0.4.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.3...v0.4.0-alpha.4) +## [Version 0.4.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.3...v0.4.0-alpha.4) Released on **2023-06-15** @@ -2208,7 +2208,7 @@ -## [Version 0.4.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.2...v0.4.0-alpha.3) +## [Version 0.4.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.2...v0.4.0-alpha.3) Released on **2023-06-15** @@ -2233,7 +2233,7 @@ -## [Version 0.4.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.1...v0.4.0-alpha.2) +## [Version 0.4.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.1...v0.4.0-alpha.2) Released on **2023-06-14** @@ -2258,7 +2258,7 @@ -## [Version 0.4.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.3.0...v0.4.0-alpha.1) +## [Version 0.4.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.3.0...v0.4.0-alpha.1) Released on **2023-06-14** @@ -2291,13 +2291,13 @@ -## [Version 0.3.0](https://github.com/ant-design/pro-editor/compare/v0.2.3...v0.3.0) +## [Version 0.3.0](https://github.com/ant-design/pro-editor/compare/v0.2.3...v0.3.0) Released on **2023-06-14** #### ✨ 新特性 -- Support undo/redo for ProEditor, 完善 AssetStore 数据链路, 实现 AssetStore 与 EditorStore 的状态自动同步, 新增 ContextMenu 组件, 新增 LevaPanel 属性面板, 重构优化 ComponentAsset store 实现，收敛 AssetStore 的定义方式. +- Support undo/redo for ProEditor, 完善 AssetStore 数据链路，实现 AssetStore 与 EditorStore 的状态自动同步，新增 ContextMenu 组件，新增 LevaPanel 属性面板，重构优化 ComponentAsset store 实现，收敛 AssetStore 的定义方式. #### 🐛 修复 @@ -2341,7 +2341,7 @@ -## [Version 0.3.0-alpha.8](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.7...v0.3.0-alpha.8) +## [Version 0.3.0-alpha.8](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.7...v0.3.0-alpha.8) Released on **2023-06-14** @@ -2374,13 +2374,13 @@ -## [Version 0.3.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.6...v0.3.0-alpha.7) +## [Version 0.3.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.6...v0.3.0-alpha.7) Released on **2023-06-14** #### ✨ 新特性 -- 实现 AssetStore 与 EditorStore 的状态自动同步, 新增 LevaPanel 属性面板. +- 实现 AssetStore 与 EditorStore 的状态自动同步，新增 LevaPanel 属性面板.
@@ -2400,7 +2400,7 @@ -## [Version 0.3.0-alpha.6](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.5...v0.3.0-alpha.6) +## [Version 0.3.0-alpha.6](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.5...v0.3.0-alpha.6) Released on **2023-06-13** @@ -2425,7 +2425,7 @@ -## [Version 0.3.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.4...v0.3.0-alpha.5) +## [Version 0.3.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.4...v0.3.0-alpha.5) Released on **2023-06-13** @@ -2450,7 +2450,7 @@ -## [Version 0.3.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.3...v0.3.0-alpha.4) +## [Version 0.3.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.3...v0.3.0-alpha.4) Released on **2023-06-13** @@ -2475,7 +2475,7 @@ -## [Version 0.3.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.2...v0.3.0-alpha.3) +## [Version 0.3.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.2...v0.3.0-alpha.3) Released on **2023-06-13** @@ -2500,7 +2500,7 @@ -## [Version 0.3.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.1...v0.3.0-alpha.2) +## [Version 0.3.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.1...v0.3.0-alpha.2) Released on **2023-06-13** @@ -2525,7 +2525,7 @@ -## [Version 0.3.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.2.3...v0.3.0-alpha.1) +## [Version 0.3.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.2.3...v0.3.0-alpha.1) Released on **2023-06-13** @@ -2558,7 +2558,7 @@ -### [Version 0.2.3](https://github.com/ant-design/pro-editor/compare/v0.2.2...v0.2.3) +### [Version 0.2.3](https://github.com/ant-design/pro-editor/compare/v0.2.2...v0.2.3) Released on **2023-06-13** @@ -2583,7 +2583,7 @@ -### [Version 0.2.2](https://github.com/ant-design/pro-editor/compare/v0.2.1...v0.2.2) +### [Version 0.2.2](https://github.com/ant-design/pro-editor/compare/v0.2.1...v0.2.2) Released on **2023-06-13** @@ -2600,7 +2600,7 @@ -### [Version 0.2.2-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.2.1...v0.2.2-alpha.1) +### [Version 0.2.2-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.2.1...v0.2.2-alpha.1) Released on **2023-06-13** @@ -2617,7 +2617,7 @@ -### Version 0.2.1 +### Version 0.2.1 Released on **2023-06-12** @@ -2627,7 +2627,7 @@ #### 🐛 修复 -- Fix avatar key, github pages css style lost, SortableList 默认空数据处理, test case error, 将 handsontable 模块异步导入，解决 SSR 下无法使用的问题. +- Fix avatar key, github pages css style lost, SortableList 默认空数据处理，test case error, 将 handsontable 模块异步导入，解决 SSR 下无法使用的问题.
diff --git a/README.md b/README.md index 7ff9b5fd..c7d9afe2 100644 --- a/README.md +++ b/README.md @@ -1,65 +1,77 @@ - - -

- - - -

- -

Ant Design ProEditor

-
-🌟 An Editor UI Framework and Components - -[Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url] - - - -[![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![install size][npm-size]][npm-size-url] - -[![Test CI status][test-ci]][test-ci-url] [![Deploy CI][release-ci]][release-ci-url] [![Coverage][coverage]][codecov-url] + -[![contributors][contributors-shield]][contributors-url] [![forks][forks-shield]][forks-url] [![stargazers][stargazers-shield]][stargazers-url] [![issues][issues-shield]][issues-url] +

ProEditor

-[![ docs by dumi][dumi-url]](https://d.umijs.org/) [![Build With father][father-url]](https://github.com/umijs/father/) +The Ultimate Editor UI Framework and Components - +[![][npm-release-shield]][npm-release-link] +[![][npm-downloads-shield]][npm-downloads-link] +[![][github-releasedate-shield]][github-releasedate-link] +[![][github-action-test-shield]][github-action-test-link] +[![][github-action-release-shield]][github-action-release-link] +[![][codecov-shield]][codecov-link]
+[![][github-contributors-shield]][github-contributors-link] +[![][github-forks-shield]][github-forks-link] +[![][github-stars-shield]][github-stars-link] +[![][github-issues-shield]][github-issues-link] +[![][github-license-shield]][github-license-link]
+[![][ant-design-shield]][ant-design-link] +[![][devops-dumi-shield]][devops-dumi-link] +[![][devops-father-shield]][devops-father-link] - +English · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) . [Report Bug][github-issues-link] · [Request Feature][github-issues-link] - +![](https://gw.alipayobjects.com/zos/kitchen/2rXP4ZVHCo/pro-editor.webp) - - - +
- +
+Table of contents - +#### TOC - +- [📦 Installation](#-installation) + - [Compile with Next.js](#compile-with-nextjs) +- [🔨 Usage](#-usage) +- [✨ Features](#-features) + - [Empowering Features of ProEditor](#empowering-features-of-proeditor) + - [Framework Architecture](#framework-architecture) +- [👀 Showcase](#-showcase) +- [🖥 Browser compatibility](#-browser-compatibility) +- [⌨️ Local Development](#️-local-development) +- [🤝 Contributing](#-contributing) +- [🛣️ Ecosystem](#️-ecosystem) - +#### - +
-## 📦 Install +## 📦 Installation -This component library is [pure ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). +> \[!IMPORTANT]\ +> This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). -Install via npm: +To install `@ant-design/pro-editor`, run the following command: ```bash -$ npm install @ant-design/pro-editor +$ pnpm install @ant-design/pro-editor ``` -Install via pnpm: +### Compile with Next.js -```bash -$ pnpm add @ant-design/pro-editor +> \[!NOTE]\ +> By work correct with Next.js SSR, add `transpilePackages: ['@ant-design/pro-editor']` to `next.config.js`. For example: + +```js +const nextConfig = { + transpilePackages: ['@ant-design/pro-editor', 'leva'], +}; ``` +
+ ## 🔨 Usage ```jsx @@ -77,102 +89,193 @@ export default () => ( ); ``` -### Adapt to NextJS +
-To adapt to nextjs's SSR mode, you need to add the relevant dependencies of this package to the `transpilePackages` configuration in `next.config.js`: +## ✨ Features -```js -// next.config.js -const nextConfig = { - // ...other config - transpilePackages: ['@ant-design/pro-editor', 'leva'], -}; -``` +> \[!NOTE] +> +> Front-end component libraries have revolutionized development, boosting efficiency by orders of magnitude and elevating user experience. Yet, as mature as libraries like Ant Design (antd) and ProComponents are, one might wonder if there's any room left for innovation. -## ⌨️ Development +[![](https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=637603722&image_size=auto&color_scheme=dark)](https://next.ossinsight.io/widgets/official/compose-activity-trends?repo_id=637603722) -```bash -$ git clone git@github.com:ant-design/pro-editor.git -$ cd pro-editor -$ npm install -$ npm start -``` +
-Open your browser and visit +### Empowering Features of ProEditor -
+> \[!NOTE] +> +> We envision ProEditor as the foundational library for editing components, akin to antd, enabling developers to easily create complex interactive components with an inherently superior user experience. This is the rationale behind the `ProEditor`. -[![][back-to-top]](#readme-top) +**Our Principles for ProEditor:** -
+- 🖐️ **Intuitive Editing**: Supports natural user interactions like multi-selection, deselection, and keyboard shortcuts, ensuring a smooth editing experience. +- ✨ **Refined by Default**: Enhances Ant Design components to deliver a superior user experience with more polish and refinement. +- 🔧 **Open Flexibility**: Provides atomic-level capabilities, offering a wide range of components, hooks, and utility functions for extensive customization and flexibility. -## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +
-- [Release Guide](https://github.com/ant-design/pro-editor/wiki/release) +**UI Framework and Frontend Component Solutions in the Editor Field:** - +> \[!TIP] +> +> ProEditor concentrates on expanding the limits of the feasible and augmenting the array of tools available to developers for the construction of sophisticated, interactive, and user-centric web applications. For instance: -> 📊 Total: **7** +- 📦 **DraggablePanel**: Allows for resizable and movable panels, enhancing the interactivity of the user interface. +- 📝 **ColumnList**: Offers a user-friendly sortable list that is manageable through column definitions, simplifying complex list interactions. +- 🎨 **FreeCanvas**: Provides a zoomable canvas similar to applications like Sketch or Figma, giving users a vast space for creative design. +- 🔍 **IconPicker**: An icon selection tool that is compatible with iconfont, making it easier to integrate a wide range of icons into the design. +- 👥 **Online Collaboration**: Incorporates multi-user capabilities using technologies like yjs and zustand store, enabling real-time collaborative editing and interaction. - - - - - - - - - - - - - - - - - - - - +
+ +### Framework Architecture + +ProEditor is structured to facilitate these principles effectively. + +![][architecture] + +
+ +## 👀 Showcase + +Let's showcase some of ProEditor's signature components: + +| **DraggablePanel** | **ColumnList** | +| :-------------------------------------------------------: | :-------------------------------------------------------: | +| For resizable and movable panels | A user-friendly sortable list based on column definitions | +| ![][prevew-1] | ![][prevew-2] | +| **FreeCanvas** | **IconPicker** | +| A limitless zoomable canvas akin to Sketch or Figma | An icon selection tool compatible with iconfont | +| ![][prevew-3] | ![][prevew-4] | +| **Online Collaboration** | | +| Multi-user capabilities wrapped in yjs and zustand store. | | +| ![][prevew-5] | | + +
+ +## 🖥 Browser compatibility + +> \[!NOTE] +> +> - Modern browsers and Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)) +> - [Electron](https://www.electronjs.org/) + +| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) | +| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | + +
+ +## ⌨️ Local Development + +You can use Github Codespaces for online development: + +[![][github-codespace-shield]][github-codespace-link] + +Or clone it for local development: + +```bash +$ git clone https://github.com/ant-design/pro-editor.git +$ cd pro-editor +$ pnpm install +$ pnpm dev +``` + +
+ +## 🤝 Contributing + +> \[!IMPORTANT] +> +> Join our collaborative ecosystem. Your contributions are the heartbeat of our project. Here's how you can be an integral part of our vibrant community: + +- **Integrate and Innovate**: Incorporate Ant Design Pro, umi, and ProEditor into your projects. Your real-world usage and feedback are invaluable to us. +- **Voice Your Insights**: Encounter a glitch? Have a query? Your perspectives matter. Share them by submitting [issues][github-issues-link] and help us enhance the user experience. +- **Shape the Future**: Have code enhancements or feature ideas? We invite you to propose [pull requests][pr-welcome-link] and contribute directly to the evolution of our codebase. + +Every contribution, big or small, is celebrated. Join us in our mission to refine and elevate the world of open-source enterprise UI components. 😃 + +[![][pr-welcome-shield]][pr-welcome-link] + + + + + + + + + + + + + +
+


+
+ + + +
+ +
- +
-
+## 🛣️ Ecosystem -[![][back-to-top]](#readme-top) +- **[ProComponents](https://github.com/ant-design/pro-components)** - Designed for Enterprise-Level Application, Use Ant Design like a Pro!. +- **[ProEditor](https://github.com/ant-design/pro-editor)** - The Ultimate Editor UI Framework and Components. +- **[ProFlow](https://github.com/ant-design/pro-flow)** - A Flow Editor Framework base on React-Flow. +- **[ProChat](https://github.com/ant-design/pro-chat)** - Components Library for Quickly Building LLM Chat Interfaces. -
+
+ +--- #### 📝 License -Copyright © 2023 - present AFX & [Ant Digital](antdigital.com)
+Copyright © 2023 - present [AFX][ant-design-link] & [Ant Digital](https://antdigital.com).
This project is [MIT](./LICENSE) licensed. - - -[gitpod-badge]: https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod -[gitpod-url]: https://gitpod.io/#https://github.com/ant-design/@ant-design/pro-editor -[dumi-url]: https://img.shields.io/badge/docs%20by-dumi-blue -[father-url]: https://img.shields.io/badge/build%20with-father-028fe4.svg -[npm-image]: https://img.shields.io/npm/v/@ant-design/pro-editor.svg?style=flat-square&color=deepgreen&label=latest -[npm-url]: https://npmjs.org/package/@ant-design/pro-editor -[npm-size]: https://img.shields.io/bundlephobia/minzip/@ant-design/pro-editor?color=deepgreen&label=gizpped%20size&style=flat-square -[npm-size-url]: https://packagephobia.com/result?p=@ant-design/pro-editor -[coverage]: https://codecov.io/gh/ant-design/pro-editor/branch/main/graph/badge.svg -[codecov-url]: https://codecov.io/gh/ant-design/pro-editor/branch/main -[test-ci]: https://github.com/ant-design/pro-editor/actions/workflows/test.yml/badge.svg -[test-ci-url]: https://github.com/ant-design/pro-editor/actions/workflows/test.yml -[release-ci]: https://github.com/ant-design/pro-editor/actions/workflows/release.yml/badge.svg -[release-ci-url]: https://github.com/ant-design/pro-editor/actions/workflows/release.yml/ -[download-image]: https://img.shields.io/npm/dm/@ant-design/pro-editor.svg?style=flat-square -[download-url]: https://npmjs.org/package/@ant-design/pro-editor -[contributors-shield]: https://img.shields.io/github/contributors/ant-design/pro-editor.svg?style=flat -[contributors-url]: https://github.com/ant-design/pro-editor/graphs/contributors -[forks-shield]: https://img.shields.io/github/forks/ant-design/pro-editor.svg?style=flat -[forks-url]: https://github.com/ant-design/pro-editor/network/members -[stargazers-shield]: https://img.shields.io/github/stars/ant-design/pro-editor.svg?style=flat -[stargazers-url]: https://github.com/ant-design/pro-editor/stargazers -[issues-shield]: https://img.shields.io/github/issues/ant-design/pro-editor.svg?style=flat -[issues-url]: https://github.com/ant-design/pro-editor/issues/new/choose -[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square + + +[ant-design-link]: https://ant.design +[ant-design-shield]: https://img.shields.io/badge/-Ant%20Design-1677FF?labelColor=black&logo=antdesign&style=flat-square +[architecture]: https://gw.alipayobjects.com/zos/kitchen/2F0sXx1uad/architecture.webp +[codecov-link]: https://codecov.io/gh/ant-design/pro-editor +[codecov-shield]: https://img.shields.io/codecov/c/github/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square&logo=codecov&logoColor=white +[devops-dumi-link]: https://d.umijs.org/ +[devops-dumi-shield]: https://img.shields.io/badge/docs%20by-dumi-blue?color=1677FF&labelColor=black&style=flat-square +[devops-father-link]: https://github.com/umijs/father +[devops-father-shield]: https://img.shields.io/badge/build%20with-father-028fe4.svg?color=1677FF&labelColor=black&style=flat-square +[github-action-release-link]: https://github.com/ant-design/pro-editor/actions/workflows/release.yml +[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-editor/release.yml?color=1677FF&label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square +[github-action-test-link]: https://github.com/ant-design/pro-editor/actions/workflows/test.yml +[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-editor/test.yml?color=1677FF&label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square +[github-codespace-link]: https://codespaces.new/ant-design/pro-editor +[github-codespace-shield]: https://github.com/codespaces/badge.svg +[github-contributors-link]: https://github.com/ant-design/pro-editor/graphs/contributors +[github-contributors-shield]: https://img.shields.io/github/contributors/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[github-forks-link]: https://github.com/ant-design/pro-editor/network/members +[github-forks-shield]: https://img.shields.io/github/forks/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[github-issues-link]: https://github.com/ant-design/pro-editor/issues +[github-issues-shield]: https://img.shields.io/github/issues/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[github-license-link]: https://github.com/ant-design/pro-editor/blob/main/LICENSE +[github-license-shield]: https://img.shields.io/github/license/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[github-releasedate-link]: https://github.com/ant-design/pro-editor/releases +[github-releasedate-shield]: https://img.shields.io/github/release-date/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[github-stars-link]: https://github.com/ant-design/pro-editor/network/stargazers +[github-stars-shield]: https://img.shields.io/github/stars/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[npm-downloads-link]: https://www.npmjs.com/package/@ant-design/pro-editor +[npm-downloads-shield]: https://img.shields.io/npm/dt/@ant-design/pro-editor?labelColor=black&style=flat-square&color=1677FF +[npm-release-link]: https://www.npmjs.com/package/@ant-design/pro-editor +[npm-release-shield]: https://img.shields.io/npm/v/@ant-design/pro-editor?color=1677FF&labelColor=black&logo=npm&logoColor=white&style=flat-square +[pr-welcome-link]: https://github.com/ant-design/pro-editor/pulls +[pr-welcome-shield]: https://img.shields.io/badge/%E2%9D%A4%EF%B8%8F%20PR%20WELCOME-%E2%86%92-1677FF?labelColor=black&style=for-the-badge +[prevew-1]: https://gw.alipayobjects.com/zos/kitchen/sytsa4%26R%26d/1.gif +[prevew-2]: https://gw.alipayobjects.com/zos/kitchen/2DHhgqlXns/2.gif +[prevew-3]: https://gw.alipayobjects.com/zos/kitchen/KKcuxwR0Pz/3.gif +[prevew-4]: https://gw.alipayobjects.com/zos/kitchen/huuRPs3Kmk/4.gif +[prevew-5]: https://gw.alipayobjects.com/zos/kitchen/SQaNFOJbK4/5.gif diff --git a/README.zh-CN.md b/README.zh-CN.md index 97349743..d84f846c 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,187 +1,281 @@ - +
-

- - - -

+ -

Ant Design ProEditor

+

ProEditor

-
+编辑器领域 UI 框架与前端组件解决方案 -🌟 An Editor UI Framework and Components +[![][npm-release-shield]][npm-release-link] +[![][npm-downloads-shield]][npm-downloads-link] +[![][github-releasedate-shield]][github-releasedate-link] +[![][github-action-test-shield]][github-action-test-link] +[![][github-action-release-shield]][github-action-release-link] +[![][codecov-shield]][codecov-link]
+[![][github-contributors-shield]][github-contributors-link] +[![][github-forks-shield]][github-forks-link] +[![][github-stars-shield]][github-stars-link] +[![][github-issues-shield]][github-issues-link] +[![][github-license-shield]][github-license-link]
+[![][ant-design-shield]][ant-design-link] +[![][devops-dumi-shield]][devops-dumi-link] +[![][devops-father-shield]][devops-father-link] -[Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url] +[English](./README.md)・简体中文・[Changelog](./CHANGELOG.md) . [Report Bug][github-issues-link] · [Request Feature][github-issues-link] - +![](https://gw.alipayobjects.com/zos/kitchen/2rXP4ZVHCo/pro-editor.webp) -[![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![install size][npm-size]][npm-size-url] +
-[![Test CI status][test-ci]][test-ci-url] [![Deploy CI][release-ci]][release-ci-url] [![Coverage][coverage]][codecov-url] +
+目录 -[![contributors][contributors-shield]][contributors-url] [![forks][forks-shield]][forks-url] [![stargazers][stargazers-shield]][stargazers-url] [![issues][issues-shield]][issues-url] +#### 目录 -[![ docs by dumi][dumi-url]](https://d.umijs.org/) [![Build With father][father-url]](https://github.com/umijs/father/) +- [📦 安装](#-安装) + - [使用 Next.js 进行编译](#使用-nextjs-进行编译) +- [🔨 使用](#-使用) +- [✨ 特性](#-特性) + - [ProEditor 的强大特性](#proeditor-的强大特性) + - [框架架构](#框架架构) +- [👀 展示](#-展示) +- [🖥 浏览器兼容性](#-浏览器兼容性) +- [⌨️ 本地开发](#️-本地开发) +- [🤝 贡献](#-贡献) +- [🛣️ 生态系统](#️-生态系统) - +#### -[gitpod-badge]: https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod -[gitpod-url]: https://gitpod.io/#https://github.com/ant-design/@ant-design/pro-editor +
- +## 📦 安装 -[dumi-url]: https://img.shields.io/badge/docs%20by-dumi-blue -[father-url]: https://img.shields.io/badge/build%20with-father-028fe4.svg +> \[!IMPORTANT]\ +> 该包仅支持 [ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)。 - +要安装 `@ant-design/pro-editor`，请运行以下命令： -[npm-image]: https://img.shields.io/npm/v/@ant-design/pro-editor.svg?style=flat-square&color=deepgreen&label=latest -[npm-url]: https://npmjs.org/package/@ant-design/pro-editor -[npm-size]: https://img.shields.io/bundlephobia/minzip/@ant-design/pro-editor?color=deepgreen&label=gizpped%20size&style=flat-square -[npm-size-url]: https://packagephobia.com/result?p=@ant-design/pro-editor +```bash +$ pnpm install @ant-design/pro-editor +``` - +### 使用 Next.js 进行编译 -[coverage]: https://codecov.io/gh/ant-design/pro-editor/branch/main/graph/badge.svg -[codecov-url]: https://codecov.io/gh/ant-design/pro-editor/branch/main +> \[!NOTE]\ +> 为了正确使用 Next.js SSR，请在 `next.config.js` 中添加 `transpilePackages: ['@ant-design/pro-editor']`。例如： - +```js +const nextConfig = { + transpilePackages: ['@ant-design/pro-editor', 'leva'], +}; +``` -[test-ci]: https://github.com/ant-design/pro-editor/actions/workflows/test.yml/badge.svg -[test-ci-url]: https://github.com/ant-design/pro-editor/actions/workflows/test.yml -[release-ci]: https://github.com/ant-design/pro-editor/actions/workflows/release.yml/badge.svg -[release-ci-url]: https://github.com/ant-design/pro-editor/actions/workflows/release.yml/ -[download-image]: https://img.shields.io/npm/dm/@ant-design/pro-editor.svg?style=flat-square -[download-url]: https://npmjs.org/package/@ant-design/pro-editor +
- +## 🔨 使用 -[contributors-shield]: https://img.shields.io/github/contributors/ant-design/pro-editor.svg?style=flat -[contributors-url]: https://github.com/ant-design/pro-editor/graphs/contributors +```jsx +import { SmileOutlined } from '@ant-design/icons'; +import { ActionIcon } from '@ant-design/pro-editor'; - +export default () => ( + } + onClick={() => { + alert('触发动作'); + }} + /> +); +``` -[forks-shield]: https://img.shields.io/github/forks/ant-design/pro-editor.svg?style=flat -[forks-url]: https://github.com/ant-design/pro-editor/network/members +
- +## ✨ 特性 -[stargazers-shield]: https://img.shields.io/github/stars/ant-design/pro-editor.svg?style=flat -[stargazers-url]: https://github.com/ant-design/pro-editor/stargazers +> \[!NOTE] +> +> 前端组件库已经彻底改变了开发方式，极大地提高了效率，提升了用户体验。在各大组件库都趋于成熟的 2023 年，我们为什么要推出 ProEditor ？ - +[![](https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=637603722&image_size=auto&color_scheme=dark)](https://next.ossinsight.io/widgets/official/compose-activity-trends?repo_id=637603722) -[issues-shield]: https://img.shields.io/github/issues/ant-design/pro-editor.svg?style=flat -[issues-url]: https://github.com/ant-design/pro-editor/issues/new/choose +
-
+### ProEditor 的强大功能 -## 📦 Install +> \[!NOTE] +> +> 我们将 ProEditor 视为编辑组件的基础库，类似于 antd，使开发人员能够轻松创建具有内在卓越用户体验的复杂交互式组件。这就是 `ProEditor` 名称的理念所在。 -本组件库为 [纯 ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)。 +**我们对 ProEditor 的原则:** -使用 npm 安装： +- 🖐️ **自然编辑**：支持用户最自然的交互，包括但不限于鼠标多选、反选、快捷键等。 +- ✨ **默认精致**：在 antd 基础组件上更进一步，交互体验上达到默认精致。 +- 🔧 **灵活开放**：所有能力均支持原子化输出，包括但不限于组件、hooks、工具函数等。 -```bash -$ npm install @ant-design/pro-editor -``` +
-使用 pnpm 安装： +**编辑器领域 UI 框架与前端组件解决方案:** -```bash -$ pnpm add @ant-design/pro-editor -``` +> \[!TIP] +> +> 推动了可能性的边界，并增强了开发人员用于创建复杂、交互式和用户友好的 Web 应用程序的工具包，例如： -## 🔨 Usage +- 📦 **DraggablePanel**：允许可调整大小和可移动的面板，增强用户界面的交互性。 +- 📝 **ColumnList**：提供用户友好的可排序列表，通过列定义进行管理，简化了复杂的列表交互。 +- 🎨 **FreeCanvas**：提供类似于 Sketch 或 Figma 的可缩放画布，为用户提供创意设计的广阔空间。 +- 🔍 **IconPicker**：一个与 iconfont 兼容的图标选择工具，使集成各种图标到设计中更加容易。 +- 👥 **在线协作**：利用 yjs 和 zustand store 等技术，融合多用户功能，实现实时协作编辑和交互。 -```jsx -import { SmileOutlined } from '@ant-design/icons'; -import { ActionIcon } from '@ant-design/pro-editor'; +
-export default () => ( - } - onClick={() => { - alert('触发动作'); - }} - /> -); -``` +### 框架架构 -### 适配 NextJS +ProEditor 的架构大致如下： -为适配 nextjs 的 SSR 模式, 需要将本包的相关依赖添加到 `next.config.js` 的 `transpilePackages` 配置中: +![][architecture] -```js -// next.config.js -const nextConfig = { - // ...other config - transpilePackages: ['@ant-design/pro-editor', 'leva'], -}; -``` +
-## ⌨️ Development +## 👀 展示 -```bash -$ git clone git@github.com:ant-design/pro-editor.git -$ cd pro-editor -$ npm install -$ npm start -``` +让我们展示一些 ProEditor 的标志性组件： -Open your browser and visit http://localhost:8000 +| **DraggablePanel** | **ColumnList** | +| :----------------------------------------: | :----------------------------: | +| 可调整大小和可移动的面板 | 基于列定义的用户友好可排序列表 | +| ![][prevew-1] | ![][prevew-2] | +| **FreeCanvas** | **IconPicker** | +| 无限缩放画布，类似于 Sketch 或 Figma | 与 iconfont 兼容的图标选择工具 | +| ![][prevew-3] | ![][prevew-4] | +| **在线协作** | | +| 融合了 yjs 和 zustand store 的多用户功能。 | | +| ![][prevew-5] | | -
+
-[![][back-to-top]](#readme-top) +## 🖥 浏览器兼容性 -
+> \[!NOTE] +> +> - 现代浏览器和 Internet Explorer 11（使用[polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)） +> - [Electron](https://www.electronjs.org/) -## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) | +| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Edge | 最近 2 个版本 | 最近 2 个版本 | 最近 2 个版本 | 最近 2 个版本 | -- [Release Guide](https://github.com/ant-design/pro-editor/wiki/release) +
- +## ⌨️ 本地开发 -> 📊 Total: **7** +您可以使用 Github Codespaces 进行在线开发： - - - - - - - - - - - - - - - - - - - - +[![][github-codespace-shield]][github-codespace-link] + +或者克隆它进行本地开发： + +```bash +$ git clone https://github.com/ant-design/pro-editor.git +$ cd pro-editor +$ pnpm install +$ pnpm dev +``` + +
+ +## 🤝 贡献 + +> \[!IMPORTANT] +> +> 加入我们的协作生态系统。您的贡献是我们项目的心脏。以下是您如何成为我们充满活力的社区的重要组成部分： + +- **整合和创新**：将 Ant Design Pro、umi 和 ProEditor 整合到您的项目中。您的实际使用和反馈对我们至关重要。 +- **发表您的见解**：遇到了问题？有疑问？您的观点很重要。通过提交[问题][github-issues-link]来分享它们，帮助我们提升用户体验。 +- **塑造未来**：有代码增强或功能想法吗？我们邀请您提出[拉取请求][pr-welcome-link]，直接为我们的代码库发展做出贡献。 + +每一次贡献，无论大小，都值得庆祝。加入我们，共同致力于完善和提升开源企业 UI 组件的世界。 😃 + +[![][pr-welcome-shield]][pr-welcome-link] + + + + + + + + + + + + + +
+


+
+ + + +
+ +
- +
-
+## 🛣️ 生态系统 -[![][back-to-top]](#readme-top) +- **[ProComponents](https://github.com/ant-design/pro-components)** - 专为企业级应用设计，像专业人士一样使用 Ant Design！ +- **[ProEditor](https://github.com/ant-design/pro-editor)** - 编辑器领域 UI 框架与前端组件解决方案。 +- **[ProFlow](https://github.com/ant-design/pro-flow)** - 基于 React-Flow 的流程编辑器框架。 +- **[ProChat](https://github.com/ant-design/pro-chat)** - 用于快速构建 LLM 聊天界面的组件库。 -
+
+ +--- #### 📝 License -Copyright © 2023 - present AFX & [Ant Digital](antdigital.com)
+Copyright © 2023 - present [AFX][ant-design-link] & [Ant Digital](https://antdigital.com).
This project is [MIT](./LICENSE) licensed. - - -[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square + + +[ant-design-link]: https://ant.design +[ant-design-shield]: https://img.shields.io/badge/-Ant%20Design-1677FF?labelColor=black&logo=antdesign&style=flat-square +[architecture]: https://gw.alipayobjects.com/zos/kitchen/2F0sXx1uad/architecture.webp +[codecov-link]: https://codecov.io/gh/ant-design/pro-editor +[codecov-shield]: https://img.shields.io/codecov/c/github/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square&logo=codecov&logoColor=white +[devops-dumi-link]: https://d.umijs.org/ +[devops-dumi-shield]: https://img.shields.io/badge/docs%20by-dumi-blue?color=1677FF&labelColor=black&style=flat-square +[devops-father-link]: https://github.com/umijs/father +[devops-father-shield]: https://img.shields.io/badge/build%20with-father-028fe4.svg?color=1677FF&labelColor=black&style=flat-square +[github-action-release-link]: https://github.com/ant-design/pro-editor/actions/workflows/release.yml +[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-editor/release.yml?color=1677FF&label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square +[github-action-test-link]: https://github.com/ant-design/pro-editor/actions/workflows/test.yml +[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-editor/test.yml?color=1677FF&label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square +[github-codespace-link]: https://codespaces.new/ant-design/pro-editor +[github-codespace-shield]: https://github.com/codespaces/badge.svg +[github-contributors-link]: https://github.com/ant-design/pro-editor/graphs/contributors +[github-contributors-shield]: https://img.shields.io/github/contributors/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[github-forks-link]: https://github.com/ant-design/pro-editor/network/members +[github-forks-shield]: https://img.shields.io/github/forks/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[github-issues-link]: https://github.com/ant-design/pro-editor/issues +[github-issues-shield]: https://img.shields.io/github/issues/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[github-license-link]: https://github.com/ant-design/pro-editor/blob/main/LICENSE +[github-license-shield]: https://img.shields.io/github/license/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[github-releasedate-link]: https://github.com/ant-design/pro-editor/releases +[github-releasedate-shield]: https://img.shields.io/github/release-date/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[github-stars-link]: https://github.com/ant-design/pro-editor/network/stargazers +[github-stars-shield]: https://img.shields.io/github/stars/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square +[npm-downloads-link]: https://www.npmjs.com/package/@ant-design/pro-editor +[npm-downloads-shield]: https://img.shields.io/npm/dt/@ant-design/pro-editor?labelColor=black&style=flat-square&color=1677FF +[npm-release-link]: https://www.npmjs.com/package/@ant-design/pro-editor +[npm-release-shield]: https://img.shields.io/npm/v/@ant-design/pro-editor?color=1677FF&labelColor=black&logo=npm&logoColor=white&style=flat-square +[pr-welcome-link]: https://github.com/ant-design/pro-editor/pulls +[pr-welcome-shield]: https://img.shields.io/badge/%E2%9D%A4%EF%B8%8F%20PR%20WELCOME-%E2%86%92-1677FF?labelColor=black&style=for-the-badge +[prevew-1]: https://gw.alipayobjects.com/zos/kitchen/sytsa4%26R%26d/1.gif +[prevew-2]: https://gw.alipayobjects.com/zos/kitchen/2DHhgqlXns/2.gif +[prevew-3]: https://gw.alipayobjects.com/zos/kitchen/KKcuxwR0Pz/3.gif +[prevew-4]: https://gw.alipayobjects.com/zos/kitchen/huuRPs3Kmk/4.gif +[prevew-5]: https://gw.alipayobjects.com/zos/kitchen/SQaNFOJbK4/5.gif diff --git a/docs/guide/data-management.zh-CN.md b/docs/guide/data-management.zh-CN.md index 15089d1a..70b318ca 100644 --- a/docs/guide/data-management.zh-CN.md +++ b/docs/guide/data-management.zh-CN.md @@ -11,14 +11,14 @@ group: ## 概念要素 -| 概念名词 | 解释 | -| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| store | 状态库(store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。 | -| state | 状态(state)是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。 | -| action | 动作(action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。 | -| reducer | 归约器(reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。 | -| selector | 选择器(selector) 是一个函数，用于从应用程序的状态中获取特定的数据。它接收应用程序的状态作为参数，并返回经过计算或转换后的数据。Selector 可以将状态的一部分或多个状态组合起来，以生成派生的数据。Selector 通常用于将应用程序的状态映射到组件的 props，以供组件使用。 | -| slice | 切片(slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。 | +| 概念名词 | 解释 | +| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| store | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。 | +| state | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。 | +| action | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。 | +| reducer | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。 | +| selector | 选择器 (selector) 是一个函数，用于从应用程序的状态中获取特定的数据。它接收应用程序的状态作为参数，并返回经过计算或转换后的数据。Selector 可以将状态的一部分或多个状态组合起来，以生成派生的数据。Selector 通常用于将应用程序的状态映射到组件的 props，以供组件使用。 | +| slice | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。 | ## 结构分层 @@ -26,7 +26,7 @@ group: ### 较低复杂度 -一般包含 2~5 个 state 、3 ~ 4 个 action。此时的结构一般直接一个 `store.ts` + 一个 `initialState.ts` 即可。 +一般包含 2\~5 个 state 、3 \~ 4 个 action。此时的结构一般直接一个 `store.ts` + 一个 `initialState.ts` 即可。 ```bash DataFill/store @@ -36,7 +36,7 @@ DataFill/store ### 一般复杂度 -一般复杂度存在 5 ~ 15 个 state、 5 ~ 10 个 action，可能会存在 selector 实现派生状态，也有可能存在 reducer 简化部分数据变更的复杂度。此时的结构一般为一个 `store.ts` + 一个 `initialState.ts` + 一个 `selectors.ts`/`reducer.ts`。 +一般复杂度存在 5 \~ 15 个 state、 5 \~ 10 个 action，可能会存在 selector 实现派生状态，也有可能存在 reducer 简化部分数据变更的复杂度。此时的结构一般为一个 `store.ts` + 一个 `initialState.ts` + 一个 `selectors.ts`/`reducer.ts`。 ```bash IconPicker/store @@ -56,7 +56,7 @@ SortableList/store ### 中等复杂度 -中等复杂度存在 15 ~ 30 个 state、 10 ~ 20 个 action，大概率会存在 selector 来聚合派生状态，大概率存在 reducer 简化部分数据变更的复杂度。 +中等复杂度存在 15 \~ 30 个 state、 10 \~ 20 个 action，大概率会存在 selector 来聚合派生状态，大概率存在 reducer 简化部分数据变更的复杂度。 此时结构，用单一的 action store 已经较难维护，往往会拆解出来多个 slice 用于管理不同的 action。 @@ -214,7 +214,7 @@ export const useEditorStore = createWithEqualityFn()( ); ``` -其中关键的代码是 `createStore` ,它用于聚合所有的 slice，返回一个完整的编辑器 Store 用于 store 初始化创建。 +其中关键的代码是 `createStore` , 它用于聚合所有的 slice，返回一个完整的编辑器 Store 用于 store 初始化创建。 最后使用的 `createWithEqualityFn`函数中包裹了相关的中间件，我们默认使用了 `devtools` 中间件来提供开发者工具支持，并替换默认的比较函数为 `shallow`，用于优化性能。 @@ -288,14 +288,14 @@ const crudSlice = (set, get) => ({ 而这也会相应带来若干好处： 1. **方便做受控能力**：当数据变更原子化之后，通过在 `dispatchTreeData` 最下方添加一个 `onTreeDataChange` ，即可实现数据状态的受控变更，将应用轻松转换为组件； -2. **数据变更语义化**：通过 dispatch 对应 payload 方法的命名，可以将原本比较难构造与变更的数据变更语义化，例如 `dispatchTreeData( { type: 'toggleCollapse', id:'123' })`，可以很容易理解为，将 id 为 123 的节点进行展开/收起操作； +2. **数据变更语义化**：通过 dispatch 对应 payload 方法的命名，可以将原本比较难构造与变更的数据变更语义化，例如 `dispatchTreeData( { type: 'toggleCollapse', id:'123' })`，可以很容易理解为，将 id 为 123 的节点进行展开 / 收起操作； 3. **提升状态维护性**：统一 dispatch 的数据变更心智后，我们既可以在 store 外部调用 dispatch 来变更状态，也可以在 store 内部调用，统一的心智将大大降低维护成本； ### reducer 研发 此外，将数据变更逻辑下沉为 reducer 后， reducer 层面也会带来相应的好处。由于 reducer 只是一个纯函数，因此可以非常方便地实现相应的单元测试。而结合 AI ，我们可以实现一句话需求的 reducer 实现，同时也可以实现一键产出测试代码。在 reducer 上的研发与维护成本将会大大降低。 -| 功能实现 | 单元测试 | +| 功能实现 | 单元测试 | | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | | ![](https://gw.alipayobjects.com/zos/kitchen/qcmFMlllP/f588a003-6317-4ef2-9728-491c9bda3c05.png) | ![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/261315145-01f8542f-e748-4334-b8fa-67b929fa1795.png) | diff --git a/docs/guide/why-pro-editor.zh-CN.md b/docs/guide/why-pro-editor.zh-CN.md index 8c269558..9aaa3388 100644 --- a/docs/guide/why-pro-editor.zh-CN.md +++ b/docs/guide/why-pro-editor.zh-CN.md @@ -29,7 +29,7 @@ group: 快速上手 除了组件层面，还有诸多原子化的操作能力是当今的前端仍未系统解决的。比如快捷键、键盘方向键切换焦点、键盘与鼠标同时作用的选取（shift 多选、cmd 复选）、撤销重做、鼠标框选…… -上述用户的交互输入，在「操作系统」与大部分效率工具（文档三件套、代码编辑器、Sketch、PS ）可谓是基础中的基础，而在号称“一统终端”的 Web 里却是「奢侈品」级别的能力。 +上述用户的交互输入，在「操作系统」与大部分效率工具（文档三件套、代码编辑器、Sketch、PS ）可谓是基础中的基础，而在号称 “一统终端” 的 Web 里却是「奢侈品」级别的能力。 ## 🕹「编辑」领域下的 「antd」 diff --git a/docs/pro-editor/component-assets.zh-CN.md b/docs/pro-editor/component-assets.zh-CN.md index 78863daa..128caaad 100644 --- a/docs/pro-editor/component-assets.zh-CN.md +++ b/docs/pro-editor/component-assets.zh-CN.md @@ -7,7 +7,7 @@ group: 基础框架 ### 木偶模型 -高代码（props）和 低代码（配置器）的关系不是简单的一一映射，而是一种有机的组织形态，我们把它称为——木偶模型。 props 就像是木偶的线，而配置器就是木偶的控制器，它们的关系如下图所示： +高代码（props）和 低代码（配置器）的关系不是简单的一一映射，而是一种有机的组织形态，我们把它称为 —— 木偶模型。 props 就像是木偶的线，而配置器就是木偶的控制器，它们的关系如下图所示： ![image.png](https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*d8rTT4gXf-UAAAAAAAAAAAAADmuEAQ/original) diff --git a/docs/pro-editor/data-flow.zh-CN.md b/docs/pro-editor/data-flow.zh-CN.md index 95cdb1c5..16e6aace 100644 --- a/docs/pro-editor/data-flow.zh-CN.md +++ b/docs/pro-editor/data-flow.zh-CN.md @@ -19,8 +19,8 @@ ProEditor 的数据流包含两类： 容器类 Store 只存放 Editor 相关状态，例如： -- 开发者/设计师模式； -- 画布/代码的切换； +- 开发者 / 设计师模式； +- 画布 / 代码的切换； - 当前画布交互的激活信息； - 当前加载的 ComponentAsset 实例； - ... diff --git a/docs/pro-editor/useProEditor.zh-CN.md b/docs/pro-editor/useProEditor.zh-CN.md index a8f788b7..b0fbd730 100644 --- a/docs/pro-editor/useProEditor.zh-CN.md +++ b/docs/pro-editor/useProEditor.zh-CN.md @@ -35,8 +35,11 @@ const MyComponent = () => { 可以使用 editor 对象来访问 ProEditor 的属性和方法： - `getPresenceEditor`：获取当前 ProEditor 的 presenceEditor 对象； + - `getViewport`：获取当前 ProEditor 的 `viewport`； + - `getConfig`：获取当前 ProEditor 的 config； + - `getProps`：获取当前 ProEditor 的 props。 - 注意：以上方法返回的对象均为最新值，即每次调用都会返回最新的值。 diff --git a/docs/showcase/flow-editor.zh-CN.md b/docs/showcase/flow-editor.zh-CN.md index be49f203..fe7d0159 100644 --- a/docs/showcase/flow-editor.zh-CN.md +++ b/docs/showcase/flow-editor.zh-CN.md @@ -10,4 +10,4 @@ Flow Editor 是一套节点式运行大模型的编辑工具。 ## 访问地址 -https://github.com/ant-design/pro-flow-editor + diff --git a/docs/showcase/kitchen-color-studio.zh-CN.md b/docs/showcase/kitchen-color-studio.zh-CN.md index f297b9b5..c7d8f54a 100644 --- a/docs/showcase/kitchen-color-studio.zh-CN.md +++ b/docs/showcase/kitchen-color-studio.zh-CN.md @@ -10,4 +10,4 @@ kitchen Color Studio 是一套开源的颜色系统编辑器。 ## 访问地址 -https://github.com/ant-design/antd-color-editor + diff --git a/src/ActionGroup/index.en-US.md b/src/ActionGroup/index.en-US.md index fbb5dc18..fe6b59e2 100644 --- a/src/ActionGroup/index.en-US.md +++ b/src/ActionGroup/index.en-US.md @@ -17,12 +17,7 @@ When you need a general panel to carry a series of global tools such as "full sc ## Code Demo - - - - - - + ## API diff --git a/src/ActionGroup/index.zh-CN.md b/src/ActionGroup/index.zh-CN.md index d2f8c144..d46b01a8 100644 --- a/src/ActionGroup/index.zh-CN.md +++ b/src/ActionGroup/index.zh-CN.md @@ -14,38 +14,33 @@ demo: ## 代码演示 - - - - - - + ## API -| 属性名 | 类型 | 描述 | -| ------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | -| className | `string` | 自定义的 classname | -| style | `React.CSSProperties` | 自定义 style | -| items | `[]` | 生成按钮的配置 config | -| dropdownMenu | `[]` | 生成 drowDownMenuList 内容的 config | +| 属性名 | 类型 | 描述 | +| ------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------- | +| className | `string` | 自定义的 classname | +| style | `React.CSSProperties` | 自定义 style | +| items | `[]` | 生成按钮的配置 config | +| dropdownMenu | `[]` | 生成 drowDownMenuList 内容的 config | | dropdownProps | `[]` | 给 dropdownMenu 设置的自定义 Props，支持除了 Menu 外其余所有 antd dropdown Props 的设置 | -| dropdownMenuTrigger | `React.ReactNode` | 用于自定义 dropdownMenu 下拉的触发 Dom，默认为 DashOutlined 的 Icon | -| render | `(defalutDom: React.ReactNode, config: Array) => React.ReactNode` | 用于渲染自定义能力的 render 方法 | -| onFullScreenClick | `() => void` | 全屏按钮点击的回调 | -| onUndoClick | `() => void` | 撤销按钮点击的回调 | -| onRedoClick | `() => void` | 重做按钮点击的回调 | -| onDeleteClick | `() => void` | 删除按钮点击的回调 | -| type | `'ghost' \| 'block' \| 'pure'` | 整体的样式 | -| direction | `'row' \| 'column'` | 图标排列时候的方向 | -| size | `'default' \| 'large' \| number` | 图标尺寸 | +| dropdownMenuTrigger | `React.ReactNode` | 用于自定义 dropdownMenu 下拉的触发 Dom，默认为 DashOutlined 的 Icon | +| render | `(defalutDom: React.ReactNode, config: Array) => React.ReactNode` | 用于渲染自定义能力的 render 方法 | +| onFullScreenClick | `() => void` | 全屏按钮点击的回调 | +| onUndoClick | `() => void` | 撤销按钮点击的回调 | +| onRedoClick | `() => void` | 重做按钮点击的回调 | +| onDeleteClick | `() => void` | 删除按钮点击的回调 | +| type | `'ghost' \| 'block' \| 'pure'` | 整体的样式 | +| direction | `'row' \| 'column'` | 图标排列时候的方向 | +| size | `'default' \| 'large' \| number` | 图标尺寸 | ### ActionGroupItem -| 属性名 | 类型 | 描述 | -| ------- | --------------------- | ---------------------- | -| icon | `React.ReactNode` | 展示的 icon | +| 属性名 | 类型 | 描述 | +| ------- | --------------------- | ----------- | +| icon | `React.ReactNode` | 展示的 icon | | style | `React.CSSProperties` | 每个配置按钮的单独样式 | -| key | `key` | 每个按钮单独的 key | -| onClick | `() => void` | 按钮点击事件的回调 | +| key | `key` | 每个按钮单独的 key | +| onClick | `() => void` | 按钮点击事件的回调 | | label | `string` | 用于展示按钮的提示文案 | diff --git a/src/ActionIcon/index.en-US.md b/src/ActionIcon/index.en-US.md index 117fb85a..ca9cbee7 100644 --- a/src/ActionIcon/index.en-US.md +++ b/src/ActionIcon/index.en-US.md @@ -14,8 +14,7 @@ It is a encapsulation of antd Button, allowing icons to have responsive button a ## Code Example - - + ## API diff --git a/src/ActionIcon/index.zh-CN.md b/src/ActionIcon/index.zh-CN.md index 3410be67..4b949a31 100644 --- a/src/ActionIcon/index.zh-CN.md +++ b/src/ActionIcon/index.zh-CN.md @@ -17,18 +17,17 @@ demo: ## 代码演示 - - + ## API -| 参数 | 说明 | 类型 | 默认值 | -| :-------- | :------- | :----------------------------------------- | :----- | -| cursor | 鼠标类型 | `CSSProperties['cursor']` | - | -| title | 动作提示 | `TooltipProps['title']` | - | -| placement | 提示位置 | `TooltipProps['placement']` | - | -| icon | 图标 | `ButtonProps['icon']` | - | -| onClick | 点击回调 | `ButtonProps['onClick']` | - | -| size | 图标尺寸 | `'default' \| 'large' \|'small' \| number` | small | +| 参数 | 说明 | 类型 | 默认值 | +| :-------- | :--- | :----------------------------------------- | :---- | +| cursor | 鼠标类型 | `CSSProperties['cursor']` | - | +| title | 动作提示 | `TooltipProps['title']` | - | +| placement | 提示位置 | `TooltipProps['placement']` | - | +| icon | 图标 | `ButtonProps['icon']` | - | +| onClick | 点击回调 | `ButtonProps['onClick']` | - | +| size | 图标尺寸 | `'default' \| 'large' \|'small' \| number` | small | 其他 API 参考 antd Button Props . diff --git a/src/Awareness/index.zh-CN.md b/src/Awareness/index.zh-CN.md index 8a1afd23..a31c5085 100644 --- a/src/Awareness/index.zh-CN.md +++ b/src/Awareness/index.zh-CN.md @@ -28,8 +28,8 @@ Awareness 代表着用户在应用内的运动和行为。用户能够实时看 光标属性 -| 属性 | 类型 | 描述 | -| -------- | -------------------------- | -------- | +| 属性 | 类型 | 描述 | +| -------- | -------------------------- | ---- | | position | `{ x: number; y: number }` | 光标位置 | | color | `string` | 光标颜色 | | name | `string` | 光标名称 | @@ -38,11 +38,11 @@ Awareness 代表着用户在应用内的运动和行为。用户能够实时看 头像组件的属性 -| 属性名 | 类型 | 描述 | -| --------- | ------------ | ---------------------------------- | -| name | `string` | 用户名 | -| color | `string` | 颜色 | -| active | `boolean` | 是否激活状态，默认为 `false` | -| current | `boolean` | 是否当前用户，默认为 `false` | +| 属性名 | 类型 | 描述 | +| --------- | ------------ | --------------------- | +| name | `string` | 用户名 | +| color | `string` | 颜色 | +| active | `boolean` | 是否激活状态，默认为 `false` | +| current | `boolean` | 是否当前用户，默认为 `false` | | following | `boolean` | 是否关注了当前用户，默认为 `false` | -| onClick | `() => void` | 点击事件回调函数 | +| onClick | `() => void` | 点击事件回调函数 | diff --git a/src/CollapseTitle/index.zh-CN.md b/src/CollapseTitle/index.zh-CN.md index 5e8a5f54..ce067f0d 100644 --- a/src/CollapseTitle/index.zh-CN.md +++ b/src/CollapseTitle/index.zh-CN.md @@ -20,7 +20,7 @@ group: 基础组件 ### 默认展开 -通过  `defaultExpand` 控制是否默认展开。 +通过 `defaultExpand` 控制是否默认展开。 @@ -32,10 +32,10 @@ group: 基础组件 ## API -| 参数 | 说明 | 类型 | 默认值 | -| :------------- | :--------------- | :------------------------------- | :----- | -| defaultExpand | 默认展开   | `boolean` | false | -| expand | 受控展开   | `boolean` | - | -| title | 标题 | `string` | - | -| onExpandChange | 展开回调 | `(expand: boolean) => void` | - | -| extra | 标题右侧扩展渲染 | `(expand: boolean) => ReactNode` | - | +| 参数 | 说明 | 类型 | 默认值 | +| :------------- | :------- | :------------------------------- | :---- | +| defaultExpand | 默认展开 | `boolean` | false | +| expand | 受控展开 | `boolean` | - | +| title | 标题 | `string` | - | +| onExpandChange | 展开回调 | `(expand: boolean) => void` | - | +| extra | 标题右侧扩展渲染 | `(expand: boolean) => ReactNode` | - | diff --git a/src/ColumnList/index.zh-CN.md b/src/ColumnList/index.zh-CN.md index d5b0dfc7..747f0ae9 100644 --- a/src/ColumnList/index.zh-CN.md +++ b/src/ColumnList/index.zh-CN.md @@ -15,58 +15,51 @@ demo: ## 代码演示 - - - - - - - - + ## API 提供封装的 `columns` 配置，其他属性参考 `SortableList` -| 属性名 | 类型 | 描述 | -| ------- | -------------- | -------- | +| 属性名 | 类型 | 描述 | +| ------- | -------------- | ---- | | columns | `ColumnItem[]` | 列配置项 | ### ColumnItem 列配置项 -| 属性名 | 类型 | 描述 | -| ------------ | --------------------------------- | ---------------------------------------------------------------------------------- | -| title | `React.ReactNode` | 列标题 | +| 属性名 | 类型 | 描述 | +| ------------ | --------------------------------- | ---------------------------------------------------------- | +| title | `React.ReactNode` | 列标题 | | type | `'select' \| 'input' \| 'custom'` | 字段类型，默认为 'input'。可选值：'select' 下拉框，'input' 输入框，'custom' 自定义 | -| options | `ColumnItemOption[]` | 下拉框选项 | -| placeholder | `string` | 输入框提示文本 | -| initialValue | `T` | 初始值 | -| dataIndex | `string` | 字段引用 | -| key | `string` | 唯一键值 | -| render | `FC>` | 自定义渲染函数 | -| width | `number` \| `string` | 列宽度 | -| multiple | `boolean` | 是否允许多选 | +| options | `ColumnItemOption[]` | 下拉框选项 | +| placeholder | `string` | 输入框提示文本 | +| initialValue | `T` | 初始值 | +| dataIndex | `string` | 字段引用 | +| key | `string` | 唯一键值 | +| render | `FC>` | 自定义渲染函数 | +| width | `number` \| `string` | 列宽度 | +| multiple | `boolean` | 是否允许多选 | ### ColumnItemOption 下拉框选项 -| 属性名 | 类型 | 描述 | -| ------ | -------------------- | -------- | -| label | `string` | 标签文本 | -| value | `string` \| `number` | 值 | +| 属性名 | 类型 | 描述 | +| ----- | -------------------- | ---- | +| label | `string` | 标签文本 | +| value | `string` \| `number` | 值 | ### ColumnCustomRenderProps 列表项自定义渲染属性 -| 属性名 | 类型 | 描述 | -| -------- | ---------------------- | -------------- | -| item | `any` | 当前项数据 | -| value | `any` | 当前值 | +| 属性名 | 类型 | 描述 | +| -------- | ---------------------- | ------- | +| item | `any` | 当前项数据 | +| value | `any` | 当前值 | | onChange | `(value: any) => void` | 值变化回调函数 | -| column | `ColumnItem` | 对应列信息 | -| style | `CSSProperties` | 样式 | -| index | `number` | 索引 | +| column | `ColumnItem` | 对应列信息 | +| style | `CSSProperties` | 样式 | +| index | `number` | 索引 | diff --git a/src/ContextMenu/index.zh-CN.md b/src/ContextMenu/index.zh-CN.md index f3a89a9f..cf436e51 100644 --- a/src/ContextMenu/index.zh-CN.md +++ b/src/ContextMenu/index.zh-CN.md @@ -18,11 +18,11 @@ title: ContextMenu 情景菜单 ## API -| 属性名 | 类型 | 描述 | -| --------- | ---------------- | ------------------ | +| 属性名 | 类型 | 描述 | +| --------- | ---------------- | --------- | | container | `HTMLElement` | 右键菜单的容器元素 | -| items | `MenuItemType[]` | 右键菜单的菜单项 | -| label | `string` | 右键菜单的标签 | +| items | `MenuItemType[]` | 右键菜单的菜单项 | +| label | `string` | 右键菜单的标签 | ### MenuItemType @@ -36,33 +36,33 @@ export type MenuItemType = GeneralItemType | SubMenuType | MenuDividerType; 普通菜单项类型。 -| 属性名 | 类型 | 描述 | -| -------- | ------------------------------------------------------- | ------------------------ | -| key | `string` | 菜单项的唯一标识 | -| label | `string` | 菜单项的文本标签 | -| icon | `ReactNode` | 菜单项的图标 | +| 属性名 | 类型 | 描述 | +| -------- | ------------------------------------------------------- | ------------ | +| key | `string` | 菜单项的唯一标识 | +| label | `string` | 菜单项的文本标签 | +| icon | `ReactNode` | 菜单项的图标 | | onClick | `() => void` | 菜单项的点击事件回调函数 | -| danger | `boolean` | 是否为危险操作 | -| disabled | `boolean` | 是否禁用 | -| shortcut | `('meta' \| 'control' \| 'shift' \| 'alt' \| string)[]` | 快捷键 | +| danger | `boolean` | 是否为危险操作 | +| disabled | `boolean` | 是否禁用 | +| shortcut | `('meta' \| 'control' \| 'shift' \| 'alt' \| string)[]` | 快捷键 | ### SubMenuType 子菜单类型。 -| 属性名 | 类型 | 描述 | -| -------- | ---------------- | ------------------------ | -| key | `string` | 菜单项的唯一标识 | -| label | `string` | 菜单项的文本标签 | -| icon | `ReactNode` | 菜单项的图标 | +| 属性名 | 类型 | 描述 | +| -------- | ---------------- | ------------ | +| key | `string` | 菜单项的唯一标识 | +| label | `string` | 菜单项的文本标签 | +| icon | `ReactNode` | 菜单项的图标 | | onClick | `() => void` | 菜单项的点击事件回调函数 | -| children | `MenuItemType[]` | 子菜单的子菜单项 | +| children | `MenuItemType[]` | 子菜单的子菜单项 | ### MenuDividerType 菜单分割线类型。 -| 属性名 | 类型 | 描述 | -| ------ | --------- | --------------------------------- | -| dashed | `boolean` | 菜单分割线的样式是否为虚线 | -| type | `string` | 菜单分割线的类型，固定为'divider' | +| 属性名 | 类型 | 描述 | +| ------ | --------- | ---------------------- | +| dashed | `boolean` | 菜单分割线的样式是否为虚线 | +| type | `string` | 菜单分割线的类型，固定为 'divider' | diff --git a/src/DataFill/index.zh-CN.md b/src/DataFill/index.zh-CN.md index 08c78a61..1e7b7804 100644 --- a/src/DataFill/index.zh-CN.md +++ b/src/DataFill/index.zh-CN.md @@ -18,16 +18,16 @@ group: 面板模块 ## API -| 参数 | 说明 | 类型 | 默认值 | -| :------ | :------- | :---------------------------------- | :----- | -| onClick | 点击回调 | `{payload: FilledPayload } => void` | - | +| 参数 | 说明 | 类型 | 默认值 | +| :------ | :--- | :---------------------------------- | :-- | +| onClick | 点击回调 | `{payload: FilledPayload } => void` | - | ### FilledPayload -| 参数 | 说明 | 类型 | 默认值 | -| :----- | :----------------------------------- | :------------- | :----- | -| key | 选中数据类型的 key, 键值见 KeyMap | `string` | - | -| filler | 过滤函数, 返回对应数据类型的 Mock 值 | `() => string` | - | +| 参数 | 说明 | 类型 | 默认值 | +| :----- | :---------------------- | :------------- | :-- | +| key | 选中数据类型的 key, 键值见 KeyMap | `string` | - | +| filler | 过滤函数，返回对应数据类型的 Mock 值 | `() => string` | - | ### KeyMap diff --git a/src/DataPreviewer/index.zh-CN.md b/src/DataPreviewer/index.zh-CN.md index 4213f407..057a849c 100644 --- a/src/DataPreviewer/index.zh-CN.md +++ b/src/DataPreviewer/index.zh-CN.md @@ -38,15 +38,15 @@ group: 面板模块 ## API -| 属性名 | 类型 | 描述 | -| --------------- | ------------------------------------ | -------------------------- | -| data | `Record[]` | 数据项 | -| columns | `{ title: string, dataIndex: any}[]` | 表格形态数据栏目 | -| collapsed | `boolean` | 受控收起 | -| renderEmpty | `(node: ReactNode) => ReactNode` | 渲染空状态 | -| emptyAction | `ReactNode` | 空状态立即尝试按钮右侧渲染 | +| 属性名 | 类型 | 描述 | +| --------------- | ------------------------------------ | --------------- | +| data | `Record[]` | 数据项 | +| columns | `{ title: string, dataIndex: any}[]` | 表格形态数据栏目 | +| collapsed | `boolean` | 受控收起 | +| renderEmpty | `(node: ReactNode) => ReactNode` | 渲染空状态 | +| emptyAction | `ReactNode` | 空状态立即尝试按钮右侧渲染 | | onVisibleChange | `(visible: boolean) => void` | 展开或者隐藏状态的回调 | -| onEmptyClick | `() => void` | 点击“立即尝试”按钮的回调 | -| onResetClick | `() => void` | 重置按钮回调 | -| showType | `boolean` | 是否显示数据类型 | -| extra | `ReactNode` | 额外节点展示 | +| onEmptyClick | `() => void` | 点击 “立即尝试” 按钮的回调 | +| onResetClick | `() => void` | 重置按钮回调 | +| showType | `boolean` | 是否显示数据类型 | +| extra | `ReactNode` | 额外节点展示 | diff --git a/src/DraggablePanel/index.zh-CN.md b/src/DraggablePanel/index.zh-CN.md index 32777ead..f0325bc1 100644 --- a/src/DraggablePanel/index.zh-CN.md +++ b/src/DraggablePanel/index.zh-CN.md @@ -40,23 +40,23 @@ group: 基础组件 ## API -| 属性名 | 类型 | 默认值 | 描述 | -| ---------------- | ------------------------------------------ | ------------ | ---------------------------------------- | +| 属性名 | 类型 | 默认值 | 描述 | +| ---------------- | ------------------------------------------ | ------------ | -------------------- | | mode | `'fixed' \| 'float'` | `'fixed'` | 面板的位置模式，使用固定模式或者浮动窗口 | -| placement | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | 固定模式下面板的朝向，默认放置在右侧 | -| minWidth | `number` | | 面板的最小宽度 | -| minHeight | `number` | | 面板的最小高度 | -| maxWidth | `number` | | 面板的最大宽度 | -| maxHeight | `number` | | 面板的最大高度 | -| resize | `RndProps['enableResizing']` | | 控制可缩放区域 | -| size | `Partial` | | 面板尺寸 | -| onSizeChange | `(delta: NumberSize, size?: Size) => void` | | 面板尺寸变更回调 | -| onSizeDragging | `(delta: NumberSize, size?: Size) => void` | | 面板尺寸拖拽过程中的回调 | -| expandable | `boolean` | `true` | 是否可展开 | -| isExpand | `boolean` | | 当前是否为展开状态 | -| onExpandChange | `(expand: boolean) => void` | | 展开状态变更回调 | -| position | `RndProps['position']` | | 面板位置，受控模式 | -| defaultSize | `Partial` | | 面板默认尺寸 | -| defaultPosition | `RndProps['position']` | `[100, 100]` | 面板默认位置，悬浮模式下有效 | -| onPositionChange | `(position: RndProps['position']) => void` | | 面板位置变更回调 | -| children | `ReactNode` | | 面板内容 | +| placement | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | 固定模式下面板的朝向，默认放置在右侧 | +| minWidth | `number` | | 面板的最小宽度 | +| minHeight | `number` | | 面板的最小高度 | +| maxWidth | `number` | | 面板的最大宽度 | +| maxHeight | `number` | | 面板的最大高度 | +| resize | `RndProps['enableResizing']` | | 控制可缩放区域 | +| size | `Partial` | | 面板尺寸 | +| onSizeChange | `(delta: NumberSize, size?: Size) => void` | | 面板尺寸变更回调 | +| onSizeDragging | `(delta: NumberSize, size?: Size) => void` | | 面板尺寸拖拽过程中的回调 | +| expandable | `boolean` | `true` | 是否可展开 | +| isExpand | `boolean` | | 当前是否为展开状态 | +| onExpandChange | `(expand: boolean) => void` | | 展开状态变更回调 | +| position | `RndProps['position']` | | 面板位置，受控模式 | +| defaultSize | `Partial` | | 面板默认尺寸 | +| defaultPosition | `RndProps['position']` | `[100, 100]` | 面板默认位置，悬浮模式下有效 | +| onPositionChange | `(position: RndProps['position']) => void` | | 面板位置变更回调 | +| children | `ReactNode` | | 面板内容 | diff --git a/src/ErrorBoundary/index.zh-CN.md b/src/ErrorBoundary/index.zh-CN.md index ff331275..748d07c4 100644 --- a/src/ErrorBoundary/index.zh-CN.md +++ b/src/ErrorBoundary/index.zh-CN.md @@ -25,9 +25,9 @@ group: 错误边界组件属性接口 -| 属性名 | 类型 | 描述 | -| -------------- | ----------------- | ------------------ | -| children | `React.ReactNode` | 子组件 | +| 属性名 | 类型 | 描述 | +| -------------- | ----------------- | --------- | +| children | `React.ReactNode` | 子组件 | | onExportConfig | `() => void` | 导出配置项回调函数 | -| onRetry | `() => void` | 重试回调函数 | +| onRetry | `() => void` | 重试回调函数 | | showDev | `boolean` | 是否显示开发者选项 | diff --git a/src/FieldIcon/index.zh-CN.md b/src/FieldIcon/index.zh-CN.md index d7a2190b..82c1438c 100644 --- a/src/FieldIcon/index.zh-CN.md +++ b/src/FieldIcon/index.zh-CN.md @@ -19,24 +19,24 @@ group: 基础组件 ## API -| 参数 | 说明 | 类型 | 默认值 | -| :--- | :------- | :--------------- | :----- | -| type | 字段类型 | 参考字段类型枚举 | - | +| 参数 | 说明 | 类型 | 默认值 | +| :--- | :--- | :------- | :-- | +| type | 字段类型 | 参考字段类型枚举 | - | ### APIFieldType 字段类型枚举 -| 类型 | 字段说明 | -| :------------- | :----------- | -| `integer` | 整数 | -| `number` | 数字 | -| `bool` | 布尔值 | -| `string` | 字符串 | -| `integerArray` | 整数数组 | -| `numberArray` | 数字数组 | -| `stringArray` | 字符串数组 | -| `boolArray` | 布尔值数组 | -| `any` | 任意类型 | +| 类型 | 字段说明 | +| :------------- | :----- | +| `integer` | 整数 | +| `number` | 数字 | +| `bool` | 布尔值 | +| `string` | 字符串 | +| `integerArray` | 整数数组 | +| `numberArray` | 数字数组 | +| `stringArray` | 字符串数组 | +| `boolArray` | 布尔值数组 | +| `any` | 任意类型 | | `anyArray` | 任意类型数组 | -| `object` | 对象 | -| `objectArray` | 对象数组 | -| `array` | 数组 | +| `object` | 对象 | +| `objectArray` | 对象数组 | +| `array` | 数组 | diff --git a/src/FieldSelect/index.zh-CN.md b/src/FieldSelect/index.zh-CN.md index 7207d47a..eff3e52d 100644 --- a/src/FieldSelect/index.zh-CN.md +++ b/src/FieldSelect/index.zh-CN.md @@ -25,18 +25,18 @@ group: 基础组件 > 其他属性参考 antd `Select` 组件。 -| 参数 | 说明 | 类型 | 默认值 | -| :-------------- | :--------------------- | :-------------------------- | :----- | -| options | 选项值 | 参考`FieldSelectOptionType` | - | -| onChange | 回调 | (value: string) => void | - | -| value | 值 | string | - | -| showCustomField | 是否使用自定义输入能力 | boolean | true | +| 参数 | 说明 | 类型 | 默认值 | +| :-------------- | :---------- | :------------------------ | :--- | +| options | 选项值 | 参考`FieldSelectOptionType` | - | +| onChange | 回调 | (value: string) => void | - | +| value | 值 | string | - | +| showCustomField | 是否使用自定义输入能力 | boolean | true | ### FieldSelectOptionType 选项类型 -| 参数 | 说明 | 类型 | 默认值 | -| :---------- | :------- | :---------------- | :----- | -| type | 字段类型 | 参考字段类型枚举 | - | -| label | 字段名 | `React.ReactNode` | - | -| description | 字段描述 | `React.ReactNode` | - | -| value | 字段标识 | string | - | +| 参数 | 说明 | 类型 | 默认值 | +| :---------- | :--- | :---------------- | :-- | +| type | 字段类型 | 参考字段类型枚举 | - | +| label | 字段名 | `React.ReactNode` | - | +| description | 字段描述 | `React.ReactNode` | - | +| value | 字段标识 | string | - | diff --git a/src/FieldTitle/index.zh-CN.md b/src/FieldTitle/index.zh-CN.md index 53795d63..e940ae59 100644 --- a/src/FieldTitle/index.zh-CN.md +++ b/src/FieldTitle/index.zh-CN.md @@ -21,9 +21,9 @@ group: 基础组件 ## API -| 参数 | 说明 | 类型 | 默认值 | -| :------------ | :------------- | :-------------------------------- | :----- | -| type | 字段类型 | 参考 `FieldIcon` 字段类型类型枚举 | - | -| isParentArray | 父级是否是数组 | boolean | - | -| title | 字段标题 | `React.ReactNode` | - | -| description | 标题右侧描述 | `React.ReactNode` | - | +| 参数 | 说明 | 类型 | 默认值 | +| :------------ | :------ | :---------------------- | :-- | +| type | 字段类型 | 参考 `FieldIcon` 字段类型类型枚举 | - | +| isParentArray | 父级是否是数组 | boolean | - | +| title | 字段标题 | `React.ReactNode` | - | +| description | 标题右侧描述 | `React.ReactNode` | - | diff --git a/src/FreeCanvas/index.zh-CN.md b/src/FreeCanvas/index.zh-CN.md index 2e292641..b48a0f49 100644 --- a/src/FreeCanvas/index.zh-CN.md +++ b/src/FreeCanvas/index.zh-CN.md @@ -14,21 +14,21 @@ group: 面板模块 ### 基础属性 -| 属性名 | 类型 | 描述 | -| ---------------- | ------------------------------ | -------------------- | +| 属性名 | 类型 | 描述 | +| ---------------- | ------------------------------ | ---------- | | children | `ReactNode` | 自由画布组件的子元素 | -| viewport | `Viewport` | 视口的初始值 | -| defaultViewport | `Viewport` | 视口的默认值 | -| control | `boolean` | 是否显示控制面板 | +| viewport | `Viewport` | 视口的初始值 | +| defaultViewport | `Viewport` | 视口的默认值 | +| control | `boolean` | 是否显示控制面板 | | onViewportChange | `(viewport: Viewport) => void` | 视口变化时的回调函数 | -| extraControlBtns | `React.ReactNode[]` | 额外控制按钮 | +| extraControlBtns | `React.ReactNode[]` | 额外控制按钮 | ### Viewport Viewport 对象表示一个视图的坐标系，包含以下属性： -| 属性 | 类型 | 描述 | -| ---- | ------ | ------------------- | +| 属性 | 类型 | 描述 | +| ---- | ------ | ----------- | | x | number | 视口左上角的 x 坐标 | | y | number | 视口左上角的 y 坐标 | -| zoom | number | 视口的缩放比例 | +| zoom | number | 视口的缩放比例 | diff --git a/src/Highlight/index.zh-CN.md b/src/Highlight/index.zh-CN.md index a2883fcf..ac888cae 100644 --- a/src/Highlight/index.zh-CN.md +++ b/src/Highlight/index.zh-CN.md @@ -40,14 +40,14 @@ group: 基础组件 ### Highlight -| 参数 | 说明 | 类型 | 默认值 | -| :----------- | :-------------------------------------------------------- | :------ | :------ | -| language | 指定语言类型，详见下表 | string | - | -| showLanguage | 是否展示语言的 Tag | boolean | true | -| theme | 指定主题，可选 `dark`, `light` | string | `light` | -| lineNumber | 指定代码块行号是否开启，可选 `true`, `false` | boolean | false | -| copyable | 指定代码块是否展示复制按钮，可选 `true`, `false` | boolean | true | -| height | 指定代码块高度，用于需要控制代码块高度固定的场景 | number | - | +| 参数 | 说明 | 类型 | 默认值 | +| :----------- | :--------------------------------------- | :------ | :------ | +| language | 指定语言类型，详见下表 | string | - | +| showLanguage | 是否展示语言的 Tag | boolean | true | +| theme | 指定主题，可选 `dark`, `light` | string | `light` | +| lineNumber | 指定代码块行号是否开启，可选 `true`, `false` | boolean | false | +| copyable | 指定代码块是否展示复制按钮，可选 `true`, `false` | boolean | true | +| height | 指定代码块高度，用于需要控制代码块高度固定的场景 | number | - | | type | 指定渲染类型，可选 `block`, `pure`, pure 模式去掉容器样式 | `block` | - | ### 目前支持的语言列表 diff --git a/src/IconPicker/index.zh-CN.md b/src/IconPicker/index.zh-CN.md index 0216df74..e94638a0 100644 --- a/src/IconPicker/index.zh-CN.md +++ b/src/IconPicker/index.zh-CN.md @@ -32,26 +32,26 @@ group: ## 基础属性 -| 属性名 | 类型 | 描述 | -| ---------------------------- | ---------------------------------------------- | -------------------------------- | -| defaultIcon | `IconUnit` | 默认图标单元 | -| defaultIconfontScripts | `ExternalScripts[]` | 默认 Iconfont 脚本数组 | -| defaultActiveIconfontScript | `string` | 默认选中的 Iconfont 脚本 | -| icon | `IconUnit` | 图标单元 | -| onIconChange | `(icon: IconUnit) => void` | Icon 改变回调函数 | -| iconfontScripts | `ExternalScripts[]` | IconFont 脚本地址 | -| onIconfontScriptsChange | `(iconfontScripts: ExternalScripts[]) => void` | Iconfont 脚本改变回调函数 | -| activeIconfontScript | `string` | 选中的 Iconfont 脚本 | +| 属性名 | 类型 | 描述 | +| ---------------------------- | ---------------------------------------------- | --------------------- | +| defaultIcon | `IconUnit` | 默认图标单元 | +| defaultIconfontScripts | `ExternalScripts[]` | 默认 Iconfont 脚本数组 | +| defaultActiveIconfontScript | `string` | 默认选中的 Iconfont 脚本 | +| icon | `IconUnit` | 图标单元 | +| onIconChange | `(icon: IconUnit) => void` | Icon 改变回调函数 | +| iconfontScripts | `ExternalScripts[]` | IconFont 脚本地址 | +| onIconfontScriptsChange | `(iconfontScripts: ExternalScripts[]) => void` | Iconfont 脚本改变回调函数 | +| activeIconfontScript | `string` | 选中的 Iconfont 脚本 | | onActiveIconfontScriptChange | `(scripts: string) => void` | 选中的 Iconfont 脚本改变回调函数 | ### ExternalScripts 描述外部脚本的接口。 -| 属性名 | 类型 | 描述 | -| ------ | -------- | ---- | -| name | `string` | 名称 | -| url | `string` | URL | +| 属性名 | 类型 | 描述 | +| ---- | -------- | --- | +| name | `string` | 名称 | +| url | `string` | URL | ### IconUnit @@ -59,17 +59,17 @@ group: ### ReactIcon -| 属性名 | 类型 | 描述 | -| ------------- | ------------------ | ----------------------- | +| 属性名 | 类型 | 描述 | +| ------------- | ------------------ | -------------- | | type | `antd` \| `custom` | 图标类型，antd 或自定义 | -| componentName | `string` | 图标组件名称 | -| props | `Object` | 图标组件的 props 属性 | +| componentName | `string` | 图标组件名称 | +| props | `Object` | 图标组件的 props 属性 | ### IconfontIcon -| 属性名 | 类型 | 描述 | -| ------------- | ---------- | ----------------------------------------- | -| type | `iconfont` | 图标类型，仅支持 iconfont | -| componentName | `string` | 图标组件名称 | +| 属性名 | 类型 | 描述 | +| ------------- | ---------- | --------------------------- | +| type | `iconfont` | 图标类型，仅支持 iconfont | +| componentName | `string` | 图标组件名称 | | props | `Object` | 图标组件的 props 属性，必须包含 type 字段 | -| scriptUrl | `string` | iconfont 的脚本链接地址 | +| scriptUrl | `string` | iconfont 的脚本链接地址 | diff --git a/src/Layout/index.en-US.md b/src/Layout/index.en-US.md index f0e8a6db..e5ac45ea 100644 --- a/src/Layout/index.en-US.md +++ b/src/Layout/index.en-US.md @@ -67,21 +67,21 @@ You can easily build a layout similar to a dialogue content through configuratio ### PannelSettings -| Property | Type | Description | -| --------- | ------------------------ | -------------------------------------------------------------- | -| children | ReactNode or ReactNode[] | Required content of the panel. | -| direction | string | Optional orientation of the panel, 'horizontal' or 'vertical'. | -| tabs | TabsProps | Optional properties for tabs within the panel. | -| icon | ReactNode | Optional icon for the panel. | -| extra | ReactNode | Optional additional React nodes to be displayed. | -| hide | boolean | Optional flag to hide the panel. | -| minWidth | number | Optional minimum width for the panel. | -| minHeight | number | Optional minimum height for the panel. | -| maxWidth | number | Optional maximum width for the panel. | -| maxHeight | number | Optional maximum height for the panel. | -| style | React.CSSProperties | Optional CSS properties for panel styling. | -| className | string | Optional CSS class name for the panel. | -| themeType | ThemeLayoutType | Optional theme type for the panel. | +| Property | Type | Description | +| --------- | ------------------------- | -------------------------------------------------------------- | +| children | ReactNode or ReactNode\[] | Required content of the panel. | +| direction | string | Optional orientation of the panel, 'horizontal' or 'vertical'. | +| tabs | TabsProps | Optional properties for tabs within the panel. | +| icon | ReactNode | Optional icon for the panel. | +| extra | ReactNode | Optional additional React nodes to be displayed. | +| hide | boolean | Optional flag to hide the panel. | +| minWidth | number | Optional minimum width for the panel. | +| minHeight | number | Optional minimum height for the panel. | +| maxWidth | number | Optional maximum width for the panel. | +| maxHeight | number | Optional maximum height for the panel. | +| style | React.CSSProperties | Optional CSS properties for panel styling. | +| className | string | Optional CSS class name for the panel. | +| themeType | ThemeLayoutType | Optional theme type for the panel. | ### HeaderFooterSettings diff --git a/src/Layout/index.zh-CN.md b/src/Layout/index.zh-CN.md index ad5e32ff..ba2ec7e8 100644 --- a/src/Layout/index.zh-CN.md +++ b/src/Layout/index.zh-CN.md @@ -54,46 +54,46 @@ EditorLayout 是我们专门为了编辑器场景制作的编辑器布局组件 ### LayoutProps 布局 Props -| 属性 | 类型 | 描述 | -| ------------ | ----------------------------- | ------------------------------------------- | -| header | HeaderFooterSettings 或 false | 可选的头部设置，设置为 `false` 则隐藏。 | -| footer | HeaderFooterSettings 或 false | 可选的底部设置，设置为 `false` 则隐藏。 | +| 属性 | 类型 | 描述 | +| ------------ | ---------------------------- | -------------------------- | +| header | HeaderFooterSettings 或 false | 可选的头部设置，设置为 `false` 则隐藏。 | +| footer | HeaderFooterSettings 或 false | 可选的底部设置，设置为 `false` 则隐藏。 | | leftPannel | PannelSettings 或 false | 可选的左侧面板设置，设置为 `false` 则隐藏。 | | rightPannel | PannelSettings 或 false | 可选的右侧面板设置，设置为 `false` 则隐藏。 | | bottomPannel | PannelSettings 或 false | 可选的底部面板设置，设置为 `false` 则隐藏。 | | centerPannel | PannelSettings 或 false | 可选的中心面板设置，设置为 `false` 则隐藏。 | -| type | LayoutTypeEnum | 可选的布局类型。 | -| themeType | ThemeLayoutType | 可选的布局主题类型。 | +| type | LayoutTypeEnum | 可选的布局类型。 | +| themeType | ThemeLayoutType | 可选的布局主题类型。 | ### PannelSettings 面板设定 -| 属性 | 类型 | 描述 | -| --------- | ------------------------ | -------------------------------------------- | -| children | ReactNode 或 ReactNode[] | 面板的必需内容。 | -| direction | string | 面板的可选方向，'horizontal' 或 'vertical'。 | -| tabs | TabsProps | 面板内部的标签页属性。 | -| icon | ReactNode | 面板的可选图标。 | -| extra | ReactNode | 可选的额外 React 节点。 | -| hide | boolean | 面板的可选隐藏标志。 | -| minWidth | number | 面板的可选最小宽度。 | -| minHeight | number | 面板的可选最小高度。 | -| maxWidth | number | 面板的可选最大宽度。 | -| maxHeight | number | 面板的可选最大高度。 | -| style | React.CSSProperties | 面板样式的可选 CSS 属性。 | -| className | string | 面板的可选 CSS 类名。 | -| themeType | ThemeLayoutType | 面板的可选主题类型。 | +| 属性 | 类型 | 描述 | +| --------- | ------------------------- | ---------------------------------- | +| children | ReactNode 或 ReactNode \[] | 面板的必需内容。 | +| direction | string | 面板的可选方向，'horizontal' 或 'vertical'。 | +| tabs | TabsProps | 面板内部的标签页属性。 | +| icon | ReactNode | 面板的可选图标。 | +| extra | ReactNode | 可选的额外 React 节点。 | +| hide | boolean | 面板的可选隐藏标志。 | +| minWidth | number | 面板的可选最小宽度。 | +| minHeight | number | 面板的可选最小高度。 | +| maxWidth | number | 面板的可选最大宽度。 | +| maxHeight | number | 面板的可选最大高度。 | +| style | React.CSSProperties | 面板样式的可选 CSS 属性。 | +| className | string | 面板的可选 CSS 类名。 | +| themeType | ThemeLayoutType | 面板的可选主题类型。 | ### HeaderFooterSettings 头和脚的区域设定 -| 属性 | 类型 | 描述 | -| ---------- | ------------------------- | --------------------------------------- | +| 属性 | 类型 | 描述 | +| ---------- | ------------------------ | ------------------------ | | iconConfig | iconDropdownType 或 false | 可选的图标配置，设置为 `false` 则隐藏。 | -| extra | ReactNode | 可选的额外 React 节点。 | -| flex | FlexProps | 可选的 Flexbox 属性。 | -| hide | boolean | 组件的可选隐藏标志。 | -| render | Function | 组件的可选自定义渲染函数。 | -| style | React.CSSProperties | 组件样式的可选 CSS 属性。 | -| className | string | 组件的可选 CSS 类名。 | -| children | ReactNode | 组件的可选内容。 | -| type | typeEnum 或 string | 组件的可选类型。 | -| themeType | ThemeLayoutType | 组件的可选主题类型。 | +| extra | ReactNode | 可选的额外 React 节点。 | +| flex | FlexProps | 可选的 Flexbox 属性。 | +| hide | boolean | 组件的可选隐藏标志。 | +| render | Function | 组件的可选自定义渲染函数。 | +| style | React.CSSProperties | 组件样式的可选 CSS 属性。 | +| className | string | 组件的可选 CSS 类名。 | +| children | ReactNode | 组件的可选内容。 | +| type | typeEnum 或 string | 组件的可选类型。 | +| themeType | ThemeLayoutType | 组件的可选主题类型。 | diff --git a/src/LevaPanel/index.zh-CN.md b/src/LevaPanel/index.zh-CN.md index 6c6eabad..4ad1944e 100644 --- a/src/LevaPanel/index.zh-CN.md +++ b/src/LevaPanel/index.zh-CN.md @@ -20,25 +20,25 @@ group: ## API -| 属性名 | 类型 | 描述 | -| ------------ | ---------------------------------------------------- | -------------------- | -| schema | `JSONSchema\` | JSON Schema 配置项 | +| 属性名 | 类型 | 描述 | +| ------------ | ---------------------------------------------------- | --------------- | +| schema | `JSONSchema\` | JSON Schema 配置项 | | defaultValue | `T \| undefined` | 表单默认值 | | value | `T \| undefined` | 表单当前值 | -| onChange | `(changedValue: Partial\, fullValue: T) => void` | 表单值变化的回调函数 | -| title | `ReactNode` | 标题 | +| onChange | `(changedValue: Partial\, fullValue: T) => void` | 表单值变化的回调函数 | +| title | `ReactNode` | 标题 | ## JSONSchema -| 属性名 | 类型 | 描述 | -| ----------- | --------------------------------------------------- | --------------------------------------------- | -| type | `'string'` \| `'boolean'` \| `'number'` \| `object` | 表单类型 | -| title | `string` | 表单标签 | -| default | `any` | 表单默认值 | -| enum | `string[]` | 选项值 | -| enumNames | `string[]` | 选项描述值，配合 `enum` 使用 | +| 属性名 | 类型 | 描述 | +| ----------- | --------------------------------------------------- | -------------------------------- | +| type | `'string'` \| `'boolean'` \| `'number'` \| `object` | 表单类型 | +| title | `string` | 表单标签 | +| default | `any` | 表单默认值 | +| enum | `string[]` | 选项值 | +| enumNames | `string[]` | 选项描述值，配合 `enum` 使用 | | enumOptions | `{label: string, value: string}[]` | 选项描述列表，与 `enums`和`enumNames`作用一致 | -| properties | `object` | 属性配置项，类型为 `object` 使用 | +| properties | `object` | 属性配置项，类型为 `object` 使用 | 示例 `schema`参考: diff --git a/src/Markdown/index.zh-CN.md b/src/Markdown/index.zh-CN.md index 7dce50c4..e6dad8c8 100644 --- a/src/Markdown/index.zh-CN.md +++ b/src/Markdown/index.zh-CN.md @@ -26,11 +26,11 @@ ProEditor 内置了一个默认的 Markdown 渲染器，使用 React-Markdown， ## APIs -| 属性名 | 类型 | 描述 | -| ------------- | --------------------------------- | ------------------------ | +| 属性名 | 类型 | 描述 | +| ------------- | --------------------------------- | ----------------- | | children | string | 要渲染的 Markdown 内容。 | -| className | string | Markdown 组件的类名。 | -| onDoubleClick | () => void | 双击事件处理函数。 | -| style | CSSProperties | Markdown 组件的样式。 | -| rehypePlugins | Markdown rehypePlugins Types | rehype 自定义插件 | -| remarkPlugins | remarkPlugins rehypePlugins Types | remark 自定义插件 | +| className | string | Markdown 组件的类名。 | +| onDoubleClick | () => void | 双击事件处理函数。 | +| style | CSSProperties | Markdown 组件的样式。 | +| rehypePlugins | Markdown rehypePlugins Types | rehype 自定义插件 | +| remarkPlugins | remarkPlugins rehypePlugins Types | remark 自定义插件 | diff --git a/src/Snippet/index.zh-CN.md b/src/Snippet/index.zh-CN.md index e03fdf4d..ca5092e7 100644 --- a/src/Snippet/index.zh-CN.md +++ b/src/Snippet/index.zh-CN.md @@ -13,11 +13,11 @@ description: Snippet 组件用于显示带有语法突出显示的代码片段 ## APIs -| 参数 | 说明 | 类型 | 默认值 | -| :-------- | :--------------------- | :----------------- | :------ | -| children | 组件内显示的内容 | string | - | -| copyable | 内容是否可以复制 | boolean | true | -| language | 组件内容的语言 | string | 'tsx' | +| 参数 | 说明 | 类型 | 默认值 | +| :-------- | :---------- | :----------------- | :------ | +| children | 组件内显示的内容 | string | - | +| copyable | 内容是否可以复制 | boolean | true | +| language | 组件内容的语言 | string | 'tsx' | | spotlight | 是否添加聚光灯背景效果 | boolean | false | -| symbol | 组件内容前显示的符号 | string | - | -| type | 组件的渲染类型 | 'ghost' \| 'block' | 'ghost' | +| symbol | 组件内容前显示的符号 | string | - | +| type | 组件的渲染类型 | 'ghost' \| 'block' | 'ghost' | diff --git a/src/SortableList/index.zh-CN.md b/src/SortableList/index.zh-CN.md index 3d4f1b7c..792c8cb1 100644 --- a/src/SortableList/index.zh-CN.md +++ b/src/SortableList/index.zh-CN.md @@ -16,46 +16,35 @@ demo: ## 使用方式 - - - - - - - - - - - - + ## API ### Basic 组件属性 -| 属性名 | 类型 | 描述 | -| ------------------ | ---------------------------------------------------------------- | ---------------------------------- | -| value | `T[]` | 值 | -| initialValues | `T[]` | 初始值 | -| onChange | `(value: T[], event: ListDataDispatchPayload) => void` | 值变化 | -| renderContent | `(item: T, index: number) => ReactNode` | 自定义可排序列表项内容 | -| renderItem | `(item: T, options) => ReactNode` | 自定义可排序列表项 | -| renderHeader | `() => ReactNode` | 自定义渲染表头 | -| renderEmpty | `() => ReactNode` | 自定义渲染空状态 | -| getItemStyle | `(status: GetItemStylesArgs) => ReactNode` | 自定义容器样式 | -| ref | `ForwardedRef>` | 对外部暴露方法 | -| hideRemove | `boolean` | 是否隐藏删除按钮，默认为 false | -| handle | `boolean` | 是否显示拖拽按钮，默认为 true | -| creatorButtonProps | `CreatorButtonProps\|false` | 新建对象相关属性 | -| actions | `(item: T, index: number) => ReactNode[]` \| `React.ReactNode[]` | 除列表自带操作之外的其他操作自渲染 | +| 属性名 | 类型 | 描述 | +| ------------------ | ---------------------------------------------------------------- | ------------------ | +| value | `T[]` | 值 | +| initialValues | `T[]` | 初始值 | +| onChange | `(value: T[], event: ListDataDispatchPayload) => void` | 值变化 | +| renderContent | `(item: T, index: number) => ReactNode` | 自定义可排序列表项内容 | +| renderItem | `(item: T, options) => ReactNode` | 自定义可排序列表项 | +| renderHeader | `() => ReactNode` | 自定义渲染表头 | +| renderEmpty | `() => ReactNode` | 自定义渲染空状态 | +| getItemStyle | `(status: GetItemStylesArgs) => ReactNode` | 自定义容器样式 | +| ref | `ForwardedRef>` | 对外部暴露方法 | +| hideRemove | `boolean` | 是否隐藏删除按钮，默认为 false | +| handle | `boolean` | 是否显示拖拽按钮，默认为 true | +| creatorButtonProps | `CreatorButtonProps\|false` | 新建对象相关属性 | +| actions | `(item: T, index: number) => ReactNode[]` \| `React.ReactNode[]` | 除列表自带操作之外的其他操作自渲染 | ### CreatorButtonProps 创建按钮属性 -| 属性名 | 类型 | 描述 | -| ----------------- | ---------------------- | -------------------------------------------------------------------- | -| position | `'bottom'\|'top'` | 按钮位置，默认在下方 | -| record | `(index: number) => T` | 生成初始值逻辑 | -| creatorButtonText | `string` | 新增一行按钮文案 | +| 属性名 | 类型 | 描述 | +| ----------------- | ---------------------- | ------------------------------------------------ | +| position | `'bottom'\|'top'` | 按钮位置，默认在下方 | +| record | `(index: number) => T` | 生成初始值逻辑 | +| creatorButtonText | `string` | 新增一行按钮文案 | | style | CSSProperties | 按钮的样式设置，可以设置按钮是否显示，如 `style: { display: 'none'}` | ### GetItemStylesArgs diff --git a/src/SortableTree/index.en-US.md b/src/SortableTree/index.en-US.md index a11a1486..15bb0383 100644 --- a/src/SortableTree/index.en-US.md +++ b/src/SortableTree/index.en-US.md @@ -102,8 +102,3 @@ export interface SortableTreeInstance extends PublicSortableTreeStore { getFlattenData: () => FlattenNode[]; } ``` - -[//]: # '### 多选方案' -[//]: # - -[//]: # "" diff --git a/src/SortableTree/index.zh-CN.md b/src/SortableTree/index.zh-CN.md index 2ca7e25c..3dfcbd84 100644 --- a/src/SortableTree/index.zh-CN.md +++ b/src/SortableTree/index.zh-CN.md @@ -18,67 +18,60 @@ demo: ### - - + - - - - -[//]: # '### 多选方案' -[//]: # -[//]: # '' + ## API ### 属性 -| 名称 | 类型 | 描述 | -| ------------------- | ----------------------------------------------------------------------------------------------------- | ---------------------- | -| hideAdd | `boolean` | 隐藏默认的添加按钮 | -| hideRemove | `boolean` | 隐藏默认的删除按钮 | -| disableDrag | `boolean` | 禁用拖拽 | -| indentationWidth | `number` | 缩进宽度 | -| onSelectedIdsChange | `(selectedIds: UniqueIdentifier[]) => void` | 选中 ID 变更回调 | -| treeData | `TreeData` | 树的数据 | -| defaultTreeData | `TreeData` | 默认数据 | -| onTreeDataChange | `(treeData: TreeData,event: TreeDataDispatchPayload) => void` | 数据变更回调 | -| renderContent | `(node: FlattenNode) => JSX.Element` | 渲染内容 | -| renderExtra | `(node: FlattenNode) => JSX.Element` | 渲染额外项 | -| ref | `MutableRefObject>` | 对外部暴露方法 | +| 名称 | 类型 | 描述 | +| ------------------- | ----------------------------------------------------------------------------------------------------- | ----------- | +| hideAdd | `boolean` | 隐藏默认的添加按钮 | +| hideRemove | `boolean` | 隐藏默认的删除按钮 | +| disableDrag | `boolean` | 禁用拖拽 | +| indentationWidth | `number` | 缩进宽度 | +| onSelectedIdsChange | `(selectedIds: UniqueIdentifier[]) => void` | 选中 ID 变更回调 | +| treeData | `TreeData` | 树的数据 | +| defaultTreeData | `TreeData` | 默认数据 | +| onTreeDataChange | `(treeData: TreeData,event: TreeDataDispatchPayload) => void` | 数据变更回调 | +| renderContent | `(node: FlattenNode) => JSX.Element` | 渲染内容 | +| renderExtra | `(node: FlattenNode) => JSX.Element` | 渲染额外项 | +| ref | `MutableRefObject>` | 对外部暴露方法 | | sortableRule | `data: { activeNode: FlattenNode; targetNode: FlattenNode; projected: Projected; }) => boolean` | 控制拖动排序的规则函数 | ## TreeNode 树节点 -| 名称 | 类型 | 描述 | -| --------- | ------------------ | ---------------- | -| id | `UniqueIdentifier` | 节点 ID | -| children | `TreeNode[]` | 子节点列表 | -| collapsed | `boolean` | 组是否折叠 | +| 名称 | 类型 | 描述 | +| --------- | ------------------ | -------- | +| id | `UniqueIdentifier` | 节点 ID | +| children | `TreeNode[]` | 子节点列表 | +| collapsed | `boolean` | 组是否折叠 | | showExtra | `boolean` | 是否显示额外区域 | -| content | `T` | 节点数据 | +| content | `T` | 节点数据 | ## FlattenNode 展平的节点 -| 名称 | 类型 | 描述 | -| -------- | ---------------------------- | -------------------------------- | +| 名称 | 类型 | 描述 | +| -------- | ---------------------------- | -------------------- | | parentId | `UniqueIdentifier` \| `null` | 父节点 ID，如果是根节点则为 null | -| depth | `number` | 节点深度 | -| index | `number` | 节点在同级节点中的位置 | +| depth | `number` | 节点深度 | +| index | `number` | 节点在同级节点中的位置 | ## Projected 放置目标位置信息 -| 名称 | 类型 | 描述 | -| -------- | ---------------------------- | -------------------------------- | -| depth | `number` | 放置目标位置深度 | -| maxDepth | `number` | 目标位置可放置最大深度 | -| minDepth | `number` | 目标位置可放置可放置最小深度 | +| 名称 | 类型 | 描述 | +| -------- | ---------------------------- | -------------------- | +| depth | `number` | 放置目标位置深度 | +| maxDepth | `number` | 目标位置可放置最大深度 | +| minDepth | `number` | 目标位置可放置可放置最小深度 | | parentId | `UniqueIdentifier` \| `null` | 父节点 ID，如果是根节点则为 null | ## SortableTreeInstance diff --git a/src/TipGuide/index.zh-CN.md b/src/TipGuide/index.zh-CN.md index 6053548c..f818e260 100644 --- a/src/TipGuide/index.zh-CN.md +++ b/src/TipGuide/index.zh-CN.md @@ -40,13 +40,13 @@ group: 基础组件 ## API -| 参数 | 说明 | 类型 | 默认值 | -| :----------- | :---------------------------------- | :---------------------------------------- | :------- | -| title | 引导标题 | `string` | - | -| placement | ToolTip 位置 | `TooltipProps['placement']` | 'bottom' | -| offsetY | 纵向偏移值 | number | - | -| maxWidth | 最大宽度 | number | 300 | -| open | 受控的 open 属性 | boolean | - | -| onOpenChange | 当 open 属性变化时候的触发 | (open: boolean) => void | - | -| defaultOpen | 默认时候的打开状态 | boolean | - | +| 参数 | 说明 | 类型 | 默认值 | +| :----------- | :-------------------------- | :---------------------------------------- | :------- | +| title | 引导标题 | `string` | - | +| placement | ToolTip 位置 | `TooltipProps['placement']` | 'bottom' | +| offsetY | 纵向偏移值 | number | - | +| maxWidth | 最大宽度 | number | 300 | +| open | 受控的 open 属性 | boolean | - | +| onOpenChange | 当 open 属性变化时候的触发 | (open: boolean) => void | - | +| defaultOpen | 默认时候的打开状态 | boolean | - | | footerRender | 用于自定义 footer 部分的 render api | (dom: React.ReactNode) => React.ReactNode | - | diff --git a/src/antd/index.zh-CN.md b/src/antd/index.zh-CN.md index 9077fd6c..0c5969a5 100644 --- a/src/antd/index.zh-CN.md +++ b/src/antd/index.zh-CN.md @@ -15,8 +15,7 @@ demo: 针对输入框类控件，重点优化了数据变更的时机，只有在输入框失焦或按回车后，才会触发更新； - - + ### Select