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

-调整了智能体卡片的布局结构，优化了标题和描述的显示方式
- 改进了历史对话的展示样式，增加了滚动指示器
- 统一了标签和图标的样式，提升了视觉一致性
- 优化了搜索框和卡片列表的样式，提高了用户体验
---
 src/router/routes/modules/agent.ts            |  12 +-
 .../agent/chat/components/HistoryChat.vue     |   2 +-
 src/views/agent/chat/components/history.scss  |  10 +-
 src/views/agent/chat/index.vue                |   9 +-
 src/views/agent/index/index.vue               |   6 +-
 src/views/agent/index/style.scss              |  35 +-
 .../work-flow/components/HistoryChat.vue      |  79 ++--
 .../agent/work-flow/components/history.scss   | 367 ++++++++++--------
 8 files changed, 294 insertions(+), 226 deletions(-)

diff --git a/src/router/routes/modules/agent.ts b/src/router/routes/modules/agent.ts
index 9d40cf5..c97b82d 100644
--- a/src/router/routes/modules/agent.ts
+++ b/src/router/routes/modules/agent.ts
@@ -22,19 +22,11 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         name: 'AgentIndex',
         component: () => import('@/views/agent/index'),
         meta: {
+          locale:'ai应用',
           requiresAuth: false,
           requireLogin: true,
         },
-      },
-      {
-        path: 'index',
-        name: 'AgentIndex',
-        component: () => import('@/views/agent/index'),
-        meta: {
-          requiresAuth: false,
-          requireLogin: true,
-        },
-      },
+      }
     ],
   },
 ];
diff --git a/src/views/agent/chat/components/HistoryChat.vue b/src/views/agent/chat/components/HistoryChat.vue
index a50095f..b68b64b 100644
--- a/src/views/agent/chat/components/HistoryChat.vue
+++ b/src/views/agent/chat/components/HistoryChat.vue
@@ -2,7 +2,7 @@
   <div class="agent-card">
     <div class="header-section">
       <div class="image-container">
-        <img :src="cozeInfo.icon_url" alt="" />
+        <img :src="cozeInfo.icon_url"  alt="" />
       </div>
     </div>
     <div class="info-section">
diff --git a/src/views/agent/chat/components/history.scss b/src/views/agent/chat/components/history.scss
index 9c9ed88..3ac728c 100644
--- a/src/views/agent/chat/components/history.scss
+++ b/src/views/agent/chat/components/history.scss
@@ -22,14 +22,16 @@
     .image-container {
       height: 400px;
       overflow: hidden;
-      border-radius: 8px;
+      border-radius: 10px;
     }
 
     .image-container img {
       width: 100%;
       height: auto;
+      padding: 24px;
       aspect-ratio: 1 / 1;
       object-fit: cover;
+      border-radius: 10px;
     }
   }
 
