feat:rename subtree from frontend-vue to frontend

2025-11-20 09:56:51 +08:00
parent 1aa9e280b0
commit ab8c9e294d
80 changed files with 0 additions and 0 deletions
--- a/frontend/src/layout/components/Main/TaskTemplate/index.vue
+++ b/frontend/src/layout/components/Main/TaskTemplate/index.vue
@@ -0,0 +1,122 @@
+<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 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()
+}
+
+defineExpose({
+  changeTask,
+  resetAgentRepoLine,
+  clear,
+})
+</script>
+
+<template>
+  <div
+    class="task-template flex gap-6 items-center h-[calc(100%-84px)] 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="handleTaskSyllabusCurrentTask"
+      />
+    </div>
+    <!--  执行结果 -->
+    <div class="flex-1 h-full">
+      <TaskResult
+        ref="taskResultRef"
+        @refresh-line="taskResultJsplumb.repaintEverything"
+        @set-current-task="handleTaskResultCurrentTask"
+      />
+    </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>