duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

标签预览彻底改为内联样式Flex: QR锁110px+line-clamp截断+无class依赖防重叠

Browse Source
This commit is contained in:
duxingchen
2026-08-06 10:56:29 +08:00
parent 1ba44d4b0a
commit 5f7b8e9394
1 changed files with 27 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/pages/admin/CreateProductDialog.tsx
View File

@ -311,11 +311,10 @@ export default function CreateProductDialog({ open, onClose, onCreated }: Props)
<head><title>打印标签</title>${styles}
<style>
@page { size: auto; margin: 0mm; }
body { margin: 0; padding: 0; background: #fff; }
.label-preview-box { border: none !important; margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; height: 100vh !important; }
body { margin: 0; padding: 0; background: #fff; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
</style>
</head>
<body><div class="label-preview-box">${printContent}</div></body>
<body><div style="display:flex;flex-direction:column;width:100%;max-width:360px;padding:12px;box-sizing:border-box;background:#fff;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">${printContent}</div></body>
</html>
`);
doc.close();
@ -343,34 +342,40 @@ export default function CreateProductDialog({ open, onClose, onCreated }: Props)
{createdSn ? (
/* ---- 成功页 ---- */
<div className="py-4">
<div id="label-print-area" className="label-preview-box">
<div className="label-top">
<div className="qr-wrapper">
<img src={`/api/v1/products/qrcode/${createdSn}`} alt="QR" className="qr-img" />
<div id="label-print-area" style={{
display: "flex", flexDirection: "column", width: "100%", maxWidth: 360,
margin: "0 auto", padding: 12, boxSizing: "border-box", background: "#fff",
fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
border: "1px solid #e5e7eb", borderRadius: 8
}}>
<div style={{ display: "flex", flexDirection: "row", alignItems: "flex-start", gap: 12, width: "100%" }}>
<div style={{ flex: "0 0 110px", width: 110, height: 110 }}>
<img src={`/api/v1/products/qrcode/${createdSn}`} alt="QR"
style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
</div>
<div className="text-wrapper">
<div className="text-item name-item">名：{selected?.material_name ?? ""}</div>
<div className="text-item">规：{selected?.spec_model ?? ""}</div>
<div className="text-item">单：{orderNo || "—"}</div>
<div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 6 }}>
<div style={{ fontSize: 14, fontWeight: 900, color: "#000", lineHeight: 1.2, wordBreak: "break-all",
display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: 3, overflow: "hidden" }}>
名: {selected?.material_name ?? ""}
</div>
<div style={{ fontSize: 14, fontWeight: 900, color: "#000", lineHeight: 1.2, wordBreak: "break-all" }}>
规: {selected?.spec_model ?? ""}
</div>
<div style={{ fontSize: 14, fontWeight: 900, color: "#000", lineHeight: 1.2, wordBreak: "break-all" }}>
单: {orderNo || "—"}
</div>
</div>
<div className="label-bottom">码：{createdSn}</div>
</div>
<div style={{ width: "100%", marginTop: 12, paddingTop: 8, borderTop: "2px solid #000",
textAlign: "center", fontSize: 18, fontWeight: 900, color: "#000", letterSpacing: 1 }}>
码: {createdSn}
</div>
</div>
<p className="mt-2 text-center text-sm text-green-600">产品创建成功！</p>
<Space className="mt-3 flex justify-center">
<Button type="primary" onClick={printCurrentQRCode}>🖨️ 直接打印标签</Button>
<Button onClick={() => setCreatedSn(null)}>继续创建</Button>
</Space>
<style>{`
.label-preview-box { width:100%; max-width:380px; margin:0 auto; border:1px solid #e5e7eb; border-radius:8px; padding:16px; background:#fff; display:flex; flex-direction:column; gap:12px; box-sizing:border-box; }
.label-top { display:flex; flex-direction:row; align-items:flex-start; gap:16px; width:100%; }
.qr-wrapper { flex:0 0 120px; width:120px; height:120px; }
.qr-img { width:100%; height:100%; object-fit:contain; display:block; }
.text-wrapper { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.text-item { font-size:14px; font-weight:bold; line-height:1.3; color:#000; word-break:break-all; }
.name-item { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.label-bottom { width:100%; text-align:center; font-size:20px; font-weight:900; color:#000; border-top:2px solid #000; padding-top:10px; letter-spacing:2px; }
`}</style>
</div>
) : (
/* ---- 表单 ---- */