feat(web): 节点增加入参变量
This commit is contained in:
@@ -4,7 +4,7 @@ import {
|
|||||||
BackgroundVariant,
|
BackgroundVariant,
|
||||||
type Connection,
|
type Connection,
|
||||||
Controls,
|
Controls,
|
||||||
getIncomers,
|
type Edge,
|
||||||
getOutgoers,
|
getOutgoers,
|
||||||
MiniMap,
|
MiniMap,
|
||||||
type Node,
|
type Node,
|
||||||
@@ -18,13 +18,12 @@ import {arrToMap, find, findIdx, isEqual, isNil, randomId} from 'licia'
|
|||||||
import {type JSX, useState} from 'react'
|
import {type JSX, useState} from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import '@xyflow/react/dist/style.css'
|
import '@xyflow/react/dist/style.css'
|
||||||
import Queue from 'yocto-queue'
|
|
||||||
import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx'
|
import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx'
|
||||||
|
import {buildEL} from './ElParser.tsx'
|
||||||
import CodeNode from './node/CodeNode.tsx'
|
import CodeNode from './node/CodeNode.tsx'
|
||||||
import EndNode from './node/EndNode.tsx'
|
import EndNode from './node/EndNode.tsx'
|
||||||
import KnowledgeNode from './node/KnowledgeNode.tsx'
|
import KnowledgeNode from './node/KnowledgeNode.tsx'
|
||||||
import LlmNode from './node/LlmNode.tsx'
|
import LlmNode from './node/LlmNode.tsx'
|
||||||
import ParallelNode from './node/ParallelNode.tsx'
|
|
||||||
import StartNode from './node/StartNode.tsx'
|
import StartNode from './node/StartNode.tsx'
|
||||||
import {useDataStore} from './store/DataStore.ts'
|
import {useDataStore} from './store/DataStore.ts'
|
||||||
import {useFlowStore} from './store/FlowStore.ts'
|
import {useFlowStore} from './store/FlowStore.ts'
|
||||||
@@ -83,11 +82,6 @@ function FlowEditor() {
|
|||||||
name: '结束',
|
name: '结束',
|
||||||
component: EndNode,
|
component: EndNode,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
key: 'parallel-node',
|
|
||||||
name: '并行',
|
|
||||||
component: ParallelNode,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
key: 'llm-node',
|
key: 'llm-node',
|
||||||
name: '大模型',
|
name: '大模型',
|
||||||
@@ -228,7 +222,7 @@ function FlowEditor() {
|
|||||||
throw new Error('禁止流程循环')
|
throw new Error('禁止流程循环')
|
||||||
}
|
}
|
||||||
|
|
||||||
const hasRedundant = (source: Node, target: Node) => {
|
/*const hasRedundant = (source: Node, target: Node) => {
|
||||||
const visited = new Set<string>()
|
const visited = new Set<string>()
|
||||||
const queue = new Queue<Node>()
|
const queue = new Queue<Node>()
|
||||||
queue.enqueue(source)
|
queue.enqueue(source)
|
||||||
@@ -250,12 +244,30 @@ function FlowEditor() {
|
|||||||
}
|
}
|
||||||
if (hasRedundant(sourceNode, targetNode)) {
|
if (hasRedundant(sourceNode, targetNode)) {
|
||||||
throw new Error('出现冗余边')
|
throw new Error('出现冗余边')
|
||||||
|
}*/
|
||||||
|
}
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
const checkSave = (nodes: Node[], edges: Edge[], data: any) => {
|
||||||
|
if (nodes.filter(n => isEqual('start-node', n.type)).length < 1) {
|
||||||
|
throw new Error('至少存在1个开始节点')
|
||||||
}
|
}
|
||||||
|
if (nodes.filter(n => isEqual('end-node', n.type)).length < 1) {
|
||||||
|
throw new Error('至少存在1个结束节点')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用于透传node操作到主流程
|
||||||
|
const initialNodeHandlers = {
|
||||||
|
getDataById,
|
||||||
|
setDataById,
|
||||||
|
removeNode,
|
||||||
|
editNode,
|
||||||
}
|
}
|
||||||
|
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
// language=JSON
|
// language=JSON
|
||||||
let initialData = JSON.parse('{\n "nodes": [\n {\n "id": "lurod0PM-J",\n "type": "parallel-node",\n "position": {\n "x": -156,\n "y": 77\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "ldoKAzHnKF",\n "type": "llm-node",\n "position": {\n "x": 207,\n "y": -38\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "1eJtMoJWs6",\n "type": "llm-node",\n "position": {\n "x": 207,\n "y": 172.5\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n }\n ],\n "edges": [\n {\n "source": "lurod0PM-J",\n "target": "1eJtMoJWs6",\n "id": "xy-edge__lurod0PM-J-1eJtMoJWs6"\n },\n {\n "source": "lurod0PM-J",\n "target": "ldoKAzHnKF",\n "id": "xy-edge__lurod0PM-J-ldoKAzHnKF"\n }\n ],\n "data": {}\n}')
|
let initialData = JSON.parse('{\n "nodes": [\n {\n "id": "ldoKAzHnKF",\n "type": "llm-node",\n "position": {\n "x": 207,\n "y": -38\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "1eJtMoJWs6",\n "type": "llm-node",\n "position": {\n "x": 207,\n "y": 172.5\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "7e5vQLDGTl",\n "type": "start-node",\n "position": {\n "x": -162.3520537805597,\n "y": 67.84901301708827\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "Wyqg_bXILg",\n "type": "knowledge-node",\n "position": {\n "x": 560.402133595296,\n "y": -38.892263766178665\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "7DaF-0G-yv",\n "type": "llm-node",\n "position": {\n "x": 634.9924233956513,\n "y": 172.01821084172227\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "mymIbw_W6k",\n "type": "end-node",\n "position": {\n "x": 953.9302142661356,\n "y": 172.0182108417223\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n }\n ],\n "edges": [\n {\n "source": "7e5vQLDGTl",\n "target": "ldoKAzHnKF",\n "id": "xy-edge__7e5vQLDGTl-ldoKAzHnKF"\n },\n {\n "source": "ldoKAzHnKF",\n "target": "Wyqg_bXILg",\n "id": "xy-edge__ldoKAzHnKF-Wyqg_bXILg"\n },\n {\n "source": "7e5vQLDGTl",\n "target": "1eJtMoJWs6",\n "id": "xy-edge__7e5vQLDGTl-1eJtMoJWs6"\n },\n {\n "source": "Wyqg_bXILg",\n "target": "7DaF-0G-yv",\n "id": "xy-edge__Wyqg_bXILg-7DaF-0G-yv"\n },\n {\n "source": "1eJtMoJWs6",\n "target": "7DaF-0G-yv",\n "id": "xy-edge__1eJtMoJWs6-7DaF-0G-yv"\n },\n {\n "source": "7DaF-0G-yv",\n "target": "mymIbw_W6k",\n "id": "xy-edge__7DaF-0G-yv-mymIbw_W6k"\n }\n ],\n "data": {\n "7e5vQLDGTl": {\n "inputs": {\n "question": {\n "type": "text",\n "description": "问题"\n }\n }\n }\n }\n}')
|
||||||
let initialNodes = initialData['nodes'] ?? []
|
let initialNodes = initialData['nodes'] ?? []
|
||||||
let initialEdges = initialData['edges'] ?? []
|
let initialEdges = initialData['edges'] ?? []
|
||||||
|
|
||||||
@@ -263,12 +275,7 @@ function FlowEditor() {
|
|||||||
setData(initialNodeData)
|
setData(initialNodeData)
|
||||||
|
|
||||||
for (let node of initialNodes) {
|
for (let node of initialNodes) {
|
||||||
node.data = {
|
node.data = initialNodeHandlers
|
||||||
getDataById,
|
|
||||||
setDataById,
|
|
||||||
removeNode,
|
|
||||||
editNode,
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
setNodes(initialNodes)
|
setNodes(initialNodes)
|
||||||
setEdges(initialEdges)
|
setEdges(initialEdges)
|
||||||
@@ -288,12 +295,7 @@ function FlowEditor() {
|
|||||||
id: randomId(10),
|
id: randomId(10),
|
||||||
type: key,
|
type: key,
|
||||||
position: {x: 100, y: 100},
|
position: {x: 100, y: 100},
|
||||||
data: {
|
data: initialNodeHandlers,
|
||||||
getDataById,
|
|
||||||
setDataById,
|
|
||||||
removeNode,
|
|
||||||
editNode,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@@ -308,8 +310,15 @@ function FlowEditor() {
|
|||||||
</Button>
|
</Button>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
<Button type="primary" onClick={() => {
|
<Button type="primary" onClick={() => {
|
||||||
let saveData = {nodes, edges, data}
|
try {
|
||||||
console.log(JSON.stringify(saveData, null, 2))
|
checkSave(nodes, edges, data)
|
||||||
|
let saveData = {nodes, edges, data}
|
||||||
|
console.log(JSON.stringify(saveData, null, 2))
|
||||||
|
console.log(buildEL(nodes, edges))
|
||||||
|
} catch (e) {
|
||||||
|
// @ts-ignore
|
||||||
|
messageApi.error(e.message)
|
||||||
|
}
|
||||||
}}>
|
}}>
|
||||||
<SaveFilled/>
|
<SaveFilled/>
|
||||||
保存
|
保存
|
||||||
|
|||||||
@@ -8,6 +8,34 @@ import {horizontalFormOptions} from '../../../../util/amis.tsx'
|
|||||||
|
|
||||||
export type AmisNodeType = 'normal' | 'start' | 'end'
|
export type AmisNodeType = 'normal' | 'start' | 'end'
|
||||||
|
|
||||||
|
export function inputsFormColumns(required: boolean = false, preload?: any): Schema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: 'input-kvs',
|
||||||
|
name: 'inputs',
|
||||||
|
label: '输入变量',
|
||||||
|
value: preload,
|
||||||
|
addButtonText: '新增输入',
|
||||||
|
draggable: false,
|
||||||
|
keyItem: {
|
||||||
|
...horizontalFormOptions(),
|
||||||
|
label: '参数名称',
|
||||||
|
},
|
||||||
|
required: required,
|
||||||
|
valueItems: [
|
||||||
|
{
|
||||||
|
...horizontalFormOptions(),
|
||||||
|
type: 'select',
|
||||||
|
name: 'type',
|
||||||
|
label: '变量',
|
||||||
|
required: true,
|
||||||
|
options: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
export function outputsFormColumns(editable: boolean = false, required: boolean = false, preload?: any): Schema[] {
|
export function outputsFormColumns(editable: boolean = false, required: boolean = false, preload?: any): Schema[] {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@@ -159,7 +187,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
|
|||||||
{isNil(handlers)
|
{isNil(handlers)
|
||||||
? <>
|
? <>
|
||||||
{isEqual(type, 'start') || isEqual(type, 'normal')
|
{isEqual(type, 'start') || isEqual(type, 'normal')
|
||||||
? <LimitHandler type="source" position={Position.Right} limit={1}/> : undefined}
|
? <Handle type="source" position={Position.Right}/> : undefined}
|
||||||
{isEqual(type, 'end') || isEqual(type, 'normal')
|
{isEqual(type, 'end') || isEqual(type, 'normal')
|
||||||
? <Handle type="target" position={Position.Left}/> : undefined}
|
? <Handle type="target" position={Position.Left}/> : undefined}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import type {NodeProps} from '@xyflow/react'
|
import type {NodeProps} from '@xyflow/react'
|
||||||
import {horizontalFormOptions} from '../../../../util/amis.tsx'
|
import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
|
||||||
import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
|
|
||||||
|
|
||||||
const CodeNode = (props: NodeProps) => AmisNode({
|
const CodeNode = (props: NodeProps) => AmisNode({
|
||||||
nodeProps: props,
|
nodeProps: props,
|
||||||
@@ -8,27 +7,7 @@ const CodeNode = (props: NodeProps) => AmisNode({
|
|||||||
defaultNodeName: '代码执行',
|
defaultNodeName: '代码执行',
|
||||||
defaultNodeDescription: '执行自定义的处理代码',
|
defaultNodeDescription: '执行自定义的处理代码',
|
||||||
columnSchema: [
|
columnSchema: [
|
||||||
{
|
...inputsFormColumns(),
|
||||||
type: 'input-kvs',
|
|
||||||
name: 'inputs',
|
|
||||||
label: '输入变量',
|
|
||||||
addButtonText: '新增输入',
|
|
||||||
draggable: false,
|
|
||||||
keyItem: {
|
|
||||||
...horizontalFormOptions(),
|
|
||||||
label: '参数名称',
|
|
||||||
},
|
|
||||||
valueItems: [
|
|
||||||
{
|
|
||||||
...horizontalFormOptions(),
|
|
||||||
type: 'select',
|
|
||||||
name: 'type',
|
|
||||||
label: '变量',
|
|
||||||
required: true,
|
|
||||||
options: [],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: 'divider',
|
type: 'divider',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import type {NodeProps} from '@xyflow/react'
|
import type {NodeProps} from '@xyflow/react'
|
||||||
import {commonInfo} from '../../../../util/amis.tsx'
|
import {commonInfo} from '../../../../util/amis.tsx'
|
||||||
import AmisNode from './AmisNode.tsx'
|
import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
|
||||||
|
|
||||||
const KnowledgeNode = (props: NodeProps) => AmisNode({
|
const KnowledgeNode = (props: NodeProps) => AmisNode({
|
||||||
nodeProps: props,
|
nodeProps: props,
|
||||||
@@ -8,6 +8,10 @@ const KnowledgeNode = (props: NodeProps) => AmisNode({
|
|||||||
defaultNodeName: '知识库',
|
defaultNodeName: '知识库',
|
||||||
defaultNodeDescription: '查询知识库获取外部知识',
|
defaultNodeDescription: '查询知识库获取外部知识',
|
||||||
columnSchema: [
|
columnSchema: [
|
||||||
|
...inputsFormColumns(),
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
name: 'knowledgeId',
|
name: 'knowledgeId',
|
||||||
@@ -51,6 +55,10 @@ const KnowledgeNode = (props: NodeProps) => AmisNode({
|
|||||||
max: 1,
|
max: 1,
|
||||||
step: 0.05,
|
step: 0.05,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
...outputsFormColumns(false, true, {result: {type: 'array-string'}}),
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import type {NodeProps} from '@xyflow/react'
|
import type {NodeProps} from '@xyflow/react'
|
||||||
import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
|
import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
|
||||||
|
|
||||||
const LlmNode = (props: NodeProps) => AmisNode({
|
const LlmNode = (props: NodeProps) => AmisNode({
|
||||||
nodeProps: props,
|
nodeProps: props,
|
||||||
@@ -7,6 +7,10 @@ const LlmNode = (props: NodeProps) => AmisNode({
|
|||||||
defaultNodeName: '大模型',
|
defaultNodeName: '大模型',
|
||||||
defaultNodeDescription: '使用大模型对话',
|
defaultNodeDescription: '使用大模型对话',
|
||||||
columnSchema: [
|
columnSchema: [
|
||||||
|
...inputsFormColumns(),
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
name: 'model',
|
name: 'model',
|
||||||
|
|||||||
@@ -1,19 +0,0 @@
|
|||||||
import {Handle, type NodeProps, Position} from '@xyflow/react'
|
|
||||||
import AmisNode, {LimitHandler} from './AmisNode.tsx'
|
|
||||||
|
|
||||||
const ParallelNode = (props: NodeProps) => AmisNode({
|
|
||||||
nodeProps: props,
|
|
||||||
type: 'normal',
|
|
||||||
defaultNodeName: '并行节点',
|
|
||||||
defaultNodeDescription: '允许开启并行流程',
|
|
||||||
handlers: () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Handle type="source" position={Position.Right}/>
|
|
||||||
<LimitHandler type="target" position={Position.Left} limit={1}/>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
export default ParallelNode
|
|
||||||
Reference in New Issue
Block a user