feat(ideContainer): 添加运行数据展示功能

src/pages/ideContainer/logBar.tsx

@@ -3,6 +3,7 @@ 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'; // 添加导入
 
 const TabPane = Tabs.TabPane;
 
@@ -13,6 +14,11 @@ interface LogMessage {
   timestamp: string;
 }
 
+// 添加运行数据接口
+interface RuntimeData {
+  [appId: string]: any;
+}
+
 interface LogBarProps {
   a?: string;
 }
@@ -50,6 +56,9 @@ const LogBar: React.FC<LogBarProps> = () => {
   const [runtimeLogs, setRuntimeLogs] = useState<LogMessage[]>([]); // 添加运行时日志状态
   const [logContainerHeight, setLogContainerHeight] = useState('250px'); // 添加日志容器高度状态
   const { currentAppData } = useSelector((state: any) => state.ideContainer);
+  // 添加运行数据状态
+  const [runtimeData, setRuntimeData] = useState<RuntimeData>({});
+  const [loading, setLoading] = useState(false);
 
   // 处理 Tab 点击事件
   const handleTabClick = (key: string) => {
@@ -121,13 +130,13 @@ const LogBar: React.FC<LogBarProps> = () => {
         // 自动切换到运行日志tab并展开logBar
         setActiveTab('1');
         dispatch(updateLogBarStatus(true));
-        
+
         // 同时将日志添加到当前应用的运行日志中
         const appId = currentAppData?.id;
         if (appId) {
           dispatch({
             type: 'ideContainer/addRuntimeLog',
-            payload: { 
+            payload: {
               log: newLog,
               appId: appId
             }
@@ -145,6 +154,42 @@ const LogBar: React.FC<LogBarProps> = () => {
     };
   }, [dispatch, currentAppData?.id]);
 
+  // 实现轮询获取运行数据
+  useEffect(() => {
+    let intervalId: NodeJS.Timeout | null = null;
+
+    // 只有在当前tab是运行数据且有当前应用时才开始轮询
+    if (activeTab === '3' && currentAppData?.id && logBarStatus) {
+      const fetchRuntimeData = async () => {
+        try {
+          setLoading(true);
+          const response = await getNodeData(currentAppData.id);
+          setRuntimeData(prev => ({
+            ...prev,
+            [currentAppData.id]: response.data
+          }));
+        } catch (error) {
+          console.error('获取运行数据失败:', error);
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      // 立即获取一次数据
+      fetchRuntimeData();
+
+      // 设置轮询，每5秒获取一次数据
+      intervalId = setInterval(fetchRuntimeData, 3000);
+    }
+
+    // 清理函数，组件卸载或条件不满足时清除定时器
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [activeTab, currentAppData?.id, logBarStatus]);
+
   // 渲染校验日志内容
   const renderValidationLogs = () => {
     return (
@@ -170,10 +215,10 @@ const LogBar: React.FC<LogBarProps> = () => {
   // 渲染运行时日志内容
   const renderRuntimeLogs = () => {
     // 获取当前应用的运行日志
-    const currentAppLogs = currentAppData?.id && appRuntimeData[currentAppData.id] 
+    const currentAppLogs = currentAppData?.id && appRuntimeData[currentAppData.id]
       ? appRuntimeData[currentAppData.id].logs || []
       : [];
-      
+
     return (
       <div style={{ padding: '10px', height: 'calc(100% - 40px)', overflowY: 'auto' }}>
         {currentAppLogs.length === 0 ? (
@@ -194,6 +239,28 @@ const LogBar: React.FC<LogBarProps> = () => {
     );
   };
 
+  // 渲染运行数据内容
+  const renderRuntimeData = () => {
+    const currentAppDataContent = currentAppData?.id ? runtimeData[currentAppData.id] : null;
+
+    return (
+      <div style={{ padding: '10px', height: 'calc(100% - 40px)', overflowY: 'auto' }}>
+        {loading ? (
+          <p>加载中...</p>
+        ) : !currentAppData?.id ? (
+          <p>请选择应用</p>
+        ) : !currentAppDataContent ? (
+          <p>暂无运行数据</p>
+        ) : (
+          <div>
+            <h3>应用: {currentAppData.name}</h3>
+            <pre>{JSON.stringify(currentAppDataContent, null, 2)}</pre>
+          </div>
+        )}
+      </div>
+    );
+  };
+
   return (
     <>
       <ResizeBox
@@ -215,7 +282,8 @@ const LogBar: React.FC<LogBarProps> = () => {
             <TabPane destroyOnHide key={x.key} title={x.title}>
               {x.key === '1' ? renderRuntimeLogs() :
                 x.key === '2' ? renderValidationLogs() :
-                  x.content}
+                  x.key === '3' ? renderRuntimeData() :  // 添加运行数据渲染
+                    x.content}
             </TabPane>
           ))}
         </Tabs>