Skip to content

Commit

Permalink
API文档新增布局方向+节点配置
Browse files Browse the repository at this point in the history
  • Loading branch information
昔梦 committed Nov 29, 2024
1 parent 673e61f commit 61370d9
Show file tree
Hide file tree
Showing 11 changed files with 1,101 additions and 17 deletions.
30 changes: 14 additions & 16 deletions docs/xflow/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,13 @@ title: API

## XFlow

<!-- 对 Antd Table 的 [props](https://ant-design.antgroup.com/components/table-cn/#Table) 完全兼容，但 `dataSource`, `loading` 这两个参数是内部状态，不允许配置 -->

| 属性 | 描述 | 类型 | 默认值 |
| ------------- | ------------------------------------ | --------------------------------------------------------- | ------ |
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any}` | - | - |
| layout | 节点布局的方向 | `LR \| TB` | - | - |
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem))[] | |
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector` | |
| 属性 | 描述 | 类型 | 默认值 |
| ------------- | ------------------------------------ | ----------------------------------------------------------- | ------ |
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any[]}` | - | - |
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector` | |

### TNodeGroup

Expand All @@ -24,7 +22,7 @@ title: API
| 属性 | 描述 | 类型 | 默认值 |
| ----- | ------------ | ------------- | ------ |
| title | 分组名称 | `string` | |
| type | 分组类型 | `_group` | |
| type | 分组类型 | `_group` | _group |
| items | 节点配置信息 | `TNodeItem[]` | |

## TNodeItem
Expand All @@ -34,17 +32,17 @@ title: API
| 属性 | 描述 | 类型 | 默认值 |
| ------------------ | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| title | 节点名称 | `string` | |
| type | 节点类型 | `string` | |
| type | 节点类型 | `string` | |
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
| settingSchema | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema) | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> | |
| settingWidget | 自定义节点的业务配置组件 | `string` | |

## TNodeSelector

| 属性 | 描述 | 类型 | 默认值 |
| ---------- | ---------------- | --------------------------------------------------------- | ------ |
| showSearch | 节点是否可被搜索 | `boolean` | false |
| items | 节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem))[] | |
| 属性 | 描述 | 类型 | 默认值 |
| ---------- | ---------------- | ----------------------------------------------------------- | ------ |
| showSearch | 节点是否可被搜索 | `boolean` | false |
| items | 节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
100 changes: 100 additions & 0 deletions docs/xflow/demo/basic/setting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,16 @@ export default [
type: 'icon-model',
bgColor: '#6172F3',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
{
title: 'Prompt',
Expand All @@ -117,6 +127,16 @@ export default [
type: 'icon-prompt',
bgColor: '#17B26A',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
{
title: '知识库',
Expand All @@ -126,6 +146,16 @@ export default [
type: 'icon-knowledge',
bgColor: '#6172F3',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
{
title: 'Switch',
Expand All @@ -135,6 +165,16 @@ export default [
type: 'icon-switch',
bgColor: '#06AED4',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
{
title: 'HSF',
Expand All @@ -144,6 +184,16 @@ export default [
type: 'icon-hsf',
bgColor: '#875BF7',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
{
title: 'Http',
Expand All @@ -153,6 +203,16 @@ export default [
type: 'icon-http',
bgColor: '#875BF7',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
{
title: '代码执行',
Expand All @@ -162,6 +222,16 @@ export default [
type: 'icon-code',
bgColor: '#2E90FA',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
{
title: '工具',
Expand All @@ -171,6 +241,16 @@ export default [
type: 'icon-gongju',
bgColor: '#2E90FA',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
{
title: '工具',
Expand All @@ -184,6 +264,16 @@ export default [
type: 'icon-code',
bgColor: '#2E90FA',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
{
title: '工具',
Expand All @@ -193,6 +283,16 @@ export default [
type: 'icon-gongju',
bgColor: '#2E90FA',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
],
},
Expand Down
65 changes: 65 additions & 0 deletions docs/xflow/demo/layout/LR/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import XFlow from '@xrenders/xflow';
import settings from './setting';
import React from 'react';

export default () => {
const nodes = [
{
type: 'Start',
id: '1',
position: { x: -35, y: 268 },
},
{
type: 'Switch',
id: '2',
position: { x: 277.5, y: 268 },
},
{
type: 'Code',
id: '3',
position: { x: 675, y: 123.75 },
},
{
type: 'tool',
id: '4',
position: { x: 686.25, y: 495 },
},
{
type: 'End',
id: '5',
position: { x: 1176.2499999999998, y: 281.25 },
},
];
const edges = [
{ source: '1', target: '2', id: 'e1-2' },
{
source: '2',
target: '3',
id: 'e2-3',
},
{ source: '2', target: '4', id: 'e2-4' },
{
source: '3',
target: '5',
id: 'e3-5',
},
{
source: '4',
target: '5',
id: 'e4-5',
},
];

return (
<div style={{ height: '600px' }}>
<XFlow
initialValues={{ nodes, edges }}
settings={settings}
nodeSelector={{
showSearch: true,
}}
layout="LR"
/>
</div>
);
};
Loading

0 comments on commit 61370d9

Please sign in to comment.