zcdsj
/
plc_control
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(events): infinite scroll with page_size=10, replace full re-render 

Replace bulk load+re-render with scroll-based pagination: load 10 items
on init, append next page when scrolling near the bottom. prependEvent
now inserts directly into DOM instead of rebuilding from state.events.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
caoqianming 2026-03-25 13:23:18 +08:00
parent 2a247dd70b
commit bc6e6e889f
1 changed files with 64 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
web/js/events.js
View File

@ -2,56 +2,80 @@ import { apiFetch } from "./api.js";
import { dom } from "./dom.js"; import { dom } from "./dom.js";
import { state } from "./state.js"; import { state } from "./state.js";
const PAGE_SIZE = 10;
let _page = 1;
let _hasMore = false;
let _loading = false;
function formatTime(value) { function formatTime(value) {
if (!value) { return value || "--";
return "--";
}
return value;
} }
export function renderEvents() { function makeCard(item) {
dom.eventList.innerHTML = ""; const row = document.createElement("div");
row.className = "event-card";
if (!state.events.length) { row.innerHTML = `<div class="event-meta"><span class="badge">${(item.level || "info").toUpperCase()}</span><span class="muted event-time">${formatTime(item.created_at)}</span><strong class="event-type">${item.event_type}</strong></div><div class="event-message">${item.message}</div>`;
dom.eventList.innerHTML = '<div class="list-item"><div class="muted">暂无事件</div></div>'; return row;
return;
}
state.events.forEach((item) => {
const row = document.createElement("div");
row.className = "event-card";
row.innerHTML = `<div class="event-meta"><span class="badge">${(item.level || "info").toUpperCase()}</span><span class="muted event-time">${formatTime(item.created_at)}</span><strong class="event-type">${item.event_type}</strong></div><div class="event-message">${item.message}</div>`;
dom.eventList.appendChild(row);
});
} }
function matchesCurrentFilter(item) { async function loadMore() {
if (state.selectedUnitId && item.unit_id !== state.selectedUnitId) { if (_loading || !_hasMore) return;
return false; _loading = true;
}
return true;
}
export function prependEvent(item) { const params = new URLSearchParams({ page: String(_page), page_size: String(PAGE_SIZE) });
if (!matchesCurrentFilter(item)) { if (state.selectedUnitId) params.set("unit_id", state.selectedUnitId);
return;
}
state.events = [item, ...state.events.filter((existing) => existing.id !== item.id)].slice(0, 20); try {
renderEvents(); const response = await apiFetch(`/api/event?${params.toString()}`);
const items = response.data || [];
items.forEach((item) => dom.eventList.appendChild(makeCard(item)));
_hasMore = items.length === PAGE_SIZE;
_page += 1;
} finally {
_loading = false;
}
} }
export async function loadEvents() { export async function loadEvents() {
const params = new URLSearchParams({ _page = 1;
page: "1", _hasMore = false;
page_size: "20", _loading = false;
}); dom.eventList.innerHTML = "";
if (state.selectedUnitId) { const params = new URLSearchParams({ page: "1", page_size: String(PAGE_SIZE) });
params.set("unit_id", state.selectedUnitId); if (state.selectedUnitId) params.set("unit_id", state.selectedUnitId);
_loading = true;
try {
const response = await apiFetch(`/api/event?${params.toString()}`);
const items = response.data || [];
if (!items.length) {
dom.eventList.innerHTML = '<div class="list-item"><div class="muted">暂无事件</div></div>';
return;
}
items.forEach((item) => dom.eventList.appendChild(makeCard(item)));
_hasMore = items.length === PAGE_SIZE;
_page = 2;
} finally {
_loading = false;
} }
const response = await apiFetch(`/api/event?${params.toString()}`);
state.events = response.data || [];
renderEvents();
} }
export function prependEvent(item) {
if (state.selectedUnitId && item.unit_id !== state.selectedUnitId) return;
const placeholder = dom.eventList.querySelector(".list-item");
if (placeholder) placeholder.remove();
dom.eventList.insertBefore(makeCard(item), dom.eventList.firstChild);
}
dom.eventList.addEventListener("scroll", () => {
const el = dom.eventList;
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 40) {
loadMore();
}
});