From 5ffb40a2f1f53c2ce86d3dcd21958d2738cd59bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com>
Date: Thu, 31 Jul 2025 16:54:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor(agent):=20=E9=87=8D=E6=9E=84=E6=99=BA?=
 =?UTF-8?q?=E8=83=BD=E5=AF=B9=E8=AF=9D=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重新设计了页面布局，分为左、右两个主要区域
- 左侧区域增加了聊天机器人信息展示，包括头像、名称、描述等
- 右侧区域保留聊天窗口，并增加了顶部栏
-优化了响应式布局，使页面在不同屏幕尺寸下都能良好显示
- 调整了颜色、字体等样式，提升了页面视觉效果
---
 src/api/all/agent.ts                |  5 ++
 src/views/agent/AgentConstants.ts   |  7 +++
 src/views/agent/work-flow/index.vue | 95 +++++++++++++++++++----------
 3 files changed, 75 insertions(+), 32 deletions(-)

diff --git a/src/api/all/agent.ts b/src/api/all/agent.ts
index 915c3e2..10a8fd4 100644
--- a/src/api/all/agent.ts
+++ b/src/api/all/agent.ts
@@ -35,3 +35,8 @@ export const delAgentMessage = (params: any) => {
 export const delWorkflowHistoryApi = (id:number) => {
   return Http.post(`/v1/agent/delWorkflowHistory/${id}`);
 };
+
+//获取异步执行工作流任务
+export const getSyncWorkflowTaskApi = (params:any) => {
+  return Http.get(`/v1/agent/getSyncWorkflowTask`,params);
+};
diff --git a/src/views/agent/AgentConstants.ts b/src/views/agent/AgentConstants.ts
index b5dfbe5..479cd5a 100644
--- a/src/views/agent/AgentConstants.ts
+++ b/src/views/agent/AgentConstants.ts
@@ -2,3 +2,10 @@ export enum AGENT_TYPE {
   AGENT = 1, // 智能体
   WORKFLLOW = 2, // 工作流
 }
+
+//工作流异步执行状态
+export enum WORKEXECUTE_STATUS {
+  SUCCESS = 'Success', // 执行成功
+  RUNNING = 'Running', // 执行中
+  FAIL = 'Fail', // 执行失败
+}
diff --git a/src/views/agent/work-flow/index.vue b/src/views/agent/work-flow/index.vue
index a59afb4..f3e3991 100644
--- a/src/views/agent/work-flow/index.vue
+++ b/src/views/agent/work-flow/index.vue
@@ -7,7 +7,7 @@
     <div class="workflow-container">
       <div class="left-wap mr-24px" v-if="isCollapsed == false">
         <div class="w-full w-100% mb-15px h-160px rounded-8px bg-#E6E6E8" v-image-main-color="cozeInfo.image_url">
-          <img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class= "w-full h-full object-contain" />
+          <img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class="w-full h-full object-contain" />
         </div>
         <div class="content mb-15px">
           <div class="title-body">
@@ -40,29 +40,29 @@
             <div class="item-body">
               <div class="text" @click="getHistoryInfo(item)">
                 {{ item.title }}
-<!--                <a-trigger position="top" auto-fit-position :unmount-on-close="false">-->
-<!--                  <SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />-->
-<!--                  <template #content>-->
-<!--                    <div class="">-->
-<!--                      <div class="history-item-dropdown">-->
-<!--                        <div class="dropdown-item header-item">-->
-<!--                          <SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />-->
-<!--                          <div class="text">置顶</div>-->
-<!--                        </div>-->
-<!--                        <div class="dropdown-item">-->
-<!--                          <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
-<!--                          <div class="text">重命名</div>-->
-<!--                        </div>-->
-<!--                        <div class="dropdown-item">-->
-<!--                          <SvgIcon size="12" name="svg-delete" class="icon color-#6D4CFE" />-->
-<!--                          <a-popconfirm content="你确认删除该历史对话吗" @ok="deleteHistory(item.id,index)" type="error">-->
-<!--                            <div class="text delete">删除</div>-->
-<!--                          </a-popconfirm>-->
-<!--                        </div>-->
-<!--                      </div>-->
-<!--                    </div>-->
-<!--                  </template>-->
-<!--                </a-trigger>-->
+                <!--                <a-trigger position="top" auto-fit-position :unmount-on-close="false">-->
+                <!--                  <SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />-->
+                <!--                  <template #content>-->
+                <!--                    <div class="">-->
+                <!--                      <div class="history-item-dropdown">-->
+                <!--                        <div class="dropdown-item header-item">-->
+                <!--                          <SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />-->
+                <!--                          <div class="text">置顶</div>-->
+                <!--                        </div>-->
+                <!--                        <div class="dropdown-item">-->
+                <!--                          <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
+                <!--                          <div class="text">重命名</div>-->
+                <!--                        </div>-->
+                <!--                        <div class="dropdown-item">-->
+                <!--                          <SvgIcon size="12" name="svg-delete" class="icon color-#6D4CFE" />-->
+                <!--                          <a-popconfirm content="你确认删除该历史对话吗" @ok="deleteHistory(item.id,index)" type="error">-->
+                <!--                            <div class="text delete">删除</div>-->
+                <!--                          </a-popconfirm>-->
+                <!--                        </div>-->
+                <!--                      </div>-->
+                <!--                    </div>-->
+                <!--                  </template>-->
+                <!--                </a-trigger>-->
               </div>
             </div>
           </div>
@@ -98,13 +98,14 @@
 <script setup>
 import { ref, reactive } from 'vue';
 import DynamicForm from './components/DynamicForm.vue';
-import { executeWorkFlow, getWorkFlowInfo, delWorkflowHistoryApi } from '@/api/all/agent';
+import { executeWorkFlow, getWorkFlowInfo, delWorkflowHistoryApi, getSyncWorkflowTaskApi } from '@/api/all/agent';
 import { useRoute, useRouter } from 'vue-router';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import menuFold from '@/assets/svg/menu-fold.svg';
 import menuUnfold from '@/assets/svg/menu-unfold.svg';
-import { formatNumberShow } from "@/utils/tools"
+import { formatNumberShow } from '@/utils/tools';
+// import { WORKEXECUTE_STATUS } from '../AgentConstants.ts';
 
 const formFields = ref({});
 const history = ref([]);
@@ -145,6 +146,7 @@ const getData = async () => {
 };
 const workFlowRes = reactive({
   output: '',
+  execute_id: '',
 });
 
 // 渲染 Markdown 的计算属性
@@ -156,7 +158,7 @@ const renderedMarkdown = computed(() => {
   return '';
 });
 
-const deleteHistory = async (id, index ) => {
+const deleteHistory = async (id, index) => {
   const { code } = await delWorkflowHistoryApi(id);
   if (code === 200) {
     //
@@ -172,23 +174,52 @@ const handleSubmit = async (formData) => {
     loading.value = true;
     const { code, data } = await executeWorkFlow(param);
     if (code === 200) {
-      Object.assign(workFlowRes, data.data);
-      loading.value = false;
-      console.log(data.history_item, 'data.history_item');
-      addHistoryItem(data.history_item);
+      workFlowRes.execute_id = data.execute_id;
+      startTask();
     }
   } catch (error) {
     loading.value = false;
   }
 };
 
+const timerRef = ref(null);
+const startTask = () => {
+  if (timerRef.value !== null) return;
+  timerRef.value = setInterval(async () => {
+    getSyncWorkflowTask();
+  }, 3000);
+};
+
+const getSyncWorkflowTask = async () => {
+  try {
+    const { code, data } = await getSyncWorkflowTaskApi({
+      execute_id: workFlowRes.execute_id,
+      workflow_id: cozeInfo.workflow_id,
+    });
+    if (code === 200) {
+      if (data.execute_status === 'Success' || data.execute_status === 'Fail') {
+        workFlowRes.output = data.output;
+        clearTimeout();
+      }
+    }
+  } catch (error) {
+    clearTimeout();
+  }
+};
+
+const clearTimeout = async () => {
+  clearInterval(timerRef.value);
+  timerRef.value = null;
+  loading.value = false;
+};
+
 const addHistoryItem = (item) => {
   history.value.unshift(item);
 };
 
 const getHistoryInfo = (item) => {
   formData.value = item.param;
-  workFlowRes.output = item.result.output;
+  workFlowRes.output = item.output;
 
   console.log(formData.value, 'formData');
 };