129 lines
3.3 KiB
Vue
129 lines
3.3 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'
|
|
import { ref } from 'vue'
|
|
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 scrollToElementTop(elementId: string) {
|
|
const element = document.getElementById(elementId)
|
|
if (element) {
|
|
element.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
})
|
|
}
|
|
}
|
|
|
|
function handleTaskSyllabusCurrentTask(task: IRawStepTask) {
|
|
scrollToElementTop(`task-results-${task.Id}-0`)
|
|
agentsStore.setCurrentTask(task)
|
|
}
|
|
|
|
function handleTaskResultCurrentTask(task: IRawStepTask) {
|
|
scrollToElementTop(`task-syllabus-flow-${task.Id}`)
|
|
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()
|
|
}
|
|
|
|
const additionalOutputs = ref<string[]>([])
|
|
const handleAddOutput = (outputName: string) => {
|
|
additionalOutputs.value.unshift(outputName)
|
|
}
|
|
|
|
defineExpose({
|
|
changeTask,
|
|
resetAgentRepoLine,
|
|
clear
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 删除overflow-hidden -->
|
|
<div
|
|
class="task-template flex gap-6 items-center h-[calc(100%-84px)] relative"
|
|
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="handleTaskSyllabusCurrentTask"
|
|
@add-output="handleAddOutput"
|
|
/>
|
|
</div>
|
|
<!-- 执行结果 -->
|
|
<div class="flex-1 h-full">
|
|
<TaskResult
|
|
ref="taskResultRef"
|
|
@refresh-line="taskResultJsplumb.repaintEverything"
|
|
@set-current-task="handleTaskResultCurrentTask"
|
|
:additional-outputs="additionalOutputs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.task-template {
|
|
& > div {
|
|
box-shadow: var(--color-card-shadow-three);
|
|
border-radius: 24px;
|
|
border: 1px solid var(--color-card-border-three);
|
|
background: var(--color-bg-three);
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
</style>
|