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,75 @@
+<!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>
+:root{--ratio:auto;--mode:contain}
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:'SF Pro Text',-apple-system,'PingFang SC',sans-serif;-webkit-tap-highlight-color:transparent}
+#root{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
+#box{position:relative;overflow:hidden}
+#content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a14,#1a1a30)}
+.speed{font-size:min(18vw,160px);font-weight:900;line-height:1;color:#fff;text-shadow:0 0 50px rgba(52,130,255,.5);transition:font-size .1s ease}
+.unit{font-size:min(3vw,28px);color:rgba(255,255,255,.55);margin-top:8px;letter-spacing:.3em}
+.bar{width:min(80%,400px);height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin-top:24px}
+.bar-fill{height:100%;background:linear-gradient(90deg,#3482FF,#764ba2);border-radius:3px;transition:width .08s linear}
+/* aspect-ratio variants */
+#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}
+</style>
+</head>
+<body>
+<div id="root"><div id="box" class="contain"><div id="content">
+<div class="speed" id="v">0</div>
+<div class="unit">KM/H</div>
+<div class="bar"><div class="bar-fill" id="bar"></div></div>
+</div></div></div>
+<script>
+const M={aspect_ratio:"auto",render_mode:"contain"};
+(function(){
+ const box=document.getElementById('box');
+ const vEl=document.getElementById('v');
+ const bar=document.getElementById('bar');
+ const proto=location.protocol==='https:'?'wss:':'ws:';
+ const wsUrl=proto+'//'+location.host+'/ws';
+ let ws,rt;
+
+ 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||'auto');
+  const 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,1920);ch=cw/ratio;if(ch>vh){ch=Math.min(vh,1080);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;vEl.textContent=(d.speed_kmh||0).toFixed(0);bar.style.width=Math.min((d.speed_kmh||0)/400,1)*100+'%'}}catch(e){}};
+  ws.onclose=()=>{rt=setTimeout(connect,2000)};
+ }
+
+ apply();
+ window.addEventListener('resize',apply);
+ connect();
+})();
+</script>
+</body>
+</html>