feat(web): 调整节点入参形式

This commit is contained in:
v-zhangjc9
2025-06-26 14:38:09 +08:00
parent 873c1a1d20
commit a2aba82b6e
8 changed files with 54 additions and 196 deletions

View File

@@ -4,7 +4,6 @@ import {
BackgroundVariant,
type Connection,
Controls,
type Edge,
getOutgoers,
MiniMap,
type Node,
@@ -26,7 +25,6 @@ import LlmNode from './node/LlmNode.tsx'
import StartNode from './node/StartNode.tsx'
import {useDataStore} from './store/DataStore.ts'
import {useFlowStore} from './store/FlowStore.ts'
import Queue from 'yocto-queue'
const FlowableDiv = styled.div`
height: 100%;
@@ -100,7 +98,7 @@ function FlowEditor() {
])
const [open, setOpen] = useState(false)
const {setData, getDataById, setDataById} = useDataStore()
const {data, setData, getDataById, setDataById} = useDataStore()
const {
nodes,
getNodeById,
@@ -225,7 +223,7 @@ function FlowEditor() {
useMount(() => {
// language=JSON
let initialData = JSON.parse('{\n "nodes": [\n {\n "id": "BMFP3Eov94",\n "type": "start-amis-node",\n "position": {\n "x": 8,\n "y": 272\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "PYK8LjduQ1",\n "type": "end-amis-node",\n "position": {\n "x": 1439.5556937134281,\n "y": 282.2797340760818\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "nCm-ij5I6o",\n "type": "llm-amis-node",\n "position": {\n "x": 902.6781018665707,\n "y": 115.31234529524048\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "9RIg65O0YQ",\n "type": "knowledge-amis-node",\n "position": {\n "x": 338,\n "y": 287\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "2vTyjP0Gu9",\n "type": "code-amis-node",\n "position": {\n "x": 1086.6322978498904,\n "y": 371.3061114283591\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": true,\n "dragging": false\n },\n {\n "id": "s9VfZpvb4P",\n "type": "llm-amis-node",\n "position": {\n "x": 700.0944461714178,\n "y": 369.84258971430364\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": "BMFP3Eov94",\n "target": "9RIg65O0YQ",\n "id": "xy-edge__BMFP3Eov94-9RIg65O0YQ"\n },\n {\n "source": "9RIg65O0YQ",\n "target": "nCm-ij5I6o",\n "id": "xy-edge__9RIg65O0YQ-nCm-ij5I6o"\n },\n {\n "source": "nCm-ij5I6o",\n "target": "PYK8LjduQ1",\n "id": "xy-edge__nCm-ij5I6o-PYK8LjduQ1"\n },\n {\n "source": "s9VfZpvb4P",\n "target": "2vTyjP0Gu9",\n "id": "xy-edge__s9VfZpvb4P-2vTyjP0Gu9"\n },\n {\n "source": "9RIg65O0YQ",\n "target": "s9VfZpvb4P",\n "id": "xy-edge__9RIg65O0YQ-s9VfZpvb4P"\n },\n {\n "source": "2vTyjP0Gu9",\n "target": "PYK8LjduQ1",\n "id": "xy-edge__2vTyjP0Gu9-PYK8LjduQ1"\n }\n ],\n "data": {\n "BMFP3Eov94": {\n "inputs": {\n "name": {\n "type": "text"\n },\n "description": {\n "type": "text",\n "description": "文件描述"\n }\n }\n },\n "nCm-ij5I6o": {\n "model": "qwen3",\n "outputs": {\n "text": {\n "type": "string"\n }\n },\n "systemPrompt": "你是个沙雕"\n },\n "9RIg65O0YQ": {\n "count": 3,\n "score": 0.75,\n "knowledgeId": 3585368238960640,\n "query": "hello world"\n },\n "2vTyjP0Gu9": {\n "type": "python",\n "content": "code=\\"hello\\"\\nprint(code)"\n },\n "s9VfZpvb4P": {\n "model": "qwen3",\n "outputs": {\n "text": {\n "type": "string"\n }\n },\n "systemPrompt": "你是个聪明人"\n }\n }\n}')
let initialData = JSON.parse('{\n "nodes": [],\n "edges": [],\n "data": {}\n}')
let initialNodes = initialData['nodes'] ?? []
let initialEdges = initialData['edges'] ?? []
@@ -278,68 +276,8 @@ function FlowEditor() {
</Button>
</Dropdown>
<Button type="primary" onClick={() => {
// let saveData = {nodes, edges, data}
// console.log(JSON.stringify(saveData, null, 2))
const topologicalSort: (nodes: Node[], edges: Edge[]) => void = (nodes, edges) => {
const adjacency: Record<string, string[]> = {}
const reverseAdjacency: Record<string, string[]> = {}
const inDegree: Record<string, number> = {}
const nodeMap: Record<string, Node> = {}
// 初始化所有节点的邻接表和入度
for (const node of nodes) {
const id = node.id
adjacency[id] = []
reverseAdjacency[id] = []
inDegree[id] = 0
nodeMap[id] = node
}
// 填充邻接表并更新入度
for (const edge of edges) {
const {source, target} = edge
adjacency[source].push(target)
reverseAdjacency[target].push(source)
inDegree[target] = (inDegree[target] || 0) + 1
}
// 使用队列进行拓扑排序
const queue = new Queue<string>()
const topologicalList: string[] = []
// 寻找所有入度为0的节点起点
for (const nodeId in inDegree) {
if (inDegree[nodeId] === 0) {
queue.enqueue(nodeId)
}
}
// 开始处理节点
while (queue.size > 0) {
const currentNode = queue.dequeue()!
topologicalList.push(currentNode)
// 处理当前节点的所有邻居
for (const neighbor of adjacency[currentNode]) {
// 减少邻居的入度
inDegree[neighbor]--
// 如果邻居的入度变为0加入队列
if (inDegree[neighbor] === 0) {
queue.enqueue(neighbor)
}
}
}
// 检查环 - 如果结果数量小于节点数,说明存在环
if (topologicalList.length !== nodes.length) {
throw new Error('图中存在环,无法完成拓扑排序')
}
console.log(topologicalList)
}
topologicalSort(nodes, edges)
let saveData = {nodes, edges, data}
console.log(JSON.stringify(saveData, null, 2))
}}>
<SaveFilled/>

View File

@@ -3,7 +3,7 @@ import {Handle, type NodeProps, Position} from '@xyflow/react'
import type {Schema} from 'amis'
import {Card, Dropdown} from 'antd'
import {isEmpty, isEqual} from 'licia'
import type {JSX} from 'react'
import {type JSX} from 'react'
import {horizontalFormOptions} from '../../../../util/amis.tsx'
export type AmisNodeType = 'normal' | 'start' | 'end'
@@ -55,15 +55,24 @@ export function outputsFormColumns(editable: boolean = false, required: boolean
]
}
const AmisNode = (
props: NodeProps,
interface AmisNodeProps {
nodeProps: NodeProps,
type: AmisNodeType,
defaultNodeName: String,
defaultNodeDescription?: String,
extraNodeDescription?: (nodeData: any) => JSX.Element,
columnSchema?: Schema[],
) => {
const {id, data} = props
}
const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
nodeProps,
type,
defaultNodeName,
defaultNodeDescription,
extraNodeDescription,
columnSchema,
}) => {
const {id, data} = nodeProps
const {getDataById, removeNode, editNode} = data
// @ts-ignore
const nodeData = getDataById(id)

View File

@@ -2,13 +2,12 @@ import type {NodeProps} from '@xyflow/react'
import {horizontalFormOptions} from '../../../../util/amis.tsx'
import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
const CodeNode = (props: NodeProps) => AmisNode(
props,
'normal',
'代码执行',
'执行自定义的处理代码',
undefined,
[
const CodeNode = (props: NodeProps) => AmisNode({
nodeProps: props,
type: 'normal',
defaultNodeName: '代码执行',
defaultNodeDescription: '执行自定义的处理代码',
columnSchema: [
{
type: 'input-kvs',
name: 'inputs',
@@ -68,6 +67,6 @@ const CodeNode = (props: NodeProps) => AmisNode(
},
...outputsFormColumns(true, true, {result: {type: 'string'}}),
],
)
})
export default CodeNode

View File

@@ -1,13 +1,12 @@
import type {NodeProps} from '@xyflow/react'
import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
const EndNode = (props: NodeProps) => AmisNode(
props,
'end',
'结束节点',
'定义输出变量',
undefined,
outputsFormColumns(true),
)
const EndNode = (props: NodeProps) => AmisNode({
nodeProps: props,
type: 'end',
defaultNodeName: '结束节点',
defaultNodeDescription: '定义输出变量',
columnSchema: outputsFormColumns(true),
})
export default EndNode

View File

@@ -2,13 +2,12 @@ import type {NodeProps} from '@xyflow/react'
import {commonInfo} from '../../../../util/amis.tsx'
import AmisNode from './AmisNode.tsx'
const KnowledgeNode = (props: NodeProps) => AmisNode(
props,
'normal',
'知识库',
'查询知识库获取外部知识',
undefined,
[
const KnowledgeNode = (props: NodeProps) => AmisNode({
nodeProps: props,
type: 'normal',
defaultNodeName: '知识库',
defaultNodeDescription: '查询知识库获取外部知识',
columnSchema: [
{
type: 'select',
name: 'knowledgeId',
@@ -24,7 +23,7 @@ const KnowledgeNode = (props: NodeProps) => AmisNode(
...payload,
data: {
items: payload.data.items.map((item: any) => ({value: item['id'], label: item['name']})),
}
},
}
},
},
@@ -53,6 +52,6 @@ const KnowledgeNode = (props: NodeProps) => AmisNode(
step: 0.05,
},
],
)
})
export default KnowledgeNode

View File

@@ -1,13 +1,12 @@
import type {NodeProps} from '@xyflow/react'
import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
const LlmNode = (props: NodeProps) => AmisNode(
props,
'normal',
'大模型',
'使用大模型对话',
undefined,
[
const LlmNode = (props: NodeProps) => AmisNode({
nodeProps: props,
type: 'normal',
defaultNodeName: '大模型',
defaultNodeDescription: '使用大模型对话',
columnSchema: [
{
type: 'select',
name: 'model',
@@ -36,6 +35,6 @@ const LlmNode = (props: NodeProps) => AmisNode(
},
...outputsFormColumns(false, true, {text: {type: 'string'}}),
],
)
})
export default LlmNode

View File

@@ -2,13 +2,12 @@ import type {NodeProps} from '@xyflow/react'
import {horizontalFormOptions} from '../../../../util/amis.tsx'
import AmisNode from './AmisNode.tsx'
const StartNode = (props: NodeProps) => AmisNode(
props,
'start',
'开始节点',
'定义输入变量',
undefined,
[
const StartNode = (props: NodeProps) => AmisNode({
nodeProps: props,
type: 'start',
defaultNodeName: '开始节点',
defaultNodeDescription: '定义输入变量',
columnSchema: [
{
type: 'input-kvs',
name: 'inputs',
@@ -51,6 +50,6 @@ const StartNode = (props: NodeProps) => AmisNode(
],
},
],
)
})
export default StartNode

View File

@@ -1,84 +0,0 @@
type Node = {
id: string
type: 'start' | 'end' | 'normal'
}
type Edge = {
source: string
target: string
}
// language=JSON
let data = JSON.parse('{\n "nodes": [\n {\n "id": "A",\n "type": "start",\n "position": {\n "x": 8,\n "y": 272\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "F",\n "type": "end",\n "position": {\n "x": 1439.5556937134281,\n "y": 282.2797340760818\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "C",\n "type": "normal",\n "position": {\n "x": 902.6781018665707,\n "y": 115.31234529524048\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "B",\n "type": "normal",\n "position": {\n "x": 338,\n "y": 287\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "E",\n "type": "normal",\n "position": {\n "x": 1086.6322978498904,\n "y": 371.3061114283591\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": true,\n "dragging": false\n },\n {\n "id": "D",\n "type": "normal",\n "position": {\n "x": 700.0944461714178,\n "y": 369.84258971430364\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": "A",\n "target": "B",\n "id": "xy-edge__A-B"\n },\n {\n "source": "B",\n "target": "C",\n "id": "xy-edge__B-C"\n },\n {\n "source": "C",\n "target": "F",\n "id": "xy-edge__C-F"\n },\n {\n "source": "D",\n "target": "E",\n "id": "xy-edge__D-E"\n },\n {\n "source": "B",\n "target": "D",\n "id": "xy-edge__B-D"\n },\n {\n "source": "E",\n "target": "F",\n "id": "xy-edge__E-F"\n }\n ],\n "data": {\n "A": {\n "inputs": {\n "name": {\n "type": "text"\n },\n "description": {\n "type": "text",\n "description": "文件描述"\n }\n }\n },\n "C": {\n "model": "qwen3",\n "outputs": {\n "text": {\n "type": "string"\n }\n },\n "systemPrompt": "你是个沙雕"\n },\n "B": {\n "count": 3,\n "score": 0.75,\n "knowledgeId": 3585368238960640,\n "query": "hello world"\n },\n "E": {\n "type": "python",\n "content": "code=\'hello\'\\nprint(code)"\n },\n "D": {\n "model": "qwen3",\n "outputs": {\n "text": {\n "type": "string"\n }\n },\n "systemPrompt": "你是个聪明人"\n }\n }\n}')
// THEN(A, B, WHEN(C, THEN(D, E)), F)
function buildEL(nodes: Node[], edges: Edge[]): string {
// Build adjacency list and in-degree map
const adjList = new Map<string, string[]>()
const inDegree = new Map<string, number>()
for (const node of nodes) {
adjList.set(node.id, [])
inDegree.set(node.id, 0)
}
for (const edge of edges) {
adjList.get(edge.source)!.push(edge.target)
inDegree.set(edge.target, inDegree.get(edge.target)! + 1)
}
// Compute levels (longest path from start)
const levelMap = new Map<string, number>()
function computeLevel(nodeId: string): number {
if (levelMap.has(nodeId)) return levelMap.get(nodeId)!
const preds = edges.filter(e => e.target === nodeId).map(e => e.source)
const level = preds.length === 0 ? 0 : Math.max(...preds.map(p => computeLevel(p))) + 1
levelMap.set(nodeId, level)
return level
}
for (const node of nodes) computeLevel(node.id)
// Group nodes by level
const maxLevel = Math.max(...Array.from(levelMap.values()))
const levels: string[][] = Array.from({length: maxLevel + 1}, () => [])
for (const node of nodes) levels[levelMap.get(node.id)!].push(node.id)
// Build EL expression
const expressions: string[] = []
for (let i = 0; i <= maxLevel; i++) {
const nodesAtLevel = levels[i]
if (nodesAtLevel.length === 0) continue
// Identify serial chains starting from this level
const serialChains: string[] = []
for (const nodeId of nodesAtLevel) {
let chain = [nodeId]
let current = nodeId
while (adjList.get(current)?.length === 1) {
const next = adjList.get(current)![0]
if (inDegree.get(next) === 1 && levelMap.get(next) === i + chain.length) {
chain.push(next)
current = next
} else break
}
if (chain.length > 1) {
serialChains.push(`THEN(${chain.join(', ')})`)
// Remove processed nodes from their levels
for (let j = 1; j < chain.length; j++) {
const level = levelMap.get(chain[j])!
levels[level] = levels[level].filter(n => n !== chain[j])
}
} else {
serialChains.push(nodeId)
}
}
// Combine chains or nodes at this level
expressions.push(serialChains.length > 1 ? `WHEN(${serialChains.join(', ')})` : serialChains[0])
}
return `THEN(${expressions.join(', ')})`
}
console.log(buildEL(data.nodes, data.edges))