导出

src/components/PropSidebar.tsx

@@ -7,6 +7,7 @@ import {
   isTemplateVariableInUse,
   removeUnusedTemplateVariable,
   resolveVisibilityRules,
+  toggleVisibilityRuleEnabled,
 } from '../utils';
 import { VisibilityRuleDialog } from './VisibilityRuleDialog';
 import { VisibilityRuleSummary } from './VisibilityRuleSummary';
@@ -821,6 +822,13 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                         rule={rule}
                         onEdit={() => setVisibilityRuleDialog({ mode: 'edit', index })}
                         onDelete={() => removeRule(index)}
+                        onToggleEnabled={() =>
+                          setRules(
+                            rules.map((item, i) =>
+                              i === index ? toggleVisibilityRuleEnabled(item) : item
+                            )
+                          )
+                        }
                       />
                     ))}
                   </div>
@@ -843,8 +851,127 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
     );
   };
 
+  const renderPreviewReferenceBackgroundFields = () => (
+    <div className="space-y-3">
+      <h5 className="ps-section-title">
+        <ImageIcon className="w-3.5 h-3.5" />
+        预览参考背景
+      </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" />
+        上传参考图
+        <input
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = () =>
+              onChangeTemplate({
+                ...template,
+                previewReferenceBackground: reader.result as string,
+                previewReferenceBackgroundOpacity:
+                  template.previewReferenceBackgroundOpacity ?? 100,
+                previewReferenceBackgroundFit:
+                  template.previewReferenceBackgroundFit ?? 'cover',
+              });
+            reader.readAsDataURL(file);
+            e.target.value = '';
+          }}
+        />
+      </label>
+      {template.previewReferenceBackground && (
+        <>
+          <div className="border border-[#3a3a3a] bg-[#1e1e1e] p-2">
+            <img
+              src={template.previewReferenceBackground}
+              alt="预览参考背景"
+              className="block max-h-24 mx-auto object-contain"
+            />
+          </div>
+          <div>
+            <label className="ps-field-label">适应方式</label>
+            <FieldSelect
+              value={template.previewReferenceBackgroundFit ?? 'cover'}
+              onChange={(e) =>
+                onChangeTemplate({
+                  ...template,
+                  previewReferenceBackgroundFit: e.target.value as 'contain' | 'cover' | 'fill',
+                })
+              }
+              className="ps-field text-[11px]"
+            >
+              <option value="cover">覆盖 (cover)</option>
+              <option value="contain">包含 (contain)</option>
+              <option value="fill">拉伸 (fill)</option>
+            </FieldSelect>
+          </div>
+          <div>
+            <label className="ps-field-label">
+              不透明度 ({template.previewReferenceBackgroundOpacity ?? 100}%)
+            </label>
+            <input
+              type="range"
+              min="0"
+              max="100"
+              step="1"
+              value={template.previewReferenceBackgroundOpacity ?? 100}
+              onChange={(e) =>
+                onChangeTemplate({
+                  ...template,
+                  previewReferenceBackgroundOpacity: Number(e.target.value),
+                })
+              }
+              className="w-full accent-[#31a8ff]"
+            />
+          </div>
+          <label className="flex items-start gap-2">
+            <input
+              type="checkbox"
+              checked={template.includeReferenceBackgroundInOutput ?? false}
+              onChange={(e) =>
+                onChangeTemplate({
+                  ...template,
+                  includeReferenceBackgroundInOutput: e.target.checked ? true : undefined,
+                })
+              }
+              className="ps-checkbox mt-0.5"
+            />
+            <span className="text-xs text-[#ccc] leading-normal">
+              生成与打印时包含参考背景
+              <span className="block text-[9px] text-[#777] mt-0.5">
+                开启后 PDF 导出、打印与排版预览输出均会绘制参考图
+              </span>
+            </span>
+          </label>
+          <button
+            type="button"
+            onClick={() =>
+              onChangeTemplate({
+                ...template,
+                previewReferenceBackground: undefined,
+                previewReferenceBackgroundOpacity: undefined,
+                previewReferenceBackgroundFit: undefined,
+                includeReferenceBackgroundInOutput: undefined,
+              })
+            }
+            className="text-[9px] text-[#31a8ff] hover:underline cursor-pointer"
+          >
+            清除参考背景
+          </button>
+        </>
+      )}
+    </div>
+  );
+
   const renderPropertiesPanelBody = () => (
     <>
+      <div className="pb-3 border-b border-[#3a3a3a]">{renderPreviewReferenceBackgroundFields()}</div>
       {/* Label Canvas Dimensions */}
       {!selectedElem && (
         <div className="space-y-4">