用户消息靠右、客服消息靠左需用 css 类区分：.mine 设 margin-left: auto，.theirs 保持左对齐；统一设 max-width: 80%，移动端加 word-wrap: break-word 和 word-break: break-all；小尾巴用伪元素单边框实现，.mine::after 和 .theirs::before 配合 z-index 与差异化圆角确保视觉准确；vue 中须按 timestamp 排序、用唯一 message.id 作 key，发送后通过 this.$nexttick() 触发平滑滚动到底部。
直接用 margin-left: auto 和 margin-right: auto 控制左右对齐，别碰 float 或 position: absolute —— 后者会让时间戳错位、新消息不自动滚动、响应式时气泡重叠。
怎么让用户消息靠右、客服消息靠左
核心是用 CSS 类区分流向，不依赖 DOM 顺序或 JS 动态计算位置：
- 用户消息加
class="mine"，内部容器设margin-left: auto推到右侧 - 客服消息用
class="theirs"，保持默认左对齐，或显式加margin-right: auto - 所有气泡统一加
max-width: 80%，防长文本撑爆屏幕；禁用width: 100% - 移动端需额外加
word-wrap: break-word和word-break: break-all，中文换行才可靠
怎么画出“小尾巴”三角箭头
伪元素 + 0 宽高 + 单边框是最稳方案，不是贴图也不是 SVG —— 兼容性好、缩放无锯齿、CSS 可控性强：
- 左气泡尾巴用
::before，border-color: transparent #ff6a00 transparent transparent，再配合left: -12px定位 - 右气泡尾巴用
::after，border-color: transparent transparent transparent #007aff，配合right: -12px - 两个伪元素必须错开
z-index：背景色箭头（如#007aff）设更高z-index，压住边框色箭头，否则边缘发虚 - 圆角要差异化：
.mine去掉左上角（border-top-left-radius: 0），.theirs去掉右上角（border-top-right-radius: 0）
为什么 Vue 里用 v-for 渲染会出问题
没做排序或 key 管理时，新消息插入会触发整列重绘，导致滚动跳变、动画中断、时间戳错乱：
- 务必用计算属性返回
sortedMessages，按timestamp升序排列 -
:key必须用唯一标识，比如message.id；禁用:key="index"，尤其在增删场景下会出 bug - 时间戳建议统一转成
HH:mm格式，避免每条都调用formatTime()影响性能 - 图片/视频消息需加
load和error监听，防止加载失败后空白气泡卡住布局
输入框回车后怎么确保新消息自动滚动到底部
靠 scrollIntoView({ behavior: 'smooth' }) 最直接，但必须等 DOM 更新完成再执行：
- Vue 场景下得用
this.$nextTick()包一层；不能在sendMessage里直接调scrollIntoView，此时新div还没渲染出来 - 正确写法：
this.$nextTick(() => { this.$refs.chatWindow.scrollTop = this.$refs.chatWindow.scrollHeight; }) - 如果聊天窗口用了
overflow-y: auto但没设固定高度，scrollHeight会不准，必须加max-height和overflow-y: auto - 移动端 Safari 对
scrollIntoView支持不稳定，可降级为手动算scrollTop（例如基于子元素高度累加）
圆角和尾巴的衔接、伪元素的 z-index 层级、以及 Vue 中 DOM 更新时机，这三处最容易被忽略，但一出问题就是整个气泡视觉断裂或滚动失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
