feat(ide): 添加节点运行日志展示功能

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);
+        }
       }
     }
   });

src/pages/ideContainer/logBar.tsx

@@ -30,8 +30,8 @@ const data = [
   },
   {
     key: '3',
-    title: '流程运行日志',
+    title: '运行数据',
-    content: '流程运行时日志...'
+    content: '运行数据日志...'
   },
   {
     key: '4',
@@ -47,6 +47,8 @@ const LogBar: React.FC<LogBarProps> = () => {
   const { logBarStatus } = useSelector((state) => state.ideContainer);
   const dispatch = useDispatch();
   const [validationLogs, setValidationLogs] = useState<LogMessage[]>([]);
+  const [runtimeLogs, setRuntimeLogs] = useState<LogMessage[]>([]); // 添加运行时日志状态
+  const [logContainerHeight, setLogContainerHeight] = useState('250px'); // 添加日志容器高度状态
 
   // 处理 Tab 点击事件
   const handleTabClick = (key: string) => {
@@ -64,9 +66,9 @@ const LogBar: React.FC<LogBarProps> = () => {
   // 当 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<LogBarProps> = () => {
     }
     else {
       dispatch(updateLogBarStatus(true));
+      // 更新日志容器高度状态
+      setLogContainerHeight(`${size.height}px`);
     }
   };
 
@@ -102,6 +106,21 @@ const LogBar: React.FC<LogBarProps> = () => {
         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));
+      }
     };
 
     // 添加事件监听器
@@ -116,7 +135,7 @@ const LogBar: React.FC<LogBarProps> = () => {
   // 渲染校验日志内容
   const renderValidationLogs = () => {
     return (
-      <div style={{ padding: '10px', maxHeight: '200px', overflowY: 'auto' }}>
+      <div style={{ padding: '10px', height: 'calc(100% - 40px)', overflowY: 'auto' }}>
         {validationLogs.length === 0 ? (
           <p>暂无校验日志</p>
         ) : (
@@ -135,6 +154,28 @@ const LogBar: React.FC<LogBarProps> = () => {
     );
   };
 
+  // 渲染运行时日志内容
+  const renderRuntimeLogs = () => {
+    return (
+      <div style={{ padding: '10px', height: 'calc(100% - 40px)', overflowY: 'auto' }}>
+        {runtimeLogs.length === 0 ? (
+          <p>暂无运行时日志</p>
+        ) : (
+          runtimeLogs.map(log => (
+            <div key={log.id} style={{ marginBottom: '8px', padding: '4px', borderBottom: '1px solid #eee' }}>
+              <div style={{ fontSize: '12px', color: '#999' }}>
+                {new Date(log.timestamp).toLocaleString()}
+              </div>
+              <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                {log.message}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    );
+  };
+
   return (
     <>
       <ResizeBox
@@ -142,7 +183,7 @@ const LogBar: React.FC<LogBarProps> = () => {
         className={styles.logBar}
         directions={['top']}
         style={{
-          height: logBarStatus ? '250px' : '0px'
+          height: logBarStatus ? logContainerHeight : '0px'
         }}
         onMoving={handleResize}
       >
@@ -150,10 +191,13 @@ const LogBar: React.FC<LogBarProps> = () => {
           type="card-gutter"
           activeTab={activeTab}
           onClickTab={handleTabClick}
+          justify={true}
         >
           {tabs.map((x) => (
             <TabPane destroyOnHide key={x.key} title={x.title}>
-              {x.key === '2' ? renderValidationLogs() : x.content}
+              {x.key === '1' ? renderRuntimeLogs() :
+                x.key === '2' ? renderValidationLogs() :
+                  x.content}
             </TabPane>
           ))}
         </Tabs>