From be3843585ad0740d7a08f2358d210d01ecf8c47c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com>
Date: Tue, 29 Jul 2025 16:00:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor(agent):=20=E4=BC=98=E5=8C=96=E5=AE=A2?=
 =?UTF-8?q?=E6=9C=8D=E5=92=8C=E5=B7=A5=E4=BD=9C=E6=B5=81=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整了客服和工作流界面的栅格布局，优化了不同屏幕大小下的显示效果- 改进了历史聊天记录的展示方式，增加了 tooltip 和自适应布局
- 统一了聊天窗口的样式，增加了反馈功能- 优化了工作流内容区域的样式，使其更加适应长内容展示
---
 .../agent/chat/components/HistoryChat.vue     | 25 +------
 src/views/agent/chat/components/history.scss  | 36 ++++++++--
 src/views/agent/chat/index.vue                | 66 ++++++++++++-------
 src/views/agent/chat/style.scss               |  4 ++
 src/views/agent/index/style.scss              |  1 -
 .../work-flow/components/DynamicForm.vue      |  2 +-
 .../work-flow/components/HistoryChat.vue      | 36 ++--------
 .../agent/work-flow/components/history.scss   |  1 +
 src/views/agent/work-flow/index.vue           |  5 +-
 src/views/agent/work-flow/style.scss          |  4 ++
 10 files changed, 94 insertions(+), 86 deletions(-)

diff --git a/src/views/agent/chat/components/HistoryChat.vue b/src/views/agent/chat/components/HistoryChat.vue
index 479aa92..ff992ed 100644
--- a/src/views/agent/chat/components/HistoryChat.vue
+++ b/src/views/agent/chat/components/HistoryChat.vue
@@ -7,7 +7,9 @@
     </div>
     <div class="info-section">
       <div class="title-group">
-        <div class="title">{{ cozeInfo.name }}</div>
+        <a-tooltip :content="cozeInfo.name">
+          <div class="title">{{ cozeInfo.name }}</div>
+        </a-tooltip>
         <div class="tag">
           <div>
             <img class="status-icon" :src="chatbotIcon" />
@@ -34,7 +36,6 @@
 
 <script lang="ts" setup>
 import { defineProps } from 'vue';
-import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
 import chatbotIcon from '@/assets/svg/chatbot.svg';
 
 const props = defineProps({
@@ -44,26 +45,6 @@ const props = defineProps({
   },
 });
 
-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>
 
diff --git a/src/views/agent/chat/components/history.scss b/src/views/agent/chat/components/history.scss
index 8957438..89b5f28 100644
--- a/src/views/agent/chat/components/history.scss
+++ b/src/views/agent/chat/components/history.scss
@@ -37,7 +37,7 @@
 
   .info-section {
     align-self: stretch;
-    padding: 10px 0 0 10px;
+    padding: 10px 10px 0 12px;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
@@ -55,6 +55,19 @@
         font-weight: 400;
         line-height: 26px;
         padding: 10px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: 150px;
+        flex-shrink: 0;
+      }
+
+      @media (max-width: 768px) {
+        .title {
+          font-size: 16px;
+          padding: 8px;
+          max-width: 100px;
+        }
       }
 
       .tag {
@@ -92,16 +105,19 @@
         }
       }
     }
-
     .usage-info {
       padding: 12px;
-      margin-right: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
       .count {
         color: var(--Text-2, #3C4043);
         font-size: 16px;
         font-family: 'Alibaba PuHuiTi', sans-serif;
         font-weight: 400;
         line-height: 24px;
+        white-space: nowrap;
       }
 
       .label {
@@ -110,8 +126,21 @@
         font-family: 'Alibaba PuHuiTi', sans-serif;
         font-weight: 400;
         line-height: 20px;
+        white-space: nowrap;
+      }
+      @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        .count {
+          font-size: 14px;
+        }
+        .label {
+          font-size: 10px;
+        }
       }
     }
+
   }
 
   .description-section {
@@ -135,7 +164,6 @@
   }
 
 
