feat:任务执行结果性能优化

frontend/src/layout/components/Main/TaskTemplate/TaskResult/index.vue

@@ -8,7 +8,7 @@ import { getActionTypeDisplay, getAgentMapIcon } from '@/layout/components/confi
 import { type ConnectArg, Jsplumb } from '@/layout/components/Main/TaskTemplate/utils.ts'
 import variables from '@/styles/variables.module.scss'
 import { type IRawStepTask, useAgentsStore } from '@/stores'
-import api from '@/api'
+import api, { type StreamingEvent } from '@/api'
 import ProcessCard from '../TaskProcess/ProcessCard.vue'
 import ExecutePlan from './ExecutePlan.vue'
 
@@ -182,14 +182,148 @@ function createInternalLine(id?: string) {
 }
 
 const loading = ref(false)
+const executionProgress = ref({
+  currentStep: 0,
+  totalSteps: 0,
+  currentAction: 0,
+  totalActions: 0,
+  currentStepName: '',
+  message: '正在执行...'
+})
 
 async function handleRun() {
+  // 清空之前的执行结果
+  agentsStore.setExecutePlan([])
+  const tempResults: any[] = []
+
   try {
     loading.value = true
-    const d = await api.executePlan(agentsStore.agentRawPlan.data!)
-    agentsStore.setExecutePlan(d)
+
+    // 使用优化版流式API（阶段1+2：步骤级流式 + 动作级智能并行）
+    api.executePlanOptimized(
+      agentsStore.agentRawPlan.data!,
+      // onMessage: 处理每个事件
+      (event: StreamingEvent) => {
+        switch (event.type) {
+          case 'step_start':
+            // 步骤开始
+            executionProgress.value = {
+              currentStep: event.step_index + 1,
+              totalSteps: event.total_steps,
+              currentAction: 0,
+              totalActions: 0,
+              currentStepName: event.step_name,
+              message: `正在执行步骤 ${event.step_index + 1}/${event.total_steps}: ${
+                event.step_name
+              }`
+            }
+            console.log(
+              `📋 步骤 ${event.step_index + 1}/${event.total_steps} 开始: ${event.step_name}`
+            )
+            break
+
+          case 'action_complete':
+            // 动作完成
+            const parallelInfo = event.batch_info?.is_parallel
+              ? ` [批次 ${event.batch_info!.batch_index + 1}, 并行 ${
+                  event.batch_info!.batch_size
+                } 个]`
+              : ''
+
+            executionProgress.value = {
+              ...executionProgress.value,
+              currentAction: event.completed_actions,
+              totalActions: event.total_actions,
+              message: `步骤 ${event.step_index + 1}/${executionProgress.value.totalSteps}: ${
+                event.step_name
+              } - 动作 ${event.completed_actions}/${event.total_actions} 完成${parallelInfo}`
+            }
+
+            console.log(
+              `✅ 动作 ${event.completed_actions}/${event.total_actions} 完成${parallelInfo}: ${event.action_result.ActionType} by ${event.action_result.AgentName}`
+            )
+
+            // 实时更新到 store（找到对应的步骤并添加 ActionHistory）
+            const step = collaborationProcess.value.find(s => s.StepName === event.step_name)
+            if (step) {
+              const stepLogNode = tempResults.find(
+                r => r.NodeId === event.step_name && r.LogNodeType === 'step'
+              )
+              if (!stepLogNode) {
+                // 创建步骤日志节点
+                const newStepLog = {
+                  LogNodeType: 'step',
+                  NodeId: event.step_name,
+                  InputName_List: step.InputObject_List || [],
+                  OutputName: step.OutputObject || '',
+                  chatLog: [],
+                  inputObject_Record: [],
+                  ActionHistory: [event.action_result]
+                }
+                tempResults.push(newStepLog)
+              } else {
+                // 追加动作结果
+                stepLogNode.ActionHistory.push(event.action_result)
+              }
+
+              // 更新 store
+              agentsStore.setExecutePlan([...tempResults])
+            }
+            break
+
+          case 'step_complete':
+            // 步骤完成
+            console.log(`🎯 步骤完成: ${event.step_name}`)
+
+            // 更新步骤日志节点
+            const existingStepLog = tempResults.find(
+              r => r.NodeId === event.step_name && r.LogNodeType === 'step'
+            )
+            if (existingStepLog) {
+              existingStepLog.ActionHistory = event.step_log_node.ActionHistory
+            } else {
+              tempResults.push(event.step_log_node)
+            }
+
+            // 添加对象日志节点
+            tempResults.push(event.object_log_node)
+
+            // 更新 store
+            agentsStore.setExecutePlan([...tempResults])
+            break
+
+          case 'execution_complete':
+            // 执行完成
+            executionProgress.value.message = `执行完成！共 ${event.total_steps} 个步骤`
+            console.log(`🎉 执行完成，共 ${event.total_steps} 个步骤`)
+
+            // 确保所有结果都保存到 store
+            agentsStore.setExecutePlan([...tempResults])
+            break
+
+          case 'error':
+            // 错误
+            console.error('❌ 执行错误:', event.message)
+            executionProgress.value.message = `执行错误: ${event.message}`
+            break
+        }
+      },
+      // onError: 处理错误
+      (error: Error) => {
+        console.error('❌ 流式执行错误:', error)
+        executionProgress.value.message = `执行失败: ${error.message}`
+      },
+      // onComplete: 执行完成
+      () => {
+        console.log('✅ 流式执行完成')
+        loading.value = false
+      }
+    )
+  } catch (error) {
+    console.error('执行失败:', error)
+    executionProgress.value.message = '执行失败，请重试'
   } finally {
-    loading.value = false
+    // loading 会在 onComplete 中设置为 false
   }
 }
 
@@ -381,6 +515,15 @@ defineExpose({
     id="task-results"
     :class="{ 'is-running': agentsStore.executePlan.length > 0 }"
   >
+    <!-- 执行进度提示 -->
+    <div v-if="loading" class="execution-progress-hint">
+      <el-icon class="is-loading"><Loading /></el-icon>
+      <span>{{ executionProgress.message }}</span>
+      <span v-if="executionProgress.totalSteps > 0" class="progress">
+        {{ executionProgress.currentStep }}/{{ executionProgress.totalSteps }}
+      </span>
+    </div>
+
     <!--  标题与执行按钮 -->
     <div class="text-[18px] font-bold mb-[7px] flex justify-between items-center px-[20px]">
       <span class="text-[var(--color-text-title-header)]">执行结果</span>
@@ -606,6 +749,48 @@ defineExpose({
 </template>
 
 <style scoped lang="scss">
+// 执行进度提示样式
+.execution-progress-hint {
+  position: fixed;
+  top: 80px;
+  right: 20px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  padding: 12px 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 1000;
+  animation: slideInRight 0.3s ease-out;
+  max-width: 400px;
+
+  .message {
+    flex: 1;
+    font-size: 14px;
+    color: var(--el-text-color-primary);
+  }
+
+  .progress {
+    color: var(--el-color-primary);
+    font-weight: bold;
+    margin-left: 4px;
+    font-size: 14px;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 #task-results.is-running {
   --color-bg-detail-list: var(--color-bg-detail-list-run); // 直接指向 100 % 版本
 }