refactor(flowEditor): 重构节点数据结构并移除文本更新节点

- 修改基本节点、开始节点和结束节点的数据结构,增加 dataIns、dataOuts、apiIns、apiOuts 字段
- 移除文本更新节点组件和相关样式
- 更新节点类型映射和显示名称映射,删除文本更新节点相关项
master
钟良源 5 months ago
parent d2b6d8eb10
commit e49df169a5

@ -59,6 +59,7 @@ const FlowEditor: React.FC = () => {
event.dataTransfer.dropEffect = 'move'; event.dataTransfer.dropEffect = 'move';
}, []); }, []);
// 侧边栏节点实例
const onDrop = useCallback( const onDrop = useCallback(
(event: React.DragEvent) => { (event: React.DragEvent) => {
event.preventDefault(); event.preventDefault();

@ -6,8 +6,10 @@ import { useStore } from '@xyflow/react';
interface BasicNodeData { interface BasicNodeData {
title?: string; title?: string;
parameters?: { parameters?: {
inputs?: any[]; dataIns?: any[];
outputs?: any[]; dataOuts?: any[];
apiIns?: any[];
apiOuts?: any[];
}; };
showFooter?: boolean; showFooter?: boolean;

@ -6,8 +6,10 @@ import { useStore } from '@xyflow/react';
interface EndNodeData { interface EndNodeData {
title?: string; title?: string;
parameters?: { parameters?: {
inputs?: any[]; dataIns?: any[];
outputs?: any[]; dataOuts?: any[];
apiIns?: any[];
apiOuts?: any[];
}; };
showFooter?: boolean; showFooter?: boolean;

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { NodeTypes } from '@xyflow/react'; import { NodeTypes } from '@xyflow/react';
import TextUpdaterNode from './textUpdateNode/TextUpdaterNode';
import StartNode from './startNode/StartNode'; import StartNode from './startNode/StartNode';
import EndNode from './endNode/EndNode'; import EndNode from './endNode/EndNode';
import DraggableNode from './draggableNode/DraggableNode'; import DraggableNode from './draggableNode/DraggableNode';
@ -8,7 +7,6 @@ import BasicNode from './basicNode/BasicNode';
// 定义所有可用的节点类型 // 定义所有可用的节点类型
export const nodeTypes: NodeTypes = { export const nodeTypes: NodeTypes = {
textUpdater: TextUpdaterNode,
start: StartNode, start: StartNode,
end: EndNode, end: EndNode,
draggable: DraggableNode, draggable: DraggableNode,
@ -17,7 +15,6 @@ export const nodeTypes: NodeTypes = {
// 节点类型映射,用于创建节点时的类型查找 // 节点类型映射,用于创建节点时的类型查找
export const nodeTypeMap: Record<string, string> = { export const nodeTypeMap: Record<string, string> = {
'textUpdater': 'textUpdater',
'start': 'start', 'start': 'start',
'end': 'end', 'end': 'end',
'draggable': 'draggable', 'draggable': 'draggable',
@ -26,7 +23,6 @@ export const nodeTypeMap: Record<string, string> = {
// 节点显示名称映射 // 节点显示名称映射
export const nodeTypeNameMap: Record<string, string> = { export const nodeTypeNameMap: Record<string, string> = {
'textUpdater': '文本更新节点',
'start': '开始节点', 'start': '开始节点',
'end': '结束节点', 'end': '结束节点',
'draggable': '任务节点', 'draggable': '任务节点',
@ -41,10 +37,10 @@ export const registerNodeType = (
) => { ) => {
// 在nodeTypes中注册节点组件 // 在nodeTypes中注册节点组件
(nodeTypes as any)[type] = component; (nodeTypes as any)[type] = component;
// 在nodeTypeMap中添加类型映射 // 在nodeTypeMap中添加类型映射
nodeTypeMap[type] = type; nodeTypeMap[type] = type;
// 在nodeTypeNameMap中添加显示名称 // 在nodeTypeNameMap中添加显示名称
nodeTypeNameMap[type] = displayName || type; nodeTypeNameMap[type] = displayName || type;
}; };

@ -6,8 +6,10 @@ import { useStore } from '@xyflow/react';
interface StartNodeData { interface StartNodeData {
title?: string; title?: string;
parameters?: { parameters?: {
inputs?: any[]; dataIns?: any[];
outputs?: any[]; dataOuts?: any[];
apiIns?: any[];
apiOuts?: any[];
}; };
showFooter?: boolean; showFooter?: boolean;

@ -1,8 +0,0 @@
.text-updater-node {
//width: 150px;
//height: 80px;
padding: 20px;
border-radius: 15px;
border: 1px solid #cccccc;
background-color: #fff;
}

@ -1,30 +0,0 @@
import React, { useCallback } from 'react';
import style from './TextUpdaterNode.module.less';
import { Handle, NodeProps, Position } from '@xyflow/react';
interface TextUpdaterNodeData {
data?: string;
id?: string;
}
const TextUpdaterNode: React.FC<NodeProps> = (props) => {
const onChange = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
console.log(evt.target.value);
}, []);
return (
<div className={style['text-updater-node']}>
<div>
<label htmlFor="text">Text:</label>
<input id="text" name="text" onChange={onChange} className="nodrag" />
</div>
<Handle type="target" position={Position.Left} id="a" />
<Handle type="target" position={Position.Bottom} id="a1" />
<Handle type="target" position={Position.Top} id="a2" />
<Handle type="source" position={Position.Right} id="b" />
<Handle type="source" position={Position.Right} style={{ top: 10 }} id="b1" />
<Handle type="source" position={Position.Right} style={{ top: 20 }} id="b2" />
</div>
);
};
export default TextUpdaterNode;
Loading…
Cancel
Save