feat: implement delete confirmation modal for media items, enhance MediaItem component with delete functionality, and update App component to manage deletion state

src/App.svelte

@@ -4,6 +4,7 @@
   import type { Media } from './lib/interfaces';
   import MediaItem from './lib/MediaItem.svelte';
   import MediaFormModal from './lib/MediaFormModal.svelte';
+  import DeleteConfirmModal from './lib/DeleteConfirmModal.svelte';
   // 类型定义
 
   interface ApiResponse<T> {
@@ -37,6 +38,7 @@
   // 模态框状态
   let showCreateModal = $state<boolean>(false);
   let editingMedia = $state<Media | null>(null);
+  let deletingMedia = $state<Media | null>(null);
 
   // 类别选项
   const categories = [
@@ -57,7 +59,7 @@
           params: {
             type: 'game',
             currentPage: 1,
-            pageSize: 10
+            pageSize: pageSize
           }
         });
         
@@ -132,7 +134,7 @@
         params: {
           type: 'game',
           currentPage: 1,
-          pageSize: 10
+          pageSize: pageSize
         }
       });
       
@@ -192,6 +194,29 @@
   function handleEditClick(media: Media) {
     editingMedia = media;
   }
+
+  // 处理删除按钮点击
+  function handleDeleteClick(media: Media) {
+    deletingMedia = media;
+  }
+
+  // 处理删除确认
+  async function handleDeleteConfirm() {
+    if (!deletingMedia?.id) return;
+    
+    try {
+      const response = await request.delete<ApiResponse<null>>(`/media/deleteById/${deletingMedia.id}`);
+      
+      if (response.data.code === 0) {
+        deletingMedia = null;
+        await fetchMediaList();
+      } else {
+        error = response.data.message || 'Failed to delete media';
+      }
+    } catch (e: any) {
+      error = e.message || 'Failed to delete media';
+    }
+  }
 </script>
 
 <svelte:head>
@@ -263,7 +288,7 @@
   </div>
 {:else}
   <div class="min-h-screen bg-gray-100" transition:fade>
-    <div class="max-w-[1200px] mx-auto px-6 py-8">
+    <div class="min-w-[1200px] mx-auto px-6 py-8">
       <!-- 类别选择栏 -->
       <div class="bg-white shadow rounded-lg mb-6">
         <div class="px-6 py-4">
@@ -296,9 +321,9 @@
               <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">
+            <div class="grid grid-cols-2 gap-4">
               {#each mediaList as media}
-                <MediaItem {media} onEdit={handleEditClick} />
+                <MediaItem {media} onEdit={handleEditClick} onDelete={handleDeleteClick} />
               {/each}
             </div>
 
@@ -336,6 +361,7 @@
   handleClose={() => showCreateModal = false}
   submitMedia={handleCreate}
   mode="add"
+  itemType={currentCategory}
   media={null}
 />
 
@@ -344,9 +370,17 @@
   handleClose={() => editingMedia = null}
   submitMedia={handleEdit}
   mode="edit"
+  itemType=""
   media={editingMedia}
 />
 
+<DeleteConfirmModal
+  show={deletingMedia !== null}
+  media={deletingMedia}
+  onConfirm={handleDeleteConfirm}
+  onCancel={() => deletingMedia = null}
+/>
+
 <style>
   :global(body) {
     margin: 0;