私信聊天页面不是“堆几个气泡就行”，核心矛盾在于：消息方向、滚动锚定、断连状态、输入体验四者必须同步稳住，漏掉任一环，用户就会觉得“卡”“错位”“发不出”“看不到新消息”。

怎么用 margin-left: auto 和 margin-right: auto 区分自己和对方消息

别碰 float 或 position: absolute —— 它们会让时间戳脱离气泡上下文，响应式时左右消息互相压叠。正确做法是让每条消息用一个 <div class="message"> 包裹，内部气泡再设边距： <ul> <li>自己消息加 <code>class="mine"，气泡上写 margin-left: auto + border-top-left-radius: 0

对方消息加 class="theirs"，气泡上写 margin-right: auto + border-top-right-radius: 0

所有气泡必须设 max-width: 80%，禁用 width: 100%；否则窄屏下文字挤成竖线，气泡反而变宽

为什么 scrollIntoView 总是不滚到底部

不是 API 坏了，是调用时机或容器配置错了。典型现象：新消息来了，页面纹丝不动；或者只滚一次，后续消息全卡在视口外。

• 必须等新消息 DOM 节点真实插入后才调用，原生 JS 推荐包一层 requestAnimationFrame，Vue 用 this.$nextTick，React 用 useEffect 监听 messages.length
• 滚动容器（比如 class="messages"）必须有固定高度（如 max-height: 60vh）+ overflow-y: auto；靠父级撑高会导致 scrollHeight 计算失准
• 不要对整个列表调 scrollIntoView，要对最新一条 <div class="message"> 元素调：<code>newMsgElement.scrollIntoView({ behavior: 'smooth', block: 'end' })

  WebSocket 断连时，发送按钮为什么变灰却不提示

  UI 状态没和连接状态同步，用户操作被静默丢弃。这不是“重连逻辑难”，而是“断连期间的消息是否进队列、是否标记、是否反馈”没设计清楚。

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • 点击发送前先检查 socket.readyState === WebSocket.OPEN，否则把消息推入 pendingQueue 数组
  • 按钮加 disabled 并显示 loading 状态，但 <textarea></textarea> 保留已输入内容，避免用户重输
  • 重连成功后，遍历 pendingQueue 逐条重发，并从队列中移除；失败则弹 toast 提示“网络异常，已暂存”

  长文本、中英文混排消息怎么不撑破气泡

  单靠 white-space: normal 不够，中文 ID、Base64 字符串、超长 URL 会直接顶穿 max-width。

  • 气泡内文字统一加 word-break: break-all（中文场景优先），或 overflow-wrap: break-word（英文单词需保完整）
  • 伪元素小尾巴的偏移值（如 left: -12px）必须和 max-width 同步缩放；用 rem 或 vw 时，尾巴位置也要跟着变，否则高 DPI 屏幕下箭头悬空
  • 时间戳必须放在气泡外层（不是子元素），用 text-align: right 或 margin-left: auto 对齐自身方向，否则缩放时会漂移

  真正难的不是画出左右气泡，而是在输入框自动增高、消息动态增删、网络抖动、多设备缩放、无障碍读屏这些真实场景里，让每条消息的位置、滚动、状态、可访问性全都咬合得严丝合缝——差一点，体验就断了。