AgentCoord/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/index.vue

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
import { getAgentMapIcon } from '@/layout/components/config.ts'
import { type ConnectArg, Jsplumb } from '@/layout/components/Main/TaskTemplate/utils.ts'
import { type IRawStepTask, useAgentsStore } from '@/stores'
import { computed } from 'vue'
import { AnchorLocations } from '@jsplumb/browser-ui'
import MultiLineTooltip from '@/components/MultiLineTooltip/index.vue'

import Bg from './Bg.vue'

const emit = defineEmits<{
  (el: 'resetAgentRepoLine'): void
  (el: 'setCurrentTask', task: IRawStepTask): void
}>()

const jsplumb = new Jsplumb('task-syllabus')

const handleScroll = () => {
  emit('resetAgentRepoLine')
}

const agentsStore = useAgentsStore()

const collaborationProcess = computed(() => {
  return agentsStore.agentRawPlan.data?.['Collaboration Process'] ?? []
})

function handleCurrentTask(task: IRawStepTask, transparent: boolean): ConnectArg[] {
  // 创建当前流程与产出的连线
  const arr: ConnectArg[] = [
    {
      sourceId: `task-syllabus-flow-${task.Id}`,
      targetId: `task-syllabus-output-object-${task.Id}`,
      anchor: [AnchorLocations.Right, AnchorLocations.Left],
      config: {
        transparent,
      },
    },
  ]

  // 创建当前产出与流程的连线
  task.InputObject_List?.forEach((item) => {
    const id = collaborationProcess.value.find((i) => i.OutputObject === item)?.Id
    if (id) {
      arr.push({
        sourceId: `task-syllabus-output-object-${id}`,
        targetId: `task-syllabus-flow-${task.Id}`,
        anchor: [AnchorLocations.Left, AnchorLocations.Right],
        config: {
          type: 'output',
          transparent,
        },
      })
    }
  })

  return arr
}

function changeTask(task?: IRawStepTask, isEmit?: boolean) {
  jsplumb.reset()
  const arr: ConnectArg[] = []
  agentsStore.agentRawPlan.data?.['Collaboration Process']?.forEach((item) => {
    arr.push(...handleCurrentTask(item, item.Id !== task?.Id))
  })
  jsplumb.connects(arr)
  if (isEmit && task) {
    emit('setCurrentTask', task)
  }
}

function clear() {
  jsplumb.reset()
}

defineExpose({
  changeTask,
  clear,
})
</script>

<template>
  <div class="h-full flex flex-col">
    <div class="text-[18px] font-bold mb-[18px]">任务大纲</div>

    <div
      v-loading="agentsStore.agentRawPlan.loading"
      class="flex-1 w-full overflow-y-auto relative"
      @scroll="handleScroll"
    >
      <div v-show="collaborationProcess.length > 0" class="w-full relative min-h-full" id="task-syllabus">
        <Bg />

        <div class="w-full flex items-center gap-[14%] mb-[35px]">
          <div class="flex-1 flex justify-center">
            <div
              class="card-item w-[45%] h-[41px] flex justify-center relative z-99 items-center rounded-[20px] bg-[var(--color-bg-tertiary)]"
            >
              流程
            </div>
          </div>

          <div class="flex-1 flex justify-center">
            <div
              class="card-item w-[45%] h-[41px] flex justify-center relative z-99 items-center rounded-[20px] bg-[var(--color-bg-tertiary)]"
            >
              产物
            </div>
          </div>
        </div>

        <div
          v-for="item in collaborationProcess"
          :key="item.Id"
          class="card-item w-full flex items-center gap-[14%]"
        >
          <!--  流程卡片 -->
          <el-card
            class="w-[43%] overflow-y-auto relative z-99 task-syllabus-flow-card"
            :class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
            shadow="hover"
            :id="`task-syllabus-flow-${item.Id}`"
            @click="changeTask(item, true)"
          >
            <MultiLineTooltip placement="right" :text="item.StepName" :lines="2">
              <div class="text-[18px] font-bold text-center">
                {{ item.StepName }}
              </div>
            </MultiLineTooltip>
            <div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
            <MultiLineTooltip placement="right" :text="item.StepName" :lines="3">
              <div
                class="text-[14px] text-[var(--color-text-secondary)]"
                :title="item.TaskContent"
              >
                {{ item.TaskContent }}
              </div>
            </MultiLineTooltip>
            <div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
            <div
              class="flex items-center gap-2 overflow-y-auto flex-wrap relative w-full max-h-[72px]"
            >
              <!--  连接到智能体库的连接点 -->
              <div
                class="absolute left-[-10px] top-1/2 transform -translate-y-1/2"
                :id="`task-syllabus-flow-agents-${item.Id}`"
              ></div>
              <el-tooltip
                v-for="agentSelection in item.AgentSelection"
                :key="agentSelection"
                effect="light"
                placement="right"
              >
                <template #content>
                  <div class="w-[150px]">
                    <div class="text-[18px] font-bold">{{ agentSelection }}</div>
                    <div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
                    <div>
                      {{
                        item.TaskProcess.find((i) => i.AgentName === agentSelection)?.Description
                      }}
                    </div>
                  </div>
                </template>
                <div
                  class="w-[31px] h-[31px] rounded-full flex items-center justify-center"
                  :style="{ background: getAgentMapIcon(agentSelection).color }"
                >
                  <svg-icon
                    :icon-class="getAgentMapIcon(agentSelection).icon"
                    color="var(--color-text)"
                    size="24px"
                  />
                </div>
              </el-tooltip>
            </div>
          </el-card>
          <!--  产物卡片 -->
          <el-card
            class="w-[43%] relative"
            shadow="hover"
            :class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
            :id="`task-syllabus-output-object-${item.Id}`"
          >
            <div class="text-[18px] font-bold text-center">{{ item.OutputObject }}</div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.task-syllabus-flow-card {
  :deep(.el-card__body) {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
  }
}
</style>