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>
+  let { page = $bindable("dashboard") } = $props();
+  const links = [
+    { id: "dashboard", label: "Dashboard", icon: "&#9632;" },
+    { id: "docker", label: "Docker", icon: "&#9654;" },
+    { id: "gitea", label: "Gitea", icon: "&#128193;" },
+    { id: "files", label: "Files", icon: "&#128196;" },
+    { id: "terminal", label: "Terminal", icon: "&#62;" },
+  ];
+  const external = [
+    { label: "Navidrome", href: "//:4533", port: 4533 },
+    { label: "Immich", href: "//:2283", port: 2283 },
+    { label: "Emby", href: "//:8096", port: 8096 },
+    { label: "Gitea Web", href: "//:3300", port: 3300 },
+  ];
+  function extHref(port) {
+    return `${location.protocol}//${location.hostname}:${port}`;
+  }
+</script>
+
+<aside class="w-56 bg-gray-50 border-r border-gray-200 h-screen flex flex-col p-4 shrink-0">
+  <h1 class="text-lg font-bold mb-6">NAS Dashboard</h1>
+  <nav class="flex flex-col gap-1">
+    {#each links as link}
+      <button
+        class="text-left px-3 py-2 rounded text-sm {page === link.id ? 'bg-blue-100 text-blue-700 font-medium' : 'hover:bg-gray-100 text-gray-700'}"
+        onclick={() => page = link.id}
+      >
+        <span class="mr-2">{@html link.icon}</span>{link.label}
+      </button>
+    {/each}
+  </nav>
+  <hr class="my-4 border-gray-200" />
+  <p class="text-xs text-gray-400 mb-2 px-3">External Services</p>
+  <nav class="flex flex-col gap-1">
+    {#each external as svc}
+      <a href={extHref(svc.port)} target="_blank" class="text-left px-3 py-2 rounded text-sm hover:bg-gray-100 text-gray-700">
+        {svc.label} &#8599;
+      </a>
+    {/each}
+  </nav>
+</aside>