Add NAS dashboard MVP: Docker mgmt, Gitea, Files, Terminal

2026-02-19 01:59:50 +08:00
parent d85b290c33
commit 70aa421d7f
29 changed files with 2665 additions and 0 deletions
@@ -0,0 +1,47 @@
+<script>
+  import { onMount } from "svelte";
+
+  let termEl;
+
+  onMount(async () => {
+    const { Terminal } = await import("@xterm/xterm");
+    const { FitAddon } = await import("@xterm/addon-fit");
+    await import("@xterm/xterm/css/xterm.css");
+
+    const term = new Terminal({ cursorBlink: true, fontSize: 14, theme: { background: "#1a1a2e" } });
+    const fit = new FitAddon();
+    term.loadAddon(fit);
+    term.open(termEl);
+    fit.fit();
+
+    const proto = location.protocol === "https:" ? "wss:" : "ws:";
+    const ws = new WebSocket(`${proto}//${location.host}/ws/terminal`);
+    ws.binaryType = "arraybuffer";
+
+    ws.onopen = () => {
+      const buf = new Uint8Array(5);
+      buf[0] = 0x01;
+      new DataView(buf.buffer).setUint16(1, term.cols);
+      new DataView(buf.buffer).setUint16(3, term.rows);
+      ws.send(buf);
+    };
+    ws.onmessage = (e) => term.write(new Uint8Array(e.data));
+    ws.onclose = () => term.write("\r\n[Connection closed]");
+    term.onData((data) => ws.readyState === 1 && ws.send(new TextEncoder().encode(data)));
+
+    const ro = new ResizeObserver(() => {
+      fit.fit();
+      if (ws.readyState === 1) {
+        const buf = new Uint8Array(5);
+        buf[0] = 0x01;
+        new DataView(buf.buffer).setUint16(1, term.cols);
+        new DataView(buf.buffer).setUint16(3, term.rows);
+        ws.send(buf);
+      }
+    });
+    ro.observe(termEl);
+  });
+</script>
+
+<h2 class="text-2xl font-bold mb-4">Terminal</h2>
+<div bind:this={termEl} class="h-[calc(100vh-8rem)] rounded-lg overflow-hidden"></div>