Skip to content

Commit 142f3f0

Browse files
author
昔梦
committed
fix:修改更新日志文档以及xflow-readme文档内容
1 parent de6990a commit 142f3f0

File tree

4 files changed

+132
-95
lines changed

4 files changed

+132
-95
lines changed

‎docs/xflow/updateLog.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,6 @@ group:
1111

1212
### 1.0.3
1313
- [+] xflow 初始版本发布
14+
15+
### 1.0.4
16+
- [+] 增加自定义组件完整案例，修复下拉框在全屏模式下无法显示的问题，增加撤销与重做按钮的隐藏配置

‎packages/x-flow/CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
11
# 更新日志
22

3+
### 1.0.3
4+
- [+] xflow 初始版本发布
5+
6+
### 1.0.4
7+
- [+] 增加自定义组件完整案例，修复下拉框在全屏模式下无法显示的问题，增加撤销与重做按钮的隐藏配置

‎packages/x-flow/CONTRIBUTING.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 如何贡献代码
22

3-
欢迎给 FormRender 提优化建议，或者修复已有 Bug，共促其发展
3+
欢迎给 XFlow 提优化建议，或者修复已有 Bug，共促其发展
44

55
## Branch 管理
66

‎packages/x-flow/README.md‎

Lines changed: 123 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,155 @@
11
<div style="display:flex;align-items:center;margin-bottom:24px">
22
<img src="https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png" alt="logo" width="48px"/>
3-
<h4 style="font-size:30px;font-weight:600;display:inline-block;margin-left:12px">FormRender</h4>
3+
<span style="font-size:30px;font-weight:600;display:inline-block;margin-left:12px">XFlow</span>
44
</div>
55
<p style="display:flex;justify-content:space-between;width:440px">
6-
<a href="https://www.npmjs.com/package/form-render?_blank">
7-
<img alt="npm" src="https://img.shields.io/npm/v/form-render.svg?maxAge=3600&style=flat-square">
6+
<a href="https://www.npmjs.com/package/@xrenders/xflow" target="_blank">
7+
<img alt="npm" src="https://img.shields.io/npm/v/@xrenders/xflow.svg?maxAge=3600&style=flat-square">
88
</a>
9-
<a href="https://npmjs.org/package/form-render">
10-
<img alt="NPM downloads" src="https://img.shields.io/npm/dm/form-render.svg?style=flat-square">
9+
<a href="https://npmjs.org/package/@xrenders/xflow" target="_blank">
10+
<img alt="NPM downloads" src="https://img.shields.io/npm/dm/@xrenders/xflow.svg?style=flat-square">
1111
</a>
12-
<a href="https://npmjs.org/package/form-render">
13-
<img alt="NPM all downloads" src="https://img.shields.io/npm/dt/form-render.svg?style=flat-square">
12+
<a href="https://npmjs.org/package/@xrenders/xflow" target="_blank">
13+
<img alt="NPM all downloads" src="https://img.shields.io/npm/dt/@xrenders/xflow.svg?style=flat-square">
1414
</a>
1515
<a>
1616
<img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square">
1717
</a>
1818
</p>
1919

