From e47893e31983d99bf72482275b26dcf78857d077 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Fri, 12 Dec 2025 11:41:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(component-env):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=8A=A0=E8=BD=BD=E7=8A=B6=E6=80=81=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=8E=AF=E5=A2=83=E6=93=8D=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componentEnv/index.tsx                    | 71 +++++++++++++------
 1 file changed, 51 insertions(+), 20 deletions(-)

diff --git a/src/pages/componentDevelopment/componentEnv/index.tsx b/src/pages/componentDevelopment/componentEnv/index.tsx
index 32521d8..8dc1bf6 100644
--- a/src/pages/componentDevelopment/componentEnv/index.tsx
+++ b/src/pages/componentDevelopment/componentEnv/index.tsx
@@ -33,6 +33,7 @@ const ComponentEnv = () => {
   const [selectedArch, setSelectedArch] = useState(null); // 选中的架构类型
   const [searchText, setSearchText] = useState(''); // 搜索文本
   const [addItem, setAddItem] = useState(null); // 点击环境配置按钮时记录当前信息
+  const [loadingActions, setLoadingActions] = useState<{ id: number | null; action: string | null }>({ id: null, action: null }); // 按钮loading状态
 
   const columns: TableColumnProps[] = [
     {
@@ -99,14 +100,33 @@ const ComponentEnv = () => {
             }}>容器配置</Button>
           )}
           {record.isEnable === 'RUNNING' && (
-            <Button type="text" status="danger" onClick={() => {
-              handleStop(record.id);
-            }}>停止</Button>
+            <Button
+              type="text"
+              status="danger"
+              loading={loadingActions.id === record.id && loadingActions.action === 'stop'}
+              onClick={() => {
+                handleStop(record.id);
+              }}
+            >
+              停止
+            </Button>
           )}
           {record.isEnable === 'STOPPED' && (
-            <Button type="text" onClick={() => handleStart(record.id)}>启动</Button>
+            <Button
+              type="text"
+              loading={loadingActions.id === record.id && loadingActions.action === 'start'}
+              onClick={() => handleStart(record.id)}
+            >
+              启动
+            </Button>
           )}
-          <Button type="text" onClick={() => handleTestEnv(record)}>环境测试</Button>
+          <Button
+            type="text"
+            loading={loadingActions.id === record.id && loadingActions.action === 'test'}
+            onClick={() => handleTestEnv(record)}
+          >
+            环境测试
+          </Button>
           <Button type="text" onClick={() => handleConfigEnv(record)}>环境配置</Button>
           <Button type="text" status="danger" onClick={() => handleDeleteEnv(record)}>删除</Button>
         </Space>
@@ -115,6 +135,7 @@ const ComponentEnv = () => {
   ];
 
   const handleStop = async (id) => {
+    setLoadingActions({ id, action: 'stop' });
     const loadingMessage = Message.loading('正在停止容器，请稍候...');
     try {
       const res: any = await stopContainer(id);
@@ -129,10 +150,13 @@ const ComponentEnv = () => {
     } catch (error) {
       loadingMessage();
       Message.error('停止失败: ' + error.message);
+    } finally {
+      setLoadingActions({ id: null, action: null });
     }
   };
 
   const handleStart = async (id) => {
+    setLoadingActions({ id, action: 'start' });
     const loadingMessage = Message.loading('正在启动容器，请稍候...');
     try {
       const res: any = await startContainer(id);
@@ -147,27 +171,34 @@ const ComponentEnv = () => {
     } catch (error) {
       loadingMessage();
       Message.error('启动失败: ' + error.message);
+    } finally {
+      setLoadingActions({ id: null, action: null });
     }
   };
 
   // 环境测试处理函数
   const handleTestEnv = async (record: any) => {
+    setLoadingActions({ id: record.id, action: 'test' });
     const loadingMessage = Message.loading(`正在测试环境 ${record.name}...`);
-    const res: any = await testEnv(record.id);
-    loadingMessage();
-    if (res.code === 200 && res.data) {
-      Notification.success({
-        closable: false,
-        title: '测试成功',
-        content: `环境 【${record.name}】 测试成功`
-      });
-    }
-    else {
-      Notification.error({
-        closable: false,
-        title: '测试失败',
-        content: `环境 【${record.name}】 测试失败: ${res.message}`
-      });
+    try {
+      const res: any = await testEnv(record.id);
+      loadingMessage();
+      if (res.code === 200 && res.data) {
+        Notification.success({
+          closable: false,
+          title: '测试成功',
+          content: `环境 【${record.name}】 测试成功`
+        });
+      }
+      else {
+        Notification.error({
+          closable: false,
+          title: '测试失败',
+          content: `环境 【${record.name}】 测试失败: ${res.message}`
+        });
+      }
+    } finally {
+      setLoadingActions({ id: null, action: null });
     }
   };