Add ImageField component and client-side upload script

2026-09-12 10:01:04 +08:00
parent e18c3306d4
commit fbc383decf
2 changed files with 101 additions and 0 deletions
@@ -0,0 +1,28 @@
+---
+interface Props {
+  name: string;
+  label: string;
+  value?: string | null;
+  scope: "settings" | "cases" | "posts";
+  id?: string;
+}
+
+const { name, label, value = "", scope, id = name } = Astro.props;
+---
+
+<div class="image-field" data-image-field data-scope={scope}>
+  <label for={id}>{label}</label>
+  <input
+    id={id}
+    name={name}
+    type="text"
+    value={value ?? ""}
+    placeholder="https://... 或按下面上傳"
+    class="image-url"
+  />
+  <div class="image-actions">
+    <input type="file" accept="image/*" data-image-input />
+    <span class="image-status" data-image-status></span>
+  </div>
+  <img class="image-preview" data-image-preview src={value || undefined} alt="" hidden={!value} />
+</div>