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

2025-05-27 18:06:19 +08:00
parent 5811739409
commit dcb95f35f8
5 changed files with 142 additions and 54 deletions
--- a/src/App.svelte
+++ b/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;
--- a/src/lib/DeleteConfirmModal.svelte
+++ b/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} 
--- a/src/lib/MediaFormModal.svelte
+++ b/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: '',
-    status: 'plan_to_watch',
+    type: itemType,
    date: '',
    rating: 0,
    platform: '',
@@ -19,8 +18,7 @@
      } else {
        media = {
          title: '',
-          type: '',
-          status: 'plan_to_watch',
+          type: itemType,
          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
--- a/src/lib/MediaItem.svelte
+++ b/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,41 +14,64 @@
  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%]">
+          {media.title}
+          {#if media.platform}
+            <span class="px-2 py-1 bg-gray-100 rounded text-sm text-gray-700">
+              平台：{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>
+              <div class="flex items-center">
+                {@html StarRating(media.rating / 2)}
+              </div>
+              <span class="ml-1">({media.rating}/10)</span>
+            </div>
+          {/if}
+        </div>
        <div class="text-sm text-gray-500">
          {media.date ? new Date(media.date).toLocaleDateString() : '未设置日期'}
        </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}
-        </span>
-        {#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>
-            <div class="flex items-center">
-              {@html StarRating(media.rating / 2)}
-            </div>
-            <span class="ml-1">({media.rating}/10)</span>
-          </div>
-        {/if}
-        {#if media.platform}
-          <span class="px-2 py-1 bg-gray-100 rounded text-sm text-gray-700">
-            平台：{media.platform}
-          </span>
-        {/if}
-      </div>
-
      {#if media.notes}
-        <div class="mt-2 text-sm text-gray-600 bg-gray-50 p-3 rounded">
-          <div class="whitespace-pre-wrap text-left line-clamp-1">{media.notes}</div>
+        <div class="mt-2 text-sm text-gray-600 rounded">
+          <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>
--- a/src/lib/interfaces.ts
+++ b/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;