ethan.chen/score-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ethan.chen
2025-05-27 18:06:19 +08:00
parent 5811739409
commit dcb95f35f8
5 changed files with 142 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/lib/MediaItem.svelte
View File

@@ -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>
</div>
<style>
.delete-button {
top: 0;
right: 0;
transform: translate(50%, -50%);
opacity: 0.5;
}
.delete-button:hover {
opacity: 1;
}
</style>