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

-调整了智能体卡片的布局结构，优化了标题和描述的显示方式
- 改进了历史对话的展示样式，增加了滚动指示器
- 统一了标签和图标的样式，提升了视觉一致性
- 优化了搜索框和卡片列表的样式，提高了用户体验

src/views/agent/chat/components/HistoryChat.vue

@@ -2,33 +2,33 @@
   <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>
-            <img
+            <img class="status-icon" :src="chatbotIcon" />
-              class="status-icon"
-              :src="chatbotIcon"
-            />
           </div>
           <div class="text">对话式</div>
         </div>
       </div>
       <div class="usage-info">
-        <div class="count">{{cozeInfo.views}}</div>
+        <a-space>
-        <div class="label">次使用</div>
+          <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}}
+        {{ cozeInfo.description }}
       </div>
     </div>
-
   </div>
 </template>
 
@@ -64,8 +64,7 @@ const truncateText = (text: string, maxLength = 30) => {
   return text.slice(0, maxLength) + '...';
 };
 
-onMounted(() => {
+onMounted(() => {});
-});
 </script>
 
 <style scoped>

src/views/agent/chat/components/history.scss

@@ -94,14 +94,9 @@
     }
 
     .usage-info {
-      width: 79px;
+      padding: 12px;
-      height: 34px;
+      margin-right: 12px;
-      position: relative;
-
       .count {
-        left: 0px;
-        top: 10px;
-        position: absolute;
         color: var(--Text-2, #3C4043);
         font-size: 16px;
         font-family: 'Alibaba PuHuiTi', sans-serif;
@@ -110,9 +105,6 @@
       }
 
       .label {
-        left: 22px;
-        top: 10px;
-        position: absolute;
         color: var(--Text-3, #737478);
         font-size: 12px;
         font-family: 'Alibaba PuHuiTi', sans-serif;

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

@@ -19,10 +19,15 @@
         </div>
       </div>
       <div class="usage-info">
-        <div class="count">{{cozeInfo.views}}</div>
+        <a-space>
-        <div class="label">次使用</div>
+          <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}}

src/views/agent/work-flow/components/history.scss

@@ -90,17 +90,10 @@
         }
       }
     }
-
     .usage-info {
-      width: 79px;
+      padding: 12px;
-      height: 34px;
+      margin-right: 12px;
-      position: relative;
-      margin-top: 10px;
-      margin-right: 24px;
       .count {
-        left: 20px;
-        top: 10px;
-        position: absolute;
         color: var(--Text-2, #3C4043);
         font-size: 16px;
         font-family: 'Alibaba PuHuiTi', sans-serif;
@@ -109,9 +102,6 @@
       }
 
       .label {
-        left: 43px;
-        top: 10px;
-        position: absolute;
         color: var(--Text-3, #737478);
         font-size: 12px;
         font-family: 'Alibaba PuHuiTi', sans-serif;