diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index ce6f8c6..5a5583f 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -82,7 +82,7 @@ function IDEContainer() { // 处理节点状态更新 if (socketMessage?.nodeLog) { - const { nodeId, state } = socketMessage.nodeLog; + const { nodeId, state, runLog } = socketMessage.nodeLog; // 将状态映射为前端使用的状态 let status = 'waiting'; switch (state) { @@ -101,6 +101,18 @@ function IDEContainer() { } // 更新节点状态 dispatch(updateNodeStatus({ nodeId, status })); + + // 只有当存在runLog时才发送日志到logBar + if (runLog) { + const logEvent = new CustomEvent('logMessage', { + detail: { + type: 'runtime', + message: runLog, + timestamp: new Date().toISOString() + } + }); + document.dispatchEvent(logEvent); + } } } }); diff --git a/src/pages/ideContainer/logBar.tsx b/src/pages/ideContainer/logBar.tsx index d089bf9..e345749 100644 --- a/src/pages/ideContainer/logBar.tsx +++ b/src/pages/ideContainer/logBar.tsx @@ -30,8 +30,8 @@ const data = [ }, { key: '3', - title: '流程运行日志', - content: '流程运行时日志...' + title: '运行数据', + content: '运行数据日志...' }, { key: '4', @@ -47,6 +47,8 @@ const LogBar: React.FC = () => { const { logBarStatus } = useSelector((state) => state.ideContainer); const dispatch = useDispatch(); const [validationLogs, setValidationLogs] = useState([]); + const [runtimeLogs, setRuntimeLogs] = useState([]); // 添加运行时日志状态 + const [logContainerHeight, setLogContainerHeight] = useState('250px'); // 添加日志容器高度状态 // 处理 Tab 点击事件 const handleTabClick = (key: string) => { @@ -64,9 +66,9 @@ const LogBar: React.FC = () => { // 当 collapsed 状态改变时,直接更新元素的样式 useEffect(() => { if (resizeBoxRef.current) { - resizeBoxRef.current.style.height = logBarStatus ? '250px' : '0px'; + resizeBoxRef.current.style.height = logBarStatus ? logContainerHeight : '0px'; } - }, [logBarStatus]); + }, [logBarStatus, logContainerHeight]); // 处理 ResizeBox 手动调整大小事件 const handleResize = (e: MouseEvent, size: { @@ -79,6 +81,8 @@ const LogBar: React.FC = () => { } else { dispatch(updateLogBarStatus(true)); + // 更新日志容器高度状态 + setLogContainerHeight(`${size.height}px`); } }; @@ -86,7 +90,7 @@ const LogBar: React.FC = () => { useEffect(() => { const handleLogMessage = (event: CustomEvent) => { const { type, message, timestamp } = event.detail; - + // 如果是校验类型的消息且当前校验日志tab可见,则添加到校验日志中 if (type === 'validation') { const newLog: LogMessage = { @@ -95,18 +99,33 @@ const LogBar: React.FC = () => { message, timestamp }; - + setValidationLogs(prev => [...prev, newLog]); - + // 自动切换到校验日志tab并展开logBar setActiveTab('2'); dispatch(updateLogBarStatus(true)); } + // 如果是运行时日志 + else if (type === 'runtime') { + const newLog: LogMessage = { + id: Date.now(), + type, + message, + timestamp + }; + + setRuntimeLogs(prev => [...prev, newLog]); + + // 自动切换到运行日志tab并展开logBar + setActiveTab('1'); + dispatch(updateLogBarStatus(true)); + } }; // 添加事件监听器 document.addEventListener('logMessage', handleLogMessage as EventListener); - + // 清理事件监听器 return () => { document.removeEventListener('logMessage', handleLogMessage as EventListener); @@ -116,7 +135,7 @@ const LogBar: React.FC = () => { // 渲染校验日志内容 const renderValidationLogs = () => { return ( -
+
{validationLogs.length === 0 ? (

暂无校验日志

) : ( @@ -135,6 +154,28 @@ const LogBar: React.FC = () => { ); }; + // 渲染运行时日志内容 + const renderRuntimeLogs = () => { + return ( +
+ {runtimeLogs.length === 0 ? ( +

暂无运行时日志

+ ) : ( + runtimeLogs.map(log => ( +
+
+ {new Date(log.timestamp).toLocaleString()} +
+
+ {log.message} +
+
+ )) + )} +
+ ); + }; + return ( <> = () => { className={styles.logBar} directions={['top']} style={{ - height: logBarStatus ? '250px' : '0px' + height: logBarStatus ? logContainerHeight : '0px' }} onMoving={handleResize} > @@ -150,10 +191,13 @@ const LogBar: React.FC = () => { type="card-gutter" activeTab={activeTab} onClickTab={handleTabClick} + justify={true} > {tabs.map((x) => ( - {x.key === '2' ? renderValidationLogs() : x.content} + {x.key === '1' ? renderRuntimeLogs() : + x.key === '2' ? renderValidationLogs() : + x.content} ))}