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

feat: enhance UI components with improved styling, transitions, and layout adjustments across App, MediaFormModal, MediaItem, and StarRating components

Browse Source
This commit is contained in:
ethan.chen
2025-06-03 17:41:10 +08:00
parent 701021c112
commit 35e0df26fe
5 changed files with 70 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.svelte
View File

@@ -273,16 +273,16 @@
</div>
</div>
{:else}
<div class="min-h-screen bg-gray-100" transition:fade>
<div class="min-w-[1200px] mx-auto px-6 py-8">
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100" transition:fade>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- 类别选择栏 -->
<div class="bg-white shadow rounded-lg mb-6">
<div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl mb-6 border border-gray-200">
<div class="px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex space-x-6">
<div class="flex space-x-4">
{#each categories as category}
<button
class="px-4 py-2 rounded-md text-sm font-medium {currentCategory === category.id ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentCategory === category.id ? 'bg-gradient-to-r from-indigo-500 to-indigo-600 text-white shadow-sm' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
onclick={() => currentCategory = category.id}
>
{category.label}
@@ -290,7 +290,7 @@
{/each}
</div>
<button
class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-lg hover:from-indigo-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 shadow-sm hover:shadow-md"
onclick={() => showCreateModal = true}
>
添加新作品
@@ -300,14 +300,14 @@
</div>
<!-- 媒体列表 -->
<div class="bg-white shadow rounded-lg">
<div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl border border-gray-200">
<div class="px-6 py-4">
{#if loading}
<div class="text-center py-8">
<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-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
{#each mediaList as media}
<MediaItem {media} onEdit={handleEditClick} onDelete={handleDeleteClick} />
{/each}
@@ -315,19 +315,19 @@
<!-- 分页控制 -->
<div class="mt-6 flex justify-between items-center">
<div class="text-sm text-gray-700">
<div class="text-sm text-gray-600">
Showing {(currentPage - 1) * pageSize + 1} to {Math.min(currentPage * pageSize, totalItems)} of {totalItems} items
</div>
<div class="flex space-x-2">
<div class="flex space-x-3">
<button
class="px-4 py-2 rounded-md text-sm font-medium {currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 shadow-sm hover:shadow-md'}"
disabled={currentPage === 1}
onclick={() => currentPage = currentPage - 1}
>
Previous
</button>
<button
class="px-4 py-2 rounded-md text-sm font-medium {currentPage * pageSize >= totalItems ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage * pageSize >= totalItems ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 shadow-sm hover:shadow-md'}"
disabled={currentPage * pageSize >= totalItems}
onclick={() => currentPage = currentPage + 1}
>