@@ -94,12 +96,12 @@
 
     .usage-info {
       width: 79px;
-      height: 24px;
+      height: 34px;
       position: relative;
 
       .count {
         left: 0px;
-        top: 0px;
+        top: 10px;
         position: absolute;
         color: var(--Text-2, #3C4043);
         font-size: 16px;
@@ -110,7 +112,7 @@
 
       .label {
         left: 43px;
-        top: 3px;
+        top: 10px;
         position: absolute;
         color: var(--Text-3, #737478);
         font-size: 12px;
diff --git a/src/views/agent/chat/index.vue b/src/views/agent/chat/index.vue
index 5781bd2..4b98134 100644
--- a/src/views/agent/chat/index.vue
+++ b/src/views/agent/chat/index.vue
@@ -83,12 +83,12 @@ const initChat = async () => {
 
   Object.assign(cozeInfo, data.info);
   await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
-  let cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth);
+  let cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth, data.info.user_info);
   cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(cozeConfig);
   showChatPage();
 };
 
-const cozeWebSdkConfig = (botId, name, auth) => {
+const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
   auth.onRefreshToken = function () {
     return '';
   };
@@ -108,11 +108,12 @@ const cozeWebSdkConfig = (botId, name, auth) => {
         icon: '',
         zIndex: 1000,
       },
-      footer:{
-        expressionText:"内容由AI生成，无法确保真实准确，仅供参考。",
+      footer: {
+        expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
       },
     },
     auth: auth,
+    userInfo: userInfo,
     header: {
       isShow: true,
       isNeedClose: false,
diff --git a/src/views/agent/index/index.vue b/src/views/agent/index/index.vue
index c55e5f5..5f467af 100644
--- a/src/views/agent/index/index.vue
+++ b/src/views/agent/index/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="agent-wrap">
     <a-input
-      style="float: right; width: 300px"
+      style="float: right; width: 400px"
       v-model="query.name"
       @blur="getData()"
       placeholder="搜索智能体"
@@ -12,7 +12,7 @@
         <icon-search />
       </template>
     </a-input>
-    <div v-for="(item, index) in list" :key="index">
+    <div  v-for="(item, index) in list" :key="index">
       <span class="span-title">{{ item.name }}</span>
       <a-row class="grid-demo" :gutter="24" v-if="item.agent_products.length > 0">
         <a-col :span="3" v-for="(product, k) in item.agent_products">
@@ -32,7 +32,7 @@
             <div class="card-footer">
               <div
                 :class="['status-tag', product.type === 1 ? 'blue-tag' : 'red-tag']"
-                :style="{ background: product.type === 1 ? 'var(--Functional-Blue-1, #E6F3FF)' : 'var(--Functional-Red-1, #FFE9E7)' }"
+                :style="{ background: product.type === 1 ? 'var(--Functional-Blue-1, #F0EDFF)' : 'var(--Functional-Red-1, #FFE9E7)' }"
                 data-size="mini-20px"
               >
                 <img
diff --git a/src/views/agent/index/style.scss b/src/views/agent/index/style.scss
index f038bcf..0a82e33 100644
--- a/src/views/agent/index/style.scss
+++ b/src/views/agent/index/style.scss
@@ -34,29 +34,42 @@
   }
 
   .card-image-container {
-    width: 99%; // 设置宽度
-    height: 200px; // 设置高度，与宽度一致，保持正方形比例
+    width: 99%;
+    height: 150px;
     display: flex;
     justify-content: center;
     align-items: center;
-    overflow: hidden; // 防止图片超出容器
+    overflow: hidden;
   }
 
   .card-image {
     width: 100%;
     height: 100%;
     border-radius: 7px;
-    object-fit: cover; // 确保图片按比例缩放并裁剪
+    object-fit: cover;
   }
+
   .card-content {
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 4px;
+    flex: 1;
+    overflow: hidden;
+
+    .card-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .card-description {
+      height: 40px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
   }
 
+
   .card-title {
     color: var(--Text-1, #211f24);
     font-size: 16px;
@@ -124,7 +137,7 @@
 
     .blue-tag {
       .status-text {
-        color: var(--Functional-Blue-6, #007BFF);
+        color: var(--Functional-Blue-6, #6D4CFE);
       }
     }
 
diff --git a/src/views/agent/work-flow/components/HistoryChat.vue b/src/views/agent/work-flow/components/HistoryChat.vue
index 1d93bfa..98d42b0 100644
--- a/src/views/agent/work-flow/components/HistoryChat.vue
+++ b/src/views/agent/work-flow/components/HistoryChat.vue
@@ -1,34 +1,51 @@
 <template>
-  <div class="container">
-    <div class="header-image-container">
-      <div class="header-image">
-        <img :src="cozeInfo?.icon_url" alt="Header Image" />
+  <div class="agent-card">
+    <div class="header-section">
+      <div class="image-container">
+        <img :src="cozeInfo.icon_url" alt="" />
       </div>
     </div>
-    <div class="title-container">
-      <div class="title">{{cozeInfo?.name}}</div>
-      <div class="tag">
-        <div class="">
-          <img
-            class="status-icon"
-            :src="workflow"
-          />
+    <div class="info-section">
+      <div class="title-group">
+        <div class="title">{{cozeInfo.name}}</div>
+        <div class="tag">
+          <div class="">
+            <img
+              class="status-icon"
+              :src="workflow"
+            />
+          </div>
+          <div class="text">工作流</div>
         </div>
-        <div class="tag-text">工作流</div>
       </div>
-      <div class="usage-stats">
-        <div class="usage-count">{{cozeInfo?.views}}</div>
-        <div class="usage-label">次使用</div>
+      <div class="usage-info">
+        <div class="count">{{cozeInfo.views}}</div>
+        <div class="label">次使用</div>
       </div>
     </div>
-    <div class="description">
-      {{cozeInfo?.description}}
+    <div class="description-section">
+      <div class="description">
+        {{cozeInfo.description}}
+      </div>
     </div>
+    <div class="divider"></div>
+    <!--    <div class="history-section">-->
+    <!--      <div class="history-title">-->
+    <!--        <div class="text">历史对话</div>-->
+    <!--      </div>-->
+    <!--      <div class="history-list">-->
+    <!--        <div class="history-item">-->
+    <!--          <div class="item-text">梳理这次舆情的时间线和关键节点</div>-->
+    <!--        </div>-->
 
+    <!--      </div>-->
+    <!--    </div>-->
   </div>
 </template>
+
 <script lang="ts" setup>
 import { defineProps } from 'vue';
+import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
 import workflow from '@/assets/svg/workflow.svg';
 
 const props = defineProps({
@@ -36,16 +53,32 @@ const props = defineProps({
     type: Object as () => any,
     default: () => ({}),
   },
-  botId: {
-    type: String,
-    default: '',
-  },
 });
 
+const delMessage = async (chatId, conversationId) => {
+  const { code, data } = await delAgentMessage({ chat_id: chatId, conversation_id: conversationId });
+  if (code === 200) {
+    console.log(data, 'data');
+  }
+};
+
+const conversations = ref([]);
+
+const getHistoryChatData = async (botId) => {
+  const { code, data } = await getHistoryChat({ bot_id: botId });
+  if (code === 200) {
+    conversations.value = data.list;
+  }
+};
+const truncateText = (text: string, maxLength = 30) => {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + '...';
+};
+
 onMounted(() => {
 });
 </script>
 
 <style scoped>
-@import "./history.scss";
+@import './history.scss';
 </style>
diff --git a/src/views/agent/work-flow/components/history.scss b/src/views/agent/work-flow/components/history.scss
index b212e99..e70c356 100644
--- a/src/views/agent/work-flow/components/history.scss
+++ b/src/views/agent/work-flow/components/history.scss
@@ -1,198 +1,225 @@
-.container {
+
+.agent-card {
   width: 100%;
   height: 100%;
   background: var(--BG-100, #F7F8FA);
   overflow: hidden;
   border-radius: 8px;
+  display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
-  display: inline-flex;
-}
 
-.header-image-container {
-  align-self: stretch;
-  height: 160px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  display: flex;
-}
+  .header-section {
+    align-self: stretch;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
 
-.header-image {
-  align-self: stretch;
-  flex: 1 1 0;
-  position: relative;
-  background: #FFEDED;
-  overflow: hidden;
-  border-radius: 8px;
-}
+    .image-container {
+      height: 400px;
+      overflow: hidden;
+      border-radius: 8px;
+    }
 
-.header-image img {
-  width: 408.90px;
-  height: 218px;
-  left: -24.45px;
-  top: -29px;
-  position: absolute;
-}
+    .image-container img {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1 / 1;
+      object-fit: cover;
+    }
+  }
 
-.title-container {
-  align-self: stretch;
-  padding-top: 15px;
-  padding-bottom: 15px;
-  justify-content: space-between;
-  align-items: flex-start;
-  display: inline-flex;
-}
+  .info-section {
+    align-self: stretch;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
 
-.title {
-  justify-content: center;
-  display: flex;
-  flex-direction: column;
-  color: var(--Text-1, #211F24);
-  font-size: 18px;
-  padding: 5px;
-  font-family: Alibaba PuHuiTi;
-  font-weight: 400;
-  line-height: 26px;
-  word-wrap: break-word;
-}
+    .title-group {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 4px;
 
-.tag {
-  height: 20px;
-  padding-left: 8px;
-  padding-right: 8px;
-  background: var(--Functional-Red-1, #FFE9E7);
-  overflow: hidden;
-  border-radius: 2px;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 4px;
-  display: flex;
-}
+      .title {
+        color: var(--Text-1, #211F24);
+        font-size: 18px;
+        font-family: 'Alibaba PuHuiTi', sans-serif;
+        font-weight: 400;
+        line-height: 26px;
+        padding: 10px;
+      }
 
-.tag-icon {
-  width: 12px;
-  height: 12px;
-  position: relative;
-}
+      .tag {
+        height: 20px;
+        padding: 0 8px;
+        background: var(--Functional-Red-1, #FFE9E7);
+        border-radius: 2px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 4px;
 
-.tag-icon-inner {
-  width: 11.50px;
-  height: 10.75px;
-  left: 0.25px;
-  top: 0.63px;
-  position: absolute;
-  background: var(--Functional-Red-6, #F64B31);
-}
+        .icon {
+          width: 12px;
+          height: 12px;
+          position: relative;
 
-.tag-text {
-  color: var(--Functional-Red-6, #F64B31);
-  font-size: 12px;
-  font-family: Alibaba PuHuiTi;
-  font-weight: 400;
-  line-height: 20px;
-  word-wrap: break-word;
-}
+          &::before {
+            content: '';
+            width: 10.74px;
+            height: 10.50px;
+            left: 0.63px;
+            top: 0.75px;
+            position: absolute;
+            background: var(--Brand-6, #6D4CFE);
+          }
+        }
 
-.usage-stats {
-  width: 79px;
-  height: 24px;
-  position: relative;
-}
+        .text {
+          color:  var(--Functional-Red-6, #F64B31);
+          font-size: 12px;
+          font-family: 'Alibaba PuHuiTi', sans-serif;
+          font-weight: 400;
+          line-height: 20px;
+        }
+      }
+    }
 
-.usage-count {
-  left: 0px;
-  top: 0px;
-  position: absolute;
-  color: var(--Text-2, #3C4043);
-  font-size: 16px;
-  font-family: Alibaba PuHuiTi;
-  font-weight: 400;
-  line-height: 24px;
-  word-wrap: break-word;
-}
+    .usage-info {
+      width: 79px;
+      height: 34px;
+      position: relative;
 
-.usage-label {
-  left: 43px;
-  top: 3px;
-  position: absolute;
-  color: var(--Text-3, #737478);
-  font-size: 12px;
-  font-family: Alibaba PuHuiTi;
-  font-weight: 400;
-  line-height: 20px;
-  word-wrap: break-word;
-}
+      .count {
+        left: 0px;
+        top: 10px;
+        position: absolute;
+        color: var(--Text-2, #3C4043);
+        font-size: 16px;
+        font-family: 'Alibaba PuHuiTi', sans-serif;
+        font-weight: 400;
+        line-height: 24px;
+      }
 
-.description {
-  align-self: stretch;
-  color: var(--Text-2, #3C4043);
-  font-size: 14px;
-  font-family: Alibaba PuHuiTi;
-  font-weight: 400;
-  line-height: 22px;
-  word-wrap: break-word;
-  padding-inline: 5px;
-}
+      .label {
+        left: 43px;
+        top: 10px;
+        position: absolute;
+        color: var(--Text-3, #737478);
+        font-size: 12px;
+        font-family: 'Alibaba PuHuiTi', sans-serif;
+        font-weight: 400;
+        line-height: 20px;
+      }
+    }
+  }
 
-.divider {
-  align-self: stretch;
-  height: 0px;
-  outline: 1px var(--Border-2, #E6E6E8) solid;
-  outline-offset: -0.50px;
-}
+  .description-section {
+    align-self: stretch;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
 
-.history-title {
-  color: var(--Text-3, #737478);
-  font-size: 14px;
-  font-family: Alibaba PuHuiTi;
-  font-weight: 400;
-  line-height: 22px;
-  word-wrap: break-word;
-}
+    .description {
+      align-self: stretch;
+      color: var(--Text-2, #3C4043);
+      font-size: 14px;
+      font-family: 'Alibaba PuHuiTi', sans-serif;
+      font-weight: 400;
+      line-height: 22px;
+      padding: 10px;
+    }
+  }
 
-.history-item {
-  align-self: stretch;
-  height: 40px;
-  padding: 8px;
-  border-radius: 8px;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 10px;
-  display: inline-flex;
-}
+  .divider {
+    align-self: stretch;
+    height: 0px;
+    outline: 1px var(--Border-2, #E6E6E8) solid;
+    outline-offset: -0.50px;
+  }
 
-.history-item-text {
-  flex: 1 1 0;
-  color: var(--Text-1, #211F24);
-  font-size: 14px;
-  font-family: Alibaba PuHuiTi;
-  font-weight: 400;
-  line-height: 22px;
-  word-wrap: break-word;
-}
+  .history-section {
+    align-self: stretch;
+    flex: 1 1 0;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
 
-.scroll-indicator {
-  width: 8px;
-  height: 240px;
-  padding-left: 1px;
-  padding-right: 1px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  left: 362px;
-  top: 40px;
-  position: absolute;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 10px;
-  display: inline-flex;
-}
+    .history-title {
+      align-self: stretch;
+      height: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 10px;
 
-.scroll-indicator-bar {
-  flex: 1 1 0;
-  height: 80px;
-  background: var(--BG-600, #939499);
-  border-radius: 4px;
+      .text {
+        color: var(--Functional-Red-6, #F64B31);
+        font-size: 14px;
+        font-family: 'Alibaba PuHuiTi', sans-serif;
+        font-weight: 400;
+        line-height: 22px;
+      }
+    }
+
+    .history-list {
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .history-item {
+        align-self: stretch;
+        height: 40px;
+        padding: 8px;
+        border-radius: 8px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 10px;
+
+        .item-text {
+          flex: 1 1 0;
+          color: var(--Text-1, #211F24);
+          font-size: 14px;
+          font-family: 'Alibaba PuHuiTi', sans-serif;
+          font-weight: 400;
+          line-height: 22px;
+        }
+      }
+    }
+
+    .scroll-indicator {
+      width: 8px;
+      height: 240px;
+      padding: 8px 1px;
+      position: absolute;
+      left: 362px;
+      top: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      gap: 10px;
+
+      .indicator-bar {
+        flex: 1 1 0;
+        height: 80px;
+        background: var(--BG-600, #939499);
+        border-radius: 4px;
+      }
+    }
+  }
 }