diff --git a/src/pages/componentDevelopment/componentDeployment/editInstanceModal.tsx b/src/pages/componentDevelopment/componentDeployment/editInstanceModal.tsx new file mode 100644 index 0000000..2483265 --- /dev/null +++ b/src/pages/componentDevelopment/componentDeployment/editInstanceModal.tsx @@ -0,0 +1,97 @@ +import React, { useEffect } from 'react'; +import { Modal, Form, Input, Upload, Button } from '@arco-design/web-react'; +import styles from './style/editInstanceModal.module.less'; + +const FormItem = Form.Item; +const { TextArea } = Input; + +interface EditInstanceModalProps { + visible: boolean; + instanceData: any; + onCancel: () => void; + onOk: (values: any) => void; +} + +const EditInstanceModal: React.FC = ({ + visible, + instanceData, + onCancel, + onOk + }) => { + const [form] = Form.useForm(); + + // 当 instanceData 变化时,更新表单数据 + useEffect(() => { + if (instanceData && visible) { + form.setFieldsValue({ + name: instanceData.name || '', + desc: instanceData.desc || '' + }); + } + }, [instanceData, visible, form]); + + // 处理确定 + const handleOk = async () => { + try { + const values = await form.validate(); + onOk(values); + } catch (error) { + console.error('表单验证失败:', error); + } + }; + + // 处理取消 + const handleCancel = () => { + form.resetFields(); + onCancel(); + }; + + return ( + +
+ + + + + +