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 = () => { }}>容器配置 )} {record.isEnable === 'RUNNING' && ( - + )} {record.isEnable === 'STOPPED' && ( - + )} - + @@ -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 }); } };