From 81e41bc38b4cf95ebeb3ebb45ec6a721e0bcfd43 Mon Sep 17 00:00:00 2001
From: duxingchen <duxingchen@iris-rs.cn>
Date: Thu, 6 Aug 2026 10:51:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A2=84=E8=A7=88=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84:=20=E5=9B=BA=E5=AE=9AQR120px+Flex=E5=88=86=E6=A0=8F+l?=
 =?UTF-8?q?ine-clamp3=E6=88=AA=E6=96=AD+CSS=E7=B1=BB=E5=90=8D=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/admin/CreateProductDialog.tsx   | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/admin/CreateProductDialog.tsx b/frontend/src/pages/admin/CreateProductDialog.tsx
index c31e9b5..e128e10 100644
--- a/frontend/src/pages/admin/CreateProductDialog.tsx
+++ b/frontend/src/pages/admin/CreateProductDialog.tsx
@@ -358,35 +358,34 @@ export default function CreateProductDialog({ open, onClose, onCreated }: Props)
       {createdSn ? (
         /* ---- 成功页 ---- */
         <div className="py-4">
-          <div style={{
-            display: "flex", gap: 12, alignItems: "flex-start",
-            border: "1px solid #e5e7eb", borderRadius: 10, padding: 14, background: "#fff"
-          }}>
-            <img
-              src={`/api/v1/products/qrcode/${createdSn}`}
-              alt={`QR-${createdSn}`}
-              style={{ width: "50%", flexShrink: 0, borderRadius: 6 }}
-            />
-            <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 6 }}>
-              <div style={{ fontSize: 14, fontWeight: 900, lineHeight: 1.15, wordBreak: "break-all",
-                display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: 3, overflow: "hidden" }}>
-                名：{selected?.material_name ?? ""}
+          <div 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>
+              <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>
-              <div style={{ fontSize: 14, fontWeight: 900 }}>规：{selected?.spec_model ?? ""}</div>
-              <div style={{ fontSize: 14, fontWeight: 900 }}>单：{orderNo || "—"}</div>
             </div>
-          </div>
-          <div style={{
-            marginTop: 10, fontSize: 18, fontWeight: 900, textAlign: "center",
-            borderTop: "2px solid #000", paddingTop: 6, letterSpacing: 1, fontFamily: "monospace"
-          }}>
-            码：{createdSn}
+            <div className="label-bottom">码：{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>
       ) : (
         /* ---- 表单 ---- */