feat: implement MediaFormModal for adding new media entries, update Media interface to make 'id' optional, and refactor MediaItem to use utility for star ratings

src/App.svelte

@@ -3,6 +3,7 @@
   import request from './lib/request';
   import type { Media } from './lib/interfaces';
   import MediaItem from './lib/MediaItem.svelte';
+  import MediaFormModal from './lib/MediaFormModal.svelte';
   // 类型定义
 
   interface ApiResponse<T> {
@@ -32,6 +33,9 @@
   let totalItems = $state(0);
   let loading = $state(false);
 
+  // 模态框状态
+  let showCreateModal = $state(false);
+
   // 类别选项
   const categories = [
     { id: 'game', label: '游戏' },
@@ -109,6 +113,25 @@
       localStorage.removeItem('auth');
     }
   }
+
+  // 处理创建新媒体
+  async function handleCreate(media: Media) {
+    try {
+      const response = await request.post<ApiResponse<Media>>('/media/create', {
+        ...media,
+        type: currentCategory
+      });
+      
+      if (response.data.code === 0) {
+        showCreateModal = false;
+        await fetchMediaList();
+      } else {
+        error = response.data.message || 'Failed to create media';
+      }
+    } catch (e: any) {
+      error = e.message || 'Failed to create media';
+    }
+  }
 </script>
 
 <svelte:head>
@@ -177,15 +200,23 @@
       <!-- 类别选择栏 -->
       <div class="bg-white shadow rounded-lg mb-6">
         <div class="px-6 py-4">
-          <div class="flex space-x-6">
-            {#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'}"
-                onclick={() => currentCategory = category.id}
-              >
-                {category.label}
-              </button>
-            {/each}
+          <div class="flex justify-between items-center">
+            <div class="flex space-x-6">
+              {#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'}"
+                  onclick={() => currentCategory = category.id}
+                >
+                  {category.label}
+                </button>
+              {/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"
+              onclick={() => showCreateModal = true}
+            >
+              添加新作品
+            </button>
           </div>
         </div>
       </div>
@@ -233,6 +264,13 @@
   </div>
 {/if}
 
+<MediaFormModal
+  show={showCreateModal}
+  handleClose={() => showCreateModal = false}
+  submitMedia={handleCreate}
+  mode="add"
+/>
+
 <style>
   :global(body) {
     margin: 0;