修复:重写本地清屏逻辑,使用 localStorage 记录拉取游标,避免进房带历史功能导致清屏失效

This commit is contained in:
2026-02-28 11:20:34 +08:00
parent 9a98bdfbe6
commit 28d402d204
3 changed files with 42 additions and 3 deletions

View File

@@ -108,11 +108,16 @@
<script>
document.addEventListener('DOMContentLoaded', () => {
const historyMsgs = @json($historyMessages);
const clearId = parseInt(localStorage.getItem(`local_clear_msg_id_{{ $room->id }}`) || '0', 10);
if (historyMsgs && historyMsgs.length > 0) {
// 全局函数 appendMessage 在 scripts.blade.php 中定义
historyMsgs.forEach(msg => {
if (typeof window.appendMessage === 'function') {
window.appendMessage(msg);
// 如果开启了本地清屏,之前的历史记录不再显示
if (msg.id > clearId) {
if (typeof window.appendMessage === 'function') {
window.appendMessage(msg);
}
}
});
}

View File

@@ -105,7 +105,7 @@
下雪</button>
@endif
<button type="button" onclick="location.reload()"
<button type="button" onclick="localClearScreen()"
style="font-size: 11px; padding: 1px 6px; background: #64748b; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🔄
清屏</button>
</div>

View File

@@ -209,6 +209,11 @@
* 追加消息到聊天窗格(原版风格:非气泡模式,逐行显示)
*/
function appendMessage(msg) {
// 记录拉取到的最大消息ID用于本地清屏功能
if (msg && msg.id > _maxMsgId) {
_maxMsgId = msg.id;
}
const isMe = msg.from_user === window.chatContext.username;
const fontColor = msg.font_color || '#000000';
@@ -884,6 +889,35 @@
}
}
// ── 本地清屏(仅限自己的屏幕)───────────────────────────
let _maxMsgId = 0; // 记录当前收到的最大消息 ID
function localClearScreen() {
// 清理公聊窗口
const say1 = document.getElementById('chat-messages-container');
if (say1) say1.innerHTML = '';
// 清理包厢窗口
const say2 = document.getElementById('chat-messages-container2');
if (say2) say2.innerHTML = '';
// 将当前最大消息 ID 保存至本地,刷新时只显示大于此 ID 的历史记录
localStorage.setItem(`local_clear_msg_id_${window.chatContext.roomId}`, _maxMsgId);
// 插入清屏提示
const sysDiv = document.createElement('div');
sysDiv.className = 'msg-line';
const now = new Date();
const timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2,
'0') + ':' + now.getSeconds().toString().padStart(2, '0');
sysDiv.innerHTML =
`<span style="color: #64748b; font-weight: bold;">🧹 您已执行本地清屏</span><span class="msg-time">(${timeStr})</span>`;
if (say1) {
say1.appendChild(sysDiv);
say1.scrollTop = say1.scrollHeight;
}
}
// ── 滚屏开关 ─────────────────────────────────────
function toggleAutoScroll() {
autoScroll = !autoScroll;