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 });
}
};