feat:三个窗口接口联调版本

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

@@ -3,7 +3,7 @@ import SvgIcon from '@/components/SvgIcon/index.vue'
 import { getAgentMapIcon } from '@/layout/components/config.ts'
 import { type ConnectArg, Jsplumb } from '@/layout/components/Main/TaskTemplate/utils.ts'
 import { type IRawStepTask, useAgentsStore } from '@/stores'
-import { computed, ref, nextTick } from 'vue'
+import { computed, ref, nextTick, watch, onMounted } from 'vue'
 import { AnchorLocations } from '@jsplumb/browser-ui'
 import MultiLineTooltip from '@/components/MultiLineTooltip/index.vue'
 import Bg from './Bg.vue'
@@ -15,7 +15,6 @@ const planReady = computed(() => {
 })
 
 const openPlanModification = () => {
-  console.log('打开分支修改窗口')
   agentsStore.openPlanModification()
 }
 
@@ -202,6 +201,56 @@ function clear() {
   jsplumb.reset()
 }
 
+// 🆕 封装连线重绘方法
+const redrawConnections = () => {
+  console.log('🔄 重新绘制 jsplumb 连线')
+
+  // 等待 DOM 更新完成
+  nextTick(() => {
+    // 清除旧连线
+    jsplumb.reset()
+
+    // 等待 DOM 稳定后重新绘制
+    setTimeout(() => {
+      const arr: ConnectArg[] = []
+      const currentTaskId = agentsStore.currentTask?.Id
+
+      // 重新绘制所有连线
+      collaborationProcess.value.forEach(item => {
+        arr.push(...handleCurrentTask(item, item.Id !== currentTaskId))
+      })
+
+      jsplumb.connects(arr)
+      console.log('✅ jsplumb 连线重绘完成，任务数:', collaborationProcess.value.length)
+    }, 100)
+  })
+}
+
+// 🆕 监听 collaborationProcess 变化，自动重绘连线
+watch(
+  () => collaborationProcess,
+  () => {
+    console.log('🔍 collaborationProcess 发生变化，触发重绘')
+    redrawConnections()
+  },
+  { deep: true }
+)
+
+// 🆕 组件挂载后初始化连线
+onMounted(() => {
+  // 初始化时绘制连线
+  nextTick(() => {
+    setTimeout(() => {
+      const arr: ConnectArg[] = []
+      collaborationProcess.value.forEach(item => {
+        arr.push(...handleCurrentTask(item, true))
+      })
+      jsplumb.connects(arr)
+      console.log('✅ 初始化 jsplumb 连线完成')
+    }, 100)
+  })
+})
+
 defineExpose({
   changeTask,
   clear