sa2kit 1.6.69 → 1.6.72

package/dist/festivalCard/index.js

@@ -61,7 +61,8 @@ var DEFAULT_FESTIVAL_CARD_CONFIG = {
           src: "https://images.unsplash.com/photo-1512389142860-9c449e58a543?auto=format&fit=crop&w=1200&q=80",
           fit: "cover",
           borderRadius: 16,
-          alt: "holiday"
+          alt: "holiday",
+          isBackground: false
         }
       ]
     },
@@ -120,7 +121,8 @@ var DEFAULT_FESTIVAL_CARD_CONFIG = {
           src: "https://images.unsplash.com/photo-1456324504439-367cee3b3c32?auto=format&fit=crop&w=1200&q=80",
           fit: "cover",
           borderRadius: 14,
-          alt: "gift"
+          alt: "gift",
+          isBackground: false
         },
         {
           id: "p3-text-1",
@@ -186,9 +188,10 @@ var useFestivalCardConfig = (options) => {
   const [loading, setLoading] = React3.useState(Boolean(options?.fetchConfig));
   const [saving, setSaving] = React3.useState(false);
   React3.useEffect(() => {
-    if (!options?.fetchConfig) return;
+    const fetchConfig = options?.fetchConfig;
+    if (!fetchConfig) return;
     let active = true;
-    void options.fetchConfig().then((value) => {
+    void fetchConfig().then((value) => {
       if (!active) return;
       setConfig(normalizeFestivalCardConfig(value));
     }).finally(() => {
@@ -197,16 +200,17 @@ var useFestivalCardConfig = (options) => {
     return () => {
       active = false;
     };
-  }, [options]);
+  }, [options?.fetchConfig]);
   const save = React3.useCallback(async () => {
-    if (!options?.onSave) return;
+    const onSave = options?.onSave;
+    if (!onSave) return;
     setSaving(true);
     try {
-      await options.onSave(config);
+      await onSave(config);
     } finally {
       setSaving(false);
     }
-  }, [config, options]);
+  }, [config, options?.onSave]);
   return React3.useMemo(
     () => ({
       config,
@@ -220,6 +224,7 @@ var useFestivalCardConfig = (options) => {
 };
 var elementStyle = (element) => ({
   position: "absolute",
+  zIndex: 2,
   left: `${element.x}%`,
   top: `${element.y}%`,
   width: `${element.width ?? 70}%`,
@@ -262,22 +267,23 @@ var renderElement = (element) => {
   );
 };
 var FestivalCardPageRenderer = ({ page }) => {
+  const backgroundElement = page.elements.find(
+    (element) => element.type === "image" && Boolean(element.isBackground)
+  );
+  const foregroundElements = page.elements.filter((element) => !(element.type === "image" && element.isBackground));
   return /* @__PURE__ */ React3__default.default.createElement(
     "div",
     {
+      className: "relative h-full w-full overflow-hidden rounded-2xl",
       style: {
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        overflow: "hidden",
-        borderRadius: 16,
         backgroundColor: page.background?.color || "#0f172a",
-        backgroundImage: page.background?.image ? `url(${page.background.image})` : void 0,
+        backgroundImage: backgroundElement ? `url(${backgroundElement.src})` : page.background?.image ? `url(${page.background.image})` : void 0,
         backgroundSize: "cover",
         backgroundPosition: "center"
       }
     },
-    page.elements.map(renderElement)
+    /* @__PURE__ */ React3__default.default.createElement("div", { className: "absolute inset-0 bg-slate-950/20" }),
+    foregroundElements.map(renderElement)
   );
 };
 
@@ -291,100 +297,31 @@ var FestivalCardBook3D = ({ config, className }) => {
   return /* @__PURE__ */ React3__default.default.createElement("div", { className }, /* @__PURE__ */ React3__default.default.createElement(
     "div",
     {
+      className: "w-full min-h-[560px] rounded-3xl p-6 shadow-2xl shadow-slate-900/50",
       style: {
-        width: "100%",
-        minHeight: 560,
-        borderRadius: 24,
-        padding: 24,
-        background: `linear-gradient(145deg, ${normalized.background?.colorA || "#0c1a34"} 0%, ${normalized.background?.colorB || "#1f4f8a"} 100%)`,
-        boxShadow: "0 26px 70px rgba(2, 6, 23, 0.45)"
+        background: `linear-gradient(145deg, ${normalized.background?.colorA || "#0c1a34"} 0%, ${normalized.background?.colorB || "#1f4f8a"} 100%)`
       }
     },
-    /* @__PURE__ */ React3__default.default.createElement(
-      "div",
-      {
-        style: {
-          marginBottom: 14,
-          color: "#f8fafc",
-          fontSize: 14,
-          opacity: 0.9,
-          textAlign: "center"
-        }
-      },
-      normalized.coverTitle || "Festival Card",
-      " \xB7 \u7B2C ",
-      currentPage + 1,
-      " / ",
-      pages.length,
-      " \u9875"
-    ),
-    /* @__PURE__ */ React3__default.default.createElement("div", { style: { perspective: 1400, width: "100%", maxWidth: 920, margin: "0 auto" } }, /* @__PURE__ */ React3__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement("div", { className: "mx-auto w-full max-w-5xl text-center text-slate-100" }, /* @__PURE__ */ React3__default.default.createElement("h3", { className: "mb-4 text-lg font-semibold" }, normalized.coverTitle || "Festival Card")),
+    /* @__PURE__ */ React3__default.default.createElement("div", { className: "mx-auto w-full max-w-5xl" }, /* @__PURE__ */ React3__default.default.createElement("div", { className: "relative h-[460px]" }, pages.map((page, index) => /* @__PURE__ */ React3__default.default.createElement(
       "div",
       {
+        key: page.id,
+        className: "absolute inset-0 transition-opacity duration-500 ease-out",
         style: {
-          position: "relative",
-          height: 460,
-          transformStyle: "preserve-3d"
+          opacity: index === currentPage ? 1 : 0,
+          pointerEvents: index === currentPage ? "auto" : "none"
         }
       },
-      pages.map((page, index) => {
-        const isFlipped = index < currentPage;
-        const zIndex = pages.length - index;
-        return /* @__PURE__ */ React3__default.default.createElement(
-          "div",
-          {
-            key: page.id,
-            style: {
-              position: "absolute",
-              inset: 0,
-              transformStyle: "preserve-3d",
-              transformOrigin: "left center",
-              transform: `rotateY(${isFlipped ? -170 : 0}deg)`,
-              transition: "transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1)",
-              zIndex
-            }
-          },
-          /* @__PURE__ */ React3__default.default.createElement(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                inset: 0,
-                backfaceVisibility: "hidden"
-              }
-            },
-            /* @__PURE__ */ React3__default.default.createElement(FestivalCardPageRenderer, { page })
-          ),
-          /* @__PURE__ */ React3__default.default.createElement(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                inset: 0,
-                transform: "rotateY(180deg)",
-                backfaceVisibility: "hidden",
-                borderRadius: 16,
-                background: "#0f172a"
-              }
-            }
-          )
-        );
-      })
-    )),
-    /* @__PURE__ */ React3__default.default.createElement("div", { style: { display: "flex", justifyContent: "center", gap: 12, marginTop: 18 } }, /* @__PURE__ */ React3__default.default.createElement(
+      /* @__PURE__ */ React3__default.default.createElement(FestivalCardPageRenderer, { page })
+    )))),
+    /* @__PURE__ */ React3__default.default.createElement("div", { className: "mt-5 flex justify-center gap-3" }, /* @__PURE__ */ React3__default.default.createElement(
       "button",
       {
         type: "button",
         disabled: !canPrev,
         onClick: () => setCurrentPage((p) => Math.max(0, p - 1)),
-        style: {
-          border: "none",
-          borderRadius: 999,
-          padding: "9px 16px",
-          fontSize: 14,
-          cursor: canPrev ? "pointer" : "not-allowed",
-          opacity: canPrev ? 1 : 0.4
-        }
+        className: "rounded-full bg-white px-5 py-2 text-sm font-medium text-slate-900 disabled:cursor-not-allowed disabled:opacity-45"
       },
       "\u4E0A\u4E00\u9875"
     ), /* @__PURE__ */ React3__default.default.createElement(
@@ -393,14 +330,7 @@ var FestivalCardBook3D = ({ config, className }) => {
         type: "button",
         disabled: !canNext,
         onClick: () => setCurrentPage((p) => Math.min(pages.length - 1, p + 1)),
-        style: {
-          border: "none",
-          borderRadius: 999,
-          padding: "9px 16px",
-          fontSize: 14,
-          cursor: canNext ? "pointer" : "not-allowed",
-          opacity: canNext ? 1 : 0.4
-        }
+        className: "rounded-full bg-sky-300 px-5 py-2 text-sm font-medium text-slate-900 disabled:cursor-not-allowed disabled:opacity-45"
       },
       "\u4E0B\u4E00\u9875"
     ))
@@ -411,7 +341,7 @@ var FestivalCardBook3D = ({ config, className }) => {
       autoPlay: normalized.backgroundMusic.autoPlay,
       loop: normalized.backgroundMusic.loop,
       controls: true,
-      style: { width: "100%", marginTop: 10 }
+      className: "mt-3 w-full"
     }
   ) : null);
 };
@@ -453,16 +383,17 @@ var FestivalCardConfigEditor = ({ value, onChange }) => {
       )
     });
   };
-  return /* @__PURE__ */ React3__default.default.createElement("div", { style: { borderRadius: 16, background: "#0f172a", color: "#e2e8f0", padding: 16 } }, /* @__PURE__ */ React3__default.default.createElement("div", { style: { display: "grid", gap: 12 } }, /* @__PURE__ */ React3__default.default.createElement("label", { style: { display: "grid", gap: 6 } }, /* @__PURE__ */ React3__default.default.createElement("span", null, "\u9875\u9762\u6570\u91CF"), /* @__PURE__ */ React3__default.default.createElement(
+  return /* @__PURE__ */ React3__default.default.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 text-slate-900 shadow-sm" }, /* @__PURE__ */ React3__default.default.createElement("div", { className: "grid gap-3" }, /* @__PURE__ */ React3__default.default.createElement("label", { className: "grid gap-1.5" }, /* @__PURE__ */ React3__default.default.createElement("span", { className: "text-sm font-medium text-slate-700" }, "\u9875\u9762\u6570\u91CF"), /* @__PURE__ */ React3__default.default.createElement(
     "input",
     {
       type: "number",
       min: 1,
       max: 12,
       value: value.pages.length,
-      onChange: (event) => onChange(resizeFestivalCardPages(value, Number(event.target.value)))
+      onChange: (event) => onChange(resizeFestivalCardPages(value, Number(event.target.value))),
+      className: "rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
     }
-  )), /* @__PURE__ */ React3__default.default.createElement("label", { style: { display: "grid", gap: 6 } }, /* @__PURE__ */ React3__default.default.createElement("span", null, "\u80CC\u666F\u97F3\u4E50 URL"), /* @__PURE__ */ React3__default.default.createElement(
+  )), /* @__PURE__ */ React3__default.default.createElement("label", { className: "grid gap-1.5" }, /* @__PURE__ */ React3__default.default.createElement("span", { className: "text-sm font-medium text-slate-700" }, "\u80CC\u666F\u97F3\u4E50 URL"), /* @__PURE__ */ React3__default.default.createElement(
     "input",
     {
       type: "url",
@@ -473,9 +404,18 @@ var FestivalCardConfigEditor = ({ value, onChange }) => {
           ...value.backgroundMusic,
           src: event.target.value
         }
-      })
+      }),
+      className: "rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
     }
-  )), /* @__PURE__ */ React3__default.default.createElement("label", { style: { display: "grid", gap: 6 } }, /* @__PURE__ */ React3__default.default.createElement("span", null, "\u7F16\u8F91\u9875\u9762"), /* @__PURE__ */ React3__default.default.createElement("select", { value: activePageIndex, onChange: (event) => setActivePageIndex(Number(event.target.value)) }, pageOptions.map((index) => /* @__PURE__ */ React3__default.default.createElement("option", { key: index, value: index }, "\u7B2C ", index + 1, " \u9875"))))), canEditPage ? /* @__PURE__ */ React3__default.default.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ React3__default.default.createElement("div", { style: { display: "flex", gap: 8, marginBottom: 12 } }, /* @__PURE__ */ React3__default.default.createElement(
+  )), /* @__PURE__ */ React3__default.default.createElement("label", { className: "grid gap-1.5" }, /* @__PURE__ */ React3__default.default.createElement("span", { className: "text-sm font-medium text-slate-700" }, "\u7F16\u8F91\u9875\u9762"), /* @__PURE__ */ React3__default.default.createElement(
+    "select",
+    {
+      value: activePageIndex,
+      onChange: (event) => setActivePageIndex(Number(event.target.value)),
+      className: "rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
+    },
+    pageOptions.map((index) => /* @__PURE__ */ React3__default.default.createElement("option", { key: index, value: index }, "\u7B2C ", index + 1, " \u9875"))
+  ))), canEditPage ? /* @__PURE__ */ React3__default.default.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React3__default.default.createElement("div", { className: "mb-3 flex gap-2" }, /* @__PURE__ */ React3__default.default.createElement(
     "button",
     {
       type: "button",
@@ -484,7 +424,8 @@ var FestivalCardConfigEditor = ({ value, onChange }) => {
         pages: value.pages.map(
           (p, index) => index === activePageIndex ? { ...p, elements: [...p.elements, createTextElement(index)] } : p
         )
-      })
+      }),
+      className: "rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white"
     },
     "+ \u6587\u5B57"
   ), /* @__PURE__ */ React3__default.default.createElement(
@@ -496,27 +437,38 @@ var FestivalCardConfigEditor = ({ value, onChange }) => {
         pages: value.pages.map(
           (p, index) => index === activePageIndex ? { ...p, elements: [...p.elements, createImageElement(index)] } : p
         )
-      })
+      }),
+      className: "rounded-lg bg-sky-600 px-3 py-2 text-sm font-medium text-white"
     },
     "+ \u56FE\u7247"
