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
   );
 };

src/index.css

@@ -590,7 +590,7 @@ html.app-dark-shell body {
 .ps-modal-overlay {
   position: fixed;
   inset: 0;
-  z-index: 9000;
+  z-index: 10000;
   display: flex;
   align-items: center;
   justify-content: center;

src/labelRenderer.ts

@@ -588,7 +588,10 @@ export type ReferenceBackgroundRenderOptions = Pick<
 
 type ReferenceBackgroundTemplate = Pick<
   LabelTemplate,
-  'previewReferenceBackground' | 'previewReferenceBackgroundOpacity' | 'previewReferenceBackgroundFit'
+  | 'previewReferenceBackground'
+  | 'previewReferenceBackgroundOpacity'
+  | 'previewReferenceBackgroundFit'
+  | 'enablePreviewReferenceBackground'
 >;
 
 function buildReferenceBackgroundRenderOptions(
@@ -597,6 +600,9 @@ function buildReferenceBackgroundRenderOptions(
   if (!template.previewReferenceBackground) {
     return {};
   }
+  if (template.enablePreviewReferenceBackground === false) {
+    return {};
+  }
   return {
     referenceBackground: template.previewReferenceBackground,
     referenceBackgroundOpacity: template.previewReferenceBackgroundOpacity ?? 100,
@@ -604,7 +610,7 @@ function buildReferenceBackgroundRenderOptions(
   };
 }
 
-/** 模板列表 / 设计预览等：有参考图即绘制 */
+/** 模板列表 / 设计预览等：参考图且启用预览时绘制 */
 export function resolveReferenceBackgroundForPreview(
   template: ReferenceBackgroundTemplate
 ): ReferenceBackgroundRenderOptions {
@@ -619,7 +625,14 @@ export function resolveReferenceBackgroundForOutput(
   if (!template.includeReferenceBackgroundInOutput) {
     return {};
   }
-  return buildReferenceBackgroundRenderOptions(template);
+  if (!template.previewReferenceBackground) {
+    return {};
+  }
+  return {
+    referenceBackground: template.previewReferenceBackground,
+    referenceBackgroundOpacity: template.previewReferenceBackgroundOpacity ?? 100,
+    referenceBackgroundFit: template.previewReferenceBackgroundFit ?? 'cover',
+  };
 }
 
 /** 离屏渲染标签为 PNG data URL */

src/types.ts

@@ -252,6 +252,8 @@ export interface LabelTemplate {
   previewReferenceBackgroundOpacity?: number;
   /** 预览参考背景适应方式，默认 cover */
   previewReferenceBackgroundFit?: 'contain' | 'cover' | 'fill';
+  /** 设计预览（画布、模板列表缩略图）是否显示参考背景，默认 true */
+  enablePreviewReferenceBackground?: boolean;
   /** 生成 PDF / 打印 / 排版预览输出时是否绘制参考背景，默认 false */
   includeReferenceBackgroundInOutput?: boolean;
   /** 批量导出图片时的文件名模板，支持 {#SEQ}、{#INDEX}、{变量名}；留空则按序号补零命名 */