From 96becb0363be53723c8226a39a6e16cb45dd540b Mon Sep 17 00:00:00 2001
From: "ethan.chen" <ethan.chen@sangoai.cn>
Date: Fri, 23 May 2025 17:43:30 +0800
Subject: [PATCH] refactor: replace writable stores with reactive variables,
 update media category labels to Chinese, and streamline event handling

---
 src/App.svelte | 118 +++++++++++++++++++++++++------------------------
 1 file changed, 61 insertions(+), 57 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 31af51f..8ef0542 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { AppBar, AppRail, AppRailTile } from '@skeletonlabs/skeleton';
   import { fade } from 'svelte/transition';
-  import { writable } from 'svelte/store';
   import request from './lib/request';
 
   // 类型定义
@@ -32,65 +30,71 @@
   }
 
   // 状态管理
-  const isAuthenticated = writable(false);
-  const username = writable('');
-  const password = writable('');
-  const error = writable('');
+  let isAuthenticated = $state(false);
+  let username = $state('');
+  let password = $state('');
+  let error = $state('');
 
   // 媒体列表状态
-  const currentCategory = writable('game');
-  const mediaList = writable<Media[]>([]);
-  const currentPage = writable(1);
-  const pageSize = writable(10);
-  const totalItems = writable(0);
-  const loading = writable(false);
+  let currentCategory = $state('game');
+  let mediaList = $state<Media[]>([]);
+  let currentPage = $state(1);
+  let pageSize = $state(10);
+  let totalItems = $state(0);
+  let loading = $state(false);
 
   // 类别选项
   const categories = [
-    { id: 'game', label: 'Games' },
-    { id: 'book', label: 'Books' },
-    { id: 'movie', label: 'Movies' },
-    { id: 'anime', label: 'Anime' }
+    { id: 'game', label: '游戏' },
+    { id: 'book', label: '书籍' },
+    { id: 'movie', label: '电影' },
+    { id: 'anime', label: '番剧' },
+    { id: 'other', label: '其他' }
   ];
 
   // 获取媒体列表
   async function fetchMediaList() {
-    loading.set(true);
+    loading = true;
     try {
       const response = await request.get<ApiResponse<PageResponse>>('/media/page', {
         params: {
-          type: $currentCategory,
-          currentPage: $currentPage,
-          pageSize: $pageSize
+          type: currentCategory,
+          currentPage: currentPage,
+          pageSize: pageSize
         }
       });
       if (response.data.code === 0) {
-        mediaList.set(response.data.data.list);
-        totalItems.set(response.data.data.total);
+        mediaList = response.data.data.list;
+        totalItems = response.data.data.total;
       }
     } catch (e: any) {
-      error.set(e.message || 'Failed to fetch media list');
+      error = e.message || 'Failed to fetch media list';
     } finally {
-      loading.set(false);
+      loading = false;
     }
   }
 
   // 监听类别变化
-  $: if ($isAuthenticated) {
-    currentPage.set(1);
-    fetchMediaList();
-  }
+  $effect(() => {
+    if (isAuthenticated && currentCategory) {
+      currentPage = 1;
+      fetchMediaList();
+    }
+  });
 
   // 监听分页变化
-  $: if ($isAuthenticated && $currentPage) {
-    fetchMediaList();
-  }
+  $effect(() => {
+    if (isAuthenticated && currentPage) {
+      fetchMediaList();
+    }
+  });
 
   // 登录处理
-  async function handleLogin() {
+  async function handleLogin(e: Event) {
+    e.preventDefault();
     try {
       // 保存认证信息
-      const auth = btoa(`${$username}:${$password}`);
+      const auth = btoa(`${username}:${password}`);
       localStorage.setItem('auth', auth);
 
       // 使用 page 接口验证登录
@@ -103,17 +107,17 @@
       });
       
       if (response.data.code === 0) {
-        isAuthenticated.set(true);
-        error.set('');
+        isAuthenticated = true;
+        error = '';
         // 设置初始数据
-        mediaList.set(response.data.data.list);
-        totalItems.set(response.data.data.total);
+        mediaList = response.data.data.list;
+        totalItems = response.data.data.total;
       } else {
-        error.set(response.data.message || 'Invalid username or password');
+        error = response.data.message || 'Invalid username or password';
         localStorage.removeItem('auth');
       }
     } catch (e: any) {
-      error.set(e.message || 'Connection error');
+      error = e.message || 'Connection error';
       localStorage.removeItem('auth');
     }
   }
