diff --git a/src/pages/ideContainer/logBar.tsx b/src/pages/ideContainer/logBar.tsx index e233d01..a36aeef 100644 --- a/src/pages/ideContainer/logBar.tsx +++ b/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 = () => { const [runtimeLogs, setRuntimeLogs] = useState([]); // 添加运行时日志状态 const [logContainerHeight, setLogContainerHeight] = useState('250px'); // 添加日志容器高度状态 const { currentAppData } = useSelector((state: any) => state.ideContainer); + // 添加运行数据状态 + const [runtimeData, setRuntimeData] = useState({}); + const [loading, setLoading] = useState(false); // 处理 Tab 点击事件 const handleTabClick = (key: string) => { @@ -121,13 +130,13 @@ const LogBar: React.FC = () => { // 自动切换到运行日志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 = () => { }; }, [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 = () => { // 渲染运行时日志内容 const renderRuntimeLogs = () => { // 获取当前应用的运行日志 - const currentAppLogs = currentAppData?.id && appRuntimeData[currentAppData.id] + const currentAppLogs = currentAppData?.id && appRuntimeData[currentAppData.id] ? appRuntimeData[currentAppData.id].logs || [] : []; - + return (
{currentAppLogs.length === 0 ? ( @@ -194,6 +239,28 @@ const LogBar: React.FC = () => { ); }; + // 渲染运行数据内容 + const renderRuntimeData = () => { + const currentAppDataContent = currentAppData?.id ? runtimeData[currentAppData.id] : null; + + return ( +
+ {loading ? ( +

加载中...

+ ) : !currentAppData?.id ? ( +

请选择应用

+ ) : !currentAppDataContent ? ( +

暂无运行数据

+ ) : ( +
+

应用: {currentAppData.name}

+
{JSON.stringify(currentAppDataContent, null, 2)}
+
+ )} +
+ ); + }; + return ( <> = () => { {x.key === '1' ? renderRuntimeLogs() : x.key === '2' ? renderValidationLogs() : - x.content} + x.key === '3' ? renderRuntimeData() : // 添加运行数据渲染 + x.content} ))}