Initial commit: Multi-Agent Coordination Platform

- Vue 3 + TypeScript + Vite project structure
- Element Plus UI components with dark theme
- Pinia state management for agents and tasks
- JSPlumb integration for visual workflow editing
- SVG icon system for agent roles
- Axios request layer with API proxy configuration
- Tailwind CSS for styling
- Docker deployment with Caddy web server
- Complete development toolchain (ESLint, Prettier, Vitest)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/layout/components/Header.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'AppHeader'
+})
+</script>
+
+<template>
+  <div class="bg-[var(--color-bg-secondary)] h-[60px] relative pl-[27px] font-[900] text-[24px]">
+    <div class="absolute left-0 h-full flex items-center">
+      <img class="w-[36.8px] h-[36.8px] rounded-full mr-[12px]" src="/logo.jpg" alt="logo">
+      <span class="text-[#9E0000]">数联网</span>众创智能体
+    </div>
+    <div class="text-center h-full w-full tracking-[8.5px] flex items-center justify-center">多智能体协同平台</div>
+  </div>
+</template>

src/layout/components/Main/Task.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import { useAgentsStore } from '@/stores'
+import api from '@/api'
+import { changeBriefs } from '@/utils/collaboration_Brief_FrontEnd.ts'
+
+const emit = defineEmits<{
+  (e: 'search', value: string): void
+}>()
+
+const agentsStore = useAgentsStore()
+
+const searchValue = ref('')
+
+async function handleSearch() {
+  try {
+    agentsStore.setAgentRawPlan({ loading: true })
+    const data = await api.generateBasePlan({
+      goal: searchValue.value,
+      inputs: [],
+    })
+    data['Collaboration Process'] = changeBriefs(data['Collaboration Process'])
+    agentsStore.setAgentRawPlan({ data })
+    emit('search', searchValue.value)
+  } finally {
+    agentsStore.setAgentRawPlan({ loading: false })
+  }
+}
+</script>
+
+<template>
+  <el-tooltip
+    content="请先点击智能体库右侧的按钮上传智能体信息"
+    placement="top"
+    effect="light"
+    :disabled="agentsStore.agents.length > 0"
+  >
+    <div class="w-full flex justify-center mb-[27px]">
+      <el-input
+        v-model.trim="searchValue"
+        class="task-input"
+        size="large"
+        placeholder="请输入您的任务"
+        @change="agentsStore.setSearchValue"
+        :disabled="!(agentsStore.agents.length > 0)"
+      >
+        <template #prefix>
+          <span class="text-[var(--color-text)] font-bold">任务</span>
+        </template>
+        <template #suffix>
+          <el-button
+            class="task-button"
+            color="linear-gradient(to right, #00C7D2, #315AB4)"
+            size="large"
+            title="点击搜索任务"
+            circle
+            :loading="agentsStore.agentRawPlan.loading"
+            @click="handleSearch"
+          >
+            <SvgIcon
+              v-if="!agentsStore.agentRawPlan.loading"
+              icon-class="paper-plane"
+              size="18px"
+              color="var(--color-text)"
+            />
+          </el-button>
+        </template>
+      </el-input>
+    </div>
+  </el-tooltip>
+</template>
+
+<style scoped lang="scss">
+.task-input {
+  width: 40%;
+  height: 60px;
+  margin: 0 auto;
+
+  :deep(.el-input__wrapper) {
+    border-radius: 40px;
+    box-shadow: none;
+    border: 2px solid transparent;
+    $bg: var(--el-input-bg-color, var(--el-fill-color-blank));
+    background:
+      linear-gradient(var(--color-bg-tertiary), var(--color-bg-tertiary)) padding-box,
+      linear-gradient(to right, #00c8d2, #315ab4) border-box;
+    font-size: 18px;
+
+    .el-icon.is-loading {
+      & + span {
+        display: none;
+      }
+    }
+  }
+
+  .task-button {
+    background: linear-gradient(to right, #00c7d2, #315ab4);
+    border: none; // 如果需要移除边框
+  }
+}
+</style>

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

@@ -0,0 +1,253 @@
+<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>

src/layout/components/Main/TaskTemplate/TaskResult/ExecutePlan.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { IExecuteRawResponse } from '@/api'
+import { computed } from 'vue'
+import MarkdownIt from 'markdown-it'
+import DOMPurify from 'dompurify'
+import Iod from './Iod.vue'
+
+const props = defineProps<{
+  executePlans: IExecuteRawResponse[]
+  nodeId?: string
+  actionId?: string
+}>()
+
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+})
+
+const data = computed(() => {
+  for (const result of props.executePlans) {
+    if (result.NodeId === props.nodeId && result.ActionHistory) {
+      for (const action of result.ActionHistory) {
+        if (action.ID === props.actionId) {
+          return action
+        }
+      }
+    }
+  }
+  return null
+})
+
+const action_Result = computed(() => {
+  const html = md.render(data.value?.Action_Result ?? '')
+  return DOMPurify.sanitize(html)
+})
+</script>
+
+<template>
+  <div v-if="data" class="card-item w-full pl-[56px] pr-[41px]">
+    <!-- 分割线 -->
+    <div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
+    <div class="text-[16px] flex items-center gap-1 text-[var(--color-text-secondary)]">
+      {{ data.Description }}
+      <Iod />
+    </div>
+    <div class="rounded-[8px] p-[15px] text-[14px] bg-[var(--color-bg-quaternary)] mt-1">
+      <div class="markdown-content max-h-[240px] overflow-y-auto" v-html="action_Result"></div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.card-item + .card-item {
+  margin-top: 10px;
+}
+</style>