-
   .history-section {
     align-self: stretch;
     flex: 1 1 0;
diff --git a/src/views/agent/chat/index.vue b/src/views/agent/chat/index.vue
index e59834a..2927681 100644
--- a/src/views/agent/chat/index.vue
+++ b/src/views/agent/chat/index.vue
@@ -2,36 +2,38 @@
   <div class="chat-wrap">
     <span @click="goChatIndex"> <icon-left /> 返回空间 </span>
     <div class="chat-contain">
-      <!-- 使用 arco-design 栅格布局 -->
       <a-row :gutter="24" class="chat-grid">
         <!-- 左侧 HistoryChat -->
-        <a-col     :xs="isCollapsed ? 0 : 24"
-                   :sm="isCollapsed ? 0 : 12"
-                   :md="isCollapsed ? 0 : 8"
-                   :lg="isCollapsed ? 0 : 6"
-                   :xl="isCollapsed ? 0 : 7"
-                   :xxl="isCollapsed ? 0 : 4"
-                   class="history-chat-col">
+        <a-col
+          :xs="isCollapsed ? 0 : 3"
+          :sm="isCollapsed ? 0 : 4"
+          :md="isCollapsed ? 0 : 5"
+          :lg="isCollapsed ? 0 : 6"
+          :xl="isCollapsed ? 0 : 7"
+          :xxl="isCollapsed ? 0 : 7"
+          class="history-chat-col"
+        >
           <HistoryChat v-if="cozeInfo?.bot_id && !isCollapsed" :cozeInfo="cozeInfo" />
         </a-col>
 
         <!-- 右侧聊天内容 -->
-        <a-col    :xs="24"
-                  :sm="isCollapsed ? 24 : 12"
-                  :md="isCollapsed ? 24 : 16"
-                  :lg="isCollapsed ? 24 : 18"
-                  :xl="isCollapsed ? 24 : 16"
-                  :xxl="isCollapsed ? 24 : 16"
-                  class="chat-content-col">
-
+        <a-col
+          :xs="24"
+          :sm="isCollapsed ? 24 : 13"
+          :md="isCollapsed ? 24 : 14"
+          :lg="isCollapsed ? 24 : 15"
+          :xl="isCollapsed ? 24 : 16"
+          :xxl="isCollapsed ? 24 : 16"
+          class="chat-content-col"
+        >
           <a-card :bordered="false">
-            <div class="chat-content-col" style="min-height: fit-content;">
+            <div class="chat-content-col" style="min-height: fit-content">
               <div class="toggle-btn" @click="toggleCollapse">
                 <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
                   <img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
                 </a-tooltip>
               </div>
-              <div id="coze-chat-container" ></div>
+              <div id="coze-chat-container"></div>
             </div>
           </a-card>
         </a-col>
@@ -107,7 +109,7 @@ const cozeInfo = reactive({
 let cozeWebSDK = null;
 const initChat = async () => {
   const { code, data } = await getChatAgent(query.id);
-  if (code != 200) {
+  if (code !== 200) {
     return false;
   }
 
@@ -129,15 +131,31 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
     ui: {
       chatBot: {
         el: document.getElementById('coze-chat-container'),
-        width: '95%',
+        width: '100%',
         height: '100%',
         title: name,
         isNeedFunctionCallMessage: true,
+        feedback: {
+          isNeedFeedback: true,
+          feedbackPanel: {
+            title: '您对这个回答有什么看法？请告诉我们',
+            placeholder: '请详细描述您的问题...',
+            tags: [
+              {
+                label: '信息不正确',
+              },
+              {
+                label: '涉及敏感信息',
+                isNeedDetail: true,
+              },
+            ],
+          },
+        },
       },
       base: {
         icon: '',
         zIndex: 1000,
-        lang:'zh-CN'
+        lang: 'zh-CN',
       },
       footer: {
         expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
@@ -147,9 +165,9 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
       },
       conversations: {
         isNeed: true,
-        isNeedAddNewConversationBoolean: true,
-        isNeedQuoteBoolean: true,
-      }
+        isNeedAddNewConversation: true,
+        isNeedQuote: true,
+      },
     },
     auth: auth,
     userInfo: userInfo,
diff --git a/src/views/agent/chat/style.scss b/src/views/agent/chat/style.scss
index e2128d4..32cc581 100644
--- a/src/views/agent/chat/style.scss
+++ b/src/views/agent/chat/style.scss
@@ -40,5 +40,9 @@
     }
   }
 
+  .toggle-btn{
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
 
 }
diff --git a/src/views/agent/index/style.scss b/src/views/agent/index/style.scss
index abc9f94..6fb3d1e 100644
--- a/src/views/agent/index/style.scss
+++ b/src/views/agent/index/style.scss
@@ -124,7 +124,6 @@
       gap: 4px;
 
       .status-icon {
-        width: 12px;
         height: 12px;
       }
 
diff --git a/src/views/agent/work-flow/components/DynamicForm.vue b/src/views/agent/work-flow/components/DynamicForm.vue
index d3cfb62..b7ccc21 100644
--- a/src/views/agent/work-flow/components/DynamicForm.vue
+++ b/src/views/agent/work-flow/components/DynamicForm.vue
@@ -79,7 +79,7 @@ const handleSubmit = async () => {
   padding: 24px;
   border: 1px solid #d7d7d9; /* 添加灰色边框 */
   background: var(--BG-White, white);
-  height: 70vh;
+  min-height: 70vh;
 
   :deep(.arco-input-wrapper),
   :deep(.arco-textarea-wrapper) {
diff --git a/src/views/agent/work-flow/components/HistoryChat.vue b/src/views/agent/work-flow/components/HistoryChat.vue
index 0ff5bb0..37d2ef3 100644
--- a/src/views/agent/work-flow/components/HistoryChat.vue
+++ b/src/views/agent/work-flow/components/HistoryChat.vue
@@ -2,18 +2,15 @@
   <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">
       <div class="title-group">
-        <div class="title">{{cozeInfo.name}}</div>
+        <div class="title">{{ cozeInfo.name }}</div>
         <div class="tag">
           <div class="">
-            <img
-              class="status-icon"
-              :src="workflow"
-            />
+            <img class="status-icon" :src="workflow" />
           </div>
           <div class="text">工作流</div>
         </div>
@@ -30,16 +27,14 @@
 
     <div class="description-section">
       <div class="description">
-        {{cozeInfo.description}}
+        {{ cozeInfo.description }}
       </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({
@@ -49,28 +44,7 @@ const props = defineProps({
   },
 });
 
-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(() => {
-});
+onMounted(() => {});
 </script>
 
 <style scoped>
diff --git a/src/views/agent/work-flow/components/history.scss b/src/views/agent/work-flow/components/history.scss
index 73692b3..ed4db70 100644
--- a/src/views/agent/work-flow/components/history.scss
+++ b/src/views/agent/work-flow/components/history.scss
@@ -93,6 +93,7 @@
     .usage-info {
       padding: 12px;
       margin-right: 12px;
+      margin-top: 10px;
       .count {
         color: var(--Text-2, #3C4043);
         font-size: 16px;
diff --git a/src/views/agent/work-flow/index.vue b/src/views/agent/work-flow/index.vue
index aa52383..4d8b37f 100644
--- a/src/views/agent/work-flow/index.vue
+++ b/src/views/agent/work-flow/index.vue
@@ -10,7 +10,7 @@
           :sm="isCollapsed ? 0 : 3"
           :md="isCollapsed ? 0 : 4"
           :lg="isCollapsed ? 0 : 6"
-          :xl="isCollapsed ? 0 : 7"
+          :xl="isCollapsed ? 0 : 8"
           :xxl="isCollapsed ? 0 : 5"
         >
           <HistoryChat v-if="!isCollapsed" :cozeInfo="cozeInfo" />
@@ -36,12 +36,11 @@
         <!-- 主内容区域 -->
         <a-col
           class="right-box content-container"
-          style="height: 70vh"
           :xs="isCollapsed ? 4 : 2"
           :sm="isCollapsed ? 4 : 4"
           :md="isCollapsed ? 6 : 6"
           :lg="isCollapsed ? 8 : 8"
-          :xl="isCollapsed ? 10 : 10"
+          :xl="isCollapsed ? 10 : 9"
           :xxl="isCollapsed ? 12 : 12"
         >
           <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
diff --git a/src/views/agent/work-flow/style.scss b/src/views/agent/work-flow/style.scss
index a6da512..708c41c 100644
--- a/src/views/agent/work-flow/style.scss
+++ b/src/views/agent/work-flow/style.scss
@@ -27,6 +27,10 @@
   .content-container {
     width: 40%;
     background-color: #fff;
+    min-height: 70vh; // 初始高度
+    overflow: auto;    // 允许滚动
+    word-wrap: break-word;
+    white-space: pre-wrap;
   }
 
   .work-res-span {