feat: TurboSu initial release - racing telemetry dashboard

2026-07-25 15:23:40 +08:00
commit d61bb61a83
61 changed files with 5270 additions and 0 deletions
@@ -0,0 +1,117 @@
+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;
+        });
+    },
+
+    _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 `
+            <div class="debug-field">
+                <div class="debug-field-name">${k}</div>
+                <div class="debug-field-value">${displayVal}</div>
+            </div>`;
+        }).join('') || '<div style="color:var(--text-tertiary);padding:20px;">等待数据...</div>';
+    },
+
+    _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 `<span style="color:var(--text-tertiary)">[${ts}]</span> <span style="color:var(--accent)">→</span> ${preview}`;
+        });
+
+        el.innerHTML = lines.join('\n') || '等待数据...';
+
+        if (this._autoScroll) {
+            el.scrollTop = el.scrollHeight;
+        }
+    },
+
+    cleanup() {
+        WS.off('telemetry', this._onTelemetry);
+    },
+
+    _template() {
+        return `
+        <div class="debug-container">
+            <div class="debug-toolbar animated">
+                <h2 style="font-size:20px;font-weight:700;">数据测试</h2>
+                <span style="flex:1;"></span>
+                <button id="debug-pause-btn" class="btn btn-sm btn-secondary">⏸ 暂停</button>
+                <button id="debug-clear-btn" class="btn btn-sm btn-secondary">清空</button>
+                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);">
+                    <input type="checkbox" id="debug-autoscroll" checked> 自动滚动
+                </label>
+            </div>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0;">
+                <div style="overflow-y:auto;">
+                    <h4 style="font-size:14px;color:var(--text-secondary);margin-bottom:12px;">解析后的数据字段</h4>
+                    <div id="debug-fields">
+                        <div style="color:var(--text-tertiary);padding:20px;">等待数据...</div>
+                    </div>
+                </div>
+                <div style="overflow-y:auto;">
+                    <h4 style="font-size:14px;color:var(--text-secondary);margin-bottom:12px;">原始 JSON 数据流</h4>
+                    <div id="debug-raw" class="debug-data"></div>
+                </div>
+            </div>
+        </div>`;
+    }
+};
+
+window.PageDebug = PageDebug;