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,99 @@
+const PageHome = {
+    _el: null,
+    _refreshTimer: null,
+
+    init() {
+        this._el = document.getElementById('page-home');
+    },
+
+    async render() {
+        this._el.innerHTML = this._template();
+        this._startRefresh();
+        await this._refreshCards();
+    },
+
+    async _refreshCards() {
+        try {
+            const status = await API.getStatus();
+            this._updateCard('card-server', status.server_running ? '运行中' : '已停止', status.server_running ? 'success' : 'danger');
+            this._updateCard('card-telemetry', status.telemetry_running ? '监听中' : '未启动', status.telemetry_running ? 'success' : 'warning');
+            this._updateCard('card-game', status.selected_game_id || '未选择', 'info');
+            this._updateCard('card-connections', `${status.ws_clients} 个客户端`, status.ws_clients > 0 ? 'success' : 'secondary');
+            this._updateCard('card-packets', `${status.packet_count} 包`, status.packet_count > 0 ? 'success' : 'secondary');
+
+            const lastTime = status.last_packet_time;
+            if (lastTime > 0) {
+                const ago = Math.round((Date.now() / 1000) - lastTime);
+                this._updateCard('card-last-packet', `${ago}秒前`, ago < 5 ? 'success' : 'warning');
+            } else {
+                this._updateCard('card-last-packet', '暂无数据', 'secondary');
+            }
+
+            const td = status.latest_data;
+            if (td) {
+                this._updateCard('card-speed', `${(td.speed_kmh || 0).toFixed(1)} km/h`, 'primary');
+                this._updateCard('card-rpm', `${(td.rpm || 0).toFixed(0)} RPM`, 'primary');
+                this._updateCard('card-gear', `档位 ${td.gear || 'N'}`, 'primary');
+            }
+        } catch (e) {
+            console.error('Failed to refresh status:', e);
+        }
+    },
+
+    _updateCard(id, value, type) {
+        const el = document.getElementById(id);
+        if (!el) return;
+        const valEl = el.querySelector('.status-card-value');
+        if (valEl) valEl.textContent = value;
+        const badgeEl = el.querySelector('.badge');
+        if (badgeEl) {
+            badgeEl.className = `badge badge-${type}`;
+        }
+    },
+
+    _startRefresh() {
+        if (this._refreshTimer) clearInterval(this._refreshTimer);
+        this._refreshTimer = setInterval(() => this._refreshCards(), 2000);
+    },
+
+    cleanup() {
+        if (this._refreshTimer) {
+            clearInterval(this._refreshTimer);
+            this._refreshTimer = null;
+        }
+    },
+
+    _template() {
+        return `
+        <div class="animated">
+            <h2 style="font-size:24px;font-weight:700;margin-bottom:8px;">系统概览</h2>
+            <p style="color:var(--text-secondary);margin-bottom:24px;">实时监控 TurboSu 运行状态与游戏遥测连接</p>
+        </div>
+        <div class="status-grid animated" style="animation-delay:0.1s">
+            ${this._cardHtml('card-server', '服务器状态', '运行中', 'success')}
+            ${this._cardHtml('card-telemetry', '遥测监听', '未启动', 'warning')}
+            ${this._cardHtml('card-connections', 'WebSocket 连接', '0 个客户端', 'secondary')}
+            ${this._cardHtml('card-packets', '数据包接收', '0 包', 'secondary')}
+            ${this._cardHtml('card-last-packet', '最后数据包', '暂无数据', 'secondary')}
+            ${this._cardHtml('card-game', '当前游戏', '未选择', 'info')}
+        </div>
+        <div class="status-grid animated" style="animation-delay:0.2s">
+            ${this._cardHtml('card-speed', '实时速度', '-- km/h', 'primary')}
+            ${this._cardHtml('card-rpm', '实时转速', '-- RPM', 'primary')}
+            ${this._cardHtml('card-gear', '当前档位', 'N', 'primary')}
+        </div>`;
+    },
+
+    _cardHtml(id, title, value, type) {
+        return `
+        <div class="glass-card status-card" id="${id}">
+            <div class="status-card-header">
+                <span class="status-card-title">${title}</span>
+                <span class="badge badge-${type}">●</span>
+            </div>
+            <div class="status-card-value">${value}</div>
+        </div>`;
+    }
+};
+
+window.PageHome = PageHome;