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,42 @@
+<script>
+  import { get, post } from "../lib/api.js";
+  let containers = $state([]);
+  let logs = $state("");
+  let logTarget = $state("");
+  async function load() { containers = await get("/docker/containers"); }
+  async function action(id, act) { await post(`/docker/containers/${id}/${act}`); await load(); }
+  async function showLogs(id, name) { logTarget = name; const r = await get(`/docker/containers/${id}/logs?tail=100`); logs = r.logs; }
+  load();
+</script>
+
+<h2 class="text-2xl font-bold mb-6">Docker Containers</h2>
+<div class="space-y-3">
+  {#each containers as c}
+    <div class="border rounded-lg p-4 flex items-center justify-between">
+      <div>
+        <span class="font-medium">{c.name}</span>
+        <span class="ml-2 text-xs px-2 py-0.5 rounded {c.status === 'running' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}">{c.status}</span>
+        <p class="text-xs text-gray-400 mt-1">{c.image}</p>
+      </div>
+      <div class="flex gap-2">
+        {#if c.status === "running"}
+          <button class="text-xs px-3 py-1 bg-red-50 text-red-600 rounded hover:bg-red-100" onclick={() => action(c.id, "stop")}>Stop</button>
+          <button class="text-xs px-3 py-1 bg-yellow-50 text-yellow-600 rounded hover:bg-yellow-100" onclick={() => action(c.id, "restart")}>Restart</button>
+        {:else}
+          <button class="text-xs px-3 py-1 bg-green-50 text-green-600 rounded hover:bg-green-100" onclick={() => action(c.id, "start")}>Start</button>
+        {/if}
+        <button class="text-xs px-3 py-1 bg-gray-50 text-gray-600 rounded hover:bg-gray-100" onclick={() => showLogs(c.id, c.name)}>Logs</button>
+      </div>
+    </div>
+  {/each}
+</div>
+
+{#if logTarget}
+  <div class="mt-6">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="font-semibold">Logs: {logTarget}</h3>
+      <button class="text-xs text-gray-400 hover:text-gray-600" onclick={() => { logTarget = ""; logs = ""; }}>Close</button>
+    </div>
+    <pre class="bg-gray-900 text-green-400 text-xs p-4 rounded-lg overflow-auto max-h-96 whitespace-pre-wrap">{logs}</pre>
+  </div>
+{/if}