feat: add DatePicker component for date selection in MediaFormModal, update dependencies, and refactor date input handling

src/lib/MediaFormModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Media } from './interfaces';
   import { fade, scale } from 'svelte/transition';
+  import DatePicker from './DatePicker.svelte';
 
   let {show, mode, submitMedia, handleClose, media: initialMedia, itemType} = $props();
   let media: Media = $state({
@@ -43,8 +44,6 @@
 
   function handleSubmit(e: Event) {
     e.preventDefault();
-    // 暂时留空，后续处理
-    submitMedia(media);
   }
 </script>
 
@@ -108,12 +107,9 @@
 
         <div class="flex justify-between items-center gap-6">
           <label class="font-medium text-gray-700 whitespace-nowrap" for="date">日期</label>
-          <input
-            id="date"
-            type="date"
-            bind:value={media.date}
-            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="选择日期"
+          <DatePicker
+            value={media.date}
+            placeholder="选择日期"
           />
         </div>
 
@@ -151,7 +147,7 @@
             id="notes"
             bind:value={media.notes}
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            rows="3"
+            rows="10"
             placeholder="添加一些备注..."
             aria-label="添加备注信息"
           ></textarea>
@@ -166,7 +162,8 @@
             取消
           </button>
           <button
-            type="submit"
+            type="button"
+            onclick={() => submitMedia(media)}
             class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {mode === 'add' ? '添加' : '保存'}