feat: TurboSu initial release - racing telemetry dashboard
This commit is contained in:
Yei.J. (AskaEth)
@@ -0,0 +1,863 @@
|
||||
/* TurboSu Main Layout - HyperOS Design System
|
||||
* Layout: TopAppBar + NavigationRail (sidebar) + Content
|
||||
*/
|
||||
|
||||
.app-layout {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===== NavigationRail: Sidebar (HyperOS NavigationRail style) ===== */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
height: 100vh;
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--divider);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 100;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidebar.collapsed {
|
||||
width: var(--sidebar-collapsed-width);
|
||||
}
|
||||
.sidebar.collapsed .nav-label,
|
||||
.sidebar.collapsed .sidebar-title,
|
||||
.sidebar.collapsed .collapse-arrow {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity var(--transition-fast), visibility var(--transition-fast);
|
||||
}
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 12px;
|
||||
gap: 10px;
|
||||
min-height: 60px;
|
||||
}
|
||||
.sidebar-logo {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
color: var(--text-primary);
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
.sidebar-toggle-btn {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px; height: 32px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
.sidebar-toggle-btn:hover {
|
||||
background: rgba(128, 128, 128, 0.12);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
/* Navigation items (HyperOS NavigationRail item style) */
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 11px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
.nav-item:hover {
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-item:active {
|
||||
background: rgba(128, 128, 128, 0.14);
|
||||
}
|
||||
.nav-item.active {
|
||||
background: var(--accent-container);
|
||||
color: var(--accent-on-container);
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-item svg {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.nav-label {
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.collapsible-toggle .collapse-arrow {
|
||||
margin-left: auto;
|
||||
transition: transform var(--transition-normal), opacity var(--transition-fast);
|
||||
}
|
||||
.collapsible-toggle.collapsed .collapse-arrow {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.nav-submenu {
|
||||
overflow: hidden;
|
||||
max-height: 600px;
|
||||
transition: max-height var(--transition-slow);
|
||||
padding-left: 6px;
|
||||
}
|
||||
.nav-submenu.collapsed {
|
||||
max-height: 0;
|
||||
}
|
||||
.nav-submenu .nav-item {
|
||||
padding: 9px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
margin-top: auto;
|
||||
border-top: 1px solid var(--divider);
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
/* ===== TopAppBar (HyperOS style) ===== */
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--topbar-height);
|
||||
padding: 0 20px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--divider);
|
||||
flex-shrink: 0;
|
||||
transition: background var(--transition-normal);
|
||||
}
|
||||
.topbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.topbar-logo-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
opacity: 1;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
.topbar-logo-title.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.topbar-title-text {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Connection status indicator */
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--blur-small);
|
||||
-webkit-backdrop-filter: var(--blur-small);
|
||||
border: 1px solid var(--border-subtle);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.status-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-indicator.connected .status-dot {
|
||||
background: var(--success);
|
||||
box-shadow: 0 0 6px rgba(52, 199, 89, 0.4);
|
||||
}
|
||||
.status-indicator.disconnected .status-dot {
|
||||
background: var(--danger);
|
||||
box-shadow: 0 0 6px rgba(233, 70, 52, 0.4);
|
||||
}
|
||||
|
||||
.theme-light .icon-sun { display: none; }
|
||||
.theme-dark .icon-moon { display: none; }
|
||||
|
||||
/* ===== Main Content Area ===== */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
.page-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.page {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
overflow-y: auto;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
.page.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ===== Page Header ===== */
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-header h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.page-header p {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ===== Home Page: Status Cards ===== */
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.status-card {
|
||||
padding: 18px 20px;
|
||||
}
|
||||
.status-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.status-card-title {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.status-card-value {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.status-card-detail {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ===== Dashboard Page (Browser) ===== */
|
||||
.dashboard-layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
gap: 0;
|
||||
}
|
||||
.dashboard-sub-sidebar {
|
||||
width: 170px;
|
||||
flex-shrink: 0;
|
||||
padding: 12px 8px;
|
||||
border-right: 1px solid var(--divider);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.dashboard-sub-sidebar .category-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 9px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
font-size: 13px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.dashboard-sub-sidebar .category-item:hover {
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.dashboard-sub-sidebar .category-item.active {
|
||||
background: var(--accent-container);
|
||||
color: var(--accent-on-container);
|
||||
font-weight: 500;
|
||||
}
|
||||
.dashboard-main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
.theme-card {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
.theme-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.theme-card .theme-card-preview {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
background: var(--bg-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 44px;
|
||||
color: var(--text-tertiary);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.theme-card .theme-card-info {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.theme-card .theme-card-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.theme-card .theme-card-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ===== Scene Page ===== */
|
||||
.scene-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.scene-header h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.scene-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.scene-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
.scene-card {
|
||||
padding: 18px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
.scene-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.scene-card .scene-card-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.scene-card .scene-card-game {
|
||||
font-size: 12px;
|
||||
color: var(--accent-on-container);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.scene-card .scene-card-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.scene-canvas-list {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.scene-canvas-badge {
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ===== Modal/Dialog (HyperOS OverlayDialog style) ===== */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: var(--window-dimming);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.2s ease both;
|
||||
}
|
||||
.modal {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-normal);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 28px;
|
||||
min-width: 620px;
|
||||
max-width: 90vw;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
|
||||
animation: fadeInUp 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
|
||||
}
|
||||
.modal h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--divider);
|
||||
}
|
||||
|
||||
/* ===== Scene Editor Canvas ===== */
|
||||
.scene-editor-canvas {
|
||||
position: relative;
|
||||
margin: 16px 0;
|
||||
border: 2px dashed var(--outline);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
.scene-editor-placement {
|
||||
position: absolute;
|
||||
border: 2px solid var(--accent);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: move;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
background: var(--accent-container);
|
||||
min-width: 80px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
/* ===== Debug Page ===== */
|
||||
.debug-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 14px;
|
||||
}
|
||||
.debug-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.debug-data {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 14px 16px;
|
||||
font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.debug-field {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--blur-small);
|
||||
-webkit-backdrop-filter: var(--blur-small);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.debug-field .debug-field-name {
|
||||
font-size: 11px;
|
||||
color: var(--accent-on-container);
|
||||
margin-bottom: 3px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.debug-field .debug-field-value {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
}
|
||||
|
||||
/* ===== Settings Page ===== */
|
||||
.settings-section {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.settings-section h3 {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--divider);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.settings-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
gap: 16px;
|
||||
}
|
||||
.settings-label {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.settings-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.settings-control {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.settings-control input[type="number"] {
|
||||
width: 100px;
|
||||
}
|
||||
.settings-control select {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
/* ===== Empty State ===== */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.empty-state svg {
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.25;
|
||||
}
|
||||
.empty-state h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.empty-state p {
|
||||
font-size: 13px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* ===== Toast / Snackbar (HyperOS Snackbar style) ===== */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast {
|
||||
padding: 12px 20px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-menu);
|
||||
backdrop-filter: var(--blur-large);
|
||||
-webkit-backdrop-filter: var(--blur-large);
|
||||
border: 1px solid var(--border-normal);
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
|
||||
box-shadow: var(--shadow-lg);
|
||||
pointer-events: auto;
|
||||
}
|
||||
.toast.success { border-left: 3px solid var(--success); }
|
||||
.toast.error { border-left: 3px solid var(--danger); }
|
||||
.toast.info { border-left: 3px solid var(--accent); }
|
||||
|
||||
/* ===== Form ===== */
|
||||
.form-group {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
}
|
||||
.form-group textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ===== Code inline ===== */
|
||||
code {
|
||||
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
font-size: 12px;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-xs);
|
||||
color: var(--accent-on-container);
|
||||
}
|
||||
|
||||
/* ===== Mobile Bottom Navigation Bar (HyperOS NavigationBar) ===== */
|
||||
@media (max-width: 767px) {
|
||||
.app-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.topbar-logo-title.hidden {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.topbar-logo-title svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.topbar-title-text {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.status-card {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.status-card-value {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.theme-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.scene-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dashboard-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
.dashboard-sub-sidebar {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--divider);
|
||||
padding: 6px;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.dashboard-sub-sidebar .category-item {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal {
|
||||
min-width: auto;
|
||||
max-width: 95vw;
|
||||
margin: 12px;
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
/* Mobile bottom nav */
|
||||
.mobile-nav {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--divider);
|
||||
z-index: 150;
|
||||
backdrop-filter: var(--blur-large);
|
||||
-webkit-backdrop-filter: var(--blur-large);
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
}
|
||||
.mobile-nav .nav-item {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 4px;
|
||||
font-size: 10px;
|
||||
border-radius: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.mobile-nav .nav-item svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.mobile-nav .nav-label {
|
||||
font-size: 10px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.debug-container > div:last-child {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.settings-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.settings-control {
|
||||
width: 100%;
|
||||
}
|
||||
.settings-control input[type="number"],
|
||||
.settings-control select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Tablet Layout ===== */
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.sidebar {
|
||||
width: var(--sidebar-collapsed-width);
|
||||
}
|
||||
.sidebar.expanded {
|
||||
position: fixed;
|
||||
width: var(--sidebar-width);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 150;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.theme-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Desktop ===== */
|
||||
@media (min-width: 1024px) {
|
||||
.mobile-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
}
|
||||
.theme-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== High-DPI / Retina ===== */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.glass, .glass-light, .glass-card {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Reduced Motion ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,332 @@
|
||||
/* Miuix CSS - HyperOS Design System for Web
|
||||
* Color tokens match Xiaomi HyperOS design spec
|
||||
* Reference: https://compose-miuix-ui.github.io/miuix/zh_CN/guide/colors
|
||||
*/
|
||||
|
||||
:root {
|
||||
--accent: #3482FF;
|
||||
--accent-hover: #277AF7;
|
||||
--danger: #E94634;
|
||||
--success: #34C759;
|
||||
--warning: #FF9F0A;
|
||||
|
||||
--radius-xs: 4px;
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 20px;
|
||||
--radius-xxl: 24px;
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
|
||||
--shadow-md: 0 2px 8px rgba(0,0,0,0.10);
|
||||
--shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
|
||||
|
||||
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
--sidebar-width: 260px;
|
||||
--sidebar-collapsed-width: 60px;
|
||||
--topbar-height: 56px;
|
||||
|
||||
--blur-small: blur(6px) saturate(140%);
|
||||
--blur-medium: blur(12px) saturate(160%);
|
||||
--blur-large: blur(20px) saturate(180%);
|
||||
}
|
||||
|
||||
/* ===== Light Theme (HyperOS Light) ===== */
|
||||
.theme-light {
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-secondary: #F7F7F7;
|
||||
--bg-tertiary: #F0F0F0;
|
||||
--bg-glass: rgba(255, 255, 255, 0.82);
|
||||
--bg-glass-hover: rgba(255, 255, 255, 0.90);
|
||||
--bg-glass-active: rgba(240, 240, 240, 0.88);
|
||||
--bg-card: rgba(255, 255, 255, 0.78);
|
||||
--bg-card-hover: rgba(255, 255, 255, 0.90);
|
||||
--bg-input: rgba(248, 248, 248, 0.9);
|
||||
--bg-input-focus: rgba(240, 245, 255, 0.95);
|
||||
--bg-menu: rgba(255, 255, 255, 0.95);
|
||||
--bg-tooltip: rgba(30, 30, 30, 0.92);
|
||||
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #8C93B0;
|
||||
--text-tertiary: #959595;
|
||||
--text-inverse: #FFFFFF;
|
||||
--text-link: #3482FF;
|
||||
--text-disabled: #B2B2B2;
|
||||
|
||||
--border-subtle: rgba(0, 0, 0, 0.04);
|
||||
--border-normal: rgba(0, 0, 0, 0.08);
|
||||
--border-strong: rgba(0, 0, 0, 0.12);
|
||||
--outline: #D9D9D9;
|
||||
--divider: #E0E0E0;
|
||||
|
||||
--accent-container: #EAF2FF;
|
||||
--accent-on-container: #3482FF;
|
||||
--error-container: #FDF6F4;
|
||||
--error-on-container: #410002;
|
||||
|
||||
--scrollbar-bg: rgba(0, 0, 0, 0.04);
|
||||
--scrollbar-thumb: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* ===== Dark Theme (HyperOS Dark) ===== */
|
||||
.theme-dark {
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: #242424;
|
||||
--bg-tertiary: #2D2D2D;
|
||||
--bg-glass: rgba(36, 36, 36, 0.72);
|
||||
--bg-glass-hover: rgba(45, 45, 45, 0.78);
|
||||
--bg-glass-active: rgba(50, 50, 50, 0.82);
|
||||
--bg-card: rgba(36, 36, 36, 0.65);
|
||||
--bg-card-hover: rgba(45, 45, 45, 0.75);
|
||||
--bg-input: rgba(30, 30, 30, 0.8);
|
||||
--bg-input-focus: rgba(40, 40, 55, 0.9);
|
||||
--bg-menu: rgba(36, 36, 36, 0.95);
|
||||
--bg-tooltip: rgba(20, 20, 20, 0.92);
|
||||
|
||||
--text-primary: rgba(255, 255, 255, 0.90);
|
||||
--text-secondary: rgba(255, 255, 255, 0.62);
|
||||
--text-tertiary: rgba(255, 255, 255, 0.42);
|
||||
--text-inverse: #000000;
|
||||
--text-link: #277AF7;
|
||||
--text-disabled: #666666;
|
||||
|
||||
--border-subtle: rgba(255, 255, 255, 0.04);
|
||||
--border-normal: rgba(255, 255, 255, 0.08);
|
||||
--border-strong: rgba(255, 255, 255, 0.12);
|
||||
--outline: #404040;
|
||||
--divider: #393939;
|
||||
|
||||
--accent-container: rgba(39, 122, 247, 0.12);
|
||||
--accent-on-container: #277AF7;
|
||||
--error-container: #2E0603;
|
||||
--error-on-container: #FFDAD6;
|
||||
|
||||
--scrollbar-bg: rgba(255, 255, 255, 0.03);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.10);
|
||||
|
||||
--window-dimming: rgba(0, 0, 0, 0.60);
|
||||
}
|
||||
|
||||
/* ===== Global Reset ===== */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html, body {
|
||||
width: 100%; height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'MiSans', 'Microsoft YaHei', system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-primary);
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transition: background var(--transition-normal), color var(--transition-normal);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
|
||||
a { color: var(--text-link); text-decoration: none; }
|
||||
button { cursor: pointer; border: none; outline: none; font-family: inherit; }
|
||||
|
||||
/* ===== Inputs ===== */
|
||||
input, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--outline);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
input:focus, select:focus, textarea:focus {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-input-focus);
|
||||
box-shadow: 0 0 0 2px rgba(52, 130, 255, 0.15);
|
||||
}
|
||||
input::placeholder, textarea::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* ===== Surface Components (HyperOS style) ===== */
|
||||
.surface {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: background var(--transition-normal);
|
||||
}
|
||||
.surface-high {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-normal);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.surface-highest {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* ===== Glass Surface (blur effect) ===== */
|
||||
.glass {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--blur-large);
|
||||
-webkit-backdrop-filter: var(--blur-large);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.glass-light {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: var(--blur-medium);
|
||||
-webkit-backdrop-filter: var(--blur-medium);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.glass-card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: var(--blur-medium);
|
||||
-webkit-backdrop-filter: var(--blur-medium);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: background var(--transition-normal), box-shadow var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
.glass-card:hover {
|
||||
background: var(--bg-card-hover);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.glass-card:active {
|
||||
transform: scale(0.985);
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
/* ===== Buttons (HyperOS style) ===== */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: transparent;
|
||||
transition: background var(--transition-fast);
|
||||
border-radius: inherit;
|
||||
}
|
||||
.btn:hover::after {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 2px 6px rgba(52, 130, 255, 0.25);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
box-shadow: 0 4px 12px rgba(52, 130, 255, 0.35);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-glass);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-normal);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-glass-hover);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.btn-sm { padding: 6px 14px; font-size: 12px; border-radius: var(--radius-sm); }
|
||||
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: var(--radius-md); }
|
||||
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px; height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: var(--bg-glass-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.icon-btn:active {
|
||||
background: var(--bg-glass-active);
|
||||
}
|
||||
|
||||
/* ===== Badge ===== */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.badge-success { background: rgba(52, 199, 89, 0.15); color: var(--success); }
|
||||
.badge-warning { background: rgba(255, 159, 10, 0.15); color: var(--warning); }
|
||||
.badge-danger { background: rgba(233, 70, 52, 0.15); color: var(--danger); }
|
||||
.badge-info { background: var(--accent-container); color: var(--accent-on-container); }
|
||||
.badge-secondary { background: var(--bg-tertiary); color: var(--text-secondary); }
|
||||
|
||||
/* ===== Divider ===== */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--divider);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===== Animations ===== */
|
||||
.animated {
|
||||
animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes pulse-ring {
|
||||
0% { transform: scale(0.8); opacity: 1; }
|
||||
100% { transform: scale(1.4); opacity: 0; }
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
const API = {
|
||||
_base: '/api',
|
||||
|
||||
async get(path) {
|
||||
const res = await fetch(`${this._base}${path}`);
|
||||
return res.json();
|
||||
},
|
||||
|
||||
async post(path, data) {
|
||||
const res = await fetch(`${this._base}${path}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return res.json();
|
||||
},
|
||||
|
||||
async put(path, data) {
|
||||
const res = await fetch(`${this._base}${path}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return res.json();
|
||||
},
|
||||
|
||||
async del(path) {
|
||||
const res = await fetch(`${this._base}${path}`, { method: 'DELETE' });
|
||||
return res.json();
|
||||
},
|
||||
|
||||
async getStatus() { return this.get('/status'); },
|
||||
async getConfig() { return this.get('/config'); },
|
||||
async updateConfig(data) { return this.put('/config', data); },
|
||||
|
||||
async getGames() { return this.get('/games'); },
|
||||
|
||||
async getDashboards(category) { return this.get(`/dashboards?category=${category || 'all'}`); },
|
||||
async getCategories() { return this.get('/dashboards/categories'); },
|
||||
async getDashboard(id) { return this.get(`/dashboards/${id}`); },
|
||||
async getDashboardTemplate(id) { return this.get(`/dashboards/${id}/template`); },
|
||||
async createDashboard(data) { return this.post('/dashboards', data); },
|
||||
async updateDashboard(id, data) { return this.put(`/dashboards/${id}`, data); },
|
||||
async deleteDashboard(id) { return this.del(`/dashboards/${id}`); },
|
||||
async exportDashboard(id) { return this.get(`/dashboards/${id}/export`); },
|
||||
async importDashboard(data) { return this.post('/dashboards/import', data); },
|
||||
|
||||
async getScenes(gameId) { return this.get(`/scenes?game_id=${gameId || ''}`); },
|
||||
async getScene(id) { return this.get(`/scenes/${id}`); },
|
||||
async createScene(data) { return this.post('/scenes', data); },
|
||||
async updateScene(id, data) { return this.put(`/scenes/${id}`, data); },
|
||||
async deleteScene(id) { return this.del(`/scenes/${id}`); },
|
||||
async exportScene(id) { return this.get(`/scenes/${id}/export`); },
|
||||
async importScene(data) { return this.post('/scenes/import', data); },
|
||||
|
||||
async startTelemetry() { return this.post('/telemetry/start'); },
|
||||
async stopTelemetry() { return this.post('/telemetry/stop'); },
|
||||
async getLatestTelemetry() { return this.get('/telemetry/latest'); },
|
||||
|
||||
async installGamePlugin(data) { return this.post('/games/install', data); },
|
||||
async removeGamePlugin(id) { return this.del(`/games/${id}`); },
|
||||
async exportGamePlugin(id) { return this.get(`/games/${id}/export`); },
|
||||
async reloadGamePlugins() { return this.post('/games/reload'); },
|
||||
};
|
||||
|
||||
window.API = API;
|
||||
@@ -0,0 +1,26 @@
|
||||
(function () {
|
||||
Theme.init();
|
||||
WS.init();
|
||||
Sidebar.init();
|
||||
Topbar.init();
|
||||
PageHome.init();
|
||||
PageDashboard.init();
|
||||
PageScene.init();
|
||||
PageDebug.init();
|
||||
PageSettings.init();
|
||||
Router.init();
|
||||
|
||||
document.getElementById('theme-toggle').addEventListener('click', () => {
|
||||
Theme.toggle();
|
||||
});
|
||||
|
||||
const savedTheme = localStorage.getItem('turbosu-theme');
|
||||
if (savedTheme && savedTheme !== Theme.current) {
|
||||
Theme._current = savedTheme;
|
||||
Theme.apply();
|
||||
}
|
||||
|
||||
console.log('%cTurboSu %cReady',
|
||||
'color:#667eea;font-size:16px;font-weight:bold;',
|
||||
'color:#a8a8c0;');
|
||||
})();
|
||||
@@ -0,0 +1,119 @@
|
||||
const Sidebar = {
|
||||
_el: null,
|
||||
_gameListEl: null,
|
||||
_gameToggleEl: null,
|
||||
_gameLabelEl: null,
|
||||
|
||||
init() {
|
||||
this._el = document.getElementById('sidebar');
|
||||
this._gameListEl = document.getElementById('game-list');
|
||||
this._gameToggleEl = document.getElementById('game-selector-toggle');
|
||||
this._gameLabelEl = document.getElementById('game-selector-label');
|
||||
this._topbarLogo = document.getElementById('topbar-logo-title');
|
||||
|
||||
document.getElementById('sidebar-toggle').addEventListener('click', () => this.toggle());
|
||||
this._gameToggleEl.addEventListener('click', () => this._toggleGameList());
|
||||
|
||||
const saved = localStorage.getItem('turbosu-sidebar-collapsed');
|
||||
if (saved === 'true') this.collapse(true);
|
||||
|
||||
this._loadGames();
|
||||
},
|
||||
|
||||
toggle() {
|
||||
this._el.classList.toggle('collapsed');
|
||||
this._el.classList.toggle('expanded');
|
||||
const isCollapsed = this._el.classList.contains('collapsed');
|
||||
this._topbarLogo.classList.toggle('hidden', !isCollapsed);
|
||||
localStorage.setItem('turbosu-sidebar-collapsed', isCollapsed);
|
||||
},
|
||||
|
||||
collapse(silent) {
|
||||
this._el.classList.add('collapsed');
|
||||
this._el.classList.remove('expanded');
|
||||
this._topbarLogo.classList.remove('hidden');
|
||||
if (!silent) localStorage.setItem('turbosu-sidebar-collapsed', 'true');
|
||||
},
|
||||
|
||||
expand(silent) {
|
||||
this._el.classList.remove('collapsed');
|
||||
this._el.classList.add('expanded');
|
||||
this._topbarLogo.classList.add('hidden');
|
||||
if (!silent) localStorage.setItem('turbosu-sidebar-collapsed', 'false');
|
||||
},
|
||||
|
||||
async _loadGames() {
|
||||
const games = await API.getGames();
|
||||
this._gameListEl.innerHTML = '';
|
||||
|
||||
if (!Array.isArray(games) || games.length === 0) {
|
||||
this._gameListEl.innerHTML = '<div style="padding:8px 12px;color:var(--text-tertiary);font-size:12px;">暂无可用的游戏插件</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedId = (await API.getConfig()).selected_game_id;
|
||||
games.forEach(game => {
|
||||
const item = document.createElement('button');
|
||||
item.className = 'nav-item';
|
||||
if (selectedId === game.id) item.classList.add('active');
|
||||
item.innerHTML = `
|
||||
<span style="font-size:16px;flex-shrink:0;">◉</span>
|
||||
<span class="nav-label">${game.name}</span>
|
||||
`;
|
||||
item.addEventListener('click', () => this._selectGame(game.id));
|
||||
this._gameListEl.appendChild(item);
|
||||
});
|
||||
|
||||
this._updateGameLabel(selectedId, games);
|
||||
},
|
||||
|
||||
_updateGameLabel(selectedId, games) {
|
||||
if (selectedId && games) {
|
||||
const game = games.find(g => g.id === selectedId);
|
||||
if (game) {
|
||||
this._gameLabelEl.textContent = game.name;
|
||||
return;
|
||||
}
|
||||
}
|
||||
this._gameLabelEl.textContent = '选择游戏';
|
||||
},
|
||||
|
||||
async _selectGame(gameId) {
|
||||
await API.updateConfig({ selected_game_id: gameId });
|
||||
await API.startTelemetry();
|
||||
this._gameListEl.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
|
||||
const items = this._gameListEl.querySelectorAll('.nav-item');
|
||||
items.forEach(item => {
|
||||
if (item.textContent.trim()) item.classList.add('active');
|
||||
});
|
||||
const games = await API.getGames();
|
||||
this._updateGameLabel(gameId, games);
|
||||
this._loadGames();
|
||||
|
||||
if (typeof Router !== 'undefined' && Router.currentPage === 'scene') {
|
||||
Router.navigate('scene');
|
||||
}
|
||||
},
|
||||
|
||||
_toggleGameList() {
|
||||
const toggle = this._gameToggleEl;
|
||||
const list = this._gameListEl;
|
||||
const isCollapsed = toggle.classList.contains('collapsed');
|
||||
|
||||
if (isCollapsed) {
|
||||
toggle.classList.remove('collapsed');
|
||||
list.classList.remove('collapsed');
|
||||
} else {
|
||||
toggle.classList.add('collapsed');
|
||||
list.classList.add('collapsed');
|
||||
}
|
||||
},
|
||||
|
||||
setActive(route) {
|
||||
this._el.querySelectorAll('.nav-item[data-route]').forEach(el => {
|
||||
el.classList.toggle('active', el.getAttribute('data-route') === route);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window.Sidebar = Sidebar;
|
||||
@@ -0,0 +1,32 @@
|
||||
const Topbar = {
|
||||
_statusEl: null,
|
||||
|
||||
init() {
|
||||
this._statusEl = document.getElementById('connection-status');
|
||||
|
||||
document.getElementById('theme-toggle').addEventListener('click', () => {
|
||||
Theme.toggle();
|
||||
});
|
||||
|
||||
WS.on('status', (status) => {
|
||||
this._statusEl.className = `status-indicator ${status}`;
|
||||
this._statusEl.querySelector('.status-text').textContent =
|
||||
status === 'connected' ? '已连接' :
|
||||
status === 'error' ? '连接错误' : '未连接';
|
||||
});
|
||||
|
||||
setInterval(() => this._refreshStatus(), 5000);
|
||||
},
|
||||
|
||||
async _refreshStatus() {
|
||||
try {
|
||||
const status = await API.getStatus();
|
||||
const wsStatus = status.ws_clients > 0 ? 'connected' : 'disconnected';
|
||||
this._statusEl.className = `status-indicator ${wsStatus}`;
|
||||
this._statusEl.querySelector('.status-text').textContent =
|
||||
wsStatus === 'connected' ? `已连接 (${status.ws_clients})` : '未连接';
|
||||
} catch (e) {}
|
||||
}
|
||||
};
|
||||
|
||||
window.Topbar = Topbar;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,54 @@
|
||||
const Router = {
|
||||
_routes: {
|
||||
home: PageHome,
|
||||
dashboard: PageDashboard,
|
||||
scene: PageScene,
|
||||
debug: PageDebug,
|
||||
settings: PageSettings,
|
||||
},
|
||||
_currentPage: 'home',
|
||||
_currentPageInstance: null,
|
||||
|
||||
init() {
|
||||
window.addEventListener('hashchange', () => this._handleRoute());
|
||||
this._handleRoute();
|
||||
|
||||
document.querySelectorAll('.nav-item[data-route]').forEach(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const route = el.getAttribute('data-route');
|
||||
if (route) this.navigate(route);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
navigate(page) {
|
||||
window.location.hash = `#/${page}`;
|
||||
},
|
||||
|
||||
_handleRoute() {
|
||||
const hash = window.location.hash || '#/home';
|
||||
const page = hash.replace('#/', '') || 'home';
|
||||
|
||||
if (this._currentPageInstance && this._currentPageInstance.cleanup) {
|
||||
this._currentPageInstance.cleanup();
|
||||
}
|
||||
|
||||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||||
const pageEl = document.getElementById(`page-${page}`);
|
||||
if (pageEl) pageEl.classList.add('active');
|
||||
|
||||
Sidebar.setActive(page);
|
||||
|
||||
const route = this._routes[page];
|
||||
if (route) {
|
||||
this._currentPage = page;
|
||||
this._currentPageInstance = route;
|
||||
route.render();
|
||||
}
|
||||
},
|
||||
|
||||
get currentPage() { return this._currentPage; }
|
||||
};
|
||||
|
||||
window.Router = Router;
|
||||
@@ -0,0 +1,23 @@
|
||||
const Theme = {
|
||||
_current: 'dark',
|
||||
|
||||
init() {
|
||||
this._current = localStorage.getItem('turbosu-theme') || 'dark';
|
||||
this.apply();
|
||||
},
|
||||
|
||||
toggle() {
|
||||
this._current = this._current === 'dark' ? 'light' : 'dark';
|
||||
this.apply();
|
||||
},
|
||||
|
||||
apply() {
|
||||
document.body.classList.remove('theme-dark', 'theme-light');
|
||||
document.body.classList.add(`theme-${this._current}`);
|
||||
localStorage.setItem('turbosu-theme', this._current);
|
||||
},
|
||||
|
||||
get current() { return this._current; }
|
||||
};
|
||||
|
||||
window.Theme = Theme;
|
||||
@@ -0,0 +1,27 @@
|
||||
const Toast = {
|
||||
_container: null,
|
||||
|
||||
_init() {
|
||||
if (this._container) return;
|
||||
this._container = document.createElement('div');
|
||||
this._container.className = 'toast-container';
|
||||
document.body.appendChild(this._container);
|
||||
},
|
||||
|
||||
show(message, type = 'info', duration = 3000) {
|
||||
this._init();
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast ${type}`;
|
||||
toast.textContent = message;
|
||||
this._container.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
toast.style.transform = 'translateX(100%)';
|
||||
toast.style.transition = 'all 0.3s ease';
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, duration);
|
||||
}
|
||||
};
|
||||
|
||||
window.Toast = Toast;
|
||||
@@ -0,0 +1,87 @@
|
||||
const WS = {
|
||||
_ws: null,
|
||||
_url: '',
|
||||
_reconnectTimer: null,
|
||||
_reconnectDelay: 2000,
|
||||
_handlers: {},
|
||||
_connected: false,
|
||||
|
||||
init() {
|
||||
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
this._url = `${protocol}//${location.host}/ws`;
|
||||
this._connect();
|
||||
},
|
||||
|
||||
_connect() {
|
||||
if (this._ws && this._ws.readyState === WebSocket.OPEN) return;
|
||||
|
||||
try {
|
||||
this._ws = new WebSocket(this._url);
|
||||
} catch (e) {
|
||||
this._scheduleReconnect();
|
||||
return;
|
||||
}
|
||||
|
||||
this._ws.onopen = () => {
|
||||
this._connected = true;
|
||||
this._reconnectDelay = 2000;
|
||||
this._emit('connection', true);
|
||||
this._emit('status', 'connected');
|
||||
};
|
||||
|
||||
this._ws.onmessage = (event) => {
|
||||
try {
|
||||
const msg = JSON.parse(event.data);
|
||||
this._emit(msg.type || 'message', msg.data || msg);
|
||||
if (msg.type === 'telemetry') {
|
||||
this._emit('telemetry', msg.data);
|
||||
}
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
this._ws.onclose = () => {
|
||||
this._connected = false;
|
||||
this._emit('connection', false);
|
||||
this._emit('status', 'disconnected');
|
||||
this._scheduleReconnect();
|
||||
};
|
||||
|
||||
this._ws.onerror = () => {
|
||||
this._emit('status', 'error');
|
||||
};
|
||||
},
|
||||
|
||||
_scheduleReconnect() {
|
||||
if (this._reconnectTimer) return;
|
||||
this._reconnectTimer = setTimeout(() => {
|
||||
this._reconnectTimer = null;
|
||||
this._reconnectDelay = Math.min(this._reconnectDelay * 1.5, 10000);
|
||||
this._connect();
|
||||
}, this._reconnectDelay);
|
||||
},
|
||||
|
||||
on(event, handler) {
|
||||
if (!this._handlers[event]) this._handlers[event] = [];
|
||||
this._handlers[event].push(handler);
|
||||
},
|
||||
|
||||
off(event, handler) {
|
||||
if (!this._handlers[event]) return;
|
||||
this._handlers[event] = this._handlers[event].filter(h => h !== handler);
|
||||
},
|
||||
|
||||
_emit(event, data) {
|
||||
if (!this._handlers[event]) return;
|
||||
this._handlers[event].forEach(h => h(data));
|
||||
},
|
||||
|
||||
send(data) {
|
||||
if (this._ws && this._ws.readyState === WebSocket.OPEN) {
|
||||
this._ws.send(JSON.stringify(data));
|
||||
}
|
||||
},
|
||||
|
||||
get connected() { return this._connected; }
|
||||
};
|
||||
|
||||
window.WS = WS;
|
||||
Reference in New Issue
Block a user