标签预览重构: 固定QR120px+Flex分栏+line-clamp3截断+CSS类名化

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>
       ) : (
         /* ---- 表单 ---- */