feat(componentEnv):优化环境测试功能与用户体验

src/pages/componentDevelopment/componentEnv/addModal.tsx

@@ -38,7 +38,7 @@ const AddModal = ({ visible, envType, setVisible, onOk, record }: AddModalProps)
     if (record && Object.keys(record).length > 0) setCurrentStep(2);
     else setCurrentStep(1);
     setCurrentEnvData(record);
-  }, [record]);
+  }, [record, visible]);
 
   const handleOk = () => {
     // 当前步骤为1时，触发表单提交
@@ -51,7 +51,6 @@ const AddModal = ({ visible, envType, setVisible, onOk, record }: AddModalProps)
   };
 
   const handleCancel = () => {
-    setCurrentStep(1);
     setVisible(false);
   };
 

src/pages/componentDevelopment/componentEnv/envExtra.tsx

@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
-import { Button, Space, Modal } from '@arco-design/web-react';
+import React, { useEffect, useState } from 'react';
+import { Button, Space, Modal, Message, Popover } from '@arco-design/web-react';
+import { IconSync } from '@arco-design/web-react/icon';
 import { downloadEnvConfigFile, testEnv } from '@/api/componentDeployEnv';
 import ConfigTutorial from './configTutorial';
 
 const EnvExtra = ({ currentEnvData }) => {
   const [testLoading, setTestLoading] = useState(false);
   const [tutorialVisible, setTutorialVisible] = useState(false);
+  const [onceTestType, setOnceTestType] = useState(null); // 单次测试结果
 
   // 模拟下载配置证书文件
   const handleDownloadConfig = () => {
@@ -21,11 +23,24 @@ const EnvExtra = ({ currentEnvData }) => {
   // 模拟点击测试环境可用性
   const handleTestAvailability = async () => {
     setTestLoading(true);
-    const res = await testEnv(currentEnvData.id);
-    console.log('res:', res);
+    const res: any = await testEnv(currentEnvData.id);
+    if (res.code === 200 && res.data) {
+      setOnceTestType(true);
+      Message.success(`环境 ${currentEnvData.name} 测试成功`);
+    }
+    else {
+      setOnceTestType(false);
+      Message.error(`环境 ${currentEnvData.name} 测试失败: ${res.message}`);
+    }
     setTestLoading(false);
   };
 
+  useEffect(() => {
+    if (currentEnvData.available === 1) setOnceTestType(true);
+    else if (currentEnvData.available === -1) setOnceTestType(false);
+    else setOnceTestType(null);
+  }, [currentEnvData]);
+
   return (
     <>
       <div style={{ padding: '20px', borderRadius: 8 }}>
@@ -55,14 +70,55 @@ const EnvExtra = ({ currentEnvData }) => {
         <div>
           <div style={{ display: 'flex', alignItems: 'center' }}>
             <span style={{ fontSize: 14, fontWeight: 500 }}>环境可用性：</span>
-            <Button
-              type="outline"
-              onClick={handleTestAvailability}
-              style={{ marginLeft: 16 }}
-              loading={testLoading}
-            >
-              点击测试
-            </Button>
+
+            {onceTestType === null && (
+              <Button
+                type="outline"
+                onClick={handleTestAvailability}
+                style={{ marginLeft: 16 }}
+                loading={testLoading}
+              >
+                点击测试
+              </Button>
+            )}
+
+            {onceTestType && (
+              <div>
+                <span style={{ color: '#81b367' }}>环境测试通过</span>
+                <Popover
+                  content={
+                    <span>
+                      点击重新测试
+                    </span>
+                  }
+                >
+                  <IconSync style={{ fontSize: 16, color: '#5484ff', marginLeft: 5, cursor: 'pointer' }}
+                            onClick={handleTestAvailability} />
+                </Popover>
+
+              </div>
+            )}
+
+            {!onceTestType && (
+              <div>
+                <div>
+                  <span style={{ color: '#c13131', fontSize: 14 }}>环境测试失败</span>
+                  <Popover
+                    content={
+                      <span>
+                      点击重新测试
+                    </span>
+                    }
+                  >
+                    <IconSync style={{ fontSize: 16, color: '#5484ff', marginLeft: 5, cursor: 'pointer' }}
+                              onClick={handleTestAvailability} />
+                  </Popover>
+                </div>
+                <div
+                  style={{ color: '#c13131', fontSize: 12, fontWeight: 700 }}>证书配置错误,请根据教程文档检查配置内容
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>

src/pages/componentDevelopment/componentEnv/index.tsx

@@ -1,6 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import styles from './style/index.module.less';
-import { Button, Input, Space, Select, Divider, Table, TableColumnProps, Message, Modal } from '@arco-design/web-react';
+import {
+  Button,
+  Input,
+  Space,
+  Select,
+  Divider,
+  Table,
+  TableColumnProps,
+  Message,
+  Modal,
+  Notification
+} from '@arco-design/web-react';
 import { getComponentClassify } from '@/api/componentClassify';
 import { IconSearch } from '@arco-design/web-react/icon';
 import AddModal from './addModal';
@@ -65,11 +76,20 @@ const ComponentEnv = () => {
   const handleTestEnv = async (record: any) => {
     Message.info(`正在测试环境 ${record.name}...`);
     const res: any = await testEnv(record.id);
+    Message.clear();
     if (res.code === 200) {
-      Message.success(`环境 ${record.name} 测试成功`);
+      Notification.success({
+        closable: false,
+        title: '测试成功',
+        content: `环境 【${record.name}】 测试成功`
+      });
     }
     else {
-      Message.error(`环境 ${record.name} 测试失败: ${res.message}`);
+      Notification.error({
+        closable: false,
+        title: '测试失败',
+        content: `环境 【${record.name}】 测试失败: ${res.message}`
+      });
     }
   };