From 97243c33c2de149cd391acef129d2977a587d113 Mon Sep 17 00:00:00 2001
From: "ethan.chen" <ethan.chen@sangoai.cn>
Date: Tue, 27 May 2025 18:26:43 +0800
Subject: [PATCH] feat: add DatePicker component for date selection in
 MediaFormModal, update dependencies, and refactor date input handling

---
 package-lock.json             | 120 ++++++++++++++++++++++++++++++++++
 package.json                  |   8 ++-
 src/lib/DatePicker.svelte     | 117 +++++++++++++++++++++++++++++++++
 src/lib/MediaFormModal.svelte |  17 ++---
 4 files changed, 249 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/DatePicker.svelte

diff --git a/package-lock.json b/package-lock.json
index 14145c7..ea70a69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
       "name": "my-score",
       "version": "0.0.0",
       "dependencies": {
+        "@melt-ui/svelte": "^0.86.6",
         "@skeletonlabs/skeleton": "^2.0.0",
         "autoprefixer": "^10.4.17",
         "axios": "^1.6.7",
+        "date-fns": "^4.1.0",
         "postcss": "^8.4.35",
         "tailwindcss": "^3.4.1"
       },
@@ -473,6 +475,40 @@
         "node": ">=18"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz",
+      "integrity": "sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.0.tgz",
+      "integrity": "sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
+    "node_modules/@internationalized/date": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.8.1.tgz",
+      "integrity": "sha512-PgVE6B6eIZtzf9Gu5HvJxRK3ufUFz9DhspELuhW/N0GuMGMTLvPQNRkHP2hTuP9lblOk+f+1xi96sPiPXANXAA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -538,6 +574,41 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@melt-ui/svelte": {
+      "version": "0.86.6",
+      "resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.86.6.tgz",
+      "integrity": "sha512-Jer+M7DgIwT5IHfTayb4Iw/fkkxWNmC/mqn/nMh9JrbPbkxmyabfLQnhJ+JDn5HK77f84j34lubO3iqFtYAfMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.3.1",
+        "@floating-ui/dom": "^1.4.5",
+        "@internationalized/date": "^3.5.0",
+        "dequal": "^2.0.3",
+        "focus-trap": "^7.5.2",
+        "nanoid": "^5.0.4"
+      },
+      "peerDependencies": {
+        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.118"
+      }
+    },
+    "node_modules/@melt-ui/svelte/node_modules/nanoid": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -930,6 +1001,15 @@
         "vite": "^6.0.0"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
+      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@tsconfig/svelte": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-5.0.4.tgz",
@@ -1291,6 +1371,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -1328,6 +1418,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1546,6 +1645,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/focus-trap": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz",
+      "integrity": "sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==",
+      "license": "MIT",
+      "dependencies": {
+        "tabbable": "^6.2.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -2676,6 +2784,12 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
@@ -2829,6 +2943,12 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/typescript": {
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
diff --git a/package.json b/package.json
index 346549a..cbf831b 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,12 @@
     "vite": "^6.3.5"
   },
   "dependencies": {
+    "@melt-ui/svelte": "^0.86.6",
     "@skeletonlabs/skeleton": "^2.0.0",
-    "tailwindcss": "^3.4.1",
-    "postcss": "^8.4.35",
     "autoprefixer": "^10.4.17",
-    "axios": "^1.6.7"
+    "axios": "^1.6.7",
+    "date-fns": "^4.1.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/src/lib/DatePicker.svelte b/src/lib/DatePicker.svelte
new file mode 100644
index 0000000..2ff5afd
--- /dev/null
+++ b/src/lib/DatePicker.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isToday } from 'date-fns';
+  import { zhCN } from 'date-fns/locale';
+  import { fade, scale } from 'svelte/transition';
+
+  let { value, placeholder = '选择日期' } = $props();
+  let isOpen = $state(false);
+  let currentMonth = $state(value ? new Date(value) : new Date());
+  let inputElement: HTMLInputElement;
+
+  function handleSelect(date: Date) {
+    const dateStr = format(date, 'yyyy-MM-dd');
+    value = dateStr;
+    isOpen = false;
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (inputElement && !inputElement.contains(event.target as Node)) {
+      isOpen = false;
+    }
+  }
+
+  function prevMonth() {
+    currentMonth = subMonths(currentMonth, 1);
+  }
+
+  function nextMonth() {
+    currentMonth = addMonths(currentMonth, 1);
+  }
+
+  $effect(() => {
+    if (isOpen) {
+      document.addEventListener('click', handleClickOutside);
+      return () => document.removeEventListener('click', handleClickOutside);
+    }
+  });
+
+  $effect(() => {
+    if (value) {
+      currentMonth = new Date(value);
+    }
+  });
+</script>
+
+<div class="relative w-full">
+  <input
+    bind:this={inputElement}
+    type="text"
+    {placeholder}
+    value={value || ''}
+    readonly
+    onclick={() => isOpen = true}
+    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+  />
+  {#if isOpen}
+    <div
+      class="absolute z-50 mt-1 bg-white rounded-lg shadow-lg border border-gray-200"
+      transition:scale={{ duration: 200 }}
+    >
+      <div class="p-2">
+        <div class="flex items-center justify-between mb-2">
+          <button
+            class="p-1 hover:bg-gray-100 rounded-full"
+            onclick={(e) => {
+              e.stopPropagation();
+              prevMonth();
+            }}
+            aria-label="上一月"
+          >
+            <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+          </button>
+          <span class="text-sm font-medium">
+            {format(currentMonth, 'yyyy年MM月', { locale: zhCN })}
+          </span>
+          <button
+            class="p-1 hover:bg-gray-100 rounded-full"
+            onclick={(e) => {
+              e.stopPropagation();
+              nextMonth();
+            }}
+            aria-label="下一月"
+          >
+            <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+            </svg>
+          </button>
+        </div>
+        <div class="grid grid-cols-7 gap-1">
+          {#each ['日', '一', '二', '三', '四', '五', '六'] as day}
+            <div class="text-center text-sm text-gray-500 py-1">{day}</div>
+          {/each}
+          {#each eachDayOfInterval({
+            start: startOfMonth(currentMonth),
+            end: endOfMonth(currentMonth)
+          }) as date}
+            <button
+              class:text-gray-400={!isSameMonth(date, currentMonth)}
+              class:bg-blue-500={value && format(new Date(value), 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd')}
+              class:text-white={value && format(new Date(value), 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd')}
+              class:border-2={isToday(date)}
+              class:border-blue-500={isToday(date)}
+              onclick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                handleSelect(date);
+              }}
+            >
+              {format(date, 'd')}
+            </button>
+          {/each}
+        </div>
+      </div>
+    </div>
+  {/if}
+</div> 
\ No newline at end of file
diff --git a/src/lib/MediaFormModal.svelte b/src/lib/MediaFormModal.svelte
index cb1e6ec..1a04209 100644
--- a/src/lib/MediaFormModal.svelte
+++ b/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' ? '添加' : '保存'}