feat: add Tailwind CSS and Skeleton UI integration, implement authentication flow, and configure API requests

src/App.svelte

@@ -1,47 +1,107 @@
 <script lang="ts">
-  import svelteLogo from './assets/svelte.svg'
-  import viteLogo from '/vite.svg'
-  import Counter from './lib/Counter.svelte'
+  import { AppBar, AppRail, AppRailTile } from '@skeletonlabs/skeleton';
+  import { fade } from 'svelte/transition';
+  import { writable } from 'svelte/store';
+  import request from './lib/request';
+
+  // 状态管理
+  const isAuthenticated = writable(false);
+  const username = writable('');
+  const password = writable('');
+  const error = writable('');
+
+  // 登录处理
+  async function handleLogin() {
+    try {
+      // 保存认证信息
+      const auth = btoa(`${$username}:${$password}`);
+      localStorage.setItem('auth', auth);
+
+      const response = await request.get('/media/list');
+      if (response.code === 0) {
+        isAuthenticated.set(true);
+        error.set('');
+      } else {
+        error.set(response.message || 'Invalid username or password');
+        localStorage.removeItem('auth');
+      }
+    } catch (e) {
+      error.set(e.message || 'Connection error');
+      localStorage.removeItem('auth');
+    }
+  }
 </script>
 
-<main>
-  <div>
-    <a href="https://vite.dev" target="_blank" rel="noreferrer">
-      <img src={viteLogo} class="logo" alt="Vite Logo" />
-    </a>
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
-      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-    </a>
+<svelte:head>
+  <title>My Score</title>
+</svelte:head>
+
+{#if !$isAuthenticated}
+  <div class="min-h-screen flex items-center justify-center bg-gray-100" transition:fade>
+    <div class="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow-lg">
+      <div>
+        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
+          My Score
+        </h2>
+        <p class="mt-2 text-center text-sm text-gray-600">
+          Sign in to your account
+        </p>
+      </div>
+      <form class="mt-8 space-y-6" on:submit|preventDefault={handleLogin}>
+        <div class="rounded-md shadow-sm -space-y-px">
+          <div>
+            <label for="username" class="sr-only">Username</label>
+            <input
+              id="username"
+              name="username"
+              type="text"
+              required
+              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+              placeholder="Username"
+              bind:value={$username}
+            />
+          </div>
+          <div>
+            <label for="password" class="sr-only">Password</label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              required
+              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+              placeholder="Password"
+              bind:value={$password}
+            />
+          </div>
+        </div>
+
+        {#if $error}
+          <div class="text-red-500 text-sm text-center">
+            {$error}
+          </div>
+        {/if}
+
+        <div>
+          <button
+            type="submit"
+            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          >
+            Sign in
+          </button>
+        </div>
+      </form>
+    </div>
   </div>
-  <h1>Vite + Svelte</h1>
-
-  <div class="card">
-    <Counter />
+{:else}
+  <div class="min-h-screen bg-gray-100" transition:fade>
+    <!-- 这里将添加主内容页面 -->
+    <h1>Welcome, {$username}!</h1>
   </div>
-
-  <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
-  </p>
-
-  <p class="read-the-docs">
-    Click on the Vite and Svelte logos to learn more
-  </p>
-</main>
+{/if}
 
 <style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-  }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
-  }
-  .read-the-docs {
-    color: #888;
+  :global(body) {
+    margin: 0;
+    padding: 0;
   }
 </style>