feat(componentDeployment): 添加实例编辑功能

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<EditInstanceModalProps> = ({
+                                                               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 (
+    <Modal
+      title="编辑实例信息"
+      visible={visible}
+      onCancel={handleCancel}
+      onOk={handleOk}
+      style={{ width: 600 }}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        autoComplete="off"
+      >
+        <FormItem
+          label="实例名称:"
+          field="name"
+          rules={[{ required: true, message: '请输入实例名称' }]}
+        >
+          <Input placeholder="请输入实例名称" />
+        </FormItem>
+
+        <FormItem
+          label="实例描述:"
+          field="desc"
+        >
+          <TextArea
+            placeholder="请输入实例描述"
+            autoSize={{ minRows: 3, maxRows: 6 }}
+          />
+        </FormItem>
+
+        {/*<FormItem label="图标:">*/}
+        {/*  <div className={styles['upload-wrapper']}>*/}
+        {/*    <Upload*/}
+        {/*      accept="image/*"*/}
+        {/*      showUploadList={false}*/}
+        {/*    >*/}
+        {/*      <div className={styles['upload-area']}>*/}
+        {/*        <div className={styles['upload-icon']}>+</div>*/}
+        {/*      </div>*/}
+        {/*    </Upload>*/}
+        {/*  </div>*/}
+        {/*</FormItem>*/}
+      </Form>
+    </Modal>
+  );
+};
+
+export default EditInstanceModal;

src/pages/componentDevelopment/componentDeployment/listNode.tsx

@@ -23,6 +23,7 @@ import {
 } from '@/api/componentInstance';
 import { runStatusConstant, runStatusDic, runTypeConstant, runTypeDic } from '@/const/isdp/componentDeploy';
 import dayjs from 'dayjs';
+import EditInstanceModal from './editInstanceModal';
 
 const { RangePicker } = DatePicker;
 const { TextArea } = Input;
@@ -47,6 +48,10 @@ const ListNode: React.FC<ListNodeProps> = ({ componentData }) => {
   const [logContent, setLogContent] = useState<string>('');
   const [logLoading, setLogLoading] = useState(false);
 
+  // 编辑实例 Modal 相关状态
+  const [editModalVisible, setEditModalVisible] = useState(false);
+  const [editingInstance, setEditingInstance] = useState<any>(null);
+
   // 获取实例列表
   const fetchInstanceList = async () => {
     if (!componentData?.identifier) return;
@@ -245,6 +250,33 @@ const ListNode: React.FC<ListNodeProps> = ({ componentData }) => {
     handleResetLog();
   };
 
+  // 打开编辑实例 Modal
+  const handleOpenEdit = (record: any) => {
+    setEditingInstance(record);
+    setEditModalVisible(true);
+  };
+
+  // 处理编辑实例确定
+  const handleEditOk = async (values: any) => {
+    try {
+      // TODO: 调用更新实例接口
+      console.log('更新实例信息:', { ...editingInstance, ...values });
+      Message.success('更新成功');
+      setEditModalVisible(false);
+      setEditingInstance(null);
+      fetchInstanceList(); // 刷新列表
+    } catch (error) {
+      console.error('更新实例失败:', error);
+      Message.error('更新失败');
+    }
+  };
+
+  // 关闭编辑实例 Modal
+  const handleEditCancel = () => {
+    setEditModalVisible(false);
+    setEditingInstance(null);
+  };
+
   const columns: TableColumnProps[] = [
     {
       title: '#',
@@ -309,8 +341,9 @@ const ListNode: React.FC<ListNodeProps> = ({ componentData }) => {
                 刷新依赖
               </Button>
               <Button type="text" onClick={() => handleOpenLog(record)}>运行日志</Button>
-              <Button type="text">实例配置</Button>
+              <Button type="text">环境配置</Button>
               <Button type="text"
+                      onClick={() => handleOpenEdit(record)}
                       icon={<img
                         src={'/icons/editIcon.png'}
                         style={{ width: 16, height: 16, marginRight: 5, verticalAlign: 'middle' }} />}
@@ -422,6 +455,14 @@ const ListNode: React.FC<ListNodeProps> = ({ componentData }) => {
           }}
         />
       </Modal>
+
+      {/* 编辑实例信息 Modal */}
+      <EditInstanceModal
+        visible={editModalVisible}
+        instanceData={editingInstance}
+        onCancel={handleEditCancel}
+        onOk={handleEditOk}
+      />
     </>
   );
 };

src/pages/componentDevelopment/componentDeployment/style/editInstanceModal.module.less

@@ -0,0 +1,26 @@
+.upload-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.upload-area {
+  width: 180px;
+  height: 180px;
+  border: 1px dashed var(--color-border-2);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: rgb(var(--primary-6));
+  }
+}
+
+.upload-icon {
+  font-size: 48px;
+  color: var(--color-text-3);
+  line-height: 1;
+}