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,132 @@
+const PageDashboard = {
+    _el: null,
+    _currentCategory: 'all',
+
+    init() {
+        this._el = document.getElementById('page-dashboard');
+    },
+
+    async render() {
+        this._el.innerHTML = this._template();
+        await this._loadCategories();
+        await this._loadThemes();
+        this._bindEvents();
+    },
+
+    async _loadCategories() {
+        try {
+            const cats = await API.getCategories();
+            const listEl = document.getElementById('dash-category-list');
+            if (!listEl) return;
+
+            const allItem = document.createElement('div');
+            allItem.className = 'category-item active';
+            allItem.textContent = '全部';
+            allItem.dataset.cat = 'all';
+            listEl.appendChild(allItem);
+
+            cats.forEach(cat => {
+                const item = document.createElement('div');
+                item.className = 'category-item';
+                item.textContent = cat;
+                item.dataset.cat = cat;
+                listEl.appendChild(item);
+            });
+        } catch (e) {
+            console.error('Failed to load categories:', e);
+        }
+    },
+
+    async _loadThemes() {
+        const gridEl = document.getElementById('dash-theme-grid');
+        if (!gridEl) return;
+
+        gridEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--text-tertiary);">加载中...</div>';
+
+        try {
+            const themes = await API.getDashboards(this._currentCategory);
+            if (!themes || themes.length === 0) {
+                gridEl.innerHTML = `
+                <div class="empty-state" style="grid-column:1/-1;">
+                    <svg viewBox="0 0 24 24" width="64" height="64"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" fill="currentColor"/></svg>
+                    <h4>暂无仪表盘主题</h4>
+                    <p>创建或导入你的第一个仪表盘主题</p>
+                </div>`;
+                return;
+            }
+
+            gridEl.innerHTML = themes.map(t => this._themeCardHtml(t)).join('');
+        } catch (e) {
+            console.error('Failed to load themes:', e);
+            gridEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--danger);">加载失败</div>';
+        }
+    },
+
+    _bindEvents() {
+        const categoryList = document.getElementById('dash-category-list');
+        if (categoryList) {
+            categoryList.addEventListener('click', (e) => {
+                const item = e.target.closest('.category-item');
+                if (!item) return;
+                categoryList.querySelectorAll('.category-item').forEach(el => el.classList.remove('active'));
+                item.classList.add('active');
+                this._currentCategory = item.dataset.cat;
+                this._loadThemes();
+            });
+        }
+
+        const gridEl = document.getElementById('dash-theme-grid');
+        if (gridEl) {
+            gridEl.addEventListener('click', (e) => {
+                const card = e.target.closest('.theme-card');
+                if (!card) return;
+                const themeId = card.dataset.themeId;
+                this._openDashboard(themeId);
+            });
+        }
+    },
+
+    _openDashboard(themeId) {
+        const url = `${location.origin}/dashboard/${themeId}`;
+        window.open(url, '_blank');
+        navigator.clipboard.writeText(url).then(() => {
+            Toast.show('链接已复制，可在局域网设备访问', 'success');
+        }).catch(() => {
+            Toast.show(`打开地址: ${url}`, 'info');
+        });
+    },
+
+    _themeCardHtml(theme) {
+        const icon = theme.config?.icon || '📊';
+        const aspect = theme.config?.aspect_ratio || 'auto';
+        return `
+        <div class="glass-card theme-card" data-theme-id="${theme.id}">
+            <div class="theme-card-preview">${icon}</div>
+            <div class="theme-card-info">
+                <div class="theme-card-name">${theme.name || 'Unnamed'}</div>
+                <div class="theme-card-meta">
+                    <span>${theme.category || 'basic'}</span>
+                    <span>${aspect}</span>
+                </div>
+                <div class="theme-card-meta" style="margin-top:4px;">
+                    <span>${theme.author || ''}</span>
+                    <span class="badge ${theme.is_builtin ? 'badge-info' : 'badge-success'}">${theme.is_builtin ? '内置' : '自定义'}</span>
+                </div>
+            </div>
+        </div>`;
+    },
+
+    _template() {
+        return `
+        <div class="dashboard-layout">
+            <div class="dashboard-sub-sidebar">
+                <div id="dash-category-list"></div>
+            </div>
+            <div class="dashboard-main">
+                <div id="dash-theme-grid" class="theme-grid"></div>
+            </div>
+        </div>`;
+    }
+};
+
+window.PageDashboard = PageDashboard;
@@ -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;
@@ -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;
@@ -0,0 +1,187 @@
+const PageScene = {
+    _el: null,
+    _currentGameId: null,
+    _currentGameName: '',
+    _editorSceneId: null,
+    _editorData: null,
+
+    init() {
+        this._el = document.getElementById('page-scene');
+    },
+
+    async render() {
+        const cfg = await API.getConfig();
+        this._currentGameId = cfg.selected_game_id;
+
+        if (this._currentGameId) {
+            const games = await API.getGames();
+            const game = games.find(g => g.id === this._currentGameId);
+            this._currentGameName = game ? game.name : this._currentGameId;
+        }
+
+        this._el.innerHTML = this._template();
+        await this._loadScenes();
+        this._bindEvents();
+    },
+
+    async _loadScenes() {
+        const grid = document.getElementById('scene-grid');
+        if (!grid) return;
+
+        try {
+            const scenes = await API.getScenes(this._currentGameId);
+            if (!scenes || scenes.length === 0) {
+                grid.innerHTML = `
+                <div class="empty-state" style="grid-column:1/-1;">
+                    <svg viewBox="0 0 24 24" width="64" height="64"><path d="M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm10 0h8v8h-8z" fill="currentColor"/></svg>
+                    <h4>暂无场景</h4>
+                    <p>点击"新建场景"创建你的第一个场景布局</p>
+                </div>`;
+                return;
+            }
+
+            grid.innerHTML = scenes.map(s => this._sceneCardHtml(s)).join('');
+        } catch (e) {
+            console.error('Failed to load scenes:', e);
+        }
+    },
+
+    _bindEvents() {
+        document.getElementById('btn-new-scene')?.addEventListener('click', () => this._showEditor());
+
+        const grid = document.getElementById('scene-grid');
+        if (grid) {
+            grid.addEventListener('click', (e) => {
+                const card = e.target.closest('[data-scene-id]');
+                if (!card) return;
+                const action = card.dataset.action;
+                const sceneId = card.dataset.sceneId;
+
+                if (action === 'render') {
+                    this._renderScene(sceneId);
+                } else if (action === 'edit') {
+                    e.stopPropagation();
+                    this._showEditor(sceneId);
+                } else if (action === 'delete') {
+                    e.stopPropagation();
+                    this._deleteScene(sceneId);
+                }
+            });
+        }
+    },
+
+    async _showEditor(sceneId) {
+        let scene = null;
+        if (sceneId) {
+            scene = await API.getScene(sceneId);
+            if (!scene) return;
+        }
+
+        this._editorSceneId = sceneId;
+        const modal = document.createElement('div');
+        modal.className = 'modal-overlay';
+        modal.innerHTML = this._editorTemplate(scene);
+        document.body.appendChild(modal);
+
+        modal.querySelector('.modal-overlay, .modal-actions .btn-secondary')
+            ?.addEventListener('click', (e) => {
+                if (e.target === modal || e.target.matches('.btn-secondary')) {
+                    modal.remove();
+                }
+            });
+
+        modal.querySelector('.btn-primary')?.addEventListener('click', async () => {
+            const name = modal.querySelector('#edit-scene-name').value || 'New Scene';
+            const desc = modal.querySelector('#edit-scene-desc').value || '';
+            const gameId = this._currentGameId || '';
+
+            const data = { name, description: desc, game_id: gameId };
+            if (this._editorSceneId) {
+                await API.updateScene(this._editorSceneId, data);
+            } else {
+                await API.createScene(data);
+            }
+            modal.remove();
+            Toast.show('场景保存成功', 'success');
+            this.render();
+        });
+    },
+
+    async _renderScene(sceneId) {
+        const url = `${location.origin}/scene/${sceneId}`;
+        window.open(url, '_blank');
+        navigator.clipboard.writeText(url).then(() => {
+            Toast.show('场景链接已复制，可在局域网设备访问', 'success');
+        }).catch(() => {});
+    },
+
+    async _deleteScene(sceneId) {
+        if (!confirm('确定删除此场景？')) return;
+        await API.deleteScene(sceneId);
+        Toast.show('场景已删除', 'info');
+        this._loadScenes();
+    },
+
+    _sceneCardHtml(scene) {
+        const canvasCount = (scene.canvases || []).length;
+        return `
+        <div class="glass-card scene-card" data-scene-id="${scene.id}" data-action="render">
+            <div class="scene-card-name">${scene.name}</div>
+            <div class="scene-card-game" style="margin-bottom:6px;">${this._currentGameName || '未关联游戏'}</div>
+            <div class="scene-card-meta">
+                <span>${canvasCount} 个画布</span>
+                <span>${scene.updated_at ? new Date(scene.updated_at).toLocaleDateString() : ''}</span>
+            </div>
+            <div class="scene-canvas-list">
+                ${(scene.canvases || []).map(c => `<span class="scene-canvas-badge">${c.label || c.width + 'x' + c.height}</span>`).join('')}
+            </div>
+            <div style="margin-top:12px;display:flex;gap:6px;">
+                <button class="btn btn-sm btn-primary" data-scene-id="${scene.id}" data-action="render">渲染</button>
+                <button class="btn btn-sm btn-secondary" data-scene-id="${scene.id}" data-action="edit">编辑</button>
+                <button class="btn btn-sm btn-danger" data-scene-id="${scene.id}" data-action="delete">删除</button>
+            </div>
+        </div>`;
+    },
+
+    _editorTemplate(scene) {
+        const name = scene ? scene.name : '';
+        const desc = scene ? scene.description : '';
+        return `
+        <div class="modal">
+            <h3>${scene ? '编辑场景' : '新建场景'}</h3>
+            <div class="form-group">
+                <label>场景名称</label>
+                <input id="edit-scene-name" type="text" value="${name}" placeholder="输入场景名称">
+            </div>
+            <div class="form-group">
+                <label>描述</label>
+                <textarea id="edit-scene-desc" placeholder="场景描述（可选）">${desc}</textarea>
+            </div>
+            <p style="font-size:12px;color:var(--text-tertiary);margin-top:8px;">
+                提示：保存后可在场景编辑器中添加仪表盘、调整布局和画布比例。
+            </p>
+            <div class="modal-actions">
+                <button class="btn btn-secondary">取消</button>
+                <button class="btn btn-primary">保存</button>
+            </div>
+        </div>`;
+    },
+
+    _template() {
+        return `
+        <div class="scene-header animated">
+            <div>
+                <h2>场景管理</h2>
+                <p style="color:var(--text-secondary);font-size:14px;margin-top:4px;">
+                    ${this._currentGameId ? `当前游戏: ${this._currentGameName}` : '请先在侧边栏选择一个游戏'}
+                </p>
+            </div>
+            <button id="btn-new-scene" class="btn btn-primary" ${!this._currentGameId ? 'disabled' : ''}>
+                + 新建场景
+            </button>
+        </div>
+        <div id="scene-grid" class="scene-grid animated"></div>`;
+    }
+};
+
+window.PageScene = PageScene;
@@ -0,0 +1,185 @@
+const PageSettings = {
+    _el: null,
+
+    init() {
+        this._el = document.getElementById('page-settings');
+    },
+
+    async render() {
+        const cfg = await API.getConfig();
+        const games = await API.getGames();
+        this._el.innerHTML = this._template(cfg, games);
+        this._bindEvents();
+    },
+
+    _bindEvents() {
+        document.getElementById('settings-telemetry-port')?.addEventListener('change', async (e) => {
+            await API.updateConfig({ telemetry_port: parseInt(e.target.value) || 20777 });
+            Toast.show('遥测端口已更新，重启监听后生效', 'info');
+        });
+
+        document.getElementById('settings-server-port')?.addEventListener('change', async (e) => {
+            Toast.show('服务器端口修改后需要重启程序', 'warning');
+        });
+
+        document.getElementById('settings-restart-telemetry')?.addEventListener('click', async () => {
+            await API.stopTelemetry();
+            await API.startTelemetry();
+            Toast.show('遥测监听已重启', 'success');
+        });
+
+        document.getElementById('btn-import-plugin')?.addEventListener('click', () => this._importPlugin());
+        document.getElementById('btn-reload-plugins')?.addEventListener('click', async () => {
+            await API.reloadGamePlugins();
+            Toast.show('插件已重新加载', 'success');
+            this.render();
+        });
+
+        document.getElementById('settings-game-list')?.addEventListener('click', async (e) => {
+            const exportBtn = e.target.closest('.btn-export-plugin');
+            const removeBtn = e.target.closest('.btn-remove-plugin');
+            if (exportBtn) {
+                const pluginId = exportBtn.dataset.pluginId;
+                const data = await API.exportGamePlugin(pluginId);
+                if (data) {
+                    this._downloadJson(`plugin_${pluginId}.json`, data);
+                    Toast.show('插件已导出', 'success');
+                }
+            }
+            if (removeBtn) {
+                const pluginId = removeBtn.dataset.pluginId;
+                if (confirm('确定移除这个游戏插件？')) {
+                    await API.removeGamePlugin(pluginId);
+                    Toast.show('插件已移除', 'info');
+                    this.render();
+                }
+            }
+        });
+    },
+
+    async _importPlugin() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+        input.onchange = async (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+            try {
+                const text = await file.text();
+                const data = JSON.parse(text);
+                if (data.type === 'game_plugin') {
+                    await API.installGamePlugin(data);
+                    Toast.show('插件安装成功', 'success');
+                    this.render();
+                } else {
+                    Toast.show('无效的插件文件格式', 'error');
+                }
+            } catch (err) {
+                Toast.show('文件解析失败: ' + err.message, 'error');
+            }
+        };
+        input.click();
+    },
+
+    _downloadJson(filename, data) {
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+    },
+
+    _gamePluginListHtml(games) {
+        if (!games || games.length === 0) {
+            return '<p style="color:var(--text-tertiary);font-size:13px;">暂无游戏插件</p>';
+        }
+        return games.map(g => `
+            <div class="glass-card" style="padding:16px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;">
+                <div>
+                    <div style="font-weight:600;">${g.name}</div>
+                    <div style="font-size:12px;color:var(--text-tertiary);">
+                        ${g.description || ''} | v${g.version} | ${g.author || ''}
+                        <span class="badge ${g.is_builtin ? 'badge-info' : 'badge-success'}" style="margin-left:6px;">
+                            ${g.is_builtin ? '内置' : '社区'}
+                        </span>
+                    </div>
+                </div>
+                <div style="display:flex;gap:6px;">
+                    <button class="btn btn-sm btn-secondary btn-export-plugin" data-plugin-id="${g.id}">导出</button>
+                    ${!g.is_builtin ? `<button class="btn btn-sm btn-danger btn-remove-plugin" data-plugin-id="${g.id}">移除</button>` : ''}
+                </div>
+            </div>
+        `).join('');
+    },
+
+    _template(cfg, games) {
+        return `
+        <div class="animated">
+            <h2 style="font-size:24px;font-weight:700;margin-bottom:24px;">设置</h2>
+
+            <div class="settings-section">
+                <h3>连接设置</h3>
+                <div class="settings-row">
+                    <div>
+                        <div class="settings-label">遥测监听端口</div>
+                        <div class="settings-desc">游戏内设置的数据输出端口</div>
+                    </div>
+                    <div class="settings-control">
+                        <input type="number" id="settings-telemetry-port" value="${cfg.telemetry_port || 20777}" min="1024" max="65535">
+                    </div>
+                </div>
+                <div class="settings-row">
+                    <div>
+                        <div class="settings-label">Web 服务器端口</div>
+                        <div class="settings-desc">Web UI 服务的端口号</div>
+                    </div>
+                    <div class="settings-control">
+                        <input type="number" id="settings-server-port" value="${cfg.server_port || 9527}" min="80" max="65535" disabled>
+                    </div>
+                </div>
+                <div class="settings-row">
+                    <div>
+                        <div class="settings-label">重启遥测监听</div>
+                        <div class="settings-desc">修改端口或切换游戏后需要重启监听</div>
+                    </div>
+                    <div class="settings-control">
+                        <button id="settings-restart-telemetry" class="btn btn-secondary btn-sm">重启监听</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="settings-section">
+                <h3>游戏插件管理</h3>
+                <div style="display:flex;gap:8px;margin-bottom:16px;">
+                    <button id="btn-import-plugin" class="btn btn-secondary btn-sm">📥 导入插件</button>
+                    <button id="btn-reload-plugins" class="btn btn-secondary btn-sm">🔄 重新加载</button>
+                </div>
+                <div id="settings-game-list">
+                    ${this._gamePluginListHtml(games)}
+                </div>
+                <div class="glass-card" style="padding:16px;margin-top:12px;font-size:12px;color:var(--text-tertiary);line-height:1.6;">
+                    <strong style="color:var(--text-secondary);">社区开发指南：</strong><br>
+                    1. 创建一个包含 <code>manifest.json</code> 和 <code>parser.py</code> 的文件夹<br>
+                    2. <code>manifest.json</code> 定义游戏元信息，<code>parser.py</code> 实现 <code>get_parser()</code> 函数<br>
+                    3. <code>get_parser()</code> 返回对象需实现 <code>game_id()</code> 和 <code>parse(data, addr)</code> 方法<br>
+                    4. 通过"导入插件"或放入 <code>games/user/</code> 目录安装<br>
+                    5. 导出你的插件分享给社区！
+                </div>
+            </div>
+
+            <div class="settings-section">
+                <h3>关于</h3>
+                <div class="settings-row">
+                    <div>
+                        <div class="settings-label">TurboSu</div>
+                        <div class="settings-desc">赛车遥测仪表盘 v1.0.0</div>
+                    </div>
+                </div>
+            </div>
+        </div>`;
+    }
+};
+
+window.PageSettings = PageSettings;