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

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onUnmounted, ref, reactive, nextTick } from 'vue'
+import { computed, onUnmounted, ref, reactive, nextTick, watch, onMounted } from 'vue'
 import { throttle } from 'lodash'
 import { AnchorLocations, BezierConnector } from '@jsplumb/browser-ui'
 import AdditionalOutputCard from './AdditionalOutputCard.vue'
@@ -19,12 +19,9 @@ const emit = defineEmits<{
 
 const agentsStore = useAgentsStore()
 const drawerVisible = ref(false)
-const collaborationProcess = computed(() => {
-  const data = agentsStore.agentRawPlan.data?.['Collaboration Process'] ?? []
-  // console.log('data:', data)
-  return data
 
-  // return agentsStore.agentRawPlan.data?.['Collaboration Process'] ?? []
+const collaborationProcess = computed(() => {
+  return agentsStore.agentRawPlan.data?.['Collaboration Process'] ?? []
 })
 
 // 监听额外产物变化
@@ -201,6 +198,12 @@ async function handleTaskProcess() {
   drawerVisible.value = true
 }
 
+// 重置执行结果
+function handleRefresh() {
+  agentsStore.setExecutePlan([])
+  console.log('🔄 已重置执行结果')
+}
+
 // 添加滚动状态标识
 const isScrolling = ref(false)
 let scrollTimer: ReturnType<typeof setTimeout> | null = null
@@ -226,20 +229,58 @@ const handleMouseEnter = throttle(id => {
   if (!isScrolling.value) {
     createInternalLine(id)
   }
-}, 100)
+}, 0)
 
 const handleMouseLeave = throttle(() => {
   if (!isScrolling.value) {
     createInternalLine()
   }
-}, 100)
+}, 0)
 
 function clear() {
   jsplumb.reset()
 }
 
+// 🆕 封装连线重绘方法
+const redrawInternalLines = (highlightId?: string) => {
+  console.log('🔄 TaskResult: 重新绘制连线', highlightId ? `高亮: ${highlightId}` : '')
+
+  // 等待 DOM 更新完成
+  nextTick(() => {
+    // 清除旧连线
+    jsplumb.reset()
+
+    // 等待 DOM 稳定后重新绘制
+    setTimeout(() => {
+      createInternalLine(highlightId)
+      console.log('✅ TaskResult: 连线重绘完成，任务数:', collaborationProcess.value.length)
+    }, 100)
+  })
+}
+
+// 🆕 监听 collaborationProcess 变化，自动重绘连线
+watch(
+  () => collaborationProcess,
+  () => {
+    console.log('🔍 TaskResult: collaborationProcess 发生变化，触发重绘')
+    redrawInternalLines()
+  },
+  { deep: true }
+)
+
+// 🆕 组件挂载后初始化连线
+onMounted(() => {
+  // 初始化时绘制连线
+  nextTick(() => {
+    setTimeout(() => {
+      createInternalLine()
+      console.log('✅ TaskResult: 初始化连线完成')
+    }, 100)
+  })
+})
+
 //按钮交互状态管理