src/layout/components/Main/TaskTemplate/TaskResult/Iod.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { readConfig } from '@/utils/readJson.ts'
+import { onMounted } from 'vue'
+
+interface Iod {
+  name: string
+  data_space: string
+  doId: string
+  fromRepo: string
+}
+
+const data = ref<Iod[]>([])
+const displayIndex = ref(0)
+
+const displayIod = computed(() => {
+  return data.value[displayIndex.value]!
+})
+
+onMounted(async () => {
+  const res = await readConfig<{ data: Iod[] }>('iodConfig.json')
+  data.value = res.data
+})
+
+function handleNext() {
+  if (displayIndex.value === data.value.length - 1) {
+    displayIndex.value = 0
+  } else {
+    displayIndex.value++
+  }
+}
+</script>
+
+<template>
+  <el-popover trigger="hover" width="440">
+    <template #reference>
+      <div
+        class="rounded-full w-[20px] h-[20px] bg-[var(--color-bg-quaternary)] flex justify-center items-center cursor-pointer"
+      >
+        {{ data.length }}
+      </div>
+    </template>
+    <template #default v-if="data.length">
+      <div>
+        <div class="flex justify-between items-center p-2 pb-0 rounded-[8px] text-[16px] font-bold">
+          <span>数联网搜索结果</span>
+          <div class="flex items-center gap-3">
+            <div>{{ `${displayIndex + 1}/${data.length}` }}</div>
+            <el-button type="primary" size="small" @click="handleNext">下一个</el-button>
+          </div>
+        </div>
+        <!-- 分割线 -->
+        <div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
+       <div class="p-2 pt-0">
+         <div class="flex items-center w-full gap-3">
+           <div class="font-bold w-[75px] text-right flex-shrink-0">名称:</div>
+           <div class="text-[var(--color-text-secondary)] flex-1 break-words">{{ displayIod.name }}</div>
+         </div>
+         <div class="flex items-center w-full gap-3">
+           <div class="font-bold w-[75px] text-right flex-shrink-0">数据空间:</div>
+           <div class="text-[var(--color-text-secondary)] lex-1 break-words">{{ displayIod.data_space }}</div>
+         </div>
+         <div class="flex items-center w-full gap-3">
+           <div class="font-bold w-[75px] text-right flex-shrink-0">DOID:</div>
+           <div class="text-[var(--color-text-secondary)] lex-1 break-words">{{ displayIod.doId }}</div>
+         </div>
+         <div class="flex items-center w-full gap-3">
+           <div class="font-bold w-[75px] text-right flex-shrink-0">来源仓库:</div>
+           <div class="text-[var(--color-text-secondary)] flex-1 break-words break-al">{{ displayIod.fromRepo }}</div>
+         </div>
+       </div>
+      </div>
+    </template>
+  </el-popover>
+</template>
+
+<style scoped lang="scss"></style>

