refactor(agent): 调整聊天界面布局并优化样式

- 修改 HistoryChat 和 聊天内容 的布局比例,使界面更加平衡
- 添加 xxl 响应式断点,提高大屏幕体验
- 调整聊天容器的宽度和缩进,优化视觉效果
This commit is contained in:
linzhijun@xiaotiai.com
2025-07-28 23:39:12 +08:00
parent f307588cc5
commit d2ee82bf2c

View File

@ -5,22 +5,24 @@
<!-- 使用 arco-design 栅格布局 -->
<a-row :gutter="24" class="chat-grid">
<!-- 左侧 HistoryChat -->
<a-col :xs="isCollapsed ? 0 : 24"
:sm="isCollapsed ? 0 : 12"
<a-col :xs="isCollapsed ? 0 : 8"
:sm="isCollapsed ? 0 : 8"
:md="isCollapsed ? 0 : 8"
:lg="isCollapsed ? 0 : 6"
:lg="isCollapsed ? 0 : 7"
:xl="isCollapsed ? 0 : 7"
:xxl="isCollapsed ? 0 : 4"
:xxl="isCollapsed ? 0 : 5"
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 : 16" class="chat-content-col">
:sm="isCollapsed ? 24 : 17"
:md="isCollapsed ? 24 : 17"
:lg="isCollapsed ? 24 : 17"
:xl="isCollapsed ? 24 : 16"
:xxl="isCollapsed ? 24 : 18"
class="chat-content-col">
<a-card :bordered="false">
<div class="chat-content-col" style="min-height: fit-content;">
@ -29,7 +31,7 @@
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
</a-tooltip>
</div>
<div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
<div id="coze-chat-container" style="width: 90%; margin-left: 100px"></div>
</div>
</a-card>
</a-col>