AgentCoord/src/layout/components/Main/TaskTemplate/AgentRepo/index.vue

<script setup lang="ts">
import { ElNotification } from 'element-plus'
import { pick } from 'lodash'

import api from '@/api/index.ts'

import SvgIcon from '@/components/SvgIcon/index.vue'
import {
  agentMapDuty,
  getActionTypeDisplay,
  getAgentMapIcon,
} from '@/layout/components/config.ts'
import { type TaskProcess, useAgentsStore } from '@/stores'
import { onMounted } from 'vue'
import { v4 as uuidv4 } from 'uuid'

const emit = defineEmits<{
  (el: 'resetAgentRepoLine'): void
}>()

const agentsStore = useAgentsStore()

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

onMounted(() => {
  // 如果已上传就重新发送给后端
  if (agentsStore.agents.length) {
    void api.setAgents(agentsStore.agents.map((item) => pick(item, ['Name', 'Profile'])))
  }
})

// 自定义提示框鼠标移入小红点时显示
const tooltipVisibleKey = ref('')
const tooltipPosition = ref({ x: 0, y: 0 })

const showTooltip = (event: MouseEvent, item: TaskProcess & { key: string }) => {
  tooltipVisibleKey.value = item.key
  const rect = (event.target as HTMLElement).getBoundingClientRect()
  tooltipPosition.value = {
    x: rect.left + rect.width / 2,
    y: rect.top - 10,
  }
}

const hideTooltip = () => {
  tooltipVisibleKey.value = ''
}

// 上传agent文件
const fileInput = ref<HTMLInputElement>()

const triggerFileSelect = () => {
  fileInput.value?.click()
}

const handleFileSelect = (event: Event) => {
  const input = event.target as HTMLInputElement
  if (input.files && input.files[0]) {
    const file = input.files[0]
    readFileContent(file)
  }
}

const readFileContent = async (file: File) => {
  const reader = new FileReader()
  reader.onload = async (e) => {
    if (!e.target?.result) {
      return
    }
    try {
      const json = JSON.parse(e.target.result?.toString?.() ?? '{}')
      // 处理 JSON 数据
      if (Array.isArray(json)) {
        const isValid = json.every(
          (item) =>
            typeof item.Name === 'string' &&
            typeof item.Icon === 'string' &&
            typeof item.Profile === 'string',
        )
        if (isValid) {
          // 处理有效的 JSON 数据
          agentsStore.setAgents(
            json.map((item) => ({
              Name: item.Name,
              Icon: item.Icon.replace(/\.png$/, ''),
              Profile: item.Profile,
            })),
          )
          await api.setAgents(json.map((item) => pick(item, ['Name', 'Profile'])))
        } else {
          ElNotification.error({
            title: '错误',
            message: 'JSON 格式错误',
          })
        }
      } else {
        console.error('JSON is not an array')
        ElNotification.error({
          title: '错误',
          message: 'JSON 格式错误',
        })
      }
    } catch (e) {
      console.error(e)
    }
  }
  reader.readAsText(file)
}

const taskProcess = computed(() => {
  const list = agentsStore.currentTask?.TaskProcess ?? []
  return list.map((item) => ({
    ...item,
    key: uuidv4(),
  }))
})
</script>

<template>
  <div class="agent-repo h-full flex flex-col">
    <!-- 头部 -->
    <div class="flex items-center justify-between">
      <span class="text-[18px] font-bold">智能体库</span>
      <!-- 上传文件 -->
      <input type="file" accept=".json" @change="handleFileSelect" class="hidden" ref="fileInput" />
      <div class="plus-button" @click="triggerFileSelect">
        <svg-icon icon-class="plus" color="var(--color-text)" size="18px" />
      </div>
    </div>
    <!-- 人员列表 -->
    <div class="mt-[18px] flex-1 overflow-y-auto relative" @scroll="handleScroll">
      <div
        class="flex items-center justify-between user-item relative"
        v-for="item in agentsStore.agents"
        :key="item.Name"
      >
        <!--  右侧链接点 -->
        <div
          class="absolute right-0 top-1/2 transform -translate-y-1/2"
          :id="`agent-repo-${item.Name}`"
        ></div>
        <div
          class="w-[41px] h-[41px] rounded-full flex items-center justify-center"
          :style="{ background: getAgentMapIcon(item.Name).color }"
        >
          <svg-icon
            :icon-class="getAgentMapIcon(item.Name).icon"
            color="var(--color-text)"
            size="24px"
          />
        </div>
        <div class="text-[14px] flex flex-col items-end justify-end">
          <div class="flex items-center gap-[7px]">
            <div
              v-for="item1 in taskProcess.filter((i) => i.AgentName === item.Name)"
              :key="item1.key"
              class="relative inline-block"
            >
              <el-popover
                placement="bottom"
                :width="200"
                trigger="click"
                :content="item1.Description"
                :title="getActionTypeDisplay(item1.ActionType)?.name"
              >
                <template #reference>
                  <div class="group relative inline-block">
                    <!-- 小圆点 -->
                    <div
                      class="w-[6px] h-[6px] rounded-full"
                      :style="{ background: getActionTypeDisplay(item1.ActionType)?.color }"
                      @mouseenter="(el) => showTooltip(el, item1)"
                      @mouseleave="hideTooltip"
                    ></div>

                    <!-- 弹窗 -->
                    <teleport to="body">
                      <div
                        v-if="tooltipVisibleKey === item1.key"
                        class="fixed transform -translate-x-1/2 -translate-y-full mb-2 p-2 bg-[var(--el-bg-color-overlay)] text-sm rounded-[8px] z-50"
                        :style="{
                          left: tooltipPosition.x + 'px',
                          top: tooltipPosition.y + 'px',
                        }"
                      >
                        {{ getActionTypeDisplay(item1.ActionType)?.name }}
                      </div>
                    </teleport>
                  </div>
                </template>
              </el-popover>
            </div>
          </div>
          <span class="mb-1">{{ item.Name }}</span>
        </div>
      </div>
    </div>
    <!-- 底部提示栏 -->
    <div class="w-full grid grid-cols-3 gap-x-[10px] bg-[#1d222b] rounded-[20px] p-[8px] mt-[10px]">
      <div
        v-for="item in Object.values(agentMapDuty)"
        :key="item.key"
        class="flex items-center justify-center gap-x-1"
      >
        <span class="text-[12px]">{{ item.name }}</span>
        <div class="w-[8px] h-[8px] rounded-full" :style="{ background: item.color }"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.agent-repo {
  padding: 0 8px;
  .plus-button {
    background: #1d2128;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #374151;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }
  }

  .user-item {
    background: #1d222b;
    border-radius: 20px;
    padding-right: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #969696;

    & + .user-item {
      margin-top: 8px;
    }

    &:hover {
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
      color: #b8b8b8;
    }
  }
}
</style>