feat(flowEditor): 添加节点标题编辑功能

- 在事件监听编辑器中引入表单组件用于标题输入
- 在事件发送编辑器中引入表单组件用于标题输入
- 实现标题字段的双向数据绑定更新逻辑
- 使用垂直布局表单提升界面可读性
- 统一两个编辑器的标题编辑样式与交互方式
master
钟良源 4 months ago
parent b80414785a
commit f643ba4085

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { NodeEditorProps } from '@/components/FlowEditor/nodeEditors';
import { Typography } from '@arco-design/web-react';
import { Form, Input, Typography } from '@arco-design/web-react';
import { IconUnorderedList } from '@arco-design/web-react/icon';
import EventSelect from './EventSelect';
import { useDispatch, useSelector } from 'react-redux';
@ -22,6 +22,14 @@ const EventListenEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData
return (
<>
<Form layout="vertical">
<Form.Item label="节点标题">
<Input
value={nodeData.title || ''}
onChange={(value) => updateNodeData('title', value)}
/>
</Form.Item>
</Form>
<Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} /></Typography.Title>
<EventSelect
nodeData={nodeData}

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { NodeEditorProps } from '@/components/FlowEditor/nodeEditors';
import { Typography } from '@arco-design/web-react';
import { Typography, Form, Input } from '@arco-design/web-react';
import { IconUnorderedList } from '@arco-design/web-react/icon';
import { useDispatch, useSelector } from 'react-redux';
import EventSelect from '@/components/FlowEditor/nodeEditors/components/EventSelect';
@ -22,6 +22,14 @@ const EventSendEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }
return (
<>
<Form layout="vertical">
<Form.Item label="节点标题">
<Input
value={nodeData.title || ''}
onChange={(value) => updateNodeData('title', value)}
/>
</Form.Item>
</Form>
<Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} /></Typography.Title>
<EventSelect
nodeData={nodeData}

Loading…
Cancel
Save