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

package.json

@@ -16,5 +16,12 @@
     "svelte-check": "^4.1.6",
     "typescript": "~5.8.3",
     "vite": "^6.3.5"
+  },
+  "dependencies": {
+    "@skeletonlabs/skeleton": "^2.0.0",
+    "tailwindcss": "^3.4.1",
+    "postcss": "^8.4.35",
+    "autoprefixer": "^10.4.17",
+    "axios": "^1.6.7"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 

src/App.svelte

@@ -1,47 +1,107 @@
 <script lang="ts">
-  import svelteLogo from './assets/svelte.svg'
+  import { AppBar, AppRail, AppRailTile } from '@skeletonlabs/skeleton';
-  import viteLogo from '/vite.svg'
+  import { fade } from 'svelte/transition';
-  import Counter from './lib/Counter.svelte'
+  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>
+<svelte:head>
-  <div>
+  <title>My Score</title>
-    <a href="https://vite.dev" target="_blank" rel="noreferrer">
+</svelte:head>
-      <img src={viteLogo} class="logo" alt="Vite Logo" />
+
-    </a>
+{#if !$isAuthenticated}
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
+  <div class="min-h-screen flex items-center justify-center bg-gray-100" transition:fade>
-      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+    <div class="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow-lg">
-    </a>
+      <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>
+{:else}
-
+  <div class="min-h-screen bg-gray-100" transition:fade>
-  <div class="card">
+    <!-- 这里将添加主内容页面 -->
-    <Counter />
+    <h1>Welcome, {$username}!</h1>
   </div>
-
+{/if}
-  <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>
 
 <style>
-  .logo {
+  :global(body) {
-    height: 6em;
+    margin: 0;
-    padding: 1.5em;
+    padding: 0;
-    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;
   }
 </style>

src/app.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

src/lib/request.ts

@@ -0,0 +1,47 @@
+/*
+ * @Date: 2025-05-19 18:10:10
+ * @LastEditors: 陈子健
+ * @LastEditTime: 2025-05-19 18:23:05
+ * @FilePath: /my-score/frontend/src/lib/request.ts
+ */
+import axios from 'axios';
+
+const request = axios.create({
+  baseURL: '/api',
+  timeout: 5000,
+  headers: {
+    'Content-Type': 'application/json',
+  }
+});
+
+// 请求拦截器
+request.interceptors.request.use(
+  (config) => {
+    // 从 localStorage 获取认证信息
+    const auth = localStorage.getItem('auth');
+    if (auth) {
+      config.headers.Authorization = `Basic ${auth}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+request.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  (error) => {
+    if (error.response?.status === 401) {
+      // 清除认证信息
+      localStorage.removeItem('auth');
+      return
+    }
+    return Promise.reject(error.response?.data || error);
+  }
+);
+
+export default request; 

src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import '../app.css';
+</script>
+
+<div class="min-h-screen bg-gray-100">
+  <slot />
+</div> 

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} 

vite.config.ts

@@ -4,4 +4,13 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [svelte()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:5000',
+        changeOrigin: true,
+        secure: false
+      }
+    }
+  }
 })