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 currentPage = $state<number>(1);
-  let pageSize = $state(10);
+  let pageSize = $state<number>(10);
-  let totalItems = $state(0);
+  let totalItems = $state<number>(0);
-  let loading = $state(false);
+  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,6 +14,9 @@
   });
   $effect(() => {
     if (show) {
+      if (mode === 'edit' && initialMedia) {
+        media = { ...initialMedia };
+      } else {
         media = {
           title: '',
           type: '',
@@ -24,6 +27,7 @@
           notes: ''
         };
       }
+    }
   });
   const statusOptions = [
     { value: 'plan_to_watch', label: '计划中' },

src/lib/MediaItem.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import type { Media } from './interfaces';
   import { fade } from 'svelte/transition';
-
+  import type { Media } from './interfaces';
-  export let media: Media;
+  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>