diff --git a/service-web/client/src/components/flow/FlowEditor.tsx b/service-web/client/src/components/flow/FlowEditor.tsx index 8fdc5ec..96d4829 100644 --- a/service-web/client/src/components/flow/FlowEditor.tsx +++ b/service-web/client/src/components/flow/FlowEditor.tsx @@ -25,6 +25,7 @@ import SwitchNode from './node/SwitchNode.tsx' import {useDataStore} from './store/DataStore.ts' import {useFlowStore} from './store/FlowStore.ts' import {useNavigate} from 'react-router' +import {useShallow} from 'zustand/react/shallow' const FlowableDiv = styled.div` height: 100%; @@ -66,6 +67,7 @@ const FlowableDiv = styled.div` export type GraphData = { nodes: Node[], edges: Edge[], data: any } export type FlowEditorProps = { + // inputSchema: Record>, graphData: GraphData, onGraphDataChange: (graphData: GraphData) => void, } @@ -106,18 +108,38 @@ function FlowEditor(props: FlowEditorProps) { ]) const [open, setOpen] = useState(false) - const {data, setData, getDataById, setDataById} = useDataStore() + const {data, setData, getDataById, setDataById} = useDataStore( + useShallow(state => ({ + data: state.data, + setData: state.setData, + getDataById: state.getDataById, + setDataById: state.setDataById, + })) + ) const { nodes, addNode, - removeNode, setNodes, onNodesChange, edges, setEdges, onEdgesChange, onConnect, - } = useFlowStore() + } = useFlowStore( + useShallow(state => ({ + nodes: state.nodes, + getNodes: state.getNodes, + addNode: state.addNode, + removeNode: state.removeNode, + setNodes: state.setNodes, + onNodesChange: state.onNodesChange, + edges: state.edges, + getEdges: state.getEdges, + setEdges: state.setEdges, + onEdgesChange: state.onEdgesChange, + onConnect: state.onConnect, + })) + ) const [currentNodeForm, setCurrentNodeForm] = useState() const editNode = (id: string, columnSchema?: Schema[]) => { @@ -197,10 +219,8 @@ function FlowEditor(props: FlowEditorProps) { // 用于透传node操作到主流程 const initialNodeHandlers = { - getDataById, - setDataById, - removeNode, - editNode, + // getInputSchema: () => props.inputSchema, + editNode } useEffect(() => { diff --git a/service-web/client/src/components/flow/node/AmisNode.tsx b/service-web/client/src/components/flow/node/AmisNode.tsx index da51728..acdcb69 100644 --- a/service-web/client/src/components/flow/node/AmisNode.tsx +++ b/service-web/client/src/components/flow/node/AmisNode.tsx @@ -1,27 +1,36 @@ -import {DeleteFilled, EditFilled} from '@ant-design/icons' -import {Handle, type HandleProps, type NodeProps, Position, useNodeConnections} from '@xyflow/react' +import { + type Edge, + Handle, + type HandleProps, + type Node, + type NodeProps, + Position, + useNodeConnections +} from '@xyflow/react' import type {Schema} from 'amis' -import {Card, Dropdown} from 'antd' +import {Button, Card} from 'antd' import {isEmpty, isEqual, isNil} from 'licia' -import {type JSX} from 'react' +import {type JSX, useMemo} from 'react' import {horizontalFormOptions} from '../../../util/amis.tsx' +import {useDataStore} from '../store/DataStore.ts' +import {EditFilled} from '@ant-design/icons' export type AmisNodeType = 'normal' | 'start' | 'end' -export function inputsFormColumns(required: boolean = false, preload?: any): Schema[] { +export function inputsFormColumns(props: ColumnsSchemaProps): Schema[] { + console.log('props', props) + return [ { type: 'input-kvs', name: 'inputs', label: '输入变量', - value: preload, addButtonText: '新增输入', draggable: false, keyItem: { ...horizontalFormOptions(), label: '参数名称', }, - required: required, valueItems: [ { ...horizontalFormOptions(), @@ -95,6 +104,14 @@ export const LimitHandler = (props: HandleProps & { limit: number }) => { ) } +type ColumnsSchemaProps = { + // getInputSchema: () => Record>, + nodeId: string, + nodeData: any, + getNodes: () => Node[], + getEdges: () => Edge[], +} + type AmisNodeProps = { nodeProps: NodeProps type: AmisNodeType @@ -102,7 +119,7 @@ type AmisNodeProps = { defaultNodeDescription?: String extraNodeDescription?: (nodeData: any) => JSX.Element handlers?: (nodeData: any) => JSX.Element - columnSchema?: Schema[] + columnSchema?: (props: ColumnsSchemaProps) => Schema[] } const AmisNode: (props: AmisNodeProps) => JSX.Element = ({ @@ -114,16 +131,24 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({ handlers, columnSchema, }) => { + // const { + // removeNode, + // getNodes, + // getEdges + // } = useFlowStore() + const {getDataById} = useDataStore() + const {id, data} = nodeProps - const {getDataById, removeNode, editNode} = data + const {editNode} = data // @ts-ignore - const nodeData = getDataById(id) + const nodeData = useMemo(() => { + return getDataById(id) + }, [id]) const nodeName = isEmpty(nodeData?.node?.name) ? defaultNodeName : nodeData.node.name const nodeDescription = isEmpty(nodeData?.node?.description) ? defaultNodeDescription : nodeData.node?.description return (
- JSX.Element = ({ { type: 'divider', }, - ...(columnSchema ?? []), + ...( + columnSchema?.({ + // @ts-ignore + // getInputSchema, + nodeId: id, + nodeData, + // @ts-ignore + getNodes, + // @ts-ignore + getEdges, + }) ?? [] + ), ], ) break @@ -171,19 +207,18 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({ } }, }} + >*/} + {id}} + size="small" > - {id}} - size="small" - > -
- {nodeDescription} - {extraNodeDescription?.(nodeData)} -
-
-
+
+ {nodeDescription} + {extraNodeDescription?.(nodeData)} +
+ {isNil(handlers) ? <> {isEqual(type, 'start') || isEqual(type, 'normal') diff --git a/service-web/client/src/components/flow/node/CodeNode.tsx b/service-web/client/src/components/flow/node/CodeNode.tsx index 681639a..798769d 100644 --- a/service-web/client/src/components/flow/node/CodeNode.tsx +++ b/service-web/client/src/components/flow/node/CodeNode.tsx @@ -7,8 +7,8 @@ const CodeNode = (props: NodeProps) => AmisNode({ type: 'normal', defaultNodeName: '代码执行', defaultNodeDescription: '执行自定义的处理代码', - columnSchema: [ - ...inputsFormColumns(), + columnSchema: (props) => [ + ...inputsFormColumns(props), { type: 'divider', }, diff --git a/service-web/client/src/components/flow/node/KnowledgeNode.tsx b/service-web/client/src/components/flow/node/KnowledgeNode.tsx index 3f79dd2..b83cbe1 100644 --- a/service-web/client/src/components/flow/node/KnowledgeNode.tsx +++ b/service-web/client/src/components/flow/node/KnowledgeNode.tsx @@ -8,8 +8,8 @@ const KnowledgeNode = (props: NodeProps) => AmisNode({ type: 'normal', defaultNodeName: '知识库', defaultNodeDescription: '查询知识库获取外部知识', - columnSchema: [ - ...inputsFormColumns(), + columnSchema: (props) => [ + ...inputsFormColumns(props), { type: 'divider', }, diff --git a/service-web/client/src/components/flow/node/LlmNode.tsx b/service-web/client/src/components/flow/node/LlmNode.tsx index ca767aa..4828aa8 100644 --- a/service-web/client/src/components/flow/node/LlmNode.tsx +++ b/service-web/client/src/components/flow/node/LlmNode.tsx @@ -22,8 +22,8 @@ const LlmNode = (props: NodeProps) => AmisNode({
: <> }, - columnSchema: [ - ...inputsFormColumns(), + columnSchema: (props) => [ + ...inputsFormColumns(props), { type: 'divider', }, diff --git a/service-web/client/src/components/flow/node/OutputNode.tsx b/service-web/client/src/components/flow/node/OutputNode.tsx index b41c96f..7b4c789 100644 --- a/service-web/client/src/components/flow/node/OutputNode.tsx +++ b/service-web/client/src/components/flow/node/OutputNode.tsx @@ -7,7 +7,7 @@ const OutputNode = (props: NodeProps) => AmisNode({ type: 'end', defaultNodeName: '输出节点', defaultNodeDescription: '定义输出变量', - columnSchema: outputsFormColumns(true), + columnSchema: () => outputsFormColumns(true), }) export default React.memo(OutputNode) \ No newline at end of file diff --git a/service-web/client/src/components/flow/node/SwitchNode.tsx b/service-web/client/src/components/flow/node/SwitchNode.tsx index 8f19029..9e78ec1 100644 --- a/service-web/client/src/components/flow/node/SwitchNode.tsx +++ b/service-web/client/src/components/flow/node/SwitchNode.tsx @@ -20,7 +20,7 @@ const SwitchNode = (props: NodeProps) => AmisNode({ type: 'normal', defaultNodeName: '分支节点', defaultNodeDescription: '根据不同的情况前往不同的分支', - columnSchema: [], + columnSchema: () => [], // @ts-ignore extraNodeDescription: nodeData => { return ( diff --git a/service-web/client/src/components/flow/store/DataStore.ts b/service-web/client/src/components/flow/store/DataStore.ts index 390e581..09c752e 100644 --- a/service-web/client/src/components/flow/store/DataStore.ts +++ b/service-web/client/src/components/flow/store/DataStore.ts @@ -1,12 +1,14 @@ import {create} from 'zustand/react' -export const useDataStore = create<{ +export type DataStoreState = { data: Record, getData: () => Record, setData: (data: Record) => void, getDataById: (id: string) => any, setDataById: (id: string, data: any) => void, -}>((set, get) => ({ +} + +export const useDataStore = create((set, get) => ({ data: {}, getData: () => get().data, setData: (data) => set({ diff --git a/service-web/client/src/components/flow/store/FlowStore.ts b/service-web/client/src/components/flow/store/FlowStore.ts index 5287e96..9630681 100644 --- a/service-web/client/src/components/flow/store/FlowStore.ts +++ b/service-web/client/src/components/flow/store/FlowStore.ts @@ -11,8 +11,9 @@ import { import {filter, find, isEqual} from 'licia' import {create} from 'zustand/react' -export const useFlowStore = create<{ +export type FlowStoreState = { nodes: Node[], + getNodes: () => Node[], onNodesChange: OnNodesChange, getNodeById: (id: string) => Node | undefined, addNode: (node: Node) => void, @@ -20,12 +21,16 @@ export const useFlowStore = create<{ setNodes: (nodes: Node[]) => void, edges: Edge[], + getEdges: () => Edge[], onEdgesChange: OnEdgesChange, setEdges: (edges: Edge[]) => void, onConnect: OnConnect, -}>((set, get) => ({ +} + +export const useFlowStore = create((set, get) => ({ nodes: [], + getNodes: () => get().nodes, onNodesChange: changes => { set({ nodes: applyNodeChanges(changes, get().nodes), @@ -41,6 +46,7 @@ export const useFlowStore = create<{ setNodes: nodes => set({nodes}), edges: [], + getEdges: () => get().edges, onEdgesChange: changes => { set({ edges: applyEdgeChanges(changes, get().edges), diff --git a/service-web/client/src/pages/ai/task/template/FlowTaskTemplateFlowEdit.tsx b/service-web/client/src/pages/ai/task/template/FlowTaskTemplateFlowEdit.tsx index 99c4528..3b109cb 100644 --- a/service-web/client/src/pages/ai/task/template/FlowTaskTemplateFlowEdit.tsx +++ b/service-web/client/src/pages/ai/task/template/FlowTaskTemplateFlowEdit.tsx @@ -12,6 +12,7 @@ const FlowTaskTemplateFlowEditDiv = styled.div` const FlowTaskTemplateFlowEdit: React.FC = () => { const navigate = useNavigate() const {template_id} = useParams() + // const [inputSchema, setInputSchema] = useState>>({}) const [graphData, setGraphData] = useState({nodes: [], edges: [], data: {}}) useMount(async () => { @@ -21,12 +22,14 @@ const FlowTaskTemplateFlowEdit: React.FC = () => { headers: commonInfo.authorizationHeaders } ) + // setInputSchema(data?.data?.inputSchema) setGraphData(data?.data?.flowGraph) }) return ( { await axios.post(