feat(component-env): 添加按钮加载状态并优化环境操作流程

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={() => {
+            <Button
+              type="text"
+              status="danger"
+              loading={loadingActions.id === record.id && loadingActions.action === 'stop'}
+              onClick={() => {
                 handleStop(record.id);
-            }}>停止</Button>
+              }}
+            >
+              停止
+            </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,12 +171,16 @@ 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}...`);
+    try {
       const res: any = await testEnv(record.id);
       loadingMessage();
       if (res.code === 200 && res.data) {
@@ -169,6 +197,9 @@ const ComponentEnv = () => {
           content: `环境 【${record.name}】 测试失败: ${res.message}`
         });
       }
+    } finally {
+      setLoadingActions({ id: null, action: null });
+    }
   };
 
   // 环境配置处理函数