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

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

src/views/agent/chat/index.vue

@@ -1,43 +1,49 @@
 <template>
-  <div class="chat-wrap">
-    <span @click="goChatIndex"> <icon-left /> 返回空间 </span>
-    <div class="chat-contain">
-      <a-row :gutter="24" class="chat-grid">
-        <!-- 左侧 HistoryChat -->
-        <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>
+  <div>
+    <span class="back-wap" @click="goChatIndex"> <icon-left /> 返回空间 </span>
+    <div class="workflow-container">
+      <div class="left-wap" v-if="isCollapsed == false">
+        <div class="header">
+          <div class="image-body">
+            <img :src="cozeInfo?.image_url" />
+          </div>
+        </div>
+        <div class="content">
+          <div class="title-body">
+            <div class="text">{{ cozeInfo?.name }}</div>
+            <div  class="tag-body">
+              <div class="">
+                <img class="status-icon" :src="chatbotIcon" />
+              </div>
+              <div class="text">对话式</div>
+            </div>
+          </div>
+          <div class="use-body">
+            <div class="num">{{ cozeInfo?.views }}</div>
+            <div class="text">次使用</div>
+          </div>
+        </div>
+        <div class="description">
+          <div class="text">
+            {{ cozeInfo?.description }}
+          </div>
+        </div>
 
-        <!-- 右侧聊天内容 -->
-        <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>
+      <div class="right-wap">
+        <div class="header">
+          <div class="body">
+            <div class="">
               <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>
-          </a-card>
-        </a-col>
-      </a-row>
+          </div>
+        </div>
+        <div class="content" id="coze-chat-container"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -45,10 +51,11 @@
 <script setup>
 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';
+import workflow from '@/assets/svg/workflow.svg';
+import chatbotIcon from '@/assets/svg/chatbot.svg';
 
 const router = useRouter();