const PageDebug = {
_el: null,
_autoScroll: true,
_paused: false,
_rawData: [],
_fieldData: {},
_maxRawLines: 200,
init() {
this._el = document.getElementById('page-debug');
},
render() {
this._el.innerHTML = this._template();
this._bindEvents();
WS.on('telemetry', (data) => this._onTelemetry(data));
},
_bindEvents() {
document.getElementById('debug-clear-btn')?.addEventListener('click', () => {
this._rawData = [];
this._fieldData = {};
this._renderFields();
this._renderRaw();
});
document.getElementById('debug-pause-btn')?.addEventListener('click', () => {
this._paused = !this._paused;
const btn = document.getElementById('debug-pause-btn');
btn.textContent = this._paused ? '▶ 继续' : '⏸ 暂停';
});
document.getElementById('debug-autoscroll')?.addEventListener('change', (e) => {
this._autoScroll = e.target.checked;
});
document.getElementById('debug-show-log')?.addEventListener('click', async () => {
try {
const res = await fetch('/api/logs?lines=100');
const data = await res.json();
const el = document.getElementById('debug-raw');
if (el) el.innerHTML = data.lines.map(l =>
`${l}`
).join('\n');
} catch (e) {}
});
},
_onTelemetry(data) {
if (this._paused) return;
this._fieldData = data;
this._renderFields();
const timestamp = new Date().toISOString();
this._rawData.push({ timestamp, data: { ...data } });
if (this._rawData.length > this._maxRawLines) {
this._rawData.shift();
}
this._renderRaw();
},
_renderFields() {
const container = document.getElementById('debug-fields');
if (!container) return;
const keys = Object.keys(this._fieldData).filter(k => k !== 'raw');
container.innerHTML = keys.map(k => {
const val = this._fieldData[k];
const displayVal = typeof val === 'number' ? val.toFixed(3) : val;
return `
`;
}).join('') || '等待数据...
';
},
_renderRaw() {
const el = document.getElementById('debug-raw');
if (!el) return;
const lines = this._rawData.map(entry => {
const ts = entry.timestamp.substring(11, 23);
const preview = JSON.stringify(entry.data).substring(0, 300);
return `[${ts}] → ${preview}`;
});
el.innerHTML = lines.join('\n') || '等待数据...';
if (this._autoScroll) {
el.scrollTop = el.scrollHeight;
}
},
cleanup() {
WS.off('telemetry', this._onTelemetry);
},
_template() {
return `
`;
}
};
window.PageDebug = PageDebug;