115 lines
3.0 KiB
TypeScript
115 lines
3.0 KiB
TypeScript
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>
|
|
);
|
|
}
|