-  )), /* @__PURE__ */ React3__default.default.createElement("div", { style: { display: "grid", gap: 10, maxHeight: 340, overflow: "auto" } }, (page?.elements ?? []).map((element) => /* @__PURE__ */ React3__default.default.createElement("div", { key: element.id, style: { border: "1px solid #334155", borderRadius: 10, padding: 10 } }, /* @__PURE__ */ React3__default.default.createElement("div", { style: { marginBottom: 8 } }, element.type.toUpperCase()), element.type === "text" ? /* @__PURE__ */ React3__default.default.createElement(
+  )), /* @__PURE__ */ React3__default.default.createElement("div", { className: "grid max-h-[340px] gap-2.5 overflow-auto pr-1" }, (page?.elements ?? []).map((element) => /* @__PURE__ */ React3__default.default.createElement("div", { key: element.id, className: "rounded-xl border border-slate-200 bg-slate-50 p-3" }, /* @__PURE__ */ React3__default.default.createElement("div", { className: "mb-2 text-xs font-semibold tracking-wide text-slate-500" }, element.type.toUpperCase()), element.type === "text" ? /* @__PURE__ */ React3__default.default.createElement(
     "textarea",
     {
       value: element.content,
       onChange: (event) => updateElement(element.id, { content: event.target.value }),
       rows: 3,
-      style: { width: "100%" }
+      className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
     }
-  ) : /* @__PURE__ */ React3__default.default.createElement(
+  ) : /* @__PURE__ */ React3__default.default.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React3__default.default.createElement(
     "input",
     {
       type: "url",
       value: element.src,
       onChange: (event) => updateElement(element.id, { src: event.target.value }),
-      style: { width: "100%" }
+      className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
+    }
+  ), /* @__PURE__ */ React3__default.default.createElement("label", { className: "inline-flex items-center gap-2 text-sm text-slate-700" }, /* @__PURE__ */ React3__default.default.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: Boolean(element.isBackground),
+      onChange: (event) => updateElement(element.id, { isBackground: event.target.checked }),
+      className: "h-4 w-4 rounded border-slate-300 text-sky-600"
     }
-  ))))) : null);
+  ), "\u4F5C\u4E3A\u672C\u9875\u80CC\u666F\u56FE")))))) : null);
 };
