feat(agent): 支持自定义API配置并优化UI交互

- 为agent.json添加apiUrl、apiKey、apiModel字段支持
- 更新API接口类型定义，支持传递自定义API配置
- 优化AgentRepoList组件UI样式和交互效果
- 增强JSON文件上传校验逻辑，支持API配置验证
- 改进任务结果页面布局和视觉呈现
- 添加任务过程查看抽屉功能
- 实现执行按钮动态样式和悬停效果
- 优化节点连接线渲染逻辑和性能

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

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, computed, reactive } from 'vue'
 
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import { useAgentsStore, useConfigStore } from '@/stores'
 import api from '@/api'
 import { changeBriefs } from '@/utils/collaboration_Brief_FrontEnd.ts'
 import { ElMessage } from 'element-plus'
+import { log } from '@jsplumb/browser-ui'
+import ProcessCard from './TaskTemplate/TaskProcess/ProcessCard.vue'
+import AgentAllocation from './TaskTemplate/TaskSyllabus/components/AgentAllocation.vue'
 
 const emit = defineEmits<{
   (e: 'search-start'): void
@@ -14,10 +17,60 @@ const emit = defineEmits<{
 
 const agentsStore = useAgentsStore()
 const configStore = useConfigStore()
-
 const searchValue = ref('')
 const triggerOnFocus = ref(true)
 const isFocus = ref(false)
+const hasAutoSearched = ref(false) // 防止重复自动搜索
+const agentAllocationVisible = ref(false) // 智能体分配弹窗是否可见
+const isExpanded = ref(false) // 控制搜索框是否展开
+
+// 解析URL参数
+function getUrlParam(param: string): string | null {
+  const urlParams = new URLSearchParams(window.location.search)
+  return urlParams.get(param)
+}
+
+// 自动搜索函数
+async function autoSearchFromUrl() {
+  const query = getUrlParam('q')
+  if (query && !hasAutoSearched.value) {
+    // 解码URL参数
+    const decodedQuery = decodeURIComponent(query)
+    searchValue.value = decodedQuery
+    hasAutoSearched.value = true
+
+    // 延迟执行搜索，确保组件已完全渲染
+    setTimeout(() => {
+      handleSearch()
+    }, 100)
+  }
+}
+
+// 智能体分配
+// 处理智能体分配点击事件
+function handleAgentAllocation() {
+  agentAllocationVisible.value = true
+}
+
+// 关闭智能体分配弹窗
+function handleAgentAllocationClose() {
+  agentAllocationVisible.value = false
+}
+
+// 处理获取焦点事件
+function handleFocus() {
+  isFocus.value = true
+  isExpanded.value = true // 搜索框展开
+}
+
+// 处理失去焦点事件
+function handleBlur() {
+  isFocus.value = false
+  // 延迟收起搜索框，以便点击按钮等操作
+  setTimeout(() => {
+    isExpanded.value = false
+  }, 200)
+}
 
 async function handleSearch() {
   try {
@@ -31,7 +84,7 @@ async function handleSearch() {
     agentsStore.setAgentRawPlan({ loading: true })
     const data = await api.generateBasePlan({
       goal: searchValue.value,
-      inputs: [],
+      inputs: []
     })
     data['Collaboration Process'] = changeBriefs(data['Collaboration Process'])
     agentsStore.setAgentRawPlan({ data })
@@ -47,7 +100,7 @@ const querySearch = (queryString: string, cb: (v: { value: string }[]) => void)
     ? configStore.config.taskPromptWords.filter(createFilter(queryString))
     : configStore.config.taskPromptWords
   // call callback function to return suggestions
-  cb(results.map((item) => ({ value: item })))
+  cb(results.map(item => ({ value: item })))
 }
 
 const createFilter = (queryString: string) => {
@@ -57,6 +110,11 @@ const createFilter = (queryString: string) => {
 }
 
 const taskContainerRef = ref<HTMLDivElement | null>(null)
+
+// 组件挂载时检查URL参数
+onMounted(() => {
+  autoSearchFromUrl()
+})
 </script>
 
 <template>
@@ -67,8 +125,13 @@ const taskContainerRef = ref<HTMLDivElement | null>(null)
     :disabled="agentsStore.agents.length > 0"
   >
     <div class="task-root-container">
-      <div class="task-container" ref="taskContainerRef" id="task-container">
-        <span class="text-[var(--color-text)] font-bold  task-title">任务</span>
+      <div
+        class="task-container"
+        ref="taskContainerRef"
+        id="task-container"
+        :class="{ expanded: isExpanded }"
+      >
+        <span class="text-[var(--color-text-task)] font-bold task-title">任务</span>
         <el-autocomplete
           v-model.trim="searchValue"
           class="task-input"
@@ -82,8 +145,8 @@ const taskContainerRef = ref<HTMLDivElement | null>(null)
           :disabled="!(agentsStore.agents.length > 0)"
           :debounce="0"
           :trigger-on-focus="triggerOnFocus"
-          @focus="isFocus = true"
-          @blur="isFocus = false"
+          @focus="handleFocus"
+          @blur="handleBlur"
           @select="isFocus = false"
         >
         </el-autocomplete>
@@ -101,10 +164,27 @@ const taskContainerRef = ref<HTMLDivElement | null>(null)
             v-if="!agentsStore.agentRawPlan.loading"
             icon-class="paper-plane"
             size="18px"
-            color="var(--color-text)"
+            color="#ffffff"
           />
         </el-button>
       </div>
+      <!-- 智能体分配 -->
+      <!-- <div class="agent-allocation-entry" @click="handleAgentAllocation" title="智能体分配">
+        <SvgIcon icon-class="agent-change" size="20px" color="var(--color-bg)" />
+      </div> -->
+
+      <!-- 智能体分配弹窗 -->
+      <el-dialog
+        v-model="agentAllocationVisible"
+        width="70%"
+        top="10vh"
+        :close-on-click-modal="false"
+        :close-on-press-escape="true"
+        :show-close="false"
+        custom-class="agent-allocation-dialog"
+      >
+        <AgentAllocation @close="handleAgentAllocationClose" />
+      </el-dialog>
     </div>
   </el-tooltip>
 </template>
@@ -120,10 +200,9 @@ const taskContainerRef = ref<HTMLDivElement | null>(null)
   margin: 0 auto;
   border: 2px solid transparent;
   $bg: var(--el-input-bg-color, var(--el-fill-color-blank));
-  background:
-    linear-gradient(var(--color-bg-tertiary), var(--color-bg-tertiary)) padding-box,
+  background: linear-gradient(var(--color-bg-taskbar), var(--color-bg-taskbar)) padding-box,
     linear-gradient(to right, #00c8d2, #315ab4) border-box;
-  border-radius: 40px;
+  border-radius: 30px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -131,28 +210,35 @@ const taskContainerRef = ref<HTMLDivElement | null>(null)
   min-height: 100%;
   overflow: hidden;
   padding: 0 55px 0 47px;
+  transition: all 0.3s ease;
+
+  /* 搜索框展开时的样式 */
+  &.expanded {
+    box-shadow: var(--color-task-shadow);
+  }
 
   :deep(.el-popper) {
     position: static !important;
-    width: 100%;
-    min-width: 100%;
-    background: var(--color-bg-tertiary);
-    box-shadow: none;
+    width: calc(100% + 102px); /*增加左右padding的总和 */
+    min-width: calc(100% + 102px); /* 确保最小宽度也增加 */
+    margin-left: -47px; /* 向左偏移左padding的值 */
+    margin-right: -55px; /*向右偏移右padding的值 */
+    background: var(--color-bg-taskbar);
     border: none;
     transition: height 0s ease-in-out;
-    border-top: 1px solid #494B51;
+    border-top: 1px solid var(--color-border);
     border-radius: 0;
 
-
     li {
       height: 45px;
       box-sizing: border-box;
       line-height: 45px;
       font-size: 14px;
+      padding-left: 27px;
 
       &:hover {
-        background: #1C1E25;
-        color: #00F3FF;
+        background: var(--color-bg-hover);
+        color: var(--color-text-hover);
       }
     }
 
@@ -166,7 +252,7 @@ const taskContainerRef = ref<HTMLDivElement | null>(null)
     width: 100%;
 
     .task-input {
-       height: 100%;
+      height: 100%;
     }
 
     .el-textarea__inner {
@@ -175,8 +261,9 @@ const taskContainerRef = ref<HTMLDivElement | null>(null)
       font-size: 14px;
       height: 100%;
       line-height: 1.5;
-      padding: 18px 0;
+      padding: 18px 0 0 18px;
       resize: none;
+      color: var(--color-text-taskbar);
 
       &::placeholder {
         line-height: 1.2;
@@ -192,11 +279,10 @@ const taskContainerRef = ref<HTMLDivElement | null>(null)
     }
   }
 
-
   .task-title {
     position: absolute;
     top: 28px;
-    left: 10px;
+    left: 27px;
     z-index: 999;
     transform: translateY(-50%);
   }
@@ -221,4 +307,121 @@ const taskContainerRef = ref<HTMLDivElement | null>(null)
     }
   }
 }
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+}
+
+.process-list {
+  padding: 0 8px;
+}
+.process-item {
+  margin-bottom: 16px;
+  padding: 12px;
+  border-radius: 8px;
+  background: var(--color-bg-list);
+  border: 1px solid var(--color-border-default);
+
+  .process-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+
+    .agent-tag {
+      display: inline-block;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .process-text {
+      line-height: 1.6;
+      font-size: 14px;
+      color: var(--el-text-color-primary);
+      white-space: pre-wrap;
+    }
+  }
+
+  .edit-container {
+    margin-top: 8px;
+  }
+}
+
+.process-item:hover {
+  border-color: var(--el-border-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.agent-allocation-entry {
+  position: absolute;
+  right: 0; /* 顶头 */
+  top: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #00aaff; /* 纯蓝色背景 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 170, 255, 0.35);
+  transition: transform 0.2s;
+
+  &:hover {
+    transform: scale(1.08);
+  }
+  &:active {
+    transform: scale(0.96);
+  }
+}
+
+// 智能体分配弹窗样式
+:deep(.agent-allocation-dialog) {
+  .el-dialog {
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+
+    &__header {
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+      margin-right: 0;
+
+      .el-dialog__title {
+        font-size: 18px;
+        font-weight: bold;
+        color: var(--color-text-title);
+      }
+    }
+
+    &__body {
+      padding: 0;
+      max-height: 70vh;
+      overflow: hidden;
+    }
+
+    &__headerbtn {
+      top: 16px;
+      right: 20px;
+
+      .el-dialog__close {
+        color: var(--color-text);
+        font-size: 16px;
+
+        &:hover {
+          color: var(--color-primary);
+        }
+      }
+    }
+  }
+}
 </style>