feat(flowEditor): 优化节点编辑弹窗功能

- 重构节点编辑弹窗组件,增加通用性
- 添加节点标题、描述和类型等编辑字段
- 优化表单布局和样式
- 增加控制台日志输出,便于调试
master
钟良源 5 months ago
parent 4234aa75d9
commit 8e2b0638ac

@ -1,9 +1,18 @@
import React, { useState, useEffect } from 'react';
import { Node } from '@xyflow/react';
import { Modal, Button } from '@arco-design/web-react';
import { Modal, Input, Form, Select } from '@arco-design/web-react';
interface NodeData {
type?: string;
title?: string;
parameters?: any;
component?: any;
[key: string]: any;
}
interface NodeEditModalProps {
node: Node | any;
node: Node<NodeData>;
isOpen: boolean;
onSave: (data: any) => void;
onClose: () => void;
@ -15,12 +24,12 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
onSave,
onClose
}) => {
const [title, setTitle] = useState('');
const [visible, setVisible] = React.useState(false);
const [nodeData, setNodeData] = useState<NodeData>({});
const [visible, setVisible] = useState(false);
useEffect(() => {
if (node) {
setTitle(node.data?.title || '');
setNodeData(node.data || {});
}
}, [node]);
@ -32,7 +41,7 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
const handleSave = () => {
setVisible(false);
onSave({ title });
onSave(nodeData);
};
const handleClose = () => {
@ -40,66 +49,59 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
onClose();
};
// 更新节点数据的通用函数
const updateNodeData = (key: string, value: any) => {
setNodeData(prev => ({
...prev,
[key]: value
}));
};
// 根据节点类型渲染不同的内容
const renderContent = () => {
const nodeType = node?.type || 'basic';
switch (nodeType) {
case 'start':
return (
<div>
<h4></h4>
<div>
<label>:</label>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
style={{ width: '100%', padding: '8px', margin: '10px 0' }}
/>
</div>
</div>
);
case 'end':
return (
<div>
<h4></h4>
<div>
<label>:</label>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
style={{ width: '100%', padding: '8px', margin: '10px 0' }}
/>
</div>
</div>
);
case 'basic':
default:
return (
<div>
<h4></h4>
<div>
<label>:</label>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
style={{ width: '100%', padding: '8px', margin: '10px 0' }}
<Form layout="vertical">
<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>
<Form.Item label="节点类型">
<Select
value={nodeData.category || ''}
onChange={(value) => updateNodeData('category', value)}
options={[
{ label: '数据处理', value: 'data' },
{ label: '逻辑判断', value: 'logic' },
{ label: '外部接口', value: 'api' }
]}
/>
</div>
</div>
</Form.Item>
</Form>
);
}
};
return (
<Modal
title={'节点标题:' + title}
title={`编辑节点: ${nodeData.title || node?.type || '未知类型'}`}
visible={visible}
onOk={() => handleSave()}
onCancel={() => handleClose()}
onOk={handleSave}
onCancel={handleClose}
autoFocus={false}
focusLock={true}
>

@ -196,6 +196,7 @@ const FlowEditor: React.FC = () => {
// 保存节点编辑
const saveNodeEdit = useCallback((updatedData: any) => {
console.log('updatedData:', updatedData);
const updatedNodes = nodes.map((node) => {
if (node.id === editingNode?.id) {
return {

Loading…
Cancel
Save