feat:RESTful API架构改WebSocket架构-执行结果可以分步显示版本

frontend/src/api/index.ts

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import websocket from '@/utils/websocket'
 import type { Agent, IApiStepTask, IRawPlanResponse, IRawStepTask } from '@/stores'
 import {
   mockBackendAgentSelectModifyInit,
@@ -82,7 +83,16 @@ export interface IFillAgentSelectionRequest {
 }
 
 class Api {
-  setAgents = (data: Pick<Agent, 'Name' | 'Profile' | 'apiUrl' | 'apiKey' | 'apiModel'>[]) => {
+  // 默认使用WebSocket
+  private useWebSocketDefault = true
+
+  setAgents = (data: Pick<Agent, 'Name' | 'Profile' | 'apiUrl' | 'apiKey' | 'apiModel'>[], useWebSocket: boolean = this.useWebSocketDefault) => {
+    // 如果启用WebSocket且已连接，使用WebSocket
+    if (useWebSocket && websocket.connected) {
+      return websocket.send('set_agents', data)
+    }
+
+    // 否则使用REST API
     return request({
       url: '/setAgents',
       data,
@@ -96,7 +106,23 @@ class Api {
     apiUrl?: string
     apiKey?: string
     apiModel?: string
+    useWebSocket?: boolean
+    onProgress?: (progress: { status: string; stage?: string; message?: string; [key: string]: any }) => void
   }) => {
+    const useWs = data.useWebSocket !== undefined ? data.useWebSocket : this.useWebSocketDefault
+
+    // 如果启用WebSocket且已连接，使用WebSocket
+    if (useWs && websocket.connected) {
+      return websocket.send('generate_base_plan', {
+        'General Goal': data.goal,
+        'Initial Input Object': data.inputs,
+        apiUrl: data.apiUrl,
+        apiKey: data.apiKey,
+        apiModel: data.apiModel,
+      }, undefined, data.onProgress)
+    }
+
+    // 否则使用REST API
     return request<unknown, IRawPlanResponse>({
       url: '/generate_basePlan',
       method: 'POST',
@@ -143,13 +169,18 @@ class Api {
   /**
    * 优化版流式执行计划（阶段1+2：步骤级流式 + 动作级智能并行）
    * 无依赖关系的动作并行执行，有依赖关系的动作串行执行
+   *
+   * 默认使用WebSocket，如果连接失败则降级到SSE
    */
   executePlanOptimized = (
     plan: IRawPlanResponse,
     onMessage: (event: StreamingEvent) => void,
     onError?: (error: Error) => void,
     onComplete?: () => void,
+    useWebSocket?: boolean,
   ) => {
+    const useWs = useWebSocket !== undefined ? useWebSocket : this.useWebSocketDefault
+
     const data = {
       RehearsalLog: [],
       num_StepToRun: null,
@@ -174,6 +205,41 @@ class Api {
       },
     }
 
+    // 如果启用WebSocket且已连接，使用WebSocket
+    if (useWs && websocket.connected) {
+      websocket.subscribe(
+        'execute_plan_optimized',
+        data,
+        // onProgress
+        (progressData) => {
+          try {
+            // progressData 应该已经是解析后的对象了
+            // 如果是字符串，说明后端发送的是 JSON 字符串，需要解析
+            let event: StreamingEvent
+            if (typeof progressData === 'string') {
+              event = JSON.parse(progressData)
+            } else {
+              event = progressData as StreamingEvent
+            }
+            onMessage(event)
+          } catch (e) {
+            // Failed to parse WebSocket data
+          }
+        },
+        // onComplete
+        () => {
+          onComplete?.()
+        },
+        // onError
+        (error) => {
+          onError?.(error)
+        }
+      )
+      return
+    }
+
+    // 否则使用原有的SSE方式
+
     fetch('/api/executePlanOptimized', {
       method: 'POST',
       headers: {
@@ -215,7 +281,7 @@ class Api {
                 const event = JSON.parse(data)
                 onMessage(event)
               } catch (e) {
-                console.error('Failed to parse SSE data:', e)
+                // Failed to parse SSE data
               }
             }
           }
@@ -236,7 +302,24 @@ class Api {
     Baseline_Completion: number
     initialInputs: string[]
     goal: string
+    useWebSocket?: boolean
+    onProgress?: (progress: { status: string; stage?: string; message?: string; [key: string]: any }) => void
   }) => {
+    const useWs = data.useWebSocket !== undefined ? data.useWebSocket : this.useWebSocketDefault
+
+    // 如果启用WebSocket且已连接，使用WebSocket
+    if (useWs && websocket.connected) {
+      return websocket.send('branch_plan_outline', {
+        branch_Number: data.branch_Number,
+        Modification_Requirement: data.Modification_Requirement,
+        Existing_Steps: data.Existing_Steps,
+        Baseline_Completion: data.Baseline_Completion,
+        'Initial Input Object': data.initialInputs,
+        'General Goal': data.goal,
+      }, undefined, data.onProgress)
+    }
+
+    // 否则使用REST API
     return request<unknown, IRawPlanResponse>({
       url: '/branch_PlanOutline',
       method: 'POST',
@@ -261,7 +344,24 @@ class Api {
     Baseline_Completion: number
     stepTaskExisting: any
     goal: string
+    useWebSocket?: boolean
+    onProgress?: (progress: { status: string; stage?: string; message?: string; [key: string]: any }) => void
   }) => {
+    const useWs = data.useWebSocket !== undefined ? data.useWebSocket : this.useWebSocketDefault
+
+    // 如果启用WebSocket且已连接，使用WebSocket
+    if (useWs && websocket.connected) {
+      return websocket.send('branch_task_process', {
+        branch_Number: data.branch_Number,
+        Modification_Requirement: data.Modification_Requirement,
+        Existing_Steps: data.Existing_Steps,
+        Baseline_Completion: data.Baseline_Completion,
+        stepTaskExisting: data.stepTaskExisting,
+        'General Goal': data.goal,
+      }, undefined, data.onProgress)
+    }
+
+    // 否则使用REST API
     return request<unknown, BranchAction[][]>({
       url: '/branch_TaskProcess',
       method: 'POST',
@@ -276,38 +376,55 @@ class Api {
     })
   }
 
-  fillStepTask = async (data: { goal: string; stepTask: any }): Promise<IRawStepTask> => {
-    const response = await request<
-      {
-        'General Goal': string
-        stepTask: any
-      },
-      {
-        AgentSelection?: string[]
-        Collaboration_Brief_FrontEnd?: {
-          template: string
-          data: Record<string, { text: string; color: number[] }>
-        }
-        InputObject_List?: string[]
-        OutputObject?: string
-        StepName?: string
-        TaskContent?: string
-        TaskProcess?: Array<{
-          ID: string
-          ActionType: string
-          AgentName: string
-          Description: string
-          ImportantInput: string[]
-        }>
-      }
-    >({
-      url: '/fill_stepTask',
-      method: 'POST',
-      data: {
+  fillStepTask = async (data: {
+    goal: string
+    stepTask: any
+    useWebSocket?: boolean
+    onProgress?: (progress: { status: string; stage?: string; message?: string; [key: string]: any }) => void
+  }): Promise<IRawStepTask> => {
+    const useWs = data.useWebSocket !== undefined ? data.useWebSocket : this.useWebSocketDefault
+    let response: any
+
+    // 如果启用WebSocket且已连接，使用WebSocket
+    if (useWs && websocket.connected) {
+      response = await websocket.send('fill_step_task', {
         'General Goal': data.goal,
         stepTask: data.stepTask,
-      },
-    })
+      }, undefined, data.onProgress)
+    } else {
+      // 否则使用REST API
+      response = await request<
+        {
+          'General Goal': string
+          stepTask: any
+        },
+        {
+          AgentSelection?: string[]
+          Collaboration_Brief_FrontEnd?: {
+            template: string
+            data: Record<string, { text: string; color: number[] }>
+          }
+          InputObject_List?: string[]
+          OutputObject?: string
+          StepName?: string
+          TaskContent?: string
+          TaskProcess?: Array<{
+            ID: string
+            ActionType: string
+            AgentName: string
+            Description: string
+            ImportantInput: string[]
+          }>
+        }
+      >({
+        url: '/fill_stepTask',
+        method: 'POST',
+        data: {
+          'General Goal': data.goal,
+          stepTask: data.stepTask,
+        },
+      })
+    }
 
     const vec2Hsl = (color: number[]): string => {
       const [h, s, l] = color
@@ -347,40 +464,15 @@ class Api {
     goal: string
     stepTask: IApiStepTask
     agents: string[]
+    useWebSocket?: boolean
+    onProgress?: (progress: { status: string; stage?: string; message?: string; [key: string]: any }) => void
   }): Promise<IApiStepTask> => {
-    const response = await request<
-      {
-        'General Goal': string
-        stepTask_lackTaskProcess: {
-          StepName: string
-          TaskContent: string
-          InputObject_List: string[]
-          OutputObject: string
-          AgentSelection: string[]
-        }
-      },
-      {
-        StepName?: string
-        TaskContent?: string
-        InputObject_List?: string[]
-        OutputObject?: string
-        AgentSelection?: string[]
-        TaskProcess?: Array<{
-          ID: string
-          ActionType: string
-          AgentName: string
-          Description: string
-          ImportantInput: string[]
-        }>
-        Collaboration_Brief_FrontEnd?: {
-          template: string
-          data: Record<string, { text: string; color: number[] }>
-        }
-      }
-    >({
-      url: '/fill_stepTask_TaskProcess',
-      method: 'POST',
-      data: {
+    const useWs = data.useWebSocket !== undefined ? data.useWebSocket : this.useWebSocketDefault
+    let response: any
+
+    // 如果启用WebSocket且已连接，使用WebSocket
+    if (useWs && websocket.connected) {
+      response = await websocket.send('fill_step_task_process', {
         'General Goal': data.goal,
         stepTask_lackTaskProcess: {
           StepName: data.stepTask.name,
@@ -389,8 +481,53 @@ class Api {
           OutputObject: data.stepTask.output,
           AgentSelection: data.agents,
         },
-      },
-    })
+      }, undefined, data.onProgress)
+    } else {
+      // 否则使用REST API
+      response = await request<
+        {
+          'General Goal': string
+          stepTask_lackTaskProcess: {
+            StepName: string
+            TaskContent: string
+            InputObject_List: string[]
+            OutputObject: string
+            AgentSelection: string[]
+          }
+        },
+        {
+          StepName?: string
+          TaskContent?: string
+          InputObject_List?: string[]
+          OutputObject?: string
+          AgentSelection?: string[]
+          TaskProcess?: Array<{
+            ID: string
+            ActionType: string
+            AgentName: string
+            Description: string
+            ImportantInput: string[]
+          }>
+          Collaboration_Brief_FrontEnd?: {
+            template: string
+            data: Record<string, { text: string; color: number[] }>
+          }
+        }
+      >({
+        url: '/fill_stepTask_TaskProcess',
+        method: 'POST',
+        data: {
+          'General Goal': data.goal,
+          stepTask_lackTaskProcess: {
+            StepName: data.stepTask.name,
+            TaskContent: data.stepTask.content,
+            InputObject_List: data.stepTask.inputs,
+            OutputObject: data.stepTask.output,
+            AgentSelection: data.agents,
+          },
+        },
+      })
+    }
 
     const vec2Hsl = (color: number[]): string => {
       const [h, s, l] = color
@@ -409,7 +546,7 @@ class Api {
       }
     }
 
-    const process = (response.TaskProcess || []).map((action) => ({
+    const process = (response.TaskProcess || []).map((action: any) => ({
       id: action.ID,
       type: action.ActionType,
       agent: action.AgentName,
@@ -437,17 +574,15 @@ class Api {
   agentSelectModifyInit = async (data: {
     goal: string
     stepTask: any
+    useWebSocket?: boolean
+    onProgress?: (progress: { status: string; stage?: string; message?: string; [key: string]: any }) => void
   }): Promise<Record<string, Record<string, { reason: string; score: number }>>> => {
-    const response = await request<
-      {
-        'General Goal': string
-        stepTask: any
-      },
-      Record<string, Record<string, { Reason: string; Score: number }>>
-    >({
-      url: '/agentSelectModify_init',
-      method: 'POST',
-      data: {
+    const useWs = data.useWebSocket !== undefined ? data.useWebSocket : this.useWebSocketDefault
+    let response: Record<string, Record<string, { Reason: string; Score: number }>>
+
+    // 如果启用WebSocket且已连接，使用WebSocket
+    if (useWs && websocket.connected) {
+      response = await websocket.send('agent_select_modify_init', {
         'General Goal': data.goal,
         stepTask: {
           StepName: data.stepTask.StepName || data.stepTask.name,
@@ -455,8 +590,29 @@ class Api {
           InputObject_List: data.stepTask.InputObject_List || data.stepTask.inputs,
           OutputObject: data.stepTask.OutputObject || data.stepTask.output,
         },
-      },
-    })
+      }, undefined, data.onProgress)
+    } else {
+      // 否则使用REST API
+      response = await request<
+        {
+          'General Goal': string
+          stepTask: any
+        },
+        Record<string, Record<string, { Reason: string; Score: number }>>
+      >({
+        url: '/agentSelectModify_init',
+        method: 'POST',
+        data: {
+          'General Goal': data.goal,
+          stepTask: {
+            StepName: data.stepTask.StepName || data.stepTask.name,
+            TaskContent: data.stepTask.TaskContent || data.stepTask.content,
+            InputObject_List: data.stepTask.InputObject_List || data.stepTask.inputs,
+            OutputObject: data.stepTask.OutputObject || data.stepTask.output,
+          },
+        },
+      })
+    }
 
     const transformedData: Record<string, Record<string, { reason: string; score: number }>> = {}
 
@@ -480,22 +636,35 @@ class Api {
    */
   agentSelectModifyAddAspect = async (data: {
     aspectList: string[]
+    useWebSocket?: boolean
+    onProgress?: (progress: { status: string; stage?: string; message?: string; [key: string]: any }) => void
   }): Promise<{
     aspectName: string
     agentScores: Record<string, { score: number; reason: string }>
   }> => {
-    const response = await request<
-      {
-        aspectList: string[]
-      },
-      Record<string, Record<string, { Reason: string; Score: number }>>
-    >({
-      url: '/agentSelectModify_addAspect',
-      method: 'POST',
-      data: {
+    const useWs = data.useWebSocket !== undefined ? data.useWebSocket : this.useWebSocketDefault
+    let response: Record<string, Record<string, { Reason: string; Score: number }>>
+
+    // 如果启用WebSocket且已连接，使用WebSocket
+    if (useWs && websocket.connected) {
+      response = await websocket.send('agent_select_modify_add_aspect', {
         aspectList: data.aspectList,
-      },
-    })
+      }, undefined, data.onProgress)
+    } else {
+      // 否则使用REST API
+      response = await request<
+        {
+          aspectList: string[]
+        },
+        Record<string, Record<string, { Reason: string; Score: number }>>
+      >({
+        url: '/agentSelectModify_addAspect',
+        method: 'POST',
+        data: {
+          aspectList: data.aspectList,
+        },
+      })
+    }
 
     /**
      * 获取新添加的维度