From b15e42891d3ea1053d7af297ad6e4896c405233f Mon Sep 17 00:00:00 2001
From: pllx <pllx@users.noreply.github.com>
Date: Tue, 28 Apr 2026 11:55:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=E5=90=8E=E5=8F=B0?=
 =?UTF-8?q?=E6=81=A2=E5=A4=8D=E6=97=B6=E6=B6=88=E6=81=AF=E6=9A=B4=E5=88=B7?=
 =?UTF-8?q?=EF=BC=8C=E5=8F=AA=E6=B8=B2=E6=9F=93=E6=9C=80=E5=90=8E50?=
 =?UTF-8?q?=E6=9D=A1=E5=B9=B6=E6=8F=92=E5=85=A5=E7=9C=81=E7=95=A5=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/chat-room/message-renderer.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/resources/js/chat-room/message-renderer.js b/resources/js/chat-room/message-renderer.js
index 9397f2b..aa86926 100644
--- a/resources/js/chat-room/message-renderer.js
+++ b/resources/js/chat-room/message-renderer.js
@@ -457,6 +457,9 @@ export function enqueueChatMessage(msg) {
     state.chatMessageFlushTimer = scheduleFlush(flushQueuedChatMessages);
 }
 
+/** 后台恢复时公屏最大渲染条数，避免暴刷 */
+const MAX_BURST_RENDER = 50;
+
 /**
  * 分批渲染待处理消息，给动画、输入和滚动留出主线程时间。
  */
@@ -466,6 +469,23 @@ export function flushQueuedChatMessages() {
 
     state.chatMessageFlushTimer = null;
 
+    // 大批量消息堆积（后台标签页恢复）时，丢弃早于 MAX_BURST_RENDER 的消息，
+    // 插入一条省略提示，避免用户一回来就看到满屏消息狂刷。
+    if (state.pendingChatMessages.length > MAX_BURST_RENDER + 20) {
+        const skipped = state.pendingChatMessages.length - MAX_BURST_RENDER;
+        state.pendingChatMessages.splice(0, skipped);
+
+        const container = state.container;
+        if (container) {
+            const notice = document.createElement("div");
+            notice.className = "msg-line msg-burst-notice";
+            notice.style.cssText =
+                "text-align:center;padding:6px 0;margin:4px 0;font-size:12px;color:#94a3b8;border-top:1px dashed #d1d5db;border-bottom:1px dashed #d1d5db;";
+            notice.textContent = `⏫ 省略了 ${skipped} 条未读消息`;
+            container.appendChild(notice);
+        }
+    }
+
     const batch = state.pendingChatMessages.splice(0, CHAT_MESSAGE_FLUSH_BATCH_SIZE);
     const renderBatch = createChatMessageRenderBatch();
     batch.forEach((msg) => appendMessage(msg, renderBatch));