diff --git a/frontend/src/assets/icons/Cancel.svg b/frontend/src/assets/icons/Cancel.svg new file mode 100644 index 0000000..6ca3bae --- /dev/null +++ b/frontend/src/assets/icons/Cancel.svg @@ -0,0 +1,20 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/Check.svg b/frontend/src/assets/icons/Check.svg new file mode 100644 index 0000000..13d2d2f --- /dev/null +++ b/frontend/src/assets/icons/Check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/Edit.svg b/frontend/src/assets/icons/Edit.svg new file mode 100644 index 0000000..83c94b8 --- /dev/null +++ b/frontend/src/assets/icons/Edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/layout/components/Main/TaskTemplate/AgentRepo/AgentRepoList.vue b/frontend/src/layout/components/Main/TaskTemplate/AgentRepo/AgentRepoList.vue index 4c6de87..34bc55e 100644 --- a/frontend/src/layout/components/Main/TaskTemplate/AgentRepo/AgentRepoList.vue +++ b/frontend/src/layout/components/Main/TaskTemplate/AgentRepo/AgentRepoList.vue @@ -97,6 +97,38 @@ const agentsStore = useAgentsStore() class="h-[1px] w-full bg-[var(--color-border-default)] my-[8px]" > + +
+ +
+ apiUrl: + {{ + item.apiUrl + }} +
+ + +
+ + +
+ apiModel: + {{ + item.apiModel + }} +
+ + +
diff --git a/frontend/src/layout/components/Main/TaskTemplate/TaskResult/index.vue b/frontend/src/layout/components/Main/TaskTemplate/TaskResult/index.vue index 1d8e1b5..cb947f4 100644 --- a/frontend/src/layout/components/Main/TaskTemplate/TaskResult/index.vue +++ b/frontend/src/layout/components/Main/TaskTemplate/TaskResult/index.vue @@ -1,8 +1,8 @@ - + diff --git a/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation copy.vue b/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation copy.vue deleted file mode 100644 index 8ae0cef..0000000 --- a/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation copy.vue +++ /dev/null @@ -1,284 +0,0 @@ - - - - - diff --git a/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/index.vue b/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/index.vue index 65db476..d295094 100644 --- a/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/index.vue +++ b/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/index.vue @@ -3,7 +3,7 @@ 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, ref } from 'vue' +import { computed, ref, nextTick } from 'vue' import { AnchorLocations } from '@jsplumb/browser-ui' import MultiLineTooltip from '@/components/MultiLineTooltip/index.vue' import Bg from './Bg.vue' @@ -11,8 +11,12 @@ import Bg from './Bg.vue' const emit = defineEmits<{ (el: 'resetAgentRepoLine'): void (el: 'setCurrentTask', task: IRawStepTask): void + (el: 'add-output', outputName: string): void + (el: 'click-branch'): void }>() +// 分支数量 + const jsplumb = new Jsplumb('task-syllabus') const handleScroll = () => { @@ -30,9 +34,79 @@ const editingTaskId = ref(null) const editingContent = ref('') // 添加新产物状态管理 -const showAddOutputForm = ref(false) +const isAddingOutput = ref(false) +const newOutputInputRef = ref() const newOutputName = ref('') +// 处理加号点击 +const handleAddOutputClick = () => { + isAddingOutput.value = true + newOutputName.value = '' + + nextTick(() => { + setTimeout(() => { + if (newOutputInputRef.value) { + newOutputInputRef.value?.focus() + } + jsplumb.instance.repaintEverything() + }, 50) + }) +} + +// 保存新产物 +const saveNewOutput = () => { + if (newOutputName.value.trim()) { + const outputName = newOutputName.value.trim() + const success = agentsStore.addNewOutput(outputName) + if (success) { + emit('add-output', outputName) + isAddingOutput.value = false + newOutputName.value = '' + nextTick(() => { + setTimeout(() => { + jsplumb.instance.repaintEverything() + }, 50) + }) + console.log('添加新产物成功', outputName) + } else { + // 退出编辑状态 + isAddingOutput.value = false + newOutputName.value = '' + } + } +} + +// 取消添加产物 +const cancelAddOutput = () => { + isAddingOutput.value = false + newOutputName.value = '' + + nextTick(() => { + setTimeout(() => { + jsplumb.instance.repaintEverything() + }, 50) + }) +} + +// 处理新产物的键盘事件 +const handleNewOutputKeydown = (event: KeyboardEvent) => { + if (event.key === 'Enter') { + event.preventDefault() + saveNewOutput() + } else if (event.key === 'Escape') { + cancelAddOutput() + } +} + +// 新产物输入框失去焦点处理 +const handleNewOutputBlur = () => { + setTimeout(() => { + if (newOutputName.value.trim() === '') { + cancelAddOutput() + } + }, 100) +} + // 开始编辑 const startEditing = (task: IRawStepTask) => { if (!task.Id) { @@ -71,44 +145,6 @@ const handleKeydown = (event: KeyboardEvent) => { } } -// 显示添加产物表单 -const showAddOutputDialog = () => { - showAddOutputForm.value = true - newOutputName.value = '' -} - -// 添加新产物 -const addNewOutput = () => { - if (newOutputName.value.trim()) { - const success = agentsStore.addNewOutput(newOutputName.value.trim()) - if (success) { - showAddOutputForm.value = false - newOutputName.value = '' - } - } -} - -// 取消添加产物 -const cancelAddOutput = () => { - showAddOutputForm.value = false - newOutputName.value = '' -} - -// 处理添加产物的键盘事件 -const handleAddOutputKeydown = (event: KeyboardEvent) => { - if (event.key === 'Enter') { - event.preventDefault() - addNewOutput() - } else if (event.key === 'Escape') { - cancelAddOutput() - } -} - -// 删除额外产物 -const removeAdditionalOutput = (output: string) => { - agentsStore.removeAdditionalOutput(output) -} - function handleCurrentTask(task: IRawStepTask, transparent: boolean): ConnectArg[] { // 创建当前流程与产出的连线 const arr: ConnectArg[] = [ @@ -179,7 +215,7 @@ defineExpose({ class="w-full relative min-h-full" id="task-syllabus" > - +
@@ -198,7 +234,47 @@ defineExpose({
+ +
+ +
+ + +
+ + +
+ +
+ + +
+ +
+ + + +
{{ output }}
+ +
{{ item.OutputObject }}
- - - - - - - - - - - - - - - - - - - - + +
+
+ +
+ {{ branchCount }}
@@ -368,7 +384,6 @@ defineExpose({ border: 1px solid var(--color-card-border-task); box-sizing: border-box; transition: border-color 0.2s ease; - // box-shadow: var(--color-card-shadow); margin-bottom: 100px; &:hover { background-color: var(--color-card-bg-task-hover); @@ -390,7 +405,6 @@ defineExpose({ border: 1px solid var(--color-card-border-task); box-sizing: border-box; transition: border-color 0.2s ease; - // box-shadow: var(--color-card-shadow-hover); &:hover { background-color: var(--color-card-bg-task-hover); border-color: var(--color-card-border-hover); @@ -449,6 +463,27 @@ defineExpose({ .add-output-form { animation: slideDown 0.3s ease-out; + :deep(.el-card__body) { + padding: 16px; + display: flex; + align-items: center; + justify-content: center; + } + :deep(.el-input__wrapper) { + border: 1px solid var(--color-text); + background: transparent; + box-shadow: none; + + &.is-focus { + border-color: var(--color-text); + box-shadow: 0 0 0 1px var(--color-primary-light); + } + :deep(.el-input__inner) { + font-size: 14px; + text-align: center; + font-weight: bold; + } + } } @keyframes slideDown { @@ -462,11 +497,6 @@ defineExpose({ } } -// 添加产物表单样式 -:deep(.el-card__body) { - padding: 16px; -} - // 输入框样式 :deep(.el-input__wrapper) { background: transparent; diff --git a/frontend/src/layout/components/Main/TaskTemplate/index.vue b/frontend/src/layout/components/Main/TaskTemplate/index.vue index 17674a9..f760dc3 100644 --- a/frontend/src/layout/components/Main/TaskTemplate/index.vue +++ b/frontend/src/layout/components/Main/TaskTemplate/index.vue @@ -71,6 +71,11 @@ function clear() { taskResultJsplumb.repaintEverything() } +const additionalOutputs = ref([]) +const handleAddOutput = (outputName: string) => { + additionalOutputs.value.unshift(outputName) +} + defineExpose({ changeTask, resetAgentRepoLine, @@ -94,6 +99,7 @@ defineExpose({ ref="taskSyllabusRef" @resetAgentRepoLine="resetAgentRepoLine" @set-current-task="handleTaskSyllabusCurrentTask" + @add-output="handleAddOutput" /> @@ -102,6 +108,7 @@ defineExpose({ ref="taskResultRef" @refresh-line="taskResultJsplumb.repaintEverything" @set-current-task="handleTaskResultCurrentTask" + :additional-outputs="additionalOutputs" /> diff --git a/frontend/src/stores/modules/agents.ts b/frontend/src/stores/modules/agents.ts index e4b3dc9..b94599d 100644 --- a/frontend/src/stores/modules/agents.ts +++ b/frontend/src/stores/modules/agents.ts @@ -6,7 +6,6 @@ import { store } from '../index' import { useStorage } from '@vueuse/core' import type { IExecuteRawResponse } from '@/api' import { useConfigStore } from '@/stores/modules/config.ts' - export interface Agent { Name: string Profile: string @@ -141,7 +140,7 @@ export const useAgentsStore = defineStore('agents', () => { const trimmedOutput = outputObject.trim() if (!additionalOutputs.value.includes(trimmedOutput)) { - additionalOutputs.value.push(trimmedOutput) + additionalOutputs.value.unshift(trimmedOutput) return true } return false diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index d0e81b5..0114fd7 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -14,6 +14,7 @@ const pathSrc = resolve(__dirname, 'src') // https://vite.dev/config/ export default defineConfig({ + base: '', plugins: [ vue(), tailwindcss(), @@ -46,12 +47,12 @@ export default defineConfig({ '/api': { changeOrigin: true, // 接口地址 - // target: 'http://82.157.183.212:21092', - target: 'http://localhost:8000', - rewrite: (path: string) => path.replace(/^\/api/, ''), - configure: (proxy, options) => { - console.log('Proxy configured:', options) - }, + target: 'http://82.157.183.212:21092', + // target: 'http://localhost:8000', + // rewrite: (path: string) => path.replace(/^\/api/, ''), + // configure: (proxy, options) => { + // console.log('Proxy configured:', options) + // }, }, }, },