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

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

src/views/agent/work-flow/components/HistoryChat.vue

@@ -1,36 +1,4 @@
 <template>
-  <div class="agent-card">
-    <div class="header-section">
-      <div class="image-container">
-        <img :src="cozeInfo.icon_url" alt="" />
-      </div>
-    </div>
-    <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>
-      <div class="usage-info">
-        <a-space>
-          <span class="count">{{ cozeInfo.views }}</span>
-        </a-space>
-        <a-space>
-          <span class="label"> 次使用 </span>
-        </a-space>
-      </div>
-    </div>
-
-    <div class="description-section">
-      <div class="description">
-        {{ cozeInfo.description }}
-      </div>
-    </div>
-  </div>
 </template>
 
 <script lang="ts" setup>

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

@@ -38,14 +38,15 @@
           </div>
           <div class="history-item" v-for="(item, index) in history">
             <div class="item-body">
-              <div class="text" @click="getHistoryInfo(item)">
+              <div class="text ellipsis-title" @click="getHistoryInfo(item)">
                 {{ item.title }}
-                <a-trigger position="bottom" :auto-fit-position="false" :unmount-on-close="true">
+              </div>
+              <a-trigger trigger="click" position="bottom" :auto-fit-position="true" :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">
+                      <div class="dropdown-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 ? '取消置顶' : '置顶' }}
@@ -73,7 +74,6 @@
           </div>
         </div>
       </div>
-      </div>
       <div class="right-wap">
         <div class="header">
           <div class="body">

src/views/agent/work-flow/style.scss

@@ -219,6 +219,16 @@
             word-wrap: break-word;
           }
 
+          .ellipsis-title {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            cursor: pointer;
+          }
+          &:hover {
+            background: var(--BG-200, #E6E6E8);
+          }
+
         }
 
       }
@@ -300,6 +310,7 @@
     }
   }
 }
+
 .history-item-dropdown {
   width: 125px;
   padding-top: 8px;
@@ -328,7 +339,7 @@
     align-items: center;
     gap: 8px;
 
-    &.header-item {
+    &:hover {
       background: var(--BG-200, #F2F3F5);
     }