CSS气泡布局核心是用margin-left/right: auto控制左右，禁用float和absolute；mine类右对齐并去左上圆角，theirs类左对齐并去右上圆角；小尾巴用伪元素单边框实现；Vue中需排序、唯一key、nextTick滚动到底部。
怎么用 CSS 实现左右区分的气泡布局
核心就一条：靠 margin-left: auto 和 margin-right: auto 控制方向，别用 float 或 position: absolute —— 后者会导致时间戳错位、新消息不自动滚动、响应式时气泡重叠。
- 用户消息加
class="mine"，内部容器设margin-left: auto推到右侧 - 对方消息用
class="theirs"，保持默认左对齐，或显式设margin-right: auto - 所有气泡统一加
max-width: 80%，防长文本撑爆屏幕；别用width: 100% - 圆角要差异化：
.mine去掉左上角（border-top-left-radius: 0），.theirs去掉右上角（border-top-right-radius: 0）
怎么给气泡加“小尾巴”（三角箭头）
用伪元素 + 0 宽高 + 单边框是最稳方案，不是画图贴图，也不依赖 SVG —— 兼容性好、缩放无锯齿、CSS 可控性强。
- 箭头本质是四个三角形拼成的矩形，只留一个边框有色，其余设
transparent - 左气泡尾巴用
::before，border-color: transparent #ff6a00 transparent transparent，再配合left: -12px定位 - 右气泡尾巴用
::after，border-color: transparent transparent transparent #007aff，配合right: -12px - 两个伪元素必须错开
z-index，让背景色箭头压在边框箭头下面，否则边缘发虚
为什么不能直接用 v-for 渲染消息列表
Vue 场景下，如果没做排序或 key 管理，新消息插入会触发整列重绘，导致滚动位置跳变、动画中断、时间戳错乱。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 务必用计算属性返回
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
top 值没跟着气泡 padding 和 font-size 动态调。 