+
+// src/festivalCard/components/FestivalCardStudio.tsx
 var FestivalCardStudio = ({ initialConfig, fetchConfig, onSave }) => {
   const { config, setConfig, loading, save, saving } = useFestivalCardConfig({
     initialConfig: normalizeFestivalCardConfig(initialConfig),
@@ -524,18 +476,135 @@ var FestivalCardStudio = ({ initialConfig, fetchConfig, onSave }) => {
     onSave
   });
   if (loading) return /* @__PURE__ */ React3__default.default.createElement("div", null, "\u52A0\u8F7D\u4E2D...");
-  return /* @__PURE__ */ React3__default.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16 } }, /* @__PURE__ */ React3__default.default.createElement(FestivalCardBook3D, { config }), /* @__PURE__ */ React3__default.default.createElement("div", null, /* @__PURE__ */ React3__default.default.createElement(FestivalCardConfigEditor, { value: config, onChange: setConfig }), onSave ? /* @__PURE__ */ React3__default.default.createElement(
+  return /* @__PURE__ */ React3__default.default.createElement("div", { className: "grid gap-4 lg:grid-cols-[1.45fr_1fr]" }, /* @__PURE__ */ React3__default.default.createElement(FestivalCardBook3D, { config, className: "h-full" }), /* @__PURE__ */ React3__default.default.createElement("div", null, /* @__PURE__ */ React3__default.default.createElement(FestivalCardConfigEditor, { value: config, onChange: setConfig }), onSave ? /* @__PURE__ */ React3__default.default.createElement(
     "button",
     {
       type: "button",
       onClick: () => void save(),
       disabled: saving,
-      style: { marginTop: 12, width: "100%", padding: "10px 16px" }
+      className: "mt-3 w-full rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-medium text-white disabled:opacity-60"
     },
     saving ? "\u4FDD\u5B58\u4E2D..." : "\u4FDD\u5B58\u914D\u7F6E"
   ) : null));
 };
 
+// src/festivalCard/components/FestivalCardConfigPage.tsx
+var FestivalCardConfigPage = ({
+  apiBase = "/api/festivalCard",
+  cardId,
+  mainPagePath = "/festivalCard"
+}) => {
+  const [list, setList] = React3.useState([]);
+  const [selectedId, setSelectedId] = React3.useState(cardId || "default-festival-card");
+  const parseListResponse2 = (data) => {
+    if (!data || typeof data !== "object") return [];
+    const payload = data.data;
+    if (!Array.isArray(payload)) return [];
+    return payload.filter((item) => Boolean(item && typeof item === "object" && typeof item.id === "string")).map((item) => ({ id: item.id, name: item.name }));
+  };
+  const parseConfigResponse2 = (data) => {
+    if (!data || typeof data !== "object") return normalizeFestivalCardConfig();
+    const payload = data.data;
+    if (!payload || typeof payload !== "object") return normalizeFestivalCardConfig();
+    return normalizeFestivalCardConfig(payload);
+  };
+  const reloadList = React3.useCallback(async () => {
+    const response = await fetch(apiBase, { cache: "no-store" });
+    const data = await response.json();
+    setList(parseListResponse2(data));
+  }, [apiBase]);
+  React3.useEffect(() => {
+    void reloadList();
+  }, [reloadList]);
+  const fetchConfig = async () => {
+    const response = await fetch(`${apiBase}/${encodeURIComponent(selectedId)}`, { cache: "no-store" });
+    const data = await response.json();
+    return parseConfigResponse2(data);
+  };
+  const saveConfig = async (config) => {
+    await fetch(`${apiBase}/${encodeURIComponent(selectedId)}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ config })
+    });
+    await reloadList();
+  };
+  const createNew = async () => {
+    const name = window.prompt("\u8BF7\u8F93\u5165\u65B0\u5361\u7247\u540D\u79F0");
+    if (!name) return;
+    const id = `festival-${Date.now()}`;
+    const config = normalizeFestivalCardConfig({
+      id,
+      name
+    });
+    await fetch(`${apiBase}/${encodeURIComponent(id)}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ config })
+    });
+    setSelectedId(id);
+    await reloadList();
+  };
+  const mainLink = React3.useMemo(() => `${mainPagePath}?cardId=${encodeURIComponent(selectedId)}`, [mainPagePath, selectedId]);
+  return /* @__PURE__ */ React3__default.default.createElement("div", { className: "grid gap-3" }, /* @__PURE__ */ React3__default.default.createElement("div", { className: "flex flex-wrap items-center gap-2" }, /* @__PURE__ */ React3__default.default.createElement(
+    "select",
+    {
+      value: selectedId,
+      onChange: (event) => setSelectedId(event.target.value),
+      className: "min-w-[200px] rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
+    },
+    list.map((item) => /* @__PURE__ */ React3__default.default.createElement("option", { key: item.id, value: item.id }, item.name || item.id))
+  ), /* @__PURE__ */ React3__default.default.createElement("button", { type: "button", onClick: () => void createNew(), className: "rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white" }, "\u65B0\u5EFA\u5361\u7247"), /* @__PURE__ */ React3__default.default.createElement("a", { href: mainLink, className: "rounded-lg border border-sky-200 bg-sky-50 px-3 py-2 text-sm text-sky-700" }, "\u6253\u5F00\u4E3B\u9875\u9762")), /* @__PURE__ */ React3__default.default.createElement(FestivalCardStudio, { fetchConfig, onSave: saveConfig }));
+};
+var isSummary = (value) => {
+  if (!value || typeof value !== "object") return false;
+  return typeof value.id === "string";
+};
+var parseListResponse = (data) => {
+  if (!data || typeof data !== "object") return [];
+  const payload = data.data;
+  if (!Array.isArray(payload)) return [];
+  return payload.filter(isSummary).map((item) => ({ id: item.id, name: item.name }));
+};
+var parseConfigResponse = (data) => {
+  if (!data || typeof data !== "object") return null;
+  const payload = data.data;
+  if (!payload || typeof payload !== "object") return null;
+  if (!Array.isArray(payload.pages)) return null;
+  return payload;
+};
+var FestivalCardManagedPage = ({
+  apiBase = "/api/festivalCard",
+  cardId,
+  configPagePath = "/festivalCard/config"
+}) => {
+  const [currentCardId, setCurrentCardId] = React3.useState(cardId || "");
+  const [config, setConfig] = React3.useState(null);
+  const [loading, setLoading] = React3.useState(true);
+  React3.useEffect(() => {
+    const fetchList = async () => {
+      const response = await fetch(apiBase, { cache: "no-store" });
+      const data = await response.json();
+      const items = parseListResponse(data);
+      const first = items[0];
+      if (!currentCardId && first) {
+        setCurrentCardId(first.id);
+      }
+    };
+    void fetchList();
+  }, [apiBase, currentCardId]);
+  React3.useEffect(() => {
+    if (!currentCardId) return;
+    setLoading(true);
+    void fetch(`${apiBase}/${encodeURIComponent(currentCardId)}`, { cache: "no-store" }).then((res) => res.json()).then((data) => setConfig(parseConfigResponse(data))).finally(() => setLoading(false));
+  }, [apiBase, currentCardId]);
+  const configLink = React3.useMemo(() => {
+    if (!currentCardId) return configPagePath;
+    return `${configPagePath}?cardId=${encodeURIComponent(currentCardId)}`;
+  }, [configPagePath, currentCardId]);
+  return /* @__PURE__ */ React3__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React3__default.default.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React3__default.default.createElement("a", { href: configLink, className: "rounded-lg border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm text-sky-300" }, "\u8FDB\u5165\u914D\u7F6E\u9875")), /* @__PURE__ */ React3__default.default.createElement("div", null, loading || !config ? /* @__PURE__ */ React3__default.default.createElement("div", { className: "py-12 text-center text-slate-400" }, "\u52A0\u8F7D\u4E2D...") : /* @__PURE__ */ React3__default.default.createElement(FestivalCardBook3D, { config })));
+};
+
 // src/festivalCard/server/db.ts
 var dbAdapter = null;
 var getFestivalCardDb = () => dbAdapter;
