aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/ui/src/App.svelte
diff options
context:
space:
mode:
author苏向夜 <fu050409@163.com>2026-01-19 14:17:32 +0800
committer苏向夜 <fu050409@163.com>2026-01-19 14:17:32 +0800
commitda0d79f0db873c08fab3bc85023167e174d18b0e (patch)
tree4a1934780d0d723ec8b834088188d4714f2cf3e7 /ui/src/App.svelte
parent887e415314014c3da7db3048fa0e724f3078c5cb (diff)
downloadDropOut-da0d79f0db873c08fab3bc85023167e174d18b0e.tar.gz
DropOut-da0d79f0db873c08fab3bc85023167e174d18b0e.zip
chore(ui): refactor workspace to monorepo
Diffstat (limited to 'ui/src/App.svelte')
-rw-r--r--ui/src/App.svelte217
1 files changed, 0 insertions, 217 deletions
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
deleted file mode 100644
index f73e0a2..0000000
--- a/ui/src/App.svelte
+++ /dev/null
@@ -1,217 +0,0 @@
-<script lang="ts">
- import { getVersion } from "@tauri-apps/api/app";
- // import { convertFileSrc } from "@tauri-apps/api/core"; // Removed duplicate, handled by import below or inline
- import { onDestroy, onMount } from "svelte";
- import DownloadMonitor from "./lib/DownloadMonitor.svelte";
- import GameConsole from "./lib/GameConsole.svelte";
-// Components
- import BottomBar from "./components/BottomBar.svelte";
- import HomeView from "./components/HomeView.svelte";
- import LoginModal from "./components/LoginModal.svelte";
- import ParticleBackground from "./components/ParticleBackground.svelte";
- import SettingsView from "./components/SettingsView.svelte";
- import AssistantView from "./components/AssistantView.svelte";
- import InstancesView from "./components/InstancesView.svelte";
- import Sidebar from "./components/Sidebar.svelte";
- import StatusToast from "./components/StatusToast.svelte";
- import VersionsView from "./components/VersionsView.svelte";
-// Stores
- import { authState } from "./stores/auth.svelte";
- import { gameState } from "./stores/game.svelte";
- import { instancesState } from "./stores/instances.svelte";
- import { settingsState } from "./stores/settings.svelte";
- import { uiState } from "./stores/ui.svelte";
- import { logsState } from "./stores/logs.svelte";
- import { convertFileSrc } from "@tauri-apps/api/core";
-
- let mouseX = $state(0);
- let mouseY = $state(0);
-
- function handleMouseMove(e: MouseEvent) {
- mouseX = (e.clientX / window.innerWidth) * 2 - 1;
- mouseY = (e.clientY / window.innerHeight) * 2 - 1;
- }
-
- onMount(async () => {
- // ENFORCE DARK MODE: Always add 'dark' class and attribute
- document.documentElement.classList.add('dark');
- document.documentElement.setAttribute('data-theme', 'dark');
- document.documentElement.classList.remove('light');
-
- authState.checkAccount();
- await settingsState.loadSettings();
- logsState.init();
- await settingsState.detectJava();
- await instancesState.loadInstances();
- gameState.loadVersions();
- getVersion().then((v) => (uiState.appVersion = v));
- window.addEventListener("mousemove", handleMouseMove);
- });
-
- // Refresh versions when active instance changes
- $effect(() => {
- if (instancesState.activeInstanceId) {
- gameState.loadVersions();
- } else {
- gameState.versions = [];
- }
- });
-
- onDestroy(() => {
- if (typeof window !== 'undefined')
- window.removeEventListener("mousemove", handleMouseMove);
- });
-</script>
-
-<div
- class="relative h-screen w-screen overflow-hidden dark:text-white text-gray-900 font-sans selection:bg-indigo-500/30"
->
- <!-- Modern Animated Background -->
- <div class="absolute inset-0 z-0 bg-[#09090b] dark:bg-[#09090b] bg-gray-100 overflow-hidden">
- {#if settingsState.settings.custom_background_path}
- <img
- src={convertFileSrc(settingsState.settings.custom_background_path)}
- alt="Background"
- class="absolute inset-0 w-full h-full object-cover transition-transform duration-[20s] ease-linear hover:scale-105"
- onerror={(e) => console.error("Failed to load main background:", e)}
- />
- <!-- Dimming Overlay for readability -->
- <div class="absolute inset-0 bg-black/50 "></div>
- {:else if settingsState.settings.enable_visual_effects}
- <!-- Original Gradient (Dark Only / or Adjusted for Light) -->
- {#if settingsState.settings.theme === 'dark'}
- <div
- class="absolute inset-0 opacity-60 bg-gradient-to-br from-emerald-900 via-zinc-900 to-indigo-950"
- ></div>
- {:else}
- <!-- Light Mode Gradient -->
- <div
- class="absolute inset-0 opacity-100 bg-gradient-to-br from-emerald-100 via-gray-100 to-indigo-100"
- ></div>
- {/if}
-
- {#if uiState.currentView === "home"}
- <ParticleBackground />
- {/if}
-
- <div
- class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-black/50 dark:from-zinc-900 dark:to-black/50 from-gray-100 to-transparent"
- ></div>
- {/if}
-
- <!-- Subtle Grid Overlay -->
- <div class="absolute inset-0 z-0 opacity-10 dark:opacity-10 opacity-30 pointer-events-none"
- style="background-image: linear-gradient({settingsState.settings.theme === 'dark' ? '#ffffff' : '#000000'} 1px, transparent 1px), linear-gradient(90deg, {settingsState.settings.theme === 'dark' ? '#ffffff' : '#000000'} 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 70%);">
- </div>
- </div>
-
- <!-- Content Wrapper -->
- <div class="relative z-10 flex h-full p-4 gap-4 text-gray-900 dark:text-white">
- <!-- Floating Sidebar -->
- <Sidebar />
-
- <!-- Main Content Area - Transparent & Flat -->
- <main class="flex-1 flex flex-col relative min-w-0 overflow-hidden transition-all duration-300">
-
- <!-- Window Drag Region -->
- <div
- class="h-8 w-full absolute top-0 left-0 z-50 drag-region"
- data-tauri-drag-region
- ></div>
-
- <!-- App Content -->
- <div class="flex-1 relative overflow-hidden flex flex-col">
- <!-- Views Container -->
- <div class="flex-1 relative overflow-hidden">
- {#if uiState.currentView === "home"}
- <HomeView mouseX={mouseX} mouseY={mouseY} />
- {:else if uiState.currentView === "instances"}
- <InstancesView />
- {:else if uiState.currentView === "versions"}
- <VersionsView />
- {:else if uiState.currentView === "settings"}
- <SettingsView />
- {:else if uiState.currentView === "guide"}
- <AssistantView />
- {/if}
- </div>
-
- <!-- Download Monitor Overlay -->
- <div class="absolute bottom-20 left-4 right-4 pointer-events-none z-20">
- <div class="pointer-events-auto">
- <DownloadMonitor />
- </div>
- </div>
-
- <!-- Bottom Bar -->
- {#if uiState.currentView === "home"}
- <BottomBar />
- {/if}
- </div>
- </main>
- </div>
-
- <LoginModal />
- <StatusToast />
-
- <!-- Logout Confirmation Dialog -->
- {#if authState.isLogoutConfirmOpen}
- <div class="fixed inset-0 z-[200] bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
- <div class="bg-zinc-900 border border-zinc-700 rounded-xl shadow-2xl p-6 max-w-sm w-full animate-in fade-in zoom-in-95 duration-200">
- <h3 class="text-lg font-bold text-white mb-2">Logout</h3>
- <p class="text-zinc-400 text-sm mb-6">
- Are you sure you want to logout <span class="text-white font-medium">{authState.currentAccount?.username}</span>?
- </p>
- <div class="flex gap-3 justify-end">
- <button
- onclick={() => authState.cancelLogout()}
- class="px-4 py-2 text-sm font-medium text-zinc-300 hover:text-white bg-zinc-800 hover:bg-zinc-700 rounded-lg transition-colors"
- >
- Cancel
- </button>
- <button
- onclick={() => authState.confirmLogout()}
- class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-500 rounded-lg transition-colors"
- >
- Logout
- </button>
- </div>
- </div>
- </div>
- {/if}
-
- {#if uiState.showConsole}
- <div class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-sm flex items-center justify-center p-8">
- <div class="w-full h-full max-w-6xl max-h-[85vh] bg-[#1e1e1e] rounded-lg overflow-hidden border border-zinc-700 shadow-2xl relative flex flex-col">
- <GameConsole />
- </div>
- </div>
- {/if}
-</div>
-
-<style>
- :global(body) {
- margin: 0;
- padding: 0;
- background: #000;
- }
-
- /* Modern Scrollbar */
- :global(*::-webkit-scrollbar) {
- width: 6px;
- height: 6px;
- }
-
- :global(*::-webkit-scrollbar-track) {
- background: transparent;
- }
-
- :global(*::-webkit-scrollbar-thumb) {
- background: rgba(255, 255, 255, 0.1);
- border-radius: 999px;
- }
-
- :global(*::-webkit-scrollbar-thumb:hover) {
- background: rgba(255, 255, 255, 0.25);
- }
-</style>