lanyuanxiaoyao/hudi-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 完成循环节点的基本配置

Browse Source
This commit is contained in:
v-zhangjc9
2025-07-14 19:10:58 +08:00
parent c77395fec4
commit 04bc9a2c16
15 changed files with 196 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
service-web/client/src/components/flow/FlowChecker.tsx
View File

@@ -28,6 +28,7 @@ export const sourceNodeNotFoundError = () => new CheckError(200, '连线起始
export const targetNodeNotFoundError = () => new CheckError(201, '连线目标节点未找到')
export const nodeToSelfError = () => new CheckError(203, '节点不能直连自身')
export const hasCycleError = () => new CheckError(204, '禁止流程循环')
export const differentParent = () => new CheckError(205, '子流程禁止连接外部节点')
const hasCycle = (sourceNode: Node, targetNode: Node, nodes: Node[], edges: Edge[], visited = new Set<string>()) => {
if (visited.has(targetNode.id)) return false
@@ -48,6 +49,10 @@ export const checkAddConnection: (connection: Connection, nodes: Node[], edges:
throw targetNodeNotFoundError()
}
if (!isEqual(sourceNode.parentId, targetNode.parentId)) {
throw differentParent()
}
// 禁止流程出现环，必须是有向无环图
if (isEqual(sourceNode.id, targetNode.id)) {
throw nodeToSelfError()

20
service-web/client/src/components/flow/FlowEditor.tsx
View File

@@ -8,11 +8,12 @@ import styled from 'styled-components'
import '@xyflow/react/dist/style.css'
import {commonInfo} from '../../util/amis.tsx'
import {checkAddConnection, checkAddNode, checkSave} from './FlowChecker.tsx'
import {useNodeDrag} from './Helper.tsx'
import {NodeRegistry, NodeRegistryMap} from './NodeRegistry.tsx'
import {useContextStore} from './store/ContextStore.ts'
import {useDataStore} from './store/DataStore.ts'
import {useFlowStore} from './store/FlowStore.ts'
import type {FlowEditorProps} from './types.ts'
import {flowDotColor, type FlowEditorProps} from './types.ts'
const FlowableDiv = styled.div`
.react-flow__node.selectable {
@@ -75,10 +76,17 @@ function FlowEditor(props: FlowEditorProps) {
setInputSchema(props.inputSchema)
}, [props.graphData])
const {
onNodeDragStart,
onNodeDrag,
onNodeDragEnd,
} = useNodeDrag([props.graphData])
return (
<FlowableDiv className="h-full w-full">
{contextHolder}
<ReactFlow
className="rounded-xl"
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
@@ -97,6 +105,9 @@ function FlowEditor(props: FlowEditorProps) {
}}
// @ts-ignore
nodeTypes={arrToMap(Object.keys(NodeRegistryMap), key => NodeRegistryMap[key]!.component)}
onNodeDragStart={onNodeDragStart}
onNodeDrag={onNodeDrag}
onNodeDragStop={onNodeDragEnd}
>
<Panel position="top-right">
<Space className="toolbar">
@@ -176,7 +187,12 @@ function FlowEditor(props: FlowEditorProps) {
</Panel>
<Controls/>
<MiniMap/>
<Background variant={BackgroundVariant.Cross} gap={20} size={3}/>
<Background
variant={BackgroundVariant.Cross}
gap={20}
size={3}
color={flowDotColor}
/>
</ReactFlow>
</FlowableDiv>
)

44
service-web/client/src/components/flow/Helper.tsx
View File

@@ -1,7 +1,9 @@
import {type Edge, getIncomers, type Node} from '@xyflow/react'
import type {Option} from 'amis/lib/Schema'
import {find, has, isEmpty, isEqual, unique} from 'licia'
import {find, has, isEmpty, isEqual, max, min, unique} from 'licia'
import {type DependencyList, type MouseEvent as ReactMouseEvent, useCallback, useRef} from 'react'
import Queue from 'yocto-queue'
import {useFlowStore} from './store/FlowStore.ts'
import type {InputFormOptions, InputFormOptionsGroup} from './types.ts'
export const getAllIncomerNodeById: (id: string, nodes: Node[], edges: Edge[]) => string[] = (id, nodes, edges) => {
@@ -82,3 +84,43 @@ export const generateAllIncomerOutputVariablesFormOptions: (id: string, inputSch
})),
]
}
// 处理循环节点的边界问题
export const useNodeDrag = (deps: DependencyList) => {
const currentPosition = useRef({x: 0, y: 0} as { x: number, y: number })
const {setNode, getNodeById} = useFlowStore()
const onNodeDragStart = useCallback(() => {
}, deps)
const onNodeDrag = useCallback((event: ReactMouseEvent, node: Node) => {
event.stopPropagation()
if (node.parentId) {
let parentNode = getNodeById(node.parentId)
if (parentNode) {
let newPosition = {
x: max(min(node.position.x, (parentNode.measured?.width ?? 0) - (node.measured?.width ?? 0) - 28), 28),
y: max(min(node.position.y, (parentNode.measured?.height ?? 0) - (node.measured?.height ?? 0) - 28), 90),
}
setNode({
...node,
position: newPosition,
})
currentPosition.current = newPosition
}
}
}, deps)
const onNodeDragEnd = useCallback((_event: ReactMouseEvent, node: Node) => {
if (node.parentId) {
setNode({
...node,
position: currentPosition.current,
})
}
}, deps)
return {
onNodeDragStart,
onNodeDrag,
onNodeDragEnd,
}
}

23
service-web/client/src/components/flow/NodeRegistry.tsx
View File

@@ -1,13 +1,13 @@
import {has, isEmpty} from 'licia'
import type {JSX} from 'react'
import {getAllIncomerNodeOutputVariables} from './Helper.tsx'
import CodeNode from './node/CodeNode.tsx'
import KnowledgeNode from './node/KnowledgeNode.tsx'
import LlmNode from './node/LlmNode.tsx'
import LoopNode from './node/LoopNode.tsx'
import OutputNode from './node/OutputNode.tsx'
import SwitchNode from './node/SwitchNode.tsx'
import TemplateNode from './node/TemplateNode.tsx'
import type {NodeChecker} from './types.ts'
import type {NodeChecker, NodeDefine} from './types.ts'
const inputSingleVariableChecker: (field: string) => NodeChecker = field => {
return (id, inputSchema, nodes, edges, data) => {
@@ -54,16 +54,6 @@ const inputMultiVariableChecker: NodeChecker = (id, inputSchema, nodes, edges, d
return {error: false}
}
type NodeDefine = {
key: string,
group: string,
name: string,
icon: JSX.Element,
description: string,
component: any,
checkers: NodeChecker[],
}
export const NodeRegistry: NodeDefine[] = [
{
key: 'llm-node',
@@ -110,6 +100,15 @@ export const NodeRegistry: NodeDefine[] = [
component: SwitchNode,
checkers: [],
},
{
key: 'loop-node',
group: '逻辑节点',
name: '循环',
icon: <i className="fa fa-repeat"/>,
description: '实现循环执行流程',
component: LoopNode,
checkers: [],
},
{
key: 'output-node',
group: '输出节点',

57
service-web/client/src/components/flow/node/AmisNode.tsx
View File

@@ -1,8 +1,8 @@
import {CopyFilled, DeleteFilled, EditFilled} from '@ant-design/icons'
import {type Edge, Handle, type Node, type NodeProps, NodeToolbar, Position} from '@xyflow/react'
import type {Schema} from 'amis'
import {Button, Card, Drawer, Space, Tooltip} from 'antd'
import {type JSX, useCallback, useState} from 'react'
import {type Edge, Handle, type Node, type NodeProps, NodeResizeControl, NodeToolbar, Position} from '@xyflow/react'
import {type ClassName, classnames, type Schema} from 'amis'
import {Button, Drawer, Space, Tooltip} from 'antd'
import {type CSSProperties, type JSX, useCallback, useState} from 'react'
import styled from 'styled-components'
import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx'
import {generateAllIncomerOutputVariablesFormOptions} from '../Helper.tsx'
@@ -95,20 +95,16 @@ export function outputsFormColumns(editable: boolean = false, required: boolean
}
type AmisNodeProps = {
className: ClassName,
style?: CSSProperties,
nodeProps: NodeProps
extraNodeDescription?: JSX.Element
handler: JSX.Element
columnSchema?: () => Schema[]
resize?: { minWidth: number, minHeight: number }
}
const AmisNodeContainerDiv = styled.div`
.ant-card {
.ant-card-actions {
& > li {
margin: 0;
}
}
}
`
export const StartNodeHandler = () => {
@@ -128,11 +124,18 @@ export const NormalNodeHandler = () => {
)
}
export const nodeClassName = (name: string) => {
return `flow-node flow-node-${name}`
}
const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
className,
style,
nodeProps,
extraNodeDescription,
handler,
columnSchema,
resize,
}) => {
const {removeNode} = useFlowStore()
const {getDataById, setDataById, removeDataById} = useDataStore()
@@ -236,7 +239,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
removeDataById(id)
}, [])
return (
<AmisNodeContainerDiv className="w-64">
<AmisNodeContainerDiv className={classnames(className, 'w-64')} style={style}>
<Drawer
title="节点编辑"
open={editDrawerOpen}
@@ -278,17 +281,27 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
</Tooltip>
</Space>
</NodeToolbar>
<Card
className="node-card"
title={nodeName}
extra={<span className="text-gray-300 text-xs">{id}</span>}
size="small"
>
<div className="card-description p-2 text-secondary text-sm">
{nodeDescription}
{extraNodeDescription}
<div className="node-card h-full flex flex-col bg-white rounded-md border border-gray-100 border-solid">
<div
className="node-card-header items-center flex justify-between p-2 border-t-0 border-l-0 border-r-0 border-b border-gray-100 border-solid">
<span className="font-bold">{nodeName}</span>
<span className="text-gray-300 text-sm">{id}</span>
</div>
</Card>
<div className="node-card-description flex flex-col flex-1 p-2 text-secondary text-sm">
<div className="node-card-description-node">
{nodeDescription}
</div>
<div className="node-card-description-extra flex-1 mt-1">
{extraNodeDescription}
</div>
</div>
</div>
{resize ? <>
<NodeResizeControl
minWidth={resize.minWidth}
minHeight={resize.minHeight}
/>
</> : undefined}
{handler}
</AmisNodeContainerDiv>
)

3
service-web/client/src/components/flow/node/CodeNode.tsx
View File

@@ -4,7 +4,7 @@ import React, {useCallback, useEffect} from 'react'
import {useContextStore} from '../store/ContextStore.ts'
import {useDataStore} from '../store/DataStore.ts'
import {useFlowStore} from '../store/FlowStore.ts'
import AmisNode, {inputsFormColumns, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
import AmisNode, {inputsFormColumns, nodeClassName, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
const languageMap: Record<string, string> = {
'javascript': 'Javascript',
@@ -62,6 +62,7 @@ const CodeNode = (props: NodeProps) => {
], [props.id])
return (
<AmisNode
className={nodeClassName('code')}
nodeProps={props}
extraNodeDescription={
nodeData?.type

3
service-web/client/src/components/flow/node/KnowledgeNode.tsx
View File

@@ -4,7 +4,7 @@ import {commonInfo} from '../../../util/amis.tsx'
import {useContextStore} from '../store/ContextStore.ts'
import {useDataStore} from '../store/DataStore.ts'
import {useFlowStore} from '../store/FlowStore.ts'
import AmisNode, {inputsFormColumns, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
import AmisNode, {inputsFormColumns, nodeClassName, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
const KnowledgeNode = (props: NodeProps) => {
const {getNodes, getEdges} = useFlowStore()
@@ -79,6 +79,7 @@ const KnowledgeNode = (props: NodeProps) => {
], [props.id])
return (
<AmisNode
className={nodeClassName('knowledge')}
nodeProps={props}
columnSchema={columnsSchema}
handler={<NormalNodeHandler/>}

3
service-web/client/src/components/flow/node/LlmNode.tsx
View File

@@ -4,7 +4,7 @@ import React, {useCallback, useEffect} from 'react'
import {useContextStore} from '../store/ContextStore.ts'
import {useDataStore} from '../store/DataStore.ts'
import {useFlowStore} from '../store/FlowStore.ts'
import AmisNode, {inputsFormColumns, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
import AmisNode, {inputsFormColumns, nodeClassName, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
const modelMap: Record<string, string> = {
qwen3: 'Qwen3',
@@ -57,6 +57,7 @@ const LlmNode = (props: NodeProps) => {
], [props.id])
return (
<AmisNode
className={nodeClassName('llm')}
nodeProps={props}
extraNodeDescription={
nodeData?.model

46
service-web/client/src/components/flow/node/LoopNode.tsx Normal file
View File

@@ -0,0 +1,46 @@
import {Background, BackgroundVariant, type NodeProps} from '@xyflow/react'
import {classnames} from 'amis'
import React from 'react'
import {flowBackgroundColor, flowDotColor} from '../types.ts'
import AmisNode, {nodeClassName, NormalNodeHandler} from './AmisNode.tsx'
const LoopNode = (props: NodeProps) => {
return (
<AmisNode
className={classnames('w-full', 'h-full', nodeClassName('loop'))}
style={{
minWidth: '256px',
minHeight: '110px'
}}
nodeProps={props}
extraNodeDescription={
<div
className="nodrag relative h-full w-full"
style={{
minHeight: '8rem',
}}
>
<Background
id={`loop-background-${props.id}`}
className="rounded-xl"
variant={BackgroundVariant.Cross}
gap={20}
size={3}
style={{
zIndex: 0,
}}
color={flowDotColor}
bgColor={flowBackgroundColor}
/>
</div>
}
handler={<NormalNodeHandler/>}
resize={{
minWidth: 256,
minHeight: 208,
}}
/>
)
}
export default React.memo(LoopNode)

3
service-web/client/src/components/flow/node/OutputNode.tsx
View File

@@ -4,7 +4,7 @@ import {generateAllIncomerOutputVariablesFormOptions} from '../Helper.tsx'
import {useContextStore} from '../store/ContextStore.ts'
import {useDataStore} from '../store/DataStore.ts'
import {useFlowStore} from '../store/FlowStore.ts'
import AmisNode, {EndNodeHandler} from './AmisNode.tsx'
import AmisNode, {EndNodeHandler, nodeClassName} from './AmisNode.tsx'
const OutputNode = (props: NodeProps) => {
const {getNodes, getEdges} = useFlowStore()
@@ -33,6 +33,7 @@ const OutputNode = (props: NodeProps) => {
return (
<AmisNode
className={nodeClassName('output')}
nodeProps={props}
columnSchema={columnsSchema}
handler={<EndNodeHandler/>}

3
service-web/client/src/components/flow/node/SwitchNode.tsx
View File

@@ -1,7 +1,7 @@
import {Handle, type NodeProps, Position} from '@xyflow/react'
import {Tag} from 'antd'
import React from 'react'
import AmisNode from './AmisNode.tsx'
import AmisNode, {nodeClassName} from './AmisNode.tsx'
const cases = [
{
@@ -18,6 +18,7 @@ const cases = [
const SwitchNode = (props: NodeProps) => {
return (
<AmisNode
className={nodeClassName('switch')}
nodeProps={props}
extraNodeDescription={
<div className="mt-2">

3
service-web/client/src/components/flow/node/TemplateNode.tsx
View File

@@ -4,7 +4,7 @@ import React, {useCallback, useEffect} from 'react'
import {useContextStore} from '../store/ContextStore.ts'
import {useDataStore} from '../store/DataStore.ts'
import {useFlowStore} from '../store/FlowStore.ts'
import AmisNode, {inputsFormColumns, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
import AmisNode, {inputsFormColumns, nodeClassName, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
const typeMap: Record<string, string> = {
default: '默认',
@@ -75,6 +75,7 @@ const TemplateNode = (props: NodeProps) => {
return (
<AmisNode
className={nodeClassName('template')}
nodeProps={props}
extraNodeDescription={
nodeData?.type

11
service-web/client/src/components/flow/store/FlowStore.ts
View File

@@ -19,6 +19,7 @@ export const useFlowStore = create<{
addNode: (node: Node) => void,
removeNode: (id: string) => void,
setNodes: (nodes: Node[]) => void,
setNode: (node: Node) => void,
edges: Edge[],
getEdges: () => Edge[],
@@ -42,6 +43,16 @@ export const useFlowStore = create<{
})
},
setNodes: nodes => set({nodes}),
setNode: node => {
set({
nodes: get().nodes.map(n => {
if (isEqual(node.id, n.id)) {
return node
}
return n
}),
})
},
edges: [],
getEdges: () => get().edges,

14
service-web/client/src/components/flow/types.ts
View File

@@ -1,4 +1,8 @@
import type {Edge, Node} from '@xyflow/react'
import type {JSX} from 'react'
export const flowBackgroundColor = "#fafafa"
export const flowDotColor = "#dedede"
export type InputFormOptions = {
label: string
@@ -23,4 +27,14 @@ export type FlowEditorProps = {
inputSchema: Record<string, Record<string, any>>,
graphData: GraphData,
onGraphDataChange: (graphData: GraphData) => void,
}
export type NodeDefine = {
key: string,
group: string,
name: string,
icon: JSX.Element,
description: string,
component: any,
checkers: NodeChecker[],
}

2
service-web/client/src/pages/Test.tsx
View File

@@ -4,7 +4,7 @@ import type {GraphData} from '../components/flow/types.ts'
function Test() {
// language=JSON
const [graphData] = useState<GraphData>(JSON.parse('{\n "nodes": [\n {\n "id": "MzEitlOusl",\n "type": "llm-node",\n "position": {\n "x": 47,\n "y": 92\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 130\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "bivXSpiLaI",\n "type": "code-node",\n "position": {\n "x": 381,\n "y": 181\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 130\n },\n "selected": true,\n "dragging": false\n }\n ],\n "edges": [\n {\n "source": "MzEitlOusl",\n "sourceHandle": "source",\n "target": "bivXSpiLaI",\n "targetHandle": "target",\n "id": "xy-edge__MzEitlOuslsource-bivXSpiLaItarget"\n }\n ],\n "data": {\n "MzEitlOusl": {\n "node": {\n "name": "大模型",\n "description": "使用大模型对话"\n },\n "outputs": {\n "text": {\n "type": "string"\n }\n },\n "model": "qwen3",\n "systemPrompt": "你是个好人",\n "finished": true\n },\n "bivXSpiLaI": {\n "node": {\n "name": "代码执行",\n "description": "执行自定义的处理代码"\n },\n "outputs": {\n "result": {\n "type": "string"\n }\n },\n "type": "javascript",\n "content": "console.log(\'hello\')",\n "inputs": {\n "text": {\n "variable": "MzEitlOusl.text"\n }\n },\n "finished": true\n }\n }\n}'))
const [graphData] = useState<GraphData>(JSON.parse('{\n "nodes": [\n {\n "id": "QxNrkChBWQ",\n "type": "loop-node",\n "position": {\n "x": 742,\n "y": 119\n },\n "data": {},\n "measured": {\n "width": 458,\n "height": 368\n },\n "selected": true,\n "dragging": false,\n "width": 458,\n "height": 368,\n "resizing": false\n },\n {\n "id": "MzEitlOusl",\n "type": "llm-node",\n "position": {\n "x": 47,\n "y": 92\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 110\n },\n "selected": false,\n "dragging": false,\n "extent": "parent",\n "parentId": "QxNrkChBWQ"\n },\n {\n "id": "bivXSpiLaI",\n "type": "code-node",\n "position": {\n "x": 381,\n "y": 181\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 110\n },\n "selected": false,\n "dragging": false\n }\n ],\n "edges": [],\n "data": {\n "MzEitlOusl": {\n "node": {\n "name": "大模型",\n "description": "使用大模型对话"\n },\n "outputs": {\n "text": {\n "type": "string"\n }\n },\n "model": "qwen3",\n "systemPrompt": "你是个好人",\n "finished": true\n },\n "bivXSpiLaI": {\n "node": {\n "name": "代码执行",\n "description": "执行自定义的处理代码"\n },\n "outputs": {\n "result": {\n "type": "string"\n }\n },\n "type": "javascript",\n "content": "console.log(\'hello\')",\n "inputs": {\n "text": {\n "variable": "MzEitlOusl.text"\n }\n },\n "finished": true\n },\n "QxNrkChBWQ": {\n "node": {\n "name": "循环",\n "description": "实现循环执行流程"\n },\n "finished": true\n }\n }\n}'))
return (
<div className="h-screen">