refactor(agent): 重构智能对话页面布局和样式

- 重新设计了页面布局，分为左、右两个主要区域
- 左侧区域增加了聊天机器人信息展示，包括头像、名称、描述等
- 右侧区域保留聊天窗口，并增加了顶部栏
-优化了响应式布局，使页面在不同屏幕尺寸下都能良好显示
- 调整了颜色、字体等样式，提升了页面视觉效果

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);
+};

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', // 执行失败
+}

src/views/agent/work-flow/index.vue

@@ -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 的计算属性
@@ -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');
 };