@@ -123,7 +127,7 @@
   <title>My Score</title>
 </svelte:head>
 
-{#if !$isAuthenticated}
+{#if !isAuthenticated}
   <div class="min-h-screen flex items-center justify-center bg-gray-100" transition:fade>
     <div class="w-[480px] space-y-8 p-8 bg-white rounded-lg shadow-lg">
       <div>
@@ -134,7 +138,7 @@
           Sign in to your account
         </p>
       </div>
-      <form class="mt-8 space-y-6" on:submit|preventDefault={handleLogin}>
+      <form class="mt-8 space-y-6" onsubmit={handleLogin}>
         <div class="space-y-4">
           <div>
             <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
@@ -145,7 +149,7 @@
               required
               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
               placeholder="Enter your username"
-              bind:value={$username}
+              bind:value={username}
             />
           </div>
           <div>
@@ -157,14 +161,14 @@
               required
               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
               placeholder="Enter your password"
-              bind:value={$password}
+              bind:value={password}
             />
           </div>
         </div>
 
-        {#if $error}
+        {#if error}
           <div class="text-red-500 text-sm text-center">
-            {$error}
+            {error}
           </div>
         {/if}
 
@@ -188,8 +192,8 @@
           <div class="flex space-x-6">
             {#each categories as category}
               <button
-                class="px-4 py-2 rounded-md text-sm font-medium {$currentCategory === category.id ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
-                on:click={() => currentCategory.set(category.id)}
+                class="px-4 py-2 rounded-md text-sm font-medium {currentCategory === category.id ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+                onclick={() => currentCategory = category.id}
               >
                 {category.label}
               </button>
@@ -201,14 +205,14 @@
       <!-- 媒体列表 -->
       <div class="bg-white shadow rounded-lg">
         <div class="px-6 py-4">
-          {#if $loading}
+          {#if loading}
             <div class="text-center py-8">
               <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mx-auto"></div>
             </div>
           {:else}
             <div class="grid grid-cols-2 gap-6">
-              {#each $mediaList as media}
-                <div class="border rounded-lg p-6 hover:bg-gray-50">
+              {#each mediaList as media}
+                <div class="border rounded-lg p-3 hover:bg-gray-50">
                   <div class="flex justify-between items-start">
                     <div class="space-y-2">
                       <h3 class="text-lg font-medium text-gray-900">{media.title}</h3>
@@ -233,20 +237,20 @@
             <!-- 分页控制 -->
             <div class="mt-6 flex justify-between items-center">
               <div class="text-sm text-gray-700">
-                Showing {($currentPage - 1) * $pageSize + 1} to {Math.min($currentPage * $pageSize, $totalItems)} of {$totalItems} items
+                Showing {(currentPage - 1) * pageSize + 1} to {Math.min(currentPage * pageSize, totalItems)} of {totalItems} items
               </div>
               <div class="flex space-x-2">
                 <button
-                  class="px-4 py-2 rounded-md text-sm font-medium {$currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border'}"
-                  disabled={$currentPage === 1}
-                  on:click={() => currentPage.set($currentPage - 1)}
+                  class="px-4 py-2 rounded-md text-sm font-medium {currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border'}"
+                  disabled={currentPage === 1}
+                  onclick={() => currentPage = currentPage - 1}
                 >
                   Previous
                 </button>
                 <button
-                  class="px-4 py-2 rounded-md text-sm font-medium {$currentPage * $pageSize >= $totalItems ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border'}"
-                  disabled={$currentPage * $pageSize >= $totalItems}
-                  on:click={() => currentPage.set($currentPage + 1)}
+                  class="px-4 py-2 rounded-md text-sm font-medium {currentPage * pageSize >= totalItems ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border'}"
+                  disabled={currentPage * pageSize >= totalItems}
+                  onclick={() => currentPage = currentPage + 1}
                 >
                   Next
                 </button>