src/layout/components/Main/TaskTemplate/TaskResult/index.vue

@@ -0,0 +1,365 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue'
+import { throttle } from 'lodash'
+import { AnchorLocations, BezierConnector } from '@jsplumb/browser-ui'
+
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import { getActionTypeDisplay, getAgentMapIcon } from '@/layout/components/config.ts'
+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 ExecutePlan from './ExecutePlan.vue'
+import Iod from './Iod.vue'
+
+
+const emit = defineEmits<{
+  (e: 'refreshLine'): void
+  (el: 'setCurrentTask', task: IRawStepTask): void
+}>()
+
+const agentsStore = useAgentsStore()
+
+const collaborationProcess = computed(() => {
+  return agentsStore.agentRawPlan.data?.['Collaboration Process'] ?? []
+})
+
+const jsplumb = new Jsplumb('task-results-main', {
+  connector: {
+    type: BezierConnector.type,
+    options: { curviness: 30, stub: 10 },
+  },
+})
+
+// 操作折叠面板时要实时的刷新连线
+let timer: number
+function handleCollapse() {
+  if (timer) {
+    clearInterval(timer)
+  }
+  timer = setInterval(() => {
+    jsplumb.repaintEverything()
+    emit('refreshLine')
+  }, 1)
+
+  // 默认三秒后已经完全打开
+  const timer1 = setTimeout(() => {
+    clearInterval(timer)
+  }, 3000)
+
+  onUnmounted(() => {
+    if (timer) {
+      clearInterval(timer)
+    }
+    if (timer1) {
+      clearInterval(timer1)
+    }
+  })
+}
+
+// 创建内部连线
+function createInternalLine(id?: string) {
+  const arr: ConnectArg[] = []
+  jsplumb.reset()
+  collaborationProcess.value.forEach((item) => {
+    // 创建左侧流程与产出的连线
+    // jsplumb.connect(`task-results-${item.Id}-0`, `task-results-${item.Id}-1`, [
+    //   AnchorLocations.Left,
+    //   AnchorLocations.Left,
+    // ])
+    arr.push({
+      sourceId: `task-results-${item.Id}-0`,
+      targetId: `task-results-${item.Id}-1`,
+      anchor: [AnchorLocations.Left, AnchorLocations.Left],
+    })
+    collaborationProcess.value.forEach((jitem) => {
+      // 创建左侧产出与上一步流程的连线
+      if (item.InputObject_List!.includes(jitem.OutputObject ?? '')) {
+        // jsplumb.connect(
+        //   `task-results-${jitem.Id}-1`,
+        //   `task-results-${item.Id}-0`,
+        //   [AnchorLocations.Left, AnchorLocations.Left],
+        //   {
+        //     type: 'output',
+        //   },
+        // )
+        arr.push({
+          sourceId: `task-results-${jitem.Id}-1`,
+          targetId: `task-results-${item.Id}-0`,
+          anchor: [AnchorLocations.Left, AnchorLocations.Left],
+          config: {
+            type: 'output',
+          },
+        })
+      }
+      // 创建右侧任务程序与InputObject字段的连线
+      jitem.TaskProcess.forEach((i) => {
+        if (i.ImportantInput?.includes(`InputObject:${item.OutputObject}`)) {
+          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,
+            anchor: [AnchorLocations.Right, AnchorLocations.Right],
+            config: {
+              stops: [
+                [0, color],
+                [1, color],
+              ],
+              transparent: sourceId !== id,
+            },
+          })
+        }
+      })
+    })
+
+    // 创建右侧TaskProcess内部连线
+    item.TaskProcess?.forEach((i) => {
+      if (!i.ImportantInput?.length) {
+        return
+      }
+      item.TaskProcess?.forEach((i2) => {
+        if (i.ImportantInput.includes(`ActionResult:${i2.ID}`)) {
+          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,
+            anchor: [AnchorLocations.Right, AnchorLocations.Right],
+            config: {
+              stops: [
+                [0, color],
+                [1, color],
+              ],
+              transparent: sourceId !== id,
+            },
+          })
+        }
+      })
+    })
+  })
+
+  jsplumb.connects(arr)
+  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!)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 添加滚动状态标识
+const isScrolling = ref(false)
+let scrollTimer: number
+
+// 修改滚动处理函数
+function handleScroll() {
+  isScrolling.value = true
+  emit('refreshLine')
+  // 清除之前的定时器
+  if (scrollTimer) {
+    clearTimeout(scrollTimer)
+  }
+  jsplumb.repaintEverything()
+
+  // 设置滚动结束检测
+  scrollTimer = setTimeout(() => {
+    isScrolling.value = false
+  }, 300)
+}
+
+// 修改鼠标事件处理函数
+const handleMouseEnter = throttle((id) => {
+  if (!isScrolling.value) {
+    createInternalLine(id)
+  }
+}, 100)
+
+const handleMouseLeave = throttle(() => {
+  if (!isScrolling.value) {
+    createInternalLine()
+  }
+}, 100)
+
+defineExpose({
+  createInternalLine,
+})
+</script>
+
+<template>
+  <div class="h-full flex flex-col relative" id="task-results">
+    <!--  标题与执行按钮 -->
+    <div class="text-[18px] font-bold mb-[18px] flex justify-between items-center px-[20px]">
+      <span>执行结果</span>
+      <div class="flex items-center gap-[14px]">
+        <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>
+      </div>
+    </div>
+    <!-- 内容 -->
+    <div
+      v-loading="agentsStore.agentRawPlan.loading"
+      class="flex-1 overflow-auto relative"
+      @scroll="handleScroll"
+    >
+      <div id="task-results-main" class="px-[40px] relative">
+        <div v-for="item in collaborationProcess" :key="item.Id" class="card-item">
+          <el-card
+            class="card-item w-full relative"
+            shadow="hover"
+            :id="`task-results-${item.Id}-0`"
+            @click="emit('setCurrentTask', item)"
+          >
+            <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)"
+                @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>
+                  <span></span>
+                </template>
+                <template #title>
+                  <div class="flex items-center gap-[15px]">
+                    <!--  右侧链接点 -->
+                    <div
+                      class="absolute right-0 top-1/2 transform -translate-y-1/2"
+                      :id="`task-results-${item.Id}-0-${item1.ID}`"
+                    ></div>
+                    <div
+                      class="w-[41px] h-[41px] rounded-full flex items-center justify-center"
+                      :style="{ background: getAgentMapIcon(item1.AgentName).color }"
+                    >
+                      <svg-icon
+                        :icon-class="getAgentMapIcon(item1.AgentName).icon"
+                        color="var(--color-text)"
+                        size="24px"
+                      />
+                    </div>
+                    <div class="text-[16px]">
+                      <span>{{ item1.AgentName }}:&nbsp; &nbsp;</span>
+                      <span :style="{ color: getActionTypeDisplay(item1.ActionType)?.color }">
+                        {{ getActionTypeDisplay(item1.ActionType)?.name }}
+                      </span>
+                    </div>
+                  </div>
+                </template>
+                <ExecutePlan
+                  :action-id="item1.ID"
+                  :node-id="item.StepName"
+                  :execute-plans="results"
+                />
+              </el-collapse-item>
+              <!--            </el-tooltip>-->
+            </el-collapse>
+          </el-card>
+
+          <el-card
+            class="card-item w-full relative"
+            shadow="hover"
+            :id="`task-results-${item.Id}-1`"
+            @click="emit('setCurrentTask', item)"
+          >
+            <div class="text-[18px]">{{ item.OutputObject }}</div>
+          </el-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+#task-results {
+  :deep(.el-collapse) {
+    border: none;
+    border-radius: 20px;
+
+    .el-collapse-item + .el-collapse-item {
+      margin-top: 10px;
+    }
+
+    .el-collapse-item__header {
+      border: none;
+      background: var(--color-bg-secondary);
+      min-height: 41px;
+      line-height: 41px;
+      border-radius: 20px;
+      transition: border-radius 1ms;
+      position: relative;
+
+      .el-collapse-item__title {
+        background: var(--color-bg-secondary);
+        border-radius: 20px;
+      }
+
+      .el-icon {
+        font-size: 20px;
+        font-weight: bold;
+      }
+
+      &.is-active {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    .el-collapse-item__wrap {
+      border: none;
+      background: var(--color-bg-secondary);
+      border-bottom-left-radius: 20px;
+      border-bottom-right-radius: 20px;
+    }
+  }
+
+  :deep(.el-card) {
+    .el-card__body {
+      padding-right: 40px;
+    }
+  }
+
+  .card-item + .card-item {
+    margin-top: 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import { getAgentMapIcon } from '@/layout/components/config.ts'
+import {
+  type ConnectArg,
+  Jsplumb,
+  type JsplumbConfig,
+} from '@/layout/components/Main/TaskTemplate/utils.ts'
+import { type IRawStepTask, useAgentsStore } from '@/stores'
+import { computed } from 'vue'
+import { AnchorLocations } from '@jsplumb/browser-ui'
+
+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,
+      },
+    },
+  ]
+
+  // jsplumb.connect(
+  //   `task-syllabus-flow-${task.Id}`,
+  //   `task-syllabus-output-object-${task.Id}`,
+  //   [AnchorLocations.Right, AnchorLocations.Left],
+  //   {
+  //     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,
+        }
+      })
+      // jsplumb.connect(
+      //   `task-syllabus-output-object-${id}`,
+      //   `task-syllabus-flow-${task.Id}`,
+      //   [AnchorLocations.Left, AnchorLocations.Right],
+      //   {
+      //     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)
+  }
+}
+
+defineExpose({
+  changeTask,
+})
+</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 class="flex items-center gap-[14%] w-full px-5 relative" id="task-syllabus">
+        <!-- 流程 -->
+        <div
+          v-if="agentsStore.agentRawPlan.data"
+          class="w-[43%] min-h-full relative flex justify-center"
+        >
+          <!--  流程内容 -->
+          <div class="relative min-h-full z-10 flex flex-col items-center card-box pb-[100px]">
+            <!--  背景那一根线 -->
+            <div
+              class="absolute h-full left-1/2 transform -translate-x-1/2 bg-[var(--color-bg-tertiary)] w-[5px] z-[1]"
+            >
+              <!--  线底部的小圆球 -->
+              <div
+                class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-[var(--color-bg-tertiary)] w-[15px] h-[15px] rounded-full"
+              ></div>
+            </div>
+            <!--   固定的标题 -->
+            <div
+              class="card-item w-[45%] h-[41px] flex justify-center relative z-99 items-center rounded-[20px] bg-[var(--color-bg-tertiary)]"
+            >
+              流程
+            </div>
+
+            <el-card
+              v-for="item in collaborationProcess"
+              :key="item.Id"
+              class="card-item w-full h-[158px] overflow-y-auto active-card relative z-99"
+              shadow="hover"
+              :id="`task-syllabus-flow-${item.Id}`"
+              @click="changeTask(item, true)"
+            >
+              <div class="text-[18px] font-bold text-center">{{ item.StepName }}</div>
+              <div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
+              <div class="text-[14px] line-clamp-3 text-[var(--color-text-secondary)]">
+                {{ item.TaskContent }}
+              </div>
+              <div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
+              <div class="flex items-center gap-2 flex-wrap relative">
+                <!--  连接到智能体库的连接点 -->
+                <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>
+          </div>
+        </div>
+        <!-- 产出 -->
+        <div
+          v-if="agentsStore.agentRawPlan.data"
+          class="w-[43%] h-full relative flex justify-center"
+        >
+          <div class="min-h-full w-full relative">
+            <!--  产出内容 -->
+            <div class="min-h-full relative z-10 flex flex-col items-center card-box pb-[100px]">
+              <!--  背景那一根线 -->
+              <div
+                class="absolute h-full left-1/2 transform -translate-x-1/2 bg-[var(--color-bg-tertiary)] w-[5px] z-[1]"
+              >
+                <!--  线底部的小圆球 -->
+                <div
+                  class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-[var(--color-bg-tertiary)] w-[15px] h-[15px] rounded-full"
+                ></div>
+              </div>
+              <!--   固定的标题 -->
+              <div
+                class="card-item w-[45%] h-[41px] flex justify-center items-center rounded-[20px] bg-[var(--color-bg-tertiary)] relative z-99"
+              >
+                产出
+              </div>
+              <div
+                v-for="item in collaborationProcess"
+                :key="item.Id"
+                class="h-[158px] overflow-y-auto flex items-center w-full card-item relative z-99"
+              >
+                <el-card
+                  class="card-item w-full relative"
+                  shadow="hover"
+                  :id="`task-syllabus-output-object-${item.Id}`"
+                >
+                  <div class="text-[18px] font-bold text-center">{{ item.OutputObject }}</div>
+                </el-card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.card-box {
+  .active-card {
+    border: 2px solid transparent;
+    $bg: var(--el-input-bg-color, var(--el-fill-color-blank));
+    background:
+      linear-gradient(var(--color-bg-tertiary), var(--color-bg-tertiary)) padding-box,
+      linear-gradient(to right, #00c8d2, #315ab4) border-box;
+  }
+}
+</style>

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

@@ -0,0 +1,109 @@
+<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 { AnchorLocations, 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 }>()
+// 执行结果
+const taskResultRef = ref<{ createInternalLine: () => void }>()
+const taskResultJsplumb = new Jsplumb('task-template')
+
+function setCurrentTask(task: IRawStepTask) {
+  // 智能体库画线
+  agentRepoJsplumb.reset()
+  task.AgentSelection?.forEach((item) => {
+    agentRepoJsplumb.connect(
+      `agent-repo-${item}`,
+      `task-syllabus-flow-agents-${task.Id}`,
+      [AnchorLocations.Left, AnchorLocations.Right],
+      { type: 'input' },
+    )
+  })
+  agentRepoJsplumb.repaintEverything()
+  // 执行结果画线
+  taskResultJsplumb.reset()
+  taskResultJsplumb.connect(`task-syllabus-output-object-${task.Id}`, `task-results-${task.Id}-0`, [AnchorLocations.Right, AnchorLocations.Left])
+  taskResultJsplumb.connect(`task-syllabus-output-object-${task.Id}`, `task-results-${task.Id}-1`, [AnchorLocations.Right, AnchorLocations.Left])
+  taskResultJsplumb.repaintEverything()
+  agentsStore.setCurrentTask(task)
+  // 更新任务大纲内部的线
+  taskSyllabusRef.value?.changeTask(task, false)
+}
+
+function changeTask() {
+  taskResultRef.value?.createInternalLine()
+  taskSyllabusRef.value?.changeTask()
+}
+
+function resetAgentRepoLine() {
+  agentRepoJsplumb.repaintEverything()
+  taskResultJsplumb.repaintEverything()
+}
+
+defineExpose({
+  changeTask,
+})
+</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">
+      <AgentRepo @resetAgentRepoLine="agentRepoJsplumb.repaintEverything" />
+    </div>
+    <!-- 任务大纲 -->
+    <div class="w-[40.5%] min-w-[600px] h-full px-[20px]">
+      <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: #29303c;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+}
+</style>
+<style>
+:root {
+  --gradient: linear-gradient(to right, #0093eb, #00d2d1);
+}
+</style>

src/layout/components/Main/TaskTemplate/utils.ts

@@ -0,0 +1,168 @@
+import type {
+  AnchorSpec,
+  ConnectorSpec,
+  ConnectParams,
+  EndpointOptions,
+  JsPlumbInstance,
+} from '@jsplumb/browser-ui'
+import { BezierConnector, DotEndpoint, newInstance } from '@jsplumb/browser-ui'
+
+export interface JsplumbConfig {
+  connector?: ConnectorSpec
+  type?: 'input' | 'output'
+  stops?: [[number, string], [number, string]]
+  // 连接线条是否变透明一些
+  transparent?: boolean
+}
+
+export interface ConnectArg {
+  sourceId: string
+  targetId: string
+  anchor: AnchorSpec
+  config?: JsplumbConfig
+}
+
+const defaultConfig: JsplumbConfig = {
+  connector: {
+    type: BezierConnector.type,
+    options: {
+      curviness: 70,
+      stub: 10,
+    },
+  },
+  type: 'input',
+}
+
+export class Jsplumb {
+  instance!: JsPlumbInstance
+  containerId: string
+  config: JsplumbConfig
+
+  constructor(eleId: string, config = {} as JsplumbConfig) {
+    this.containerId = eleId
+    this.config = { ...defaultConfig, ...config }
+    onMounted(() => {
+      this.init()
+    })
+  }
+
+  init = () => {
+    if (this.instance) {
+      return
+    }
+    this.instance = newInstance({
+      container: document.querySelector(`#${this.containerId}`)!, // 或指定共同的父容器
+    })
+  }
+
+  getStops = (type?: 'input' | 'output'): [[number, string], [number, string]] => {
+    if (type === 'input') {
+      return [
+        [0, '#0093EB'],
+        [1, '#00D2D1'],
+      ]
+    }
+
+    return [
+      [0, '#FF6161'],
+      [1, '#D76976'],
+    ]
+  }
+
+  _connect = (
+    sourceId: string,
+    targetId: string,
+    anchor: AnchorSpec,
+    _config = {} as JsplumbConfig,
+  ) => {
+    const config = {
+      ...defaultConfig,
+      ...this.config,
+      ..._config,
+    }
+    this.init()
+    // 连接两个元素
+    const sourceElement = document.querySelector(`#${sourceId}`)
+    const targetElement = document.querySelector(`#${targetId}`)
+    const stops = _config.stops ?? this.getStops(config.type)
+    // 如果config.transparent为true，则将stops都加一些透明度
+    if (config.transparent) {
+      stops[0][1] = stops[0][1] + '30'
+      stops[1][1] = stops[1][1] + '30'
+    }
+    if (targetElement && sourceElement) {
+      this.instance.connect({
+        source: sourceElement,
+        target: targetElement,
+        connector: config.connector,
+        anchor: anchor,
+        paintStyle: {
+          stroke: stops[0][1],
+          strokeWidth: 2.5,
+          dashstyle: '0',
+          zIndex: 100,
+          opacity: 0.9,
+          gradient: {
+            stops: stops,
+            type: 'linear',
+          },
+        },
+        sourceEndpointStyle: { fill: stops[0][1] },
+
+        endpoint: {
+          type: DotEndpoint.type,
+          options: { radius: 5 },
+        },
+      } as unknown as ConnectParams<unknown>)
+
+      // 为源元素添加端点
+      this.instance.addEndpoint(sourceElement, {
+        anchor: (anchor as [AnchorSpec, AnchorSpec])[0],
+        paintStyle: { fill: stops[0][1], zIndex: 100 }, // source端点颜色
+      } as unknown as EndpointOptions)
+
+      // 为目标元素添加端点
+      this.instance.addEndpoint(targetElement, {
+        anchor: (anchor as [AnchorSpec, AnchorSpec])[1],
+        paintStyle: { fill: stops[1][1], zIndex: 100 }, // target端点颜色
+      } as unknown as EndpointOptions)
+    }
+  }
+
+  connect = (
+    sourceId: string,
+    targetId: string,
+    anchor: AnchorSpec,
+    config = {} as JsplumbConfig,
+  ) => {
+    this._connect(sourceId, targetId, anchor, config)
+  }
+
+  connects = (args: ConnectArg[]) => {
+    this.instance.batch(() => {
+      args.forEach(({ sourceId, targetId, anchor, config }) => {
+        this._connect(sourceId, targetId, anchor, config)
+      })
+    })
+  }
+
+  repaintEverything = () => {
+    // 重新验证元素位置
+    const container = document.querySelector(`#${this.containerId}`)
+    if (container) {
+      const elements = container.querySelectorAll('[id^="task-results-"]')
+      elements.forEach((element) => {
+        this.instance.revalidate(element)
+      })
+    }
+    this.instance.repaintEverything()
+  }
+
+  reset = () => {
+    this.instance.deleteEveryConnection()
+    const allEndpoints = this.instance.selectEndpoints()
+    allEndpoints.each((endpoint) => {
+      this.instance.deleteEndpoint(endpoint)
+    })
+  }
+}

src/layout/components/Main/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Task from './Task.vue'
+import TaskTemplate from './TaskTemplate/index.vue'
+import { nextTick } from 'vue'
+
+const taskTemplateRef = ref<{ changeTask: () => void }>()
+
+function handleSearch() {
+  nextTick(() => {
+    taskTemplateRef.value?.changeTask()
+  })
+}
+</script>
+
+<template>
+  <div class="p-[27px] h-[calc(100%-60px)]">
+    <Task @search="handleSearch" />
+    <TaskTemplate ref="taskTemplateRef" />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

src/layout/components/config.ts

@@ -0,0 +1,145 @@
+export interface AgentMapIcon {
+  name: string
+  icon: string
+  color: string
+}
+// "肾脏病学家": {
+//   name: "肾脏病学家",
+//     icon: "doctor",
+//     color: "#00A2D2",
+// },
+export const agentMapIcon = new Map<string, AgentMapIcon>()
+agentMapIcon.set("船舶设计师", {
+  name: '船舶设计师',
+  icon: 'shejishi',
+  color: '#65AE00',
+})
+agentMapIcon.set("防护工程专家", {
+  name: '防护工程专家',
+  icon: 'engineer',
+  color: '#B06CFE',
+})
+agentMapIcon.set("病理生理学家", {
+  name: '病理生理学家',
+  icon: 'doctor',
+  color: '#00A2D2',
+})
+agentMapIcon.set("药物化学家", {
+  name: '药物化学家',
+  icon: 'specialist',
+  color: '#FF7914',
+})
+agentMapIcon.set("制剂工程师", {
+  name: '制剂工程师',
+  icon: 'medical',
+  color: '#65AE00',
+})
+agentMapIcon.set("监管事务专家", {
+  name: '监管事务专家',
+  icon: 'researcher',
+  color: '#0064C4',
+})
+agentMapIcon.set("物理学家", {
+  name: '物理学家',
+  icon: 'specialist',
+  color: '#B06CFE',
+})
+agentMapIcon.set("实验材料学家", {
+  name: '实验材料学家',
+  icon: 'researcher',
+  color: '#C01E6A',
+})
+agentMapIcon.set("计算模拟专家", {
+  name: '计算模拟专家',
+  icon: 'researcher',
+  color: '#FF7914',
+})
+agentMapIcon.set("腐蚀机理研究员", {
+  name: '腐蚀机理研究员',
+  icon: 'specialist',
+  color: '#00C8D2',
+})
+agentMapIcon.set("先进材料研发员", {
+  name: '先进材料研发员',
+  icon: 'engineer',
+  color: '#00C8D2',
+})
+agentMapIcon.set("肾脏病学家", {
+  name: '肾脏病学家',
+  icon: 'doctor',
+  color: '#00A2D2',
+})
+agentMapIcon.set("临床研究协调员", {
+  name: '临床研究协调员',
+  icon: 'renyuan',
+  color: '#FF7914',
+})
+agentMapIcon.set("中医药专家", {
+  name: '中医药专家',
+  icon: 'medical',
+  color: '#00C8D2',
+})
+agentMapIcon.set("药物安全专家", {
+  name: '药物安全专家',
+  icon: 'medical',
+  color: '#65AE00',
+})
+agentMapIcon.set("二维材料科学家", {
+  name: '二维材料科学家',
+  icon: 'shejishi',
+  color: '#EB6363',
+})
+agentMapIcon.set("光电物理学家", {
+  name: '光电物理学家',
+  icon: 'specialist',
+  color: '#079EFF',
+})
+agentMapIcon.set("机器学习专家", {
+  name: '机器学习专家',
+  icon: 'researcher',
+  color: '#8700AE',
+})
+agentMapIcon.set("流体动力学专家", {
+  name: '流体动力学专家',
+  icon: 'specialist',
+  color: '#EB6363',
+})
+
+export function getAgentMapIcon(agentName: string):AgentMapIcon {
+  return agentMapIcon.get(agentName) ?? agentMapIcon.get('监管事务专家')!
+}
+
+export interface AgentMapDuty {
+  name: string
+  key: string
+  color: string
+}
+
+// 职责映射
+// 提议 评审 改进 总结
+export const agentMapDuty: Record<string, AgentMapDuty> = {
+  Propose: {
+    name: '提议',
+    key: 'propose',
+    color: '#0060FF',
+  },
+  Critique: {
+    name: '评审',
+    key: 'review',
+    color: '#FFFC08',
+  },
+  Improve: {
+    name: '改进',
+    key: 'improve',
+    color: '#9808FF',
+  },
+  Finalize: {
+    name: '总结',
+    key: 'summary',
+    color: '#FF6F08',
+  },
+}
+
+export function getActionTypeDisplay(type: string) {
+  return agentMapDuty[type]
+}