refactor: standalone dashboard folders with index.html, zip-based import/export (.tsd/.tss/.tsp)

- Each dashboard is now a self-contained folder: manifest.json + index.html - Auto-scan dashboards/ and data/dashboards/ on startup - Export: .tsd (dashboards), .tss (scenes), .tsp (game plugins) - all zip format - Dashboard index.html is complete standalone page (WS + data binding) - Aspect ratio constraints handled in each dashboard's own JS - Removed template-based dashboard rendering in favor of static serve - Import via file upload endpoints, export via direct file download
2026-07-25 15:35:08 +08:00
parent d61bb61a83
commit 63e3c8d607
21 changed files with 752 additions and 380 deletions
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
+<title>TurboSu - 圈速</title>
+<style>
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'SF Pro Text',-apple-system,'PingFang SC',sans-serif;color:#fff}
+#root{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
+#box{position:relative;overflow:hidden}
+#box.contain{max-width:100vw;max-height:100vh}
+#box.cover{min-width:100vw;min-height:100vh}
+#box.fill{width:100vw;height:100vh}
+#box.center{width:auto;height:auto}
+#content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a14,#1a1a30);gap:min(3vw,16px)}
+.lap-num{font-size:min(3vw,16px);color:rgba(255,255,255,.3);letter-spacing:.15em;margin-bottom:-8px}
+.current{font-size:min(12vw,72px);font-weight:900;color:#3482FF;font-variant-numeric:tabular-nums}
+.below{display:flex;gap:min(8vw,48px)}
+.col{text-align:center}
+.col .label{font-size:min(2vw,12px);color:rgba(255,255,255,.35);letter-spacing:.08em;margin-bottom:2px}
+.col .val{font-size:min(5vw,28px);font-weight:700;font-variant-numeric:tabular-nums}
+.col:last-child .val{color:#34C759}
+</style>
+</head>
+<body>
+<div id="root"><div id="box" class="contain"><div id="content">
+<div class="lap-num">LAP <span id="lap-n">0</span></div>
+<div class="current" id="cur">00:00.000</div>
+<div class="below">
+<div class="col"><div class="label">LAST</div><div class="val" id="last" style="color:rgba(255,255,255,.55)">00:00.000</div></div>
+<div class="col"><div class="label">BEST</div><div class="val" id="best">00:00.000</div></div>
+</div>
+</div></div></div>
+<script>
+const M={aspect_ratio:"4:3",render_mode:"contain"};
+(function(){
+ const box=document.getElementById('box'),curEl=document.getElementById('cur'),lastEl=document.getElementById('last'),bestEl=document.getElementById('best'),lapN=document.getElementById('lap-n');
+ const proto=location.protocol==='https:'?'wss:':'ws:',wsUrl=proto+'//'+location.host+'/ws';
+ let ws,rt;
+
+ function fmt(t){if(!t||t<=0)return'00:00.000';const m=Math.floor(t/60),s=(t%60).toFixed(3);return String(m).padStart(2,'0')+':'+(m>0?String(s).padStart(6,'0'):s)}
+
+ function parseRatio(r){if(!r||r==='auto')return null;const p=r.split(':');if(p.length===2){const w=+p[0],h=+p[1];if(w>0&&h>0)return w/h;}return null;}
+
+ function apply(){
+  const ratio=parseRatio(M.aspect_ratio||'4:3'),mode=M.render_mode||'contain';
+  if(!ratio){box.style.width='100vw';box.style.height='100vh';box.className='fill';return;}
+  const vw=window.innerWidth,vh=window.innerHeight,vr=vw/vh;let cw,ch;
+  switch(mode){
+   case'cover':if(vr>ratio){cw=vw;ch=vw/ratio}else{ch=vh;cw=vh*ratio};box.className='cover';break;
+   case'fill':box.style.width='100vw';box.style.height='100vh';box.className='fill';return;
+   case'center':cw=Math.min(vw,1200);ch=cw/ratio;if(ch>vh){ch=Math.min(vh,900);cw=ch*ratio};box.className='center';break;
+   default:if(vr>ratio){ch=vh;cw=vh*ratio}else{cw=vw;ch=vw/ratio};box.className='contain';
+  }
+  if(mode!=='fill'){box.style.width=cw+'px';box.style.height=ch+'px';}
+ }
+
+ function connect(){
+  ws=new WebSocket(wsUrl);ws.onopen=()=>{if(rt){clearTimeout(rt);rt=null}};
+  ws.onmessage=(e)=>{try{const m=JSON.parse(e.data);if(m.type==='telemetry'){const d=m.data;curEl.textContent=fmt(d.lap_time);lastEl.textContent=fmt(d.last_lap);bestEl.textContent=fmt(d.best_lap);lapN.textContent=d.lap_number||0}}catch(e){}};
+  ws.onclose=()=>{rt=setTimeout(connect,2000)};
+ }
+
+ apply();window.addEventListener('resize',apply);connect();
+})();
+</script>
+</body>
+</html>
@@ -1,20 +0,0 @@
-<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-family:'Segoe UI',system-ui,sans-serif;background:linear-gradient(135deg,#0a0a14,#1a1a30);gap:16px;">
-    <div style="text-align:center;">
-        <div style="font-size:12px;color:rgba(255,255,255,0.4);letter-spacing:2px;margin-bottom:4px;">LAP</div>
-        <div style="font-size:14px;color:rgba(255,255,255,0.3);" data-bind="lap_number">0</div>
-    </div>
-    <div style="text-align:center;">
-        <div style="font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:2px;margin-bottom:4px;">CURRENT</div>
-        <div style="font-size:48px;font-weight:900;color:#667eea;font-variant-numeric:tabular-nums;" data-bind="lap_time">00:00.000</div>
-    </div>
-    <div style="display:flex;gap:40px;">
-        <div style="text-align:center;">
-            <div style="font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:1px;margin-bottom:4px;">LAST</div>
-            <div style="font-size:24px;font-weight:700;color:rgba(255,255,255,0.6);font-variant-numeric:tabular-nums;" data-bind="last_lap">00:00.000</div>
-        </div>
-        <div style="text-align:center;">
-            <div style="font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:1px;margin-bottom:4px;">BEST</div>
-            <div style="font-size:24px;font-weight:700;color:#2ecc71;font-variant-numeric:tabular-nums;" data-bind="best_lap">00:00.000</div>
-        </div>
-    </div>
-</div>