导出

src/components/LabelDesigner.tsx

@@ -1653,20 +1653,27 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
           >
           <div
             ref={canvasRef}
-            className="absolute inset-0 bg-white shadow-[0_2px_20px_rgba(0,0,0,0.5)] select-none overflow-hidden"
+            className={`absolute inset-0 shadow-[0_2px_20px_rgba(0,0,0,0.5)] select-none overflow-hidden ${
+              template.previewReferenceBackground ? '' : 'bg-white'
+            }`}
           >
-            {/* <div className="absolute -top-5 left-0 text-[10px] font-mono text-[#aaa]">
-              {template.width} mm
-            </div>
-            <div
-              className="absolute -left-8 top-0 text-[10px] font-mono text-[#aaa]"
-              style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
-            >
-              {template.height} mm
-            </div> */}
+            {template.previewReferenceBackground && (
+              <img
+                src={template.previewReferenceBackground}
+                alt=""
+                className="absolute inset-0 w-full h-full pointer-events-none select-none z-0"
+                style={{
+                  objectFit: template.previewReferenceBackgroundFit ?? 'cover',
+                  opacity: Math.min(
+                    1,
+                    Math.max(0, (template.previewReferenceBackgroundOpacity ?? 100) / 100)
+                  ),
+                }}
+              />
+            )}
 
             {/* 整页统一渲染：半透明背景按图层层级与下方元素真实合成 */}
-            <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
+            <div className="absolute inset-0 overflow-hidden pointer-events-none z-[1]">
               <CanvasLabelImage
                 widthMm={template.width}
                 heightMm={template.height}
@@ -1674,6 +1681,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                 rowData={null}
                 rowIndex={0}
                 showBorder={false}
+                transparentBackground={!!template.previewReferenceBackground}
                 variableDefaults={previewDefaults}
                 renderScale={canvasRenderScale}
               />