@@ -545,6 +614,16 @@ var FestivalCardService = class {
   constructor(options) {
     this.db = options?.db || getFestivalCardDb();
   }
+  async listConfigs() {
+    if (!this.db) {
+      return [{ id: DEFAULT_FESTIVAL_CARD_CONFIG.id || "default-festival-card", name: DEFAULT_FESTIVAL_CARD_CONFIG.name }];
+    }
+    if (this.db.listConfigs) {
+      const list = await this.db.listConfigs();
+      return list.length > 0 ? list : [{ id: DEFAULT_FESTIVAL_CARD_CONFIG.id || "default-festival-card", name: DEFAULT_FESTIVAL_CARD_CONFIG.name }];
+    }
+    return [{ id: DEFAULT_FESTIVAL_CARD_CONFIG.id || "default-festival-card", name: DEFAULT_FESTIVAL_CARD_CONFIG.name }];
+  }
   async getConfig(cardId = "default-festival-card") {
     if (!this.db) return DEFAULT_FESTIVAL_CARD_CONFIG;
     const config = await this.db.getConfig(cardId);
@@ -556,21 +635,43 @@ var FestivalCardService = class {
     await this.db.saveConfig(cardId, normalized);
     return normalized;
   }
+  async deleteConfig(cardId) {
+    if (!this.db?.deleteConfig) return;
+    await this.db.deleteConfig(cardId);
+  }
 };
 var memoryStore = /* @__PURE__ */ new Map();
+var defaultId = DEFAULT_FESTIVAL_CARD_CONFIG.id || "default-festival-card";
+if (!memoryStore.has(defaultId)) {
+  memoryStore.set(defaultId, DEFAULT_FESTIVAL_CARD_CONFIG);
+}
 var createInMemoryFestivalCardDb = () => ({
+  listConfigs() {
+    return Promise.resolve(
+      Array.from(memoryStore.entries()).map(([id, config]) => ({
+        id,
+        name: config.name || id
+      }))
+    );
+  },
   getConfig(id) {
     return Promise.resolve(memoryStore.get(id) || null);
   },
   saveConfig(id, config) {
     memoryStore.set(id, config);
     return Promise.resolve();
+  },
+  deleteConfig(id) {
+    memoryStore.delete(id);
+    return Promise.resolve();
   }
 });
 
 exports.DEFAULT_FESTIVAL_CARD_CONFIG = DEFAULT_FESTIVAL_CARD_CONFIG;
 exports.FestivalCardBook3D = FestivalCardBook3D;
 exports.FestivalCardConfigEditor = FestivalCardConfigEditor;
+exports.FestivalCardConfigPage = FestivalCardConfigPage;
+exports.FestivalCardManagedPage = FestivalCardManagedPage;
 exports.FestivalCardPageRenderer = FestivalCardPageRenderer;
 exports.FestivalCardService = FestivalCardService;
 exports.FestivalCardStudio = FestivalCardStudio;