You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

88 lines
3.9 KiB
TypeScript

import React from 'react';
import { NodeEditorProps } from './index';
import { Form, Input } from '@arco-design/web-react';
import ConditionEditor from './components/ConditionEditor';
import AndEditor from './components/AndEditor';
import OrEditor from './components/OrEditor';
import WaitEditor from './components/WaitEditor';
import LoopEditor from './components/LoopEditor';
import CycleEditor from './components/CycleEditor';
import EventListenEditor from './components/EventListenEditor';
import EventSendEditor from './components/EventSendEditor';
import JsonToStringEditor from './components/JsonToStringEditor';
import StringToJsonEditor from './components/StringToJsonEditor';
import JsonConvertEditor from './components/JsonConvertEditor';
import ResultEditor from './components/ResultEditor';
import ImageEditor from './components/ImageEditor';
import CodeEditor from './components/CodeEditor';
import RestEditor from './components/RestEditor';
const LocalNodeEditor: React.FC<NodeEditorProps> = ({
node,
nodeData,
updateNodeData
}) => {
// 根据LocalNode的不同类型渲染不同的编辑界面
const renderLocalNodeEditor = () => {
const localNodeType = nodeData.type || '';
switch (localNodeType) {
case 'CONDITION': // 条件选择
return <ConditionEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'AND': // 与门
return <AndEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'OR': // 或门
return <OrEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'WAIT': // 等待
return <WaitEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'LOOP_START': // 循环
case 'LOOP_END': // 循环
return <LoopEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'CYCLE': // 周期
return <CycleEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'EVENTLISTENE': // 事件接收
return <EventListenEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'EVENTSEND': // 事件发送
return <EventSendEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'JSON2STR': // JSON转字符串
return <JsonToStringEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'STR2JSON': // 字符串转JSON
return <StringToJsonEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'JSONCONVERT': // JSON封装
return <JsonConvertEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'RESULT': // 结果展示
return <ResultEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'IMAGE': // 图片展示
return <ImageEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'CODE': // 代码编辑器
return <CodeEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
case 'REST': // REST调用
return <RestEditor nodeData={nodeData} updateNodeData={updateNodeData} />;
default:
return (
<>
<Form.Item label="节点标题">
<Input
value={nodeData.title || ''}
onChange={(value) => updateNodeData('title', value)}
/>
</Form.Item>
<Form.Item label="节点描述">
<Input.TextArea
value={nodeData.description || ''}
onChange={(value) => updateNodeData('description', value)}
/>
</Form.Item>
</>
);
}
};
return (
<Form layout="vertical">
{renderLocalNodeEditor()}
</Form>
);
};
export default LocalNodeEditor;