feat: #1 telemetry record/playback with auto-race detection

- TelemetryRecorder: manual + auto mode (IsRaceOn edge detection)
- TelemetryPlayer: timed packet replay into _handle_packet pipeline
- .tsr format: [uint32 elapsed_ms][uint32 len][bytes]
- Settings UI: start/stop, auto toggle, recording list, play button
- API: /record/*, /playback/*, /recordings
This commit is contained in:
2026-07-26 18:40:09 +08:00
parent 4bba4b850d
commit a9bd35baa8
4 changed files with 225 additions and 1 deletions
+40 -1
View File
@@ -134,6 +134,24 @@ const PageSettings = {
});
});
document.getElementById('btn-rec-start')?.addEventListener('click', async () => {
await fetch('/api/record/start', { method: 'POST' });
document.getElementById('btn-rec-start').style.display = 'none';
document.getElementById('btn-rec-stop').style.display = '';
document.getElementById('rec-status').textContent = '录制中...';
});
document.getElementById('btn-rec-stop')?.addEventListener('click', async () => {
await fetch('/api/record/stop', { method: 'POST' });
document.getElementById('btn-rec-start').style.display = '';
document.getElementById('btn-rec-stop').style.display = 'none';
document.getElementById('rec-status').textContent = '已停止';
this._loadRecordings();
});
document.getElementById('rec-auto-mode')?.addEventListener('change', async (e) => {
await fetch('/api/record/auto', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ enabled: e.target.checked }) });
});
this._loadRecordings();
document.getElementById('settings-test-mode')?.addEventListener('change', async (e) => {
const on = e.target.checked;
await API.updateConfig({ ui_test_mode: on });
@@ -181,6 +199,26 @@ const PageSettings = {
this._saveForwards(targets).then(() => Toast.show('已保存 ' + targets.length + ' 个转发目标', 'success'));
},
async _loadRecordings() {
try {
const res = await fetch('/api/recordings');
const list = await res.json();
const el = document.getElementById('recording-list');
if (!el) return;
if (!list.length) { el.innerHTML = '<p style="color:var(--text-tertiary);font-size:12px">暂无录制文件</p>'; return; }
el.innerHTML = list.map(f => {
const size = f.size > 1048576 ? (f.size/1048576).toFixed(1)+'MB' : (f.size/1024).toFixed(1)+'KB';
return '<div class="glass-card" style="padding:8px 12px;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between"><span style="font-size:12px">' + f.name + ' <span style="color:var(--text-tertiary)">' + size + '</span></span><button class="btn btn-sm btn-primary btn-play-rec" data-file="' + f.name + '">播放</button></div>';
}).join('');
el.querySelectorAll('.btn-play-rec').forEach(btn => {
btn.addEventListener('click', async () => {
await fetch('/api/playback/start', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ filename: btn.dataset.file }) });
Toast.show('回放已开始', 'success');
});
});
} catch (e) {}
},
_gamePortListHtml(games, cfg) {
const gamePorts = cfg.game_ports || {};
return games.map(g => '<div class="game-port-row" style="display:flex;gap:8px;align-items:center;margin-bottom:6px"><span class="gp-id" style="width:140px;font-size:13px;color:var(--text-secondary)">' + g.name + '</span><input class="gp-port" type="number" value="' + (gamePorts[g.id] || g.default_port || 20777) + '" min="1024" max="65535" style="width:100px"><span style="font-size:11px;color:var(--text-tertiary)">默认: ' + (g.default_port || 20777) + '</span></div>').join('');
@@ -204,6 +242,7 @@ const PageSettings = {
{ id: 'sec-plugins', label: '游戏插件' },
{ id: 'sec-backup', label: '数据备份' },
{ id: 'sec-dev', label: '开发工具' },
{ id: 'sec-record', label: '录制回放' },
{ id: 'sec-system', label: '系统' },
];
@@ -221,7 +260,7 @@ const PageSettings = {
'<div class="settings-section" id="sec-backup"><h3>数据备份</h3><div class="settings-row"><div><div class="settings-label">导出全量备份</div><div class="settings-desc">打包仪表盘+场景+配置为 .tsb</div></div><div class="settings-control"><button id="btn-export-backup" class="btn btn-secondary btn-sm">下载 .tsb</button></div></div><div class="settings-row"><div><div class="settings-label">恢复备份</div><div class="settings-desc">从 .tsb 文件恢复</div></div><div class="settings-control"><button id="btn-import-backup" class="btn btn-secondary btn-sm">导入 .tsb</button></div></div></div>' +
'<div class="settings-section" id="sec-dev"><h3>开发工具</h3><div class="settings-row"><div><div class="settings-label">UI 测试模式</div><div class="settings-desc">本地随机模拟遥测数据</div></div><div class="settings-control"><label class="switch-label"><input type="checkbox" id="settings-test-mode" ' + (cfg.ui_test_mode?'checked':'') + '><span class="switch-track"></span></label></div></div></div>' +
'<div class="settings-section" id="sec-record"><h3>录制与回放</h3><p style="font-size:12px;color:var(--text-tertiary);margin-bottom:10px">录制原始 UDP 流到 .tsr 文件,离线回放调试仪表盘</p><div class="settings-row"><div><div class="settings-label">录制状态</div><div class="settings-desc"><span id="rec-status">未启动</span></div></div><div class="settings-control"><button id="btn-rec-start" class="btn btn-secondary btn-sm">开始录制</button><button id="btn-rec-stop" class="btn btn-danger btn-sm" style="display:none">停止</button></div></div><div style="margin-top:10px"><h4 style="font-size:13px;color:var(--text-secondary);margin-bottom:6px">回放文件</h4><div id="recording-list" style="max-height:200px;overflow-y:auto"></div></div></div>' +
'<div class="settings-section" id="sec-system"><h3>系统</h3><div class="settings-row"><div><div class="settings-label">重启 TurboSu</div><div class="settings-desc">重新加载所有代码和配置</div></div><div class="settings-control"><button id="btn-restart-server" class="btn btn-danger btn-sm">重启服务</button></div></div></div>' +