目录
- 前言
- 需求描述
- 实现思路
- 4. 总结
前言
你好，我是喵喵侠。随着最近两年AI的爆火，市面上出现了各种各样的大模型，而用户和大模型最常见的交互方式就是聊天对话形式，而这个对话框的交互逻辑从IM软件诞生那一刻就已经出现了。对于前端开发来说，巧妙的利用CSS的属性，可以快速的布局一个聊天窗口。下面来一起看看吧！
需求描述
某次我接到一个开发任务，那就是要开发一个AI对话聊天窗口。由于好久没开发类似这样的需求，显得有些生疏，正好研究完成后，可以用这篇文章记录一下。
在这个任务中，需要实现一个基本的聊天界面，用户可以发送消息，并接收来自AI模型的回复。每次用户的提问和AI的回答都将组成一个对话单元，展示在页面上。
由上图可以看到，这种自己的消息在右边，对方的回复在左边的布局还蛮特别的，因为它不是固定朝向某一个方向对齐，而是先是右边后是左边这样的。知道了这个布局要求，接着就是想办法实现了。
实现思路
我的实现核心思路是用flex布局，flex布局是设置flex-direction:column实现垂直排列，然后分别设置子元素的align-self属性。，自己的消息是align-self:flex-end是靠右，AI回复的消息是align-self:flex-start是靠左。这样布局就很快实现了。
我的完整代码示例如下：
代码语言：vue复制<template>
<div class="chat-container">
<div class="chat-item" v-for="(message, index) in messages" :key="index">
<!-- 用户发送的消息 -->
<div class="chat-ask">{{ message.ask }}</div>
<!-- AI 回复的消息 -->
<div class="chat-answer">{{ message.answer }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 用于存储每组对话的数组
messages: [
{ ask: "你好，喵喵AI！", answer: "你好！有什么我能帮助你的吗？" },
{ ask: "今天天气怎么样？", answer: "今天的天气非常好，阳光明媚。" },
],
};
},
};
</script>
<style scoped>
.chat-container {
padding: 20px;
background-color: #f0f4f8;
}
.chat-item {
display: flex;
flex-direction: column;
margin-bottom: 16px;
}
.chat-ask {
/* 右对齐，模拟用户的消息 */
align-self: flex-end;
background: #419fff;
color: #fff;
border-radius: 12px 2px 12px 12px;
padding: 8px;
max-width: 80%; /* 确保内容不超过屏幕宽度 */
word-break: break-all; /* 长单词自动换行 */
margin-bottom: 10px;
}
.chat-answer {
/* 左对齐，模拟AI的回复 */
align-self: flex-start;
background: #daedff;
color: #333;
border-radius: 12px;
padding: 8px;
max-width: 80%; /* 确保内容不超过屏幕宽度 */
word-break: break-all; /* 长单词自动换行 */
}
</style>我上面写的每个对话气泡，都设置了max-width，这是为了防止消息宽度超出屏幕，同时也适配了消息长度比较小的情况。
如果要开发的不是AI聊天一问一答的形式，而是通过WebSocket的实时聊天室这样的，那么这个数组对下的结构就不太使用了。你可以给别人的消息标记一个类名是right-msg，给自己的消息标记为left-msg，这样你设置了align-self后布局还是一样的效果。
上面的案例只是实现了对话框对话部分的布局，具体的发送消息框和按钮，以及发送消息后容器滚动到指定位置等细节，可以自行完善。
总结
通过合理使用Flexbox布局，可以很轻松的实现一个AI聊天对话框的页面布局。该布局不仅直观简洁，而且易于扩展和维护。无论是开发简单的聊天应用，还是集成复杂的AI模型，这样的布局都能提供良好的用户体验。希望能对你有所帮助，如果你有别的好用的方法，可以在评论区留言。
