完成

2026-03-17 17:53:14 +08:00
parent 65d89084f6
commit 011d4fe60f
33 changed files with 4192 additions and 5212 deletions
--- a/src/templates/lobster-birth-tx-template.tsx
+++ b/src/templates/lobster-birth-tx-template.tsx
@@ -0,0 +1,114 @@
+import type { CSSProperties } from "react";
+import type { CertificateTemplateComponentProps } from "@/lib/certificate";
+import { TemplateShell } from "@/templates/template-primitives";
+
+const width = 1576;
+const height = 1080;
+const backgroundSrc = "/lobster-birth-tx-blank.png";
+
+const fieldTextBaseStyle: CSSProperties = {
+  position: "absolute",
+  height: 50,
+  paddingInline: 0,
+  fontSize: 38,
+  fontWeight: 500,
+  lineHeight: "50px",
+  color: "#202020",
+  fontFamily: '"Microsoft YaHei", "PingFang SC", sans-serif',
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+};
+
+const fieldLayouts = {
+  childName: { left: 470, top: 340, minWidth: 470 },
+  familyAddress: { left: 420, top: 420, minWidth: 470 },
+  parentName: { left: 420, top: 510, minWidth: 470 },
+  birthDate: { left: 420, top: 600, minWidth: 470 },
+  birthAddress: { left: 420, top: 690, minWidth: 470 },
+} as const;
+
+function normalizeFieldValue(value: string) {
+  return value.replace(/[\r\n]+/g, " ").replace(/\s+/g, " ").trim();
+}
+
+function FieldText({
+  value,
+  style,
+}: {
+  value: string;
+  style: CSSProperties;
+}) {
+  const text = normalizeFieldValue(value);
+
+  if (!text) {
+    return null;
+  }
+
+  return <div style={{ ...fieldTextBaseStyle, ...style }}>{text}</div>;
+}
+
+export function LobsterBirthTxTemplate({ formData, qrSrc, currentCount }: CertificateTemplateComponentProps) {
+  return (
+    <TemplateShell
+      width={width}
+      height={height}
+      style={{
+        position: "relative",
+        borderRadius: 0,
+        boxShadow: "none",
+      }}
+    >
+      <img
+        src={backgroundSrc}
+        alt="小龙虾出生证明腾讯云版背景"
+        style={{
+          width,
+          height,
+          objectFit: "cover",
+          display: "block",
+          userSelect: "none",
+          pointerEvents: "none",
+        }}
+      />
+
+      <img
+        src={qrSrc}
+        alt="二维码"
+        style={{
+          position: "absolute",
+          left: 200,
+          top: 776,
+          width: 165,
+          height: 165,
+          objectFit: "cover",
+          borderRadius: 8
+        }}
+      />
+      <FieldText value={formData.childName} style={fieldLayouts.childName} />
+      <FieldText value={formData.familyAddress} style={fieldLayouts.familyAddress} />
+      <FieldText value={formData.parentName} style={fieldLayouts.parentName} />
+      <FieldText value={formData.birthDate} style={fieldLayouts.birthDate} />
+      <FieldText value={formData.birthAddress} style={fieldLayouts.birthAddress} />
+
+      <div
+        style={{
+          position: "absolute",
+          left: 820,
+          top: 915,
+          width: 520,
+          fontSize: 40,
+          fontWeight: 700,
+          lineHeight: "1.22",
+          color: "#323232",
+          fontFamily: '"Alimama ShuHeiTi", "Microsoft YaHei", sans-serif',
+          WebkitTextStroke: "4px #ffffff",
+          paintOrder: "stroke fill",
+          textAlign: "center",
+        }}
+      >
+        第 <span style={{ color: "#e53e3e" }}>{currentCount}</span> 个出生的龙虾宝宝
+      </div>
+    </TemplateShell>
+  );
+}