From 701021c112cdcf60c8c2db68fbf4735dbf410e65 Mon Sep 17 00:00:00 2001
From: "ethan.chen" <ethan.chen@sangoai.cn>
Date: Tue, 27 May 2025 18:40:23 +0800
Subject: [PATCH] feat: integrate StarRating component into MediaFormModal for
 improved rating input

---
 src/lib/MediaFormModal.svelte | 17 ++++++----------
 src/lib/StarRating.svelte     | 38 +++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/StarRating.svelte

diff --git a/src/lib/MediaFormModal.svelte b/src/lib/MediaFormModal.svelte
index fb15527..29983e3 100644
--- a/src/lib/MediaFormModal.svelte
+++ b/src/lib/MediaFormModal.svelte
@@ -2,6 +2,7 @@
   import type { Media } from './interfaces';
   import { fade, scale } from 'svelte/transition';
   import DatePicker from './DatePicker.svelte';
+  import StarRating from './StarRating.svelte';
 
   let {show, mode, submitMedia, handleClose, media: initialMedia, itemType} = $props();
   let media: Media = $state({
@@ -114,17 +115,11 @@
           />
         </div>
 
-        <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="rating">评分</label>
-          <input
-            id="rating"
-            type="number"
-            min="0"
-            max="10"
-            step="0.5"
-            bind:value={media.rating}
-            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            aria-label="输入评分，范围0-10"
+        <div class="flex start items-center gap-6">
+          <label for="score" class="font-medium text-gray-700 whitespace-nowrap">评分</label>
+          <StarRating
+            value={media.rating}
+            onSelect={(score: number) => media.rating = score}
           />
         </div>
         {#if media.type === 'game' || media.type === 'other'}
diff --git a/src/lib/StarRating.svelte b/src/lib/StarRating.svelte
new file mode 100644
index 0000000..20a42ca
--- /dev/null
+++ b/src/lib/StarRating.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  let { value = 0, maxStars = 10, onSelect } = $props();
+  let hoverValue = $state(0);
+
+  function handleStarClick(index: number) {
+    onSelect(index + 1);
+  }
+
+  function handleStarHover(index: number) {
+    hoverValue = index + 1;
+  }
+
+  function handleMouseLeave() {
+    hoverValue = 0;
+  }
+</script>
+
+<div class="flex items-center gap-1" onmouseleave={handleMouseLeave} role="presentation">
+  {#each Array(maxStars) as _, i}
+    <div
+      class="text-l focus:outline-none transition-colors duration-200 cursor-pointer"
+      class:text-yellow-400={i <(hoverValue || value)}
+      class:text-gray-300={i >= (hoverValue || value)}
+      onclick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleStarClick(i);
+      }}
+      onmouseenter={() => handleStarHover(i)}
+      role="presentation"
+    >
+      ★
+    </div>
+  {/each}
+  {#if value > 0}
+    <span class="ml-2 text-sm text-gray-600">{value}分</span>
+  {/if}
+</div> 
\ No newline at end of file