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));