feat(ide): 添加运行时数据展示组件

src/pages/ideContainer/components/runTimeData.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import { Tabs, Table, TableColumnProps, Input } from '@arco-design/web-react';
+import { IconCheckCircleFill, IconLoading, IconCloseCircleFill } from '@arco-design/web-react/icon';
+import { formatSeconds } from '@/utils/common';
+
+const TabPane = Tabs.TabPane;
+
+const columns: TableColumnProps[] = [
+  {
+    title: '节点',
+    dataIndex: 'name'
+  },
+  {
+    title: '时间',
+    render: (_: any, record) => (
+      <>
+        <span>开始{dayjs(record.startTime).format('YYYY-MM-DD HH:mm:ss')}</span>
+        <br></br>
+        {record.endTime > 0 && <span>结束{dayjs(record.endTime).format('YYYY-MM-DD HH:mm:ss')}</span>}
+      </>
+    )
+  },
+  {
+    title: '耗时',
+    dataIndex: 'duration',
+    render: (_: any, record) => (
+      record.duration > 1000 ?
+        <span>{formatSeconds((record.duration / 1000).toString())}</span> :
+        <span>{record.duration}毫秒</span>
+    )
+  },
+  {
+    title: '状态',
+    dataIndex: 'state',
+    render: (_: any, record) => (
+      <>
+        {record.state === 1 && <IconCheckCircleFill fontSize={30} style={{ color: 'rgb(var(--green-6))' }} />}
+        {record.state === 0 && <IconLoading fontSize={30} style={{ color: 'rgb(var(--arcoblue-4))' }} />}
+        {record.state === -1 && <IconCloseCircleFill fontSize={30} style={{ color: 'rgb(var(--red-6))' }} />}
+      </>
+    )
+  },
+  {
+    title: '输入参数',
+    dataIndex: 'input',
+    render: (_: any, record) => (
+      <span>{JSON.stringify(record.input)}</span>
+    )
+  },
+  {
+    title: '输出参数',
+    dataIndex: 'output',
+    render: (_: any, record) => (
+      <span>{JSON.stringify(record.output)}</span>
+    )
+  }
+];
+
+const RunTimeData = ({ logData }) => {
+  const [currentTab, setCurrentTab] = useState('0');
+  const [tabList, setTabList] = useState([]);
+  const [keyMap, setKeyMap] = useState({});
+  const [data, setData] = useState([]);
+
+  const onTabChange = (key) => {
+    setCurrentTab(key);
+    setData(keyMap[key]);
+  };
+
+  useEffect(() => {
+    const tempMap = {};
+    const list = logData.map((item, index) => {
+      tempMap[index] = item.nodes;
+      return {
+        key: index,
+        title: item.parent
+      };
+    });
+    setKeyMap(tempMap);
+    setTabList(list);
+  }, [logData]);
+
+  useEffect(() => {
+    if (tabList.length > 0) {
+      setData(keyMap[0]);
+      onTabChange(0); // 默认选中第一个
+    }
+  }, [tabList]);
+
+  return (
+    <>
+      <Tabs type="card" onChange={onTabChange} activeTab={currentTab}>
+        {tabList.map((item) => (<TabPane key={item.key} title={item.title}></TabPane>))}
+      </Tabs>
+      <Table columns={columns} data={data} />
+    </>
+  );
+};
+
+export default RunTimeData;

src/pages/ideContainer/logBar.tsx

@@ -3,7 +3,8 @@ import { ResizeBox, Tabs } from '@arco-design/web-react';
 import styles from './style/logBar.module.less';
 import { updateLogBarStatus } from '@/store/ideContainer';
 import { useSelector, useDispatch } from 'react-redux';
-import { getNodeData } from '@/api/appIns'; // 添加导入
+import { getNodeData } from '@/api/appIns';
+import RunTimeData from './components/runTimeData';
 
 const TabPane = Tabs.TabPane;
 
@@ -50,15 +51,14 @@ const LogBar: React.FC<LogBarProps> = () => {
   const [tabs] = useState(data);
   const [activeTab, setActiveTab] = useState('1');
   const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用 ResizeBox 容器
-  const { logBarStatus, appRuntimeData } = useSelector((state: any) => state.ideContainer);
-  const dispatch = useDispatch();
   const [validationLogs, setValidationLogs] = useState<LogMessage[]>([]);
   const [runtimeLogs, setRuntimeLogs] = useState<LogMessage[]>([]); // 添加运行时日志状态
   const [logContainerHeight, setLogContainerHeight] = useState('250px'); // 添加日志容器高度状态
-  const { currentAppData } = useSelector((state: any) => state.ideContainer);
+  const [runtimeData, setRuntimeData] = useState<RuntimeData>({});  // 添加运行数据状态
-  // 添加运行数据状态
-  const [runtimeData, setRuntimeData] = useState<RuntimeData>({});
   const [loading, setLoading] = useState(false);
+  const { logBarStatus, appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer);
+
+  const dispatch = useDispatch();
 
   // 处理 Tab 点击事件
   const handleTabClick = (key: string) => {
@@ -113,7 +113,7 @@ const LogBar: React.FC<LogBarProps> = () => {
         setValidationLogs(prev => [...prev, newLog]);
 
         // 自动切换到校验日志tab并展开logBar
-        setActiveTab('2');
+        // setActiveTab('2');
         dispatch(updateLogBarStatus(true));
       }
       // 如果是运行时日志
@@ -128,7 +128,6 @@ const LogBar: React.FC<LogBarProps> = () => {
         setRuntimeLogs(prev => [...prev, newLog]);
 
         // 自动切换到运行日志tab并展开logBar
-        setActiveTab('1');
         dispatch(updateLogBarStatus(true));
 
         // 同时将日志添加到当前应用的运行日志中
@@ -159,11 +158,11 @@ const LogBar: React.FC<LogBarProps> = () => {
     let intervalId: NodeJS.Timeout | null = null;
 
     // 只有在当前tab是运行数据且有当前应用时才开始轮询
-    if (activeTab === '3' && currentAppData?.id && logBarStatus) {
+    if (activeTab === '3' && currentAppData?.id && logBarStatus && appRuntimeData[currentAppData.id]?.runId) {
       const fetchRuntimeData = async () => {
         try {
           setLoading(true);
-          const response = await getNodeData(currentAppData.id);
+          const response = await getNodeData(appRuntimeData[currentAppData.id].runId);
           setRuntimeData(prev => ({
             ...prev,
             [currentAppData.id]: response.data
@@ -245,17 +244,10 @@ const LogBar: React.FC<LogBarProps> = () => {
 
     return (
       <div style={{ padding: '10px', height: 'calc(100% - 40px)', overflowY: 'auto' }}>
-        {loading ? (
+        {!currentAppDataContent ? (
-          <p>加载中...</p>
-        ) : !currentAppData?.id ? (
-          <p>请选择应用</p>
-        ) : !currentAppDataContent ? (
           <p>暂无运行数据</p>
         ) : (
-          <div>
+          <RunTimeData logData={currentAppDataContent} />
-            <h3>应用: {currentAppData.name}</h3>
-            <pre>{JSON.stringify(currentAppDataContent, null, 2)}</pre>
-          </div>
         )}
       </div>
     );