-
-
- - To get started, edit the page.tsx file. -
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-
+ {/* 小龙虾姓名 */}
+
+ {formData.childName}
+
+ {/* 家庭住址 */}
+
+ {formData.familyAddress}
+
+ {/* 家长姓名 */}
+
+ {formData.parentName}
+
+ {/* 出生日期 */}
+
+ {formData.birthDate}
+
+ {/* 出生地址 */}
+
+ {formData.birthAddress}
+
+
+ 第 {currentCount} 个出生的龙虾宝宝
+
+ {text}
;
+}
+
+export function LobsterBirthTxTemplate({ formData, qrSrc, currentCount }: CertificateTemplateComponentProps) {
+ return (
+
+ 第 {currentCount} 个出生的龙虾宝宝
+
+
+
+ );
+}
+
+export function TemplateShell({
+ width,
+ height,
+ children,
+ style,
+}: {
+ width: number;
+ height: number;
+ children: ReactNode;
+ style?: CSSProperties;
+}) {
+ return (
+
+ {children}
+
+
+ {children}
+
+ );
+}
+
+export function CertificateFieldCard({
+ label,
+ value,
+ accent,
+ dark = false,
+}: {
+ label: string;
+ value: string;
+ accent: string;
+ dark?: boolean;
+}) {
+ return (
+
+
+ );
+}
+
+export function StatsBadge({ total }: { total: number }) {
+ return (
+
+ {label}
+
+
+ {value}
+
+
+ 累计生成 {total} 张
+
+ );
+}
diff --git a/src/ui/certificate-generator.tsx b/src/ui/certificate-generator.tsx
new file mode 100644
index 0000000..651eb01
--- /dev/null
+++ b/src/ui/certificate-generator.tsx
@@ -0,0 +1,268 @@
+import { toPng } from "html-to-image";
+import type { ChangeEvent } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type {
+ CertificateFieldKey,
+ CertificateFormData,
+ CertificateTemplateDefinition,
+} from "@/lib/certificate";
+import {
+ certificateFieldLabels,
+ certificateFieldOrder,
+ certificateTemplates,
+ customTemplateUploadEnabled,
+ getQrSource,
+} from "@/lib/certificate";
+import { fetchStats, incrementGenerationCount, type StatsResponse } from "@/lib/stats";
+import { TemplateScaleFrame } from "@/templates/template-primitives";
+
+const defaultFormData: CertificateFormData = {
+ childName: "",
+ familyAddress: "",
+ parentName: "",
+ birthDate: "",
+ birthAddress: "",
+};
+
+const emptyStats: StatsResponse = {
+ total: 0,
+ byTemplate: {},
+ updatedAt: null,
+};
+
+const previewWidth = 760;
+const statsUnavailableMessage =
+ "统计服务未连接，当前数量不会持久化。请同时运行 npm run dev 和 npm run dev:server，或直接运行 npm run dev:all。";
+const statsIncrementFailedMessage =
+ "图片已下载，但统计服务没有记录这次生成。请同时运行 npm run dev 和 npm run dev:server，或直接运行 npm run dev:all。";
+
+function TemplateThumbnail({
+ template,
+ formData,
+ qrSource,
+ currentCount,
+}: {
+ template: CertificateTemplateDefinition;
+ formData: CertificateFormData;
+ qrSource: string;
+ currentCount: number;
+}) {
+ const scale = 220 / template.width;
+ const Component = template.Component;
+
+ return (
+
+
+
+
+ );
+}
+
+export function CertificateGenerator() {
+ const [selectedTemplateId, setSelectedTemplateId] = useState(
+ certificateTemplates[0]?.id ?? "",
+ );
+ const [formData, setFormData] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 模板切换
+
+ {certificateTemplates.map((template) => {
+ const active = template.id === selectedTemplate.id;
+
+ return (
+
+ );
+ })}
+
+
+
+
+ {errorMessage ?
+
+ 图片预览
+{errorMessage}
: null}
+ {statsMessage ? {statsMessage}
: null}
+
+
+
+
+
+
+
+
+
+