feat: implement media editing functionality in App component, enhance MediaFormModal for editing, and update MediaItem to trigger edit action

src/App.svelte

@@ -27,15 +27,16 @@
   let error = $state('');
 
   // 媒体列表状态
-  let currentCategory = $state('game');
+  let currentCategory = $state<string>('game');
   let mediaList = $state<Media[]>([]);
-  let currentPage = $state(1);
-  let pageSize = $state(10);
-  let totalItems = $state(0);
-  let loading = $state(false);
+  let currentPage = $state<number>(1);
+  let pageSize = $state<number>(10);
+  let totalItems = $state<number>(0);
+  let loading = $state<boolean>(false);
 
   // 模态框状态
-  let showCreateModal = $state(false);
+  let showCreateModal = $state<boolean>(false);
+  let editingMedia = $state<Media | null>(null);
 
   // 类别选项
   const categories = [
@@ -169,6 +170,30 @@
       error = e.message || 'Failed to create media';
     }
   }
+
+  // 处理编辑媒体
+  async function handleEdit(media: Media) {
+    try {
+      const response = await request.put<ApiResponse<Media>>(`/media/updateById/${media.id}`, {
+        ...media,
+        type: currentCategory
+      });
+      
+      if (response.data.code === 0) {
+        editingMedia = null;
+        await fetchMediaList();
+      } else {
+        error = response.data.message || 'Failed to update media';
+      }
+    } catch (e: any) {
+      error = e.message || 'Failed to update media';
+    }
+  }
+
+  // 处理编辑按钮点击
+  function handleEditClick(media: Media) {
+    editingMedia = media;
+  }
 </script>
 
 <svelte:head>
@@ -275,7 +300,7 @@
           {:else}
             <div class="grid grid-cols-2 gap-6">
               {#each mediaList as media}
-                <MediaItem {media} />
+                <MediaItem {media} onEdit={handleEditClick} />
               {/each}
             </div>
 
@@ -313,6 +338,15 @@
   handleClose={() => showCreateModal = false}
   submitMedia={handleCreate}
   mode="add"
+  media={null}
+/>
+
+<MediaFormModal
+  show={editingMedia !== null}
+  handleClose={() => editingMedia = null}
+  submitMedia={handleEdit}
+  mode="edit"
+  media={editingMedia}
 />
 
 <style>

src/lib/MediaFormModal.svelte

@@ -2,7 +2,7 @@
   import type { Media } from './interfaces';
   import { fade, scale } from 'svelte/transition';
 
-  let {show, mode, submitMedia, handleClose} = $props();
+  let {show, mode, submitMedia, handleClose, media: initialMedia} = $props();
   let media: Media = $state({
     title: '',
     type: '',
@@ -14,15 +14,19 @@
   });
   $effect(() => {
     if (show) {
-      media = {
-        title: '',
-        type: '',
-        status: 'plan_to_watch',
-        date: '',
-        rating: 0,
-        platform: '',
-        notes: ''
-      };
+      if (mode === 'edit' && initialMedia) {
+        media = { ...initialMedia };
+      } else {
+        media = {
+          title: '',
+          type: '',
+          status: 'plan_to_watch',
+          date: '',
+          rating: 0,
+          platform: '',
+          notes: ''
+        };
+      }
     }
   });
   const statusOptions = [

src/lib/MediaItem.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import type { Media } from './interfaces';
   import { fade } from 'svelte/transition';
-
-  export let media: Media;
+  import type { Media } from './interfaces';
+  let {media, onEdit}: {media: Media, onEdit: (media: Media) => void} = $props();
 
   // 状态映射
   const statusMap = {
@@ -16,7 +15,7 @@
 </script>
 
 <div class="border rounded-lg p-4 hover:bg-gray-50" transition:fade>
-  <div class="flex justify-between items-start">
+  <div class="flex justify-between items-start" role="presentation" onclick={() => onEdit(media)}>
     <div class="space-y-2 flex-1">
       <div class="flex items-center justify-between">
         <h3 class="text-lg font-medium text-gray-900 truncate max-w-[70%]">{media.title}</h3>