feat(task):优化任务执行与智能体展示功能

- 更新action.svg图标样式- 重构AgentRepo组件，优化智能体列表展示逻辑
- 改进ExecutePlan组件，支持object类型节点渲染
- 完善TaskResult组件，增加执行计划存储与清理机制
- 调整TaskSyllabus组件，优化卡片激活状态样式
- 在Task组件中添加搜索建议功能
- 更新主题配色变量和全局样式- 替换ElInput为ElAutocomplete组件
- 清理无用的jsplumb连接代码- 优化组件间通信与状态管理

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

@@ -4,7 +4,7 @@ import TaskSyllabus from './TaskSyllabus/index.vue'
 import TaskResult from './TaskResult/index.vue'
 import { Jsplumb } from './utils.ts'
 import { type IRawStepTask, useAgentsStore } from '@/stores'
-import { AnchorLocations, BezierConnector } from '@jsplumb/browser-ui'
+import { BezierConnector } from '@jsplumb/browser-ui'
 
 const agentsStore = useAgentsStore()
 
@@ -19,29 +19,20 @@ const agentRepoJsplumb = new Jsplumb('task-template', {
     },
   },
 })
+
 // 任务流程
-const taskSyllabusRef = ref<{ changeTask: (task?: IRawStepTask, isEmit?: boolean) => void }>()
+const taskSyllabusRef = ref<{
+  changeTask: (task?: IRawStepTask, isEmit?: boolean) => void
+  clear: () => void
+}>()
 // 执行结果
-const taskResultRef = ref<{ createInternalLine: () => void }>()
+const taskResultRef = ref<{
+  createInternalLine: () => void
+  clear: () => void
+}>()
 const taskResultJsplumb = new Jsplumb('task-template')
 
 function setCurrentTask(task: IRawStepTask) {
-  // 智能体库画线
-  agentRepoJsplumb.reset()
-  task.AgentSelection?.forEach((item) => {
-    agentRepoJsplumb.connect(
-      `agent-repo-${item}`,
-      `task-syllabus-flow-agents-${task.Id}`,
-      [AnchorLocations.Left, AnchorLocations.Right],
-      { type: 'input' },
-    )
-  })
-  agentRepoJsplumb.repaintEverything()
-  // 执行结果画线
-  taskResultJsplumb.reset()
-  taskResultJsplumb.connect(`task-syllabus-output-object-${task.Id}`, `task-results-${task.Id}-0`, [AnchorLocations.Right, AnchorLocations.Left])
-  taskResultJsplumb.connect(`task-syllabus-output-object-${task.Id}`, `task-results-${task.Id}-1`, [AnchorLocations.Right, AnchorLocations.Left])
-  taskResultJsplumb.repaintEverything()
   agentsStore.setCurrentTask(task)
   // 更新任务大纲内部的线
   taskSyllabusRef.value?.changeTask(task, false)
@@ -57,8 +48,17 @@ function resetAgentRepoLine() {
   taskResultJsplumb.repaintEverything()
 }
 
+function clear() {
+  taskSyllabusRef.value?.clear()
+  taskResultRef.value?.clear()
+  agentRepoJsplumb.repaintEverything()
+  taskResultJsplumb.repaintEverything()
+}
+
 defineExpose({
   changeTask,
+  resetAgentRepoLine,
+  clear,
 })
 </script>
 
@@ -68,11 +68,11 @@ defineExpose({
     id="task-template"
   >
     <!-- 智能体库 -->
-    <div class="w-[9.5%] min-w-[179px] h-full relative">
+    <div class="w-[9.5%] min-w-[179px] h-full relative flex-shrink-0">
       <AgentRepo @resetAgentRepoLine="agentRepoJsplumb.repaintEverything" />
     </div>
     <!-- 任务大纲 -->
-    <div class="w-[40.5%] min-w-[600px] h-full px-[20px]">
+    <div class="w-[35.5%] min-w-[600px] h-full px-[20px] flex-shrink-0">
       <TaskSyllabus
         ref="taskSyllabusRef"
         @resetAgentRepoLine="resetAgentRepoLine"
@@ -96,14 +96,25 @@ defineExpose({
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
     border-radius: 24px;
     border: 1px solid #414752;
-    background: #29303c;
+    background: var(--color-bg-quinary);
     padding-top: 20px;
     padding-bottom: 20px;
   }
 }
 </style>
-<style>
+<style lang="scss">
 :root {
   --gradient: linear-gradient(to right, #0093eb, #00d2d1);
 }
+
+#task-template {
+  .active-card {
+    border: 2px solid transparent;
+    $bg: var(--el-input-bg-color, var(--el-fill-color-blank));
+    background:
+      linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary)) padding-box,
+      linear-gradient(to right, #00c8d2, #315ab4) border-box;
+    color: var(--color-text);
+  }
+}
 </style>