-const buttonHoverState = ref<'process' | 'execute' | null>(null)
+const buttonHoverState = ref<'process' | 'execute' | 'refresh' | null>(null)
 let buttonHoverTimer: ReturnType<typeof setTimeout> | null = null
 const handleProcessMouseEnter = () => {
   if (buttonHoverTimer) {
@@ -259,6 +300,16 @@ const handleExecuteMouseEnter = () => {
   }
 }
 
+const handleRefreshMouseEnter = () => {
+  if (buttonHoverTimer) {
+    clearTimeout(buttonHoverTimer)
+    buttonHoverTimer = null
+  }
+  if (agentsStore.executePlan.length > 0) {
+    buttonHoverState.value = 'refresh'
+  }
+}
+
 const handleButtonMouseLeave = () => {
   // 添加防抖，防止快速切换时的抖动
   if (buttonHoverTimer) {
@@ -277,18 +328,31 @@ onUnmounted(() => {
 })
 // 计算按钮类名
 const processBtnClass = computed(() => {
+  // 当刷新或执行按钮悬停时，过程按钮变圆形
+  if (buttonHoverState.value === 'refresh' || buttonHoverState.value === 'execute') {
+    return 'circle'
+  }
   return buttonHoverState.value === 'process' ? 'ellipse' : 'circle'
 })
 
 const executeBtnClass = computed(() => {
-  // 鼠标悬停在过程按钮上时，执行按钮变圆形
-  if (buttonHoverState.value === 'process') {
+  // 鼠标悬停在过程按钮或刷新按钮上时，执行按钮变圆形
+  if (buttonHoverState.value === 'process' || buttonHoverState.value === 'refresh') {
     return 'circle'
   }
   //如果有任务数据就显示椭圆形，否则显示圆形
   return agentsStore.agentRawPlan.data ? 'ellipse' : 'circle'
 })
 
+const refreshBtnClass = computed(() => {
+  // 当过程或执行按钮悬停时，刷新按钮变圆形
+  if (buttonHoverState.value === 'process' || buttonHoverState.value === 'execute') {
+    return 'circle'
+  }
+  // 有执行结果就显示椭圆形，否则显示圆形
+  return agentsStore.executePlan.length > 0 ? 'ellipse' : 'circle'
+})
+
 // 计算按钮是否显示文字
 const showProcessText = computed(() => {
   return buttonHoverState.value === 'process'
@@ -301,6 +365,10 @@ const showExecuteText = computed(() => {
   return agentsStore.agentRawPlan.data
 })
 
+const showRefreshText = computed(() => {
+  return buttonHoverState.value === 'refresh'
+})
+
 // 计算按钮标题
 const processBtnTitle = computed(() => {
   return buttonHoverState.value === 'process' ? '任务过程' : '点击查看任务过程'
@@ -310,6 +378,10 @@ const executeBtnTitle = computed(() => {
   return showExecuteText.value ? '任务执行' : '点击运行'
 })
 
+const refreshBtnTitle = computed(() => {
+  return showRefreshText.value ? '重置执行结果' : '点击重置执行状态'
+})
+
 defineExpose({
   createInternalLine,
   clear
@@ -329,6 +401,19 @@ defineExpose({
         class="flex items-center justify-end gap-[14px] task-button-group min-w-[175px]"
         @mouseleave="handleButtonMouseLeave"
       >
+        <!-- 刷新按钮 -->
+        <el-button
+          :class="refreshBtnClass"
+          :color="variables.tertiary"
+          :title="refreshBtnTitle"
+          :disabled="agentsStore.executePlan.length === 0"
+          @mouseenter="handleRefreshMouseEnter"
+          @click="handleRefresh"
+          style="order: 0"
+        >
+          <svg-icon icon-class="refresh" />
+          <span v-if="showRefreshText" class="btn-text">重置</span>
+        </el-button>
         <!-- 任务过程按钮 -->
         <el-button
           :class="processBtnClass"
@@ -680,21 +765,33 @@ defineExpose({
       display: inline-flex !important;
       align-items: center !important;
       justify-content: center !important;
-      transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
+      transition: width 0.2s ease-out, padding 0.2s ease-out, border-radius 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out, filter 0.2s ease-out !important;
       overflow: hidden !important;
       white-space: nowrap !important;
-      border: none !important;
+      border: 1px solid transparent !important;
+      border-color: transparent !important;
       color: var(--color-text-primary) !important;
       position: relative;
-      background-color: var(--color-bg-tertiary);
+      background-color: var(--color-bg-tertiary) !important;
       gap: 0px !important;
       outline: none !important;
       box-shadow: none !important;
       -webkit-tap-highlight-color: transparent !important;
+      backface-visibility: hidden !important;
+      -webkit-backface-visibility: hidden !important;
+      transform: translateZ(0) !important;
+      will-change: transform, width, padding, border-radius !important;
+
+      &::before,
+      &::after {
+        display: none !important;
+      }
+
       &:hover {
-        transform: translateY(-2px) !important;
+        transform: translateY(-2px) translateZ(0) !important;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
         filter: brightness(1.1) !important;
+        border-color: transparent !important;
       }
 
       &.is-disabled {