feat:任务大纲停止以及执行结果暂停继续逻辑完善

frontend/src/api/index.ts

@@ -167,10 +167,8 @@ class Api {
   }
 
   /**
-   * 优化版流式执行计划（阶段1+2：步骤级流式 + 动作级智能并行）
-   * 无依赖关系的动作并行执行，有依赖关系的动作串行执行
-   *
-   * 默认使用WebSocket，如果连接失败则降级到SSE
+   * 优化版流式执行计划（支持动态追加步骤）
+   * 步骤级流式 + 动作级智能并行 + 动态追加步骤
    */
   executePlanOptimized = (
     plan: IRawPlanResponse,
@@ -178,12 +176,19 @@ class Api {
     onError?: (error: Error) => void,
     onComplete?: () => void,
     useWebSocket?: boolean,
+    existingKeyObjects?: Record<string, any>,
+    enableDynamic?: boolean,
+    onExecutionStarted?: (executionId: string) => void,
+    executionId?: string,
   ) => {
     const useWs = useWebSocket !== undefined ? useWebSocket : this.useWebSocketDefault
 
     const data = {
       RehearsalLog: [],
       num_StepToRun: null,
+      existingKeyObjects: existingKeyObjects || {},
+      enable_dynamic: enableDynamic || false,
+      execution_id: executionId || null,
       plan: {
         'Initial Input Object': plan['Initial Input Object'],
         'General Goal': plan['General Goal'],
@@ -213,14 +218,26 @@ class Api {
         // onProgress
         (progressData) => {
           try {
-            // progressData 应该已经是解析后的对象了
-            // 如果是字符串，说明后端发送的是 JSON 字符串，需要解析
             let event: StreamingEvent
+
+            // 处理不同类型的progress数据
             if (typeof progressData === 'string') {
               event = JSON.parse(progressData)
             } else {
               event = progressData as StreamingEvent
             }
+
+            // 处理特殊事件类型
+            if (event && typeof event === 'object') {
+              // 检查是否是execution_started事件
+              if ('status' in event && event.status === 'execution_started') {
+                if ('execution_id' in event && onExecutionStarted) {
+                  onExecutionStarted(event.execution_id as string)
+                }
+                return
+              }
+            }
+
             onMessage(event)
           } catch (e) {
             // Failed to parse WebSocket data
@@ -848,6 +865,39 @@ class Api {
 
     return response
   }
+
+  /**
+   * 向正在执行的任务追加新步骤
+   * @param executionId 执行ID
+   * @param newSteps 新步骤列表
+   * @returns 追加的步骤数量
+   */
+  addStepsToExecution = async (executionId: string, newSteps: IRawStepTask[]): Promise<number> => {
+    if (!websocket.connected) {
+      throw new Error('WebSocket未连接')
+    }
+
+    const response = await websocket.send('add_steps_to_execution', {
+      execution_id: executionId,
+      new_steps: newSteps.map(step => ({
+        StepName: step.StepName,
+        TaskContent: step.TaskContent,
+        InputObject_List: step.InputObject_List,
+        OutputObject: step.OutputObject,
+        AgentSelection: step.AgentSelection,
+        Collaboration_Brief_frontEnd: step.Collaboration_Brief_frontEnd,
+        TaskProcess: step.TaskProcess.map(action => ({
+          ActionType: action.ActionType,
+          AgentName: action.AgentName,
+          Description: action.Description,
+          ID: action.ID,
+          ImportantInput: action.ImportantInput,
+        })),
+      })),
+    }) as { added_count: number }
+
+    return response?.added_count || 0
+  }
 }
 
 export default new Api()

frontend/src/components/Notification/Notification.vue

@@ -0,0 +1,260 @@
+<template>
+  <teleport to="body">
+    <div class="notification-container">
+      <transition-group
+        name="notification"
+        tag="div"
+        class="notification-list"
+      >
+        <div
+          v-for="notification in notifications"
+          :key="notification.id"
+          :class="[
+            'notification-item',
+            `notification-${notification.type || 'info'}`
+          ]"
+          :style="{ zIndex: notification.zIndex || 1000 }"
+        >
+          <div class="notification-content">
+            <div class="notification-icon">
+              <component :is="getIcon(notification.type)" />
+            </div>
+            <div class="notification-message">
+              <div class="notification-title">{{ notification.title }}</div>
+              <div v-if="notification.detailTitle" class="notification-detail-title">
+                {{ notification.detailTitle }}
+              </div>
+              <div v-if="notification.detailMessage" class="notification-detail-desc">
+                {{ notification.detailMessage }}
+              </div>
+              <div v-else-if="notification.message" class="notification-desc">
+                {{ notification.message }}
+              </div>
+            </div>
+            <div class="notification-close" @click="close(notification.id)">
+              <Close />
+            </div>
+          </div>
+          <div v-if="notification.showProgress" class="notification-progress">
+            <div
+              class="progress-bar"
+              :style="{ width: `${notification.progress || 0}%` }"
+            ></div>
+          </div>
+        </div>
+      </transition-group>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  Close,
+  SuccessFilled as IconSuccess,
+  WarningFilled as IconWarning,
+  CircleCloseFilled,
+  InfoFilled
+} from '@element-plus/icons-vue'
+import type { NotificationItem } from '@/composables/useNotification'
+
+const props = defineProps<{
+  notifications: NotificationItem[]
+}>()
+
+const emit = defineEmits<{
+  close: [id: string]
+}>()
+
+const close = (id: string) => {
+  emit('close', id)
+}
+
+const getIcon = (type?: string) => {
+  switch (type) {
+    case 'success':
+      return IconSuccess
+    case 'warning':
+      return IconWarning
+    case 'error':
+      return IconWarning
+    default:
+      return InfoFilled
+  }
+}
+</script>
+
+<style scoped>
+.notification-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.notification-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.notification-item {
+  pointer-events: auto;
+  min-width: 300px;
+  max-width: 450px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  border-left: 4px solid #409eff;
+}
+
+.notification-success {
+  border-left-color: #67c23a;
+}
+
+.notification-warning {
+  border-left-color: #e6a23c;
+}
+
+.notification-error {
+  border-left-color: #f56c6c;
+}
+
+.notification-content {
+  display: flex;
+  align-items: flex-start;
+  padding: 12px 16px;
+  gap: 12px;
+}
+
+.notification-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.notification-icon .success {
+  color: #67c23a;
+}
+
+.notification-icon .warning {
+  color: #e6a23c;
+}
+
+.notification-icon .error {
+  color: #f56c6c;
+}
+
+.notification-icon .info {
+  color: #409eff;
+}
+
+.notification-message {
+  flex: 1;
+  min-width: 0;
+}
+
+.notification-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 4px;
+}
+
+.notification-detail-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #409eff;
+  margin-top: 4px;
+  margin-bottom: 2px;
+}
+
+.notification-detail-desc {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.4;
+}
+
+.notification-desc {
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.5;
+}
+
+.notification-close {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  transition: color 0.2s;
+}
+
+.notification-close:hover {
+  color: #606266;
+}
+
+.notification-progress {
+  height: 2px;
+  background: #f0f2f5;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: #409eff;
+  transition: width 0.3s ease;
+}
+
+/* 进入动画 */
+.notification-enter-active {
+  animation: slideInRight 0.3s ease-out;
+}
+
+/* 离开动画 */
+.notification-leave-active {
+  animation: slideOutRight 0.3s ease-in;
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+/* 列表项移动动画 */
+.notification-move,
+.notification-enter-active,
+.notification-leave-active {
+  transition: all 0.3s ease;
+}
+
+.notification-leave-active {
+  position: absolute;
+  width: 100%;
+}
+</style>

frontend/src/composables/useNotification.ts

@@ -0,0 +1,154 @@
+import { ref } from 'vue'
+
+export interface NotificationItem {
+  id: string
+  title: string
+  message?: string
+  type?: 'success' | 'warning' | 'info' | 'error'
+  duration?: number
+  showProgress?: boolean
+  progress?: number
+  zIndex?: number
+  onClose?: () => void
+  // 详细进度信息
+  detailTitle?: string
+  detailMessage?: string
+}
+
+const notifications = ref<NotificationItem[]>([])
+let notificationIdCounter = 0
+let zIndexCounter = 1000
+
+export function useNotification() {
+  const addNotification = (notification: Omit<NotificationItem, 'id' | 'zIndex'>) => {
+    const id = `notification-${notificationIdCounter++}`
+    const newNotification: NotificationItem = {
+      ...notification,
+      id,
+      zIndex: ++zIndexCounter,
+    }
+
+    notifications.value.push(newNotification)
+
+    // 自动关闭
+    if (notification.duration && notification.duration > 0) {
+      setTimeout(() => {
+        removeNotification(id)
+      }, notification.duration)
+    }
+
+    return id
+  }
+
+  const removeNotification = (id: string) => {
+    const index = notifications.value.findIndex((n) => n.id === id)
+    if (index !== -1) {
+      const notification = notifications.value[index]
+      notifications.value.splice(index, 1)
+      notification.onClose?.()
+    }
+  }
+
+  const success = (title: string, message?: string, options?: Partial<NotificationItem>) => {
+    return addNotification({
+      title,
+      message,
+      type: 'success',
+      duration: 3000,
+      ...options,
+    })
+  }
+
+  const warning = (title: string, message?: string, options?: Partial<NotificationItem>) => {
+    return addNotification({
+      title,
+      message,
+      type: 'warning',
+      duration: 3000,
+      ...options,
+    })
+  }
+
+  const info = (title: string, message?: string, options?: Partial<NotificationItem>) => {
+    return addNotification({
+      title,
+      message,
+      type: 'info',
+      duration: 3000,
+      ...options,
+    })
+  }
+
+  const error = (title: string, message?: string, options?: Partial<NotificationItem>) => {
+    return addNotification({
+      title,
+      message,
+      type: 'error',
+      duration: 5000,
+      ...options,
+    })
+  }
+
+  const progress = (
+    title: string,
+    current: number,
+    total: number,
+    options?: Partial<NotificationItem>,
+  ) => {
+    const progressPercent = Math.round((current / total) * 100)
+    return addNotification({
+      title,
+      message: `${current}/${total}`,
+      type: 'info',
+      showProgress: true,
+      progress: progressPercent,
+      duration: 0, // 不自动关闭
+      ...options,
+    })
+  }
+
+  const updateProgress = (id: string, current: number, total: number) => {
+    const notification = notifications.value.find((n) => n.id === id)
+    if (notification) {
+      notification.progress = Math.round((current / total) * 100)
+      notification.message = `${current}/${total}`
+    }
+  }
+
+  const updateProgressDetail = (
+    id: string,
+    detailTitle: string,
+    detailMessage: string,
+    current?: number,
+    total?: number
+  ) => {
+    const notification = notifications.value.find((n) => n.id === id)
+    if (notification) {
+      notification.detailTitle = detailTitle
+      notification.detailMessage = detailMessage
+      if (current !== undefined && total !== undefined) {
+        notification.progress = Math.round((current / total) * 100)
+        notification.message = `${current}/${total}`
+      }
+    }
+  }
+
+  const clear = () => {
+    notifications.value.forEach((n) => n.onClose?.())
+    notifications.value = []
+  }
+
+  return {
+    notifications,
+    addNotification,
+    removeNotification,
+    success,
+    warning,
+    info,
+    error,
+    progress,
+    updateProgress,
+    updateProgressDetail,
+    clear,
+  }
+}

frontend/src/layout/components/Main/Task.vue

@@ -107,6 +107,8 @@ async function handleStop() {
     // 无论后端是否成功停止，都重置状态
     isFillingSteps.value = false
     currentStepAbortController.value = null
+    // 标记用户已停止填充
+    agentsStore.setHasStoppedFilling(true)
   }
 }
 
@@ -134,6 +136,8 @@ async function handleSearch() {
     emit('search-start')
     agentsStore.resetAgent()
     agentsStore.setAgentRawPlan({ loading: true })
+    // 重置停止状态
+    agentsStore.setHasStoppedFilling(false)
 
     // 获取大纲
     const outlineData = await api.generateBasePlan({

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

@@ -9,6 +9,8 @@ import { Loading } from '@element-plus/icons-vue'
 import MultiLineTooltip from '@/components/MultiLineTooltip/index.vue'
 import Bg from './Bg.vue'
 import BranchButton from './components/BranchButton.vue'
+import Notification from '@/components/Notification/Notification.vue'
+import { useNotification } from '@/composables/useNotification'
 
 // 判断计划是否就绪
 const planReady = computed(() => {
@@ -57,6 +59,55 @@ const totalSteps = computed(() => {
   return agentsStore.agentRawPlan.data?.['Collaboration Process']?.length || 0
 })
 
+// Notification system
+const { notifications, progress: showProgress, updateProgressDetail, removeNotification } = useNotification()
+const fillingProgressNotificationId = ref<string | null>(null)
+
+// 监听填充进度，显示通知
+watch(
+  [isFillingDetails, completedSteps, totalSteps, () => agentsStore.hasStoppedFilling],
+  ([filling, completed, total, hasStopped]) => {
+    // 如果用户已停止，关闭进度通知
+    if (hasStopped && fillingProgressNotificationId.value) {
+      removeNotification(fillingProgressNotificationId.value)
+      fillingProgressNotificationId.value = null
+      return
+    }
+
+    if (filling && total > 0) {
+      if (!fillingProgressNotificationId.value) {
+        // 创建进度通知
+        fillingProgressNotificationId.value = showProgress(
+          '生成协作流程',
+          completed,
+          total
+        )
+        updateProgressDetail(
+          fillingProgressNotificationId.value,
+          `${completed}/${total}`,
+          '正在分配智能体...',
+          completed,
+          total
+        )
+      } else {
+        // 更新进度通知
+        updateProgressDetail(
+          fillingProgressNotificationId.value,
+          `${completed}/${total}`,
+          '正在分配智能体...',
+          completed,
+          total
+        )
+      }
+    } else if (fillingProgressNotificationId.value && !filling) {
+      // 填充完成，关闭进度通知
+      removeNotification(fillingProgressNotificationId.value)
+      fillingProgressNotificationId.value = null
+    }
+  },
+  { immediate: true }
+)
+
 // 编辑状态管理
 const editingTaskId = ref<string | null>(null)
 const editingContent = ref('')
@@ -274,17 +325,16 @@ defineExpose({
 
 <template>
   <div class="h-full flex flex-col">
+    <!-- Notification 通知系统 -->
+    <Notification
+      :notifications="notifications"
+      @close="(id) => removeNotification(id)"
+    />
+
     <div class="text-[18px] font-bold mb-[18px] text-[var(--color-text-title-header)]">
       任务大纲
     </div>
 
-    <!-- 加载详情提示 -->
-    <div v-if="isFillingDetails" class="detail-loading-hint">
-      <el-icon class="is-loading"><Loading /></el-icon>
-      <span>正在生成任务协作流程...</span>
-      <span class="progress">{{ completedSteps }}/{{ totalSteps }}</span>
-    </div>
-
     <div
       v-loading="agentsStore.agentRawPlan.loading"
       class="flex-1 w-full overflow-y-auto relative"
@@ -426,7 +476,7 @@ defineExpose({
 
               <!-- 未填充智能体时显示Loading -->
               <div
-                v-if="!item.AgentSelection || item.AgentSelection.length === 0"
+                v-if="(!item.AgentSelection || item.AgentSelection.length === 0) && !agentsStore.hasStoppedFilling"
                 class="flex items-center gap-2 text-[var(--color-text-secondary)] text-[14px]"
               >
                 <el-icon class="is-loading" :size="20">
@@ -601,40 +651,6 @@ defineExpose({
   }
 }
 
-// 加载详情提示样式
-.detail-loading-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;
-
-  .progress {
-    color: var(--el-color-primary);
-    font-weight: bold;
-    margin-left: 4px;
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 // 输入框样式
 :deep(.el-input__wrapper) {
   background: transparent;

frontend/src/stores/modules/agents.ts

@@ -359,6 +359,7 @@ export const useAgentsStore = defineStore('agents', () => {
     }
     currentTask.value = undefined
     executePlan.value = []
+    hasStoppedFilling.value = false
   }
 
   // 额外的产物列表
@@ -415,6 +416,14 @@ export const useAgentsStore = defineStore('agents', () => {
     additionalOutputs.value = []
   }
 
+  // 标记是否用户已停止智能体分配过程
+  const hasStoppedFilling = ref(false)
+
+  // 设置停止状态
+  function setHasStoppedFilling(value: boolean) {
+    hasStoppedFilling.value = value
+  }
+
   return {
     agents,
     setAgents,
@@ -460,6 +469,9 @@ export const useAgentsStore = defineStore('agents', () => {
     addConfirmedAgentGroup,
     clearConfirmedAgentGroups,
     clearAllConfirmedAgentGroups,
+    // 停止填充状态
+    hasStoppedFilling,
+    setHasStoppedFilling,
   }
 })