fix

src/components/LabelDesigner.tsx

@@ -229,6 +229,13 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
     [template.variableDefaults]
   );
 
+  const showReferencePreview = useMemo(
+    () =>
+      !!template.previewReferenceBackground &&
+      template.enablePreviewReferenceBackground !== false,
+    [template.previewReferenceBackground, template.enablePreviewReferenceBackground]
+  );
+
   const localElementsRef = useRef<TemplateElement[] | null>(null);
   /** 交互开始时的元素快照：拖动底图分层、缩放节流重绘 */
   const [interactionSnapshot, setInteractionSnapshot] = useState<TemplateElement[] | null>(
@@ -1654,10 +1661,10 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
           <div
             ref={canvasRef}
             className={`absolute inset-0 shadow-[0_2px_20px_rgba(0,0,0,0.5)] select-none overflow-hidden ${
-              template.previewReferenceBackground ? '' : 'bg-white'
+              showReferencePreview ? '' : 'bg-white'
             }`}
           >
-            {template.previewReferenceBackground && (
+            {showReferencePreview && (
               <img
                 src={template.previewReferenceBackground}
                 alt=""
@@ -1681,7 +1688,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                 rowData={null}
                 rowIndex={0}
                 showBorder={false}
-                transparentBackground={!!template.previewReferenceBackground}
+                transparentBackground={showReferencePreview}
                 variableDefaults={previewDefaults}
                 renderScale={canvasRenderScale}
               />

src/components/PropSidebar.tsx

@@ -858,7 +858,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
         预览参考背景
       </h5>
       <p className="text-[9px] text-[#777] leading-relaxed">
-        上传底图作为设计参考，便于对照条件显示的背景元素；默认仅设计画布可见，可按需开启生成与打印输出。
+        上传底图作为设计参考；可分别控制设计预览与生成/打印输出是否显示。
       </p>
       <label className="ps-btn text-[10px] cursor-pointer inline-flex">
         <Upload className="w-3.5 h-3.5" />
@@ -879,6 +879,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                   template.previewReferenceBackgroundOpacity ?? 100,
                 previewReferenceBackgroundFit:
                   template.previewReferenceBackgroundFit ?? 'cover',
+                enablePreviewReferenceBackground: true,
               });
             reader.readAsDataURL(file);
             e.target.value = '';
@@ -930,6 +931,25 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
               className="w-full accent-[#31a8ff]"
             />
           </div>
+          <label className="flex items-start gap-2">
+            <input
+              type="checkbox"
+              checked={template.enablePreviewReferenceBackground !== false}
+              onChange={(e) =>
+                onChangeTemplate({
+                  ...template,
+                  enablePreviewReferenceBackground: e.target.checked ? true : false,
+                })
+              }
+              className="ps-checkbox mt-0.5"
+            />
+            <span className="text-xs text-[#ccc] leading-normal">
+              设计预览中显示参考背景
+              <span className="block text-[9px] text-[#777] mt-0.5">
+                控制设计画布与模板列表缩略图；关闭后仍保留参考图，可随时重新开启
+              </span>
+            </span>
+          </label>
           <label className="flex items-start gap-2">
             <input
               type="checkbox"
@@ -957,6 +977,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                 previewReferenceBackground: undefined,
                 previewReferenceBackgroundOpacity: undefined,
                 previewReferenceBackgroundFit: undefined,
+                enablePreviewReferenceBackground: undefined,
                 includeReferenceBackgroundInOutput: undefined,
               })
             }

src/components/VisibilityRuleDialog.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import { VisibilityRule } from '../types';
 import { visibilityOperatorNeedsValue } from '../utils';
@@ -65,7 +66,7 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [open, onClose]);
 
-  if (!open) return null;
+  if (!open || typeof document === 'undefined') return null;
 
   const target = draft.target ?? 'variable';
   const canConfirm = target === 'content' || draft.variable.trim().length > 0;
@@ -86,7 +87,7 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
     onClose();
   };
 
-  return (
+  return createPortal(
     <div className="ps-modal-overlay" onClick={onClose} role="presentation">
       <div
         className="ps-modal"
@@ -131,6 +132,7 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
           </div>
         </form>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 };