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;

src/lib/DeleteConfirmModal.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { fade, scale } from 'svelte/transition';
+  import type { Media } from './interfaces';
+
+  let {show, media, onConfirm, onCancel} = $props();
+</script>
+
+{#if show}
+  <div 
+    class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" 
+    transition:fade={{ duration: 200 }}
+    onclick={onCancel}
+    role="presentation"
+  >
+    <div 
+      class="bg-white rounded-lg p-6 w-full mx-4 max-w-md"
+      transition:scale={{ duration: 200 }}
+      onclick={(e) => e.stopPropagation()}
+      role="presentation"
+    >
+      <div class="text-center">
+        <svg class="mx-auto h-12 w-12 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+        </svg>
+        <h3 class="mt-4 text-lg font-medium text-gray-900">确认删除</h3>
+        <p class="mt-2 text-sm text-gray-500">
+          确定要删除 "{media?.title}" 吗？此操作无法撤销。
+        </p>
+      </div>
+
+      <div class="mt-6 flex justify-end gap-3">
+        <button
+          type="button"
+          class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+          onclick={onCancel}
+        >
+          取消
+        </button>
+        <button
+          type="button"
+          class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+          onclick={onConfirm}
+        >
+          删除
+        </button>
+      </div>
+    </div>
+  </div>
+{/if} 

src/lib/MediaFormModal.svelte

@@ -2,11 +2,10 @@
   import type { Media } from './interfaces';
   import { fade, scale } from 'svelte/transition';
 
-  let {show, mode, submitMedia, handleClose, media: initialMedia} = $props();
+  let {show, mode, submitMedia, handleClose, media: initialMedia, itemType} = $props();
   let media: Media = $state({
     title: '',
-    type: '',
+    type: itemType,
-    status: 'plan_to_watch',
     date: '',
     rating: 0,
     platform: '',
@@ -19,8 +18,7 @@
       } else {
         media = {
           title: '',
-          type: '',
+          type: itemType,
-          status: 'plan_to_watch',
           date: '',
           rating: 0,
           platform: '',
@@ -94,9 +92,9 @@
         </div>
 
         <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="status">类别</label>
+          <label class="font-medium text-gray-700 whitespace-nowrap" for="type">类别</label>
           <select
-            id="status"
+            id="type"
             bind:value={media.type}
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             required
@@ -108,21 +106,6 @@
           </select>
         </div>
 
-        <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="status">状态</label>
-          <select
-            id="status"
-            bind:value={media.status}
-            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            required
-            aria-required="true"
-          >
-            {#each statusOptions as option}
-              <option value={option.value}>{option.label}</option>
-            {/each}
-          </select>
-        </div>
-
         <div class="flex justify-between items-center gap-6">
           <label class="font-medium text-gray-700 whitespace-nowrap" for="date">日期</label>
           <input

src/lib/MediaItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
   import type { Media } from './interfaces';
-  let {media, onEdit}: {media: Media, onEdit: (media: Media) => void} = $props();
+  let {media, onEdit, onDelete}: {media: Media, onEdit: (media: Media) => void, onDelete: (media: Media) => void} = $props();
 
   // 状态映射
   const statusMap = {
@@ -14,20 +14,32 @@
   import { StarRating } from './utils';
 </script>
 
-<div class="border rounded-lg p-4 hover:bg-gray-50" transition:fade>
+<div class="border rounded-lg p-4 hover:bg-gray-50 relative" transition:fade>
+  <button
+    class="delete-button absolute top-0 right-0 p-2 text-gray-400/50 hover:text-red-500 hover:bg-red-50 rounded-full transition-all duration-200"
+    onclick={(e) => {
+      e.stopPropagation();
+      onDelete(media);
+    }}
+    aria-label="删除"
+  >
+    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+    </svg>
+  </button>
   <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>
+        <h3 class="text-lg font-medium text-gray-900 truncate max-w-[70%]">
-        <div class="text-sm text-gray-500">
+          {media.title}
-          {media.date ? new Date(media.date).toLocaleDateString() : '未设置日期'}
+          {#if media.platform}
-        </div>
-      </div>
-      
-      <div class="flex flex-wrap gap-2">
             <span class="px-2 py-1 bg-gray-100 rounded text-sm text-gray-700">
-          状态：{statusMap[media.status] || media.status}
+              平台：{media.platform}
             </span>
+            {/if}
+        </h3>
+
+        <div class="flex flex-wrap gap-2 ml-auto mr-2">
           {#if media.rating}
             <div class="px-2 py-1 bg-gray-100 rounded text-sm text-gray-700 flex items-center gap-1">
               <span>评分：</span>
@@ -37,18 +49,29 @@
               <span class="ml-1">({media.rating}/10)</span>
             </div>
           {/if}
-        {#if media.platform}
+        </div>
-          <span class="px-2 py-1 bg-gray-100 rounded text-sm text-gray-700">
+        <div class="text-sm text-gray-500">
-            平台：{media.platform}
+          {media.date ? new Date(media.date).toLocaleDateString() : '未设置日期'}
-          </span>
+        </div>
-        {/if}
       </div>
 
       {#if media.notes}
-        <div class="mt-2 text-sm text-gray-600 bg-gray-50 p-3 rounded">
+        <div class="mt-2 text-sm text-gray-600 rounded">
-          <div class="whitespace-pre-wrap text-left line-clamp-1">{media.notes}</div>
+          <div class="whitespace-pre-wrap text-left line-clamp-4">{media.notes}</div>
         </div>
       {/if}
     </div>
   </div>
 </div>
+
+<style>
+  .delete-button {
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    opacity: 0.5;
+  }
+  .delete-button:hover {
+    opacity: 1;
+  }
+</style>

src/lib/interfaces.ts

@@ -2,7 +2,6 @@ export interface Media {
   id?: number;
   title: string;
   type: string;
-  status: 'completed' | 'in_progress' | 'plan_to_watch';
   rating?: number;
   notes?: string;
   platform?: string;