feat(component-env): 支持环境编辑与测试功能

- 添加 record 属性以支持表单数据回显
- 实现环境测试接口及调用逻辑
- 更新环境配置模态框交互流程
- 优化环境删除确认逻辑
- 移除调试用 console 日志输出

src/api/componentDeployEnv.ts

@@ -22,3 +22,8 @@ export function deleteEnvConfig(id: string) {
 export function downloadEnvConfigFile(id: string) {
   return axios.post(`${urlPrefix}/componentDeployEnv/download`, { id });
 }
+
+// 环境测试
+export function testEnv(id: string) {
+  return axios.get(`${urlPrefix}/componentDeployEnv/check?id=${id}`);
+}

src/pages/componentDevelopment/componentEnv/addModal.tsx

@@ -18,20 +18,28 @@ interface AddModalProps {
   visible: boolean;
   envType: EnvTypeOption[];
   setVisible: (visible: boolean) => void;
-  onOk?: () => void;
+  onOk?: (value) => void;
+  record?: any; // 添加record属性用于接收外部传入的数据
 }
 
-const AddModal = ({ visible, envType, setVisible, onOk }: AddModalProps) => {
+const AddModal = ({ visible, envType, setVisible, onOk, record }: AddModalProps) => {
-  const [currentStep, setCurrentStep] = useState(2);
+  const [currentStep, setCurrentStep] = useState(1);
   const [envTypeOptions, setEnvTypeOptions] = useState<EnvTypeOption[]>([]);
   const [confirmLoading, setConfirmLoading] = useState(false);
-  const [currentEnvData,setCurrentEnvData] = useState<any>({});
+  const [currentEnvData, setCurrentEnvData] = useState<any>({});
   const formRef = useRef<FormEditorInstance>(null);
 
   useEffect(() => {
     if (envType.length > 0) setEnvTypeOptions(envType);
   }, [envType]);
 
+  // 当组件接收到record参数时，初始化数据并跳转到第二步
+  useEffect(() => {
+    if (record && Object.keys(record).length > 0) setCurrentStep(2);
+    else setCurrentStep(1);
+    setCurrentEnvData(record);
+  }, [record]);
+
   const handleOk = () => {
     // 当前步骤为1时，触发表单提交
     if (currentStep === 1) {
@@ -39,8 +47,7 @@ const AddModal = ({ visible, envType, setVisible, onOk }: AddModalProps) => {
       return;
     }
 
-    // 其他步骤的确认逻辑可以在这里添加
+    setVisible(false);
-    console.log('ok');
   };
 
   const handleCancel = () => {
@@ -50,8 +57,8 @@ const AddModal = ({ visible, envType, setVisible, onOk }: AddModalProps) => {
 
   const handleStepOneSuccess = (value) => {
     setCurrentStep(2);
-    setCurrentEnvData(value)
+    setCurrentEnvData(value);
-    onOk && onOk();
+    onOk && onOk(value);
   };
 
   // 返回第一步的处理函数
@@ -93,6 +100,7 @@ const AddModal = ({ visible, envType, setVisible, onOk }: AddModalProps) => {
       {currentStep === 1 && (
         <FormEditor
           ref={formRef}
+          record={record}
           envTypeOptions={envTypeOptions}
           setVisible={setVisible}
           setConfirmLoading={setConfirmLoading}

src/pages/componentDevelopment/componentEnv/envExtra.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button, Space } from '@arco-design/web-react';
-import { downloadEnvConfigFile } from '@/api/componentDeployEnv';
+import { downloadEnvConfigFile, testEnv } from '@/api/componentDeployEnv';
 
 const EnvExtra = ({ currentEnvData }) => {
+  const [testLoading, setTestLoading] = useState(false);
+
   // 模拟下载配置证书文件
   const handleDownloadConfig = () => {
     // 这里可以添加实际的下载逻辑
-    console.log('下载配置证书文件');
     downloadEnvConfigFile(currentEnvData.id);
   };
 
@@ -17,9 +18,11 @@ const EnvExtra = ({ currentEnvData }) => {
   };
 
   // 模拟点击测试环境可用性
-  const handleTestAvailability = () => {
+  const handleTestAvailability = async () => {
-    console.log('点击测试环境可用性');
+    setTestLoading(true);
-    // 这里可以添加实际的环境可用性测试逻辑
+    const res = await testEnv(currentEnvData.id);
+    console.log('res:', res);
+    setTestLoading(false);
   };
 
   return (
@@ -54,6 +57,7 @@ const EnvExtra = ({ currentEnvData }) => {
             type="outline"
             onClick={handleTestAvailability}
             style={{ marginLeft: 16 }}
+            loading={testLoading}
           >
             点击测试
           </Button>

src/pages/componentDevelopment/componentEnv/formEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
 import { Form, Grid, Input, Message, Select } from '@arco-design/web-react';
 import { submitEnvConfig } from '@/api/componentDeployEnv';
 
@@ -8,6 +8,7 @@ const TextArea = Input.TextArea;
 
 // 定义组件 Props 类型
 interface FormEditorProps {
+  record: any;
   envTypeOptions: { id: string | number; classifyType: string; classifyName: string, dictKey: string }[];
   setVisible: (visible: boolean) => void;
   onOk?: () => void;
@@ -21,6 +22,7 @@ export interface FormEditorInstance {
 }
 
 const FormEditor = forwardRef<FormEditorInstance, FormEditorProps>(({
+                                                                      record,
                                                                       envTypeOptions,
                                                                       setConfirmLoading,
                                                                       onSuccess
@@ -68,6 +70,11 @@ const FormEditor = forwardRef<FormEditorInstance, FormEditorProps>(({
     }
   };
 
+  useEffect(() => {
+    if (record) form.setFieldsValue(record);
+    else form.resetFields();
+  }, [record]);
+
   return (
     <Form form={form} layout="vertical">
       <Grid.Row gutter={8}>

src/pages/componentDevelopment/componentEnv/index.tsx

@@ -4,7 +4,7 @@ import { Button, Input, Space, Select, Divider, Table, TableColumnProps, Message
 import { getComponentClassify } from '@/api/componentClassify';
 import { IconSearch } from '@arco-design/web-react/icon';
 import AddModal from './addModal';
-import { getEnvConfigList, deleteEnvConfig } from '@/api/componentDeployEnv';
+import { getEnvConfigList, deleteEnvConfig, testEnv } from '@/api/componentDeployEnv';
 
 const Option = Select.Option;
 
@@ -13,6 +13,7 @@ const ComponentEnv = () => {
   const [architectureType, setArchitectureType] = useState(['x86_64', 'aarch64']); // 结构类型
   const [visible, setVisible] = useState(false);
   const [data, setData] = useState([]);
+  const [editingRecord, setEditingRecord] = useState(null);
 
   const columns: TableColumnProps[] = [
     {
@@ -58,17 +59,24 @@ const ComponentEnv = () => {
   ];
 
   // 环境测试处理函数
-  const handleTestEnv = (record: any) => {
+  const handleTestEnv = async (record: any) => {
     Message.info(`正在测试环境 ${record.name}...`);
-    // 这里可以添加实际的环境测试逻辑
+    const res: any = await testEnv(record.id);
-    console.log('测试环境:', record);
+    if (res.code === 200) {
+      Message.success(`环境 ${record.name} 测试成功`);
+    }
+    else {
+      Message.error(`环境 ${record.name} 测试失败: ${res.message}`);
+    }
   };
 
   // 环境配置处理函数
   const handleConfigEnv = (record: any) => {
-    Message.info(`配置环境 ${record.name}`);
+    // 设置编辑记录
-    // 这里可以添加环境配置逻辑，比如打开配置模态框
+    setEditingRecord(record);
-    console.log('配置环境:', record);
+
+    // 打开模态框
+    setVisible(true);
   };
 
   // 删除环境处理函数
@@ -78,7 +86,7 @@ const ComponentEnv = () => {
       content: (
         <div>
           <p>删除环境后，组件实例将无法继续部署到该环境下。</p>
-          <p style={{ color: 'red', fontWeight: 'bold' }}>确认删除环境 {record.name} IP: {record.ip}？</p>
+          <p style={{ color: 'red', fontWeight: 'bold' }}>确认删除环境 {record.name}？</p>
           <p>请输入环境名称 <strong>{record.name}</strong> 以确认删除:</p>
           <Input placeholder={`请输入 ${record.name}`} id="confirm-env-name" />
         </div>
@@ -89,7 +97,6 @@ const ComponentEnv = () => {
         const confirmInput = document.getElementById('confirm-env-name') as HTMLInputElement;
         if (!confirmInput || confirmInput.value !== record.name) {
           Message.error('环境名称输入不匹配，请重新输入');
-          // 阻止关闭确认框
           return Promise.reject();
         }
 
@@ -169,7 +176,10 @@ const ComponentEnv = () => {
             <Button
               type="primary"
               style={{ borderRadius: 4 }}
-              onClick={() => setVisible(true)}
+              onClick={() => {
+                setEditingRecord(null);
+                setVisible(true);
+              }}
             >
               + 新增
             </Button>
@@ -183,14 +193,14 @@ const ComponentEnv = () => {
         visible={visible}
         envType={envType}
         setVisible={setVisible}
-        onOk={() => {
+        onOk={(value) => {
-          console.log('Add component env');
+          setEditingRecord(value);
           getEnvList(); // 新增完成后刷新列表
         }}
+        record={editingRecord}
       />
     </div>
   );
 };
 
 export default ComponentEnv;
-