+
+ );
+}
+
+
+```
+
+## Widget
+通过配置节点的 `settingWidget` 属性，实现节点数据配置项的自定义渲染。
+
+
+
+ );
+}
diff --git a/docs/xflow/demo/basic/setting.tsx b/docs/xflow/demo/basic/setting.tsx
new file mode 100644
index 000000000..937413778
--- /dev/null
+++ b/docs/xflow/demo/basic/setting.tsx
@@ -0,0 +1,299 @@
+export default [
+ {
+ title: '开始',
+ type: 'Start',
+ hidden: true,
+ targetHandleHidden: true,
+ icon: {
+ type: 'icon-start',
+ bgColor: '#17B26A',
+ },
+ settingSchema: {
+ type: 'object',
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ radio1: {
+ title: '点击单选',
+ type: 'string',
+ widget: 'radio',
+ props: {
+ options: [
+ { label: '早', value: 'a' },
+ { label: '中', value: 'b' },
+ { label: '晚', value: 'c' }
+ ]
+ }
+ },
+ textarea1: {
+ title: '长文本',
+ type: 'string',
+ widget: 'textArea'
+ },
+ date1: {
+ title: '日期选择',
+ type: 'string',
+ widget: 'datePicker'
+ },
+ dateRange1: {
+ title: '日期范围',
+ type: 'range',
+ widget: 'dateRange'
+ },
+ time1: {
+ title: '时间选择',
+ type: 'string',
+ widget: 'timePicker'
+ },
+ timeRange1: {
+ title: '时间范围',
+ type: 'range',
+ widget: 'timeRange'
+ },
+ },
+ },
+ },
+ {
+ title: '结束',
+ type: 'End',
+ hidden: true,
+ sourceHandleHidden: true,
+ icon: {
+ type: 'icon-end',
+ bgColor: '#F79009',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ }
+ }
+ },
+ {
+ title: 'LLM',
+ type: 'LLM',
+ description: '调用大语言模型回答问题或者对自然语言进行处理',
+ icon: {
+ type: 'icon-model',
+ bgColor: '#6172F3',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ }
+ }
+ },
+ {
+ title: 'Prompt',
+ type: 'Prompt',
+ description: '通过精心设计提示词，提升大语言模型回答效果',
+ icon: {
+ type: 'icon-prompt',
+ bgColor: '#17B26A',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ }
+ }
+ },
+ {
+ title: '知识库',
+ type: 'knowledge',
+ description: '允许你从知识库中查询与用户问题相关的文本内容',
+ icon: {
+ type: 'icon-knowledge',
+ bgColor: '#6172F3',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ }
+ }
+ },
+ {
+ title: 'Switch',
+ type: 'Switch',
+ description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
+ icon: {
+ type: 'icon-switch',
+ bgColor: '#06AED4',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ }
+ }
+ },
+ {
+ title: 'HSF',
+ type: 'hsf',
+ description: '允许通过 HSF 协议发送服务器请求',
+ icon: {
+ type: 'icon-hsf',
+ bgColor: '#875BF7',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ }
+ }
+ },
+ {
+ title: 'Http',
+ type: 'http',
+ description: '允许通过 HTTP 协议发送服务器请求',
+ icon: {
+ type: 'icon-http',
+ bgColor: '#875BF7',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ }
+ }
+ },
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ }
+ }
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ }
+ }
+ },
+ {
+ title: '工具',
+ type: '_group',
+ items: [
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ }
+ }
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ }
+ }
+ },
+ ],
+ },
+];
diff --git a/docs/xflow/demo/custom-flow/customWidget.tsx b/docs/xflow/demo/custom-flow/customWidget.tsx
new file mode 100644
index 000000000..a5fe73558
--- /dev/null
+++ b/docs/xflow/demo/custom-flow/customWidget.tsx
@@ -0,0 +1,13 @@
+import { Input } from 'antd';
+
+const customWidget = ({ value, onChange }) => {
+
+ return (
+ onChange({ inputVal: e.target.value })}
+ />
+ );
+};
+
+export default customWidget;
diff --git a/docs/xflow/demo/custom-flow/index.tsx b/docs/xflow/demo/custom-flow/index.tsx
new file mode 100644
index 000000000..e3c50cf59
--- /dev/null
+++ b/docs/xflow/demo/custom-flow/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import XFlow from '@xrenders/xflow';
+import settings from './setting';
+import customWidget from './customWidget';
+
+export default () => {
+ const nodes = [
+ {
+ id: '1',
+ type: 'Start',
+ data: {
+ inputVal:'我是自定义组件'
+ },
+ position: {
+ x: 40,
+ y: 240,
+ }
+ },
+ {
+ id: '2',
+ type: 'End',
+ data: {},
+ position: {
+ x: 500,
+ y: 240,
+ }
+ }
+ ];
+
+ const edges = [
+ { source: '1', target: '2', id: '234123' }
+ ]
+
+ return (
+
+
+ );
+}
diff --git a/docs/xflow/demo/custom-flow/setting.tsx b/docs/xflow/demo/custom-flow/setting.tsx
new file mode 100644
index 000000000..282e3dbc7
--- /dev/null
+++ b/docs/xflow/demo/custom-flow/setting.tsx
@@ -0,0 +1,141 @@
+export default [
+ {
+ title: '开始',
+ type: 'Start',
+ hidden: true,
+ targetHandleHidden: true,
+ icon: {
+ type: 'icon-start',
+ bgColor: '#17B26A',
+ },
+ settingWidget:"customWidget"
+ },
+ {
+ title: '结束',
+ type: 'End',
+ hidden: true,
+ sourceHandleHidden: true,
+ icon: {
+ type: 'icon-end',
+ bgColor: '#F79009',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ }
+ }
+ },
+ {
+ title: 'LLM',
+ type: 'LLM',
+ description: '调用大语言模型回答问题或者对自然语言进行处理',
+ icon: {
+ type: 'icon-model',
+ bgColor: '#6172F3',
+ },
+ },
+ {
+ title: 'Prompt',
+ type: 'Prompt',
+ description: '通过精心设计提示词，提升大语言模型回答效果',
+ icon: {
+ type: 'icon-prompt',
+ bgColor: '#17B26A',
+ },
+ },
+ {
+ title: '知识库',
+ type: 'knowledge',
+ description: '允许你从知识库中查询与用户问题相关的文本内容',
+ icon: {
+ type: 'icon-knowledge',
+ bgColor: '#6172F3',
+ },
+ },
+ {
+ title: 'Switch',
+ type: 'Switch',
+ description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
+ icon: {
+ type: 'icon-switch',
+ bgColor: '#06AED4',
+ },
+ },
+ {
+ title: 'HSF',
+ type: 'hsf',
+ description: '允许通过 HSF 协议发送服务器请求',
+ icon: {
+ type: 'icon-hsf',
+ bgColor: '#875BF7',
+ },
+ },
+ {
+ title: 'Http',
+ type: 'http',
+ description: '允许通过 HTTP 协议发送服务器请求',
+ icon: {
+ type: 'icon-http',
+ bgColor: '#875BF7',
+ },
+ },
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: '_group',
+ items: [
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ },
+ ],
+ },
+];
diff --git a/docs/xflow/demo/flow-provider/edges.ts b/docs/xflow/demo/flow-provider/edges.ts
new file mode 100644
index 000000000..d3f67bd08
--- /dev/null
+++ b/docs/xflow/demo/flow-provider/edges.ts
@@ -0,0 +1 @@
+export const edges = [{ source: '1', target: '2', id: '234123' }];
diff --git a/docs/xflow/demo/flow-provider/index.tsx b/docs/xflow/demo/flow-provider/index.tsx
new file mode 100644
index 000000000..39287d968
--- /dev/null
+++ b/docs/xflow/demo/flow-provider/index.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+
+import XFlow, { FlowProvider, useNodes } from '@xrenders/xflow';
+import { edges as initialEdges } from './edges';
+import { nodes as initialNodes } from './nodes';
+import settings from './setting';
+
+const App = () => {
+ return (
+
+
+
+
+ );
+};
diff --git a/docs/xflow/demo/layout/LR/setting.tsx b/docs/xflow/demo/layout/LR/setting.tsx
new file mode 100644
index 000000000..72f080f69
--- /dev/null
+++ b/docs/xflow/demo/layout/LR/setting.tsx
@@ -0,0 +1,199 @@
+export default [
+ {
+ title: '开始',
+ type: 'Start',
+ hidden: true,
+ targetHandleHidden: true,
+ icon: {
+ type: 'icon-start',
+ bgColor: '#17B26A',
+ },
+ settingSchema: {
+ type: 'object',
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ radio1: {
+ title: '点击单选',
+ type: 'string',
+ widget: 'radio',
+ props: {
+ options: [
+ { label: '早', value: 'a' },
+ { label: '中', value: 'b' },
+ { label: '晚', value: 'c' }
+ ]
+ }
+ },
+ textarea1: {
+ title: '长文本',
+ type: 'string',
+ widget: 'textArea'
+ },
+ date1: {
+ title: '日期选择',
+ type: 'string',
+ widget: 'datePicker'
+ },
+ dateRange1: {
+ title: '日期范围',
+ type: 'range',
+ widget: 'dateRange'
+ },
+ time1: {
+ title: '时间选择',
+ type: 'string',
+ widget: 'timePicker'
+ },
+ timeRange1: {
+ title: '时间范围',
+ type: 'range',
+ widget: 'timeRange'
+ },
+ },
+ },
+ },
+ {
+ title: '结束',
+ type: 'End',
+ hidden: true,
+ sourceHandleHidden: true,
+ icon: {
+ type: 'icon-end',
+ bgColor: '#F79009',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ }
+ }
+ },
+ {
+ title: 'LLM',
+ type: 'LLM',
+ description: '调用大语言模型回答问题或者对自然语言进行处理',
+ icon: {
+ type: 'icon-model',
+ bgColor: '#6172F3',
+ },
+ },
+ {
+ title: 'Prompt',
+ type: 'Prompt',
+ description: '通过精心设计提示词，提升大语言模型回答效果',
+ icon: {
+ type: 'icon-prompt',
+ bgColor: '#17B26A',
+ },
+ },
+ {
+ title: '知识库',
+ type: 'knowledge',
+ description: '允许你从知识库中查询与用户问题相关的文本内容',
+ icon: {
+ type: 'icon-knowledge',
+ bgColor: '#6172F3',
+ },
+ },
+ {
+ title: 'Switch',
+ type: 'Switch',
+ description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
+ icon: {
+ type: 'icon-switch',
+ bgColor: '#06AED4',
+ },
+ },
+ {
+ title: 'HSF',
+ type: 'hsf',
+ description: '允许通过 HSF 协议发送服务器请求',
+ icon: {
+ type: 'icon-hsf',
+ bgColor: '#875BF7',
+ },
+ },
+ {
+ title: 'Http',
+ type: 'http',
+ description: '允许通过 HTTP 协议发送服务器请求',
+ icon: {
+ type: 'icon-http',
+ bgColor: '#875BF7',
+ },
+ },
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: '_group',
+ items: [
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ },
+ ],
+ },
+];
diff --git a/docs/xflow/demo/layout/TB/index.tsx b/docs/xflow/demo/layout/TB/index.tsx
new file mode 100644
index 000000000..9b717eb3b
--- /dev/null
+++ b/docs/xflow/demo/layout/TB/index.tsx
@@ -0,0 +1,73 @@
+import XFlow from '@xrenders/xflow';
+import settings from './setting';
+import React from 'react';
+
+export default () => {
+ const nodes = [
+ {
+ type: 'Start',
+ id: '1',
+ position: { x: 327.5, y: -14.5 },
+ },
+ {
+ type: 'Switch',
+ id: '2',
+ position: { x: 328.75, y: 108 },
+ },
+ {
+ type: 'Code',
+ id: '3',
+ position: { x: 638.75, y: 247.5 },
+ },
+ {
+ type: 'tool',
+ id: '4',
+ position: { x: 75.00000000000003, y: 261.25 },
+ },
+ {
+ type: 'End',
+ id: '5',
+ position: { x: 360, y: 501.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 (
+
+
+ );
+};
diff --git a/docs/xflow/demo/layout/TB/setting.tsx b/docs/xflow/demo/layout/TB/setting.tsx
new file mode 100644
index 000000000..72f080f69
--- /dev/null
+++ b/docs/xflow/demo/layout/TB/setting.tsx
@@ -0,0 +1,199 @@
+export default [
+ {
+ title: '开始',
+ type: 'Start',
+ hidden: true,
+ targetHandleHidden: true,
+ icon: {
+ type: 'icon-start',
+ bgColor: '#17B26A',
+ },
+ settingSchema: {
+ type: 'object',
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ radio1: {
+ title: '点击单选',
+ type: 'string',
+ widget: 'radio',
+ props: {
+ options: [
+ { label: '早', value: 'a' },
+ { label: '中', value: 'b' },
+ { label: '晚', value: 'c' }
+ ]
+ }
+ },
+ textarea1: {
+ title: '长文本',
+ type: 'string',
+ widget: 'textArea'
+ },
+ date1: {
+ title: '日期选择',
+ type: 'string',
+ widget: 'datePicker'
+ },
+ dateRange1: {
+ title: '日期范围',
+ type: 'range',
+ widget: 'dateRange'
+ },
+ time1: {
+ title: '时间选择',
+ type: 'string',
+ widget: 'timePicker'
+ },
+ timeRange1: {
+ title: '时间范围',
+ type: 'range',
+ widget: 'timeRange'
+ },
+ },
+ },
+ },
+ {
+ title: '结束',
+ type: 'End',
+ hidden: true,
+ sourceHandleHidden: true,
+ icon: {
+ type: 'icon-end',
+ bgColor: '#F79009',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ }
+ }
+ },
+ {
+ title: 'LLM',
+ type: 'LLM',
+ description: '调用大语言模型回答问题或者对自然语言进行处理',
+ icon: {
+ type: 'icon-model',
+ bgColor: '#6172F3',
+ },
+ },
+ {
+ title: 'Prompt',
+ type: 'Prompt',
+ description: '通过精心设计提示词，提升大语言模型回答效果',
+ icon: {
+ type: 'icon-prompt',
+ bgColor: '#17B26A',
+ },
+ },
+ {
+ title: '知识库',
+ type: 'knowledge',
+ description: '允许你从知识库中查询与用户问题相关的文本内容',
+ icon: {
+ type: 'icon-knowledge',
+ bgColor: '#6172F3',
+ },
+ },
+ {
+ title: 'Switch',
+ type: 'Switch',
+ description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
+ icon: {
+ type: 'icon-switch',
+ bgColor: '#06AED4',
+ },
+ },
+ {
+ title: 'HSF',
+ type: 'hsf',
+ description: '允许通过 HSF 协议发送服务器请求',
+ icon: {
+ type: 'icon-hsf',
+ bgColor: '#875BF7',
+ },
+ },
+ {
+ title: 'Http',
+ type: 'http',
+ description: '允许通过 HTTP 协议发送服务器请求',
+ icon: {
+ type: 'icon-http',
+ bgColor: '#875BF7',
+ },
+ },
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: '_group',
+ items: [
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ },
+ ],
+ },
+];
diff --git a/docs/xflow/demo/nodeSetting/index.tsx b/docs/xflow/demo/nodeSetting/index.tsx
new file mode 100644
index 000000000..5deb83592
--- /dev/null
+++ b/docs/xflow/demo/nodeSetting/index.tsx
@@ -0,0 +1,219 @@
+import XFlow from '@xrenders/xflow';
+// import settings from './setting';
+import React from 'react';
+
+const settings = [
+ {
+ title: '开始', // 节点名称
+ type: 'Start',
+ hidden: true,
+ targetHandleHidden: true,
+ icon: { // 图标描述
+ type: 'icon-start', // icon-font
+ bgColor: '#17B26A', // 图标背景颜色
+ },
+ settingSchema: { // 自定义节点配置
+ type: 'object',
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ radio1: {
+ title: '点击单选',
+ type: 'string',
+ widget: 'radio',
+ props: {
+ options: [
+ { label: '早', value: 'a' },
+ { label: '中', value: 'b' },
+ { label: '晚', value: 'c' }
+ ]
+ }
+ },
+ textarea1: {
+ title: '长文本',
+ type: 'string',
+ widget: 'textArea'
+ },
+ date1: {
+ title: '日期选择',
+ type: 'string',
+ widget: 'datePicker'
+ },
+ dateRange1: {
+ title: '日期范围',
+ type: 'range',
+ widget: 'dateRange'
+ },
+ time1: {
+ title: '时间选择',
+ type: 'string',
+ widget: 'timePicker'
+ },
+ timeRange1: {
+ title: '时间范围',
+ type: 'range',
+ widget: 'timeRange'
+ },
+ },
+ },
+ },
+ {
+ title: '结束',
+ type: 'End',
+ hidden: true,
+ sourceHandleHidden: true,
+ icon: {
+ type: 'icon-end',
+ bgColor: '#F79009',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ }
+ }
+ },
+ {
+ title: 'Switch',
+ type: 'Switch',
+ description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
+ icon: {
+ type: 'icon-switch',
+ bgColor: '#06AED4',
+ },
+ },
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: '_group', // 节点分组
+ items: [
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ },
+ ],
+ },
+]
+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 (
+
+
+ );
+};
diff --git a/docs/xflow/demo/nodeSetting/setting.tsx b/docs/xflow/demo/nodeSetting/setting.tsx
new file mode 100644
index 000000000..72f080f69
--- /dev/null
+++ b/docs/xflow/demo/nodeSetting/setting.tsx
@@ -0,0 +1,199 @@
+export default [
+ {
+ title: '开始',
+ type: 'Start',
+ hidden: true,
+ targetHandleHidden: true,
+ icon: {
+ type: 'icon-start',
+ bgColor: '#17B26A',
+ },
+ settingSchema: {
+ type: 'object',
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ radio1: {
+ title: '点击单选',
+ type: 'string',
+ widget: 'radio',
+ props: {
+ options: [
+ { label: '早', value: 'a' },
+ { label: '中', value: 'b' },
+ { label: '晚', value: 'c' }
+ ]
+ }
+ },
+ textarea1: {
+ title: '长文本',
+ type: 'string',
+ widget: 'textArea'
+ },
+ date1: {
+ title: '日期选择',
+ type: 'string',
+ widget: 'datePicker'
+ },
+ dateRange1: {
+ title: '日期范围',
+ type: 'range',
+ widget: 'dateRange'
+ },
+ time1: {
+ title: '时间选择',
+ type: 'string',
+ widget: 'timePicker'
+ },
+ timeRange1: {
+ title: '时间范围',
+ type: 'range',
+ widget: 'timeRange'
+ },
+ },
+ },
+ },
+ {
+ title: '结束',
+ type: 'End',
+ hidden: true,
+ sourceHandleHidden: true,
+ icon: {
+ type: 'icon-end',
+ bgColor: '#F79009',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ }
+ }
+ },
+ {
+ title: 'LLM',
+ type: 'LLM',
+ description: '调用大语言模型回答问题或者对自然语言进行处理',
+ icon: {
+ type: 'icon-model',
+ bgColor: '#6172F3',
+ },
+ },
+ {
+ title: 'Prompt',
+ type: 'Prompt',
+ description: '通过精心设计提示词，提升大语言模型回答效果',
+ icon: {
+ type: 'icon-prompt',
+ bgColor: '#17B26A',
+ },
+ },
+ {
+ title: '知识库',
+ type: 'knowledge',
+ description: '允许你从知识库中查询与用户问题相关的文本内容',
+ icon: {
+ type: 'icon-knowledge',
+ bgColor: '#6172F3',
+ },
+ },
+ {
+ title: 'Switch',
+ type: 'Switch',
+ description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
+ icon: {
+ type: 'icon-switch',
+ bgColor: '#06AED4',
+ },
+ },
+ {
+ title: 'HSF',
+ type: 'hsf',
+ description: '允许通过 HSF 协议发送服务器请求',
+ icon: {
+ type: 'icon-hsf',
+ bgColor: '#875BF7',
+ },
+ },
+ {
+ title: 'Http',
+ type: 'http',
+ description: '允许通过 HTTP 协议发送服务器请求',
+ icon: {
+ type: 'icon-http',
+ bgColor: '#875BF7',
+ },
+ },
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: '_group',
+ items: [
+ {
+ title: '代码执行',
+ type: 'Code',
+ description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+ icon: {
+ type: 'icon-code',
+ bgColor: '#2E90FA',
+ },
+ },
+ {
+ title: '工具',
+ type: 'tool',
+ description: '允许使用工具能力',
+ icon: {
+ type: 'icon-gongju',
+ bgColor: '#2E90FA',
+ },
+ },
+ ],
+ },
+];
diff --git a/docs/xflow/demo/nodeWidget/index.tsx b/docs/xflow/demo/nodeWidget/index.tsx
new file mode 100644
index 000000000..5acd4e865
--- /dev/null
+++ b/docs/xflow/demo/nodeWidget/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import XFlow from '@xrenders/xflow';
+import settings from './setting';
+import { Space, Tag, Typography } from 'antd';
+
+
+const customNodeWidget = ({ data }) => {
+ return
+
+}
+
+
+const endNodeWidget = ({ data }) => {
+ return 变量一：{data?.input}
+变量二：{data?.select}
+
+ {data?.input}
+
+}
+
+
+const LLMNodeWidget = ({ data }) => {
+ const labels = Object.keys(data) || [];
+ return
+
+ );
+}
diff --git a/docs/xflow/demo/nodeWidget/setting.tsx b/docs/xflow/demo/nodeWidget/setting.tsx
new file mode 100644
index 000000000..26d8c6aca
--- /dev/null
+++ b/docs/xflow/demo/nodeWidget/setting.tsx
@@ -0,0 +1,90 @@
+export default [
+ {
+ title: '开始',
+ type: 'Start',
+ hidden: true,
+ targetHandleHidden: true,
+ icon: {
+ type: 'icon-start',
+ bgColor: '#17B26A',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '变量一',
+ type: 'string',
+ widget: 'input',
+ },
+ select: {
+ title: '变量二',
+ type: 'string',
+ widget: 'select',
+ props: {
+ options: [
+ { label: 'a', value: 'a' },
+ { label: 'b', value: 'b' },
+ { label: 'c', value: 'c' },
+ ],
+ },
+ },
+ }
+ },
+ nodeWidget:'customNodeWidget'
+ },
+ {
+ title: '结束',
+ type: 'End',
+ hidden: true,
+ sourceHandleHidden: true,
+ icon: {
+ type: 'icon-end',
+ bgColor: '#F79009',
+ },
+ settingSchema: {
+ type: "object",
+ properties: {
+ input: {
+ title: '结束原因',
+ type: 'string',
+ widget: 'textArea',
+ },
+ }
+ },
+ nodeWidget: 'endNodeWidget',
+ },
+ {
+ title: 'LLM',
+ type: 'LLM',
+ description: '调用大语言模型回答问题或者对自然语言进行处理',
+ icon: {
+ type: 'icon-model',
+ bgColor: '#6172F3',
+ },
+ settingSchema: {
+ type: 'object',
+ displayType: 'row',
+ labelCol: 6,
+ fieldCol:18,
+ properties: {
+ input1: {
+ title: 'Field A',
+ type: 'string',
+ },
+ input2: {
+ title: 'Field B',
+ type: 'string'
+ },
+ input3: {
+ title: 'Field C',
+ type: 'string'
+ },
+ input4: {
+ title: 'Field D',
+ type: 'string'
+ }
+ }
+ },
+ nodeWidget: 'LLMNodeWidget',
+ },
+];
diff --git a/docs/xflow/demo/switchNode/index.tsx b/docs/xflow/demo/switchNode/index.tsx
new file mode 100644
index 000000000..5a9c47fdd
--- /dev/null
+++ b/docs/xflow/demo/switchNode/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import XFlow from '@xrenders/xflow';
+import settings from './setting';
+
+export default () => {
+ const nodes = [
+ { id: '1', type: 'Switch', data: { input: '开始节点', select: "b" }, position: { x: 40, y: 240 } },
+ ];
+
+ const edges = []
+
+ return (
+
+
+ );
+}
diff --git a/docs/xflow/demo/switchNode/setting.tsx b/docs/xflow/demo/switchNode/setting.tsx
new file mode 100644
index 000000000..1c790f4ef
--- /dev/null
+++ b/docs/xflow/demo/switchNode/setting.tsx
@@ -0,0 +1,29 @@
+export default [
+ {
+ title: 'Switch',
+ type: 'Switch',
+ description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
+ icon: {
+ type: 'icon-switch',
+ bgColor: '#06AED4',
+ },
+ },
+ {
+ title: 'Prompt',
+ type: 'Prompt',
+ description: '通过精心设计提示词，提升大语言模型回答效果',
+ icon: {
+ type: 'icon-prompt',
+ bgColor: '#17B26A',
+ },
+ },
+ {
+ title: '知识库',
+ type: 'knowledge',
+ description: '允许你从知识库中查询与用户问题相关的文本内容',
+ icon: {
+ type: 'icon-knowledge',
+ bgColor: '#6172F3',
+ },
+ },
+];
diff --git a/docs/xflow/index.md b/docs/xflow/index.md
new file mode 100644
index 000000000..b11d9abd8
--- /dev/null
+++ b/docs/xflow/index.md
@@ -0,0 +1,81 @@
+---
+order: 0
+title: 开始使用
+mobile: false
+---
+
+
+ 
+ XFlow
+
+
+
+画布流程编排解决方案
+
+## 安装
+```shell
+npm i @xrenders/xflow --save
+```
+
+## 使用方式
+
+**函数组件**
+
+```jsx
+/**
+ * transform: true
+ * defaultShowCode: true
+ */
+import React from 'react';
+import XFlow from '@xrenders/xflow';
+import settings from './schema/settings';
+
+export default () => {
+ const nodes = [
+ {
+ id: '1', // 节点 ID
+ type: 'Start', // 节点类型
+ data: {}, // 节点配置数据
+ position: { // 节点画布坐标位置
+ x: 40,
+ y: 240,
+ }
+ },
+ {
+ id: '2',
+ type: 'End', // 节点类型
+ data: {}, // 节点配置数据
+ position: { // 节点画布坐标位置
+ x: 500,
+ y: 240,
+ }
+ }
+ ];
+
+ const edges = [
+ { source: '1', target: '2', id: '234123' }
+ ]
+
+ return (
+
+ XFlow
+
+ 
+ 
+ 
+
+
+ );
+}
+```
diff --git a/docs/xflow/layout.md b/docs/xflow/layout.md
new file mode 100644
index 000000000..937ef17e7
--- /dev/null
+++ b/docs/xflow/layout.md
@@ -0,0 +1,19 @@
+---
+order: 5
+title: '画布布局'
+mobile: false
+group:
+ title: 最佳展示
+ order: 1
+---
+# 布局方向
+
+## LR布局
+从左到右布局
+
+
diff --git a/packages/x-flow/LICENSE b/packages/x-flow/LICENSE
new file mode 100644
index 000000000..a68fd737b
--- /dev/null
+++ b/packages/x-flow/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-present XRender Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/x-flow/README.md b/packages/x-flow/README.md
new file mode 100644
index 000000000..c8988944a
--- /dev/null
+++ b/packages/x-flow/README.md
@@ -0,0 +1,126 @@
+
+
+
+
+
+> 一站式中后台**表单解决方案**
+
+## 官网
+
+
+ FormRender
+
+ 
+ 
+
+
+ );
+ }
+}
+
+export default connectForm(Demo);
+```
+
+**对于函数组件，FormRender 提供了 `useForm` hooks, 书写更为灵活**
+
+```jsx
+import React from 'react';
+import { Button } from 'antd';
+import FormRender, { useForm } from 'form-render';
+
+const schema = {
+ type: 'object',
+ properties: {
+ input1: {
+ title: '简单输入框',
+ type: 'string',
+ required: true,
+ },
+ select1: {
+ title: '单选',
+ type: 'string',
+ props: {
+ options: [
+ { label: '早', value: 'a' },
+ { label: '中', value: 'b' },
+ { label: '晚', value: 'c' }
+ ]
+ }
+ }
+ }
+};
+
+const Demo = () => {
+ const form = useForm();
+ return (
+
+
+ );
+};
+
+export default Demo;
+```
\ No newline at end of file
diff --git a/packages/x-flow/package.json b/packages/x-flow/package.json
new file mode 100644
index 000000000..77aaf6a0d
--- /dev/null
+++ b/packages/x-flow/package.json
@@ -0,0 +1,78 @@
+{
+ "name": "@xrenders/xflow",
+ "version": "1.0.0-beta.2",
+ "description": "一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品",
+ "keywords": [
+ "xflow"
+ ],
+ "homepage": "https://xrender.fun/xflow",
+ "bugs": {
+ "url": "https://github.com/alibaba/x-render/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git@github.com:alibaba/form-render.git"
+ },
+ "license": "MIT",
+ "contributors": [
+ {
+ "name": "lhbxs",
+ "email": "596850703@qq.com"
+ }
+ ],
+ "main": "lib/index.js",
+ "module": "es/index.js",
+ "files": [
+ "es",
+ "lib",
+ "package.json"
+ ],
+ "scripts": {
+ "beta": "npm publish --tag beta",
+ "build": "father-build",
+ "next": "npm publish --tag next",
+ "prepare": "npm run build",
+ "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+ "postpublish": "git push --tags",
+ "test:ui": "vitest --ui"
+ },
+ "lint-staged": {
+ "*.{js,jsx,less,md,json}": [
+ "prettier --write"
+ ],
+ "*.ts?(x)": [
+ "prettier --parser=typescript --write"
+ ]
+ },
+ "dependencies": {
+ "@ant-design/icons": "^4.0.2",
+ "classnames": "^2.3.1",
+ "lodash-es": "^4.17.21",
+ "dayjs": "^1.11.7",
+ "ahooks": "^3.7.5",
+ "zustand": "^4.5.4",
+ "@xyflow/react": "^12.3.2",
+ "@remixicon/react": "^4.2.0",
+ "@dagrejs/dagre": "^1.1.3",
+ "zundo": "^2.1.0",
+ "use-context-selector": "^1.4.1",
+ "form-render": "^2.3.4"
+ },
+ "devDependencies": {
+ "deep-equal": "^2.0.3",
+ "rollup-plugin-copy": "^3.4.0"
+ },
+ "peerDependencies": {
+ "antd": "4.x || 5.x",
+ "react": ">=16.9.0",
+ "react-dom": ">=16.9.0"
+ },
+ "gitHooks": {
+ "pre-commit": "lint-staged"
+ },
+ "sideEffect": false,
+ "publishConfig": {
+ "registry": "https://registry.npmjs.org/",
+ "access": "public"
+ }
+}
diff --git a/packages/x-flow/src/XFlow.tsx b/packages/x-flow/src/XFlow.tsx
new file mode 100644
index 000000000..9f8e5e590
--- /dev/null
+++ b/packages/x-flow/src/XFlow.tsx
@@ -0,0 +1,290 @@
+import {
+ Background,
+ BackgroundVariant,
+ MarkerType,
+ ReactFlow,
+ useReactFlow,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { useEventListener, useMemoizedFn } from 'ahooks';
+import produce, { setAutoFreeze } from 'immer';
+import { debounce } from 'lodash';
+import type { FC } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import CandidateNode from './components/CandidateNode';
+import CustomEdge from './components/CustomEdge';
+import PanelContainer from './components/PanelContainer';
+import { useEventEmitterContextContext } from './models/event-emitter';
+
+import CustomNodeComponent from './components/CustomNode';
+import { useStore, useStoreApi } from './hooks/useStore';
+import { useTemporalStore } from './hooks/useTemporalStore';
+
+import Operator from './operator';
+import FlowProps from './types';
+import { transformNodes, uuid } from './utils';
+import autoLayoutNodes from './utils/autoLayoutNodes';
+
+import { shallow } from 'zustand/shallow';
+import NodeEditor from './components/NodeEditor';
+import { useFlow } from './hooks/useFlow';
+import './index.less';
+
+const CustomNode = memo(CustomNodeComponent);
+const edgeTypes = { buttonedge: memo(CustomEdge) };
+
+/***
+ *
+ * XFlow 入口
+ *
+ */
+const XFlow: FC
+ {
+ onNodesChange(changes);
+ }}
+ onEdgesChange={changes => {
+ onEdgesChange(changes);
+ }}
+ onEdgeMouseEnter={(_, edge: any) => {
+ getUpdateEdgeConfig(edge, '#2970ff');
+ }}
+ onEdgeMouseLeave={(_, edge) => {
+ getUpdateEdgeConfig(edge, '#c9c9c9');
+ }}
+ >
+ setActiveNode(null)}
+ node={activeNode}
+ data={activeNode?.values}
+ // disabled
+ >
+ {NodeEditorWrap}
+
+ )}
+
+
+ );
+});
+
+export default XFlow;
diff --git a/packages/x-flow/src/components/CandidateNode/index.tsx b/packages/x-flow/src/components/CandidateNode/index.tsx
new file mode 100644
index 000000000..4e6bd6269
--- /dev/null
+++ b/packages/x-flow/src/components/CandidateNode/index.tsx
@@ -0,0 +1,72 @@
+import { useReactFlow, useViewport } from '@xyflow/react';
+import { useEventListener } from 'ahooks';
+import React, { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+import { useStore } from '../../hooks/useStore';
+import CustomNode from '../CustomNode';
+
+const CandidateNode = () => {
+ const { zoom } = useViewport();
+ const reactflow = useReactFlow();
+ const { candidateNode, mousePosition, setCandidateNode, addNodes } = useStore(
+ (state: any) => ({
+ nodes: state.nodes,
+ edges: state.edges,
+ addNodes: state.addNodes,
+ candidateNode: state.candidateNode,
+ mousePosition: state.mousePosition,
+ setCandidateNode: state.setCandidateNode,
+ onNodesChange: state.onNodesChange,
+ onEdgesChange: state.onEdgesChange,
+ }),
+ shallow
+ );
+
+ useEventListener('click', ev => {
+ if (!candidateNode) {
+ return;
+ }
+ ev.preventDefault();
+ const { screenToFlowPosition } = reactflow;
+ const { x, y } = screenToFlowPosition({
+ x: mousePosition.pageX,
+ y: mousePosition.pageY,
+ });
+
+ const newNodes = {
+ ...candidateNode,
+ data: {
+ ...candidateNode.data,
+ _isCandidate: false,
+ },
+ position: { x, y },
+ };
+ // @ts-ignore
+ addNodes(newNodes);
+ setCandidateNode(null);
+ });
+
+ if (!candidateNode) {
+ return null;
+ }
+
+ return (
+
+
+ );
+};
+
+export default memo(CandidateNode);
diff --git a/packages/x-flow/src/components/CustomEdge/index.less b/packages/x-flow/src/components/CustomEdge/index.less
new file mode 100644
index 000000000..9b41ecff7
--- /dev/null
+++ b/packages/x-flow/src/components/CustomEdge/index.less
@@ -0,0 +1,24 @@
+
+.custom-edge-line {
+ position: absolute;
+ z-index: 1000;
+ pointer-events: all;
+
+ .line-content {
+ width: 60px;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ }
+
+ .line-icon-box {
+ width: 16px;
+ height: 16px;
+ border-radius: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #296dff;
+ visibility: visible;
+ }
+}
\ No newline at end of file
diff --git a/packages/x-flow/src/components/CustomEdge/index.tsx b/packages/x-flow/src/components/CustomEdge/index.tsx
new file mode 100644
index 000000000..975595e52
--- /dev/null
+++ b/packages/x-flow/src/components/CustomEdge/index.tsx
@@ -0,0 +1,138 @@
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+ BezierEdge,
+ EdgeLabelRenderer,
+ getBezierPath,
+ useReactFlow,
+} from '@xyflow/react';
+import produce from 'immer';
+import React, { memo, useState } from 'react';
+import { shallow } from 'zustand/shallow';
+import { useStore } from '../../hooks/useStore';
+import { uuid } from '../../utils';
+import NodeSelectPopover from '../NodesPopover';
+import './index.less';
+
+export default memo((edge: any) => {
+ const { id, selected, sourceX, sourceY, targetX, targetY, source, target } =
+ edge;
+
+ const reactflow = useReactFlow();
+ const [isHovered, setIsHovered] = useState(false);
+ const [edgePath, labelX, labelY] = getBezierPath({
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ });
+
+ const {
+ nodes,
+ edges,
+ setNodes,
+ setEdges,
+ mousePosition,
+ onEdgesChange,
+ layout,
+ } = useStore(
+ (state: any) => ({
+ layout: state.layout,
+ nodes: state.nodes,
+ edges: state.edges,
+ mousePosition: state.mousePosition,
+ setNodes: state.setNodes,
+ setEdges: state.setEdges,
+ onEdgesChange: state.onEdgesChange,
+ }),
+ shallow
+ );
+
+ const handleAddNode = (data: any) => {
+ const { screenToFlowPosition } = reactflow;
+ const { x, y } = screenToFlowPosition({
+ x: mousePosition.pageX,
+ y: mousePosition.pageY,
+ });
+
+ const targetId = uuid();
+ const newNodes = produce(nodes, (draft: any) => {
+ draft.push({
+ id: targetId,
+ type: 'custom',
+ data,
+ position: { x, y },
+ });
+ });
+
+ const newEdges = produce(edges, (draft: any) => {
+ draft.push(
+ ...[
+ {
+ id: uuid(),
+ source,
+ target: targetId,
+ },
+ {
+ id: uuid(),
+ source: targetId,
+ target,
+ },
+ ]
+ );
+ });
+
+ setNodes(newNodes);
+ setEdges(newEdges);
+ onEdgesChange([{ id, type: 'remove' }]);
+ };
+
+ let edgeExtra: any = {
+ sourceX: edge.sourceX - 15,
+ targetX: edge.targetX + 15,
+ };
+ if (layout === 'TB') {
+ edgeExtra = {
+ sourceY: edge.sourceY - 15,
+ targetY: edge.targetY + 13,
+ };
+ }
+
+ return (
+
+
+
+ )
+ }
+ />
+
+
+
+
+ onEdgesChange([{ id, type: 'remove' }])}
+ >
+
+
+
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+ {!settingMap?.[type]?.targetHandleHidden && (
+ onClick(data)}
+ nodeMinHeight={nodeMinHeight}
+ />
+ {!settingMap?.[type]?.sourceHandleHidden && (
+ <>
+ {(sourceHandleNum || [])?.map((item, key) => (
+
+ );
+});
diff --git a/packages/x-flow/src/components/CustomNode/sourceHandle.tsx b/packages/x-flow/src/components/CustomNode/sourceHandle.tsx
new file mode 100644
index 000000000..9202b000b
--- /dev/null
+++ b/packages/x-flow/src/components/CustomNode/sourceHandle.tsx
@@ -0,0 +1,66 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { Handle } from '@xyflow/react';
+import { Tooltip } from 'antd';
+import React, { memo, useRef, useState } from 'react';
+import NodeSelectPopover from '../NodesPopover';
+
+export default memo((props: any) => {
+ const {
+ position,
+ isConnectable,
+ selected,
+ isHovered,
+ handleAddNode,
+ id,
+ switchTitle,
+ ...rest
+ } = props;
+ const [isShowTooltip, setIsShowTooltip] = useState(false);
+ const [openNodeSelectPopover, setOpenNodeSelectPopover] = useState(false);
+ const popoverRef = useRef(null);
+
+ return (
+ {switchTitle}
}
+
+ setOpenNodeSelectPopover(val)}
+ >
+
+
+
+
+
+ )}
+
+
+ {desc}
+
+ )}
+
+ );
+});
diff --git a/packages/x-flow/src/components/NodeEditor/index.tsx b/packages/x-flow/src/components/NodeEditor/index.tsx
new file mode 100644
index 000000000..91a75d60a
--- /dev/null
+++ b/packages/x-flow/src/components/NodeEditor/index.tsx
@@ -0,0 +1,107 @@
+import FormRender, { useForm } from 'form-render';
+import produce from 'immer';
+import { debounce } from 'lodash';
+import React, { FC, useContext, useEffect, useState } from 'react';
+import { shallow } from 'zustand/shallow';
+import { useStore } from '../../hooks/useStore';
+import { ConfigContext } from '../../models/context';
+
+interface INodeEditorProps {
+ data: any;
+ onChange: (data: any) => void;
+ nodeType: string;
+ id: string;
+}
+
+const NodeEditor: FC
+
+
+ {title}
+
+
+ {children}
+ {/* {!hideDesc && !!desc && {desc}
} */}
+ {
+ NodeWidget &&
+ {NodeWidget}
+
+ }
+ {!hideDesc && !!desc && (
+
+
+ )
+};
+
+// 节点菜单项
+const MenuItem = (props: any) => {
+ const { title, type, icon, onClick } = props;
+ return (
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+ );
+};
+
+// 过滤 hidden 节点
+const filterHiddenMenu = (list: any) => {
+ return (list || []).filter((item: any) => !item.hidden)
+}
+
+/**
+ *
+ * 节点菜单List
+ *
+ */
+const NodesMenu = (props: TNodeMenu, ref: Ref
+ {!!showSearch && (
+
+ );
+};
+
+export default forwardRef(NodesMenu);
diff --git a/packages/x-flow/src/components/NodesPopover/index.tsx b/packages/x-flow/src/components/NodesPopover/index.tsx
new file mode 100644
index 000000000..726ce81f3
--- /dev/null
+++ b/packages/x-flow/src/components/NodesPopover/index.tsx
@@ -0,0 +1,71 @@
+import { useClickAway } from 'ahooks';
+import { Popover } from 'antd';
+import React, {
+ forwardRef,
+ useCallback,
+ useContext,
+ useImperativeHandle,
+ useRef,
+ useState,
+} from 'react';
+import { ConfigContext } from '../../models/context';
+import NodesMenu from '../NodesMenu';
+
+export default forwardRef((props: any, popoverRef) => {
+ const { addNode, children, onNodeSelectPopoverChange } = props;
+
+ const ref = useRef
+ }
+ style={{ width: '100%' }}
+ />
+
+ )}
+
+ {filterHiddenMenu(menuList).map((item: any, index: number) => item.type === '_group' ? (
+
+
+
+ ) : (
+ {item.title}
+ {filterHiddenMenu(item.items).map((data: any, index: number) => (
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {!isDisabled && (
+ <>
+
+
+
+ {isDisabled ? (
+ description
+ ) : (
+ {
+ setDescVal(e.target.value);
+ handleNodeValueChange({ desc: e.target.value });
+ }}
+ />
+ )}
+
+
+ }
+ >
+ {children}
+
+
+
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+
+ }
+ onClick={() => {
+ eventEmitter?.emit({ type: 'auto-layout-nodes' } as any)
+ }}
+ />
+
+
+ )
+};
+
+export default memo(Control);
diff --git a/packages/x-flow/src/operator/UndoRedo/index.less b/packages/x-flow/src/operator/UndoRedo/index.less
new file mode 100644
index 000000000..5994dc756
--- /dev/null
+++ b/packages/x-flow/src/operator/UndoRedo/index.less
@@ -0,0 +1,11 @@
+.fai-reactflow-undoredo {
+ display: flex;
+ align-items: center;
+ padding: 2px 1px;
+ border-radius: 8px;
+ border: 0.5px solid #f3f4f6;
+ background-color: #ffffff;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ color: #667085;
+ margin-left: 10px;
+}
\ No newline at end of file
diff --git a/packages/x-flow/src/operator/UndoRedo/index.tsx b/packages/x-flow/src/operator/UndoRedo/index.tsx
new file mode 100644
index 000000000..2404b01b4
--- /dev/null
+++ b/packages/x-flow/src/operator/UndoRedo/index.tsx
@@ -0,0 +1,34 @@
+import React, { memo } from 'react';
+import { Button, Tooltip } from 'antd';
+import IconView from '../../components/IconView';
+import './index.less';
+
+export type UndoRedoProps = {
+ handleUndo: () => void;
+ handleRedo: () => void;
+ pastStates: any[];
+ futureStates: any[];
+};
+
+export default memo(({ handleUndo, handleRedo, pastStates, futureStates }: UndoRedoProps) => {
+ return (
+
+
+ panOnDrag &&handleInteractionModeChange(false)}>
+
+ !panOnDrag && handleInteractionModeChange(true)}>
+
+
+
+ }
+ onClick={handleUndo}
+ disabled={!pastStates?.length}
+ />
+
+
+ }
+ onClick={handleRedo}
+ disabled={!futureStates?.length}
+ />
+
+
+ );
+})
diff --git a/packages/x-flow/src/operator/ZoomInOut/index.less b/packages/x-flow/src/operator/ZoomInOut/index.less
new file mode 100644
index 000000000..98b4b5a6c
--- /dev/null
+++ b/packages/x-flow/src/operator/ZoomInOut/index.less
@@ -0,0 +1,35 @@
+.fai-reactflow-zoominout {
+ display: flex;
+ align-items: center;
+ padding: 2px 1px;
+ border-radius: 8px;
+ border: 0.5px solid #f3f4f6;
+ background-color: #ffffff;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ color: #667085;
+}
+
+.fai-reactflow-zoom-select {
+
+ .parting-line {
+ height: 1px;
+ background-color: #F3F4F6;
+ }
+
+ .zoom-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ height: 2rem;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ font-size: 0.875rem;
+ color: #374151;
+
+ &:hover {
+ background-color: #F9FAFB;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/x-flow/src/operator/ZoomInOut/index.tsx b/packages/x-flow/src/operator/ZoomInOut/index.tsx
new file mode 100644
index 000000000..4c56c2d54
--- /dev/null
+++ b/packages/x-flow/src/operator/ZoomInOut/index.tsx
@@ -0,0 +1,154 @@
+import type { FC } from 'react';
+import React, { Fragment, memo } from 'react';
+import { Button, Popover, Tooltip } from 'antd';
+import { useReactFlow, useViewport } from '@xyflow/react';
+import { getKeyboardKeyNameBySystem } from '../../utils';
+import ShortcutsName from './shortcuts-name';
+import IconView from '../../components/IconView';
+import './index.less';
+
+enum ZoomType {
+ zoomIn = 'zoomIn',
+ zoomOut = 'zoomOut',
+ zoomToFit = 'zoomToFit',
+ zoomTo25 = 'zoomTo25',
+ zoomTo50 = 'zoomTo50',
+ zoomTo75 = 'zoomTo75',
+ zoomTo100 = 'zoomTo100',
+ zoomTo200 = 'zoomTo200'
+};
+
+const ZOOM_IN_OUT_OPTIONS = [
+ [
+ {
+ key: ZoomType.zoomTo200,
+ text: '200%',
+ },
+ {
+ key: ZoomType.zoomTo100,
+ text: '100%',
+ },
+ {
+ key: ZoomType.zoomTo75,
+ text: '75%',
+ },
+ {
+ key: ZoomType.zoomTo50,
+ text: '50%',
+ },
+ {
+ key: ZoomType.zoomTo25,
+ text: '25%',
+ },
+ ],
+ [
+ {
+ key: ZoomType.zoomToFit,
+ text: '自适应视图',
+ },
+ ]
+];
+
+const ZoomSelect = ({ handleZoom }: any) => {
+ return (
+
+ {ZOOM_IN_OUT_OPTIONS.map((options, i) => (
+
+ {i !== 0 && }
+
+ ))}
+
+ )
+};
+
+
+const ZoomInOut: FC = () => {
+ const {
+ zoomIn,
+ zoomOut,
+ zoomTo,
+ fitView,
+ } = useReactFlow();
+
+ const { zoom } = useViewport();
+
+ const handleZoom = (type: string) => {
+ if (type === ZoomType.zoomToFit)
+ fitView()
+
+ if (type === ZoomType.zoomTo25)
+ zoomTo(0.25)
+
+ if (type === ZoomType.zoomTo50)
+ zoomTo(0.5)
+
+ if (type === ZoomType.zoomTo75)
+ zoomTo(0.75)
+
+ if (type === ZoomType.zoomTo100)
+ zoomTo(1)
+
+ if (type === ZoomType.zoomTo200)
+ zoomTo(2)
+ };
+
+ return (
+
+ {
+ options.map(option => (
+
+ handleZoom(option.key)}
+ >
+ {option.text}
+ {
+ option.key === ZoomType.zoomToFit && (
+
+ ))
+ }
+
+
+ }
+ onClick={(e) => {
+ e.stopPropagation();
+ zoomOut();
+ }}
+ />
+
+
+ }
+ onClick={(e) => {
+ e.stopPropagation();
+ zoomIn();
+ }}
+ />
+
+
+ )
+};
+
+export default memo(ZoomInOut);
diff --git a/packages/x-flow/src/operator/ZoomInOut/shortcuts-name.tsx b/packages/x-flow/src/operator/ZoomInOut/shortcuts-name.tsx
new file mode 100644
index 000000000..303e43359
--- /dev/null
+++ b/packages/x-flow/src/operator/ZoomInOut/shortcuts-name.tsx
@@ -0,0 +1,32 @@
+import React, { memo } from 'react'
+import { getKeyboardKeyNameBySystem } from '../../utils'
+import cn from 'classnames'
+
+type ShortcutsNameProps = {
+ keys: string[]
+ className?: string
+}
+const ShortcutsName = ({
+ keys,
+ className,
+}: ShortcutsNameProps) => {
+ return (
+
+
+
+ {
+ keys.map(key => (
+
+ )
+}
+
+export default memo(ShortcutsName)
diff --git a/packages/x-flow/src/operator/index.less b/packages/x-flow/src/operator/index.less
new file mode 100644
index 000000000..d2cc387c0
--- /dev/null
+++ b/packages/x-flow/src/operator/index.less
@@ -0,0 +1,26 @@
+.fai-reactflow-operator {
+ position: absolute;
+ left: 4px;
+ bottom: 14px;
+ height: 50px;
+
+ .mini-map {
+ position: absolute;
+ left: 12px;
+ bottom: 45px;
+ margin: 0;
+ border: 0.5px solid rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ z-index: 9;
+ }
+
+ .operator-section {
+ display: flex;
+ align-items: center;
+ position: absolute;
+ left: 10px;
+ bottom: 4px;
+ z-index: 9;
+ }
+}
diff --git a/packages/x-flow/src/operator/index.tsx b/packages/x-flow/src/operator/index.tsx
new file mode 100644
index 000000000..e30cf1b02
--- /dev/null
+++ b/packages/x-flow/src/operator/index.tsx
@@ -0,0 +1,27 @@
+import React, { memo } from 'react';
+// import UndoRedo from '../header/undo-redo'
+import ZoomInOut from './ZoomInOut';
+import UndoRedo from './UndoRedo';
+import Control from './Control';
+
+import './index.less';
+import { useTemporalStore } from '../hooks/useTemporalStore';
+
+export type OperatorProps = {
+ addNode: any;
+}
+
+const Operator = ({ addNode }: OperatorProps) => {
+ const { undo, redo, pastStates, futureStates } = useTemporalStore();
+ return (
+
+ {getKeyboardKeyNameBySystem(key)}
+
+ ))
+ }
+
+
+ );
+}
+
+export default memo(Operator)
diff --git a/packages/x-flow/src/types.ts b/packages/x-flow/src/types.ts
new file mode 100644
index 000000000..c23c315bc
--- /dev/null
+++ b/packages/x-flow/src/types.ts
@@ -0,0 +1,46 @@
+import { Schema } from 'form-render';
+import React from 'react';
+export interface TNodeItem {
+ title: string; // 节点 title
+ type: string; // 节点类型 _group 比较te
+ description?: string; // 节点描述
+ hidden?: boolean; // 是否可见
+ icon: {
+ type: string;
+ bgColor: string;
+ };
+ settingSchema?: Schema; // 节点的配置schema（弹窗） string为自定义组件
+ settingWidget?: string; // 自定义组件
+ hideDesc?: boolean;// 隐藏业务描述
+}
+
+export interface TNodeGroup {
+ title: string; // 节点 title
+ type: '_group';
+ items: TNodeItem[];
+}
+
+export interface TNodeMenu {
+ ref: React.RefObject
+ undo()} handleRedo={() => redo()} pastStates={pastStates} futureStates={futureStates} />
+
+