本文讲解如何在 ajax 请求返回的聊天消息中，依据 `bot` 布尔字段动态为消息容器添加 `right` 或默认类，从而通过 css 实现用户消息左对齐、机器人消息右对齐的聊天界面布局。
要在聊天应用中区分用户消息与机器人回复，并实现视觉上的左右分离（如用户消息靠左、Bot 消息靠右），关键在于将后端返回的布尔标识 model.bot 映射为前端 DOM 元素的 CSS 类名，再配合 CSS 的 Flex 布局完成定位。
✅ 核心实现思路
在 JavaScript 模板字符串拼接阶段，根据 model.bot 的真假值，动态注入额外的 CSS 类（如 'right'），而非硬编码固定类名。例如：
let botclass = model.bot ? 'right' : '';
const temp = `
<div class='chat ${botclass}'>
<span class='time-left'>${model.datetime}</span>
<b>${model.user_id}</b>
<p>${model.room}</p>
${imgMarkup(model)}
</div>`;该写法利用模板字符串的 ${} 插值能力，使 class 属性可变：当 model.bot === true 时，生成 <div class='chat right'>；否则为 <div class='chat'>。
? 补充 CSS 支持
仅添加类名还不够，需配合 CSS 定义 .chat.right 的布局行为。推荐使用 margin-left: auto 实现右对齐（保持 flex 容器一致性）：
立即学习“前端免费学习笔记（深入）”；
.chat {
border-top: 1px solid #CCC;
margin-top: 1em;
border-radius: 2px;
color: white;
padding: 1em;
display: flex;
flex-direction: column;
max-width: 80%;
background: #4a6fa5;
}
.chat.right {
margin-left: auto;
background: #2e5a3e;
}? 提示：.chat.right 中 margin-left: auto 会将元素推至父容器右侧（前提是父容器为 display: flex 且子项未设 flex-grow）。若 .chatbox（即 #display）尚未设置为 flex 容器，建议补充：.chatbox { display: flex; flex-direction: column; gap: 0.5em; }
⚠️ 注意事项
- 避免 XSS 风险：当前代码直接插入 model.user_id 和 model.room，若这些字段含用户可控内容（如昵称、消息正文），务必进行 HTML 转义（可用 textContent 替代 innerHTML，或引入 DOMPurify 库）。
- 性能优化建议：setInterval 每秒轮询可能造成服务端压力；生产环境推荐改用 Server-Sent Events (SSE) 或 WebSocket。
-
响应式健壮性：确保 response.models_to_return 始终为数组，可在循环前增加防护：
const messages = Array.isArray(response.models_to_return) ? response.models_to_return : []; for (let model of messages) { /* ... */ }
通过以上改造，即可优雅、可维护地实现基于数据状态的 UI 样式分支，让聊天界面语义清晰、结构灵活。
