cbb
d2c86c425a
纯前端上位机界面 + esp32_server.py 静态服务/桌面窗口外壳, 不含固件、 不直接访问硬件; 业务 API 由 ESP32_COMM 固件 80 端口跨域提供。 - tabs.html 单窗口多标签外壳, iframe 承载各功能页 - index.html OTA 中继(ESP32 WiFi / GD32 relay / BLE), js/ota + js/ble - can.html / can_monitor.html CAN 通信与接收监控, js/can - motor.html 电机 CAN FD 控制台, js/motor - continuity_test.html LAN9252 通断测试, spi_test.html SPI 测速(临时, 自包含) - 三入口: esp32_app.vbs 桌面窗口 / esp32_web.vbs 浏览器 / serve.bat 控制台调试 - 补 README(页面与目录约定、?v= 缓存版本等改动须知)、.gitignore、 .gitattributes(* -text 保持 Windows 换行原样)
114 lines
3.7 KiB
JavaScript
114 lines
3.7 KiB
JavaScript
/**
|
|
* log.js - 日志系统（带去重 + 自动滚动 + 上限裁剪）
|
|
*
|
|
* 日志环形缓冲、去重、过滤、自动滚动逻辑。
|
|
* 操作 DOM 元素 #logScroll / #logCount / #autoScrollBtn / .log-filter。
|
|
*/
|
|
import { formatTime, escapeHtml } from './utils.js';
|
|
|
|
// ==================== 日志系统状态 ====================
|
|
var MAX_LOGS = 1000; // 缓冲上限，超出后丢弃最旧条目
|
|
var logFilter = 'all';
|
|
var logEntries = [];
|
|
var lastLogHash = null;
|
|
var autoScroll = true;
|
|
|
|
// 缓存 DOM 引用，避免高频日志下重复 getElementById
|
|
var scrollEl = document.getElementById('logScroll');
|
|
var countEl = document.getElementById('logCount');
|
|
var scrollPending = false;
|
|
|
|
/** rAF 批量自动滚动：/logs 一轮可能追加几十行，逐行读 scrollHeight 会每行
|
|
* 触发一次强制布局；合并到下一帧只滚一次，行为不变。 */
|
|
function scheduleAutoScroll() {
|
|
if (!autoScroll || !scrollEl || scrollPending) return;
|
|
scrollPending = true;
|
|
requestAnimationFrame(function () {
|
|
scrollPending = false;
|
|
if (autoScroll && scrollEl) scrollEl.scrollTop = scrollEl.scrollHeight;
|
|
});
|
|
}
|
|
|
|
// ==================== 日志系统 (带去重 + 自动滚动) ====================
|
|
function makeLogHash(level, tag, message) {
|
|
return level + '|' + tag + '|' + message;
|
|
}
|
|
/** 构造一条日志 DOM 节点（tag/message 经 HTML 转义，防 XSS）。 */
|
|
function createLogLine(entry) {
|
|
var div = document.createElement('div');
|
|
div.className = 'log-line';
|
|
div.innerHTML =
|
|
'<span class="lt">[' + escapeHtml(entry.time) + ']</span>' +
|
|
'<span class="lv ' + escapeHtml(entry.level) + '">' + escapeHtml(entry.level) + '</span>' +
|
|
'<span class="lg">[' + escapeHtml(entry.tag) + ']</span>' +
|
|
'<span class="lm">' + escapeHtml(entry.message) + '</span>';
|
|
return div;
|
|
}
|
|
/** 同步 #logCount 为当前可见条目数。 */
|
|
function syncCount() {
|
|
if (countEl) countEl.textContent = logEntries.length;
|
|
}
|
|
/** 超过上限时丢弃最旧条目，并同步移除其 DOM 节点。 */
|
|
function trimIfNeeded() {
|
|
while (logEntries.length > MAX_LOGS) {
|
|
var old = logEntries.shift();
|
|
if (old && old.div && old.div.parentNode) old.div.parentNode.removeChild(old.div);
|
|
}
|
|
}
|
|
/** @description 添加一条日志条目到环形缓冲区和日志面板。 */
|
|
export function addLog(level, tag, message) {
|
|
var hash = makeLogHash(level, tag, message);
|
|
if (hash === lastLogHash) return; // 去重
|
|
lastLogHash = hash;
|
|
var entry = {
|
|
time: formatTime(new Date()),
|
|
level: level,
|
|
tag: tag,
|
|
message: message,
|
|
div: null
|
|
};
|
|
logEntries.push(entry);
|
|
trimIfNeeded();
|
|
if (logFilter !== 'all' && level !== logFilter) {
|
|
syncCount();
|
|
return;
|
|
}
|
|
var div = createLogLine(entry);
|
|
entry.div = div;
|
|
if (scrollEl) {
|
|
scrollEl.appendChild(div);
|
|
scheduleAutoScroll();
|
|
}
|
|
syncCount();
|
|
}
|
|
export function clearLogs() {
|
|
if (scrollEl) scrollEl.innerHTML = '';
|
|
logEntries = [];
|
|
lastLogHash = null;
|
|
syncCount();
|
|
}
|
|
export function setLogFilter(level, btn) {
|
|
document.querySelectorAll('.log-filter').forEach(function (b) { b.classList.remove('active'); });
|
|
if (btn) btn.classList.add('active');
|
|
logFilter = level;
|
|
if (!scrollEl) return;
|
|
var frag = document.createDocumentFragment();
|
|
logEntries.forEach(function (e) {
|
|
if (level === 'all' || e.level === level) {
|
|
var div = createLogLine(e);
|
|
e.div = div;
|
|
frag.appendChild(div);
|
|
} else {
|
|
e.div = null;
|
|
}
|
|
});
|
|
scrollEl.innerHTML = '';
|
|
scrollEl.appendChild(frag);
|
|
scheduleAutoScroll();
|
|
}
|
|
export function toggleAutoScroll() {
|
|
autoScroll = !autoScroll;
|
|
var btn = document.getElementById('autoScrollBtn');
|
|
if (btn) btn.textContent = autoScroll ? '\uD83D\uDCCC 自动滚动' : '\u23F8\uFE0F 暂停滚动';
|
|
}
|