Gan, Jimmy
101 lines
3.2 KiB
Svelte
101 lines
3.2 KiB
Svelte
<script>
|
|
import Sidebar from "./components/Sidebar.svelte";
|
|
import Dashboard from "./routes/Dashboard.svelte";
|
|
import Docker from "./routes/Docker.svelte";
|
|
import Gitea from "./routes/Gitea.svelte";
|
|
import Files from "./routes/Files.svelte";
|
|
import Terminal from "./routes/Terminal.svelte";
|
|
import OpenClaw from "./routes/OpenClaw.svelte";
|
|
import Settings from "./routes/Settings.svelte";
|
|
import Login from "./routes/Login.svelte";
|
|
import { onMount } from "svelte";
|
|
import { getToken, checkAuth, setToken } from "./lib/api.js";
|
|
|
|
let page = $state("dashboard");
|
|
let dark = $state(false);
|
|
let sidebarOpen = $state(false);
|
|
let authorized = $state(false);
|
|
let loading = $state(true);
|
|
|
|
onMount(async () => {
|
|
// Theme init
|
|
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
dark = true;
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
dark = false;
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
|
|
// Auth check
|
|
const token = getToken();
|
|
if (!token) {
|
|
loading = false;
|
|
authorized = false;
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await checkAuth();
|
|
authorized = true;
|
|
} catch (e) {
|
|
console.error("Auth check failed:", e);
|
|
setToken("");
|
|
authorized = false;
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
});
|
|
|
|
function toggleTheme() {
|
|
dark = !dark;
|
|
if (dark) {
|
|
document.documentElement.classList.add("dark");
|
|
localStorage.theme = 'dark';
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
localStorage.theme = 'light';
|
|
}
|
|
}
|
|
|
|
function logout() {
|
|
setToken("");
|
|
window.location.reload();
|
|
}
|
|
</script>
|
|
|
|
{#if loading}
|
|
<div class="flex h-screen items-center justify-center bg-surface-50 dark:bg-surface-950">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
|
|
</div>
|
|
{:else if !authorized}
|
|
<Login />
|
|
{:else}
|
|
<div class="flex h-screen overflow-hidden bg-surface-50 {dark ? 'dark bg-surface-900' : ''}">
|
|
<Sidebar bind:page {dark} {toggleTheme} {logout} bind:sidebarOpen />
|
|
<main class="flex-1 overflow-auto">
|
|
<div class="max-w-[1400px] mx-auto p-6 lg:p-8">
|
|
<!-- Mobile hamburger -->
|
|
<button class="md:hidden mb-4 p-2 rounded-lg hover:bg-surface-200 {dark ? 'hover:bg-surface-700 text-surface-300' : 'text-surface-600'}" onclick={() => sidebarOpen = true} aria-label="Open menu">
|
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /></svg>
|
|
</button>
|
|
{#if page === "dashboard"}
|
|
<Dashboard />
|
|
{:else if page === "docker"}
|
|
<Docker />
|
|
{:else if page === "gitea"}
|
|
<Gitea />
|
|
{:else if page === "files"}
|
|
<Files />
|
|
{:else if page === "terminal"}
|
|
<Terminal />
|
|
{:else if page === "openclaw"}
|
|
<OpenClaw />
|
|
{:else if page === "settings"}
|
|
<Settings />
|
|
{/if}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{/if}
|