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

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;