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>