From 1c88c0cbe28174f017fa889607f4407720c9d0a3 Mon Sep 17 00:00:00 2001
From: "ethan.chen" <ethan.chen@sangoai.cn>
Date: Thu, 8 Jan 2026 14:11:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E4=B8=BA=E4=BA=AE=E8=93=9D=E8=89=B2=E7=B3=BB?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=89=B2=E5=BD=A9=E4=B8=B0=E5=AF=8C?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.svelte                | 44 +++++++++++++++++------------------
 src/app.css                   |  8 +++----
 src/lib/MediaFormModal.svelte | 28 +++++++++++-----------
 src/lib/MediaItem.svelte      |  4 ++--
 src/routes/+layout.svelte     |  2 +-
 tailwind.config.js            | 17 +++++++++++++-
 6 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 4465650..07e1e95 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -232,45 +232,45 @@
 <Toast />
 
 {#if isInitializing}
-  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50">
     <div class="text-center">
-      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
-      <p class="mt-4 text-gray-600">加载中...</p>
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-sky-500 mx-auto"></div>
+      <p class="mt-4 text-sky-700">加载中...</p>
     </div>
   </div>
 {:else if !isAuthenticated}
-  <div class="min-h-screen flex items-center justify-center bg-gray-100" transition:fade>
-    <div class="w-[480px] space-y-8 p-8 bg-white rounded-lg shadow-lg">
+  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50" transition:fade>
+    <div class="w-[480px] space-y-8 p-8 bg-white/90 backdrop-blur-sm rounded-xl shadow-xl border border-sky-100">
       <div>
-        <h2 class="text-center text-3xl font-extrabold text-gray-900">
+        <h2 class="text-center text-3xl font-extrabold bg-gradient-to-r from-sky-600 to-blue-600 bg-clip-text text-transparent">
           我的评分
         </h2>
-        <p class="mt-2 text-center text-sm text-gray-600">
+        <p class="mt-2 text-center text-sm text-sky-600">
           登录你的账号
         </p>
       </div>
       <form class="mt-8 space-y-6" onsubmit={handleLogin}>
         <div class="space-y-4">
           <div>
-            <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
+            <label for="username" class="block text-sm font-medium text-sky-700">用户名</label>
             <input
               id="username"
               name="username"
               type="text"
               required
-              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+              class="mt-1 block w-full px-3 py-2 border border-sky-200 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm bg-white/50"
               placeholder="请输入用户名"
               bind:value={username}
             />
           </div>
           <div>
-            <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
+            <label for="password" class="block text-sm font-medium text-sky-700">密码</label>
             <input
               id="password"
               name="password"
               type="password"
               required
-              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+              class="mt-1 block w-full px-3 py-2 border border-sky-200 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm bg-white/50"
               placeholder="请输入密码"
               bind:value={password}
             />
@@ -286,7 +286,7 @@
         <div>
           <button
             type="submit"
-            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-blue-500 hover:from-sky-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200"
           >
             登录
           </button>
@@ -295,16 +295,16 @@
     </div>
   </div>
 {:else}
-  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100" transition:fade>
+  <div class="min-h-screen bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50" transition:fade>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <!-- 类别选择栏 -->
-      <div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl mb-6 border border-gray-200">
+      <div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl mb-6 border border-sky-200/50">
         <div class="px-6 py-4">
           <div class="flex justify-between items-center">
             <div class="flex space-x-4">
               {#each categories as category}
                 <button
-                  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'}"
+                  class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentCategory === category.id ? 'bg-gradient-to-r from-sky-500 to-blue-500 text-white shadow-md shadow-sky-200' : 'bg-sky-50 text-sky-700 hover:bg-sky-100 border border-sky-200/50'}"
                   onclick={() => {
                     currentCategory = category.id;
                     currentPage = 1;
@@ -316,7 +316,7 @@
               {/each}
             </div>
             <button
-              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"
+              class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-blue-500 rounded-lg hover:from-sky-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200 shadow-md shadow-sky-200 hover:shadow-lg"
               onclick={() => showCreateModal = true}
             >
               添加新作品
@@ -326,11 +326,11 @@
       </div>
 
       <!-- 媒体列表 -->
-      <div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl border border-gray-200">
+      <div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl border border-sky-200/50">
         <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 class="animate-spin rounded-full h-8 w-8 border-b-2 border-sky-500 mx-auto"></div>
             </div>
           {:else}
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -346,7 +346,7 @@
               </div>
               <div class="flex items-center space-x-1">
                 <button
-                  class="px-3 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'}"
+                  class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === 1 ? 'bg-sky-100 text-sky-300 cursor-not-allowed' : 'bg-white text-sky-700 hover:bg-sky-50 border border-sky-200 shadow-sm hover:shadow-md'}"
                   disabled={currentPage === 1}
                   onclick={() => {
                     currentPage = currentPage - 1;
@@ -357,10 +357,10 @@
                 </button>
                 {#each pageNumbers as num, i}
                   {#if num === '...'}
-                    <span class="px-2 text-gray-400 select-none">...</span>
+                    <span class="px-2 text-sky-400 select-none">...</span>
                   {:else}
                     <button
-                      class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === num ? 'bg-indigo-500 text-white shadow-sm' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 shadow-sm hover:shadow-md'}"
+                      class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === num ? 'bg-gradient-to-r from-sky-500 to-blue-500 text-white shadow-md shadow-sky-200' : 'bg-white text-sky-700 hover:bg-sky-50 border border-sky-200 shadow-sm hover:shadow-md'}"
                       disabled={typeof num === 'number' ? currentPage === num : false}
                       onclick={() => {
                         if (typeof num === 'number') {
@@ -374,7 +374,7 @@
                   {/if}
                 {/each}
                 <button
-                  class="px-3 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'}"
+                  class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage * pageSize >= totalItems ? 'bg-sky-100 text-sky-300 cursor-not-allowed' : 'bg-white text-sky-700 hover:bg-sky-50 border border-sky-200 shadow-sm hover:shadow-md'}"
                   disabled={currentPage * pageSize >= totalItems}
                   onclick={() => {
                     currentPage = currentPage + 1;
diff --git a/src/app.css b/src/app.css
index ec9f2ee..8ef79f3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -19,11 +19,11 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: #3b82f6;
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: #60a5fa;
 }
 
 body {
@@ -61,7 +61,7 @@ button {
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: #3b82f6;
 }
 button:focus,
 button:focus-visible {
@@ -74,7 +74,7 @@ button:focus-visible {
     background-color: #ffffff;
   }
   a:hover {
-    color: #747bff;
+    color: #60a5fa;
   }
   button {
     background-color: #f9f9f9;
diff --git a/src/lib/MediaFormModal.svelte b/src/lib/MediaFormModal.svelte
index 158d4e4..849d690 100644
--- a/src/lib/MediaFormModal.svelte
+++ b/src/lib/MediaFormModal.svelte
@@ -56,13 +56,13 @@
     role="presentation"
   >
     <div 
-      class="bg-gradient-to-br from-white to-gray-50 rounded-xl p-6 w-full mx-4 max-w-[800px] shadow-2xl"
+      class="bg-gradient-to-br from-white via-sky-50/30 to-blue-50/30 rounded-xl p-6 w-full mx-4 max-w-[800px] shadow-2xl border border-sky-100/50"
       transition:scale={{ duration: 200 }}
       onclick={(e) => e.stopPropagation()}
       role="presentation"
     >
       <div class="flex justify-between items-center mb-6">
-        <h2 id="modal-title" class="text-xl font-semibold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
+        <h2 id="modal-title" class="text-xl font-semibold bg-gradient-to-r from-sky-600 to-blue-600 bg-clip-text text-transparent">
           {mode === 'add' ? '添加新作品' : '编辑作品'}
         </h2>
         <button 
@@ -79,12 +79,12 @@
 
       <form onsubmit={handleSubmit} class="space-y-4">
         <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="title">标题</label>
+          <label class="font-medium text-sky-700 whitespace-nowrap" for="title">标题</label>
           <input
             id="title"
             type="text"
             bind:value={media.title}
-            class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
+            class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
             placeholder="请输入标题"
             required
             aria-required="true"
@@ -92,11 +92,11 @@
         </div>
 
         <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="type">类别</label>
+          <label class="font-medium text-sky-700 whitespace-nowrap" for="type">类别</label>
           <select
             id="type"
             bind:value={media.type}
-            class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
+            class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
             required
             aria-required="true"
           >
@@ -107,7 +107,7 @@
         </div>
 
         <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="date">日期</label>
+          <label class="font-medium text-sky-700 whitespace-nowrap" for="date">日期</label>
           <DatePicker
             value={media.date}
             onSelect={(date: string) => media.date = date}
@@ -116,7 +116,7 @@
         </div>
 
         <div class="flex start items-center gap-6">
-          <label for="score" class="font-medium text-gray-700 whitespace-nowrap">评分</label>
+          <label for="score" class="font-medium text-sky-700 whitespace-nowrap">评分</label>
           <StarRating
             value={media.rating}
             onSelect={(score: number) => media.rating = score}
@@ -124,25 +124,25 @@
         </div>
         {#if media.type === 'game' || media.type === 'other'}
           <div class="flex justify-between items-center gap-6">
-            <label class="font-medium text-gray-700 whitespace-nowrap" for="platform">{
+            <label class="font-medium text-sky-700 whitespace-nowrap" for="platform">{
               media.type === 'game' ? '平台' : '类别'
             }</label>
             <input
               id="platform"
               type="text"
               bind:value={media.platform}
-              class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
+              class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
               placeholder="例如：Steam、Netflix、Kindle等"
               aria-label="输入平台名称"
             />
           </div>
         {/if}
         <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="notes">备注</label>
+          <label class="font-medium text-sky-700 whitespace-nowrap" for="notes">备注</label>
           <textarea
             id="notes"
             bind:value={media.notes}
-            class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
+            class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
             rows="10"
             placeholder="添加一些备注..."
             aria-label="添加备注信息"
@@ -153,7 +153,7 @@
         <div class="flex justify-end gap-3 mt-6">
           <button
             type="button"
-            class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200"
+            class="px-4 py-2 text-sm font-medium text-sky-700 bg-sky-100 rounded-lg hover:bg-sky-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200"
             onclick={handleClose}
           >
             取消
@@ -161,7 +161,7 @@
           <button
             type="button"
             onclick={() => submitMedia(media)}
-            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"
+            class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-blue-500 rounded-lg hover:from-sky-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200 shadow-md shadow-sky-200 hover:shadow-lg"
           >
             {mode === 'add' ? '添加' : '保存'}
           </button>
diff --git a/src/lib/MediaItem.svelte b/src/lib/MediaItem.svelte
index 4af6f23..982ae66 100644
--- a/src/lib/MediaItem.svelte
+++ b/src/lib/MediaItem.svelte
@@ -6,7 +6,7 @@
   import { StarRating } from './utils';
 </script>
 
-<div class="bg-white/90 backdrop-blur-sm rounded-xl shadow-[0_2px_8px_-2px_rgba(0,0,0,0.1)] hover:shadow-[0_4px_12px_-4px_rgba(0,0,0,0.15)] transition-all duration-200 border border-gray-100/50 overflow-hidden">
+<div class="bg-white/90 backdrop-blur-sm rounded-xl shadow-[0_2px_8px_-2px_rgba(59,130,246,0.1)] hover:shadow-[0_4px_12px_-4px_rgba(59,130,246,0.2)] transition-all duration-200 border border-sky-100/50 overflow-hidden">
   <div class="p-6">
     <div class="flex justify-between items-center mb-1">
       <span>
@@ -20,7 +20,7 @@
       <div class="flex items-center gap-2">
         <button
           onclick={() => onEdit(media)}
-          class="text-gray-400 hover:text-indigo-400 transition-colors duration-200"
+          class="text-gray-400 hover:text-sky-500 transition-colors duration-200"
           aria-label="编辑"
         >
           <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d1f2623..dd930db 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,6 @@
   import '../app.css';
 </script>
 
-<div class="min-h-screen bg-gray-100">
+<div class="min-h-screen bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50">
   <slot />
 </div> 
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 7c08b75..735d962 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,22 @@
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'bright-blue': {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+      },
+    },
   },
   plugins: [],
 } 
\ No newline at end of file