feat(component):优化组件接口设计弹窗功能

src/pages/componentDevelopment/componentList/addApiModal.tsx

@@ -6,7 +6,15 @@ import { updateComponentDesign } from '@/api/componentDevelopProcess';
 const FormItem = Form.Item;
 const TextArea = Input.TextArea;
 
-const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesignData, onUpdateComponentDesign, onCancel, onOk }) => {
+const AddApiModal = ({
+                       visible,
+                       baseInfo,
+                       componentDesignProgress,
+                       componentDesignData,
+                       onUpdateComponentDesign,
+                       onCancel,
+                       onOk
+                     }) => {
   const [form] = Form.useForm();
   const [parametersData, setParametersData] = useState([]);
   const [responsesData, setResponsesData] = useState([]);
@@ -27,6 +35,9 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
           ...param
         })));
       }
+      else {
+        setParametersData([]);
+      }
 
       // 设置响应表格数据
       if (componentDesignProgress.responses && Array.isArray(componentDesignProgress.responses)) {
@@ -35,6 +46,9 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
           ...response
         })));
       }
+      else {
+        setResponsesData([]);
+      }
     }
     else if (visible) {
       // 重置表单和表格数据
@@ -48,7 +62,7 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
     try {
       await form.validate();
       const formData = form.getFields();
-      
+
       // 构造要提交的数据
       const params = {
         baseInfo
@@ -69,9 +83,10 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
           }
           return item;
         });
-        
+
         params['operates'] = updatedOperates;
-      } else if (componentDesignData && Array.isArray(componentDesignData)) {
+      }
+      else if (componentDesignData && Array.isArray(componentDesignData)) {
         // 新增模式，将新记录添加到现有数据中
         const newOperate = {
           ...formData,
@@ -79,9 +94,10 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
           parameters: parametersData,
           responses: responsesData
         };
-        
+
         params['operates'] = [...componentDesignData, newOperate];
-      } else {
+      }
+      else {
         // 没有现有数据时，创建包含单个元素的数组
         params['operates'] = [{
           ...formData,
@@ -90,7 +106,7 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
           responses: responsesData
         }];
       }
-      
+
       const res: any = await updateComponentDesign(params);
 
       if (res.code === 200) {
@@ -137,10 +153,16 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
           <TextArea placeholder="请输入描述" />
         </FormItem>
         <FormItem label="输入参数" field="parameters">
-          <EditableTable onDataUpdate={setParametersData} />
+          <EditableTable
+            onDataUpdate={setParametersData}
+            initialData={componentDesignProgress?.parameters || []}
+          />
         </FormItem>
         <FormItem label="输出参数" field="responses">
-          <EditableTable onDataUpdate={setResponsesData} />
+          <EditableTable
+            onDataUpdate={setResponsesData}
+            initialData={componentDesignProgress?.responses || []}
+          />
         </FormItem>
       </Form>
     </Modal>

src/pages/componentDevelopment/componentList/addComponentModal.tsx

@@ -88,7 +88,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
                 title: '确认删除',
                 content: `确定要删除接口 "${record.ident}" 吗？此操作不可恢复。`,
                 okButtonProps: { status: 'danger' },
-                onOk: () => {
+                onOk: async () => {
                   // 从 componentDesignData 中过滤掉要删除的记录
                   const updatedData = componentDesignData.filter(item => item.ident !== record.ident);
 
@@ -99,7 +99,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
                   };
 
                   // 调用接口更新数据
-                  const res: any = updateComponentDesign(params);
+                  const res: any = await updateComponentDesign(params);
                   try {
                     if (res.code === 200) {
                       Message.success('删除成功');
@@ -191,6 +191,8 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
       await form.validate();
       const formData = form.getFields();
       const params: any = {
+        ...componentData,
+        ...baseInfo,
         name: formData.name,
         projectId: formData.projectId,
         logoUrl: selectedImage,
@@ -213,10 +215,17 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
         Message.success(baseInfo ? '组件信息更新成功' : '组件信息提交完成，可继续组件接口设计');
         onReFresh();
 
+        // 最终保存成功后关闭弹窗
+        if (showSaveBtn) {
+          setVisible(false);
+          return;
+        }
+
         // 提交成功后获取组件设计数据
         if (res.data && res.data.id) {
           getComponentDesignData(res.data.id);
         }
+
       }
       else {
         Message.error(baseInfo ? '组件信息更新失败' : '组件信息提交失败');
@@ -263,6 +272,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
       });
 
       // 设置其他状态
+
       setSelectedImage(baseInfo.logoUrl || '');
       setDescription(baseInfo.desc || '');
       setShowSaveBtn(true);
@@ -277,6 +287,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
       setDescription('');
       setShowSaveBtn(false);
       setComponentDesignData([]); // 清空接口设计数据
+      setComponentData(null);
     }
   }, [baseInfo, visible, form]);
 

src/pages/componentDevelopment/componentList/editableTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button, Table, Input, Select, Modal, Message } from '@arco-design/web-react';
 
 // 定义数据类型选项
@@ -66,9 +66,21 @@ function EditableCell({ value, onChange, columnType, record, dataIndex }) {
   return <span>{value}</span>;
 }
 
-function EditableTable({ onDataUpdate }) {
+function EditableTable({ onDataUpdate, initialData = [] }) {
   const [data, setData] = useState([]);
 
+  // 当初始数据变化时，更新表格数据
+  useEffect(() => {
+    if (initialData && Array.isArray(initialData) && initialData.length > 0) {
+      // 为每个数据项添加唯一的 key
+      const dataWithKeys = initialData.map((item, index) => ({
+        key: item.key || item.id || `key_${index}`,
+        ...item
+      }));
+      setData(dataWithKeys);
+    }
+  }, [initialData]);
+
   const handleValueChange = (key, dataIndex, value) => {
     const newData = data.map(item => {
       if (item.key === key) {