974af053ca
- 更新action.svg图标样式- 重构AgentRepo组件，优化智能体列表展示逻辑 - 改进ExecutePlan组件，支持object类型节点渲染 - 完善TaskResult组件，增加执行计划存储与清理机制 - 调整TaskSyllabus组件，优化卡片激活状态样式 - 在Task组件中添加搜索建议功能 - 更新主题配色变量和全局样式- 替换ElInput为ElAutocomplete组件 - 清理无用的jsplumb连接代码- 优化组件间通信与状态管理
121 lines
3.0 KiB
Vue
121 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import AgentRepo from './AgentRepo/index.vue'
|
|
import TaskSyllabus from './TaskSyllabus/index.vue'
|
|
import TaskResult from './TaskResult/index.vue'
|
|
import { Jsplumb } from './utils.ts'
|
|
import { type IRawStepTask, useAgentsStore } from '@/stores'
|
|
import { BezierConnector } from '@jsplumb/browser-ui'
|
|
|
|
const agentsStore = useAgentsStore()
|
|
|
|
// 智能体库
|
|
const agentRepoJsplumb = new Jsplumb('task-template', {
|
|
connector: {
|
|
type: BezierConnector.type,
|
|
options: {
|
|
curviness: 30, // 曲线弯曲程度
|
|
stub: 20, // 添加连接点与端点的距离
|
|
alwaysRespectStubs: true,
|
|
},
|
|
},
|
|
})
|
|
|
|
// 任务流程
|
|
const taskSyllabusRef = ref<{
|
|
changeTask: (task?: IRawStepTask, isEmit?: boolean) => void
|
|
clear: () => void
|
|
}>()
|
|
// 执行结果
|
|
const taskResultRef = ref<{
|
|
createInternalLine: () => void
|
|
clear: () => void
|
|
}>()
|
|
const taskResultJsplumb = new Jsplumb('task-template')
|
|
|
|
function setCurrentTask(task: IRawStepTask) {
|
|
agentsStore.setCurrentTask(task)
|
|
// 更新任务大纲内部的线
|
|
taskSyllabusRef.value?.changeTask(task, false)
|
|
}
|
|
|
|
function changeTask() {
|
|
taskResultRef.value?.createInternalLine()
|
|
taskSyllabusRef.value?.changeTask()
|
|
}
|
|
|
|
function resetAgentRepoLine() {
|
|
agentRepoJsplumb.repaintEverything()
|
|
taskResultJsplumb.repaintEverything()
|
|
}
|
|
|
|
function clear() {
|
|
taskSyllabusRef.value?.clear()
|
|
taskResultRef.value?.clear()
|
|
agentRepoJsplumb.repaintEverything()
|
|
taskResultJsplumb.repaintEverything()
|
|
}
|
|
|
|
defineExpose({
|
|
changeTask,
|
|
resetAgentRepoLine,
|
|
clear,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="task-template flex gap-6 items-center h-[calc(100%-67px)] relative overflow-hidden"
|
|
id="task-template"
|
|
>
|
|
<!-- 智能体库 -->
|
|
<div class="w-[9.5%] min-w-[179px] h-full relative flex-shrink-0">
|
|
<AgentRepo @resetAgentRepoLine="agentRepoJsplumb.repaintEverything" />
|
|
</div>
|
|
<!-- 任务大纲 -->
|
|
<div class="w-[35.5%] min-w-[600px] h-full px-[20px] flex-shrink-0">
|
|
<TaskSyllabus
|
|
ref="taskSyllabusRef"
|
|
@resetAgentRepoLine="resetAgentRepoLine"
|
|
@set-current-task="setCurrentTask"
|
|
/>
|
|
</div>
|
|
<!-- 执行结果 -->
|
|
<div class="flex-1 h-full">
|
|
<TaskResult
|
|
ref="taskResultRef"
|
|
@refresh-line="taskResultJsplumb.repaintEverything"
|
|
@set-current-task="setCurrentTask"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.task-template {
|
|
& > div {
|
|
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
|
|
border-radius: 24px;
|
|
border: 1px solid #414752;
|
|
background: var(--color-bg-quinary);
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
</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>
|