iod/AgentCoord
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 更新action.svg图标样式- 重构AgentRepo组件，优化智能体列表展示逻辑
- 改进ExecutePlan组件，支持object类型节点渲染
- 完善TaskResult组件，增加执行计划存储与清理机制
- 调整TaskSyllabus组件，优化卡片激活状态样式
- 在Task组件中添加搜索建议功能
- 更新主题配色变量和全局样式- 替换ElInput为ElAutocomplete组件
- 清理无用的jsplumb连接代码- 优化组件间通信与状态管理
This commit is contained in:
zhaoweijie
2025-10-31 18:42:31 +08:00
parent 0c571dec21
commit 974af053ca
12 changed files with 372 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/layout/components/Main/TaskTemplate/TaskResult/index.vue
View File

@@ -8,11 +8,9 @@ import { getActionTypeDisplay, getAgentMapIcon } from '@/layout/components/confi
import { type ConnectArg, Jsplumb } from '@/layout/components/Main/TaskTemplate/utils.ts'
import variables from '@/styles/variables.module.scss'
import { type IRawStepTask, useAgentsStore } from '@/stores'
import api, { type IExecuteRawResponse } from '@/api'
import api from '@/api'
import ExecutePlan from './ExecutePlan.vue'
import Iod from './Iod.vue'
const emit = defineEmits<{
(e: 'refreshLine'): void
@@ -21,6 +19,7 @@ const emit = defineEmits<{
const agentsStore = useAgentsStore()
const collaborationProcess = computed(() => {
return agentsStore.agentRawPlan.data?.['Collaboration Process'] ?? []
})
@@ -99,13 +98,6 @@ function createInternalLine(id?: string) {
const color = getActionTypeDisplay(i.ActionType)?.color ?? ''
const sourceId = `task-results-${jitem.Id}-0-${i.ID}`
const targetId = `task-results-${item.Id}-1`
// jsplumb.connect(sourceId, targetId, [AnchorLocations.Right, AnchorLocations.Right], {
// stops: [
// [0, color],
// [1, color],
// ],
// transparent: sourceId !== id,
// })
arr.push({
sourceId,
targetId,
@@ -132,13 +124,6 @@ function createInternalLine(id?: string) {
const color = getActionTypeDisplay(i.ActionType)?.color ?? ''
const sourceId = `task-results-${item.Id}-0-${i.ID}`
const targetId = `task-results-${item.Id}-0-${i2.ID}`
// jsplumb.connect(sourceId, targetId, [AnchorLocations.Right, AnchorLocations.Right], {
// stops: [
// [0, color],
// [1, color],
// ],
// transparent: sourceId !== id,
// })
arr.push({
sourceId,
targetId,
@@ -160,12 +145,12 @@ function createInternalLine(id?: string) {
jsplumb.repaintEverything()
}
const results = ref<IExecuteRawResponse[]>([])
const loading = ref(false)
async function handleRun() {
try {
loading.value = true
results.value = await api.executePlan(agentsStore.agentRawPlan.data!)
const d = await api.executePlan(agentsStore.agentRawPlan.data!)
agentsStore.setExecutePlan(d)
} finally {
loading.value = false
}
@@ -204,8 +189,13 @@ const handleMouseLeave = throttle(() => {
}
}, 100)
function clear() {
jsplumb.reset()
}
defineExpose({
createInternalLine,
clear,
})
</script>
@@ -218,9 +208,19 @@ defineExpose({
<el-button circle :color="variables.tertiary" disabled title="点击刷新">
<svg-icon icon-class="refresh" />
</el-button>
<el-button circle :color="variables.tertiary" title="点击运行" @click="handleRun">
<svg-icon icon-class="action" />
</el-button>
<el-popover :disabled="Boolean(agentsStore.agentRawPlan.data)" title="请先输入要执行的任务">
<template #reference>
<el-button
circle
:color="variables.tertiary"
title="点击运行"
:disabled="!agentsStore.agentRawPlan.data"
@click="handleRun"
>
<svg-icon icon-class="action" />
</el-button>
</template>
</el-popover>
</div>
</div>
<!-- 内容 -->
@@ -233,6 +233,7 @@ defineExpose({
<div v-for="item in collaborationProcess" :key="item.Id" class="card-item">
<el-card
class="card-item w-full relative"
:class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
shadow="hover"
:id="`task-results-${item.Id}-0`"
@click="emit('setCurrentTask', item)"
@@ -240,24 +241,18 @@ defineExpose({
<div class="text-[18px] mb-[15px]">{{ item.StepName }}</div>
<!-- 折叠面板 -->
<el-collapse @change="handleCollapse">
<!-- <el-tooltip-->
<!-- :disabled="Boolean(true || results.length || loading)"-->
<!-- placement="top"-->
<!-- effect="light"-->
<!-- content="请点击右上角的循行按钮，查看运行结果"-->
<!-- >-->
<el-collapse-item
v-for="item1 in item.TaskProcess"
:key="`task-results-${item.Id}-${item1.ID}`"
:name="`task-results-${item.Id}-${item1.ID}`"
:disabled="Boolean(!results.length || loading)"
:disabled="Boolean(!agentsStore.executePlan.length || loading)"
@mouseenter="() => handleMouseEnter(`task-results-${item.Id}-0-${item1.ID}`)"
@mouseleave="handleMouseLeave"
>
<template v-if="loading" #icon>
<SvgIcon icon-class="loading" size="20px" class="animate-spin" />
</template>
<template v-else-if="!results.length" #icon>
<template v-else-if="!agentsStore.executePlan.length" #icon>
<span></span>
</template>
<template #title>
@@ -288,20 +283,37 @@ defineExpose({
<ExecutePlan
:action-id="item1.ID"
:node-id="item.StepName"
:execute-plans="results"
:execute-plans="agentsStore.executePlan"
/>
</el-collapse-item>
<!-- </el-tooltip>-->
</el-collapse>
</el-card>
<el-card
class="card-item w-full relative"
class="card-item w-full relative output-object-card"
shadow="hover"
:class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
:id="`task-results-${item.Id}-1`"
@click="emit('setCurrentTask', item)"
>
<div class="text-[18px]">{{ item.OutputObject }}</div>
<!-- <div class="text-[18px]">{{ item.OutputObject }}</div>-->
<el-collapse @change="handleCollapse">
<el-collapse-item
class="output-object"
:disabled="Boolean(!agentsStore.executePlan.length || loading)"
>
<template v-if="loading" #icon>
<SvgIcon icon-class="loading" size="20px" class="animate-spin" />
</template>
<template v-else-if="!agentsStore.executePlan.length" #icon>
<span></span>
</template>
<template #title>
<div class="text-[18px]">{{ item.OutputObject }}</div>
</template>
<ExecutePlan :node-id="item.OutputObject" :execute-plans="agentsStore.executePlan" />
</el-collapse-item>
</el-collapse>
</el-card>
</div>
</div>
@@ -344,6 +356,27 @@ defineExpose({
}
}
.output-object {
.el-collapse-item__header {
background: none;
.el-collapse-item__title {
background: none;
}
}
.el-collapse-item__wrap {
background: none;
.card-item {
background: var(--color-bg-secondary);
padding: 25px;
padding-top: 10px;
border-radius: 7px;
}
}
}
.el-collapse-item__wrap {
border: none;
background: var(--color-bg-secondary);
@@ -358,6 +391,20 @@ defineExpose({
}
}
.output-object-card {
:deep(.el-card__body) {
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
}
.active-card {
background:
linear-gradient(var(--color-bg-tertiary), var(--color-bg-tertiary)) padding-box,
linear-gradient(to right, #00c8d2, #315ab4) border-box;
}
.card-item + .card-item {
margin-top: 10px;
}