20-
> 一站式中后台**表单解决方案**
21-
22-
## 官网
23-
24-
<https://xrender.fun/form-render>
25-
26-
FormRender 是中后台开箱即用的表单解决方案，通过 JsonSchema 协议动态渲染表单。为了能切实承接日益复杂的表单场景需求，2.0 我们进行了底层重构。我们的目标是以强大的扩展能力对表单场景 100% 的覆盖支持，同时保持开发者能快速上手，并以表单编辑器、插件、自定义组件等一系列周边产品带来极致的开发体验。在开发 1.0 的道路上，我们做了一系列的取舍，详见[v2 升级方案](https://xrender.fun/form-render/migrate)
20+
画布流程编排解决方案
2721

2822
## 安装
2923

30-
FormRender 依赖 ant design，单独使用不要忘记同时安装 `antd`
31-
32-
```shell
33-
npm i form-render --save
24+
```bash
25+
npm install @xrenders/xflow
3426
```
3527

36-
## 使用
28+
## 基础使用
3729

38-
**最简使用 demo：**
30+
### 1. 引入组件
3931

40-
```jsx
41-
import React from 'react';
42-
import { Button } from 'antd';
43-
import FormRender, { connectForm } from 'form-render';
32+
```js
33+
import XFlow from '@xrenders/xflow';
34+
```
4435

45-
const schema = {
46-
type: 'object',
47-
properties: {
48-
input1: {
49-
title: '简单输入框',
50-
type: 'string',
51-
required: true,
36+
### 2. 配置节点菜单以及节点面板
37+
38+
```js
39+
const nodeSettings = [
40+
{
41+
title: '开始',
42+
type: 'Start',
43+
hidden: true,
44+
targetHandleHidden: true,
45+
icon: {
46+
type: 'icon-start',
47+
bgColor: '#17B26A',
48+
},
49+
settingSchema: {
50+
type: 'object',
51+
properties: {
52+
input: {
53+
title: '变量一',
54+
type: 'string',
55+
widget: 'input',
56+
},
57+
},
58+
},
5259
},
53-
select1: {
54-
title: '单选',
55-
type: 'string',
56-
props: {
57-
options: [
58-
{ label: '早', value: 'a' },
59-
{ label: '中', value: 'b' },
60-
{ label: '晚', value: 'c' }
61-
]
60+
{
61+
title: '结束',
62+
type: 'End',
63+
hidden: true,
64+
sourceHandleHidden: true,
65+
icon: {
66+
type: 'icon-end',
67+
bgColor: '#F79009',
68+
},
69+
settingSchema: {
70+
type: "object",
71+
properties: {
72+
input: {
73+
title: '变量一',
74+
type: 'string',
75+
widget: 'input',
76+
},
77+
}
6278
}
6379
},
64-
},
65-
};
66-
67-
class Demo extends React.Component {
68-
render() {
69-
const { form } = this.props;
70-
return (
71-
<div>
72-
<FormRender form={form} schema={schema} />
73-
<Button type="primary" onClick={form.submit}>
74-
提交
75-
</Button>
76-
</div>
77-
);
78-
}
79-
}
80-
81-
export default connectForm(Demo);
80+
{
81+
title: 'LLM',
82+
type: 'LLM',
83+
desc: '调用大语言模型回答问题或者对自然语言进行处理',
84+
icon: {
85+
type: 'icon-model',
86+
bgColor: '#6172F3',
87+
},
88+
settingSchema: {
89+
type: 'object',
90+
properties: {
91+
model: {
92+
title: '模型',
93+
type: 'string',
94+
enum: ['gpt-3.5', 'gpt-4'],
95+
default: 'gpt-3.5'
96+
},
97+
temperature: {
98+
title: '温度',
99+
type: 'number',
100+
default: 0.7,
101+
minimum: 0,
102+
maximum: 1
103+
}
104+
}
105+
}
106+
},
107+
{
108+
title: 'Prompt',
109+
type: 'Prompt',
110+
description: '通过精心设计提示词，提升大语言模型回答效果',
111+
icon: {
112+
type: 'icon-prompt',
113+
bgColor: '#17B26A',
114+
},
115+
},
116+
{
117+
title: '知识库',
118+
type: 'knowledge',
119+
description: '允许你从知识库中查询与用户问题相关的文本内容',
120+
icon: {
121+
type: 'icon-knowledge',
122+
bgColor: '#6172F3',
123+
},
124+
},
125+
];
82126
```
83127

84-
**对于函数组件，FormRender 提供了 `useForm` hooks, 书写更为灵活**
85128

86-
```jsx
87-
import React from 'react';
88-
import { Button } from 'antd';
89-
import FormRender, { useForm } from 'form-render';
90-
91-
const schema = {
92-
type: 'object',
93-
properties: {
94-
input1: {
95-
title: '简单输入框',
96-
type: 'string',
97-
required: true,
98-
},
99-
select1: {
100-
title: '单选',
101-
type: 'string',
102-
props: {
103-
options: [
104-
{ label: '早', value: 'a' },
105-
{ label: '中', value: 'b' },
106-
{ label: '晚', value: 'c' }
107-
]
108-
}
109-
}
110-
}
111-
};
129+
### 3. 使用组件
112130

131+
```js
113132
const Demo = () => {
114-
const form = useForm();
115133
return (
116-
<div>
117-
<FormRender form={form} schema={schema} />
118-
<Button type="primary" onClick={form.submit}>
119-
提交
120-
</Button>
121-
</div>
134+
<XFlow
135+
settings={nodeSettings}
136+
initialValues={{
137+
nodes: [],
138+
edges: []
139+
}}
140+
/>
122141
);
123142
};
143+
```
144+
145+
## 完整示例
146+
147+
<code src="./demo/quickStart/index.tsx"></code>
124148

125-
export default Demo;
126-
```
149+
## 注意事项
150+
1. 确保项目中已安装必要的依赖：
151+
- React
152+
- XFlow
153+
2. 组件需要设置固定高度，建议使用百分比或视口单位
154+
3. 节点配置中的 `settingSchema` 需要符合 FormRender 的协议规范
155+
4. 初始值 `initialValues` 中的节点数据需要包含必要的字段：id、type、data、position

0 commit comments

Comments
 (0)