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

@@ -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">-->
+                <!--                <a-trigger position="top" auto-fit-position :unmount-on-close="false">-->
-<!--                  <SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />-->
+                <!--                  <SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />-->
-<!--                  <template #content>-->
+                <!--                  <template #content>-->
-<!--                    <div class="">-->
+                <!--                    <div class="">-->
-<!--                      <div class="history-item-dropdown">-->
+                <!--                      <div class="history-item-dropdown">-->
-<!--                        <div class="dropdown-item header-item">-->
+                <!--                        <div class="dropdown-item header-item">-->
-<!--                          <SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />-->
+                <!--                          <SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />-->
-<!--                          <div class="text">置顶</div>-->
+                <!--                          <div class="text">置顶</div>-->
-<!--                        </div>-->
+                <!--                        </div>-->
-<!--                        <div class="dropdown-item">-->
+                <!--                        <div class="dropdown-item">-->
-<!--                          <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
+                <!--                          <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
-<!--                          <div class="text">重命名</div>-->
+                <!--                          <div class="text">重命名</div>-->
-<!--                        </div>-->
+                <!--                        </div>-->
-<!--                        <div class="dropdown-item">-->
+                <!--                        <div class="dropdown-item">-->
-<!--                          <SvgIcon size="12" name="svg-delete" class="icon color-#6D4CFE" />-->
+                <!--                          <SvgIcon size="12" name="svg-delete" class="icon color-#6D4CFE" />-->
-<!--                          <a-popconfirm content="你确认删除该历史对话吗" @ok="deleteHistory(item.id,index)" type="error">-->
+                <!--                          <a-popconfirm content="你确认删除该历史对话吗" @ok="deleteHistory(item.id,index)" type="error">-->
-<!--                            <div class="text delete">删除</div>-->
+                <!--                            <div class="text delete">删除</div>-->
-<!--                          </a-popconfirm>-->
+                <!--                          </a-popconfirm>-->
-<!--                        </div>-->
+                <!--                        </div>-->
-<!--                      </div>-->
+                <!--                      </div>-->
-<!--                    </div>-->
+                <!--                    </div>-->
-<!--                  </template>-->
+                <!--                  </template>-->
-<!--                </a-trigger>-->
+                <!--                </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);
+      workFlowRes.execute_id = data.execute_id;
-      loading.value = false;
+      startTask();
-      console.log(data.history_item, 'data.history_item');
-      addHistoryItem(data.history_item);
     }
   } 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');
 };