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 栅格布局 --> <!-- 使用 arco-design 栅格布局 -->
<a-row :gutter="24" class="chat-grid"> <a-row :gutter="24" class="chat-grid">
<!-- 左侧 HistoryChat --> <!-- 左侧 HistoryChat -->
<a-col :xs="isCollapsed ? 0 : 24" <a-col :xs="isCollapsed ? 0 : 8"
:sm="isCollapsed ? 0 : 12" :sm="isCollapsed ? 0 : 8"
:md="isCollapsed ? 0 : 8" :md="isCollapsed ? 0 : 8"
:lg="isCollapsed ? 0 : 6" :lg="isCollapsed ? 0 : 7"
:xl="isCollapsed ? 0 : 7" :xl="isCollapsed ? 0 : 7"
:xxl="isCollapsed ? 0 : 4" :xxl="isCollapsed ? 0 : 5"
class="history-chat-col"> class="history-chat-col">
<HistoryChat v-if="cozeInfo?.bot_id && !isCollapsed" :cozeInfo="cozeInfo" /> <HistoryChat v-if="cozeInfo?.bot_id && !isCollapsed" :cozeInfo="cozeInfo" />
</a-col> </a-col>
<!-- 右侧聊天内容 --> <!-- 右侧聊天内容 -->
<a-col :xs="24" <a-col :xs="24"
:sm="isCollapsed ? 24 : 12" :sm="isCollapsed ? 24 : 17"
:md="isCollapsed ? 24 : 16" :md="isCollapsed ? 24 : 17"
:lg="isCollapsed ? 24 : 18" :lg="isCollapsed ? 24 : 17"
:xl="isCollapsed ? 24 : 16" class="chat-content-col"> :xl="isCollapsed ? 24 : 16"
:xxl="isCollapsed ? 24 : 18"
class="chat-content-col">
<a-card :bordered="false"> <a-card :bordered="false">
<div class="chat-content-col" style="min-height: fit-content;"> <div class="chat-content-col" style="min-height: fit-content;">
@ -29,7 +31,7 @@
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" /> <img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
</a-tooltip> </a-tooltip>
</div> </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> </div>
</a-card> </a-card>
</a-col> </a-col>