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

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

src/views/agent/chat/index.vue

@@ -1,19 +1,36 @@
 <template>
   <div class="chat-wrap">
-    <span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
+    <span @click="goChatIndex"> <icon-left /> 返回空间 </span>
     <div class="chat-contain">
-      <a-layout>
-        <a-layout-sider class="custom-sider" >
-          <HistoryChat v-if="cozeInfo?.bot_id" :cozeInfo="cozeInfo" />
-        </a-layout-sider>
-        <a-layout>
-          <a-layout-content style="padding: 24px; background: #fff; min-height: 280px">
-            <a-card :bordered="false">
-              <div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
-            </a-card>
-          </a-layout-content>
-        </a-layout>
-      </a-layout>
+      <!-- 使用 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">
+          <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 : 15" class="chat-content-col">
+          <div class="toggle-btn" @click="toggleCollapse">
+            <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
+              <img class="status-icon" :src="isCollapsed ? menuFold : menuUnfold" />
+            </a-tooltip>
+          </div>
+          <a-card :bordered="false">
+
+            <div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
+          </a-card>
+        </a-col>
+      </a-row>
     </div>
   </div>
 </template>
@@ -23,11 +40,19 @@ import { ref, onMounted } from 'vue';
 import { getChatAgent } from '@/api/all/agent';
 import HistoryChat from './components/HistoryChat.vue';
 import { useRouter } from 'vue-router';
+import menuFold from '@/assets/svg/menu-fold.svg';
+import menuUnfold from '@/assets/svg/menu-unfold.svg';
 
 const router = useRouter();
 
 // 存储认证令牌
 const authToken = ref('');
+const isCollapsed = ref(false);
+
+// 切换折叠状态
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value;
+};
 
 // 模拟从API获取token
 const fetchToken = async () => {
@@ -136,5 +161,4 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 @import './style.scss';
-
 </style>

src/views/agent/chat/style.scss

@@ -39,4 +39,6 @@
       width: 15% !important;
     }
   }
+
+
 }

src/views/agent/index/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="agent-wrap">
     <a-input
-      style="float: right; width: 400px"
+      style="float: right;"
       v-model="query.name"
       @blur="getData()"
       placeholder="搜索智能体"
@@ -14,12 +14,14 @@
     </a-input>
     <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-row class="grid-demo " :gutter="24" v-if="item.agent_products.length > 0">
         <a-col  :xs="24"
                 :sm="12"
                 :md="8"
-                :lg="6"
-                :xl="4"  v-for="(product, k) in item.agent_products">
+                :lg="5"
+                :xl="6"
+                :xxl="6"
+                v-for="(product, k) in item.agent_products">
           <div class="card-container" @click="goDetail(product?.type, product?.id)">
             <div class="card-image-container">
               <img

src/views/agent/index/style.scss

@@ -31,6 +31,7 @@
     justify-content: flex-start;
     align-items: flex-start;
     gap: 8px;
+    margin: 5px;
   }
 
   .card-image-container {