From 00500c9bd6a20eb1249c6ccdf295147ef474d4c3 Mon Sep 17 00:00:00 2001 From: liailing1026 <1815388873@qq.com> Date: Tue, 3 Mar 2026 15:49:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=AF=BC=E5=87=BA=E6=9D=BF=E5=9D=97?= =?UTF-8?q?=E7=9A=84=E9=9D=99=E6=80=81=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/icons/DOCX.svg | 1 + frontend/src/assets/icons/DaoChu.svg | 1 + frontend/src/assets/icons/Markdown.svg | 1 + frontend/src/assets/icons/PPT.svg | 1 + frontend/src/assets/icons/SiWeiDaoTu.svg | 1 + frontend/src/assets/icons/XLSX.svg | 1 + frontend/src/assets/icons/XiaZai.svg | 1 + frontend/src/assets/icons/XinXiTu.svg | 1 + frontend/src/assets/icons/YuLan.svg | 1 + .../Main/TaskTemplate/ExportList/index.vue | 418 ++++++++++++++++++ .../Main/TaskTemplate/TaskResult/index.vue | 57 ++- .../components/Main/TaskTemplate/index.vue | 95 ++++ 12 files changed, 572 insertions(+), 7 deletions(-) create mode 100644 frontend/src/assets/icons/DOCX.svg create mode 100644 frontend/src/assets/icons/DaoChu.svg create mode 100644 frontend/src/assets/icons/Markdown.svg create mode 100644 frontend/src/assets/icons/PPT.svg create mode 100644 frontend/src/assets/icons/SiWeiDaoTu.svg create mode 100644 frontend/src/assets/icons/XLSX.svg create mode 100644 frontend/src/assets/icons/XiaZai.svg create mode 100644 frontend/src/assets/icons/XinXiTu.svg create mode 100644 frontend/src/assets/icons/YuLan.svg create mode 100644 frontend/src/layout/components/Main/TaskTemplate/ExportList/index.vue diff --git a/frontend/src/assets/icons/DOCX.svg b/frontend/src/assets/icons/DOCX.svg new file mode 100644 index 0000000..e14631a --- /dev/null +++ b/frontend/src/assets/icons/DOCX.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/DaoChu.svg b/frontend/src/assets/icons/DaoChu.svg new file mode 100644 index 0000000..00189d4 --- /dev/null +++ b/frontend/src/assets/icons/DaoChu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/Markdown.svg b/frontend/src/assets/icons/Markdown.svg new file mode 100644 index 0000000..e5205ad --- /dev/null +++ b/frontend/src/assets/icons/Markdown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/PPT.svg b/frontend/src/assets/icons/PPT.svg new file mode 100644 index 0000000..9d373c8 --- /dev/null +++ b/frontend/src/assets/icons/PPT.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/SiWeiDaoTu.svg b/frontend/src/assets/icons/SiWeiDaoTu.svg new file mode 100644 index 0000000..ee60ad3 --- /dev/null +++ b/frontend/src/assets/icons/SiWeiDaoTu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/XLSX.svg b/frontend/src/assets/icons/XLSX.svg new file mode 100644 index 0000000..64b3c08 --- /dev/null +++ b/frontend/src/assets/icons/XLSX.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/XiaZai.svg b/frontend/src/assets/icons/XiaZai.svg new file mode 100644 index 0000000..2951528 --- /dev/null +++ b/frontend/src/assets/icons/XiaZai.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/XinXiTu.svg b/frontend/src/assets/icons/XinXiTu.svg new file mode 100644 index 0000000..3e8ca44 --- /dev/null +++ b/frontend/src/assets/icons/XinXiTu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/YuLan.svg b/frontend/src/assets/icons/YuLan.svg new file mode 100644 index 0000000..f2390db --- /dev/null +++ b/frontend/src/assets/icons/YuLan.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/layout/components/Main/TaskTemplate/ExportList/index.vue b/frontend/src/layout/components/Main/TaskTemplate/ExportList/index.vue new file mode 100644 index 0000000..4cf9b0d --- /dev/null +++ b/frontend/src/layout/components/Main/TaskTemplate/ExportList/index.vue @@ -0,0 +1,418 @@ + + + + + + + diff --git a/frontend/src/layout/components/Main/TaskTemplate/TaskResult/index.vue b/frontend/src/layout/components/Main/TaskTemplate/TaskResult/index.vue index f3761aa..321effa 100644 --- a/frontend/src/layout/components/Main/TaskTemplate/TaskResult/index.vue +++ b/frontend/src/layout/components/Main/TaskTemplate/TaskResult/index.vue @@ -23,6 +23,7 @@ const props = defineProps<{ const emit = defineEmits<{ (e: 'refreshLine'): void (e: 'setCurrentTask', task: IRawStepTask): void + (e: 'openExport'): void }>() const agentsStore = useAgentsStore() @@ -1148,7 +1149,7 @@ onMounted(() => { }) // 按钮交互状态管理 -type ButtonState = 'process' | 'execute' | 'refresh' | null +type ButtonState = 'process' | 'execute' | 'refresh' | 'export' | null const buttonHoverState = ref(null) let buttonHoverTimer: ReturnType | null = null @@ -1173,6 +1174,8 @@ const handleExecuteMouseEnter = () => setButtonHoverState('execute', !!agentsStore.agentRawPlan.data) const handleRefreshMouseEnter = () => setButtonHoverState('refresh', agentsStore.executePlan.length > 0) +const handleExportMouseEnter = () => + setButtonHoverState('export', agentsStore.executePlan.length > 0) const handleButtonMouseLeave = () => { clearButtonHoverTimer() @@ -1189,21 +1192,44 @@ onUnmounted(() => { }) // 计算按钮类名 const processBtnClass = computed(() => { - if (buttonHoverState.value === 'refresh' || buttonHoverState.value === 'execute') { + if ( + buttonHoverState.value === 'refresh' || + buttonHoverState.value === 'execute' || + buttonHoverState.value === 'export' + ) { return 'circle' } return buttonHoverState.value === 'process' ? 'ellipse' : 'circle' }) const executeBtnClass = computed(() => { - if (buttonHoverState.value === 'process' || buttonHoverState.value === 'refresh') { + if ( + buttonHoverState.value === 'process' || + buttonHoverState.value === 'refresh' || + buttonHoverState.value === 'export' + ) { return 'circle task-execute-btn' } return agentsStore.agentRawPlan.data ? 'ellipse task-execute-btn' : 'circle task-execute-btn' }) const refreshBtnClass = computed(() => { - if (buttonHoverState.value === 'process' || buttonHoverState.value === 'execute') { + if ( + buttonHoverState.value === 'process' || + buttonHoverState.value === 'execute' || + buttonHoverState.value === 'export' + ) { + return 'circle' + } + return agentsStore.executePlan.length > 0 ? 'ellipse' : 'circle' +}) + +const exportBtnClass = computed(() => { + if ( + buttonHoverState.value === 'process' || + buttonHoverState.value === 'execute' || + buttonHoverState.value === 'refresh' + ) { return 'circle' } return agentsStore.executePlan.length > 0 ? 'ellipse' : 'circle' @@ -1223,6 +1249,10 @@ const showRefreshText = computed(() => { return buttonHoverState.value === 'refresh' }) +const showExportText = computed(() => { + return buttonHoverState.value === 'export' +}) + // 计算按钮标题 const processBtnTitle = computed(() => { return buttonHoverState.value === 'process' ? '查看任务流程' : '点击查看任务流程' @@ -1255,7 +1285,7 @@ defineExpose({
执行结果
@@ -1266,11 +1296,24 @@ defineExpose({ :disabled="agentsStore.executePlan.length === 0" @mouseenter="handleRefreshMouseEnter" @click="handleRefresh" - style="order: 0" + style="order: 1" > 重置 + + + + 导出 + 任务过程 diff --git a/frontend/src/layout/components/Main/TaskTemplate/index.vue b/frontend/src/layout/components/Main/TaskTemplate/index.vue index 818ba69..a561e07 100644 --- a/frontend/src/layout/components/Main/TaskTemplate/index.vue +++ b/frontend/src/layout/components/Main/TaskTemplate/index.vue @@ -3,6 +3,7 @@ import AgentRepo from './AgentRepo/index.vue' import TaskSyllabus from './TaskSyllabus/index.vue' import TaskResult from './TaskResult/index.vue' import HistoryList from './HistoryList/index.vue' +import ExportList from './ExportList/index.vue' import SvgIcon from '@/components/SvgIcon/index.vue' import { Jsplumb } from './utils.ts' import { type IRawStepTask, useAgentsStore } from '@/stores' @@ -24,11 +25,19 @@ const agentsStore = useAgentsStore() // 历史记录弹窗控制 const historyDialogVisible = ref(false) +// 导出弹窗控制 +const exportDialogVisible = ref(false) + // 打开历史记录弹窗 const openHistoryDialog = () => { historyDialogVisible.value = true } +// 打开导出弹窗 +const openExportDialog = () => { + exportDialogVisible.value = true +} + // 处理历史任务恢复 const handleRestorePlan = (plan: any) => { // 关闭弹窗 @@ -102,6 +111,7 @@ function clear() { defineExpose({ openHistoryDialog, + openExportDialog, changeTask, resetAgentRepoLine, clear @@ -133,6 +143,7 @@ defineExpose({ :TaskID="props.TaskID" @refresh-line="taskResultJsplumb.repaintEverything" @set-current-task="handleTaskResultCurrentTask" + @open-export="openExportDialog" />
@@ -151,6 +162,22 @@ defineExpose({
+ + +
+
+
+ 导出 + +
+
+
+ +
+
+
@@ -247,4 +274,72 @@ defineExpose({ opacity: 1; } } + +// 导出 Drawer 样式 +:deep(.export-drawer) { + // 强制使用绝对定位,相对于父容器 + position: absolute !important; + top: 0 !important; + bottom: 0 !important; + right: 0 !important; + z-index: 1000; + // 高度由 top/bottom 控制 + height: auto !important; + width: 500px !important; + + background-color: var(--color-bg-three); + border: 1px solid var(--color-card-border-three); + border-radius: 24px; + box-shadow: var(--color-card-shadow-three); + padding-top: 20px; + padding-bottom: 20px; + + // 动画:从右向左滑入 + animation: export-drawer-slide-in 0.5s ease-out; + + // 头部 + .export-drawer-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 16px; + background-color: var(--color-bg-three); + } + + // 标题 + .export-drawer-title { + color: var(--color-text-primary); + font-size: 16px; + font-weight: 600; + padding-left: 8px; + } + + // 关闭按钮 + .export-drawer-close { + background: none; + border: none; + cursor: pointer; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + color: var(--color-text-regular); + transition: transform 0.3s ease; + + &:hover { + transform: rotate(360deg); + } + } +} + +@keyframes export-drawer-slide-in { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } +}