feat(componentDeployment): socket美化，增加序号以及信息提取

src/hooks/useWebSocket.ts

@@ -76,7 +76,6 @@ const useWebSocket = (options: WebSocketOptions = {}): WebSocketHook => {
       wsRef.current = ws;
 
       ws.onopen = (event) => {
-        console.log('WebSocket opened');
         setReadyState(WebSocket.OPEN);
         setIsConnected(true);
         reconnectAttemptsRef.current = 0;
@@ -84,7 +83,6 @@ const useWebSocket = (options: WebSocketOptions = {}): WebSocketHook => {
       };
 
       ws.onclose = (event) => {
-        console.log('WebSocket closed');
         setReadyState(WebSocket.CLOSED);
         setIsConnected(false);
         onClose?.(event);
@@ -99,13 +97,11 @@ const useWebSocket = (options: WebSocketOptions = {}): WebSocketHook => {
       };
 
       ws.onerror = (event) => {
-        console.log('WebSocket error', event);
         setIsConnected(false);
         onError?.(event);
       };
 
       ws.onmessage = (event) => {
-        console.log('WebSocket message', event);
         onMessage?.(event);
       };
 

src/pages/componentDevelopment/componentDeployment/index.tsx

@@ -8,6 +8,7 @@ import ConfigTutorial from '@/pages/componentDevelopment/componentEnv/configTuto
 import { getComponentClassify } from '@/api/componentClassify';
 import useWebSocket from '@/hooks/useWebSocket';
 import { getToken } from '@/utils/auth';
+import { isJSON } from '@/utils/common';
 
 const ComponentDeployment = () => {
   const [searchKeyword, setSearchKeyword] = useState('');
@@ -21,6 +22,7 @@ const ComponentDeployment = () => {
   const [compileLogsMap, setCompileLogsMap] = useState<Record<string, string>>({});
   // 编译状态管理 - 按实例 ID 存储状态
   const [compileStatusMap, setCompileStatusMap] = useState<Record<string, 'idle' | 'running' | 'success' | 'failed' | 'canceled'>>({});
+  const compileLogSequenceRef = useRef<Record<string, number>>({});
   const currentCompileIdRef = useRef<string | null>(null);
 
   // WebSocket 连接 - 用于接收编译日志
@@ -30,11 +32,25 @@ const ComponentDeployment = () => {
       if (!id) return;
 
       try {
-        const data = typeof event.data === 'string' ? event.data : JSON.stringify(event.data);
+        const currentSequence = (compileLogSequenceRef.current[id] || 0) + 1;
-        setCompileLogsMap(prev => ({
+        compileLogSequenceRef.current[id] = currentSequence;
-          ...prev,
+
-          [id]: prev[id] ? prev[id] + '\n' + data : data
+        if (isJSON(event.data)) {
-        }));
+          const parseData = JSON.parse(event.data);
+          const message = parseData.message || event.data;
+          const sequenceMessage = `${currentSequence}. ${message}`;
+          setCompileLogsMap(prev => ({
+            ...prev,
+            [id]: prev[id] ? prev[id] + '\n' + sequenceMessage : sequenceMessage
+          }));
+        }
+        else {
+          const data = `${currentSequence}. ${event.data}`;
+          setCompileLogsMap(prev => ({
+            ...prev,
+            [id]: prev[id] ? prev[id] + '\n' + data : data
+          }));
+        }
       } catch (error) {
         console.error('解析 WebSocket 消息失败:', error);
       }
@@ -58,7 +74,8 @@ const ComponentDeployment = () => {
 
     if (window.location.host.includes('localhost')) {
       wsUrl = `${process.env.NEXT_PUBLIC_DEV_SOCKET_HOST}/ws/v1/bpms-workbench/instance-log?Authorization=Bearer ${getToken()}`;
-    } else {
+    }
+    else {
       wsUrl = `${protocol}//${host}/ws/v1/bpms-workbench/instance-log?Authorization=Bearer ${getToken()}`;
     }
 
@@ -86,6 +103,8 @@ const ComponentDeployment = () => {
   const subscribeInstanceLog = (instanceId: string) => {
     currentCompileIdRef.current = instanceId;
 
+    compileLogSequenceRef.current[instanceId] = 0;
+
     // 清空该实例之前的日志
     setCompileLogsMap(prev => ({
       ...prev,
@@ -103,7 +122,8 @@ const ComponentDeployment = () => {
         instanceId,
         type: 'subscribe'
       });
-    } else {
+    }
+    else {
       Message.warning('WebSocket 未连接，无法实时接收日志');
     }
   };

src/pages/componentDevelopment/componentTest/testInstance.tsx

@@ -111,7 +111,6 @@ const TestInstance = ({ instance, parentId, onBack }: { instance: any; parentId:
     else {
       // WebSocket连接前置
       const res: any = await startTestCase(instance.id);
-      console.log('res:', res);
 
       // 构建WebSocket URL，根据你的实际后端配置调整
       const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';