feat: modularize media display by creating MediaItem component, define Media interface, and simplify media list rendering

src/App.svelte

@@ -1,20 +1,9 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
   import request from './lib/request';
-
+  import type { Media } from './lib/interfaces';
+  import MediaItem from './lib/MediaItem.svelte';
   // 类型定义
-  interface Media {
-    id: number;
-    title: string;
-    type: string;
-    status: string;
-    rating?: number;
-    notes?: string;
-    platform?: string;
-    date?: string;
-    created_at: string;
-    updated_at: string;
-  }
 
   interface ApiResponse<T> {
     code: number;
@@ -76,15 +65,14 @@
 
   // 监听类别变化
   $effect(() => {
-    if (isAuthenticated && currentCategory) {
+    if (currentCategory) {
       currentPage = 1;
-      fetchMediaList();
     }
   });
 
   // 监听分页变化
   $effect(() => {
-    if (isAuthenticated && currentPage) {
+    if (currentPage) {
       fetchMediaList();
     }
   });
@@ -212,25 +200,7 @@
           {:else}
             <div class="grid grid-cols-2 gap-6">
               {#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>
-                      <div class="flex items-center space-x-4 text-sm text-gray-500">
-                        <span class="px-2 py-1 bg-gray-100 rounded">Status: {media.status}</span>
-                        {#if media.rating}
-                          <span class="px-2 py-1 bg-gray-100 rounded">Rating: {media.rating}/10</span>
-                        {/if}
-                      </div>
-                      {#if media.platform}
-                        <p class="text-sm text-gray-500">Platform: {media.platform}</p>
-                      {/if}
-                    </div>
-                    <div class="text-sm text-gray-500">
-                      {media.date ? new Date(media.date).toLocaleDateString() : 'No date'}
-                    </div>
-                  </div>
-                </div>
+                <MediaItem {media} />
               {/each}
             </div>