feat(ide): 添加校验日志功能

- 新增 LogMessage 接口定义日志结构- 在 logBar 中添加校验日志状态管理
- 实现监听自定义 logMessage 事件- 添加校验日志渲染组件
- 支持自动切换到校验日志标签页- 在节点验证失败时发送日志消息到 logBar

src/components/FlowEditor/nodeEditors/validators/nodeValidators.ts

@@ -500,6 +500,16 @@ export const showValidationErrors = (errors: string[]) => {
     let content = '存在以下问题需要修正：\n';
     content += errors.map((error, index) => `${index + 1}. ${error}`).join('\n');
 
+    // 发送错误信息到 logBar
+    const logEvent = new CustomEvent('logMessage', {
+      detail: {
+        type: 'validation',
+        message: content,
+        timestamp: new Date().toISOString()
+      }
+    });
+    document.dispatchEvent(logEvent);
+
     Message.error({
       content: content,
       duration: 5000

src/pages/ideContainer/logBar.tsx

@@ -6,6 +6,13 @@ import { useSelector, useDispatch } from 'react-redux';
 
 const TabPane = Tabs.TabPane;
 
+interface LogMessage {
+  id: number;
+  type: string;
+  message: string;
+  timestamp: string;
+}
+
 interface LogBarProps {
   a?: string;
 }
@@ -39,7 +46,7 @@ const LogBar: React.FC<LogBarProps> = () => {
   const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用 ResizeBox 容器
   const { logBarStatus } = useSelector((state) => state.ideContainer);
   const dispatch = useDispatch();
-
+  const [validationLogs, setValidationLogs] = useState<LogMessage[]>([]);
 
   // 处理 Tab 点击事件
   const handleTabClick = (key: string) => {
@@ -56,7 +63,6 @@ const LogBar: React.FC<LogBarProps> = () => {
 
   // 当 collapsed 状态改变时，直接更新元素的样式
   useEffect(() => {
-
     if (resizeBoxRef.current) {
       resizeBoxRef.current.style.height = logBarStatus ? '250px' : '0px';
     }
@@ -76,6 +82,59 @@ const LogBar: React.FC<LogBarProps> = () => {
     }
   };
 
+  // 监听日志消息事件
+  useEffect(() => {
+    const handleLogMessage = (event: CustomEvent) => {
+      const { type, message, timestamp } = event.detail;
+      
+      // 如果是校验类型的消息且当前校验日志tab可见，则添加到校验日志中
+      if (type === 'validation') {
+        const newLog: LogMessage = {
+          id: Date.now(),
+          type,
+          message,
+          timestamp
+        };
+        
+        setValidationLogs(prev => [...prev, newLog]);
+        
+        // 自动切换到校验日志tab并展开logBar
+        setActiveTab('2');
+        dispatch(updateLogBarStatus(true));
+      }
+    };
+
+    // 添加事件监听器
+    document.addEventListener('logMessage', handleLogMessage as EventListener);
+    
+    // 清理事件监听器
+    return () => {
+      document.removeEventListener('logMessage', handleLogMessage as EventListener);
+    };
+  }, [dispatch]);
+
+  // 渲染校验日志内容
+  const renderValidationLogs = () => {
+    return (
+      <div style={{ padding: '10px', maxHeight: '200px', overflowY: 'auto' }}>
+        {validationLogs.length === 0 ? (
+          <p>暂无校验日志</p>
+        ) : (
+          validationLogs.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
@@ -94,7 +153,7 @@ const LogBar: React.FC<LogBarProps> = () => {
         >
           {tabs.map((x) => (
             <TabPane destroyOnHide key={x.key} title={x.title}>
-              {x.content}
+              {x.key === '2' ? renderValidationLogs() : x.content}
             </TabPane>
           ))}
         </Tabs>