Skip to content

Commit b059fc4

Browse files
lhbxslhbxs
authored
Merge pull request #1642 from alibaba/fix-xflow-docs
Fix： xflow docs完善xflow文档并透出xflow菜单
2 parents aab08c2 + 8fd3a87 commit b059fc4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+4721
-287
lines changed

Diff for: ‎.dumi/theme/slots/Header/Navigation.tsx

+14-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CodeOutlined, DownOutlined } from '@ant-design/icons';
1+
import { CodeOutlined, DownOutlined, NodeIndexOutlined } from '@ant-design/icons';
22
import { Menu } from 'antd';
33
import { Link } from 'dumi';
44
import React from 'react';
@@ -13,6 +13,10 @@ const Navigation: React.FC = () => {
1313
label: <Link to="/table-render">TableRender</Link>,
1414
key: 'table-render',
1515
},
16+
{
17+
label: <Link to="/xflow">XFlow</Link>,
18+
key: 'xflow',
19+
},
1620
// {
1721
// label: <Link to="/xflow">XFlow</Link>,
1822
// key: 'xflow',
@@ -29,10 +33,10 @@ const Navigation: React.FC = () => {
2933
label: <Link to="/playground">Playground</Link>,
3034
key: 'playground',
3135
},
32-
{
33-
label: <Link to="/schema-builder">SchemaBuilder</Link>,
34-
key: 'schema-builder',
35-
},
36+
// {
37+
// label: <Link to="/schema-builder">SchemaBuilder</Link>,
38+
// key: 'schema-builder',
39+
// },
3640
{
3741
label: (
3842
<div>
@@ -43,6 +47,11 @@ const Navigation: React.FC = () => {
4347
</div>
4448
),
4549
children: [
50+
{
51+
label: <Link to="/schema-builder">SchemaBuilder</Link>,
52+
key: 'schema-builder',
53+
icon: <NodeIndexOutlined />,
54+
},
4655
{
4756
label: (
4857
<a href="https://1.xrender.fun/chart-render" target="_black">

Diff for: ‎docs/index.en-US.md

+25-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: 首页
33
hero:
44
title: XRender 2.0
55
description: |
6-
中后台「表单/表格/图表」开箱即用解决方案
6+
中后台「表单/表格/图表/流程编排」开箱即用解决方案
77
<br />
88
<small style="opacity: 0.7;">v1 文档请访问 <a href="https://xrender.fun/" style="color: #1677ff;">https://xrender.fun</a></small>
99
actions:
@@ -21,6 +21,9 @@ features:
2121
- emoji: 💎
2222
title: FormGenerator
2323
description: 中后台表单可视化搭建生成利器
24+
- emoji: 🚁
25+
title: XFlow
26+
description: 画布流程编排解决方案
2427
footer: false
2528
---
2629

@@ -31,3 +34,24 @@ footer: false
3134
<a href="https://github.com/alibaba/x-render/graphs/contributors">
3235
<img style="width: 60%" src="https://contrib.rocks/image?repo=alibaba/form-render" />
3336
</a>
37+
38+
39+
<style>
40+
.dumi-default-features {
41+
display: flex;
42+
flex-wrap: nowrap;
43+
justify-content: space-evenly;
44+
max-width: 1200px !important;
45+
margin: 0 auto;
46+
}
47+
48+
.dumi-default-features-item {
49+
flex: 0 1 auto;
50+
width: 25%;
51+
text-align: center;
52+
}
53+
54+
.dumi-default-features[data-cols='2'] > .dumi-default-features-item:nth-child(odd) {
55+
margin-inline-end: 0;
56+
}
57+
</style>

Diff for: ‎docs/index.zh-CN.md

+25-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: 首页
33
hero:
44
title: XRender 2.0
55
description: |
6-
中后台「表单/表格/图表」开箱即用解决方案
6+
中后台「表单/表格/图表/流程编排」开箱即用解决方案
77
<br />
88
actions:
99
- text: 立即使用
@@ -20,6 +20,9 @@ features:
2020
- emoji: 💎
2121
title: FormGenerator
2222
description: 中后台表单可视化搭建生成利器
23+
- emoji: 🚁
24+
title: XFlow
25+
description: 画布流程编排解决方案
2326
footer: false
2427
---
2528
<!-- <TypeSchema></TypeSchema> -->
@@ -29,4 +32,24 @@ footer: false
2932

3033
<a href="https://github.com/alibaba/x-render/graphs/contributors">
3134
<img style="height: 500px; margin-bottom: 50px" src="https://contrib.rocks/image?repo=alibaba/form-render" />
32-
</a>
35+
</a>
36+
37+
<style>
38+
.dumi-default-features {
39+
display: flex;
40+
flex-wrap: nowrap;
41+
justify-content: space-evenly;
42+
max-width: 1200px !important;
43+
margin: 0 auto;
44+
}
45+
46+
.dumi-default-features-item {
47+
flex: 0 1 auto;
48+
width: 25%;
49+
text-align: center;
50+
}
51+
52+
.dumi-default-features[data-cols='2'] > .dumi-default-features-item:nth-child(odd) {
53+
margin-inline-end: 0;
54+
}
55+
</style>

Diff for: ‎docs/xflow/FlowProvider.md

+68-30
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,92 @@
11
---
22
order: 4
3-
title: '<FlowProvider/>'
3+
title: 'FlowProvider'
44
mobile: false
55
group:
66
title: 高级用法
7-
order: 1
7+
order: 2
88
---
99

10-
## 基础交互
10+
# FlowProvider
1111

12-
`<FlowProvider/>` 组件是一个 Context Provider，使得在 `<XFlow/>` 组件之外访问流的内部状态成为可能。我们提供的 `useFlow()`、`useNodes()` 和 `useEdges()` 钩子依赖于这个组件才能工作。
12+
`<FlowProvider/>` 组件是一个 Context Provider，它使在 `<XFlow/>` 组件之外访问流的内部状态成为可能。我们提供的 `useFlow()`、`useNodes()` 和 `useEdges()` 钩子依赖于这个组件才能工作。
1313

14+
15+
## 基础用法
16+
17+
```js
18+
import { FlowProvider } from '@xrenders/xflow';
19+
20+
export default () => {
21+
return (
22+
<FlowProvider>
23+
<XFlow
24+
initialValues={{ nodes: initialNodes, edges: initialEdges }}
25+
settings={settings as any[]}
26+
nodeSelector={{
27+
showSearch: true,
28+
}}
29+
/>
30+
</FlowProvider>
31+
);
32+
};
33+
```
34+
35+
## 完整示例
1436
<code src="./demo/flow-provider/index.tsx"></code>
1537

1638
## useFlow
1739

1840
`useFlow()` 钩子返回 XFlow 实例，包含了一些实用的内部方法。
1941

20-
- setNodes：设置节点
21-
- addNodes：添加一个或多个节点
22-
- setEdges：设置边
23-
- addEdges：添加一个或多个边
24-
- getNodes：获取节点数据
25-
- getEdges：获取边数据
26-
- toObject：将画布数据转换为对象返回
27-
- zoomIn：放大画布
28-
- zoomOut：缩小画布
29-
- zoomTo：缩放画布
30-
- getZoom：获取缩放比例
31-
- setViewport：设置视口
32-
- getViewport：获取视口
33-
- fitView：适应画布
34-
- setCenter：设置画布中心
35-
- fitBounds：适应边界
36-
- screenToFlowPosition：将屏幕坐标转换为画布坐标
37-
- flowToScreenPosition：将画布坐标转换为屏幕坐标
38-
- runAutoLayout：自动布局节点
39-
- copyNode：复制单个节点
40-
- pasteNode：粘贴单个节点
41-
- deleteNode：删除单个节点
42+
### 节点操作
43+
- `setNodes`: 设置节点
44+
- `addNodes`: 添加一个或多个节点
45+
- `getNodes`: 获取节点数据
46+
<!-- - `onNodesChange`: 节点变化时的回调 -->
47+
- `deleteNode`: 删除单个节点
48+
- `copyNode`: 复制单个节点
49+
- `pasteNode`: 粘贴单个节点
4250

43-
## useNodes
51+
### 边操作
52+
- `setEdges`: 设置边
53+
- `addEdges`: 添加一个或多个边
54+
- `getEdges`: 获取边数据
55+
<!-- - `onEdgesChange`: 边变化时的回调 -->
56+
<!-- - `onConnect`: 连接边时的回调 -->
57+
58+
### 视图控制
59+
- `zoomIn`: 放大画布
60+
- `zoomOut`: 缩小画布
61+
- `zoomTo(level)`: 缩放画布到指定比例
62+
- `getZoom`: 获取缩放比例
63+
- `setViewport`: 设置视口
64+
- `getViewport`: 获取视口
65+
- `fitView`: 适应画布
66+
- `setCenter`: 设置画布中心
67+
- `fitBounds`: 适应边界
4468

45-
`useFlow` 的 `getNodes` 是瞬时值。想要监听节点状态，请使用 `useNodes` 钩子来返回实时 nodes 状态。
69+
### 坐标转换
70+
- `screenToFlowPosition`: 将屏幕坐标转换为画布坐标
71+
- `flowToScreenPosition`: 将画布坐标转换为屏幕坐标
4672

73+
### 布局
74+
- `runAutoLayout`: 自动布局节点
75+
<!-- - `layout`: 获取当前布局配置 -->
76+
77+
### 数据转换
78+
- `toObject`: 将画布数据转换为对象返回
79+
80+
## useNodes
81+
82+
`useNodes()` 钩子用于实时监听节点状态变化。与 `useFlow` 的 `getNodes` 不同，`getNodes` 是瞬时值，`useNodes` 返回实时的nodes状态。
83+
4784
## useEdges
4885

49-
`useFlow` 的 `getEdges` 是瞬时值。想要监听节点状态，请使用 `useEdges` 钩子来返回实时 edges 状态。
86+
`useFlow` 的 `getEdges` 是瞬时值。想要监听节点状态，请使用 `useEdges` 钩子来返回实时 edges 状态。
87+
5088

51-
## 注意
89+
## 注意事项
5290

5391
- 如果你正在使用路由器并且希望流程的状态在不同路由之间保持持久，那么将 `<FlowProvider/>` 组件放置在路由器外部是至关重要的。
5492
- 如果在同一页面上有多个 `<XFlow/>`，则需要为每个 `<XFlow/>` 使用单独的 `<FlowProvider/>`

Diff for: ‎docs/xflow/api.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ order: 1
33
title: 'API'
44
mobile: false
55
group:
6-
title: 'API'
6+
title: 'API文档'
77
order: 3
88
---
99
# API
@@ -34,6 +34,8 @@ group:
3434
| -------- | ---------------------------------- | ------------------ | ------ |
3535
| width | 设置配置面板宽度 | `string \| number` | 400 |
3636
| hideDesc | 是否在配置面板中显示节点的描述信息 | `boolean` | false |
37+
| onClose | 配置面板关闭事件 | `(nodeID:string)=>void` | |
38+
3739

3840

3941

@@ -53,6 +55,8 @@ group:
5355
| 属性 | 描述 | 类型 | 默认值 |
5456
| -------------- | ------------------------------------------ | --------- | ------ |
5557
| hideEdgeAddBtn | 是否隐藏两个节点之间，连线上的增加节点按钮 | `boolean` | false |
58+
| deletable | 配置边是否可删除 | `boolean` | false |
59+
5660

5761
## TNodeGroup
5862

Diff for: ‎docs/xflow/best-practices.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,16 @@ title: '最佳实践'
44
mobile: false
55
group:
66
title: 最佳实践
7-
order: 1
7+
order: 3
88
---
99

10-
# 在项目中使用
10+
# 最佳实践
1111

1212

13+
## 案例1
1314
<code src="./demo/best/basic/index.tsx"></code>
1415

16+
## 案例2
17+
<code src="./demo/best/demo2/index.tsx"></code>
1518

1619

0 commit comments

Comments
 (0)