feat(componentDeployment): 添加组件实例启停功能

src/pages/componentDevelopment/componentDeployment/listNode.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Space, Table, TableColumnProps, Tag } from '@arco-design/web-react';
+import { Button, Space, Table, TableColumnProps, Tag, Message } from '@arco-design/web-react';
 import styles from '@/pages/componentDevelopment/componentDeployment/style/collapseList.module.less';
-import { getInstanceList } from '@/api/componentInstance';
-import { runStatusDic, runTypeConstant, runTypeDic } from '@/const/isdp/componentDeploy';
+import { getInstanceList, startInstance, stopInstance } from '@/api/componentInstance';
+import { runStatusConstant, runStatusDic, runTypeConstant, runTypeDic } from '@/const/isdp/componentDeploy';
 import dayjs from 'dayjs';
 
 interface ListNodeProps {
@@ -39,6 +39,40 @@ const ListNode: React.FC<ListNodeProps> = ({ componentData }) => {
     fetchInstanceList();
   }, [componentData]);
 
+  // 处理启动实例
+  const handleStart = async (record) => {
+    try {
+      const res: any = await startInstance(record.id);
+      if (res.code === 200) {
+        Message.success('启动成功');
+        fetchInstanceList(); // 刷新列表
+      }
+      else {
+        Message.error(res.msg || '启动失败');
+      }
+    } catch (error) {
+      console.error('启动实例失败:', error);
+      Message.error('启动失败');
+    }
+  };
+
+  // 处理停止实例
+  const handleStop = async (record) => {
+    try {
+      const res: any = await stopInstance(record.id);
+      if (res.code === 200) {
+        Message.success('停止成功');
+        fetchInstanceList(); // 刷新列表
+      }
+      else {
+        Message.error(res.msg || '停止失败');
+      }
+    } catch (error) {
+      console.error('停止实例失败:', error);
+      Message.error('停止失败');
+    }
+  };
+
   const columns: TableColumnProps[] = [
     {
       title: '#',
@@ -86,29 +120,53 @@ const ListNode: React.FC<ListNodeProps> = ({ componentData }) => {
       title: '操作',
       dataIndex: '',
       align: 'center',
-      render: (col, record, index) => (
-        <div className={styles['table-handle-box']}>
-          <Space size={20}>
-            <Button type="text">运行日志</Button>
-            <Button type="text">实例配置</Button>
-            <Button type="text"
-                    icon={<img
-                      src={'/icons/editIcon.png'}
-                      style={{ width: 16, height: 16, marginRight: 5 }} />}
-            >编辑</Button>
-            <Button type="text"
-                    icon={<img
-                      src={'/icons/powerUpIcon.png'}
-                      style={{ width: 16, height: 16, marginRight: 5 }} />}
-            >启用</Button>
-            <Button type="text"
-                    icon={<img
-                      src={'/icons/deleteIcon.png'}
-                      style={{ width: 16, height: 16, marginRight: 5 }} />}
-            >删除</Button>
-          </Space>
-        </div>
-      )
+      render: (col, record, index) => {
+        // 根据运行状态判断显示启动还是停止按钮
+        const isRunning = record.runStatus === runStatusConstant.RUN || record.runStatus === runStatusConstant.HEALTHY;
+
+        return (
+          <div className={styles['table-handle-box']}>
+            <Space size={20}>
+              <Button type="text">运行日志</Button>
+              <Button type="text">实例配置</Button>
+              <Button type="text"
+                      icon={<img
+                        src={'/icons/editIcon.png'}
+                        style={{ width: 16, height: 16, marginRight: 5, verticalAlign: 'middle' }} />}
+              >编辑</Button>
+              {isRunning ? (
+                <Button
+                  type="text"
+                  style={{ color: 'rgb(var(--danger-6))' }}
+                  icon={<img
+                    src={'/icons/powerUpIcon.png'}
+                    style={{
+                      width: 16,
+                      height: 16,
+                      marginRight: 5,
+                      verticalAlign: 'middle',
+                      filter: 'invert(27%) sepia(96%) saturate(4392%) hue-rotate(348deg) brightness(95%) contrast(95%)'
+                    }} />}
+                  onClick={() => handleStop(record)}
+                >停止</Button>
+              ) : (
+                <Button
+                  type="text"
+                  icon={<img
+                    src={'/icons/powerUpIcon.png'}
+                    style={{ width: 16, height: 16, marginRight: 5, verticalAlign: 'middle' }} />}
+                  onClick={() => handleStart(record)}
+                >启动</Button>
+              )}
+              <Button type="text"
+                      icon={<img
+                        src={'/icons/deleteIcon.png'}
+                        style={{ width: 16, height: 16, marginRight: 5, verticalAlign: 'middle' }} />}
+              >删除</Button>
+            </Space>
+          </div>
+        );
+      }
     }
   ];