From e54ec228c22b7dab2583162ed328b5a19cc61140 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 18:54:59 +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                |  20 ++++-
 src/views/agent/index/index.vue     |   6 +-
 src/views/agent/work-flow/index.vue | 119 ++++++++++++++++++++++------
 3 files changed, 113 insertions(+), 32 deletions(-)

diff --git a/src/api/all/agent.ts b/src/api/all/agent.ts
index 10a8fd4..585e0cb 100644
--- a/src/api/all/agent.ts
+++ b/src/api/all/agent.ts
@@ -1,7 +1,7 @@
 import Http from '@/api';
 // 获取聊天智能体
 export const getChatAgent = (id: number) => {
-  console.log('param.id',id);
+  console.log('param.id', id);
   return Http.get(`/v1/agent/getChatAgent/${id}`);
 };
 
@@ -32,11 +32,23 @@ export const delAgentMessage = (params: any) => {
   return Http.post(`/v1/agent/delAgentMessage`, params);
 };
 // 删除工作流历史记录
-export const delWorkflowHistoryApi = (id:number) => {
+export const delWorkflowHistoryApi = (id: number) => {
   return Http.post(`/v1/agent/delWorkflowHistory/${id}`);
 };
 
 //获取异步执行工作流任务
-export const getSyncWorkflowTaskApi = (params:any) => {
-  return Http.get(`/v1/agent/getSyncWorkflowTask`,params);
+export const getSyncWorkflowTaskApi = (params: any) => {
+  return Http.get(`/v1/agent/getSyncWorkflowTask`, params);
+};
+//置顶
+export const topWorkflowHistoryApi = (id: number) => {
+  return Http.post(`/v1/agent/topWorkflowHistory/${id}`);
+};
+//取消指定
+export const cancelTopWorkflowHistoryApi = (id: number) => {
+  return Http.post(`/v1/agent/cancelTopWorkflowHistory/${id}`);
+};
+
+export const getWorkflowHistoryListApi = (param: any) => {
+  return Http.get(`/v1/agent/getWorkflowHistoryList`, param);
 };
diff --git a/src/views/agent/index/index.vue b/src/views/agent/index/index.vue
index 2d86cf2..8389bec 100644
--- a/src/views/agent/index/index.vue
+++ b/src/views/agent/index/index.vue
@@ -2,14 +2,14 @@
   <div class="agent-wrap relative h-full">
     <a-input
       v-model="query.name"
-      @blur="getData()"
+      @press-enter="getData()"
       placeholder="搜索智能体"
       size="large"
       allow-clear
       class="absolute right-0 top-0 !w-400px"
     >
       <template #prefix>
-        <icon-search />
+        <icon-search @click="getData()" />
       </template>
     </a-input>
     <div  v-for="(item, index) in list" :key="index">
@@ -26,7 +26,7 @@
             <div class="card-image h-120px w-100%  bg-cover bg-center bg-#E6E6E8" v-image-main-color="product.image_url">
               <img class="object-contain h-full w-100% mb-8px" :src="product?.image_url"/>
             </div>
-             
+
             <div class="card-content">
               <div class="card-title mb-4px">{{ product?.name }}</div>
               <TextoverTips :context="product.description" class="card-description mb-8px color-#737478 text-14px lh-22px font-400" :line="2" />
diff --git a/src/views/agent/work-flow/index.vue b/src/views/agent/work-flow/index.vue
index f3e3991..88ee4f5 100644
--- a/src/views/agent/work-flow/index.vue
+++ b/src/views/agent/work-flow/index.vue
@@ -40,29 +40,35 @@
             <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="bottom" :auto-fit-position="false" :unmount-on-close="true">
+                  <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 @click="(event) => handleTop(item.id, item.sort, event)" class="text">
+                            {{ item.sort > 1 ? '取消置顶' : '置顶' }}
+                          </div>
+                        </div>
+                        <!--                        <div class="dropdown-item">-->
+                        <!--                          <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
+                        <!--                          <div @click="editTitle(item)" 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>
@@ -92,13 +98,26 @@
         </div>
       </div>
     </div>
+
+    <a-modal style="width: 500px" v-model:visible="editHistoryVisible">
+      <template #title> Title</template>
+      <div></div>
+    </a-modal>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive } from 'vue';
 import DynamicForm from './components/DynamicForm.vue';
-import { executeWorkFlow, getWorkFlowInfo, delWorkflowHistoryApi, getSyncWorkflowTaskApi } from '@/api/all/agent';
+import {
+  executeWorkFlow,
+  getWorkFlowInfo,
+  delWorkflowHistoryApi,
+  getSyncWorkflowTaskApi,
+  topWorkflowHistoryApi,
+  getWorkflowHistoryListApi,
+  cancelTopWorkflowHistoryApi,
+} from '@/api/all/agent';
 import { useRoute, useRouter } from 'vue-router';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
@@ -107,6 +126,8 @@ import menuUnfold from '@/assets/svg/menu-unfold.svg';
 import { formatNumberShow } from '@/utils/tools';
 // import { WORKEXECUTE_STATUS } from '../AgentConstants.ts';
 
+const editHistoryVisible = ref(false);
+
 const formFields = ref({});
 const history = ref([]);
 // 是否折叠状态
@@ -161,11 +182,56 @@ const renderedMarkdown = computed(() => {
 const deleteHistory = async (id, index) => {
   const { code } = await delWorkflowHistoryApi(id);
   if (code === 200) {
-    //
     history.value.splice(index, 1);
   }
 };
 
+const historyForm = reactive({
+  id: 0,
+  title: '',
+});
+
+const editTitle = async (item) => {
+  historyForm.id = item.id;
+  historyForm.title = item.title;
+  editHistoryVisible.value = true;
+};
+
+const handleTop = async (id, sort, event) => {
+  if (sort > 0) {
+    canceltopHistory(id);
+  } else {
+    topHistory(id);
+  }
+  event.stopPropagation();
+};
+
+//置顶
+const topHistory = async (id, sort) => {
+  const { code, message } = await topWorkflowHistoryApi(id);
+  if (code === 200) {
+    AMessage.success(message);
+    getWorkflowHistoryList();
+  }
+};
+//取消置顶
+const canceltopHistory = async (id, sort) => {
+  const { code, message } = await cancelTopWorkflowHistoryApi(id);
+  if (code === 200) {
+    AMessage.success(message);
+    getWorkflowHistoryList();
+  }
+};
+
+const getWorkflowHistoryList = async () => {
+  const { code, data } = await getWorkflowHistoryListApi({
+    workflow_id: cozeInfo.workflow_id,
+  });
+  if (code === 200) {
+    history.value = data.list;
+  }
+};
+
 // 提交表单
 const handleSubmit = async (formData) => {
   try {
@@ -200,6 +266,9 @@ const getSyncWorkflowTask = async () => {
       if (data.execute_status === 'Success' || data.execute_status === 'Fail') {
         workFlowRes.output = data.output;
         clearTimeout();
+        if (!isEmpty(data.history)) {
+          addHistoryItem(data.history);
+        }
       }
     }
   } catch (error) {